Minimize text size Reset text to normal size Increase text size

One Site Fits All: A Responsive Solution

With 56% of American adults owning a smartphone and 34% owning a tablet External Link Disclosure and with 1.2 billion devices projected to be sold in 2013 External Link Disclosure, smartphone and tablet access continues to skyrocket. Users are increasingly accessing online information through a multitude of devices that are of all shapes and sizes. This means that your content needs to be able to be accessed conveniently and provide a positive experience – regardless of the device used.

Attempting to create and maintain multiple versions of your site to accommodate each device can be time consuming, resource intensive, and unsustainable as a long-term solution. So how do you give people a comparable user experience regardless of the device they use to access your site? The solution lies in responsive design.

Responsive Design: the Effective Solution

Although including responsive design as part of your user-centered requirements may require additional resources and an increased timeline, choosing to take a responsive approach to serve the growing number of devices on the market is often the most effective path to take without requiring you to create a new site design to accommodate every device on the market. It allows you to build a single version of your site that adapts to the device accessing it. In other words, whether they view your site on a smartphone, tablet, laptop or desktop computer, they access the same content, formatted for their device. The end result is a more seamless user experience.

MentalHealth.gov built in responsive design

Another large benefit is the savings. When planning a web site, budgeting for resources, costs, time and scalability are all major factors. For example, the time and resources needed to a create mobile, tablet and desktop versions of a site is nearly three times the effort needed to create a single responsive site. When you consider what it would cost to update the three versions of a site as compared to a single version the savings is what we call in the trade a "no brainer."

Building a Responsive Site

Ethan Marcotte notes that there are three key components to responsive web design External Link Disclosure:

  • Flexible grids
  • Flexible images
  • Media queries

Usability.gov built in responsive design

When we design a site for desktop computer or a specific device, we use fixed, pixel-based dimensions. With a traditional or “unresponsive” web design, the layout and content need to be recreated and adjusted manually for other devices.

However, with responsive web design, the content and layout become fluid, adjusting naturally to the dimensions of the device accessing the site. Responsive web design does not change the content of a site, but rather the presentation of the content. So does your entire site become miniaturized to fit on a smartphone? No, that would simply make the user frustrated. Instead, the content is resized to fit the format of the device. Through the use of a media query, the pixel width of the browser the device is using is determined and content responsively changes its layout to accommodate that device. Images and text are resized to fit and read clearly. Making the site content fluid to respond to the device makes it easier to scan, navigate and use.

BeTobaccoFree.gov built in responsive design

Responsive web design improves content accessibility, provides a more consistent user experience across devices and saves money. No site is forever and we will always be refining the user experience, but a responsive approach allows you more flexibility moving forward.

So, what have your successes been in trying to implement a responsive strategy? Your challenges? We want to hear about your experiences below.

Comments

i can't find nothing!!!!!!!!!!!!!!!!!!!!!!
nice post, I can see your point, something different from other guy's, please keep updating.
sounds like HTML has been reinvented.
This is great!
keep me updated thank you

Post new comment

By submitting this form, you accept the Mollom privacy policy.