With the introduction of a whole new market of mobile devices and tablets, there has never been more of a need for your website content to display across a variety of platforms properly.
There is the old tried and true method of using multiple HTML landing pages that utilize JavaScript to redirect you to the appropriate page, then styling the content accordingly or you could make the entire process easier on yourself in the long run by exploring the possibility with CSS3 and media queries.
This tutorial assumes you have a core understanding of Cascading Style Sheets and that it is always a better idea to include external sheets over using inline CSS making your designs more responsive.There are a number of features that you can specify in a media query expression. Considering that calling out the width of the device in question isn’t an exact science down to the pixel or em, you will use the ‘min-width’ and ‘max-width’ features to help specify your widths. This also goes for any device. Below is a list of some of the features I will be covering:
- width: This is the width of the browser and covers both aspects of min-width and max-width
- height: As you would have guessed it, this covers the height of the browser and both aspects of min-height and max-height
- device-width: This concerns the full width of the device screen. It works with the min- and max- prefixes
- device-height: This concerns the full height of the device screen. It works with the min- and max- prefixes
- orientation: Orientation matches the keyword portrait when the height is greater than the width and landscape when the width is greater than the height
- aspect-ratio: The aspect ratio of the browser is described by the width and height features. It will accept the min- and max- prefixes
- device-aspect-ratio: The aspect ratio of the device is described by the width and height features. It will accept the min- and max- prefixes
- color: This concerns the number of bits of color. You’ll want to set it to ‘0’ for non color devices. It will accept the min- and max- prefixes
- monochrome: This concerns the number of bits of monochrome shades that are available. You’ll want to set it to ‘0’ for non color devices. It will accept the min- and max- prefixes
- resolution: The output resolution of the device measured in DPI or DPCM (dots per centimeter). It will accept the min- and max- prefixes
- scan: The scan type for television media types. The values are progressive and interlace
- grid: This feature is for TTY terminals or a feature phone that has a single fixed-font display
Let’s Get Started
Preparing your page to take on these queries is really no different than calling an external CSS file; we’re just going to add a couple of parameters to the string of HTML code. It is a good idea to call three separate CSS files for your site, each one specifically tailored to the device dimensions. Commonly you’ll find these files named mobile.css, tablet.css, and screen.css. So let’s begin by looking at how we would structure our “link” string in the head section of out HTML5 file:
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 340px)" />In the above example I’m calling out the ‘mobile’ CSS file because it will probably be the device that we see the most changes to our content. To tailor the content for other devices, such as the tablets screen resolution, your HTML isn’t too different from the mobile line above. The key areas we’re interested in for this article are the ‘media’ parameters:
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" /> <link href="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" /> Your tablet styled site should not be too different from the desktop version of the site. When it comes to tablets and mobile devices (with Apple products in mind) you may want to have a responsive content strategy. Reason being, Apple products do not render Flash content. This is where HTML5’s audio and video features will come in handy, but that will be covered in another tutorial.
Getting Down n’ Dirty
Now that you’ve setup your ‘media’ parameters in your HTML head section, let’s move on to actually putting the CSS together. First we’ll start with the tablet.
You won’t need to change any of your body CSS already in place from your screen.css, but let’s take a look at your container selector in our tablet.css. We need to change the width of the container to 700 pixels wide so that it fits within the media query sizes we wrote earlier for the tablet.
#container { width: 700px; margin-left: auto; margin-right: auto; } We can start to resize our content from here. So let’s say as part of our design we’ve included a featured image area. Take the time to create a size specific version of said image for the tablet and let’s take a look at our CSS:
#container #featured { background-image: url(image/featured-img_tablet.jpg); background- repeat: no-repeat; height: 270px; width: 680px; }Now we change the widths of the text area to fit within the size of the document like so:
#container #content { padding: 20px 20px 30px 20px; width: 680px; }Last, but not least, we’ll be taking care of the text inside of the footer area. In turning our attention to the #footer selector you’ll notice that it’s all a simple matter of changing the width as well. Let’s take a look:
#footer { width: 700px; padding: 10px 0 30px 0; margin-right: auto; margin-left: auto; }Believe it or not that should do it for the tablet portion of this tutorial. In the next article I’ll be covering the mobile CSS and how we can implement it in our design.
