Using CSS3 media queries we can target a host of devices and browser settings. The mobile web has adjusted into a huge market where more people are accessing the Internet via phones and tablets. This trend is not slowing down, and in fact many web designers are jumping on board to see what all the fuss is about.
In this tutorial I’d like to introduce a few of the concepts behind mobile design. We’ll create a basic list view page with a top title bar and some navigation links. This can be coded in straight HTML/CSS and requires no JavaScript to function. Take a look at my demo below, and feel free to grab the tutorial source code as well.
Live Demo – Download Source Code
Default Heading Tags
Each HTML document requires a few different meta tags and other content inside the head element. There are so many interesting tags to include when you’re targeting mobile devices. I’ll go over some of the most important ones that you’ll need.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
This snippet handles much of the blunt upfront work for us. X-UA-Compatible is designed specifically for Internet Explorer rendering engines. I set the value to “edge” which uses the most recent IE engine for HTML/CSS. Similarly HandheldFriendly is a proprietary tag for Windows Mobile and Blackberry devices.
The meta viewport tag is super important for every mobile environment. In this scenario I’m setting the website width at the same value as our maximum device width. This can adjust for Android and iOS devices. Additionally the initial-scale will keep a steady aspect ratio of 1:1 for graphics and text on the page.
<!-- APPLE TOUCH APP ICONS <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> -->
The mobile web app capable meta tags go hand-in-hand with these app icons. I have commented out the HTML because for this example we don’t need iOS icons. But if you wish to run your website like a mobile app you can include images and settings for your home screen.
The Page Skeleton Markup
I have kept the whole page simple and easy to follow in the HTML. The top heading band is using an HTML5 header element set fixed position on the screen. This means as you scroll down the title bar will always appear on top.
<body>
<header>
<h1>Mobile Web App</h1>
</header>
<section id="content">
<!-- home featured image credit: http://dribbble.com/shots/118515-Device-Icons -->
<center><div id="home-feature"></div></center>
<nav>
<ul id="nlists">
The other inner content is held inside a section element with a top image, mainly for aesthetic purposes. The full navigation is contained inside an unordered list with an HTML5 nav tag wrapper.
If we are looking at the list view on a desktop or laptop screen we can adjust the width for some extra padding. This may also work on Tablet PCs if the resolution width is greater than 700 pixels. This small responsive feature looks a lot better than spanning the entire screen.
Styling a List
Many of the background gradients for links I have created using CSS3. This saves us time developing images and moving them over onto the server. Although even with newer CSS3 gradient properties it’s still difficult gaining full browser support. Below is a snippet from the header properties list:
header {
background: #6d83a1;
height: 44px;
width: 100%;
position: fixed;
top: 0;
z-index: 9999;
border: 1px solid #2d3033;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
text-align: center;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid #554761;
color: #fff;
font-weight: bold;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#afbacd), color-stop(0.5, #869db7),
color-stop(0.505, #7992ae), to(#6482a6));
background-image: -webkit-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
background-image: -moz-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
background-image: -ms-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
background-image: -o-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
background-image: linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
}
Now down below in this same stylesheet I’ve put together special link styles inside the unordered list. All anchor elements are displayed as blocks and given extra padding on all sides. We need to set the box-sizing: border-box; property so this padding doesn’t add extra space on the side and create a horizontal scrollbar.
nav ul#nlists { list-style: none; font-family: "Calibri", Arial, sans-serif; }
nav ul#nlists li {
border-bottom: 1px solid #d9e2eb;
background: #fff;
display: block;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#ecf1f5));
background-image: -webkit-linear-gradient(top, #ffffff, #ecf1f5);
background-image: -moz-linear-gradient(top, #ffffff, #ecf1f5);
background-image: -o-linear-gradient(top, #ffffff, #ecf1f5);
background-image: linear-gradient(top, #ffffff, #ecf1f5);
}
nav ul#nlists li a {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
padding: 15px 0px;
padding-left: 10px;
text-decoration: none;
font-size: 1.4em;
color: #787878;
font-weight: bold;
overflow: hidden;
}
nav ul#nlists li a:hover { color: #999; }
The containing list items also have a small white-to-gray with a defining bottom border. My goal is to mimic some of the same styles from all the natural iOS applications. It keeps visitors interested in using your mobile layout time and time again. Plus when running as an HTML5 app it fits perfectly onto your iPhone or iPad.
Designing the Right Arrows
Those of you acute to detail may have noticed the arrows off on the right-hand side. This is actually a border element generated using CSS3 rotations. We could make this effect using icons and keep support for older browsers – but this option works better as a fallback method.
nav ul#nlists li a::after {
content: '';
display: block;
width: 9px;
height: 9px;
border-right: 3px solid #adb46b;
border-top: 3px solid #adb46b;
position: absolute;
right: 40px;
top: 50%;
margin-top: -5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
nav ul#nlists li a:hover::after { border-color: #c3ca80; }
The width and height of this element define how it appears to the side. We’re using absolute positioning to keep the arrow on the right side. Through the border-width property we can make it thicker or thinner adjusting for the text size. This works so well because we don’t need any extra HTML markup on the page, and this icon is still included inside the anchor link.
Other Responsive Properties
I’ve only added a few media queries inside the attached responsive.css file. The first query limits if we are using a screen with more than 700px and appends some extra padding to the center list. But there are two other important mobile queries for fixing up the layout.
/** designs for iphone **/
@media only screen and (max-device-width: 480px) {
#content nav {
padding: 0px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
section#content {
padding: 0;
width: 100%;
}
nav ul#nlists li a {
font-size: 1.2em;
}
}
/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
div#homeimg {
background-image: url('images/devices-icon-home-feature@2x.png') no-repeat;
background-size: 290px 250px;
}
}
In the first section we’re checking for a maximum device width of 480px. This is limited to iPhone displays in portrait and landscape mode – plus other devices with a similarly small screen. I’m removing all the extra padding from the list and content section. Also I’ve toned down the text size a bit, because ems seem a lot larger on mobile phones.
The second piece is looking for retina screen devices. So far this will only apply to high-DPI Android screens and retina iPhones/iPads. I have supplied a double resolution image which we can rearrange using the background-size property. This is a necessary step for any mobile website with images, or else they will appear very blurry to the average iPhone 4/4S users.
Live Demo – Download Source Code
Conclusion
There is so much to cover for building a mobile web app. I’ve touted a lot of the mainstream ideas which are circulating the web. But there are dozens of other resources in Google to get you moving even further down the path of mobile web development. As I mentioned earlier my source code is free to download and open for edits on your own projects. If you have any ideas or questions feel free to respond in the post discussion area below.
