What Is Responsive Web Design? And How to Get Started

Written by Coursera • Updated on

Discover the benefits of responsive web design, the methods and tools you can use to design a responsive site, and steps for getting started.

[Featured image] A web designer works on a responsive web design for a client. They are wearing a white sweater and working in an open, industrial office space.

Responsive web design (RWD) refers to designing websites to function optimally on any device, respond to a user's needs, and adapt to different screen sizes, platforms, and orientations. 

Responsive web design is unique in three main ways: 

  • Media queries that alter web designs based on a user’s device. 

  • Fluid grids that automatically rearrange columns of content to fit different screens or browser windows. 

  • Code for flexible visuals that resize images and other media to fit different screens or browser windows.  

Why is responsive web design important? 

The importance of responsive web design lies in how it benefits users, web designers and developers, and businesses. One benefit of responsive web design is that you can build your site once for every device rather than having to build a different version for each device.  

Responsive websites are mobile friendly, creating a better user experience for the large number of people who do most of their internet browsing, shopping, and other online activities on their phones. Zippia reports that in 2021, 79 percent of people with smartphones used their phones to make a purchase [1].  

Responsive web design can also boost your site’s SEO performance. Search engines like Google favor sites that are user-friendly on any device, engage site visitors with responsive layouts and great user experience,  and load quickly, all of which RWD can achieve.  

Placeholder

professional certificate

Google UX Design

This is your path to a career in UX design. In this program, you’ll learn in-demand skills that will have you job-ready in less than 6 months. No degree or experience required.

4.8

(56,732 ratings)

707,323 already enrolled

BEGINNER level

Average time: 6 month(s)

Learn at your own pace

Skills you'll build:

User Experience (UX), UX Research, Wireframe, Prototype, User Experience Design (UXD), Usability Testing, mockup, Figma, Adobe XD, UX design jobs

Responsive vs. adaptive web design

In your research into responsive web design, you may come across the term adaptive design. Compare these similar terms in the table below.

Responsive web designAdaptive web design
Dynamically changes a site’s page layout based on a device’s display type, width, height, etc.Detects the screen size and loads the appropriate layout for it
Uses CSS media queries to change stylesUses static layouts based on breakpoints that don’t respond once they’re loaded
A designer creates one flexible layout that changes according to device.Requires creating a different layout for every device, for example, separate web and mobile versions
Works best for larger sites that are being designed for the first timeWorks best for smaller sites that need to be redesigned or refreshed

Did you know?

Responsive web design emerged as a concept and approach to building websites in 2010 with web designer Ethan Marcotte's article “Responsive Web Design," which appeared in A List Apart [2]. 

Placeholder

How responsive web design works 

Now that you are familiar with responsive web design’s definition, let’s explore a few of the mechanisms that make RWD possible. These can be helpful to know whether your goal is to learn responsive web design and build sites from scratch, hire an RWD professional, or use website builders with automated RWD.  

  • HTML (hypertext markup language): a programming language that determines the content and structure of a webpage  

  • CSS (cascading style sheets): a programming language that determines the design and display of HTML elements 

  • Media queries: enable content to adapt to different screen sizes and resolution 

  • Fluid layouts: measure blocks of text, images, and other page elements with proportional values rather than fixed values 

  • Responsive images: change width or height depending on the devices on which they appear

Responsive web design software

There are several RWD software programs available for programmers and developers with a technical background, including Adobe Dreamweaver and Bootstrap.

In the table below, we explore software programs with built-in RWD capabilities. You can use these programs to create a responsive website that functions on a range of devices, without writing any code.  

Use this table to compare the cost, features, and RWD capabilities, and choose the program that best suits your needs. Be sure to review support documentation for any software program to get the most out of its features. 

SoftwareCostFeaturesRWD capabilitiesCode customization
WixStarts freeLibrary of customizable templates, e-commerce, blogging, drag-and-drop editor, AI web builderFeatures like slideshows, galleries, apps, and horizontal menus adapt to different screensYes
Squarespace Starts at $16/ month, with an annual planLibrary of customizable templates, e-commerce, memberships and subscriptions for customers, bloggingResizes content and images to fit different devices and screensYes
WordpressStarts at $4/monthLibrary of professionally designed themes, library of plugins and app integrations, e-commerce, blogging, block editorThemes automatically adapt to different screens and can be previewed in the block editorYes
WebflowStarts freeLibrary of templates, on-page website editor, built-in social media and SEO tools, fast page loadsResponsive images, grid layouts, columns, and collection listsYes
WeeblyStarts freeDrag-and-drop editor, e-commerce, inventory management, fast checkout experience, tax calculatorResponsive themes adapt to different devicesYes

Responsive web design tools

As you venture further into RWD, you may find that you need additional tools to complete tasks and improve your website’s performance. Check out the tools below: 

  • Stock photos, for capturing your brand’s look and feel 

  • FitVids, a plugin for embedding videos with fluid width

  • FitText, a plugin for making font sizes flexible 

  • Wireframing software, for planning the layout of your responsive site 

  • Google’s mobile-friendly test, a tool for testing how easily a site visitor can use a site on a mobile device

How to get started in responsive web design 

There are several paths you might take to enter the responsive web design arena. These include finding employment in web design or front-end development, freelancing as a web designer or front-end developer, and even creating a responsive site for your own business or passion. 

By taking any of these paths, you can explore your creativity and interest in technology, while offering value to the users who visit the sites you create. Follow the steps below to begin your journey. 

1. Check in with your RWD goals. 

As a first step, checking in with your goals can help you focus attention and efforts on the most important tasks for reaching those goals. What do you want to accomplish and why? Here are some examples you can draw from: 

  • Find your dream job in responsive web design and help top companies to improve website performance and user experience. 

  • Create a responsive website for your own business, with an easy-to-use software program, so that you can reach customers in a cost-effective manner. 

  • Find professionals offering responsive web design services, so that you can focus on the tasks you most enjoy. 

Read more: What Does a Web Designer Do (and How Do I Become One)?

2. Take a course related to your RWD goals.

Taking courses can be a great way to learn skills, explore career paths, and reach your goals. Look for courses that introduce you to different RWD methods and principles, and guide you through the process of completing hands-on projects. 

As you progress through course content, be sure to research and try out different responsive web design software programs, from ones that have built-in RWD capabilities to ones that allow you to code and customize a site. Knowing your options as well as basic software functionality can translate to choosing the best software for you. 

Watch this video on designing an app or responsive website for social good, part of the Google UX Design Professional Certificate program on Coursera: 

video-placeholder
Loading...
Decide how you want to organize content within each page of your website.

3. Review responsive web design examples. 

It’s also a good idea to search the internet for examples of responsive websites you like. Try to find sites that are intended for different types of users and that have different capabilities, such as sites selling digital products or sites that display artwork. That way, you can draw inspiration from the range of possibilities at your fingertips. 

4. Build your responsive website.

One of the best ways to apply your new skills and knowledge in RWD is to build a responsive website. Depending on your goals, you can build a site on your own, work alongside a course instructor or people you’re collaborating with, or hire a RWD professional to help you bring your vision to life. 

Factors to consider include: the kind of users you want to reach, the site’s look and feel, the experience you want users to have, and the tools you’ll need to build and launch your site. 

Read more: 7 UX Designer Portfolio Examples: A Beginners Guide

5. Plan a future in RWD.

Equipped with everything you’ve learned from steps one through four, you’ll next want to reflect on what you want your future in responsive design to look like. Check in with your original goals and note what has changed and what stays the same. Then, identify your action steps for the next few months, year, and beyond. 

For example, you could continue your journey by taking more courses, applying for jobs related to responsive web design, or building a portfolio of websites you build from scratch. 

Learn UX design and front-end development with Coursera

Build skills like designing sites with users in mind, wireframing and prototyping, using programming languages, and more through Coursera’s professional certificate programs, offered by industry leaders Google and Meta. 

Placeholder

professional certificate

Google UX Design

This is your path to a career in UX design. In this program, you’ll learn in-demand skills that will have you job-ready in less than 6 months. No degree or experience required.

4.8

(56,732 ratings)

707,323 already enrolled

BEGINNER level

Average time: 6 month(s)

Learn at your own pace

Skills you'll build:

User Experience (UX), UX Research, Wireframe, Prototype, User Experience Design (UXD), Usability Testing, mockup, Figma, Adobe XD, UX design jobs

Placeholder

professional certificate

Meta Front-End Developer

Launch your career as a front-end developer. Build job-ready skills for an in-demand career and earn a credential from Meta. No degree or prior experience required to get started.

4.7

(5,355 ratings)

90,494 already enrolled

BEGINNER level

Average time: 7 month(s)

Learn at your own pace

Skills you'll build:

Cascading Style Sheets (CSS), HTML, UI/UX design, React, JavaScript, Web Development Tools, User Interface, Front-End Web Development, HTML and CSS, Responsive Web Design, Test-Driven Development, Object-Oriented Programming (OOP), Linux, Web Development, Bash (Unix Shell), Github, Version Control, Debugging, React (Web Framework), Web Application, Application development, Unit Testing, Web Design, User Experience (UX), Accessibility, Pseudocode, Algorithms, Communication, Data Structure, Computer Science

Article sources

1

Zippia. “20 Vital Smartphone Usage Statistics [2022]: Facts, Data, and Trends on Mobile Use in the US, https://www.zippia.com/advice/smartphone-usage-statistics/.” Accessed December 14, 2022. 

Written by Coursera • Updated on

This content has been made available for informational purposes only. Learners are advised to conduct additional research to ensure that courses and other credentials pursued meet their personal, professional, and financial goals.

Big savings for your big goals! Save $200 on Coursera Plus.

  • For a limited time, save like never before on a new Coursera Plus annual subscription (original price: $399 | after discount: $199 for one year).
  • Get unlimited access to 7,000+ courses from world-class universities and companies—for less than $20/month!
  • Gain the skills you need to succeed, anytime you need them—whether you’re starting your first job, switching to a new career, or advancing in your current role.