Mobile first, responsive web design case study
The original “microsite” for the Top Chef University iPad app consisted of a single fixed-width page to promote the application, provide a quick link to the app store and describe the app features. Shortly after launching we released a social component to the app for users to share lessons they’ve completed on Twitter and Facebook. This meant that there needed to be web-accessible pages to be shared. As Brad Frost recently mentioned in regard to ubiquitous distribution,
You’d be a fool to not take advantage of the tremendous distribution platform that is the web.
The content pages lived on the same domain with preview videos and meta information but was generally disconnected from the marketing site. We needed to bring the two together so when on any page, users could fully navigate through all of the pages and learn more about the app. This was a perfect opportunity to recode the layouts with a mobile first, responsive approach, share the same stylesheet, etc.
As someone who is always a little bit late to the game but not afraid to dive in head-first, I had to force my brain to think a bit differently about mobile first. It’s easy enough to do, but rather than building the maximum-width layout first and modifying it as the viewport gets smaller, start by serving up the least amount of styles and the simplest layout to smaller-screened devices first and then layer on additional styles and features using media queries when it makes sense at larger screen resolutions.
The process: This mainly involved just minimizing Chrome to it’s smallest width and verifying the design there. The layout is very linear at this point and the benefits of strictly semantic HTML make this part of the process very quick. Testing out the layouts on a few mobile devices and using a few emulators helped ensure the styles held up.
Some Considerations
In a few instances there are images that I wanted large for high-bandwidth connections/large screens but didn’t want to serve those to small screens. I opted to use Sencha’s Src solution. It couldn’t be easier to implement and so far has worked wonderfully.
This project provided an opportunity to experiment with Adobe Lab’s Shadow product for OSX, Chrome and iOS. It was a joy to work with and made testing on multiple devices a breeze. I highly recommend trying it out to at least ease the pain of iOS testing.
The homepage of the site has an image slider that needed to be as flexible as the rest of the site. MaryLiz Guillemi shared a nice solution from Mat Marquis that she had used previously called Dynamic Carousel. The raw images are served from Sencha.io (as previously mentioned) and the script and accompanying CSS take care of the rest.
To serve up media queries to IE8 (which doesn’t support them), including Modernizr with the optional respond.js inclusion got the job done. There are a host of other scripts and goodies used that you can see by viewing the source of the pages but I’ve rambled long enough.
This quick project provided a great learning opportunity about thinking differently and building differently. Our tools are changing every single day. I’m glad I stumbled on and pulled together a mix of 3rd party tools and processes that work for today. A huge thanks is in order for our amazing community and all of the people who provide these wonderful solutions, free of charge to help us do what we do, better.
Have a web app, mobile app, or piece of custom software you need designed and developed?
Have a web app, mobile app, or piece of custom software you need designed and developed? Drop us a line
