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.
