Stark Services – “AC in the Attic”
Stark Services was an HVAC – Plumbing company in Dallas, TX and part of Church Services...
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:
Navigation
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.
Media
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.
Text/Content
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.
Buttons/Menus
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!
Meet Your Team
Our Featured Work & Case Studies
