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.
