What Is Responsive Web Design? Beginner’s Edition

Create fluid designs for all devices!

U.S. households have, on average, a total of 22 connected devices! Amazingly, each device may provide a similar viewing experience as other devices despite their different sizes and functionality.

This is all thanks to responsive design!

What is responsive web design? Time to dive into the three essential components of responsive web design!

Table of Contents

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

What is Responsive Web Design?

Stop! And consider this: what device are you reading this very article on? Is your device a Samsung phone, iPhone, smart television, desktop computer, or tablet?

How do the on-page elements appear? We’d venture to say that the elements look pretty good even on the smaller screen.

Many years ago, before smartphones and smart devices, designers built web pages only for desktops. Very few devices, if any, had the browsing capability that our mobile devices have today. However, if you were lucky to have a coveted BlackBerry (or any device that connected to the internet!), you’d probably be frustrated by websites with blown-out images and a wonky layout that may have appeared perfectly on a desktop site.

Thankfully, we have progressed since our BlackBerry days — and so has web design!

Now designers use a technique called responsive web design — a term coined by Ethan Marcotte — to create websites that automatically resize to fit all devices, especially mobile, with minimal panning or scrolling.

Responsive design aims to provide the same user experience no matter the device, whether it’s your tricked-out Tamagotchi, Nokia flip phone, or gaming laptop.

(Back to top.)

Responsive Design vs. Mobile-First Design

Tomayto tomahto, right? Not quite.

We’ll take a wild guess and assume you’re reading this blog on a mobile device like a phone.

No, we can’t see your screen, but we do know that mobile devices accounted for 54.4% of global website traffic in 2021. More people use their phones to search on the go or casually browse; therefore, there’s a need for a mobile-first design technique.

Mobile-first is a responsive design approach created by Google’s Product Director Luke Wroblewski where designers create an online experience for mobile screens before designing for larger screens (including desktop web pages). Admittedly, mobile-first is the exact opposite approach designers used in yesteryear as well as different from responsive web design, which is a design used to create desktop-first designs that adapt to all devices.

Mobile-first is an efficient design method because, generally, it’s easier to add detail than to subtract detail on smaller screen sizes. But just because it’s more efficient does not make it less complex.

“The World Wide Web has been built on a foundation of rather simple capabilities (page markup, styling, and scripting) determined by what Web browsers can support. Web application developers -desperate to add innovative capabilities to this environment- have pushed the limits of JavaScript, browser plug-ins, and even Web browsers themselves to enable rich activities and interactions online. – Luke Wroblewski, Mobile First

Let’s face it, while our phones may feel giant in our pockets, the average phone display is 6.3 inches; whereas, the average computer monitor display is 22 to 24 inches. Designers must consider the mobile user and their needs to prioritize the most vital information and optimize the mobile user experience. But as the device size increases, so does the design’s complexity and fidelity.

Smartphones and tablets introduce various unique capabilities that designers must consider beyond a desktop site’s design. Device orientation and positioning are all features that may impact how a designer optimizes a mobile page versus a desktop browser window.

 

đź’ˇGoogle’s Grand Plan. Mobile-first design is vital for user experience, but it is also important for digital marketing! In 2020, Google announced a shift from desktop-first to mobile-first indexing, where the Big Tech company would use a site’s mobile version to crawl, index, and rank a web page. This process is called mobile-first indexing. For SEO-conscious marketers and designers, a site’s mobile-friendliness should be a priority as it affects search engine visibility.

(Back to top.)

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Responsive Web Designing

Mobile-first and responsive web design is important – great! How does a budding designer create a responsive website?

“We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them,” states Ethan Marcotte.

Marcotte identifies fluid grids, flexible images, and media queries as the “three technical ingredients for responsive web design.” Master these ingredients, and you’ll be ready to create responsive websites.

(Back to top.)

Media Queries

W3C created media queries in CSS3, allowing designers to inspect a device’s physical characteristics and apply different CSS styles based on device size.

Querying media types on a website’s CSS stylesheet using @media makes it possible to design for different devices.

 


.main-content {
background: white;
}

.sidebar {
background: white;
}

@media only screen and (max-width: 768px) {
.sidebar { background: blue; }
}

Max-width notates the breakpoint, or the point at which your site’s content will respond to a device size to provide the user with the best layout to consume the information.

For a responsive design, each screen size would have a different line of CSS rules that instruct images, text, navigation, layout and other media features how to adjust their size and orientation based on the device.

đź“Ś Related: What Is Advanced CSS And What Do You Need To Learn?

(Back to top.)

Fluid Grids

Image of ESPN.com home page with game scores on left side of screen, news stories in middle column, and headlines on right sideESPN.com has several media elements that are rearranged depending on the viewport.

Look at any web page and you may notice a pattern. Media elements are blocked together as if you could pick them up and move a complete media element in a layout.

You’ve discovered another aspect of responsive design: fluid grids.

Grids are a common design tool, used for centuries, across all design professions, from print to the web. Grids are guides to help align elements and provide structure. Thus, a fluid grid, as opposed to a fixed grid, is a framework for a web page that rearranges automatically depending on the device.

ESPN.com homepage displaying a Sun's basketball feature storyESPN.com feature stories rearrange based upon the viewport size.

A fluid grid, also known as a flexible grid, utilizes responsive boxes that shrink, scale, and flex between a page’s breakpoint.

How is this possible?

A fixed grid uses pixels to tell a block element grid how to appear on a page — no matter the screen size, and 35 pixels looks a lot different on smaller screens versus a desktop version. Fluid grids used percentages to shift boxes across different sizes.

 

đź’ˇGrid-topia! Grids are used everywhere! Interior designers use grids to balance home designs. Newspaper designers use grids to create a hierarchy amongst stories. Artists use grids to create art with symmetry or subvert rules. Designers use layout grids to map designs with proportion, rhythm, white space, and hierarchy.

(Back to top.)

Flexible Media

Have you ever uploaded an image to Instagram or Twitter only to have your treasured memory warped into a grainy, stretched mess? This is the premise of flexible media.

Flexible media (or responsive images and videos), a concept achieved and perfected by designer Richard Rutter, is media large enough to appear on the biggest of screens and is coded to scale proportionately on smaller devices, preventing extreme cropping and weird stretching, and maintaining its resolution and proportion across different devices.

(Back to top.)

Responsive Site Testing

As with all designs, it’s good practice to test your mobile-first or responsive designs before publishing the live page.

Sure, you can use your favorite web design tool, like Figma or Sketch, to view the mockup of a web application, but there are other tools that will let you stretch the design to its limits and determine if a design is really responsive.

Split screen with ESPN.com on left side and Chrome DevTool on right sideChrome DevTool is available available on the Chrome browser.

Chrome DevTools simulates mobile devices and allows you to adjust the viewport size. Anyone can access Chrome DevTools with a right click and choosing “Inspect” on the pop-up menu. Likewise, Xcode iOS simulator test runs designs in different Apple devices, including tvOS and watchOS.

Simulators are great and serve a purpose during the design process, but before final launch, you should test on real devices (don’t throw out your old iPhone just yet!) and across different browsers. Quality tests on different screen sizes let you determine how each device’s display may impact your design.

 

đź’ˇBrowsing Browsers. Don’t stop at Google Chrome and Apple Safari! There are several internet browsers, including Mozilla Firefox, Opera, Kingpin, Tor, and Iridium, that you should test on to determine your design’s compatibility. Why? Different browsers support different features. For example, Apple Safari 14 and Mozilla Firefox removed support for Adobe Flash in 2020, while Google Chrome continued to support the application through 2021. Cross-compatibility browser tests catch small differences before designs are published.

Responsive design is a fairly recent design advancement that coincides with a mobile-first approach. It’s one of the many steps forward from desktop-only design, but it’s only the beginning. As wearable technology, virtual reality, augmented reality and more, popularize (like smart devices once did!), the need for responsive, mobile, and adaptive design will become more apparent.

Ready to dive into a career in web design? Learn all the tools of the trade with Skillcrush, the coding and design school with a ❤️. Our Break Into Tech Design track will teach you to create responsive web design that look good on all devices, from smartwatches to laptop computers. AND coach you to your first job in tech with one-on-one career counseling. All the while, our network of Skillcrushing students and instructors will cheer you on.

Your career in tech is waiting! Join Skillcrush today!

(Back to top.)

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Author Image

Desiree Cunningham

Desiree Cunningham is an impassioned writer and editor and the Senior Content Marketing Manager at Skillcrush. She has a BA in Journalism and Mass Communications and a MA in English, both from Arizona State University. When she's not working with words, you can find her caring for her house plants, reading, or practicing Pilates.