102 C, Frontier Airlines Center

A mobile website necessity can become the foundation for one of the greatest advancements of web development. In a sense, mobile devices have derailed our web development trains, and put us on a track to a more exciting, scalable and adaptable destination. In the spring of 2012, the University of Nebraska-Lincoln (UNL) designed, developed and implemented a 500,000 page responsive redesign. From concept to delivery, this redevelopment was coordinated in only a few months, and resulted in the largest architectural overhaul in the history of the site; all without redesigning the look and feel or requiring extensive markup adjustments. In this presentation, we’ll dive into the process used at UNL which resulted in a new and exciting paradigm for delivering web content to our users. We’ll explore what worked (and what didn’t), and provide many tips and tricks learned throughout the process. We will evaluate special CSS techniques and JavaScript solutions, and explore other technologies available to make this paradigm-shift successful. At the end of this presentation, you will take away tried and true practices for creating a responsive design that will provide your users with a tailored experience, regardless of device.

Going through the history of his site’s design. Tables to CSS… and now to a responsive design.

Created a mobile “proxy” mobile site. Because all of the pages had the same dom structure – a mobile site was created in a day. Really easy to use, really easy to implement.

But, it did create problems. Proxy started with the desktop version and added more css to overwrite the styles for mobile. Became a tangled mess.

Look at the analytics. At the goal conversion rates. We want the mobile users (regardless of device) to be able to do the same things that desktops can do.

2012 created responsive design manifesto! Included guiding principals.

“Our user is mobile” – not necessarily true. They may just be lounging on their couch.

“If the users rotate the screen – the device should not change” – not sure if that is really true.

Mobile first philosophy.

Decided to use the 320andUp framework. More of a guide then anything.

1) Desktop presentation needs to be the same.

2) Presentation on small devices should stay like .m mobile.

Then, add in media queries to show/hide/change depending on breakpoints.

Created css parser to pull from css to build individual files for each size. Then a media query file mq.css to grab just the one the device needs.

Stopped supporting IE6.

Wait, does every browser really need to look the same … NO!

IE7 and 8 never had that ability to use responsive design. They choke on media queries. Just deliver the full size.

Responsive images using JS. Means that the content owners need to create multiple versions for each image.

All source code is on github.