Adventures in responsive design
Jun 21 2012
Since the beginning of the WhichWayNC.com project, “mobile first” has been our mantra. We’re writing, shooting and designing content for the growing number of people getting their news on phones and tablets.
For me, a Web designer used to working with static desktop sites, this has been particularly challenging. Developers Matt Hayes, Tony Mantovani and I had to constantly think about the variety of devices users would be using while exploring whichwaync.com.
We started with the smallest common denominator, the iPhone, and worked up to the desktop version using a “responsive” design. Responsive web sites resize appropriately according to the size of the browser in which they are viewed. I found that the best way to control the look of the site on the varying devices was to set specific styles for each screen size. While that gave us a little more control over the responsive theme, it also made the testing process much more complicated.
Here’s a thumbnail view of how the site looks on a smart phone …
… and on a desktop browser.
We had to stop working frequently to see how our changes looked across every platform. We tested the site on an iPhone, and Android phone, an iPad and a Kindle Fire. Design elements that looked fine on a mobile device, like the size of photos and text, often needed restructuring when expanded to a full desktop size.
Tips for designing mobile first:
- Find other sites that do mobile well and use them for inspiration (We looked at the bostonglobe.com and pinterest.com).
- Design for the smallest screen first and then work your way up to a desktop design.
- Keep navigation clear and concise.
- Choose fonts that can be read easily in small sizes. I chose Arial (sans-serif) for the body font and Georgia (serif) for the header font. I picked them because they are simple, “web safe” fonts that the vast majority of browsers and computers can display.
- Make sure that pages you link to are also mobile optimized. If your user is on a phone, you don’t want to send them to a page that isn’t readable on a mobile device.
We plan to test the usability of the site and write about our findings, so stay tuned for more details about our ongoing design process.