Our Blog

September 05, 2012 By Hendrik-Jan Francke

Responsive Web Design

New best practice in design and usability automatically optimizes site for the width of the user's screen.

The rapidly evolving world of technology (fancy language for the fact that Samsung and Nokia seem to release a new phone/tablet each week) creates a constantly changing series of expectations and requirements web developers must meet in order to create an effective site.

As more and more people buy smart phones and tablets, they expect that an endless amount of information will be available at their fingertips. They want information on the road, on the sideline etc. And they expect the same quality of content whether they are accessing the site from their mobile device, tablet or desktop.

Responsive web design is an emerging best practice because it meets this demand for quality information and intelligently adapts to evolving technologies. It allows designers to create smart sites that automatically adjust to browser width so the user gets a custom experience that effectively meets the requirements of the platform they choose.

Key principles of responsive design

  • Same content displayed on all platforms
  • Interface adapted for optimum usability for small, tablet and large screens

How does the magic work? Through the use of CSS media queries, images, and fluid grids and layouts, of course! We don’t think you really want us to explain ‘media queries’ or ‘fluid grids’. It’s technical stuff we have to know to do our job well, but not anything you need to know to grasp the concept. What you need to know is that different code renders a different interface optimized for the platform’s screen width.

Advantages for clients

Responsive design is especially beneficial for clients because they only have to update the content of one site rather than reconfiguring it across several platforms.

Responsive design also encourages, if not forces, the developer to optimize content for smaller screens. This means shorter, more effective content that cuts out the bloat that mars many sites today.

Furthermore, the site will be compatible with emerging technologies since it adjusts to width of the screen (or more technically, the width of the browser window on the screen). So the specifics of the device don’t matter, just the width of the screen on the device. Considering the rate manufacturers release new phones and tablets today, it’s a good thing!

Advantages for users

The benefits of responsive design for users lies in the fact that they receive the same quality content optimized for the device they use. For example, a responsive site leverages the small size of a mobile browser and hyper-focuses on content that is most important. Therefore, users see what they need to see without any extra zooming or clicking.

Responsively designed sites not only deliver the most pertinent content to users, they enhance the usability of a site across all platforms. Buttons, for example, appear larger for clumsy fingers to easily navigate sites on mobile and touchscreen devices. On a larger browser, the buttons are smaller targets for the agile clicks of a mouse.

Best new practice

Responsive design is an emerging best practice because it anticipates user needs and technological requirements.

In fact, we like to think that responsive design is the new best practice.

Be a Bright Marketer

Improve your website & online marketing strategy with resources, tips, and insights delivered to your inbox 1-2 times per week.

Subscribe to the Bright Orange Thread Content Library today for instant access to these resources!