A Responsive Design: How & Why

by Alex Sylvia

responsive-header-artwork

In 2010, Morgan Stanley produced a report predicting that mobile web browsing will overtake desktop internet usage by 2015. This means in just over 2 years, a majority of websites will not look or work their best because they were designed for desktop use, but are being accessed through a mobile device. Poor website usability from a mobile device will create a lot of frustrated consumers, and leave many companies unable to reach a large percentage of their target audiences on the web.

Aside from our basis in the web design industry and inherent tendency to stay abreast of current trends, Fresh Tilled Soil was motivated to make our site responsive from a business standpoint; we weren’t about to become one of those companies losing traffic because our website wasn’t optimized for the mobile web. Since most of the content and basic navigation of our website seemed to be what our visitors were interested in, we decided that instead of producing a separate, mobile-friendly version of our website, freshtilledsoil.com should become responsive.

In case you are unfamiliar with the term “responsive web design“, the term refers to a method of creating websites so that they are able to adapt for optimal viewing across a variety of devices. It’s different from creating a specific mobile design, and uses most of the existing website code and content by simply adjusting the layout according to the device and/or browser width. Responsive sites are also more cost effective to produce than a separate mobile site because there’s only one codebase to be maintained. Although it’s better to create a website with a mobile solution in mind from the start, (following a mobile-first approach,) our site – like many others– was originally built to be viewed on a desktop/laptop and starting over from scratch to support smaller devices wasn’t an option.

iPhone

Process & Thinking

To start, we retrofitted our website code to be percentage based, making the frame and content inherently responsive. Next we started imagining how the design should look on smartphones, making sure to leave the content and structure in-tact, and changing only the style sheet. To do this, we looked at the current site on a smart-phone and analyzed what a user would want from our site in a mobile context.  We knew that a user would want to interact with the site quickly and efficiently. We also knew that a typical visitor would probably want to check out some of our work, put names with faces, or easily call us or get directions if they were coming to a meeting. Mobile users probably wouldn’t care as much about the details of our process, but they might want to know about our Labs workshops and maybe even read a post from our blog. We then began to adjust and optimize each section of our site to make it easy and enjoyable to use – all without changing the underlying structure.

Once we settled on phone-friendly designs for each section of the site, we needed to make sure the site was optimal for all devices/browsers sizes between mobile and desktop resolutions. To do this, a designer and a developer sat down and went through the site finding all of the organic breakpoints by adjusting the browser width until the design no longer worked. To design responsively this way is to let the design itself designate when and where it needs to change or shift to fit on a smaller screen, opposed to recreating the design for each individually sized device (which would be wildly impractical.) With a responsive design, the user can use almost any device or browser size and get an optimal experience. This result that we achieved with a responsive design would have been almost impossible to accomplish with a traditional design process, since you would need to design the same page at dozens of different widths and treatments to be able to foresee how each section or element or content would be presented. The responsive design method allowed for a more organic design evolution. It took a lot of trial and error, but in the end, the best possible solutions for each device were made.

iPads

Challenges

The hardest sections of the site to tackle with this approach were the Team and Portfolio section. Both of these sections had the most moving parts and are very image-heavy. To make sure users could interact with them in the most optimal way, a combination of traditional design and design in code was used. In the end, we had to slightly alter our approach for how the interactions of these sections worked on smaller devices for them to be successful.

All in all, this project took about a week to complete with only 2 developers and 2 designers. Not bad considering we had to retrofit our homepage (including the portfolio and team section), 2 of the Labs workshop detail pages, and our blog.

Visit freshtilledsoil.com on any device to see it in action (or just check it on a desktop or laptop and adjust your browser window size)!

About Alex Sylvia

A former personal trainer, Alex left the fitness industry when she found her true calling in the art of user interface design. She prides herself...