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.
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 ecommerce 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.
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 breakdown 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:
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:
Keep these tips in mind, seek out free resources and consider taking user experience design courses to get started in learning responsive design today.
Apply now at StartupInstitute.com/Apply using the promo-code “SWITCH” and receive $500 off enrollment to our full-time courses started on June 19th.