Developing for mobile devices seems to come second for most web developers, after developing for the traditional desktop web browser. When thinking about supporting different browsers, we generally focus on progressive enhancement in terms of adding functionality rather than basic layout. But if you think about how your semantic HTML will be used, it’s likely you’ll come to the same conclusion that I did: a mobile device should be your first target development platform.

One of the principles of semantic HTML development is that you want to boil your page down to its most elemental, essential components before you start, and build your structure around these. HTML 5 provides a number of new page elements that can help identify those basic components, but it doesn’t change this key approach.

However, the need to support the smaller screens and tighter bandwidth associated with mobile devices actually provides a developer with a new opportunity. By paring down a site to the minimal set of components necessary for a complete mobile experience, a developer can create a solid semantic structure for that page right from the start. A page built in that manner is much easier to enhance for a richer desktop experience than it would be to trim away desktop features for a more minimal mobile device experience later.

This is the bare essence of progressive enhancement, and it will sharpen your focus as it streamlines your process.

To do this effectively, it may be useful to turn your CSS inside out, and build your standard stylesheet as if all you were developing was a mobile site. Once you have that working the way you want it on a mobile device, you can specify the presentation for desktop web browsers conditionally. This not only keeps your stylesheets lean and responsive; it also helps you focus your development efforts around the most critical elements of your site.

This may sound like a very different way of approaching your site development, but it’s not all that complicated, thanks to a few convenient CSS conventions. The real trick is thinking about your desktop site as an enhanced child of your mobile site, instead of the other way around.

For example, imagine you’re creating a new HTML 5 website with a main page, a set of related subpages, and a template that involves a standard header, footer, navigation menu, and a sidebar with a set of elements you want repeated on each page. You’re already ahead of the game if you’ve visualized this as a set of repeating components that can take advantage of our new semantic HTML 5 elements, such as header, footer, nav, article, section, and aside.

The first question to ask is what the simplest presentation of a site like this could be. If you stripped away anything that would detract from a user’s experience on a mobile device, what would you have left? Might the sidebar elements be extraneous? Or if they are necessary, do they have to float off to the side, squeezing the space available for the main content of a page, or could they be pushed down to the bottom of the page?

With these thoughts in mind, you might start building your semantic HTML 5 page skeleton by populating a header, article, and footer, inserting both a section and an aside into the article. Put the elements together in the order that they would be read logically if there were no styles applied, and you can begin to imagine how they will appear to a mobile device. So the aside would be placed after the section inside the article. That way it will easily fall after the section on a mobile screen when the page is built, unless you explicitly position it to the side.

After building the basic semantic HTML structure, and making sure that all the elements on the page use appropriate HTML 5 elements, you’re well on your way to having a mobile site that flows easily into a small screen with few bandwidth-hogging embellishments. In your stylesheet, you can now add all the design driven rules for features such as colors, fonts, alignments, and background images to make this lean and sleek mobile site support your branding and style guide requirements on your iphone or Android device, or any mobile device that supports CSS styling. Remember that all these styles will be inherited on the desktop, saving you the trouble of re-creating them independently for both environments.

To add styling for desktop browsers, you just need to add the following @media definition to your CSS stylesheet, and put your desktop-specific CSS definitions inside of it:

@media only screen and (min-width: 768px) {
    /* Put desktop CSS definition overrides here */
}

This definition includes a conditional statement querying the browser window to see if it is 768 pixes wide or wider. Since this definition falls after all your general CSS style definitions, it will override them selectively, and let the rest cascade through. And because these definitions sit inside of the @media definition, they will only be applied in the case of a browser with a width of 768px or more.

So for example, to get that aside sitting comfortably off to the right of your window in desktop browsers, you might want to float the section and the aside to the left, and give the article a hidden overflow and a right padding the width you want the sidebar to be. Then give the section a width of 100% and a border-right the width you want the sidebar to be, and a negative margin-right that matches. Then give the aside the same width, giving it a negative margin-right that matches the right border width of the section:

@media only screen and (min-width: 768px) {
    article {
        padding-right: 250px;
        overflow: hidden;
    }
    article section {
        float: left;
        width: 100%;
        border-right: 250px solid transparent; 
        margin-right: -250px;
    }
    article aside {
        float: left;
        margin-right: -250px;
        width: 250px;
    }  
}

Now your mobile device and your desktop browser will share most of the same basic styles, and the same semantic HTML structure, but the site will expand horizontally on browsers wider than 768px to allow the aside to appear as a sidebar next to your page content.

And there may be other rich presentation elements such as tabbed navigation or larger background images that you would want to incorporate into your desktop browser experience in the same way. This is the place in your CSS to do it.

Of course, some older browsers might not recognize conditional @media definitions. But that’s another benefit to using this approach. Those browsers will ignore these new definitions, and serve those users the pared-down but fully functional mobile-friendly version of your site–which is probably what you want when trying to support ancient technology in the 21st century.

Developing your site inside out, considering the mobile device application first, will strengthen your skills and improve your process:

• For web developers, it forces you to focus on the basics first, and use progressive enhancement at the deepest levels of your page structure.
• For user interface and user experience designers, it isolates experiential design from visual design in a way that supports the advantages of each platform and how users expect them to behave.
• And for visual designers, it encourages the creation of a device-independent style guide, as it separates branding from layout to optimize the user experience for each type of device.

Once you get your head around it, you may never go back to developing pages for the desktop first.