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
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
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.
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.
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
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.
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?
Fluid Grids
ESPN.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 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.
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.
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.
Chrome 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.
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!
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
