• Tres Artes :: Hassana Tadi

    Tres Artes?! like Tres leches? ¡Correcto! I am going to compare my creative journey thus far to Tres Leches! Three layers of creative sweetness :) ...

  • Journeys of Creativity, by Daniel Cardoza

    Creativity and self-expression have been things that naturally flow through me since I was young enough to realize what imagination was. In my childhood, this manifested......

  • Picking up the axe

    We are happy to introduce our newest team member to pick up the axe Daniel Cardoza as our new Graphic Designer. You can read more......

  • Nueterra Partners with OAK

    On the growth curve that Nueterra Capital is experiencing, Dan Tasset, CEO and Chairman has agreed to partner with OAK to help the company grow......

  • The Inherent Balancing Act That Is Craft Beer

    By: Sonny Franks   The craft beer industry faces a unique set of marketing challenges thanks to the constant question of how to grow while......

Oak Interactive

Notes on Responsive Design

We’ve recently had a lot of clients asking about responsive design – an exciting turn. We’ve been playing around with it ever since passing around Ethan Marcotte’s now-famous ALA book. It seems like the term has just entered the non-webnerd lexicon. A simple and (rightfully) alluring concept at it’s core; however, it’s been difficult communicating the technical requisites to normal clients.

We want to build sites the right way. Often times, that requires intervention with the basic elements of the site – architecture, content, media, and so on. So we drew up this little document in attempt to provide clients with a brief but thorough explanation of what it means to go responsive.

With an inevitable proliferation of screen sizes, responsive design allows any user to access your information the right way, regardless of device, operating system, or display size.

Ensuring your site renders “the right way” within any reasonable context will require in-depth research and extensive testing in both the design and development stages. Regardless of how you expect your visitor to interact with your site, it’s paramount that we make every user’s experience as intuitive and straightforward as possible.

With changing screens come changing contexts. A user may be sitting on their couch or rushing to a meeting.
A few points on designing for mobile:

The moment a mobile user opens your page they should be able instantly have access to the main sectors of your site. Also, if your pages are content-heavy and require a fair amount of scrolling, the navigation menu should be accessible at any point, regardless of scroll position. See Brad Frost’s article on Responsive Navigation Patterns.

Certain types of media adapt to responsive design better than others. Avoid dependence on Flash objects or any third-party widgets that don’t explicitly support a fluid layout. Both embedded video (Youtube, Vimeo, etc.) and self-hosted video (.mp4, .mov, etc.) do rather well in a responsive environment. Surprisingly, static images are not as accommodating. Fortunately we can change out images depending on display size, just be mindful of how your image assets play a role in the site’s overall functionality.

Maintain a clear and logical hierarchy to your content. A quick look at any analytics report will help you make an educated guess as to which areas of your site receive the most traffic. We want to make the the important information in these areas appear front-and-center giving the user the opportunity to drill down into a second or third level of content only if they wish to.

Another reason to keep your content tight and organized is so users can avoid dealing with the “fat finger” problem. Buttons and navigational links must be large and displayed sparingly. Oh, and don’t rely on hover states.

Although the notes listed above were written with mobile in mind, the same could and should apply to traditional web-surfing. Some fantastic example of responsive layouts can be viewed here.

Did we miss something? Let us know!