What Responsive Web Design is, and Why We Need it

Note: This is the first entry in our multi-post series on Responsive Web Design. We’ll be addressing the key design and development implications of this approach, any why you should consider responsive design for your next website, throughout the series.

The Beginnings of Responsive Web Design

The web design landscape started changing in 2007 when Apple released their first smartphone. Since then, device sizes and screen resolutions have proliferated greatly, and everyday, new devices are in the making. That diversity has been changing the core principles of web design profoundly. Once built on rigid frameworks and inflexible grids, this is no longer the solution for creating valuable web experiences. The fluid quality of the web, and its inherent set of challenges are explained by Ethan Marcotte in his book Responsive Web Design:

“We’re designing for more devices, more input types, more resolutions than ever before… Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.”

What is Responsive Design?

Responsive Web Design is the approach used to make websites automatically respond to the device on which they are viewed, and morph their user interface and content automatically to accommodate device-specific features. Websites built responsively take into consideration user behavior by adjusting to the device’s orientation. They also display their content based on screen size, resolution, and type of platform used — such as iOS, Android, or your computer’s web browser.

A great benefit and unique value of responsive web design comes from the optimization of content for each device, which renders text elements legible and preserves visual elements in their entirety. The website media.queries has collected an impressive inventory of responsive websites that visually display the importance of this approach.

In cases such as this, the entire website structure becomes compromised, and the result is a poor user experience. Poor user experience translates into poor conversions and the overall value of the website is lost. On the other hand, it is impossible to build separate website versions for all devices. A great benefit and unique value of responsive web design comes from the optimization of content for each device, which renders text elements legible and preserves visual elements in their entirety. The website media.queries has collected an impressive inventory of responsive websites that visually display the importance of this approach.

Why is Responsive Design Needed?

The number of devices that any given website is viewed on varies immensely – from hand-held devices such as smartphones and tablets, to laptops and desktops of varying screen sizes. In fact, the resolutions and sizes are so diverse that it renders it impossible to design for each one individually. And, this plethora of devices creates some inherent problems and challenges. The whole website structure becomes unreliable – text becomes illegible; images are trimmed down arbitrarily or flow over other elements; and branding starts to lose its impact, as logo and other brand identity features might get left out from the design.

The challenges and problems described above are why the concept of responsive design was originally created, and has recently flourished as the preferred approach to creating websites for agencies and individuals alike.

The Key Considerations of Responsive Web Design – Coming in Pt. II.

Now that you’re aware of many reasons why responsive design is beneficial to use for your company’s next website, you’ll also need to be aware of what specific elements require particularly important consideration when planning your next website.

In Part II of our Series on Responsive Web Design, we’ll discuss common considerations about designing and developing to provide a superior and well-thought-out responsive web experience that maximizes each device type’s capabilities.  Check back soon for more.

Looking to discuss your website design and development needs? Contact us today.