Transcript derekolson.me

How We Learned to
Stop Worrying and Go
Responsive
{
Presented by Derek Olson and Neil Tirado
Columbus State University Web Services Team
Introduction
• We are a 3 person team responsible for designing, implementing, and
maintaining the 150+ websites in the Columbus State University web
presence.
Manager of Web Services
Tonya Wright
Web Developer
Derek Olson
Web Programmer
Neil Tirado
Small Team, Big Projects
• Small centralized team and a large workload makes it crucial to build
web infrastructure that allows for an efficient development process
• We accomplish this primarily through the use of:
o
o
OmniUpdate CMS with dynamic XSLT-based templating engine
As much reusable content as possible
▪ HR database
▪ RSS feeds for news and events
▪ Degree database
▪ Use of PHP includes for content such as universal headers and footers, individual
site navigation, department headers, etc.
In the Beginning …
• Goal: Move to a 100% mobile friendly web presence by Jan 2014
o
Where we started
▪ Multiple website templates, no consistent look
▪ Decentralized stylesheets
▪ None of our sites were optimized for mobile
Mobile Website Options
No Mobile
Mobile App
Mobile Version
Responsive
After much research and some trial and error, we decided
responsive design was the way to go:
o
o
More elegant and efficient solution than other mobile
options
One set of content and one template (rather than one for
desktop and one for mobile).
How many people are familiar
with the concept of responsive
design?
Definition of Responsive Design
“Responsive Web design is the approach that suggests that design and development should
respond to the user’s behavior and environment based on screen size, platform and
orientation. The practice consists of a mix of flexible grids and layouts, images and an
intelligent use of CSS media queries.”
~ Smashing Magazine
Coding Decisions
• Initially researched the building blocks of responsive design
such as:
o
o
o
Media queries
Responsive images and videos
All in one responsive frameworks such as Bootstrap, Foundation, etc.
• Once we learned the basics, we decided to create a prototype
using hand-coded media queries so that we weren’t constrained
by the limitations of a framework.
Development Time: Excruciating
Plan B: Responsive Frameworks
• Much quicker development time for
creating perfectly stacked responsive
columns/rows/etc.
• Included scripts and style libraries are
simple to implement and modular.
• Ultimately decided to go with Bootstrap
o
o
Vast community support
Additional plugins, features, and
customizations available
Challenges of Using a Framework
• Learning the specifics and quirks of the particular framework
• The always fun task of customizing features that someone else coded
• Difficulty for CMS users to edit pages that utilize advanced features of
the framework.
• Updating to a new version often requires major template revisions
o
Example: When we updated our code from Bootstrap 2.3.2 to 3.2, the grid
system was completely overhauled and required extensive template
modifications
Final Results
Questions/Comments?