Responsive Design

- By:

Phillip J Fry

The Futurama is Now

There’s no use in breaking it you gently, so I’ll be blunt: Gone are the days when a designer could simply hand off a layered PSD file to a seasoned developer and let him count the pixels of a fixed-width layout. The vast combination of devices and screen sizes out there require a website to react, respond and alter its presentation to fit any device. How do we respond? Responsive Design: This shiny new paradigm of constructing websites is rapidly becoming the new standard in site development. And it’s critical that developers and designers understand and react by adapting their work processes. Responsively designed websites can serve up a great user experience no matter which device a website is viewed from.

Remember the Good Old Days?

Here’s how it used to go: The designer finishes up her round of revisions with the client, gets approval, then hands off the approved comps to the developer. The developer builds out the site, finishes up his cross-browser testing and the client reviews the site on his laptop and signs off. But wait! The day before launch, the client sends a frantically-worded email to the team pointing out the fact that the site is not optimized on his son’s iPhone. With no budget and zero time to rework the design for mobile, the task of making the site responsive lands on the developer at the eleventh hour. He does his best to add some percentage widths and changes it to a vertically-stacked layout for small screens. At this point, instead of being a well-thought-out user experience for mobile, the “responsiveness” is an unfortunate afterthought, and this happens far too often.

New Tricks for the Old Dog

This scenario simply cannot be tolerated one moment longer. We cannot allow responsive implementation to be an afterthought that falls solely on the developer at the tail end of the development cycle. Responsive Design for multiple screen sizes and orientations must be considered and worked through in parallel with the rest of the project lifecycle.

Where to Begin? Don’t Ask Me, Ask the User!

Most people think of Responsive Design as simply the repositioning and resizing of elements on screen to optimize readability for a particular device. While that is definitely part of the equation, it’s not the complete picture. Responsive Design actually starts much earlier in the planning process; at the user research level. When considering design and dev for tablets and smartphones, here’s what you need to ask realistically representative users:

  • What devices are you accessing the site from? Do you use multiple devices?
  • What are your main objectives on the site? Are these objectives different depending on which device you’re using?
  • Where are you located when accessing the site from your device or devices?
  • What content are you typically wanting to find? What tasks are you typically wanting to do?

The answers about mobile devices could be the same or similar as the answers you’d get from desktop users, but they also could be wildly different. User testing uncovers the unknown essential nuggets that will help you understand exactly how users need to experience the site. Once you know what content should be readily available on the different devices, and what paths and tasks users will likely do, the planning for information architecture can begin.

Pay Attention to the IA Behind the Curtain

Once user research has offered a clear picture as to what the users want to experience across the differing devices, it’s up to the information architect (IA) to map out that experience in a clear, easily navigable way. In a Responsive Design process, the IA will need to create multiple versions of wireframes for the site that show the differences in the experience across different devices. The wireframes should clearly illustrate:

  • How the navigation might change
  • How the content structure is displayed
  • How much content is delivered to the user

Once complete, the wireframes provide the perfect scaffolding for the designer to begin the Look and Feel process.

Design: Now with 50% Less Pixels!

The designer is tasked with the job of creating a consistent look and feel across the varying devices based on the multiple versions of the wireframes. The main challenge will be to come up with a design that is flexible and easily adaptable across the varying screen sizes. For designers, a huge part of the challenge is letting go of exact pixel dimensions for some of the design components. Designers must now think of widths, padding and margins in terms of percentages, not exact numeric values. Designers may find it hard to give up the kind of pixel precision they’re accustomed to, but it’s a necessary trade-off to create a site that is responsive and adaptable to devices of all screen sizes.

Homer Doh

A Picture is Worth a Thousand D’ohs

When implementing the designs, developers typically decide when to use images and when to use CSS to achieve a desired design effect. When considering responsiveness, CSS is the best choice, as it naturally scales along with the page elements. But there are times when a design aspect cannot be achieved with pure CSS, and an image must be used. Often, these images don’t scale easily or at all. Designers now must also consider scalability of images when creating designs and ask whether a more complex design is worth the decrease in the design’s ability to be responsive. I’m not suggesting that creativity be handcuffed by any means, simply that design components need to be reviewed and that aesthetic value should be weighed against the design’s ability to be adaptable.

Please Develop Responsively

Most developers spend the bulk of their time working on a laptop/desktop with the standard browser set, and spend very little time thinking about tablets or mobile rendering. But these days, if you’re not thinking about CSS with smaller screen sizes in mind, then you’re simply not developing responsibly. Testing how CSS styles degrade as the screen orientations and sizes change is something that must be considered throughout development, not just at the end. Putting a little extra time and thought into percentage-based styles throughout the process will help ensure that the code handles the transition to smaller screen sizes more gracefully.

Adaptive + Fluid = Responsive

Responsive Design really consists of 2 main components: adaptive layout and fluid layout. The adaptive component allows you to identify and create the breakpoints via CSS media queries to drastically change CSS rules at targeted screen sizes. Not only does this allow complete restructuring of existing components on a particular page, but allows you to hide/show different types of content or navigational elements. This extremely useful approach affords the developer the luxury of only having to manage one instance of HTML markup while leveraging the CSS to control conditional presentation of page elements.

Fluid layout is more granular than adaptive layout, as it utilizes percentage widths to define page elements instead of the fixed-width approach. This means that page elements can resize dynamically with respect to the screen size or viewport at any given moment. Fluid layout takes care of the minute differences between tablets and different smartphones that would be impractical to handle with a pure adaptive approach. When the two techniques are used in tandem, we have an extremely powerful and extensible tool: Responsive Design.

Where There’s Buzz, There’s Swarm

The term Responsive Design really is more than just a buzzword to attract new business. The term truly marks a significant shift in the paradigm for how websites are built, from start to finish. The swarm of projects that require the Responsive Design is upon us now. Once the commitment and effort is made to doing Responsive Design the right way, the web will be a more beautiful, unified experience for all regardless of screen size and shape.

Leave a Comment