102 C, Frontier Airlines Center
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.