What is Responsive Design?

Is Responsive Design just a marketing buzzword? No, Responsive Design is a leap forward in the web design industry that effects both designing and developing for the web.

The constantly rising popularity of smart devices (tablets, phones, etc.) has created a serious demand for websites that are viewable on small displays.

General Overview

Responsive Design is not the same as mobile design. Mobile design entails creating an entirely new website or web app with content specifically created for the mobile experience. Responsive Design, on the other hand, means that the same domain, the same content, and the same syntax — more or less manipulated by JavaScript and/or CSS3 Media Queries — respond to different viewports to provide the best user experience possible for each device. The different viewports include desktop monitors, laptops, tablets, and mobile devices and their corresponding orientations.

Responsive Design, as the underlying base of a websites’ deployment, uses flexible or fluid grids, fluid images, and CSS3 Media Queries to adapt to the viewers’ different device widths and resolutions. Developing Responsive Design is rarely a process with an ending, but rather it’s an ongoing effort to optimize the user experience on different viewpoints. As more and more different devices with access to the web enter the market, it is essential that a website can fluidly adapt to multiple screen sizes. Web developers and designers have to go through a shift in thinking about how to cater the design to different viewports. A website needs to look good but, most importantly, it needs to be equally usable on a smartphone, tablet, e-reader, and desktop or laptop.

A 2012 TechCrunch Survey predicted that by 2013, mobile devices would overtake desktop PCs as the dominant global Internet platform, with a projected 1.9 billion users on mobile devices in 2015, compared to “only” 1.6 billion desktop internet users. So why haven’t you started creating responsive websites yet?

Responsive Design may have started as a trend, but it has quickly become an evolutionary step in web development and design that has greatly affected design and technology.

There are a lot of advantages to implementing responsive web design. Here are a few:

Pros of responsive web design

Lots of advantages come with the implementation of responsiveness in web design, here are a few:

  • It saves money. The customer only has to pay for the development of one website. No mobile apps or mobile websites are necessary. There’s only one website that needs support too, so this cuts down on monthly web support costs. Publishing new content is easy when there’s only one place for it to go. So no matter who is doing the updating, it’ll save a lot of time (which translates into dollars pretty easily). Read more…
  • It saves time within reason.With the right planning, RWD can allow for some efficiency because you will not have to create all new content for every channel you want to reach. Instead, you simply need to adjust the amount and layout of the visual content that you have initially created. From a responsive “code” design perspective, programming and deploying stand-alone code for multiple channels is not required. Efficiency is gained because one “set” of code can account for the additional channels, allowing for a single code change to migrate across every channel. Read more…
  • It helps your SEO efforts. With a consistent URL for desktop and mobile users and desktop and mobile search bots, any site you design has uniformity. This makes for better user interaction, is easier for Google’s link algorithms, and increases crawler efficiency. Read more…
  • It lets your website perform better. Planning ahead for RWD, especially using the mobile-first-approach, can lead to cleaner and, therefore, faster performing code on mobile and desktop size devices. Read more…
  • It lets your customers find information easier – anytime and anywhere.Using RWD in your site design means the website will get a lot more visitors who are using different mobile devices, such as smart tablets and phones. A visitor is a lot more likely to buy products and services from a website that actually works on their devices. Read more…

Even Google recommends responsive web design:

Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS Media Queries to decide the rendering on each device.

Source: Google Developers

Possible pitfalls

To be fair, there are a few pitfalls to RWD, so make sure you handle them accordingly:

  • Slower downloads. The single website has to load all of the elements, including images, on every device. Check out these resources for correctly handling images in Responsive Design.
  • Could prolong development time and costs upfront. The key here is having the know-how. Don’t just take on a responsive project without knowing what you’re doing. Check out our resources to learn more about the essentials of Responsive Design: Media Queries, frameworks, and tools.
  • Content has to be equally available on all platforms and operating systems. Some folks try to go the easy route and just hide content and elements that tend to be more difficult to handle on mobile devices. Don’t be one of these people. Learn how to deal with forms, tables, and navigation on every device.
  • Visitors don’t necessarily want the same basic experience everywhere, on every device. This is most likely the case because content on that device is not available or harder to handle. Make sure to include everything, while optimizing the experience across all devices. Also check out the first item in the evaluation checklist: “Does the website actually need it?”

Are you ready for responsive web design?

Before you jump straight into the responsive overhaul of a website, check out this evaluation checklist to see if you are ready for Responsive Design:

  • Does the website actually need it? Figure out if you are better off optimizing other parts of the website (like reducing page weight and speeding up the load time for pages) rather than allocating resources to doing a total responsive makeover — especially if the majority of the site’s sales and conversions are made from a desktop. Look into using an analytics tools like Google Analytics to figure out where most of the site’s traffic comes from, what devices are being used, and what the most popular screen resolution is.
  • Do you have the know-how? Responsive Design doesn’t come easy and can be more complex than you think. There is a learning curve to everything and knowing how to start and which tool to pick can be a chore. Check out a list of the best responsive frameworks and tools for beginner web designers to give you a head start. Or pick one of the pre-wired templates to dive right into it.
  • Can you test it? Despite a variety of great tools out there to test the outcome of your responsive efforts, it is always best to have a selection of devices ready so you can test your website design on the real thing. Analytics will tell you what devices visitors to the site prefer to use. We all know which tablet or smartphone is most popular right now, so you might want to invest in owning your own smart devices before making vague assumptions of how any website you design will display on them. However, there are thousands of different viewports out there, so make sure you check out these tools to test Responsive Design in a variety of displays, using your desktop monitor.
  • Are you ok with design limitations? Compared to mobile design, Responsive Design doesn’t live on a dedicated domain, nor does it use dedicated code to display the mobile version of a website on smartphone devices. Instead, it uses the same code, manipulated by CSS Media Queries and sometimes JavaScript, to flexibly adapt to the viewport width. This comes with certain limitations of how a website will be displayed. Expect client revisions breakpoint by breakpoint, and make sure you advise your clients up front that pixel-perfectness is almost impossible, but that the benefit of creating and maintaining one website instead of a couple should make it all worthwhile. Even with these limitations, there are impressive examples of Responsive Designs and galleries to show you what Responsive Designs can do and to inspire you on your way to responsiveness.

For more definitions of Responsive Design, check out these read-worthy articles: