Before we had smartphones, tablets, and the rest of the mobile gadgets, websites were presented only on desktop screens. Most monitors were one size. Webpages were designed with a fixed width, meaning endless scrolling and zooming.
Ethan Marcotte and A List Apart
And then everything changed. In 2010, Ethan Marcotte wrote an article titled simply “Responsive Web Design,” on A List Apart.
“But the landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.” – Ethan Marcotte, Responsive Web Design, A List Apart
While responsive design was inevitable, Marcotte was certainly the initiator of a massive movement. Prior to his article, we already had CSS3 media queries. There was talk of adaptable browser viewports and multiple ideas on making sites that were flexible, fluid, liquid, etc.
So, What Exactly is Responsive Web Design?
Google defines it as such:
“Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images). Responsive design serves all devices with the same code that adjusts for screen size.”
Fixed vs. Fluid vs. Adaptive vs. Responsive
Fixed
Fixed, aka static, has a fixed width in pixels. The container of the contents is designed not to move, and the width stays the same regardless of the screen size or resolution. This is how early webpages were designed, as there was only one device to view on.
Fluid
While fixed layouts use pixels, fluid uses percentages. The container and the content within it are assigned percentages for width, meaning if the screen size changes, the proportion of the elements will stay the same.
Adaptive
With adaptive layouts, you have several versions of the layout which are displayed based on the screen size of the viewer.
Responsive
Responsive takes the best of both fluid and adaptive layouts. With breakpoints, the webpage is divided at all possible screen sizes in range. It’s like a custom experience for whatever screen size it’s being viewed on.
The Core Concepts of Responsive Web Design
“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.” – Ethan Marcotte, Responsive Web Design, A List Apart
Fluidity and Flexibility
When it comes to responsiveness, fluidity, and flexibility is the number one concept to follow. With fluid grids and flexible widths, images, and text, your website can become responsive and a lot more user-friendly.
Grid-based layouts are superior to fixed grids when it comes to responsive design. Fluid grids flow naturally within the dimensions of its parent container. All page elements are sized by proportion rather than pixels. Setting a flexible width – i.e., max- and min-width – will allow contents to ebb and flow effortlessly within the container. You can also set flexible widths to images and text.
When it comes to setting parameters for flexible width, there are several CSS measurement units. The most commonly used ones are:
- Px – Pixels – Absolute values that are relative to the viewing device
- Em – Emeters – Relative to the font-size of the element
- Rem – Root Emeters – Relative to the font-size of the root element
- Vw/vh – Relative to 1% of the width or height of the viewport
- % – Relative to the parent element
Each unit can be used differently, so the application of each is dependent upon your usage. There is a great, in-depth guide posted here about each unit versus the other.
Media Queries
A media query is a CSS technique that uses the @media rule to include a block of properties only if a certain condition is true. An example of this would look like:
With media queries, you can change the width and height of the viewport and/or the device, as well as the orientation and resolution. They allow you to apply styles to only those screens that are greater or smaller than a certain width. It’s like delivering a tailored style sheet to each and every device.
Mobile-First
Mobile phones could access the internet in the early 1990s but could only display basic textual data. It wasn’t until the mid-2000s when smartphones could display what we now consider to be real webpages. The problem was that websites weren’t designed for these displays, and users had to pinch and zoom to view information, on top of very slow load times.
Mobile-first is the concept of designing for mobile before designing for desktop or any other device. This makes the page load and display faster on smaller devices.
Other tips for designing and optimizing for mobile include:
- Don’t use Flash
- Do use drop-down menus
- Don’t use too-small fonts
- Do make sure your site is tap friendly
Google has a nifty tool that allows you to test if your web page is mobile-friendly.
What the Future Holds
As it is always changing, technology will have a massive effect on the future of responsive design:
- The Internet of Things (IoT): From tech-intelligent cars to smart refrigerators to wearables, the platform on which a site is displayed will need to be catered to.
- Foldable Screens, Stretchable Surfaces, and Dual Displays: Samsung has recently announced their tablet with a foldable screen. Other vendors have discussed stretchable, bendable, and rollable screens. Some phone manufacturers have been designing smartphones with dual displays, ie. a screen in its usual place AND on the back.
- The Ever-Evolving iPhone Notch: If you’re the owner of a newer iPhone, you’ve likely experienced what they call the “notch.” The notch is really just an invasive cut-out that designers have to design around. Apparently, Apple is prototyping an iPhone with less of a notch in the future.
- The Increasing Number of Touch Screens: It’s no wonder that everyone and everything is adopting the touch screen. Remember when we had actual keyboards on our phones with T9 and a trackball? Laptops, smart refrigerators, car radios – everything uses a touch screen these days. This just means more to design for.
And as it is always has been and always will be with web design, we will forever be designing and re-designing. Especially for responsive and mobile.
- What do you think the future of responsive web design holds?
- Where do you think web design would be today if it weren’t for responsive design?
- Why do you think responsive is important for business?
