What Is Responsive Web Design? And How to Get Started
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.](https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://images.ctfassets.net/wp1lcwdav1p1/5lai1xeGFtJ2gA6fuYip1S/72663c00791b3b87246c03b4d88e3936/GettyImages-1132115579__1_.jpg?w=1500&h=680&q=60&fit=fill&f=faces&fm=jpg&fl=progressive&auto=format%2Ccompress&dpr=1&w=1000&h=)
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.
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
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 design | Adaptive 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 styles | Uses 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 time | Works 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].
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.
| Software | Cost | Features | RWD capabilities | Code customization |
|---|---|---|---|---|
| Wix | Starts free | Library of customizable templates, e-commerce, blogging, drag-and-drop editor, AI web builder | Features like slideshows, galleries, apps, and horizontal menus adapt to different screens | Yes |
| Squarespace | Starts at $16/ month, with an annual plan | Library of customizable templates, e-commerce, memberships and subscriptions for customers, blogging | Resizes content and images to fit different devices and screens | Yes |
| Wordpress | Starts at $4/month | Library of professionally designed themes, library of plugins and app integrations, e-commerce, blogging, block editor | Themes automatically adapt to different screens and can be previewed in the block editor | Yes |
| Webflow | Starts free | Library of templates, on-page website editor, built-in social media and SEO tools, fast page loads | Responsive images, grid layouts, columns, and collection lists | Yes |
| Weebly | Starts free | Drag-and-drop editor, e-commerce, inventory management, fast checkout experience, tax calculator | Responsive themes adapt to different devices | Yes |
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:
Graphic design software, for creating graphics and editing images
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 Chrome’s responsive website design tester, a browser plugin for testing how your site performs
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:
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.
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
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
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
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
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.
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.
- 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.
Coursera Footer
