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.
