Using CSS3 Media Queries for Responsive Design

CSS3 Media Queries for Responsive Design
Share on

Media queries are the foundation for responsive designs. These CSS3 rules grab the size of the viewer's screen and resize the content to fit its width and height. With Google's latest algorithm change, site owners are jumping towards CSS3 and what it has to offer for mobile device compatibility. This article covers some of the basics for web designers and site owners.

First, What is CSS?

CSS takes the raw HTML syntax and formats it according to your layout requirements. CSS is responsible for the design of your web pages including the way images display, the font style, the columns and rows on a page, and the location of your navigation. All of these aspects are necessary for a good user experience and interface. Studies have shown that user experience is paramount for good online sales and customer retention.

CSS3 is the latest iteration of the language's syntax. You can use older CSS in your web pages, but you can't use media queries with older CSS versions. If you download specific themes or use libraries such as Bootstrap, the designers probably use CSS3.

Getting Started with Media Queries

Media queries can be embedded directly into your HTML, but most developers use an external CSS file as the standard for developing styles for a page. You can create CSS with any standard text file such as Windows Notepad or Notepad++.

You also need to know your target audience. In an effort to provide the best user experience across all mobile devices, you want to set up media queries for each screen size available. This can be tedious, but it's beneficial for maintaining a following for your website.

Let's take a look at some basic CSS code that resizes an HTML page based on a screen size of 450 pixels.

  • @media screen and (max-width: 450px)
  • body
  • background-color: white;

The first line of code might be self-explanatory. The code opens with the "@media screen" directive and tells the CSS engine what screen size to optimize the layout. In this example, the screen size is 450 pixels.

The next section tells the browser what should change from the original CSS code. In this instance, the background color is changed to white. You could have a white background for both mobile devices and desktops, but if you have a different color with desktops, this directive would override your desktop settings.

This example only shows you one CSS class for the "body" tag, but within the media query, you would place all of your CSS design classes that you want to override on mobile devices. Remember, these queries override your desktop settings, so larger screens still have the old layout. That's all it takes to get started with responsive design.

Of course, creating the actual design is much more difficult than writing CSS classes. Unless you have design skills, you should rely on a web designer to work on your code. A web designer can take your desktop pages and make them more modern for mobile devices.

Even though mobile design is an important aspect for ranking, as you can see it's not very difficult to understand. With Google's new algorithm changes, it's important for webmasters to understand the syntax changes, especially if you don't use CSS3 media queries currently. If your website is your bread and butter, it's best to fix this issue as soon as possible.

Share on