Written by Coursera Staff • Updated on
Responsive web design explained, including tools, software, and tips for getting started.
What is responsive web design?
Responsive web design (RWD) refers to designing websites to adapt to a user's device. The goal is for a website to retain its optimal usability and appearance regardless of the device it's displayed on. Responsive web design responds to user needs by adapting to different screen sizes, orientations, layouts, and platforms. This is accomplished with the use of flexible grids and layouts, responsive images, and CSS media queries.
The origins of RWD
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].
What is the purpose of responsive web design?
Responsive web design benefits users, web designers and developers, and businesses. For example, it allows web developers and designers to build a site once for a range of devices rather than building a different version to suit each one. RWD makes it possible to build one adaptive website rather than needing to create a mobile version alongside the one that's optimized for desktop browsers.
The mobile-friendliness of responsive web design also creates a better user experience for the many people who do their internet browsing, shopping, and banking on their phones. According to data from Zippia released in 2023, 82% of shoppers in the US are using their smartphones to make purchases, particularly for entertainment and food [1]. Responsive web design can also boost your site’s SEO performance. Search engines like Google favor user-friendly sites that engage visitors with quick load times, responsive layouts, and otherwise seamless user experience (UX).
Read more: UX vs. UI Design: What's the Difference?
Responsive vs. adaptive design
As you research responsive web design, you're likely to come across the term adaptive web design as well. You can use the table below to compare these similar terms.
| 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 |
How does responsive web design work?
This next section explores some programming languages, markup languages, web technologies, and mechanisms that make RWD possible.
Elements of responsive web design
Media queries that alter web designs based on a user’s device
Flexible images are sometimes called adaptive images because they have no fixed display size limitations. This versatility makes it easier to resize images neatly.
Fluid grids/fluid layouts that automatically rearrange columns of content to fit different screens or browser windows
Code for flexible layouts that resize page elements to fit different screens or browser windows
HTML (hypertext markup language) is a programming language that determines the content and structure of a webpage,
CSS (cascading style sheets) is a programming language that determines the design and display of HTML elements.
Read more: How to Become a Web Designer
Examples of 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'll compare programs you can use to create a responsive website without writing any code. You can use this table to compare the cost and features of various software with built-in RWD capabilities.
| 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 |
Other tools for responsive web design and development
Additional tools to monitor and improve your website’s performance are often necessary. Here are a few resources to get you started:
Graphic design software is useful for creating graphics and editing images.
Stock photos can help capture your brand’s look and feel with visual elements.
FitVids plugin can be used to embed videos with fluid width.
FitText plugin can be used to make flexible font sizes.
Wireframing software helps plan the layout of your responsive site
Google Chrome’s responsive website design tester plugin can be used for testing site performance.
Google’s mobile-friendly test tool can be used to test how easily a site visitor can use a site on a mobile device.
How to get started in responsive web design
The sections below can help you get started whether you aim to learn responsive web design and build sites from scratch, start a career in responsive web design, retain responsive web design services, or use website builders with automated RWD.
Define your RWD goals
Checking in with your goals can help you focus your attention and efforts on the most important tasks for reaching those goals. What would you like to accomplish and why?
If you want to start a career in responsive web design and work to improve website performance and user experience...
Responsive web design is a specialization within the field of web design. Web design falls into the category of front-end development. If you want to become a responsive web designer, you must build your web design and development expertise and enhance your resume. Here are a few career path recommendations for getting started:
You can learn essential skills from an industry leader in technology with online courses. For example, you can build your own mobile app, responsive website, and cross-platform experience while earning a Google Career Certificate for your resume with the online course below:
67 percent of web designers have a bachelor's degree, 18 percent have an associate degree, and 7 percent have a master's degree [3]. If you want to take this career path, consider studying graphic design or computer science.
Read more: What Does a Web Designer Do (and How Do I Become One)?
If you want to create a responsive website for your business with an easy-to-use software program...
If you want to create a website without learning how to code or retaining responsive web design services, review the comparison chart in the above section titled "Responsive Web Design Software." These types of tools are typically beginner-friendly and can be utilized by those with little to no technical background. Be sure to research and try a few responsive web design software programs before choosing one. Knowing your options and basic software functionality can help you choose the software that best suits your needs.
If you want to find professionals offering responsive web design services to bring your vision to life...
The type of responsive web design services you'll need varies based on the scope of your project. You may hire a freelance web designer specializing in RWD, or retain the help of an agency. Typically, a responsive web design company or agency will offer services ranging from design and development to marketing expertise and strategic recommendations. Be sure to research company reviews and examine their previous work before choosing one.
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.
Learn responsive web design with Google
Want to build essential responsive design skills with an industry leader in technology? Consider enrolling in Google's online course to earn a UX Design Professional Certificate:
Updated on
Written by:
C
Coursera Staff
Editorial Team
Coursera’s editorial team is comprised of highly experienced professional editors, writers, and fact...
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.
