Learning Responsive Web Design

Have you ever tried to buy a product on your smartphone only to find that the text is too hard to read or the page cuts off? Maybe you have tried to show a friend something interesting on your tablet, only to be frustrated when the page doesn't lay out as nicely as it did on your laptop? Responsive web design is about using HTML and CSS to allow users to view the same web page on multiple devices with ease.
Web designers code the page to be "responsive"—adapting, resizing, enlarging, hiding, moving or shrinking content to make it look good on any screen. Whether you make your browser smaller on your laptop or bring up a website on your smartphone, a smart, responsive design will rearrange itself to meet your needs.

A crash course in responsive design history

If you’re just getting into web design, know that responsive has rapidly entered into the realm of accepted web design practices. While a portion of the internet has yet to catch on to this standard, all good websites, ranging from e-commerce sites to personal blogs, are revitalizing their layouts with this discipline. The approach is not a single piece of technology, but rather a collection of ideas, methods, and techniques that address the problems of browser adaptability and space online.

Web designer Ethan Marcotte first created and coined the term "responsive web design." In Marcotte's first influential article about responsive, he wrote that  “rather than tailoring disconnected designs to each of an ever-increasing number of web devices," designers should approach each design as small pieces of the same user experience. He advocated designers "embed standards-based technologies" to all of their code to make their web pages adaptive and flexible to different types of devices. Thus, the practice of responsive web design was born.

Responsive is not adaptive or mobile design

While responsive design centers around users viewing the same quality web page on multiple devices, it is not synonymous with mobile or adaptive design practices.  It has a lot to do with mobile, but responsive is more than just being able to load websites on smartphones.

Meanwhile, adaptive design might deal with designing for different devices, but it is mainly concerned with defining how designs break down by device and targeting individual devices using media queries in CSS. For example, an adaptive designer may focus on screen resolution capabilities for Apple devices, while responsive designers deal with how one webpage loads, changes shape and more, no matter what device it runs on. Some of the basic principles any responsive design must adhere to include:

• Responsive navigation: This can be a challenging aspect of your total design. Not all websites will require this specific technique, but there are a variety of choices to choose from. Certain examples include footer navigation, menu overlay, menu toggle and the flip method.
• Build on a fluid grid: Instead of basing your design on pixels, a fluid grid, or "liquid layout," deals with percentages. For example, you may have a page at a 50 percent width. No matter how large or small the device's browser may be, the page will scale to meet this set percentage.
• Responsive images & videos: Like the previous requirement, all images and videos will scale based on the preset percentage or resolution of the screen they are being viewed on.
• Non-essential content is removed: When moving to a smaller screen, this standard makes sure that all essential content is kept and only clutter or unimportant elements disappear. For example, when going from a laptop browser to a smartphone, you would keep necessary navigation bars, images and content, but maybe the design would consolidate certain features or remove added design features.

A few useful tutorials for learning responsive web design

If you have never worked with responsive design before, there are plenty of free or low-cost resources available to keep you up to speed. To start, take web design courses to learn the skills you need to enter into a full-time career in the field. To take a start delving into responsive design, here are four helpful responsive design tutorials to get you excited to learn more:

1. UI Design Guidelines for Responsive Design: This Codedrops page is perfect for any UI designer who wants to make their website multi-device friendly. It will cover the basics of tablet and desktop responsive design, along with key points to consider with each.
2. Adventures in Responsive Navigation: If you are a designer who would rather be shown than told what to do, this is the ideal tutorial for you. The creator, Erick Arbe, provides plenty of examples of key navigation patterns in responsive design.
3. A Crash Course in Technical Responsive Web Design: This helpful tutorial from Treehouse covers everything from key fundamental terminology to best practices from experts. Another older tutorial from Treehouse, Beginner's Guide to Responsive Web Design, is also helpful if you want to learn more of the background behind the creation of responsive design and why it's so important for web designers.
4. Responsive Web Design Basics: Google's Pete LePage offers this free course about the fundamentals of responsive web design. LePage will cover everything from how to set the viewport to how to use CSS media queries for responsiveness. During the course of this tutorial, you will create your own responsive page. Learning responsive design doesn't have to be overwhelming.

Keep these tips in mind, seek out free resources and consider taking user experience design courses to get started in learning responsive design today.