What Is Responsive Web Design?

What Is Responsive Web Design

What Is Responsive Web Design

In this article, we’ll look at some of the basics of responsive web design, its prerequisites, benefits, and challenges, as well as provide the list of additional resources that might be helpful for those willing to learn more about the approach.

What Is Responsive Web Design

Responsive web design is an approach to web design that makes web pages display properly on any device, window, or screen size. Whether you’re building a business website or learning how to start a blog, content representation and performance are critical to ensure usability and satisfaction of the users. A website designed responsively adapts the layout to the appropriate environment by using a system of grids, flexible images, and CSS3 media queries.

So how exactly does the adaptation work? The fluid grid concepts require page element sizing to be in relative units (like percentages) rather than in absolute units (like pixels). Flexible images are also sized in relative units to prevent them from displaying outside their containing element. Based on the characteristics of the device, media queries allow the page to use different CSS style rules; and responsive layouts automatically adjust to any device screen size.

Responsive web design is an example of user interface plasticity, which basically means the user interface can withstand variations of both the physical characteristics of the system and the environment while preserving usability. To see responsive design in action, you might want to check the Media Queries library with a collection of design resources and examples of websites that use media queries and responsive design principles to create web pages that look perfect on any device.

History

Surprisingly enough, the history of responsive web design goes way back to 2001, when Audio.com featured a layout that adapts to the browser viewport. Then CSS3 media files were ready in 2009, and several related concepts like “flexible” and “elastic” had already been popping up around the web at the time. Thanks to Ethan Marcotte and his article in A List Apart, the term “responsive web design” was finally born in 2010. By 2011 Marcotte had written a book called Responsive Web Design, where he described in greatest detail the theory and practice of the new coined definition. The term was quickly adopted by other similar web development and design enthusiasts and professionals, who stellified the trend and promoted it en masse. The year 2013 was officially recognized as the Year of the Responsive Web Design. Since then, everyone seemed ready to adopt the concept, having recognized its numerous benefits and importance.

Setting Up Responsive Web Design for Your Page

Setting Up Responsive Web Design

Setting Up Responsive Web Design

To make a responsive web site, first, you’ll need to add the following <meta> element in all pages of your web site:

And when you do, you’ll set up the viewport of your page, which will give instructions on how to control the page’s dimensions and scaling.

There are several ways to set up responsive images which will look nice on any device:

    1. With the CSS width property set to 100%. For example,
    2. With the max-width property set to 100%. This way, the image won’t scale up larger than its original size. For example,
    3. With the HTML element that allows you to define different images for different browser window sizes. For example,

    To set up a responsive text size, use “vw” unit, which stands for viewport width. 1vw is 1% of viewport width, which is the browser size. For example,

    To define completely different styles for different browsers, you’ll have to use media queries. For example, div elements displayed horizontally on larger screens, and vertically – on small screens:

    However, if you don’t like to play around with all the media queries and sizes by yourself, there are a lot of free CSS frameworks available that will make the job easier for you. For example, there’s a responsive style sheet, like W3.CSS and Bootstrap framework (that uses HTML, CSS, and jQuery).

    To get in-depth info on how to apply responsive design principles to your webpage, check out the Google Developer’s tutorial from Pete LePage here.

    Challenges and Benefits

    Let’s first point out the benefits of the responsive design approach, although some of those might be a little too obvious:

    • Makes easier for users to share content across devices with a single URL
    • Requires less time maintaining pages, because there’s a single page for every device
    • Responsive websites rank higher on Google
    • Reduces the possibility of mistakes
    • Requires no redirection for users to have a device-optimized view

    Now, for the challenges:

    • If you’re using large sized media files, it will drastically slow down the loading of your page on a mobile device with poor network coverage or less physical memory. To fix this issue, you’ll need to create a separate set of images for mobile devices with lower resolution and remove unnecessary videos.
    • Complicated navigation needs to be simplified for mobile devices. For example, you’ll need to create a fixed header, add “scroll to the top,” perform additional manipulations with the menus and sub items and arrange them in such a way so the user won’t get lost navigating your site.
    • Accommodating screen sizes of numerous devices can be a challenging task. In order to approach the problem, you’ll need to write a minimum and maximum device width in media queries instead of just a fixed screen width. Also, keep on testing your site and observe the changes that happen in the market to quickly respond and accommodate any new developments.
    • Hiding and removing content for mobile devices can also be challenging and time-consuming. But unfortunately, there’s no solution for that one, you really need to get rid of some of the irrelevant or less important content. But at the same time, you still should try and create a rich experience for the user with the minimum amount of tools and content available.
    • Showing data on small screens is particularly demanding and requires additional attention.
    • The responsive design certainly means a longer testing period.

    Other Approaches

    Responsive web design with server-side components (RESS) is believed to provide a user experience that’s better optimized for mobile devices. The key principle behind RESS is that server-side dynamic CSS like Sass access a server based API which handles the device differences and capabilities database to improve usability. However, since RESS requires more than just client-side logic, it’s quite costly to implement.

    Conclusion

    Responsive web design is no longer a privilege or a whim, it’s a necessity for all web pages. If you’re willing to learn more about various aspects of responsive web design, here’s another good source for with a collection of articles and tutorials on the subject: Responsive Resources on Github

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

12.06.2023

The Ultimate Guide to Pip

Developers may quickly and easily install Python packages from the Python Package Index (PyPI) and other package indexes by using Pip. Pip ...

How to implement WPF Canvas? Explain with an example

Canvas is a lightweight layout of WPF. Canvas is used for 2D graphic design elements but not for UI. You cannot use it for making text-box, checkbox, ...

Build Real-world React Native App #0: Overview & Requirement

This series for beginner to intermediate level React Native developers will guide you to build a simple app that serves post from WordPress API. It ...

1 comment

Kate R May 14, 2020 at 7:21 pm
0

Marina, bravo! Great post! Now I’m studying the topic of adaptability, your post is valuable information for me.

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy