Portfolio – Chris Gilligan » new media https://chrisgilligan.com portfolio of web work Wed, 10 Jul 2019 20:57:23 -0400 en-US hourly 1 https://wordpress.org/?v=5.3 Responsive and Accessible Charts and Graphs https://chrisgilligan.com/portfolio/responsive-accessible-charts-graphs/ https://chrisgilligan.com/portfolio/responsive-accessible-charts-graphs/#respond Wed, 15 Mar 2017 13:24:55 +0000 https://chrisgilligan.com/?p=2429 I have been looking for a simple solution to create and manage “dashboard” type charts on a website. Something that would produce editable graphs, accessible content for screen readers, and fit into a responsive design. Chartist.js is a simple and independent library to create SVG charts in the DOM. Various plugins are available to extend […]

The post Responsive and Accessible Charts and Graphs appeared first on Chris Gilligan » new media.

]]>

I have been looking for a simple solution to create and manage “dashboard” type charts on a website. Something that would produce editable graphs, accessible content for screen readers, and fit into a responsive design.

Chartist.js is a simple and independent library to create SVG charts in the DOM. Various plugins are available to extend the functionality and display options. In this example, the accessibility and axis label plugins are used. There are also plugins available for frameworks, and for WordPress (as a TablePress plugin extension).

It makes a responsive chart, with an optional accessible table (hidden by default, but displayed on this example, to show the values).
Check out the CodePen attached to this post. You can interact with the chart by clicking on the legend labels to toggle the series on/off.
After a chart is set up, the only values a user would need to modify are the data variables at the top of the JS: labels and series. If the y-axis series values change, they would have to modify axisY values for ticks, high/low. The remainder of the JS is display parameters and accessibility options.

See the Pen Chartist Graph with (visible) accessibility, point label, legend and axis label plugins: CCTN by utcwebdev (@utcwebdev) on CodePen.dark

 

The post Responsive and Accessible Charts and Graphs appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/responsive-accessible-charts-graphs/feed/ 0
TEDx Event Website https://chrisgilligan.com/portfolio/tedx-event-website/ https://chrisgilligan.com/portfolio/tedx-event-website/#respond Wed, 04 Nov 2015 17:13:14 +0000 https://chrisgilligan.com/?p=2342 I’m very excited to help out with Chattanooga’s premier TEDx event: TEDxChattanooga. For this site, I chose a responsive Bootstrap 3 SASS WordPress theme, originally developed for TEDxToronto. I made a few tweaks and improvements to better fit our event, and worked with April Cox from UT Chattanooga to dial in the design and architecture. Developed on […]

The post TEDx Event Website appeared first on Chris Gilligan » new media.

]]>

I’m very excited to help out with Chattanooga’s premier TEDx event: TEDxChattanooga.

TEDxChattanooga website screenshot

TEDxChattanooga website

screen-shot 2015-11-04 at 11.51.25 AMFor this site, I chose a responsive Bootstrap 3 SASS WordPress theme, originally developed for TEDxToronto. I made a few tweaks and improvements to better fit our event, and worked with April Cox from UT Chattanooga to dial in the design and architecture. Developed on an Amazon EC2+Ubuntu+Webmin server running a Nginx+MySQL+PHP-FPM stack, the site should handle plenty of traffic, and can be scaled up to meet spikes in demand coinciding with the event.

Please check out TEDxChattanooga.com!

Love Open Source software, but hate the generic branding? No problem. It’s very simple to create a fully-branded login screen for WordPress and Webmin/Virtualmin, to match a client’s logo and color scheme.


 

screen-shot 2015-11-04 at 11.49.19 AM

screen-shot 2015-11-04 at 12.06.49 PM

screen-shot 2015-11-04 at 12.09.52 PM

The post TEDx Event Website appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/tedx-event-website/feed/ 0
Land Trust Website with Events Calendar https://chrisgilligan.com/portfolio/land-trust-website-with-events-calendar/ https://chrisgilligan.com/portfolio/land-trust-website-with-events-calendar/#respond Wed, 14 Aug 2013 20:44:39 +0000 https://chrisgilligan.com/?p=2043 Lula Lake Land Trust needed a quick website update to replace a neglected site that had been dormant for years. I chose WordPress with a Bootstrap theme for quick and flexible development, and generated a color palette using the Lavish Bootstrap color scheme generator. This is a great example of a site that can come […]

The post Land Trust Website with Events Calendar appeared first on Chris Gilligan » new media.

]]>

Lula Lake Land Trust needed a quick website update to replace a neglected site that had been dormant for years. I chose WordPress with a Bootstrap theme for quick and flexible development, and generated a color palette using the Lavish Bootstrap color scheme generator.

This is a great example of a site that can come together in mere days, look great, and function well on every device from desktop to tablet to smart phone.

Lula Lake Land Trust website

Lula Lake Land Trust website

screen-shot 2013-08-14 at 4.47.54 PM

The post Land Trust Website with Events Calendar appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/land-trust-website-with-events-calendar/feed/ 0
University Website and Blog Redesign https://chrisgilligan.com/portfolio/university-website-and-blog-redesign/ https://chrisgilligan.com/portfolio/university-website-and-blog-redesign/#respond Wed, 14 Aug 2013 18:03:46 +0000 https://chrisgilligan.com/?p=2038 This was a team project for the University of Tennessee at Chattanooga, my alma mater and current employer. I was hired by UTC as web development specialist in late 2012, and worked with a cross-discipline team on the redesign, information architecture, 10,000 page migration to CMS and user training for over 300 web editors. The […]

The post University Website and Blog Redesign appeared first on Chris Gilligan » new media.

]]>

This was a team project for the University of Tennessee at Chattanooga, my alma mater and current employer. I was hired by UTC as web development specialist in late 2012, and worked with a cross-discipline team on the redesign, information architecture, 10,000 page migration to CMS and user training for over 300 web editors.

The design was built on Bootstrap, a versatile framework that includes a flexible, responsive grid system, icon font, and LESS/CSS styling for nearly any imaginable UI element. The site looks great on desktop, tablet and mobile phone; images are resized according to users’ maximum screen width by Adaptive Images.

utc-edu-bootstrap-site

We worked with OmniUpdate to port the functional HTML templates to the OU Campus Content Management System.

A companion WordPress theme was created to retrofit the UTC Blogs MultiSite. Enhanced WordPress RSS feeds in the media namespace populate news feeds on the home page.

Deets for Devs

We’re using Bootstrap 2.3.2 with Font Awesome 3.2.1 icons.

For initial HTML development, I used  Kickstrap.

I found a lot of great examples and code at  WrapBootstrap and Bootsnip.

Our custom CSS files work for both the OU Campus site and WordPress blogs, because templates for both are built on Bootstrap… on WordPress, we use a child theme with a  BootSwatch style custom CSS.

We host our own CSS, but pull fonts and JavaScript libraries from CDNs. Off-Canvas, drop-down sidenav was custom built using Bootstrap components, but now Jasny’s Bootstrap 3.0 fork (jasny.github.io/bootstrap) has a similar extension.

LESS Files: along with the entire development site (was easier to zip this way). Download & unzip, it will run as a local site if you like…

Start with kickstrap.less, see what it includes — mostly the standard Bootstrap LESS files. Next look at theme.less, which jumps to Kickstrap/themes/utcms/theme.less, which has all of the custom stuff and some comments. Read the comments and then look at the individual files to see what’s going on: basically, anything that’s commented out uses the base Bootstrap CSS. At some point, I would like to change this workflow to pull the standard Bootstrap CSS from a CDN, and only load the override CSS.

Most of our specific changes are in variables.less, navbar.less, main.less (final custom overrides and tweaks) and logotype.less (for the header). I used CODA as an IDE, with CodeKit as my LESS compiler.

The post University Website and Blog Redesign appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/university-website-and-blog-redesign/feed/ 0
Punk Rock Music Community https://chrisgilligan.com/portfolio/punk-rock-music-community/ https://chrisgilligan.com/portfolio/punk-rock-music-community/#respond Tue, 10 Apr 2012 14:20:41 +0000 https://chrisgilligan.com/?p=771 Punktastic.com is a community powered site that covers punk music in Britain, but is poised to go worldwide. They cover punk and hardcore shows and festivals, and provide album reviews, video interviews and more. With a growing audience and user base, Punktastic needed a more reliable and robust web server, so they made the move […]

The post Punk Rock Music Community appeared first on Chris Gilligan » new media.

]]>

Punktastic.com is a community powered site that covers punk music in Britain, but is poised to go worldwide. They cover punk and hardcore shows and festivals, and provide album reviews, video interviews and more.

With a growing audience and user base, Punktastic needed a more reliable and robust web server, so they made the move to a dedicated CentOS 5 series web server with 3GB RAM. While this is a relatively low-end box, it has plenty of horsepower for a single WordPress site and phpBB3 forum.

Punktastic.com web site

For this GIG, I soloed on…

  • transferring the site from a WAMP development server to the live LAMP server
  • configuring an active firewall to block the baddies
  • installing monitoring and administration tools
  • tuning Apache and MySQL for high traffic
  • integrating APC PHP Cache to speed up web pages and provide better concurrency

Loud Fast Rules.

The post Punk Rock Music Community appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/punk-rock-music-community/feed/ 0
Farm to Table Restaurant Website https://chrisgilligan.com/portfolio/farm-to-table-restaurant-website/ https://chrisgilligan.com/portfolio/farm-to-table-restaurant-website/#respond Sat, 24 Dec 2011 21:08:25 +0000 https://chrisgilligan.com/?p=566 Joe Naturals Farm Store Cafe is a “farm to table” cafe and natural foods store located in historic Leiper’s Fork, near Franklin, TN. The owners contacted me through a fellow farmer with whom I have worked on several web projects. The website project was languishing, after being abandoned by a designer who lacked knowledge of […]

The post Farm to Table Restaurant Website appeared first on Chris Gilligan » new media.

]]>

Joe Naturals Farm Store Cafe is a “farm to table” cafe and natural foods store located in historic Leiper’s Fork, near Franklin, TN. The owners contacted me through a fellow farmer with whom I have worked on several web projects.

Joe Natural's website

The website project was languishing, after being abandoned by a designer who lacked knowledge of WordPress template coding. The site needed better integration with WordPress, including text-based navigation and replacement of scanned layout comps, which were being used for page display & navigation.

I reworked the stylesheet to replace image-based text with CSS styled text, integrated WordPress navigation, and then added a few WordPress plugins.

I also worked with the farmers’ social media person to add social media links and integrate Facebook “Likes” and cross publishing from the WordPress blog to the Facebook Fan Page.

The post Farm to Table Restaurant Website appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/farm-to-table-restaurant-website/feed/ 0
E-Commerce Magazine Subscription Website https://chrisgilligan.com/portfolio/e-commerce-magazine-subscription-website/ https://chrisgilligan.com/portfolio/e-commerce-magazine-subscription-website/#respond Fri, 15 Jul 2011 14:59:51 +0000 https://chrisgilligan.com/?p=447 Light Sport & Ultralight Flying Magazine needed an easy-to-manage e-commerce solution, coupled with Content Management and slideshows. I used Joomla plus VirtueMart, and SlideShowPro to give them a sophisticated system that is simple to use. The magazine has been in circulation since 1975, so the publishers know how to survive and thrive. Online sales & […]

The post E-Commerce Magazine Subscription Website appeared first on Chris Gilligan » new media.

]]>

Light Sport & Ultralight Flying Magazine needed an easy-to-manage e-commerce solution, coupled with Content Management and slideshows.

I used Joomla plus VirtueMart, and SlideShowPro to give them a sophisticated system that is simple to use.

Light Sport & Ultralight Flying Magazine website

The magazine has been in circulation since 1975, so the publishers know how to survive and thrive. Online sales & subscriptions give the print magazine a fighting chance against online outlets in a tight niche market.

The post E-Commerce Magazine Subscription Website appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/e-commerce-magazine-subscription-website/feed/ 0
Public Art Non-Profit Website https://chrisgilligan.com/portfolio/public-art-non-profit-website/ https://chrisgilligan.com/portfolio/public-art-non-profit-website/#respond Sun, 19 Jun 2011 16:38:27 +0000 https://chrisgilligan.com/?p=345 Mark Making is a Chattanooga non-profit with a mission to enhance the town with public art and to engage the public in the creation and production of art, not merely it’s appreciation or exhibition. This project was yet another “rescue effort” to save a dying website that had been abandoned by a previous developer. Knowing […]

The post Public Art Non-Profit Website appeared first on Chris Gilligan » new media.

]]>

Mark Making is a Chattanooga non-profit with a mission to enhance the town with public art and to engage the public in the creation and production of art, not merely it’s appreciation or exhibition.

Mark Making website

This project was yet another “rescue effort” to save a dying website that had been abandoned by a previous developer. Knowing how artists can be very particular about visual design and information architecture, I was a little apprehensive to take on this project… but I soon found some new PHP and JavaScript code to make WordPress behave as desired.

  • Search Engine Optimization
  • Fancybox JavaScript modal windows for YouTube, image slideshows, audio, video and PDF
  • Google Web Fonts for a handcrafted look
  • Advanced Custom Fields for intuitive addition of media player icons and project metadata

The post Public Art Non-Profit Website appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/public-art-non-profit-website/feed/ 0
Industrial Galvanizer Website https://chrisgilligan.com/portfolio/industrial-galvanizer-website/ https://chrisgilligan.com/portfolio/industrial-galvanizer-website/#respond Sat, 04 Jun 2011 21:27:25 +0000 https://chrisgilligan.com/?p=340 Tennessee Galvanizing had an aging Joomla site that needed major software updates. So, I migrated the site to WordPress for ease of use and ease of updates. WordPress is much more user friendly than Joomla, and also easier to maintain.

The post Industrial Galvanizer Website appeared first on Chris Gilligan » new media.

]]>

Tennessee Galvanizing website

Tennessee Galvanizing had an aging Joomla site that needed major software updates. So, I migrated the site to WordPress for ease of use and ease of updates. WordPress is much more user friendly than Joomla, and also easier to maintain.

  • Simple WordPress site with front page slide show, news blog and contact form

The post Industrial Galvanizer Website appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/industrial-galvanizer-website/feed/ 0
Office Furniture Retail Showcase https://chrisgilligan.com/portfolio/office-furniture-chattanooga/ https://chrisgilligan.com/portfolio/office-furniture-chattanooga/#comments Tue, 17 May 2011 15:21:01 +0000 https://chrisgilligan.com/?p=332 I worked with Office Coordinators Inc’s talented in-house designers to update the OCI website. OCI chose an e-commerce theme, and we completely reworked the CSS and layout to match their colors and logo treatment. After a previous failed attempt with another developer, they were surprised at how quickly the site came together, and how easy […]

The post Office Furniture Retail Showcase appeared first on Chris Gilligan » new media.

]]>

Office Coordinators Inc. website

Office Coordinators Inc. website

I worked with Office Coordinators Inc’s talented in-house designers to update the OCI website. OCI chose an e-commerce theme, and we completely reworked the CSS and layout to match their colors and logo treatment. After a previous failed attempt with another developer, they were surprised at how quickly the site came together, and how easy it is to manage with WordPress!

  • “Inquiry mode” e-commerce: customers can select items, add to shopping cart, then email for more information or price quote
  • Search Engine Optimization: Google Analytics and Sitemaps
  • WordPress Content Management
  • Social Networking with Facebook “score card”

Thank you for your persistence. You’re our favorite website/technically savvy guy ever.
— Emily Vaughn, OCI

The post Office Furniture Retail Showcase appeared first on Chris Gilligan » new media.

]]>
https://chrisgilligan.com/portfolio/office-furniture-chattanooga/feed/ 2