The basics of responsive web design
Responsive web design (RWD) describes an approach to web design that makes a web page render well on a variety of devices, regardless of the screen or browser window size. Web pages and applications made with RWD fluidly rescale themselves according to the size of the user’s device or screen.
Responsive web design was introduced in the early 2000s and eventually adopted as a standard feature for many web pages around 2013. This was around the time when smartphones and other mobile devices became widespread, and it was necessary to have web pages that could be easily viewed on small screens.
RWD is not a new concept for web developers by any means but it is no less important than when it initially surfaced. There are a multitude of different screen sizes out there. From mobile to desktop, and everything in between, and you want your webpage to look its best on all of them. Although static pages are easier and cheaper to create, they fall short when it comes to engaging with a wider audience. Since these pages cannot adjust their content to fit different resolutions, your audience may struggle to view your content on different devices. Consequently, static pages require multiple different versions to be adapted to different device sizes. This can mean that different URLs are required between mobile and desktop web pages.
Responsive web pages are adaptable, giving users the best possible viewing experience regardless of their device of choice. The key idea of RWD is setting different breakpoints, such as the width of a browser. Then changing the dynamically layout of a website based on the current breakpoint.
Traditionally, the only responsive web pages were HTML and CSS, but now most contemporary responsive web pages are built using CSS3 or JavaScript’s jQuery.
If you’re just starting out on your web development journey, learning how to create responsive web pages is the best way to level up your web designs.
We’ll cover:
- Why responsive design matters and other design considerations
- What is responsive web design
- Wrapping up and next steps
Get started with responsive web design today.
Try one of our 300+ courses and learning paths: Learn HTML, CSS, and JavaScript from Scratch.
Why responsive design matters and other design considerations
Web pages should be viewable on any device without sacrificing information or requiring multiple URLs. But there are benefits beyond user experience. These are just a few of the main reasons why RWD is crucial when it comes to web development.
-
Increased mobile usage: people are using their smartphones more than ever before to browse the internet. In fact, mobile traffic now accounts for over 50% of all internet traffic. This means that if your website is not designed for mobile, you could be losing out on a lot of potential visitors.
-
Improved user experience: responsive design ensures that users can access your content no matter what device they are using. This is important as users are more likely to engage with and return to a website that is easy to use.
-
Faster development: a single webpage for all devices is easier for the developer than making a half a dozen versions of a same webpage for target devices.
-
Easier to maintain: a single website as compared to several is much more manageable over time.
-
Design is future-proof: RWD works on future devices with different screen sizes with little or no change.
-
Better SEO: Responsive web pages are easier for browsers to crawl and index, meaning that the content is more readily and accurately depicted in search results. Google Chrome specifically points to RWD in its documentation on SEO best practices.
When designing a responsive website, there are some key considerations to keep in mind. We decided to stick to the basics in this article, but there are other design aspects, and we’ll list them briefly here.
- Device capability media queries: These are media queries based on the capabilities of the hardware used to load the webpage.
- Responsive images: Including media assets with fixed resolutions means that percentage-based scaling must be used to resize them in an accessible way.
- Responsive data tables: Since data tables can require a lot of screen real estate, it can be challenging to reformat them in a meaningful and visually appealing way. This may include charts, graphs, or re-oriented tables.
- Responsive navigation menus: This is most readily apparent on mobile; many navigation menus are converted to dropdown menus that are easy to scroll through on a mobile phone screen.
- RWD frameworks: There are plenty of frameworks for web development, but among the most popular are Pure CSS, Montage JS, and Bootstrap.
What is responsive web design?
Responsive web design boils down to flexible layouts that shift depending on resolution as well as using CSS3 media queries that can easily be scaled up or down.
media queries are a feature of CSS3 that allows media content to be rendered according to certain parameters (most notably screen resolution).
In this section, we will cover a few of the core pillars of responsive web design. These include:
- The viewport
- Layouts
- CSS media queries
These concepts are not exhaustive, but they will give a good window into the very basics of RWD and hopefully provide you with ideas of how to dig deeper into the practice.
Setting the viewport
The viewport in RWD is essentially the resolution of the device being used to access the webpage. The “viewport” <meta> tag gives instructions to the web page on how to control the pixel dimensions and the percentage-based scaling of the web page.
Since the introduction of HTML5, designers should include the <meta> viewport element in all web pages.
This implementation should be added between the <head> tags of your HTML file:
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
Let’s break down what each part of the <meta> viewport element means:
width=device-widthinstructs the page width to be equal to the screen width of the device.initial-scale=1.0sets the initial zoom level when the web page loads in the browser
It is vital to size elements on the page to fit within the viewport. It is natural to scroll vertically on web pages but not horizontally. Elements that are wider than the viewport’s width should be sized down or not included as it makes for a clumsy user experience.
Layouts
When you are designing a web page, you will likely want to display multiple things at the same time. It could be sidebars, images, or any number of elements, but the challenge remains the same: make the content fit in a logical and accessible way.
It may be tempting to assign pixel values to all of these elements so that they fit in the viewport. However if the viewport changes, the content will be clipped off and hidden behind horizontal scrollbars. Thankfully, this can be avoided with a simple change. If we assign elements a certain percentage of the viewport rather than bespoke pixel values, they can easily be sized up or down regardless of the height and width of the viewport.
There are plenty of different responsive layouts that are widely used in RWD. We won’t go into detail on them, but if you wish to learn more, we recommend looking into:
- Floats
- CSS Grids
- Fluid grids (flexible grids)
- Flexbox
These layout techniques are often used to create elegant and efficient responsive web designs.
Media queries and breakpoints
Now that we understand how to set the viewport, and how to create layouts with percentage-based widths, we need a way of targeting different resolutions with CSS. As mentioned above, media queries are features of CSS that use the @media rule to load assets if certain conditions are true. Media queries can be used to test for certain display criteria like:
width(min-width,max-width)heightorientationaspect-ratio
Media queries can be used to add breakpoints to responsive web pages. Breakpoints are markers that tell the webpage to change its layout or load a different stylesheet at a specific width (usually in pixels). Setting breakpoints for specific device resolutions may be tempting, but this is unnecessarily tedious. There are so many different devices to account for that this approach is not optimal, and instead, we should base the breakpoints on a sliding scale of display size. This way, performance is increased, and users can efficiently browse regardless of device.
When building responsive websites and setting breakpoints, it is crucial to design for mobile first.
The webpage will perform better on mobile by structuring your code to cater to smaller displays first. This means that when writing media query requirements, we make changes to the page if the display is bigger than a minimum value of pixels.
Get started with responsive web design today.
Try one of our 300+ courses and learning paths: Learn HTML, CSS, and JavaScript from Scratch.
Wrapping up and next steps
You should now have a solid understanding of responsive web design, both what it takes to create and why. There’s a lot more to learn, but this should give you a good foundation on which to build. Your next steps should be putting some of this theory into practice.
Educative offers a course called: Learn HTML, CSS, and JavaScript from Scratch. This course walks you through beginner web development with HTML, CSS, and JavaScript in an interactive environment where all code is executable in your browser. No prior coding experience is required. But the best part of this course is that it is totally free.
You’ll get experience with introductory concepts like:
- HTML lists and forms
- The CSS cascade
- Program flow in JavaScript
Additionally, over the course of this 10-hour intro course, you will produce your own functional models like:
- an image carousel
- a to-do list
