How To Effectively Use Responsive Web Design

Responsive

Trends in Web design have a tendency to come and go. Responsive Web Design, however, is looking more and more like one of those trends that will one day become an industry standard.

Responsive design is the concept of developing a website design in a way that helps the layout to change according to the user’s computer screen resolution. It affects layout (including menus), image/video size, and now even the amount of text you can view on a page as the browser size is reduced. The result are sites that aim to keep the most important elements on screen and prioritized, no matter the browser size and orientation. It’s three most essential elements are:

  • Fluid Layouts
  • Flexible Images
  • Media Queries

With many different approaches, methods and variables at varying levels of adoption and use, it is easy to become confused about the purpose and benefit of responsive design. As Web specialists, we need to understand its value from a design, development and marketing point of view and how using it can create value for clients. Before employing or adopting a responsive design there are several key components that need to be understood:

  • Design Process
  • Development Considerations
  • SEO Impact

 Design Process

Website design is a complicated process. Adding a responsive element makes that an even more complicated process -  a desktop site is now the same site that will be viewed also on tablets and mobile devices, except it will look much different. This means that when a site is designed to be responsive, it requires two additional designs: one for tablet size resolution (smaller than 980px wide) and another for mobile devices. Below is a look at The Boston Globe's use of responsive design below, which is an incredibly text heavy site.

Conversely, a website designed for the Clean Air Challenge has a drastically different look, as the site has different goals and is much more image driven.

Each of these layouts requires a re-prioritization of the content that is displayed on the screen based on the sites established goals as the browser size changes. An ecommerce website design with a large complicated navigation menu that is essential for user experience will need to be reconsidered for mobile display.

On the other hand, if your site is image driven with minimal text, how will you maintain this hierarchy on smaller orientations?

The fact that your design will be scaled down into a mobile version must always be kept in mind as you are working; including the impact this size change will have on fonts, calls to action, menus, navigation, forms, and other essential site elements.

Development Considerations

As shown above, there are a variety of ways Responsive Design can be applied to a websites layout. This means there are also a variety of development methods to be used. Each application of responsive requires different development processes and approaches. You must also keep in mind that code used is going to be altering the layout of one site to fit the dimensions of three different devices (desktop, tablet, and mobile). Developers need to move away from pixel specific dimensions in layout and adopt and embrace using percentage values in front end CSS files. Absolute values and fixed positions need to be abandoned in favor or flexible layouts, and images need to implemented in ways where the file sizes are kept to a minimum to assist in mobile site load times not being adversely affected. Developers must also consider how external files such as CSS and JavaScript are being accessed so as to not get in the way of site load times. For example, a mobile site has little use for the CSS that controls a Desktop version, but a Desktop version could be re-sized on a monitor to reflect the mobile design. Each project will have its own development hurdles that need to be clearly defined at the outset.

 SEO Impact

Search Engine Optimization is a huge part of what makes for a successful website. It is not worth building a website that cannot be found through an Internet search. This means that SEO objectives must be kept in line with design and development of Responsive sites. Luckily Responsive design lends itself to good SEO, if done correctly. Having all browsers access one site in different layouts instead of three different sites, is better from an SEO perspective. Developing multiple sites can dilute SEO performance because the three of them compete against each other for traffic. So, why not send all users on any device to the same site? This removes the need for re-directs, allows mobile site users to share links that rank easily via social media outlets, and prevents mobile sites from stealing search equity from Desktop versions.

Responsive Design creates more engaging user experiences, benefits SEO, and eliminates the need for multiple site versions for each platform or device. But it is still a new practice, and its adoption needs to clearly understood and assessed on a case by case basis. The process of design, development, and optimization will be affected in many ways, depending on the scale and complexity of your web design project. You may even find that your content does not lend itself to Responsive Design and that using it as a method would not benefit your sites goals. Any of the items discussed in this article could be easily extrapolated further, and there are myriad factors to keep in mind before moving ahead with a Responsive Design. For more information on development methods, general best practices, and live examples check out the following articles on responsive design.

Check out these additional resources:

General Best Practices and Examples
Responsive Design Process
Development Methods and Tutorials
SEO Considerations

 

 

Subscribe to
Our Newsletter

Comments

  1. John said:

    Nice read.
    Not being a design buff – didn’t even know the term “Responsive Web” existed! I just knew that design (or rather coding) has to be different for mobile web (yes know it) – but didn’t know so much work has to go with the design and development of a site in todays world. Really, seems – I just woke up from slumber!

  2. Well the idea is great. The options will be very useful to those who are planning to create a site. Gives an idea for seekers.

  3. I remember when the problem with web design was that the screens where getting larger and larger and you still had to accommodate those with small screens. the 800×600 days. Who would have thought that it would completely reverse itself and now you have to take into account screens that are 320×480.

  4. Responsive is definitely revolutionizing the industry and it’s on the up and up. Nice post!

Leave a Comment on this post

*
*