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

Very inspiring article for us Thanks for the great article. …. It’s definitely a good idea for me and my friends to learn the things that’ll expand their skill set Your ideas and presentation is very effactive and useful for all. I am loving all of the in turn you are sharing with each one!… Being a user i really like your visible information on this page
It is getting more and more awareness in Malaysia for responsive website design to cater for the growing use of mobile devices, and smart devices. In my opinion, using CMS to make a responsive website design is more flexible and shorter development time. Wordpress, for example, has plenty of implementations and available addons to make responsive design.
nice analysis..I totally agree!
Where to apply the responsive web design? [content removed]
It would be great to have some tips about "how to implements those features". Anyway great post.
we have been using dream weaver for our websites can you recomend a cheaper version also take a look at our site see what you think [content removed].
As the Chief Strategist at Atlanta Web Design Company I am tasked with incorporating all the aspects of success into an RWD site, including branding, social media, API (application programming interface) integration, marketing strategies, SEO, database integration, e-commerce, and much more. I recently wrote an article for the Huffington Post entitled The Importance of Responsive Web Design for Small and Medium Businesses "Everything your website offers with convenience can be just as convenient on the viewers mobile device through the technology used in RWD. People are not always near a computer, but most people with smartphones carry them all the time. One website costs less than two, and the savings can be substantial. Sites designed solely for mobile device traffic don't offer the advanced navigational techniques found in traditional websites, and they also require the user to maintain two separate.web addresses for your site."
You're right when you say that no site is forever. We need to constantly refine and redefine user experience and design to keep sites relevant and engaging. And what better way to do that right now than to let users access your information and services on any device? If anyone's interested in converting your designs to responsive sites. Here's our website: [content removed]
Dimensions for responsive design breaks (handy for developers) http://www.seocial.ly/responsive-design-device-dimensions-pixels-responsive-breaks/
Hi Everyone- We created an INFOGRAPHIC on responsive design here http://www.seocial.ly/infographic-why-responsive-web-design-is-important-for-success-in-2013/

Pages

Post new comment

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