Home > Articles

Responsive Web Design Is More Than Just Media Queries for Mobile Devices

RWD is more than just breakpoints, flexible images, and switching navigation between icons and drop-down menus. To create truly responsive design, Jennifer Kyrnin, author of Sams Teach Yourself Responsive Web Design in 24 Hours, recommends leaving out the media queries and instead focusing on how customers really want to use your web pages.
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
  • email
  • 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.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020