Customizable starter design for multiscreen development

Many developers and designers have had to face the challenge of creating a mobile version of a website. Typically this has consisted of creating a series of HTML and CSS files that target specific devices or mobile browsers. With CSS3 being adopted at breakneck speeds, it is time to leverage the power of CSS3 media queries.

Read the article to learn about key advantages of using media queries and the features of this template, preview and download the template and related files and assets, and watch a short video to get an overview of the template's features.

Media queries allow you to create CSS rules that are sensitive to the size of the browser's viewport. This means you can change your design based on the amount of space the user's browser has. When you combine this with techniques such as absolute positioning, float properties, CSS sprites, and font styles, you can morph a single HTML web page into a customized design and user experience.

This template demonstrates the possibilities available to you when you plan your design across different devices. One of the first things you may notice is the banner area. As you decrease the horizontal real estate from common computer-size to common tablet-size, you change the height and image of the banner, use a smaller version of the logo, and resize and reposition the navigation. When you decrease the size even more, you decrease the banner and logo again, and also move the navigation down below the content. This convention follows many mobile navigation systems, as it elevates the content before the navigation options.

Varied image compression

Another advantage of media queries is the fact that you can use CSS to load images based on screen size as well. This template uses CSS to load all imagery. This technique allows you to load specific images based on the results of the CSS3 media query. What's more, you can apply more compression to images targeted at hand-held devices, and less compression on images targeted at tablets and computer screens.

With many phones and tablets sporting resolutions of 140ppi or better, highly compressed JPEG images still hold up very well on these screens. This allows you to make the images very small in file size, and still keep much of the integrity of the original image.

Figure 2 shows the combined file size used by each set of images. As you can see, the hand-held, or small version, of the graphics use only 75% of the file size used in the larger, or computer-sized, images.

Activating and deactivating absolute positioning

Another nice feature of this template is the way the top navigation drops below the content on smaller screens (see Figure 3). This is achieved by applying the navigation markup after the content container, then using absolute positioning to move it to the top of the screen for medium and larger displays.

This provides an optimal user experience for each display, as it is customary to provide navigation after content on hand-held devices, whereas setting top, or left, navigation on larger displays proves to be more user-friendly. In addition to moving the position of the navigation, you also change the design of the navigation to match more common hand-held design conventions.

Forging ahead with HTML5 and CSS3

This HTML template is created using HTML5. Included in the template is a reference to a JavaScript file, provided by Google, allowing versions of Internet Explorer 8 and earlier to render the HTML5 properly. In this case, HTML5 allows you to reduce the number of DIVs in the page by using such tags as <figure>, <nav>, <header>, and <footer>, to name a few. This reduces the number of HTML tags you'd normally use in earlier versions of HTML.

In order to let earlier versions of Internet Explorer understand HTML5, this template uses Google's publically available html5shiv JavaScript. This script is inserted with a conditional HTML comment that is unserstood by all versions of Internet Explorer, and is only used if the user is using a IE 8 or earlier (see Figure 4).

In addition to HTML5, I've also used CSS3 features for elements such as rounded corners, gradients, and drop shadows. In some cases, Internet Explorer will ignore all aspects of these CSS rule attributes. To ensure the design still looks good in in older versions of Internet Explorer, I've also created a special CSS file.

Download the HTML, CSS, and source Photoshop files related to this template.