Responsive Web Design Is More Than Just Media Queries for Mobile Devices
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
When you ask website owners if their websites use responsive web design (RWD), they'll either emphatically claim that they do, or say they don't know. But often web designers think that a website isn't responsive unless it uses CSS media queries to define different styles for devices of varying widths. I've been hired to "make a site responsive" because it didn't have media queries, even though it worked just fine on mobile devices, and the design used a flexible layout to adjust to the screen size.
Responsive web design is more than just media queries. It's possible to create a responsive website that doesn't use media queries at all. It's also possible to create a website that uses media queries but isn't responsive, or that responds poorly to the devices the queries detect.
Let's examine what it means to create a truly responsive web design. Along the way, I'll provide practical tips for making your images, videos, and forms more mobile-friendly and responsive.
Responsive Design Responds to More Than Just Mobile Devices
One mistake designers often make is equating RWD with mobile design. A website that looks good on a smartphone or tablet isn't necessarily responsive. Even if a site is responsive, that doesn't guarantee that it will work effectively on a smartphone or tablet. Responsive web design is exactly what it sounds like: web design that responds to the device viewing it. The reason most designers focus on mobile when they're thinking about making a site responsive is that mobile is an easy place to start.
More than just mobile devices view web pages these days. Refrigerators have web browsers, coffeemakers have web applications, robots view web pages—smart designers build websites with all those use cases in mind, and make them open enough to allow for use cases that don't yet exist.
In addition to thinking about devices, you should consider the people who view your website. A responsive site should be usable by people with limited vision or hearing, and visitors who can't type or tap well. Such adaptivity is typically bundled up in accessibility, but it's also a part of being responsive.
What Do Your Customers Need?
When working on building a responsive website, ask yourself, "What do our website customers need?" Your marketing team has probably addressed the obvious answers; those aren't your focus. Instead, you need to think about what your customers need in order to view and use your website:
- Mobile customers might need an interactive map so they can find your storefront. Desktop users might find the map interesting, but they probably don't need turn-by-turn directions because their desktop doesn't move.
- Desktop customers might need larger images that show up crisply on their large 4K monitors. Mobile customers might be annoyed by those large images, which can take a long time to download and waste precious data minutes.
- Customers using other apps to view your site might need a structured format to import your site data into their apps. For example, a cooking app might use recipe microformats like hRecipe to import your recipes into the app.
- Smartphone customers might need a telephone number with click-to-dial enabled so they can call your store.
The needs of your customers are specific to your business and different for every site. When you're cataloging customer needs, try to put yourself in the customer's situation. Consider physical realities: Phones have small screens. Some people are colorblind. Many office computers don't have speakers. A responsive site recognizes those realities and accommodates them.
Accessibility and Usability Are Forms of RWD
An accessible site responds to the needs of people with different abilities. Usable designs are inherently responsive. Both techniques are good, and they don't have to slow down your site production or change your final design.
Think of accessibility as one more way to make your website responsive to all your customers. By being responsive to every situation, your site can cater to everyone.
Minimalist Responsive Web Design
One important idea in RWD is minimalism. Do as much as your design requires, and no more. Many designers focus on creating a website with a specific number of breakpoints. They believe that in order to be responsive, a site must have one, two, or more breakpoints. But that's a mistake. As I've said, a site can be responsive without using media queries. And without media queries, there are no breakpoints.
Instead of counting breakpoints, really look at your design. Start out by designing for small screens. By applying mobile-first design, you can create a website that looks great and works well on small screens; then you can adjust that design to fit larger screens.
Once you have the design looking good and working perfectly on a small device, start opening it up in larger and larger devices. Your design might look fine on a feature phone, smartphone, and small tablet with no adjustments at all. Depending on how you build the page, your design might continue to work on larger tablets and small laptop screens. It's even possible to create one design that works well all the way up to 4K and 5K screens with the browser maximized—without any breakpoints at all.
But chances are that at some point the design will fail. Perhaps the text is too wide to read, or the images don't flow correctly. At that size, you can choose to make a CSS breakpoint with media queries, or you can continue fiddling with the CSS using settings like max-width properties to define maximum or minimum sizes of your elements.
The key is to keep the design as simple as possible. The simpler your designs, the easier they are to maintain, and the faster they'll load for your customers.
Specific Responsive Web Design Techniques
You can do more with your HTML and CSS to create responsive websites. Let's look at these specific areas:
- Images
- Videos
- Forms
- Metadata
Making Images More Responsive
Many people will tell you that in order to make images or videos responsive, you should make the width or height a percentage of the container and then set a maximum width. For example, this CSS creates responsive images:
img {
width: 100%;
max-width: 3900px;
height: auto;
}
This design adds images that flex with the size of the container. All images will fill the container width (width: 100%;), be no larger than 3900 pixels wide (max-width: 3900px;), and stay proportional to the original image size (height: auto;). However, in order to display correctly at the maximum width, this image must be at least 3900 pixels wide, so it's a big file—probably at least 1–2 megabytes in size, if not more.
As a web designer focused on responsive web design, you know that 1–2 megabytes is huge for a web page image. The problem is not just download time, but transfer time. If your site has hundreds of 2MB images, you could run through a customer's data plan in just a couple of visits. (Assuming that the customer was willing to stick around waiting for those images to show up.)
If you want to make your images really responsive and mobile-friendly, you should serve different images depending on the device detected. Many methods are available, but my favorite is Adaptive Images. Adaptive Images works with PHP and .htaccess to provide scaled-down images, depending on the resolution of the device that's viewing the page.
What I like best about this solution is its simplicity. You don't need to adjust your HTML or create new images. Instead, you add one line to your .htaccess file and one line of JavaScript to the <head> of your HTML, and you adjust the $resolutions to fit what you want to support. The script then detects the device viewing the page and delivers an image specifically sized for that device.
Don't Make Your Videos Annoying as Well as Unresponsive
Videos have the same size constraints as images, but some "helpful" design techniques for videos will annoy your mobile customers instead of helping them.
The autoplay attribute of the <video> tag can be tempting. But customers using a mobile device with data limits might not want to watch your video on that device. By turning on the autoplay feature, you effectively steal customers' data minutes without their permission. You should also avoid this attribute if you have more than one video on a page, even if your audience isn't mobile.
Remember that most people don't browse the Web in a vacuum. If customers are on their mobile devices, they might be out with other people. If they're at a desktop computer, they probably have other browser tabs or windows open. When you set your video to play automatically, your web page comes across as spam; many people will simply look for the tab making the noise and close it—without ever looking to see what was playing.
HTML includes a preload attribute that you should use on your videos, especially if you expect a lot of mobile customers:
<video preload="none">
This instruction tells the browser to do nothing with the video until the customer chooses to play it. You may think that this attribute will make the video take longer to load, but it actually saves bandwidth, especially if the customer decides not to watch the video.
Forms Can Also Be Responsive
I'm amazed by how many web forms I come across that aren't responsive. They might flex to fit my phone or tablet window, but they don't do one of the easiest things that make a form responsive—they don't use the 13 new input-field types introduced in HTML5:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
These new field types for form input work in all web forms, no matter which browser you use. And on smartphones or tablets, they make the forms much easier to fill out. You use the input fields much like a text field:
<input type="url" name="webpage">
Instead of writing text in the type attribute, you write url or email or tel. Just this one simple change will make your forms easier to use and more responsive. Figure 1 shows how the tel field looks, compared to the same field as a text box.
)
Figure 1 Two telephone fields on an iPad—left, a text field; right, a tel field.
Can't see the difference? Compare the keyboards. On the iPad, the tel field automatically opens a keyboard showing numbers and symbols, rather than letters. Since most phone numbers are numeric, this field responds to what the form needs to be filled in correctly, as well as to the device.
These form field types have been available for years, and there's no excuse for not using them right now. Most mobile devices will display a different keyboard for the email, url, and tel field types, all of which are very common in web forms.
Don't Forget the Metadata
Another piece of HTML that web designers often forget is the metadata in the <head> of the HTML, the viewport. This requires a simple meta tag:
<meta name="viewport" content="width=device-width">
This single line should be written somewhere inside the head of your HTML document. It tells the browser to consider the width of the page to be the same as the device width. On a computer, that's the same as the browser window, so it makes no real difference. But on a smartphone or other mobile device, it can make a huge difference in the way your pages are displayed and viewed. Why? Most mobile devices' display resolution is much larger than their actual resolution. This tag allows these devices to display pages that otherwise wouldn't fit on the screen.
Most of the time, a web page that was designed to be viewed at 980 pixels wide is too small to be read easily at 320 pixels wide. By setting the viewport to be the same as the device width, your web page can be more responsive to the actual device, and not just what the device makers want it to be like.
That brings me to another viewport meta tag that you should never use:
user-scalable=no
While there might be some scenario in which allowing readers to scale would break the site, the fact is that nearly all websites benefit from letting customers scale the pages to fit what they can read. In other words, let your customers zoom in to make the text larger or zoom out to fit more content on the page. Blocking the ability to zoom in and out is a huge usability problem on many websites, especially sites with older readers or people with vision problems.
Another way that sites block zooming is by using the meta tag to control the maximum amount that a customer can scale the screen:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
This tag has almost the same bad effect as the user-scalable=no tag. It says that the page should start out at 100% scale, and the user cannot make the scale any larger. So readers can make the text smaller, but if it's too small to read at the 100% default size, they're out of luck, as it can't scale larger than 100% (maximum-scale=1.0).
Instead of making your sites more difficult for mobile users and customers with vision issues, here's the viewport meta tag I recommend all sites use:
<meta name="viewport" content="width=device-width, initial-scale=1">
Don't worry. If your sites block scaling, you're in good company. I even found a site for people with disabilities that blocked zooming when viewed on a mobile device. But the fix is so easy that you should add it to all your pages right now.
Don't Be Afraid of Responsive Web Design
The goal of RWD is to make your websites as usable and friendly as possible, for as many people as possible, on as many devices as possible. Forget about which media queries are best for a specific device. Instead, focus on what your customers need from your site, and you'll create a responsive design that really does respond. Your customers will thank you for it.