• Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • English (US)

Responsive design

  • Overview: CSS layout

Responsive web design (RWD) is a web design approach to make web pages render well on all screen sizes and resolutions while ensuring good usability. It is the way to design for a multi-device web. In this article, we'll help you understand some techniques that can be used to master it.

Precursor to responsive design: mobile web design

Before responsive web design became the standard approach for making websites work across different device types, web developers used to talk about mobile web design, mobile web development, or sometimes, mobile-friendly design. These are basically the same as responsive web design — the goals are to make sure that websites work well across devices with different physical attributes (screen size, resolution) in terms of layout, content (text and media), and performance.

The difference is mainly to do with the devices involved, and the technologies available to create solutions:

  • We used to talk about desktop or mobile, but now there are many different types of device available such as desktop, laptop, mobile, tablets, watches, etc. Instead of catering for a few different screen sizes, we now need to design sites defensively to cater for common screen sizes and resolutions, plus unknowns.
  • You should still use the techniques discussed in this article to serve mobile users a suitable experience, as there are still constraints such as battery life and bandwidth to worry about.
  • User experience is also a concern. A mobile user of a travel site might just want to check flight times and delay information, for example, and not be presented with a 3D animated globe showing flight paths and your company history. This can be handled using responsive design techniques, however.
  • Modern technologies are much better for creating responsive experiences. For example, responsive images/media technologies now allow appropriate media to be served to different devices without having to rely on techniques like server-side sniffing.

Introducing responsive web design

HTML is fundamentally responsive, or fluid . If you create a web page containing only HTML, with no CSS, and resize the window, the browser will automatically reflow the text to fit the viewport.

While the default responsive behavior may sound like no solution is needed, long lines of text displayed full screen on a wide monitor can be difficult to read. If wide screen line length is reduced with CSS, such as by creating columns or adding significant padding, the site may look squashed for the user who narrows their browser window or opens the site on a mobile device.

A layout with two columns squashed into a mobile size viewport.

Creating a non-resizable web page by setting a fixed width doesn't work either; that leads to scroll bars on narrow devices and too much empty space on wide screens.

Responsive web design, or RWD, is a design approach that addresses the range of devices and device sizes, enabling automatic adaption to the screen, whether the content is viewed on a tablet, phone, television, or watch.

Responsive web design isn't a separate technology — it is an approach. It is a term used to describe a set of best practices used to create a layout that can respond to any device being used to view the content.

The term responsive design , coined by Ethan Marcotte in 2010 , described using fluid grids, fluid images, and media queries to create responsive content, as discussed in Zoe Mickley Gillenwater's book Flexible Web Design .

At the time, the recommendation was to use CSS float for layout and media queries to query the browser width, creating layouts for different breakpoints. Fluid images are set to not exceed the width of their container; they have their max-width property set to 100% . Fluid images scale down when their containing column narrows but do not grow larger than their intrinsic size when the column grows. This enables an image to scale down to fit its content, rather than overflow it, but not grow larger and become pixelated if the container becomes wider than the image.

Modern CSS layout methods are inherently responsive, and, since the publication of Gillenwater's book and Marcotte's article, we have a multitude of features built into the web platform to make designing responsive sites easier.

The rest of this article will point you to the various web platform features you might want to use when creating a responsive site.

Media Queries

Media queries allow us to run a series of tests (e.g. whether the user's screen is greater than a certain width, or a certain resolution) and apply CSS selectively to style the page appropriately for the user's needs.

For example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 80rem wide. The CSS for the .container selector will only be applied if these two things are true.

You can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes. The points at which a media query is introduced, and the layout changed, are known as breakpoints .

A common approach when using Media Queries is to create a simple single-column layout for narrow-screen devices (e.g. mobile phones), then check for wider screens and implement a multiple-column layout when you know that you have enough screen width to handle it. Designing for mobile first is known as mobile first design.

If using breakpoints, best practices encourage defining media query breakpoints with relative units rather than absolute sizes of an individual device.

There are different approaches to the styles defined within a media query block; ranging from using media queries to <link> style sheets based on browser size ranges to only including custom properties variables to store values associated with each breakpoint.

Find out more in the MDN documentation for Media Queries .

Media queries can help with RWD, but are not a requirement. Flexible grids, relative units, and minimum and maximum unit values can be used without queries.

Responsive layout technologies

Responsive sites are built on flexible grids, meaning you don't need to target every possible device size with pixel perfect layouts.

By using a flexible grid, you can change a feature or add in a breakpoint and change the design at the point where the content starts to look bad. For example, to ensure line lengths don't become unreadably long as the screen size increases you can use columns ; if a box becomes squashed with two words on each line as it narrows you can set a breakpoint.

Several layout methods, including Multiple-column layout , Flexbox , and Grid are responsive by default. They all assume that you are trying to create a flexible grid and give you easier ways to do so.

With multicol, you specify a column-count to indicate the maximum number of columns you want your content to be split into. The browser then works out the size of these, a size that will change according to the screen size.

If you instead specify a column-width , you are specifying a minimum width. The browser will create as many columns of that width as will comfortably fit into the container, then share out the remaining space between all the columns. Therefore the number of columns will change according to how much space there is.

You can use the columns shorthand to provide a maximum number of columns and a minimum column width. This can ensure line lengths don't become unreadably long as the screen size increases or too narrow as the screen size decreases.

In Flexbox, flex items shrink or grow, distributing space between the items according to the space in their container. By changing the values for flex-grow and flex-shrink you can indicate how you want the items to behave when they encounter more or less space around them.

In the example below the flex items will each take an equal amount of space in the flex container, using the shorthand of flex: 1 as described in the layout topic Flexbox: Flexible sizing of flex items .

Note: As an example, we have built a simple responsive layout above using flexbox. We use a breakpoint to switch to multiple columns when the screen grows, and limit the size of the main content with max-width : example , source code .

In CSS Grid Layout the fr unit allows the distribution of available space across grid tracks. The next example creates a grid container with three tracks sized at 1fr . This will create three column tracks, each taking one part of the available space in the container. You can find out more about this approach to create a grid in the Learn Layout Grids topic, under Flexible grids with the fr unit .

Note: The grid layout version is even simpler as we can define the columns on the .wrapper: example , source code .

Responsive images/media

To ensure media is never larger than its responsive container, the following approach can be used:

This scales media to ensure they never overflow their containers. Using a single large image and scaling it down to fit small devices wastes bandwidth by downloading images larger than what is needed.

Responsive Images, using the <picture> element and the <img> srcset and sizes attributes enables serving images targeted to the user's viewport and the device's resolution. For example, you can include a square image for mobile, but show the same scene as a landscape image on desktop.

The <picture> element enables providing multiple sizes along with "hints" (metadata that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. Using <picture> along with max-width removes the need for sizing images with media queries. It enables targeting images with different aspect ratios to different viewport sizes.

You can also art direct images used at different sizes, thus providing a different crop or completely different image to different screen sizes.

You can find a detailed guide to Responsive Images in the Learn HTML section here on MDN.

Other useful tips:

  • Always make sure to use an appropriate image format for your website images (such as PNG or JPG), and make sure to optimize the file size using a graphics editor before you put them on your website.
  • You can make use of CSS features like gradients and shadows to implement visual effects without using images.
  • You can use media queries inside the media attribute on <source> elements nested inside <video> / <audio> elements to serve video/audio files as appropriate for different devices (responsive video/audio).

Responsive typography

Responsive typography describes changing font sizes within media queries or using viewport units to reflect lesser or greater amounts of screen real estate.

Using media queries for responsive typography

In this example, we want to set our level 1 heading to be 4rem , meaning it will be four times our base font size. That's a really large heading! We only want this jumbo heading on larger screen sizes, therefore we first create a smaller heading then use media queries to overwrite it with the larger size if we know that the user has a screen size of at least 1200px .

We have edited our responsive grid example above to also include responsive type using the method outlined. You can see how the heading switches sizes as the layout goes to the two column version.

On mobile the heading is smaller:

A stacked layout with a small heading size.

On desktop, however, we see the larger heading size:

A two column layout with a large heading.

Note: See this example in action: example , source code .

As this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. They can be used to tweak any element to make it more usable or attractive at alternate screen sizes.

Using viewport units for responsive typography

Viewport units vw can also be used to enable responsive typography, without the need for setting breakpoints with media queries. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw , it will always relate to the size of the viewport.

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone .

There is a solution, and it involves using calc() . If you add the vw unit to a value set using a fixed size such as em s or rem s then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

Note: See an example of this in action: example , source code .

The viewport meta tag

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

This viewport meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when smartphones first arrived, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 980 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad.

By setting width=device-width you are overriding a mobile device's default, like Apple's default width=980px , with the actual width of the device. Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, but the device is saying it is 980px wide, that user will not see your narrow screen layout.

So you should always include the viewport meta tag in the head of your documents.

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are using. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

  • Touch events provide the ability to interpret finger (or stylus) activity on touch screens or trackpads, enabling quality support for complex touch-based user interfaces.
  • Use the pointer or any-pointer media queries to load different CSS on touch-enabled devices.
  • CSS-Tricks Guide to Media Queries
  • Español – América Latina
  • Português – Brasil
  • Tiếng Việt

Responsive web design basics

How to create sites which respond to the needs and capabilities of the device they are viewed on.

Pete LePage

The use of mobile devices to surf the web continues to grow at an astronomical pace, and these devices are often constrained by display size and require a different approach to how content is laid out on the screen.

Responsive web design, originally defined by Ethan Marcotte in A List Apart , responds to the needs of the users and the devices they're using. The layout changes based on the size and capabilities of the device. For example, on a phone users would see content shown in a single column view; a tablet might show the same content in two columns.

A multitude of different screen sizes exist across phones, "phablets," tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it's important that your site can adapt to any screen size, today or in the future. In addition, devices have different features with which we interact with them. For example some of your visitors will be using a touchscreen. Modern responsive design considers all of these things to optimize the experience for everyone.

Set the viewport

Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.

To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px , though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.

Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels. A device (or density) independent pixel being a representation of a single pixel, which may on a high density screen consist of many physical pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

Screenshot of a page with the text hard to read as it is very zoomed out.

Some browsers keep the page's width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the value initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.

The Does not have a <meta name="viewport"> tag with width or initial-scale Lighthouse audit can help you automate the process of making sure that your HTML documents are using the viewport meta tag correctly.

Ensure an accessible viewport

In addition to setting an initial-scale , you can also set the following attributes on the viewport:

  • minimum-scale
  • maximum-scale
  • user-scalable

When set, these can disable the user's ability to zoom the viewport, potentially causing accessibility issues. Therefore we would not recommend using these attributes.

Size content to the viewport

On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally; forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.

When developing a mobile site with a meta viewport tag, it's easy to accidentally create page content that doesn't quite fit within the specified viewport. For example, an image that is displayed at a width wider than the viewport can cause the viewport to scroll horizontally. You should adjust this content to fit within the width of the viewport, so that the user does not need to scroll horizontally.

The Content is not sized correctly for the viewport Lighthouse audit can help you automate the process of detecting overflowing content.

An image has fixed dimensions and if it is larger than the viewport will cause a scrollbar. A common way to deal with this problem is to give all images a max-width of 100% . This will cause the image to shrink to fit the space it has, should the viewport size be smaller than the image. However because the max-width , rather than the width is 100% , the image will not stretch larger than its natural size. It is generally safe to add the following to your stylesheet so that you will never have a problem with images causing a scrollbar.

Add the dimensions of the image to the img element

When using max-width: 100% you are overriding the natural dimensions of the image, however you should still use the width and height attributes on your <img> tag. This is because modern browsers will use this information to reserve space for the image before it loads in, this will help to avoid layout shifts as content loads.

Since screen dimensions and width in CSS pixels vary widely between devices (for example, between phones and tablets, and even between different phones), content should not rely on a particular viewport width to render well.

In the past, this required setting elements used to create layout in percentages. In the example below, you can see a two-column layout with floated elements, sized using pixels. Once the viewport becomes smaller than the total width of the columns, we have to scroll horizontally to see the content.

Screenshot of a two-column layout with most of the second column outside the viewport

By using percentages for the widths, the columns always remain a certain percentage of the container. This means that the columns become narrower, rather than creating a scrollbar.

Modern CSS layout techniques such as Flexbox, Grid Layout, and Multicol make the creation of these flexible grids much easier.

This layout method is ideal when you have a set of items of different sizes and you would like them to fit comfortably in a row or rows, with smaller items taking less space and larger ones getting more space.

In a responsive design, you can use Flexbox to display items as a single row, or wrapped onto multiple rows as the available space decreases.

Read more about Flexbox .

CSS Grid Layout

CSS Grid Layout allows for the straightforward creation of flexible grids. If we consider the earlier floated example, rather than creating our columns with percentages, we could use grid layout and the fr unit, which represents a portion of the available space in the container.

Grid can also be used to create regular grid layouts, with as many items as will fit. The number of available tracks will be reduced as the screen size shrinks. In the below demo, we have as many cards as will fit on each row, with a minimum size of 200px .

Read more about CSS Grid Layout

Multiple-column layout

For some types of layout you can use Multiple-column Layout (Multicol), which can create responsive numbers of columns with the column-width property. In the demo below, you can see that columns are added if there is room for another 200px column.

Read more about Multicol

Use CSS media queries for responsiveness

Sometimes you will need to make more extensive changes to your layout to support a certain screen size than the techniques shown above will allow. This is where media queries become useful.

Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the types of device rendering the content, or the features of that device, for example width, height, orientation, ability to hover, and whether the device is being used as a touchscreen.

To provide different styles for printing, you need to target a type of output so you could include a stylesheet with print styles as follows:

Alternatively, you could include print styles within your main stylesheet using a media query:

For responsive web design, we are typically querying the features of the device in order to provide a different layout for smaller screens, or when we detect that our visitor is using a touchscreen.

Media queries based on viewport size

Media queries enable us to create a responsive experience where specific styles are applied to small screens, large screens, and anywhere in between. The feature we are detecting here is therefore screen size, and we can test for the following things.

  • width ( min-width , max-width )
  • height ( min-height , max-height )
  • orientation
  • aspect-ratio

All of these features have excellent browser support, for more details including browser support information see width , height , orientation , and aspect-ratio on MDN.

Media queries based on device capability

Given the range of devices available, we cannot make the assumption that every large device is a regular desktop or laptop computer, or that people are only using a touchscreen on a small device. With some newer additions to the media queries specification we can test for features such as the type of pointer used to interact with the device and whether the user can hover over elements.

  • any-pointer

Try viewing this demo on different devices, such as a regular desktop computer and a phone or tablet.

These newer features have good support in all modern browsers. Find out more on the MDN pages for hover , any-hover , pointer , any-pointer .

Using any-hover and any-pointer

The features any-hover and any-pointer test if the user has the capability to hover, or use that type of pointer even if it is not the primary way they are interacting with their device. Be very careful when using these. Forcing a user to switch to a mouse when they are using their touchscreen is not very friendly! However, any-hover and any-pointer may be useful if it is important to work out what kind of device a user has. For example, a laptop with a touchscreen and trackpad should match coarse and fine pointers, in addition to the ability to hover.

How to choose breakpoints

Don't define breakpoints based on device classes. Defining breakpoints based on specific devices, products, brand names, or operating systems that are in use today can result in a maintenance nightmare. Instead, the content itself should determine how the layout adjusts to its container.

Pick major breakpoints by starting small, then working up

Design the content to fit on a small screen size first, then expand the screen until a breakpoint becomes necessary. This allows you to optimize breakpoints based on content and maintain the least number of breakpoints possible.

Let's work through the example we saw at the beginning: the weather forecast. The first step is to make the forecast look good on a small screen.

Screenshot of a weather app at a mobile width

Next, resize the browser until there is too much white space between the elements, and the forecast simply doesn't look as good. The decision is somewhat subjective, but above 600px is certainly too wide.

Screenshot of a weather app with wide gaps between items

To insert a breakpoint at 600px , create two media queries at the end of your CSS for the component, one to use when the browser is 600px and below, and one for when it is wider than 600px .

Finally, refactor the CSS. Inside the media query for a max-width of 600px , add the CSS which is only for small screens. Inside the media query for a min-width of 601px add CSS for larger screens.

Pick minor breakpoints when necessary

In addition to choosing major breakpoints when layout changes significantly, it is also helpful to adjust for minor changes. For example, between major breakpoints it may be helpful to adjust the margins or padding on an element, or increase the font size to make it feel more natural in the layout.

Let's start by optimizing the small screen layout. In this case, let's boost the font when the viewport width is greater than 360px . Second, when there is enough space, we can separate the high and low temperatures so that they're on the same line instead of on top of each other. And let's also make the weather icons a bit larger.

Similarly, for the large screens it's best to limit to maximum width of the forecast panel so it doesn't consume the whole screen width.

Optimize text for reading

Classic readability theory suggests that an ideal column should contain 70 to 80 characters per line (about 8 to 10 words in English). Thus, each time the width of a text block grows past about 10 words, consider adding a breakpoint.

Screenshot of a a page of text on a mobile device

Let's take a deeper look at the above blog post example. On smaller screens, the Roboto font at 1em works perfectly giving 10 words per line, but larger screens require a breakpoint. In this case, if the browser width is greater than 575px , the ideal content width is 550px .

Avoid simply hiding content

Be careful when choosing what content to hide or show depending on screen size. Don't simply hide content just because you can't fit it on the screen. Screen size is not a definitive indication of what a user may want. For example, eliminating the pollen count from the weather forecast could be a serious issue for spring-time allergy sufferers who need the information to determine if they can go outside or not.

View media query breakpoints in Chrome DevTools

Once you've got your media query breakpoints set up, you'll want to see how your site looks with them. You could resize your browser window to trigger the breakpoints, but Chrome DevTools has a built-in feature that makes it easy to see how a page looks under different breakpoints.

Screenshot of DevTools with our weather app open and a width of 822 pixels selected.

To view your page under different breakpoints:

Open DevTools and then turn on Device Mode . This opens in responsive mode by default.

To see your media queries, open the Device Mode menu and select Show media queries to display your breakpoints as colored bars above your page.

Click on one of the bars to view your page while that media query is active. Right-click on a bar to jump to the media query's definition.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2019-02-12 UTC.

19 really useful responsive web design tutorials

Ensure your website has the optimal viewing experience with these responsive web design tutorials.

Responsive web design is no longer optional; sites have to be responsive these days. Thankfully RWD is easier than ever to implement as there are so many great tools to help you create and test your designs, and ensure you create the best user experience . 

Here's our roundup of some of the best resources that will guide you in making your websites work well and look great on any device. Want some more useful resources? Our guides to the best website builder and web hosting service are here to help, and we also have a selection of web design tips . If you're concerned about storing files securely, you need these brilliant cloud storage options.

01. How to start thinking responsively

In this post on FreeCodeCamp , Kevin Powell makes the important point that responsive web design's no longer a trend; it's the way sites are expected to be built, and that means thinking responsively from the start. Here he demonstrates how to get into the responsive frame of mind, while building a fully responsive 3-page website.

02. 9 responsive typography tips 

Responsive web design, naturally enough, needs responsive typography to go with it. But what does that even mean, and how do you implement it? We asked seven leading web designers for their tips on creating elegant, legible text in every viewport.

03. The rules of responsive web typography

Responsive web typography is tough – you need to have both design chops and technical know-how. But however tricky it might be, getting it wrong isn't an option, because typography is the cornerstone of web design. Follow these design principles and practical solutions to get it right.

04. Design a responsive site with em-based sizing

By using em units for font sizing, you can design components on the page that respond automatically should the font size change. Then, with a clever trick for a responsive font size, you can produce an entire page that adjusts dynamically based on the viewport width of the browser. Follow this tutorial to learn how to leverage the 'relative' behaviour of ems to create designs that are scalable and responsive.

05. Priority guides: a content-first alternative to wireframes

Wireframes may be the most widely-used tool for designing websites, apps and other digital interfaces, but they're not without their drawbacks, particularly when it comes to responsive design. Here Heleen van Nues and Lennart Overkamp introduce their preferred alternative to wireframes: priority guides , which contain content and elements for a mobile screen, sorted by hierarchy from top to bottom and without layout specifications.

06. The pro's guide to responsive web design

Written by Justin Avery , curator of the Responsive Design Weekly newsletter, this guide from net magazine takes web pros through the basics up to the more advanced responsive web design techniques.

07. How to design responsive and device-agnostic forms

Forms are one of the most important elements in any digital product design, and whether you need a signup flow or a multi-view stepper, you need to design it so that'll work effectively on mobile devices just as well as on the desktop. Here's how to do it , complete with helpful tips on how to use Flexbox.

08. Create a responsive layout with CSS Grid

CSS Grid Layout is growing in browser support every day, and while it's not a replacement for Flexbox or even for floats, when used in combination with them it's a great way to create new and exciting responsive layouts. Follow this step-by-step guide to building a responsive portfolio site using Grid.

09. The web designer's guide to Flexbox

Have you started using Flexbox yet? In this tutorial Wes Bos provides a comprehensive guide to the core concepts that will give you a solid understanding of everything you need to get to grips with this powerful tool.

10. Codrops Flexbox reference

This complete guide to Flexbox is written by Sara Soueidan, an author who is renowned for her ability to explain concepts in a way that's easy to follow without scrimping on detail. The Codrops guide is regularly updated so it's a great resource to return to when you need it. 

11. Stacks: Flexbox for Sketch

Stacks, part of the Auto Layout plugin, provide a way for you to use Flexbox technology within Sketch, without using CSS. This article explains how you can make use of this powerful technique for easy responsive design. 

12. A crash course in technical RWD

Writing on the Treehouse blog, Jerry Cao has condensed a lot of useful information into a relatively short, readable article .

13. Create flexible layouts with Susy and Breakpoint

If you don’t want to use a framework to build your responsive site, these Sass extensions are a nice alternative, each with their own strengths. They’ll take care of the responsive maths for you so you can focus on design. 

14. How to create responsive guides in Adobe XD

If you're keen to try out Adobe Experience Design (XD) , here's a good tutorial to get you started. It includes a video demonstration that takes you through every click of the process.

15. CSS at BBC Sport

This isn't a tutorial per se, but there's a lot of learning here. In this post , the first of a two-part series, frontend developer Shaun Bent takes us on a detailed tour of how CSS is done at BBC Sport. They've managed to keep the CSS foundation of this massive site under 9kb, and it's fascinating to see how that's been done.

16. Sticky footer, five ways

Sticky footer... that should be simple enough, right? Unfortunately not. It can be trickier than you might expect to get that footer in the right place on every device. Luckily Chris Coyier has put together five tricks that will help you to make it happen using calc() , Flexbox, negative margins and Grid.

17. Adapting to input

Responsive design isn’t just about making your page display properly on any device, you also have to make it function well – and that means it has to be good at accepting input in a world where desktops have touchscreens and phones have keyboards. This article by Jason Grigsby of Cloud Four has some sound advice. 

18. Our best practices are killing mobile web performance

Applied without consideration, certain best practices that were conceived during the desktop era may have a detrimental effect on mobile web performance. This article will make you think more deeply about how you get your site to work well on mobile. 

19. How to make responsive web apps with container queries

Learn how to transform a beautiful, complex web app – with components, states and interactions – across different dimensions and resolutions, using container querie .

Related articles: 

  • Create responsive forms and tables
  • How responsive web design changed the world
  • 7 game-changing web design tools for 2018

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Get the Creative Bloq Newsletter

Daily design news, reviews, how-tos and more, as picked by the editors.

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan , Deputy Editor Rosie Hilder , Deals Editor Beren Neale , Senior News Editor Daniel Piper , Digital Arts and Design Editor Ian Dean , Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear , as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

  • Tanya Combrinck

Related articles

Popular Tutorials

Popular examples, learn python interactively.

  • CSS Introduction
  • Include CSS in a Webpage
  • CSS Essential Concepts

Combinators & Selectors

  • CSS Selectors
  • CSS Pseduo Class Selector
  • CSS Pseduo Element Selector
  • CSS !important
  • CSS Units: em, px, rem etc.
  • CSS Font Family
  • CSS Font Size
  • CSS Font Weight
  • CSS Font Stretch
  • CSS Text Color
  • Use Custom Fonts in CSS

Text Formatting

  • CSS Text Decoration
  • CSS Text Transform
  • CSS Text Spacing
  • CSS Text Shadow
  • CSS Text Align
  • CSS Text Align Last
  • CSS Vertical Align
  • CSS Direction
  • CSS Background
  • CSS Background Color
  • CSS Background Image
  • CSS Background Repeat
  • CSS Background Attachment
  • CSS Background Size
  • CSS Background Clip
  • CSS Background Origin
  • CSS Background Position
  • CSS Opacity/Transparency

CSS Gradients

  • CSS Gradients (Linear Gradient)
  • CSS Radial Gradient
  • CSS Borders
  • CSS Border Style
  • CSS Border Width
  • CSS Border Color
  • CSS Border Shorthand
  • CSS Border Image
  • CSS Border Radius
  • CSS Box Model
  • CSS Height/Width
  • CSS Box Sizing
  • CSS Padding
  • CSS Outline
  • CSS Box Shadow

Display and Position

  • CSS Display
  • CSS Position
  • CSS z-index
  • CSS Overflow

CSS Float Layout

  • CSS clear float
  • CSS Creating Layout Using float
  • CSS calc() Function

CSS Flexbox

  • CSS Flex (Flexbox)
  • CSS Flex Container
  • CSS Flex items
  • Creating Responsive Layouts using Flexbox
  • CSS Grid Container
  • CSS Grid Item
  • Create an image gallery using CSS Grid

CSS Responsive Design

Responsive web design.

  • CSS Media Query: @media
  • Mobile First Design

CSS Transition, Transform, and Animations

  • CSS 2D Transform
  • CSS 3D Transforms
  • CSS Transitions
  • CSS Animations

Styling Elements

  • CSS Buttons Styling
  • CSS Forms Styling
  • CSS Tables Styling
  • CSS Lists Styling
  • CSS Icons Styling
  • CSS Img Styling

CSS Projects

  • Technical Documentation Page
  • Portfolio Site

Responsive web design is an approach to web development aimed at creating websites that adapt and respond to different screen sizes and devices.

The primary goal of responsive design is to provide an optimal and consistent user experience across a wide range of platforms, including desktop computers, laptops, tablets, and smartphones.

The following diagram shows how responsive web design allows the layout to adapt to various user devices without compromising user experience.

CSS Layout in Various Devices

  • CSS Media Queries

Media queries are CSS rules that apply specific styles and layout adjustments based on various conditions, such as screen size, resolution, orientation, or other device characteristics.

Media queries are essential for creating responsive and adaptive web designs that look and function optimally across different devices and screen dimensions.

Let's look at an example.

Here, the CSS enclosed in a media query will be applied only when the minimum width of the device is 768px.

  • Responsive Column Layout

Column layout refers to the arrangement of content on a webpage in multiple columns. This allows us to organize and present information in a structured and visually appealing manner.

There are several column layout configurations: 3-column, 2-column, and 1-column layouts.

Let's see how we can make responsive column layouts.

Browser Output

CSS Responsive Three Column Layout

In the above example, the flex property allows us to create three column layouts.

This type of layout is generally used for desktops and laptops to arrange different types of content in different columns.

For example, a three-column layout might be used in a news website to display headlines in one column, featured articles in another, and advertisements in the third.

Now, using flex properties and media queries, we can change the above three-column layout to a two-column layout.

CSS Responsive Two Column Layout

The above CSS styles change the three-column layout to a two-column layout for tablets and smaller devices.

Finally, for mobile devices with smaller widths, we can set the following styles to achieve a single-column layout.

CSS Responsive Single Column Layout

In this way, media queries are used to create a responsive web layout for the various devices.

Table of Contents

  • Introduction

Enjoy 2 months of free hosting with an annual WordPress plan. 30-day money-back guarantee.

The Beginner’s Guide to Responsive Web Design (Code Samples & Layout Examples)

With an internet increasingly accessed from mobile devices, it’s no longer enough to have a static website design that only looks good on a computer screen.

Not to mention, you also have to consider tablets, 2-in-1 laptops, and different smartphone models with different screen dimensions when coming up with a design.

So slapping your content into a single column and calling it quits isn’t going to cut it.

With responsive web design , you can make sure your website looks its best on cell phones, tablets, laptops, and desktop screens.

And that improvement in user experience means higher conversions and business growth.

This guide will give you everything you need to know about responsive website design, including definitions, a step-by-step walkthrough, examples, and more.

What Is Responsive Web Design?

Responsive design is an approach to web design that makes your web content adapt to the different screen and window sizes of a variety of devices.

For example, your content might be separated into different columns on desktop screens, because they are wide enough to accommodate that design.

If you separate your content into multiple columns on a mobile device, it will be hard for users to read and interact with.

Responsive design makes it possible to deliver multiple, separate layouts of your content and design to different devices depending on screen size.

Responsive Web Design vs Adaptive Design

The difference between responsive design and adaptive design is that responsive design adapts the rendering of a single page version. In contrast, adaptive design delivers multiple completely different versions of the same page.

responsive adaptive design

They are both crucial web design trends  that help webmasters control how their site looks on different screens, but the approach is different.

With responsive design, users will access the same basic file through their browser, regardless of device, but CSS code will control the layout and render it differently based on screen size. With adaptive design, there is a script that checks for the screen size, and then accesses the template designed for that device.

Why Responsive Design Matters

If you’re new to web design, development , or blogging , you might wonder why responsive design matters in the first place.

The answer is simple. It’s no longer enough to design for a single device. Mobile web traffic has overtaken desktop and now makes up the majority of website traffic , accounting for more than 51% .

Mobile, tablet, desktop market share

When over half of your potential visitors are using a mobile device to browse the internet, you can’t just serve them a page designed for desktop. It would be hard to read and use, and lead to bad user experience.

But that’s not all. Users on mobile devices also make up the majority of search engine visits .

Mobile search traffic

Finally, over the last few years, mobile has become one of the most important advertising channels. Even in a post-pandemic market, mobile ad spending is growing 4.8% to $91.52 billion.

Whether you choose to advertise on social media or use an organic approach like YouTube SEO , the vast majority of your traffic will come from mobile users.

If your landing pages aren’t optimized for mobile and easy to use, you won’t be able to maximize the ROI of your marketing efforts. Bad conversion rates will lead to fewer leads and wasted ad spend.

Are WordPress Sites Responsive?

Whether or not WordPress sites are responsive depends on the theme of your WP site. A WordPress theme  is the equivalent of a template for a static website and controls the design and layout of your content.

If you use a default WordPress theme, like Twenty Twenty , the design is responsive, but since it’s a single-column design, you might not realize it when looking at it on different screens.

If you use another WordPress theme, you can test if it’s responsive or not by comparing how it looks on different devices or using Chrome Developer Tools.

The Building Blocks of Responsive Web Design

In this section, we’ll cover the underlying foundation for responsive website design and its different building blocks.

CSS and HTML

The foundation of responsive design is the combination of HTML and CSS , two languages that control the content and layout of a page in any given web browser.

html vs css

HTML mainly controls the structure, elements, and content of a webpage. For example, to add an image to a website , you have to use HTML code like this:

You can set a “class” or “id” that you can later target with CSS code .

You could also control primary attributes such as height and width within your HTML, but this is no longer considered best practice.

Instead, CSS is used to edit the design and layout of the elements you include on a page with HTML. CSS code can be included in a <style> section of a HTML document, or as a separate stylesheet file .

For example, we could edit the width of all HTML images at the element level like this:

Or we could target the specific class “full-width-img” by adding a period in front.

You can also control the design beyond just height, width, and color . Using CSS like this is how you make a design responsive when you combine it with a technique called media query.

Media Queries

A media query is a fundamental part of CSS3 that lets you render content to adapt to different factors like screen size or resolution.

media queries - responsive web design

It works in a similar way to an “if clause” in some programming languages , basically checking if  a screen’s viewport is wide enough or too wide before executing the appropriate code.

If the screen is at least 780 pixels wide, “full-width-img” class images will take up 90% of the screen and be automatically centered by equally wide margins.

Fluid Layouts

A fluid layout is an essential part of modern responsive design. In the good old days, you would set a static value for every HTML element, like 600 pixels.

A fluid layout relies instead on dynamic values like a percentage of the viewport width.

fluid layout - responsive web design

This approach will dynamically increase or decrease the different container element sizes based on the size of the screen.

Flexbox Layout

While a percentage-based layout is fluid, many designers and web developers felt it was not dynamic or flexible enough. Flexbox is a CSS module designed as a more efficient way to lay out multiple elements, even when the size of the contents inside the container is unknown.

A flex container expands items to fill available free space or shrinks them to prevent overflow. These flex containers have a number of unique properties, like justify-content, that you can’t edit with a regular HTML element.

flexbox justify

It’s a complicated topic, so if you want to use it in your design, you should read CSS Tricks’ flexbox guide .

Responsive Images

The most basic iteration of responsive images follows the same concept as a fluid layout, using a dynamic unit to control the width or height. The sample CSS code we covered earlier already accomplishes this:

The % unit approximates to a single percentage of the width or height of the viewport and makes sure the image remains in proportion to the screen.

The problem with this approach is that every user has to download the full-sized image, even on mobile.

To serve different versions scaled for different devices, you need to use the HTML srcset attribute in your img tags, to specify more than one image size to choose from.

WordPress automatically uses this functionality for images included in posts or pages.

When you’re attempting to create a responsive design for your website, the loading speed should be a top priority .

Pages that load in 2 seconds have an average 9% bounce rate , while pages that take 5 seconds lead to a 38% bounce rate.

Your approach to responsiveness must not block or delay your page’s first render any more than it needs to.

There are several ways you could make your pages faster. Optimizing your images , implementing caching , minification, using a more efficient CSS layout, avoiding render-blocking JS , and improving your critical rendering path are all great ideas you should consider.

Kinsta customers have access to a quick and easy way to accomplish this by using the   code minification feature that is built right into the MyKinsta dashboard , allowing customers to enable automatic CSS and JavaScript minification with a simple click.

You could also try to implement Google AMP for your mobile pages, but in our Google AMP case study , our mobile leads dropped by a whopping 59%.

Common Responsive Breakpoints

To work with media queries, you need to decide on the “responsive breakpoints” or screen size breakpoints. A breakpoint is the width of the screen where you use a media query to implement new CSS styles.

Common screen sizes

  • Mobile: 360 x 640
  • Mobile: 375 x 667
  • Mobile: 360 x 720
  • iPhone X: 375 x 812
  • Pixel 2: 411 x 731
  • Tablet: 768 x 1024
  • Laptop: 1366 x 768
  • High-res laptop or desktop: 1920 x 1080

If you choose a mobile-first approach to design, with a single column and smaller font sizes as the basis, you don’t need to include mobile breakpoints — unless you want to optimize the design for specific models.

mobile first - responsive web design

So you can create a basic responsive design with just two breakpoints, one for tablets and one for laptops and desktop computers.

Bootstrap’s Responsive Breakpoints

As one of the first, and most popular, responsive frameworks, Bootstrap led the assault on static web design and helped establish mobile-first design as an industry standard.

As a result, many designers to this day still follow Bootstrap’s screen-width breakpoints.

bootstrap responsive breakpoints

They use media queries to target landscape phones (576px), tablets (768px), laptops (992px) and extra large desktop screens (1200px).

How to Make Your Website Responsive

Now that you’re familiar with the building blocks, it’s time to make your website responsive.

Set Your Media Query Ranges (Responsive Breakpoints)

Set your media query ranges based on the unique needs of your design. For example, if we wanted to follow the Bootstrap standards for our design, we would use the following media queries:

  • 576px for portrait phones
  • 768px for tablets
  • 992px for laptops
  • 1200px for large devices

Size Layout Elements with Percentages or Create a CSS Grid Layout

The first and most important step is to set up different sizes for different layout elements depending on the media query or screen breakpoint.

The number of layout containers you have will depend on the design, but most websites focus on the elements listed below:

  • Wrapper or Container

common website layout

Using a mobile-first approach , you can style the main layout elements like this (with no media query for the basic styles for mobile phones):

In a percentage-based approach, the “float” attribute controls which side of the screen an element will appear on, left, or right.

If you want to go beyond the basics and create a cutting-edge responsive design, you need to familiarize yourself with the CSS flexbox layout and its attributes like box-sizing  and flex .

Implement Responsive Images

One way to make sure that your images don’t break is merely using a dynamic value for all pictures, as we covered earlier.

But that won’t reduce the load placed on your mobile visitors when they access your website.

Make sure you always include a srcset that with different sizes of your photo when you add images to your pages.

Doing this manually can be quite time-consuming, but with a CMS like WordPress , it automatically happens when you upload media files .

Responsive Typography For Your Website Text

The main focus of responsive web design is on the responsiveness of the layout blocks, elements, and media. Text is often treated as an afterthought.

But for a truly responsive design, you should also adjust your font-sizes appropriately to match screen size.

The easiest way to do so is to set a static value for font-size, like 22 px, and adapt it in each media query .

2 scatter plot font size opt

You can target multiple text elements at the same time by using a comma to separate each one.

Test Responsiveness

First, you want to test whether your site is mobile-friendly with Google’s mobile-friendly test . Simply enter the URL of your website and click the “test URL” button to get the results.

Google’s Mobile-Friendly Test

Don’t worry if it takes a while to fetch your site. That doesn’t reflect your page loading speed.

If you followed the steps outlined in this article, it should say that you have a mobile-friendly website.

Then you want to test your site on multiple screen sizes with a tool like Chrome developer tools .

Press CTRL + Shift + I on Windows computers, or Command + Option + I on Macs to open the relevant device view. From here, you can select the mobile device or tablet of your choice to test the responsiveness of your design.

Testing responsive layouts in Chrome

There are a couple of questions you want to answer when going through this process.

  • Does the layout adjust to the correct amount of columns?
  • Does the content fit well inside the layout elements and containers on different screens?
  • Do the font sizes fit each screen?

CSS Units and Values for Responsive Design

CSS has both absolute and relative units of measurement. An example of an absolute unit of length is a cm or a px. Relative units or dynamic values depend on the size and resolution of the screen or the font sizes of the root element.

PX vs EM vs REM vs Viewport Units for responsive design

  • PX – a single pixel
  • EM – relative unit based on the font-size of the element.
  • REM – relative unit based on the font-size of the element.
  • VH, VW – % of the viewport’s height or width.
  • % – the percentage of the parent element.

A new web designer or developer should probably stick with pixels for text because they are the most straight-forward unit of length in CSS.

But when setting the width and max-width of images and other elements, using % is the best solution. This approach will make sure the components adjust to the screen size of every device.

Responsive Design Examples

Below we will cover a few examples of responsive web design from different industries — and learn from what they do right and wrong.

1. Online Newspaper: New York Times

nyt responsive design

On desktop, the NYT layout reminds you of a traditional newspaper, crowded with visuals and different rows and columns of content. There seems to be a separate column or row for every category of news.

On mobile, it conforms to the single-column standard and also adjusts the menu to be in the accordion format to be easier to use.

2. Blog: The Art of Non-Conformity

chris guillebeau responsive design 2

Chris Guillebeau’s blog “The Art of Non-Conformity” has been going strong for over a decade. While the design isn’t the most cutting edge, it’s responsive and adapts the two-column sidebar and main content layout to a single-column design on mobile devices.

3. Ecommerce: Amazon

amazon responsive design 1

Amazon is a global leader in ecommerce for a reason, their user interface is perfectly fluid across all devices.

Their tablet layout simply removes some of the white space and adds a scrollable section of icons to fit more content into a smaller package.

Their mobile layout brings it into a single column, focusing on the essentials, like recent purchase history, rather than the different section link icons from their main homepage.

4. Video Site: YouTube

youtube responsive design

YouTube on mobile, tablet, and laptop

The core of YouTube’s homepage design is a flexible grid of videos that are relevant to each user. On tablets, the number of columns in each row goes down to three. On mobile, it’s reduced to a single-column design.

The mobile version also moves the main menu to the bottom of the screen, closer to the thumbs of their smartphone users. This simple move improves navigation and UX.

5. Online Magazine: Wired

wired responsive design

Wired’s approach to responsive web design is focused on implementing a single-column layout on all smaller screens, starting with tablets.

It’s a basic layout but makes it easier to draw user attention to top stories and their CTA to subscribe .

There are a lot of different elements that go into responsive web design. Without a basic understanding of HTML and CSS, it can be easy to make mistakes.

But through familiarizing yourself with the different building blocks, analyzing the examples with web dev tools, and testing as you go using the sample code, you should be able to make your website responsive without any major issue.

If that sounds too much to achieve, you can always either hire a WordPress developer or simply make sure your theme is already responsive.

html tutorial responsive design

Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter .

Related Articles and Topics

html tutorial responsive design

16 Fastest WordPress Themes (Based on Thorough Testing)

html tutorial responsive design

What Is the Average Web Developer Salary? Here’s What Data Says

  • Digital Marketing
  • Web Development

Gravatar for this comment's author

I like to design my responsive websites with breakpoints that are based on the content of the website rather than on device sizes. For example, sometimes 4 columns need to change to 2 columns at a width when the 4 columns become too narrow to read. That width may not correspond to a specific device breakpoint. This is also true of font sizes. Sometimes you need to adjust a font size when it starts being unreadable which may be at a width that is not based on a device breakpoint. Creating breakpoints based on design/content rather than devices gives the reader, the consumer of the content, a better experience.

Gravatar for this comment's author

Thanks a lot for this awesome article. Your ideas are absolutely fantastic. Really helpful for the beginners for web design .

Gravatar for this comment's author

Great examples have been mentioned here..!! Mobile responsive design… Its became a new trend as mobile users are increasing day-by-day. Yes it is good to optimize our site for mobile users for better user experience..

Gravatar for this comment's author

Very enriching article! Just want I was looking for!

Gravatar for this comment's author

Wow one clear, near and on point article about responsive design. Thank you so much

Gravatar for this comment's author

Unfortunately Chrome DEV tools doesn’t account for viewport size, but only for screen size. So if the simulated mobile screen in the DEV tools is using “pixel merging”, say it simulates 1 pixel out of 4 real device pixels, setting the real device pixel size in the Chrome DEV tools will not give you the real view on that mobile screen. So before testing for a phone with a certain resolution, you should check what is the viewport size for that phone screen, and use it instead of the device resolution, to be able to simulate that screen accurately in the Chrome DEV tools.

Leave a Reply Cancel reply

By submitting this form: You agree to the processing of the submitted personal data in accordance with Kinsta's Privacy Policy , including the transfer of data to the United States.

You also agree to receive information from Kinsta related to our services, events, and promotions. You may unsubscribe at any time by following the instructions in the communications received.

  • Domain Names
  • Websites & Hosting
  • Email & Marketing
  • Partner Programs & Products
  • Reseller Programs
  • GoDaddy Pro - Designers & Developers
  • Search for Domain Names
  • Auctions for Domain Names
  • Transfer Domain Names
  • Appraise Domain Name Value
  • Browse Domain Name Options
  • Generate Domain & Business Names
  • Domain Broker Service
  • Find a Domain Owner (WHOIS)
  • Save with Bundles
  • Website Builder
  • Online Store
  • Website Design Services
  • Tools for Web Professionals
  • All Website Options
  • Web Hosting
  • WordPress Hosting
  • Managed WooCommerce Stores
  • All Hosting Options
  • SSL Certificates
  • Website Security
  • All Web Security Options
  • Point of Sale Systems
  • Smart Terminal
  • Tap to Pay on iPhone
  • Marketplaces and Social
  • Online Pay Links
  • GoDaddy Payments
  • All Commerce Options
  • Email & Microsoft 365
  • Second Mobile Phone Number
  • Content & Photo Creator
  • Free Logo Maker
  • Digital Marketing Suite
  • Let Us Grow Your Brand
  • SEO Services
  • All Marketing Options

Have an account? Sign in now.

New to GoDaddy? Create an account to get started today.

  • Control Panel Links:
  • Manage Domains
  • Manage Website Builder
  • Manage Hosting
  • Manage SSL Certificates
  • Manage Email
  • Inbox Links:
  • Office 365 Email Login
  • GoDaddy Webmail Login

Responsive Web Design Tutorial Step By Step

Responsive web design tutorial: step-by-step

html tutorial responsive design

  • Share "Responsive web design tutorial: step-by-step" on Facebook
  • Share "Responsive web design tutorial: step-by-step" on X
  • Share "Responsive web design tutorial: step-by-step" on LinkedIn
  • Share "Responsive web design tutorial: step-by-step" on Pinterest

Why do we need to go through the following responsive web design tutorial step-by-step when we can just use WordPress and find a theme that takes care of making our website responsive?

Why design responsive from scratch?

In my article, Top 12 free responsive portfolio WordPress themes , we had clients who were on a limited budget and wanted us to create responsive portfolio WordPress websites using a portfolio theme (not a portfolio plugin) that would showcase their hard work.

We accomplished that goal by finding free WordPress themes to do the job, but our newest client, Trudy, is on an even tighter budget and absolutely does not want us to redesign her current site on WordPress or any other content management system. Trudy quite directly told us, “I don’t need all that.”

Trudy, a piano lessons teacher, already has a static website created with HTML and CSS, and all she wants us to do is make her existing site responsive for the about 15 percent of her students who have said to her, “Ms. Trudy, it’s hard to view the class schedule on your site on my cell phone (tablet).”

Aside from her class schedule, the content on her website hardly ever changes, which is why she doesn’t want to bother with the maintenance that comes with keeping WordPress secure, but she does want to keep up with the times since she knows she has some students who go to her website and check the class schedule on their nifty tablets and fancy smartphones.

She needs her website to be responsive so it looks good on all types of devices.

Here’s the thing …

After WordPress  started gaining popularity, a lot of us web designers got accustomed to the majority of our clients saying, “I want my site on WordPress!” It didn’t matter if they needed “all that” or not. They’d heard WordPress was the way to go now and grow later, so they demanded we “put” them on WordPress. So we did, and we (again, not you, just me and some other web designers) got a little rusty with the static website side of things.

That’s why I’m following with this responsive web design tutorial step-by-step for a refresher on how to make an HTML and CSS website look great on desktop computers, laptops, tablets and/or mobile phones with just one site design. If you’re also a web designer who needs to learn how to design a responsive website, then you’re reading the right guide.

Responsive web design tutorial: 5 steps

You can design a responsive website in five primary steps:

Understand the elements of responsive design.

Search for examples., define your media queries., define your breakpoints., test your choices..

Let’s get started!

1. Understand the elements of a responsive design

In Responsive web design: It’s not just a trend , Sonia Gregory writes that “responsive web design creates a system for a single site to recognize and react to the size of a user’s device.”

She goes on to say that responsive design has three elements at its foundation: a fluid grid, flexible images and text and media queries :

  • A fluid grid will allow a website to appear bigger or smaller depending on the size of a visitor’s device.
  • Flexible images and text will also appear bigger, smaller, not at all or be swapped out depending on a visitor’s device.
  • Lastly, it is the job of media queries to make fluid grids and flexible images and text appear correctly, so let’s give media queries a bit of a breakout explanation since they do the heavy lifting in responsive web design.

But first let’s …

2. Search for examples

Now that we have a solid working definition of what responsive web design is, and before we move forward with how to design a responsive website, we should do a search for responsive web design done well.

What follows is only a very small sampling, but this sample gives us a good idea of what we’re getting ourselves into with Trudy’s website.

Responsive Web Design Netwars

Adventure.com

Responsive Web Design Karma

In all four of these examples, the websites look great on different types of devices. The layouts are fluid and content reflows nicely. This is exactly what we want to happen when we redesign Trudy’s website.

And we’re going to make that happen with media queries.

3. Define your media queries

With responsive web design, the HTML of a website remains the same, but CSS media queries  allow different portions of your CSS to be applied when the website is viewed on different screen sizes.

A media query looks like this:

These specific portions of your CSS, contained within media queries, only apply when certain breakpoints are encountered.

Breakpoints? Yes, I know. We’re not even halfway through this tutorial, and there’s another term we need to define. As important as media queries are, they are absolutely nothing without breakpoints!

4. Define your breakpoints

Simply put, breakpoints determine when the fluid grid of a site will change size and when content on a page will be rearranged, hidden, or swapped out. Breakpoints are often (but not always) based on common screen sizes for different devices.

In Navigating the rapids of responsive design , Stephani Worts suggests that we “start with just a few logical breakpoints,” and I agree.

We cannot design for every single screen size that exists or will exist.

The best practice is to create breakpoints for the average sizes of desktop monitors and mobile device screens. Don’t get anal retentive about S-series or 8th generations and such. My best advice is to go with what the devices have in common, not what makes them different.

So for Ms. Trudy’s redesigned and responsive website, we’re going to define the following five media queries and breakpoints:

5. Test your choices

We know we can’t define media queries and breakpoints for every specific screen size, but we must make sure that the sizes we do choose actually work well within our responsive design. We’re not doing Ms. Trudy any favors by designating certain breakpoints and then not making absolutely sure that the content of her specific website reflows properly within the fluid grid we create. We can do this in two ways:

Use the browser’s developer tools

On a PC, using Google Chrome or Mozilla Firefox, you can go to a website and then either hit F12 on your keyboard or right-click and choose “Inspect” to bring up the browser’s developer tools to simulate viewing the website in different screen size modes.

F12 and the right-click methods work for Google Chrome and Mozilla Firefox on a Mac, also, but if you want to use developer tools with Safari, you have to first enable Web Inspector .

Let’s look at Ms. Trudy’s site in different sizes via the developer tools in the Google Chrome browser on the PC:

Responsive Web Design Tutorial Size 1

Using developer tools to view Ms. Trudy’s site doesn’t quite do it for me, though. While I’m grateful to have the option to simulate a client’s website in my browser, I actually prefer the real thing, which means…

Use actual devices

I’d say viewing the website on your actual devices is the better method for testing our clients’ websites to make sure they’re responsive because it is the devices that visitors are going to be using, and not developer tools, when viewing a website.

You get a much better indication of whether the fluid grid has enough for padding or margins or whether text and images are reflowing/resizing/hiding properly when you actually view the website on the devices site visitors use.

Responsive Web Design Tutorial Devices

What about ‘mobile first?’

Nathan Reimnitz makes an interesting point in his article  about whether a designer should go with the “mobile first” concept or with responsive design. He says with the “mobile first” concept, we start “from a place of limitation” because “mobile first” design dictates that we confine ourselves to smaller “real estate” and “functionality confinements.”

Keep in mind that our client is Ms. Trudy, who told us that only about 15 percent of her piano lesson students voiced any desire about wanting to see her site on their smart devices. For the most part, we can assume that the majority of Ms. Trudy’s students will be viewing her website on their laptops or desktops, so we’d do better to design with responsive in mind as opposed to starting with the “mobile first” concept.

If you’re like me and happen to be one of those people who prefer to work from a desktop, it’s easy to spot the websites that have been designed with the “mobile-first” concept. Everything is overly large when the site is viewed on a desktop monitor. I actually find this quite annoying, and I don’t think it’s that appealing, but that’s a topic for a different article.

Suffice it to say that we will be creating Ms. Trudy’s website with responsive design in mind over the “mobile-first” concept.

Conclusion: Why is responsive web design important?

So now that we have reacquainted ourselves with how to design a responsive website, we should ask ourselves why this is even important.

I mean, Ms. Trudy’s business wouldn’t suffer too horribly if only about 15 percent of her students have to do a bit of zooming, swiping and pinching. The other 85 percent are perfectly happy with Ms. Trudy’s site the way it is.

Or are they?

Instead of focusing on the 15 percent who have verbally expressed an opinion, let’s think about the folks who stopped doing business with Ms. Trudy because they had a hard time viewing her site on their mobile devices and didn’t say anything but took their business elsewhere. What about the potential new clients who found Ms. Trudy’s website through a search engine query but decided not to do business with her because her site wasn’t mobile-friendly? Or what about the potential clients who performed a search engine query on Google and never saw Ms. Trudy’s website at all?

More and more people are using smart devices  to view web content.

And don’t forget Google

Millions of people want to be on the first page of Google, because it’s the most popular search engine on the planet. Our clients are going to have a tougher time getting there without a mobile-friendly website.

Back in April 2015, Google started its campaign of penalizing websites by lowering their search engine ranking if the website wasn’t mobile-friendly. This was a big deal known all over the web as Mobilegeddon . Google picked up the pace with their campaign in March 2016 .

Google even created an online tool where you can give your site the Mobile-Friendly Test  and then get suggestions on what you need to fix to pass it. [Just FYI: don’t assume that because you’re using WordPress and your theme claims to be responsive that you’re in the clear, but that’s another subject for another article.]

In a nutshell, mobile-friendly websites are the lay of the land. It doesn’t matter whether 15 percent or even 5 percent of website visitors are using a mobile device to view your website or your clients’ websites.

You must make all the websites you design responsive, and hopefully, this responsive web design tutorial step-by-step will help you make that happen.

Web Development

What is responsive web design.

HTML

Responsive Web Design is about using HTML and CSS to automatically resize a website.

Responsive Web Design is about making a website look good on all devices (desktops, tablets, and phones):

Responsive

Setting The Viewport

When making responsive web pages, add the following <meta> element to all your web pages:

Media Queries

Media Queries plays an important role in responsive web pages.

With media queries you can define different styles for different browser sizes.

Example: Resize the browser window to see that the three elements below will display horizontally on large screens and vertically on small screens:

Learn more about Responsive Web Design at W3Schools' RWD Tutorial

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

When the CSS width property is set to a percentage value, an image will scale up and down when resizing the browser window.

This image is responsive:

html tutorial responsive design

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Advertisement

Image Depending on Browser Size

The HTML <picture> element allows you to define different images for different browser window sizes.

Responsive W3.CSS

W3.CSS is a free CSS Framework that offers Responsive Design by default.

W3.CSS makes it easy to develop sites that look nice on any device; desktop, laptop, tablet, or phone:

To learn more about W3.CSS, go to our W3.CSS Tutorial .

Bootstrap is a very popular framework that uses HTML, CSS and jQuery to make responsive web pages.

To learn more about Bootstrap, go to our Bootstrap Tutorial .

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

Responsive Web Design

The Internet took off quicker than anyone would have predicted, growing like crazy. Now, for the past few years, mobile growth has exploded onto the scene. The growth of mobile Internet usage is also far out pacing that of general Internet usage growth.

These days it is hard to find someone who doesn’t own a mobile device, or multiple, connected to the Internet. In the UK there are more mobile phones than people, and should trends continue mobile Internet usage will surpass that of desktop Internet usage within the year.

With the growth in mobile Internet usage comes the question of how to build websites suitable for all users. The industry response to this question has become responsive web design, also known as RWD .

Responsive Overview

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

The responsive web design term itself was coined, and largely developed, by Ethan Marcotte. A lot of what is covered in this lesson was first talked about by Ethan online and in his book Responsive Web Design , which is worth a read.

Food Sense Responsive Layout

Food Sense has a beautiful website, responsive to all different viewport sizes. No matter how large or small the viewport may be the Food Sense website adjust, creating a natural user experience.

Responsive vs. Adaptive vs. Mobile

For some the term responsive may not be new, and others might be even more acquainted with the terms adaptive or mobile . Which may leave you wondering what exactly is the difference between all of them.

Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change. With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.

Mobile, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users. While this does occasionally have its place, it normally isn’t a great idea. Mobile websites can be extremely light but they do come with the dependencies of a new code base and browser sniffing, all of which can become an obstacle for both developers and users.

Currently the most popular technique lies within responsive web design, favoring design that dynamically adapts to different browser and device viewports, changing layout and content along the way. This solution has the benefits of being all three, responsive, adaptive, and mobile.

Flexible Layouts

Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media. The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width , margin , or padding .

Relative Viewport Lengths

CSS3 introduced some new relative length units, specifically related to the viewport size of the browser or device. These new units include vw , vh , vmin , and vmax . Overall support for these new units isn’t great, but it is growing. In time they look to play a large roll in building responsive websites.

  • vw Viewports width
  • vh Viewports height
  • vmin Minimum of the viewport’s height and width
  • vmax Maximum of the viewport’s height and width

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. Reason being, the viewport height and width continually change from device to device. Website layouts need to adapt to this change and fixed values have too many constraints. Fortunately, Ethan pointed out an easy formula to help identify the proportions of a flexible layout using relative values.

The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element.

Flexible Grid

Let’s see how this formula works inside of a two column layout. Below we have a parent division with the class of container wrapping both the section and aside elements. The goal is to have the section on the left and the aside on the right, with equal margins between the two. Normally the markup and styles for this layout would look a bit like the following.

Fixed Grid Demo

See the Pen Fixed Grid by Shay Howe ( @shayhowe ) on CodePen .

Using the flexible grid formula we can take all of the fixed units of length and turn them into relative units. In this example we’ll use percentages but em units would work equally as well. Notice, no matter how wide the parent container becomes, the section and aside margins and widths scale proportionally.

Flexible Grid Demo

See the Pen Flexible Grid by Shay Howe ( @shayhowe ) on CodePen .

Taking the flexible layout concept, and formula, and reapplying it to all parts of a grid will create a completely dynamic website, scaling to every viewport size. For even more control within a flexible layout, you can also leverage the min-width , max-width , min-height , and max-height properties.

The flexible layout approach alone isn’t enough. At times the width of a browser viewport may be so small that even scaling the the layout proportionally will create columns that are too small to effectively display content. Specifically, when the layout gets too small, or too large, text may become illegible and the layout may begin to break. In this event, media queries can be used to help build a better experience.

Media Queries

Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive web design.

Initializing Media Queries

There are a couple different ways to use media queries, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document. Generally speaking it is recommend to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

Each media query may include a media type followed by one or more expressions. Common media types include all , screen , print , tv , and braille . The HTML5 specification includes new media types, even including 3d-glasses . Should a media type not be specified the media query will default the media type to screen .

The media query expression that follows the media type may include different media features and values, which then allocate to be true or false. When a media feature and value allocate to true, the styles are applied. If the media feature and value allocate to false the styles are ignored.

Logical Operators in Media Queries

Logical operators in media queries help build powerful expressions. There are three different logical operators available for use within media queries, including and , not , and only .

Using the and logical operator within a media query allows an extra condition to be added, making sure that a browser or devices does both a , b , c , and so forth. Multiple individual media queries can be comma separated, acting as an unspoken or operator. The example below selects all media types between 800 and 1024 pixels wide.

The not logical operator negates the query, specifying any query but the one identified. In the example below the expression applies to any device that does not have a color screen. Black and white or monochrome screens would apply here for example.

The only logical operator is a new operator and is not recognized by user agents using the HTML4 algorithm, thus hiding the styles from devices or browsers that don’t support media queries. Below, the expression selects only screens in a portrait orientation that have a user agent capable of rending media queries.

Omitting a Media Type

When using the not and only logical operators the media type may be left off. In this case the media type is defaulted to all .

Media Features in Media Queries

Knowing the media query syntax and how logical operators work is a great introduction to media queries but the true work comes with media features. Media features identify what attributes or properties will be targeted within the media query expression.

Height & Width Media Features

One of the most common media features revolves around determining a height or width for a device or browser viewport. The height and width may be found by using the height and width media features. Each of these media features may then also be prefixed with the min or max qualifiers, building a feature such as min-width or max-width .

The height and width features are based off the height and width of the viewport rendering area, the browser window for example. Values for these height and width media features may be any length unit, relative or absolute.

Within responsive design the most commonly used features include min-width and max-width . These help build responsive websites on desktops and mobile devices equally, avoiding any confusion with device features.

Using Minimum & Maximum Prefixes

The min and max prefixes can be used on quite a few media features. The min prefix indicates a values of greater than or equal to while the max prefix indicates a value of less than or equal to . Using min and max prefixes avoid any conflict with the general HTML syntax, specifically not using the < and > symbols.

Orientation Media Feature

The orientation media feature determines if a device is in the landscape or portrait orientation. The landscape mode is triggered when the display is wider than taller, and the portrait mode is triggered when the display is taller than wider. This media feature plays a large part with mobile devices.

Aspect Ratio Media Features

The aspect-ratio and device-aspect-ratio features specifies the width/height pixel ratio of the targeted rendering area or output device. The min and max prefixes are available to use with the different aspect ratio features, identifying a ratio above or below that of which is stated.

The value for the aspect ratio feature consist of two positive integers separated by a forward slash. The first integer identifies the width in pixels while the second integer identifies the height in pixels.

Pixel Ratio Media Features

In addition to the aspect ratio media features there are also pixel-ratio media features. These features do include the device-pixel-ratio feature as well as min and max prefixes. Specifically, the pixel ratio feature is great for identifying high definition devices, including retina displays. Media queries for doing so look like the following.

Resolution Media Feature

The resolution media feature specifies the resolution of the output device in pixel density, also known as dots per inch or DPI . The resolution media feature does accept the min and max prefixes. Additionally, the resolution media feature will accept dots per pixel ( 1.3dppx ), dots per centimeter ( 118dpcm ), and other length based resolution values.

Other Media Features

Other media features include identifying available output colors with use of the color , color-index , and monochrome features, identifying bitmap devices with the grid feature, and identifying the scanning process of a television with the scan feature. These features are less common but equally as helpful when needed.

Media Query Browser Support

Unfortunately media queries do not work within Internet Explorer 8 and below, as well as other legacy browsers. There are, however, a couple suitable polyfills written in Javascript.

Respond.js is a lightweight polyfill that only looks for min/max-width media types, which is perfect should those be the only media query types used. CSS3-MediaQueries.js is a more developed, and heavier, polyfill offering support for a larger array of more complex media queries. Additionally, keep in mind any polyfill can have performance concerns, and potentially slow down websites. Make sure that any given polyfill is worth the performance trade off.

Media Queries Demo

Using media queries we will now rewrite the flexible layout we built previously. One of the current problems within the demo appears when the aside width becomes uselessly small within smaller viewports. Adding a media query for viewports under 420 pixels wide we can change the layout by turning off the floats and changing the widths of the section and aside .

Demo without Media Queries

Without any media queries the section and aside become quite small. Perhaps too small to even contain any real content.

Demo with Media Queries

Using media queries to remove the floats and change their widths, the section and aside are now able to span the full width of the viewport, allowing breathing room for any existing content.

Identifying Breakpoints

Your instinct might be to write media query breakpoints around common viewport sizes as determined by different device resolutions, such as 320px , 480px , 768px , 1024px , 1224px , and so forth. This is a bad idea.

When building a responsive website it should adjust to an array of different viewport sizes, regardless of the device. Breakpoints should only be introduced when a website starts to break, look weird, or the experience is being hampered.

Additionally, new devices and resolutions are being released all of the time. Trying to keep up with these changes could be an endless process.

Mobile First

One popular technique with using media queries is called mobile first . The mobile first approach includes using styles targeted at smaller viewports as the default styles for a website, then use media queries to add styles as the viewport grows.

The operating belief behind mobile first design is that a user on a mobile device, commonly using a smaller viewport, shouldn’t have to load the styles for a desktop computer only to have them over written with mobile styles later. Doing so is a waste of bandwidth. Bandwidth that is precious to any users looking for a snappy website.

The mobile first approach also advocates designing with the constraints of a mobile user in mind. Before too long, the majority of Internet consumption will be done on a mobile device. Plan for them accordingly and develop intrinsic mobile experiences.

A breakout of mobile first media queries might look at bit like the following.

Additionally, downloading unnecessary media assets can be stopped by using media queries. Generally speaking, avoiding CSS3 shadows, gradients, transforms, and animations within mobile styles isn’t a bad idea either. When used excessively, they cause heavy loading and can even reduce a device’s battery life.

Mobile First Demo

Adding media queries to our previous example, we overwrote a handful of styles in order to have a better layout on viewports under 420 pixels wide. Rewriting this code to use the mobile styles first by default then adding media queries to adjust for viewports over 420 pixels wide we build the following:

See the Pen Mobile First by Shay Howe ( @shayhowe ) on CodePen .

Notice, this is the same amount of code as before. The only exception here is that mobile devices only have to render only one CSS declaration. All of the other styles are deferred, only loading on larger viewports and done so without overwriting any initial styles.

Mobile devices generally do a pretty decent job of displaying websites these days. Sometimes they could use a little assistance though, particularly around identifying the viewport size, scale, and resolution of a website. To remedy this, Apple invented the viewport meta tag.

Website without Viewport Meta Tag

Although this demo has media queries, many mobile devices still do not know the initial width or scale of the website. Therefore, they may not interrupt media queries.

Viewport Height & Width

Using the viewport meta tag with either the height or width values will define the height or width of the viewport respectively. Each value accepts either a positive integer or keyword. For the height property the keyword device-height value is accepted, and for the width property the keyword device-width is accepted. Using these keywords will inherit the device’s default height and width value.

For the best results, and the best looking website, it is recommend that you use the device defaults by applying the device-height and device-width values.

Website with Viewport Meta Tag

Letting devices know the intended width of the website, device-width in this case, allows the website to be sized properly and to pick up any qualifying media queries.

Viewport Scale

To control how a website is scaled on a mobile device, and how users can continue to scale a website, use the minimum-scale , maximum-scale , initial-scale , and user-scalable properties.

The initial-scale of a website should be set to 1 as this defines the ratio between the device height, while in a portrait orientation, and the viewport size. Should a device be in landscape mode this would be the ratio between the device width and the viewport size. Values for initial-scale should always be a positive integer between 0 and 10 .

Viewport Scale Meta Tag

Using an integer above 1 will zoom the website to be larger than the default scale. Generally speaking, this value will most commonly be set to 1 .

The minimum-scale and maximum-scale values determine how small and how large a viewport may be scaled. When using minimum-scale the value should be a positive integer lower than or equal to the initial-scale . Using the same reasoning, the maximum-scale value should be a positive integer greater than or equal to the initial-scale . Values for both of these must also be between 0 and 10 .

Generally speaking, these values should not be set to the same value as the initial-scale . This would disable any zooming, which can be accomplished instead by using the user-scalable value. Setting the user-scalable value to no will disable any zooming. Alternatively, setting the user-scalable value to yes will turn on zooming.

Turning off the ability to scale a website is a bad idea . It harms accessibility and usability, preventing those with disabilities from viewing a website as desired.

Viewport Resolution

Letting the browser decide how to scale a website based off any viewport scale values usually does the trick. When more control is needed, specifically over the resolution of a device, the target-densitydpi value may be used. The target-densitydpi viewport accepts a handful of values including device-dpi , high-dpi , medium-dpi , low-dpi , or an actual DPI number.

Using the target-densitydpi viewport value is rare, but extremely helpful when pixel by pixel control is needed.

Combining Viewport Values

The viewport meta tag will accept individual values as well as multiple values, allowing multiple viewport properties to be set at once. Setting multiple values requires comma separating them within the content attribute value. One of the recommended viewport values is outlined below, using both the width and initial-scale properties.

A combination of width=device-width and initial-scale=1 provide the initial size and zoom commonly required.

CSS Viewport Rule

Since the viewport meta tag revolves so heavily around setting the styles of how a website should be rendered it has been recommend to move the viewport from a meta tag with HTML to an @ rule within CSS. This helps keep the style separated from content, providing a more semantic approach.

Currently some browsers have already implemented the @viewport rule, however support isn’t great across the board. The previously recommended viewport meta tag would look like the following @viewport rule in CSS.

Flexible Media

The final, equally important aspect to responsive web design involves flexible media. As viewports begin to change size media doesn’t always follow suit. Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes.

One quick way to make media scalable is by using the max-width property with a value of 100% . Doing so ensures that as the viewport gets smaller any media will scale down according to its containers width.

Flexible Media Demo

See the Pen Flexible Media by Shay Howe ( @shayhowe ) on CodePen .

Flexible Embedded Media

Unfortunately the max-width property doesn’t work well for all instances of media, specifically around iframe s and embedded media. When it comes to third party websites, such as YouTube, who use iframes for embedded media this is a huge disappointment. Fortunately, there is a work around .

To get embedded media to be fully responsive, the embedded element needs to be absolutely positioned within a parent element. The parent element needs to have a width of 100% so that it may scale based on the width of the viewport. The parent element also needs to have a height of 0 to trigger the hasLayout mechanism within Internet Explorer.

Padding is then given to the bottom of the parent element, the value of which is set in the same aspect ratio of the video. This allows the height of the parent element to be proportionate to that of it’s width. Remember the responsive design formula from before? If a video has an aspect ratio of 16:9, 9 divided by 16 equals .5625 , thus requiring a bottom padding of 56.25% . Padding on the bottom and not the top is specifically used to prevent Internet Explorer 5.5 from breaking, and treating the parent element as an absolutely positioned element.

Flexible Embedded Media Demo

For security reasons CodePen doesn’t allow iframe s within embedded code samples, however you may review and edit this code on their website.

100% Wide Container

75% Wide Container

50% wide container, resources & links.

  • Responsive Web Design via A List Apart
  • Viewport Percentage Lengths via W3C
  • CSS Media Queries via CSS-Tricks
  • Mobile First via Luke Wroblewski
  • An Introduction to Meta Viewport and @viewport via Dev.Opera
  • Share on Twitter
  • Share on Facebook
  • Share on Google+

Learn More HTML & CSS or Study Other Topics

Learning how to code HTML & CSS and building successful websites can be challenging, and at times additional help and explanation can go a long way. Fortunately there are plenty of online schools, boot camps, workshops, and the alike, that can help.

Select your topic of interest below and I will recommend a course I believe will provide the best learning opportunity for you.

Select Your Topic of Interest:

Your course recommendations:.

Based on your interest in Data & Machine Learning I recommend checking out the following Pluralsight courses :

  • Launching into Machine Learning Beginner
  • How Machine Learning Works Beginner
  • Key Concepts Machine Learning Beginner
  • Machine Learning Engineering Beginner
  • Building Your First Machine Learning Solution Beginner
  • Data Analytics: Hands On Beginner
  • Programming with R Beginner
  • Data Science with R Beginner
  • Interpreting Data with Python Beginner
  • Machine Learning Literacy Intermediate
  • Data Analytics Literacy Intermediate
  • Python for Data Analysts Intermediate

Based on your interest in Product & Design I recommend checking out the following Pluralsight courses :

  • UX Design Beginner
  • Visual Design for UX Beginner
  • Figma: Getting Started Beginner
  • User Experience Tips and Tricks for Developers Beginner
  • Product Management: Exploring the Product Business Beginner
  • Evolving a Product Management Career Beginner
  • Creating User Experiences: Fundamental Design Principles Intermediate
  • UX Concepts Intermediate
  • UX Research Intermediate
  • Visual Design for the Web Advanced

Based on your interest in Front-end Development I recommend checking out the following Pluralsight courses :

  • Front End Web Development Career Kickstart Beginner
  • Hands On Responsive Web Design Beginner
  • JavaScript: Getting Started Beginner
  • JavaScript Best Practices Intermediate
  • JavaScript REST APIs: Getting Started Beginner
  • Fundamentals of Functional Programming in JavaScript Intermediate
  • Practical Design Patterns in JavaScript Intermediate
  • Advanced Techniques in JavaScript and jQuery Intermediate
  • Tactics and Tools for Troubleshooting Front-end Web Development Intermediate
  • Building Web Applications with React Intermediate
  • Building Web Apps with Vue Intermediate
  • Advanced JavaScript Advanced

Based on your interest in Mobile Development I recommend checking out the following Pluralsight courses :

  • iOS App Development: Fundamentals Beginner
  • Start Developing for Android Beginner
  • Understanding Android Application Basics Beginner
  • Swift Fundamentals Beginner
  • Java Language Fundamentals Beginner
  • Building a Real World iOS Application with Swift Intermediate
  • Developing Android Applications with Kotlin Intermediate
  • Build Mobile Applications With React Native Intermediate

Based on your interest in Web Development I recommend checking out the following Pluralsight courses :

  • Introduction to Web Development Beginner
  • How to Have a Better Career in Software Beginner
  • Web Development: Executive Briefing Beginner
  • Git: The Big Picture Beginner
  • Building Web Apps with Ruby On Rails Beginner
  • Ruby Language Fundamentals Beginner
  • C Development Fundamentals Beginner
  • Python: The Big Picture Beginner
  • Professionalism for Developers Intermediate
  • Mastering Git Intermediate
  • Getting Started with Progressive Web Apps Intermediate

Based on your interest in Info & Cyber Security I recommend checking out the following Pluralsight courses :

  • The Information Security Big Picture Beginner
  • JavaScript Security Beginner
  • AWS Cloud Security Beginner
  • Software Development Security Intermediate
  • Secure Coding: Preventing Sensitive Data Exposure Intermediate
  • Web Application Penetration Testing Fundamentals Intermediate
  • Security Operations Intermediate
  • Security Management Intermediate

Learn to Code HTML & CSS the Book

HTML and CSS

Learn to Code HTML & CSS is an interactive beginner’s guide with one express goal: teach you how to develop and style websites with HTML and CSS. Outlining the fundamentals, this book covers all of the common elements of front-end design and development.

Also available at Amazon and Barnes & Noble

Looking for Beginner HTML & CSS Lessons?

HTML and CSS

Checkout these beginner focused HTML and CSS lessons , compiled into a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS, working through all common components.

Join the Newsletter

To stay up to date and learn when new courses and lessons are posted, please sign up for the newsletter—spam free.

  • HTML Tutorial
  • HTML Exercises
  • HTML Interview Questions
  • HTML Attributes
  • HTML Examples
  • HTML Cheat Sheet
  • HTML Color Picker
  • HTML Formatter
  • HTML Projects

Related Articles

  • Solve Coding Problems
  • HTML Introduction
  • HTML Editors
  • HTML Basics
  • HTML Comments
  • HTML Elements
  • HTML Heading
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Colors
  • HTML Images
  • HTML Favicon
  • HTML Tables
  • HTML Ordered Lists
  • HTML Unordered Lists
  • HTML Description Lists
  • HTML Block and Inline Elements
  • HTML Iframes
  • HTML File Paths
  • HTML Layout
  • HTML Computer Code Elements
  • HTML5 Semantics
  • HTML Entities
  • HTML Symbols
  • HTML Emojis
  • HTML Charsets
  • HTML URL Encoding

HTML Responsive Web Design

  • HTML5 Video

HTML Graphics

  • SVG Tutorial

HTML Tutorial References

  • HTML Tags - A to Z List
  • HTML Attributes Complete Reference
  • HTML Global Attributes
  • HTML5 Complete Reference
  • HTML5 MathML Complete Reference
  • HTML DOM Complete Reference
  • HTML DOM Audio/Video Complete Reference
  • SVG Element Complete Reference
  • SVG Attribute Complete Reference
  • SVG Property Complete Reference
  • HTML Canvas Complete Reference

HTML Responsive Web Design refers to the changes in web pages to automatically resize, hide, show, shrink, and expand various HTML elements. These changes will depend on the devices and the screen sizes of the device. The web pages will automatically adjust according to the screen size used.

In this article, we will demonstrate how we can create HTML responsive web design so that it will adjust according to the screen size of the device used.

Table of Content

  • Using HTML Viewport meta tag for Responsive Web Design
  • Using Responsive Images
  • Using Responsive Texts
  • Using CSS media Queries
  • Using Responsive Layouts

Approach 1: Using HTML Viewport meta tag for Responsive Web Design

HTML Viewport represents the area of display or screen visible to the user. It varies from device to device. This approach set the available screen width as the 100% width of the web pages and adjusts content accordingly to make it responsive.

Example: In this example, we will use the HTML viewport meta tag for responsive pages.

Approach 2: Using Responsive Images

Responsive images are just a part of responsive websites. Images that can change their dimensions, scaling them up or down, according to the browser width, are  responsive images . Images should be responsive to improve users’ experience on various devices of different sizes.

Example: In this example, we will use the image width property to occupy 100% of the screen width.

Approach 3: Using Responsive Texts

In this approach, we will define font sizes in terms of %, vw, vh, etc to get the responsive size of texts. This approach will auto-adjust the text size up to a certain limit and when the limit is reached it will start justifying the content to set it within the available width.

Example: This example demonstrates Responsive Web Design by making Responsive Texts.

Approach 4: Using CSS media Queries

The  Media query  in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.

Media queries can be used to check many things:

  • width and height of the viewport
  • width and height of the device
  • Orientation

Example: In this example, we will use screen size in a media query to make the webpage responsive according to different breakpoints.

Output: Background color and font size transition for width less than 800px.

Note: Sometimes, this method doesn’t show the correct output on Google Chrome.

Approach 5: Using Responsive Layouts

The responsive layout module of CSS includes the following properties.

Using flexbox property

In this approach, we will use CSS display property to make the page responsive. Display layouts like flexbox, inline, blocks, and grids can be used to make the design responsive. CSS flexbox property auto adjusts the content (no. of columns in a row) according to the screen width as shown in the output gif.

Example: In this example, we will use display type flexbox to show adjust items automatically according to the screen size.

Using CSS Grids

This approach uses a CSS display grid to create a 2D layout along with other grid options. It allows us to decide the number of columns we want to keep and instead of rearranging the columns like Flexbox, it adjusts the content within individual column elements.

Example: In this example, CSS Grid layout is used to arrange contents in 2D form, i.e., rows and columns.

Using CSS MultiColumn

It is similar to grids. CSS MulotiColumn allows developers to choose the properties like no. of columns, width, gap, etc. for each column. These values remain unchanged but the content inside the columns adjusts.

Example: This example uses CSS MultiColumn for content division into a specific number of columns.

Please Login to comment...

  • HTML-Questions
  • Web Technologies

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

Not sure where to start?

html tutorial responsive design

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Learn Responsive Web Design

Join 10218 other students

Log in to get

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

This bootcamp includes

The course creator Kevin Powell

with Kevin Powell

Course level: Intermediate

This course will take you to a professional level in responsive web design. You'll learn to build advanced layouts while solving fun coding challenges along the way.

What's inside

This course contains 174 interactive scrims spread across 6 modules.

25 lessons 2 hours 55 min

45 lessons 4 hours 7 min

38 lessons 2 hours 53 min

17 lessons 1 hour 18 min

19 lessons 1 hour 37 min

30 lessons 2 hours 12 min

You'll learn

Sane CSS defaults

Specificity and selectors

CSS best practices

Text and fonts

Units and responsive Text

Flexbox layouts

Vertical aligning of content

Design best practices

Media Queries and viewports

Forms and how to make them look good

Advanced flexbox concepts

CSS Grid layouts

Icons with Font Awesome

Transitions and animations

Adding it all together

You'll build

screenshot

The simple life blog

Learn how to handle text and typography by building a neat-loooking blog.

screenshot

BBQ splash page

A beautiful and responsive landing page to introduce you to basic concepts

screenshot

Marketing agency website

This company website will take your CSS skills to a professional level.

Prerequisites

Before taking this course, you should have a basic understanding of HTML and CSS. You should know how to build simple layouts using those technologies.

Per Harald Borgen

Meet your teacher

The course creator

Kevin Powell

Hi, I'm Kevin. I love to teach people how to make the web and how to make it look good while they're at it. Over 300.000 people follow my tutorials on YouTube. I learned to make websites on my own. I know how fun and rewarding it is, but I also know that it can be incredibly frustrating. I'm here to help make your journey into web development as easy and as fun as possible.

Why this course rocks

Let me ask you a few questions:

Do you want to learn to build responsive websites that look 100% professional?

Do you want to be confident that your website works well on all devices?

Are you tired of feeling that your CSS is a mess?

If your answer is YES, then this is the perfect course for you! It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing page, a banner, and a company website. Each one will take your skills to a new level. The best learning experience

To ensure that the knowledge sticks with you, you are given interactive coding challenges as you progress. It's as if you and the instructor are pair-programming together!

This kind of fast-paced interactivity simply isn't possible with any other platform than Scrimba! This course is also a part of our hugely popular Front-End Developer Career Path .

What is responsive web design?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Do I have to pay with credit card?

We also support PayPal. Click the buy button and you'll get the opportunity to choose between credit card (via Stripe) or PayPal.

I have another question!

Sure! Just shoot us an email at [email protected]

Built with Imba

Responsive Web Design Grid

10+ Best Responsive Web Design Tutorials

The use of mobile devices such as iPad, iPhone, and other smartphones has increased a lot in the last few years and this represents the main reason why responsive web design started to gain more importance in web design.

These days, making your website responsive is a MUST! With so many mobile devices out there, you’ll be missing a lot of visitors if you won’t modify your website and make it responsive too. If you are a beginner web designer or just want to improve your skills, these best responsive web design tutorials will teach you how to develop a responsive website that can easily adapt its layout and design to fit in any device resolution.

These useful responsive web design tutorials will help you better understand this concept and design more complex websites.

Full Screen Responsive/Animated Landing Page – HTML5 & CSS3 Tutorial

Learn how to make a full screen responsive animated landing page with this video tutorial. Making a full-screen landing page responsive can be really tricky and give a lot of headaches but after watching this tutorial you will not think that anymore. This tutorial comes in really handy and will improve your coding skills. At the end, you’ll have the responsive full-screen page you have been trying to make. Try it out and watch how your skills rapidly improve.

Full Screen Landing Page – Responsive HTML5/CSS3 Tutorial

This is a really nice tutorial that will help you a lot, especially if you found the previous tutorial helpful and you want to learn more. You definitely enjoy this one. This video tutorial will teach you how to make a full-screen landing page. Check it, improve your skills and learn some new techniques with this HTML/CSS3 tutorial.

Responsive Web Design –  The Viewport

Responsive Web Design Tutorial - Setting Viewport

Viewports are very important in designing a responsive web page. They are practically the user’s visible area of your site. Initially, sites were designed to fit a computer screen but now that we have started using tablets and phones on a daily basis, we have to rethink the way we code and design, so that our website looks great on any device possible. So feel free to have a look at this tutorial to find out how easy it is to work with the viewport and learn how to set it out so it can size its content to offer a better user experience. Learn how to set your viewport using this method introduced by HTML5 to let web designers take control over it through the  <meta>  tag.

Responsive Web Design

Responsive Web Design Tutorial - Visual Guide

This responsive web design guide gives you a different approach to responsive design and teaches you how to understand responsiveness using a nice, easy to understand visual guide. In this tutorial will consider a design example, a simple page built for a hypothetical magazine. This simple page uses a two column layout which you will want to make it look good on any device and browser. The columns were built on a fluid grid with just a few images peppered throughout.

Responsive Web Design –  Grid-View

Responsive Web Design Grid Tutorial

The next part of these series of tutorials is about Grid-Views. Find out what they are and why they are so important, learn to build a responsive grid layout and place your content wisely. This tutorial will take you through each step of the way but do not forget to take a look at the rest of the tutorials from this set to learn more tricks and tips. At the end of the tutorial, you will notice that the webpage in the example still doesn’t look good when you resize the browser so make sure to take a look at the next chapter in which you will learn how to fix the problem.

Responsive Web Design –  Images

Responsive Web Design Images Tutorial

Now that you have learned about viewports and grid-views lets take a look at this tutorial which will teach you how to easily make your images look good on any device. You will learn some cool stuff about the max-width property, background images and how to display different images on different devices. Problems, like using the width property, using the max-width property, adding images to the web page, background images or picking and using different images for different devices, will no longer be a problem for you. You will even learn how to use the <picture> element.  HTML5 has introduced the <picture> element, which lets you define more than one image. All these useful things will let you create an awesome responsive website in the future!

Responsive Web Design  – Media Queries

Responsive Web Design Media Queries Tutorial

If you were wondering what Media Queries are and how they work, then you might want to take a closer look at this tutorial about them. Media Query is a simple CSS technique uses the @media rule to include a block of CSS properties only if a certain condition is true. It is as simple as that, but why stop there and not find out more. Have a look at this tutorial to improve your skills and to continue your set of responsive web tutorials. After finishing this tutorial, you will know how to add a breakpoint in your coding process and how to always design having smaller devices in mind.

Responsive Web Design –  Frameworks

Responsive Web Design Frameworks Tutorial

This tutorial will give you an insight on what frameworks are and some good examples for you to use in your projects. This tutorial comes in really handy if you are trying to learn how to use  W3.CSS, Bootstrap and failing. If you will take a closer look at this tutorial you’ll notice that for each of the two frameworks they have links to much more detailed tutorials.  All in all, this tutorial will help you create a responsive style sheet.

What Exactly are Media Queries?

What Exactly are Media Queries - Responsive Web Design Tutorials

This tutorial is a detailed example in regards of Media Queries. Find out more about how they work and how to use them to resize your stylesheet’s current width into the width of the viewing device. This tutorial is quite useful, especially thanks to all the tips and tricks it will teach you. You can read this tutorial whether you are a beginner or an RWD expert because you will be taking an extended look at its backbone, the Media Queries. If you are not familiar with the media attribute, no worries. They are used to separate different media types. Commonly used types are print, speech, projection, braille, and all. Despite the usefulness of each media type, for RWD our focus shall be geared toward the screen type.

Responsive Email Design

Responsive Email Design _ Campaign Monitor _ Campaign Monitor

Ever heard of responsive email design? If not, then you must have definitely had at least once a horrible experience with reading a newsletter email on your smartphone.  Newsletters look really well in your inbox but can be really difficult to read on a smaller device and this is why Campaign Monitor has come up with this impressive guide about the principles of designing for mobile as well as the fundamentals of designing and building mobile-friendly emails. Throughout this tutorial, you’ll learn its benefits, some cool tips, and techniques. Find out why you should optimize your emails for mobile and tablets learn some design techniques along the way.

Adaptive layouts with media queries

Adaptive page layout with Media Queries - Build your website with HTML5 and CSS3

In this complex tutorial, you will learn how to use adaptive layouts with media queries which affects browser dimensions (width, height, and aspect ratio), device dimensions (device-width, device-heigh, and device-aspect-ratio), browser orientation, and much more. The visitor’s screen resolution is what web designers are most concerned about. This mainly focuses on the space or number of pixels that vary from one screen to another. Knowing all those details about spaces or pixels is important and it will help you understand how your website will be displayed on different screens. Media Queries and this tutorial will help you understand the basic steps of responsive design.

You may also like:

  • 5 Best Laptops For Web Design | Best Computers For Web Design
  • 20 Awesome Web Design Photoshop Tutorials
  • 20 Best UI Design Tutorials for Beginners
  • 760+ Photoshop Tutorials For Web and Graphic Designers
  • 20 Best UX Patterns Tutorials
  • 10 Best Adobe Illustrator Tutorials For All Designers
  • 17 Best WordPress Tutorials for Beginners

3 thoughts on “10+ Best Responsive Web Design Tutorials”

Thats all very well and good! But it dont make no difference, cos in the end it boils down to browser design. It will only change for the good when, browser designers stop fighting for world dominaton of the web and start claborating on design standards only then will you have true cross compatiblity that dont break the web, html5 as a point in question!!!

I remember back in the 90’s when all web designers had to worry about was making sure their website rendered correctly in both Netscape and IE. A lot sure has changed since then. I have designed most of my sites to be iPhone friendly, but they look nothing like this. Thanks for sharing these references, they are going to be very useful for me.

Real useful information We’ve been experimenting with responsive layouts here at sent concepts

Leave a Comment Cancel reply

Save my name, email, and website in this browser for the next time I comment.

I Tried 10 Responsive Web Design Tools to See if They’re Worth It (2024 Results & Recommendations)

Published: February 12, 2024

Of all the pieces in a web designer’s tech stack, one that has quickly become indispensable is responsive design tools. Armed with one of these, you can get ahead of questions from stakeholders about why a website doesn’t look right on certain screen sizes, and ensure any design you’re working on is built to be responsive right from the start.

woman using a responsive web design tool on a laptop

I design websites mostly for small businesses that want a simple and straightforward way to communicate their offerings in their local area. The thing about most small businesses these days is that a huge majority of their traffic comes from mobile searches. So responsive design is absolutely paramount and top of mind.

Free Download: 77 Examples of Brilliant Web Design

There are numerous times I’ve been handed an existing website that can barely load on mobile and, if it does load, is almost totally unusable. Not only does this have visitors bouncing straight off the site to find a competitor, but it can damage first impressions of a company or brand.

So, when I’m working with developers on rebuilding a client site, I take a mobile-first approach and make sure that responsiveness is built into the design right from the start. Below, I’ve collected a list of responsive design tools I tested this year, along with a couple of familiar favorites that I regularly turn to.

Table of Contents

What are responsive design tools?

Evaluating responsive design tools, the software management tools i tested, so, are responsive design tools worth it.

Responsive design tools are apps or software for web developers and designers to help ensure the sites they are building will work seamlessly on multiple screen sizes and devices. Responsive design has become a pivotal part of web design as users are accessing sites on an increasingly diverse range of viewports.

There are different types of responsive design tools, and, depending on their structure, they offer different ways to build or test design responsiveness. Most base their functionality on easily building responsive grid systems, managing media queries, and other flexible layout elements.

Whether users are accessing your site on a smartphone, desktop monitor, laptop, or tablet, responsive web design tools help ensure a seamless user experience across all devices.

There are a lot of reasons to incorporate responsive design tools into your dev stack.

First, search engines like Google take mobile-friendliness into account when ranking websites in organic search results as part of their “mobile first” policy. So, responsive design contributes to driving traffic to the website.

Aside from that, responsive design affects a whole host of user engagement and retention metrics that, once you get users to your site, influence whether they stay, how long or how much they engage, and whether you can convert them.

In May 2023, data from Similarweb showed that 65.47% of all internet traffic was generated from mobile devices. Conversion rates are typically lower on mobile devices, but it’s entirely possible that’s a symptom of poor user experience rather than lower intent, because mobile draws the highest numbers of both new (65%) and returning (745) visitors to websites .

I mainly work with small businesses to redesign their websites. It started with a family member’s side gig and a website that needed a facelift. The results were far better than I expected, so I started investing time in upgrading some of the websites for my own side projects.

Fast forward a couple of years, and I now work with a couple of clients at a time on a referral basis to upgrade their online presence. The most common complaint I hear? “The website is terrible on mobile.”

I’ve tried a lot of different web design tools over the years, especially early on when I was getting to grips with the basics, and mostly worked on a trial-and-error basis. But tools for quickly and easily ensuring websites are optimized for mobile quickly became a regular and important part of my process.

If you’re shopping around for responsive design technology, there are a few things I would keep an eye out for.

Firstly, find one that’s easy to use. When it comes to straightforward websites, in particular, some tools have a lot of bells and whistles that you simply won’t need. So focus on the functionality you actually need and search for tools from there.

Another critical aspect for me is the ability to easily work with others in the tool. Most of the time, I work alongside a developer for more complex aspects of a site build, and I need to collaborate with them in one spot and hand off designs easily. Similarly, your client might want to look at the designs as you make progress, so a tool that makes it easy to preview designs for others is always a plus.

I always want to be able to test that what we’re building is as responsive as I’m promising it will be. So, the ability to test the site on a wide range of screen sizes and viewports is also important.

Finally, I like to work with pre-built components a lot. So tools that have large libraries of responsive components (forms, nav, icons, etc.) make my job a lot easier.

html tutorial responsive design

Free Website Design Inspiration Guide

77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You

  • Agency Pages
  • Ecommerce Pages
  • Tech Company Pages

You're all set!

Click this link to access this resource at any time.

I’m working on two websites at the moment that provide interesting use cases to test out responsive tools.

The first is a spa website that needs to be able to drive phone call clicks and website appointment bookings, showcase the treatment rooms, and highlight customer reviews. The second is an e-commerce site selling holiday decorations around the world.

Both sites have some issues with responsiveness and require pretty significant facelifts. So, I tried out some of the tools below on new designs for the sites to see what worked best.

1. Bootstrap

responsive web design tools, Bootstrap

Don't forget to share this post!

Related articles.

I Tried 10 Web Design Frameworks to Find the Best Ones in 2024 (Results & Recommendations)

I Tried 10 Web Design Frameworks to Find the Best Ones in 2024 (Results & Recommendations)

How to Fuse Website Design and SEO [Tips & Examples]

How to Fuse Website Design and SEO [Tips & Examples]

A Deep Dive Into Inclusive Web Design in 2024

A Deep Dive Into Inclusive Web Design in 2024

Website Footers: Best Design Practices & 24 Top Examples

Website Footers: Best Design Practices & 24 Top Examples

The Art of Engagement: Elevating Web Design with Multimedia Magic

The Art of Engagement: Elevating Web Design with Multimedia Magic

User Interface (UI) Design: What Is It? The Beginner’s Guide

User Interface (UI) Design: What Is It? The Beginner’s Guide

The 10 Best Web Design Books (+Recommendations)

The 10 Best Web Design Books (+Recommendations)

Is Your Website EEAT-compliant? What Developers Should Keep In Mind

Is Your Website EEAT-compliant? What Developers Should Keep In Mind

What Is Fluid Design and How Is It Used on Websites?

What Is Fluid Design and How Is It Used on Websites?

Graceful Degradation: Ensure Seamless Web Experiences Across Browsers

Graceful Degradation: Ensure Seamless Web Experiences Across Browsers

77 of blog and website page design examples.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

Responsive Design

“Responsive design” refers to the idea that your website should display equally well in everything from widescreen monitors to mobile phones. It’s an approach to web design and development that eliminates the distinction between the mobile-friendly version of your website and its desktop counterpart. With responsive design, they’re the same thing.

Responsive design is accomplished through CSS “media queries”. Think of media queries as a way to conditionally apply CSS rules. They tell the browser that it should ignore or apply certain rules depending on the user’s device.

Diagram: HTML content pointing to media queries, which point to mobile, tablet, and desktop devices

Media queries let us present the same HTML content as distinct CSS layouts. So, instead of maintaining one website for smartphones and an entirely unrelated site for laptops/desktops, we can use the same HTML markup (and web server) for both of them. This means that whenever we add a new article or edit a typo in our HTML, those changes are automatically reflected in both mobile and widescreen layouts. This is the reason why we separate content from presentation .

In this chapter, we’ll learn how media queries are really just a thin wrapper around the plain old CSS that we’ve been working with up ’til this point. As we’ll soon discover, it’s actually pretty easy to implement a responsive layout. ( Responsive Images , on the other hand, are an entirely different story).

Create a new project called responsive-design and a new file called responsive.html . It’s the emptiest web page that we’ve seen in awhile, but it’ll help us demonstrate something very important in the next section:

You’ll also need to download some images for later in the chapter. Unzip everything into the same folder as responsive.html , keeping the parent images folder. Your project should look like this before moving on:

Screenshot: Atom’s file browser with project files in it

  • CSS Media Queries

We’ll start small by simply updating the background color on the <body> element based on the device width. This is a good way to make sure our media queries are actually working before getting into complicated layouts.

Diagram: mobile device with red background, tablet with yellow background, desktop with blue background. Background colors set with media queries.

Let’s differentiate between narrow, medium, and wide layouts by creating a new styles.css stylesheet and adding the following:

When you resize your browser, you should see three different background colors: blue when it’s greater than 960px wide, yellow when it’s between 401px and 960px , and red when it’s less than 400px .

Media queries always begin with the @media “at-rule” followed by some kind of conditional statement, and then some curly braces. Inside the curly braces, you put a bunch of ordinary CSS rules. The browser only pays attention to those rules if the condition is met.

Diagram: media query composed of the @media at-rule, a media type, a media feature, then a bunch of ordinary CSS

The only screen “media type” means that the contained styles should only be applied to devices with screens (opposed to printed documents, like when you hit Cmd+P in a browser). The min-width and max-width parts are called “media features”, and they specify the device dimensions you’re targeting.

The above media queries are by far the most common ones you’ll encounter, but there are a lot of other conditions you can check for, including whether the device is in portrait or landscape mode, the resolution of its screen, and whether it has a mouse or not.

A Few Notes on Design

Ok, so @media is how we define different layouts for specific device widths, but what layouts are we actually trying to implement? The example web page for this chapter is going to look something like this:

Mockups of mobile, tablet, and desktop web pages

In the real world, it’s up to your web designer to supply you with these kinds of mockups. Your job as a developer is to implement the individual layouts using media queries to separate out the various CSS rules that apply to each one.

There’s a few well defined patterns for how a desktop layout collapses into a mobile layout (we’re using “layout shifter”). A lot of these decisions are in the realm of design, which is outside the scope of this code-oriented tutorial; however, there are two concepts that you must understand as a developer:

  • A “fluid” layout is one that stretches and shrinks to fill the width of the screen, just like the flexible boxes we covered a few chapters ago.
  • A “fixed-width” layout is the opposite: it has the same width regardless of the screen dimensions (we created one of these in the CSS Selectors chapter).

Diagram: fluid layout expanding to fill entire width of the browser, fixed-width layout staying the same even if browser gets wider

In our example web page, the mobile and tablet versions are fluid, and the desktop version is fixed-width.

Choosing Breakpoints

Most of those responsive design patterns have similar behavior, using fluid layouts for mobile/tablet devices and fixed-width layouts for wider screens. There’s a reason for this.

Fluid layouts let us target a range of screen widths instead of specific mobile devices. This is very important for web designers. When they set out to create a mobile layout, they aren’t trying to make something that looks good on an iPhone 6s, Galaxy S7, or iPad mini—they’re designing a fluid layout that looks good anywhere between 300 pixels and 500 pixels (or whatever).

In other words, the exact pixel values for the min-width and max-width parameters in a media query (collectively known as the “breakpoints” for a responsive website) don’t actually matter. Our website doesn’t care about the specific device the user is on. All it needs to know is that it should display a layout that looks pretty at 400 pixels wide (or whatever).

  • Mobile-First Development

Let’s dive right into implementing the above screenshots. It’s always a good idea to start with the mobile layout and work your way up to the desktop version. Desktop layouts are typically more complex than their mobile counterparts, and this “mobile-first” approach maximizes the amount of CSS that you can reuse across your layouts.

First, we need to fill in responsive.html ’s <body> element with some empty boxes. Each box has an image in it so we can tell them apart a little bit easier.

And here’s our base styles, which should apply to all layouts (mobile, tablet, and desktop). Make sure to add these above the @media rules we created earlier and below the universal selector rule that resets our margins and padding:

If you make the browser window narrow, you'll see that this gives us our entire mobile layout. Pretty easy, huh? No media queries required. That’s why it’s called “mobile-first”—the mobile version doesn’t require any special handling. Also notice that flex-wrap property in the containing .page div. This will make it very easy to implement our tablet and desktop layouts.

Web page showing layout created with mobile-first CSS (no media queries)

By keeping these base styles outside of the media queries, we’re able to override and add on to them as we implement our specific layouts. This is really convenient when, for instance, your designer wants to tweak the color scheme for the entire website. Instead of tracking down redundant background-color declarations in several @media rules, you only have to update it here. That change automatically applies to the mobile, tablet, and desktop layouts.

  • Tablet Layout

On to the tablet layout. The only difference between the mobile and tablet mockups is that the Sign Up and Feature sections form a 2×2 grid instead of a single column.

Flexbox makes this real easy. Simply adjust the widths of the flex items to be half the screen and flex-wrap will take care of the rest. Of course, we only want this behavior to apply to tablet-sized screens, so it needs to go into an @media rule. Replace the existing /* Tablet Styles */ media query with the following:

To see these changes, make sure your browser window is between 400 pixels and 960 pixels wide, then scroll down to the bottom of the page. You should see a colorful grid:

Web page showing the grid created from tablet media query

Again, it doesn’t matter what the exact width of the screen is: this layout will fluidly respond to any width in the media query’s range. Our mobile layout is also fluid, so we now have a website that looks beautiful (if a bit empty) in every device smaller than 960px wide.

  • Desktop Layout

And that’s where our desktop layout comes in. We don’t want our web page to expand endlessly, so we’re going to give it a fixed width and center it with auto-margins . As with tablet styles, this needs to go into a media query. Replace the existing /* Desktop Styles */ media query with the following:

This gives us the correct widths for everything, and we have more real estate to play with, so we made the header a little taller, too. Almost there, but our desktop layout calls for some reordering: the Sign Up and Content boxes should appear underneath all the Feature sections.

Desktop layout of web page before and after flexbox re-ordering

This is where flexbox really shines. Trying to create this combination of mobile and desktop layouts would be very difficult with floats . With flexbox’s order property , it’s just a few lines of CSS. Append these rules to the desktop media query:

Ta da! A responsive website! Not bad for less than a hundred lines of CSS. More importantly, we didn’t have to alter a single line of HTML to accommodate our mobile, tablet, and desktop layouts.

This was just one example of laying out a responsive site. You can use these exact same techniques to implement all sorts of other designs. Start with the base styles that apply to your entire site, then tweak them for various device widths by selectively applying CSS rules with @media . You could even add another media query to, say, create a dedicated layout for ultra-widescreen monitors.

  • Disabling Viewport Zooming

We’ve got one final task for making a responsive web page. Before responsive design was a thing, mobile devices only had a desktop layout to work with. To cope with this, they zoomed out to fit the entire desktop layout into the width of the screen, letting the user interact with it by zooming in when necessary.

Diagram: zoom enabled (desktop layout rendered in a tablet device) versus zoom disabled (tablet layout rendered in a tablet device)

This default behavior will prevent mobile devices from using our mobile layout, which is obviously very terrible. To disable it, add the following element to the <head> of our document. Just like <meta charset='UTF-8'/> , this is a critical element that should be on every single web page you create:

To see this in action, we’ll need to simulate a mobile device in our desktop browser. This is a little advanced for where we’re at right now, but we can give it a shot. Open up responsive.html in Google Chrome, then hit View > Developer > Developer Tools in the menu bar. Then, to simulate a mobile device, click the Toggle Device Toolbar icon, highlighted below.

Screenshot: responsive icon in Chrome’s developer toolbar

You should see the zoom-disabled version of the above diagram in your browser, since it’s now pretending to be a mobile device. (We’ll save the in-depth discussion of Chrome dev tools for a future tutorial.)

Alternatively, if you’re reading this chapter on a smartphone, you can navigate to the live before and after versions of our example project to experience the effect of our viewport changes.

Believe it or not, that’s actually all you need to know to create responsive websites. If we boil it down, we’re really only concerned with three things:

  • The responsive design (the mockups for each layout)
  • CSS rules for implementing each of those layouts
  • Media queries for conditionally applying those CSS rules

We started this chapter by learning about the difference between fluid layouts and fixed-width layouts. Then, we went on to create a mobile-first stylesheet that used media queries to build tablet and desktop layouts on top of a shared set of base styles. Finally, we disabled the default viewport zoom behavior of mobile browsers.

So, that was the easy part of responsive design. In the next chapter, we’ll discover the hard part: images. Presenting different CSS to specific devices isn’t too bad, but optimizing images for those devices requires a bit more planning.

  • A Few Notes On Design

IMAGES

  1. How to Make Responsive Website using Html CSS & Javascript

    html tutorial responsive design

  2. How To Create Responsive Table In HTML & CSS || How To Make Responsive

    html tutorial responsive design

  3. Responsive CSS Grid Tutorial

    html tutorial responsive design

  4. Responsive Web Design with Figma: Full Walkthrough Tutorial

    html tutorial responsive design

  5. How To Make Responsive Website Using HTML & CSS Only

    html tutorial responsive design

  6. Build a Responsive Website Using HTML and CSS in 30 minutes

    html tutorial responsive design

VIDEO

  1. Responsive Website Design using Html CSS & JavaScript

  2. How To Create Responsive Image Gallery Using HTML & CSS

  3. Responsive Design with Html CSS Only

  4. Card Design in HTML CSS

  5. Design A Responsive Website Using HTML, CSS & JavaScript

  6. How to make a responsive website in HTML and CSS

COMMENTS

  1. HTML Responsive Web Design

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> Try it Yourself » This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

  2. Responsive Web Design Introduction

    Desktop Tablet Phone It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen. Don't worry if you don't understand the example below, we will break down the code, step-by-step, in the next chapters: Try it Yourself » Previous Next

  3. Responsive design

    Responsive web design, or RWD, is a design approach that addresses the range of devices and device sizes, enabling automatic adaption to the screen, whether the content is viewed on a tablet, phone, television, or watch. Responsive web design isn't a separate technology — it is an approach.

  4. Introduction To Responsive Web Design

    Introduction To Responsive Web Design - HTML & CSS Tutorial - YouTube 0:00 / 4:11:04 This tutorial teaches you to build responsive websites from scratch. It's a part of The...

  5. Learn Responsive Design

    17 activities 1 Welcome to Learn Responsive Design! keyboard_arrow_down subject Article 2 Introduction keyboard_arrow_down subject Article 3 Media queries keyboard_arrow_down subject Article 4 Internationalization keyboard_arrow_down subject Article 5 Macro layouts keyboard_arrow_down subject Article 6 Micro layouts keyboard_arrow_down

  6. Responsive Web Design

    Responsive Web Design In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design. First, you'll build a cat photo app to learn the basics of HTML and CSS.

  7. Responsive design tutorial

    Responsive design tutorial - Learn responsive web design in 5 minutes Per Harald Borgen In this article, I'll teach you as many responsive design techniques as I possibly can in five minutes. This obviously isn't enough to learn it properly, but it will give you an overview of the most important concepts, which I personally define as these:

  8. Learn CSS: Responsive Design

    Course Learn CSS: Responsive Design Create websites viewable on devices of all sizes using responsive design techniques, such as relative sizing units and media queries. 4.7 386 ratings 82,665 learners enrolled Skill level Intermediate Time to complete 2 hours Certificate of completion Included with paid plans Prerequisites 2 courses

  9. Responsive web design basics

    The use of mobile devices to surf the web continues to grow at an astronomical pace, and these devices are often constrained by display size and require a different approach to how content is laid out on the screen. Responsive web design, originally defined by Ethan Marcotte in A List Apart, responds to the needs of the users and the devices ...

  10. HTML Responsive Web Design (With Examples)

    Responsive web design is a web design approach to make web pages render well on all devices with different screen sizes and viewports. For example, This is how a website looks on a desktop. This is how the same website looks on mobile devices. Here, all the contents of the webpage render well on both desktop and mobile without any issues.

  11. Learn HTML

    Learn HTML - Responsive Web Design Study Guide Jessica Wilkins HTML (HyperText Markup Language) is an important markup language for building websites. HTML represents the content of the web page. But when you are learning this information for the first time, it can be hard to keep track of all of the different HTML elements.

  12. 19 really useful responsive web design tutorials

    Follow these design principles and practical solutions to get it right. 04. Design a responsive site with em-based sizing. Build your pages so the design doesn't break if the font size changes. By using em units for font sizing, you can design components on the page that respond automatically should the font size change.

  13. Responsive Web Design (With Examples)

    Responsive web design is an approach to web development aimed at creating websites that adapt and respond to different screen sizes and devices. In this tutorial, you will learn about responsive web design with the help of examples.

  14. The Beginner's Guide to Responsive Web Design in 2024

    Responsive design is an approach to web design that makes your web content adapt to the different screen and window sizes of a variety of devices. For example, your content might be separated into different columns on desktop screens, because they are wide enough to accommodate that design.

  15. HTML Responsive Web Design

    All popular CSS Frameworks offer responsive design. They are free, and easy to use. W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default. W3.CSS is smaller and faster than similar CSS frameworks. W3.CSS is designed to be independent of jQuery or any other JavaScript library.

  16. Responsive web design tutorial: step-by-step

    You must make all the websites you design responsive, and hopefully, this responsive web design tutorial step-by-step will help you make that happen. Faydra Deon. Faydra Deon's first computer was a Commodore 128, and she has been a web designer/developer since 1999. In addition to training others to create websites, Faydra has also taught ...

  17. What is Responsive Web Design?

    Responsive Web Design is about using HTML and CSS to automatically resize a website. Responsive Web Design is about making a website look good on all devices (desktops, tablets, and phones): Setting The Viewport When making responsive web pages, add the following <meta> element to all your web pages: Example

  18. Responsive Web Design

    Responsive web design is a skill that every web developer should master. In this lesson, you will learn how to create websites that adapt to different devices and screen sizes, using flexible layouts, media queries, and flexible media. You will also learn the benefits of using relative length units and the difference between responsive, adaptive, and mobile web design. Whether you want to ...

  19. HTML Responsive Web Design

    Approach 1: Using HTML Viewport meta tag for Responsive Web Design HTML Viewport represents the area of display or screen visible to the user. It varies from device to device. This approach set the available screen width as the 100% width of the web pages and adjusts content accordingly to make it responsive. Syntax:

  20. Responsive CSS Tutorial: Learn Responsive Web Design

    Learn Responsive Web Design bootcamp includes 15 hours of content - 173 lectures Tons of interactive challenges Certificate of completion with Kevin Powell Course level: Intermediate This course will take you to a professional level in responsive web design. You'll learn to build advanced layouts while solving fun coding challenges along the way.

  21. 10+ Best Responsive Web Design Tutorials

    These useful responsive web design tutorials will help you better understand this concept and design more complex websites. Full Screen Responsive/Animated Landing Page - HTML5 & CSS3 Tutorial. Learn how to make a full screen responsive animated landing page with this video tutorial. Making a full-screen landing page responsive can be really ...

  22. I Tried 10 Responsive Web Design Tools to See if They're Worth It (2024

    3. Figma. Image Source. If prototyping and collaboration are the name of the game, then Figma is for you. Used by web developers and product designers alike, Figma's vector networks and layout function provide real-time collaboration and easy sharing of designs for feedback and quick iterations.

  23. Introduction to Basic HTML & HTML5

    Introduction to Basic HTML & HTML5 HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content.

  24. Responsive Design Tutorial

    Nº 10. of HTML & CSS Is Hard. "Responsive design" refers to the idea that your website should display equally well in everything from widescreen monitors to mobile phones. It's an approach to web design and development that eliminates the distinction between the mobile-friendly version of your website and its desktop counterpart.

  25. How to Customize an HTML Template

    You'll be changing it to the file name and location of your own image. Grab an image of yourself that's 150px by 150px in size, (ignore that the filename there says 140×140.png, the size is actually 150×150). Drop your image into the "_content" subfolder; it's in the same folder as your "index.html" file.