Mobile Friendly Websites with CSS Media Queries
- by dwahlin
In a previous post the concept of CSS media queries was introduced and I discussed the fundamentals of how they can be used to target different screen sizes. I showed how they could be used to convert a 3-column wide page into a more vertical view of data that displays better on devices such as an iPhone: In this post I'll provide an additional look at how CSS media queries can be used to mobile-enable a sample site called "Widget Masters" without having to change any server-side code or HTML code. The site that will be discussed is shown next: This site has some of the standard items shown in most websites today including a title area, menu bar, and sections where data is displayed. Without including CSS media queries the site is readable but has to be zoomed out to see everything on a mobile device, cuts-off some of the menu items, and requires horizontal scrolling to get to additional content. The following image shows what the site looks like on an iPhone. While the site works on mobile devices it's definitely not optimized for mobile. Let's take a look at how CSS media queries can be used to override existing styles in the site based on different screen widths. Adding CSS Media Queries into a Site The Widget Masters Website relies on standard CSS combined with HTML5 elements to provide the layout shown earlier. For example, to layout the menu bar shown at the top of the page the nav element is used as shown next. A standard div element could certainly be used as well if desired. <nav>
<ul class="clearfix">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#aboutus">About Us</a></li>
<li><a href="#contactus">Contact Us</a></li>
<li><a href="#store">Store</a></li>
</ul>
</nav>
This HTML is combined with the CSS shown next to add a CSS3 gradient, handle the horizontal orientation, and add some general hover effects.
nav
{
width: 100%;
}
nav ul
{
border-radius: 6px;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%,
rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(125,126,125,1)),
color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,
rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,
rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,
rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(125,126,125,1) 0%,
rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#7d7e7d',
endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
nav ul > li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
nav ul > li:first-child
{
margin-left: 8px;
}
nav ul > li > a
{
color: #ccc;
text-decoration: none;
line-height: 2.8em;
font-size: 0.95em;
font-weight: bold;
padding: 8px 25px 7px 25px;
font-family: Arial, Helvetica, sans-serif;
}
nav ul > li a:hover
{
background-color: rgba(0, 0, 0, 0.1);
color: #fff;
}
When mobile devices hit the site the layout of the menu items needs to be adjusted so that they're all visible without having to swipe left or right to get to them. This type of modification can be accomplished using CSS media queries by targeting specific screen sizes. To start, a media query can be added into the site's CSS file as shown next:
@media screen and (max-width:320px) {
/* CSS style overrides for this screen width go here */
}
This media query targets screens that have a maximum width of 320 pixels. Additional types of queries can also be added – refer to my previous post for more details as well as resources that can be used to test media queries in different devices. In that post I emphasize (and I'll emphasize again) that CSS media queries only modify the overall layout and look and feel of a site. They don't optimize the site as far as the size of the images or content sent to the device which is important to keep in mind.
To make the navigation menu more accessible on devices such as an iPhone or Android the CSS shown next can be used. This code changes the height of the menu from 40 pixels to 100%, takes off the li element floats, changes the line-height, and changes the margins.
@media screen and (max-width:320px)
{
nav ul
{
height: 100%;
}
nav ul > li
{
float: none;
}
nav ul > li a
{
line-height: 1.5em;
}
nav ul > li:first-child
{
margin-left: 0px;
}
/* Additional CSS overrides go here */
}
The following image shows an example of what the menu look like when run on a device with a width of 320 pixels:
Mobile devices with a maximum width of 480 pixels need different CSS styles applied since they have 160 additional pixels of width. This can be done by adding a new CSS media query into the stylesheet as shown next. Looking through the CSS you'll see that only a minimal override is added to adjust the padding of anchor tags since the menu fits by default in this screen width.
@media screen and (max-width: 480px)
{
nav ul > li > a
{
padding: 8px 10px 7px 10px;
}
}
Running the site on a device with 480 pixels results in the menu shown next being rendered. Notice that the space between the menu items is much smaller compared to what was shown when the main site loads in a standard browser.
In addition to modifying the menu, the 3 horizontal content sections shown earlier can be changed from a horizontal layout to a vertical layout so that they look good on a variety of smaller mobile devices and are easier to navigate by end users. The HTML5 article and section elements are used as containers for the 3 sections in the site as shown next:
<article class="clearfix">
<section id="info">
<header>Why Choose Us?</header>
<br />
<img id="mainImage" src="Images/ArticleImage.png" title="Article Image" />
<p>
Post emensos insuperabilis expeditionis eventus languentibus partium animis, quas
periculorum varietas fregerat et laborum, nondum tubarum cessante clangore vel milite
locato per stationes hibernas.
</p>
</section>
<section id="products">
<header>Products</header>
<br />
<img id="gearsImage" src="Images/Gears.png" title="Article Image" />
<p>
<ul>
<li>Widget 1</li>
<li>Widget 2</li>
<li>Widget 3</li>
<li>Widget 4</li>
<li>Widget 5</li>
</ul>
</p>
</section>
<section id="FAQ">
<header>FAQ</header>
<br />
<img id="faqImage" src="Images/faq.png" title="Article Image" />
<p>
<ul>
<li>FAQ 1</li>
<li>FAQ 2</li>
<li>FAQ 3</li>
<li>FAQ 4</li>
<li>FAQ 5</li>
</ul>
</p>
</section>
</article>
To force the sections into a vertical layout for smaller mobile devices the CSS styles shown next can be added into the media queries targeting 320 pixel and 480 pixel widths. Styles to target the display size of the images in each section are also included. It's important to note that the original image is still being downloaded from the server and isn't being optimized in any way for the mobile device. It's certainly possible for the CSS to include URL information for a mobile-optimized image if desired.
@media screen and (max-width:320px)
{
section
{
float: none;
width: 97%;
margin: 0px;
padding: 5px;
}
#wrapper
{
padding: 5px;
width: 96%;
}
#mainImage, #gearsImage, #faqImage
{
width: 100%;
height: 100px;
}
}
@media screen and (max-width: 480px)
{
section
{
float: none;
width: 98%;
margin: 0px 0px 10px 0px;
padding: 5px;
}
article > section:last-child
{
margin-right: 0px;
float: none;
}
#bottomSection
{
width: 99%;
}
#wrapper
{
padding: 5px;
width: 96%;
}
#mainImage, #gearsImage, #faqImage
{
width: 100%;
height: 100px;
}
}
The following images show the site rendered on an iPhone with the CSS media queries in place. Each of the sections now displays vertically making it much easier for the user to access them. Images inside of each section also scale appropriately to fit properly.
CSS media queries provide a great way to override default styles in a website and target devices with different resolutions. In this post you've seen how CSS media queries can be used to convert a standard browser-based site into a site that is more accessible to mobile users. Although much more can be done to optimize sites for mobile, CSS media queries provide a nice starting point if you don't have the time or resources to create mobile-specific versions of sites.
