Tip on Making Mobile Stylesheets: Desktop, Mobile, Repeat

Joe Purcell Posted by

There are plenty of caveats with mobile CSS styling and as many methods to deal with them. There are also plenty of tips, such as the 5-Minute CSS Mobile Makeover, but few deal with how to go about making the stylesheets. This may appear obvious at first glance, but having a sound method of making mobile stylesheets can prevent wasted time and energy. And here’s the mobile styling tip: design for desktop, then mobile, then repeat.

Preface

It is important to understand the underlying assumptions of this tip:

  • The core method of this tip is iteration. Start with the easiest and work towards the more difficult.
  • This tip focuses on sites where the mobile version is merely a desktop version adapted for mobile, so the DOM is the same. There are a number of different ways to serve a mobile site, such as using the “handheld” vs. “screen” specifications (used in this tip) or a completely separate subdomain for mobile. In some cases, it may be best to design a completely separate mobile site, in which the desktop and mobile stylesheets will have little or nothing to do with each other because the DOM is different. Assuming you, the reader, haven’t made a mobile version yet, making a mobile site with the same DOM as the desktop version has enormous benefits, chiefly just that–being able to serve the same content for both versions.
  • The core concept of design here is CSS overriding, as explained here. Using an example similar to the article’s,
    p {
        color: #ff0000;
        font-size:16px;
    }
    p {
        color: #000000;
    }
    

    The last style property specified wins out. So the result will be a black color with 16px font size. As the article explains, there is an overriding hierarchy based on specificity, but this is the basic idea.

  • The goal of this tip is minimalizing the amount of work needed done in the long term. Certainly, a mobile stylesheet can be thrown together in a flurry, but iteratively making only the changes necessary will allow for future adaptability.

Initial Iteration

1. Desktop – Design the website for the desktop with just one stylesheet, call it general.css. Set everything just the way you want it.

2. Mobile – Design the website for a mobile device, call the stylesheet mobile.css. Don’t attempt to design for all mobile devices at once. Pick the easiest device to design for, such as iPhone or Android, then come back later for the harder ones. It may be that the harder devices, like Blackberry, will need a completely separate stylesheet, but having a stylesheet already designed for an easier device should serve as a head start. At this step, only change what is needed. Remember, the goal is only to modify what is needed.

3. Repeat – You’re probably going to need a second time through. In designing the mobile stylesheet you may realize some structural changes that need to be made. Pick just one issue to fix. For example, you realize the logo you made for the header is 600px wide. That’s just not going to work for mobile. So, you need to rethink the desktop version.

Issue Fixing Iterations

1. Desktop – Second time through, you realize a structural (DOM) change is needed. Using the example of a 600px wide logo, make the logo a background image set in the general stylesheet instead of using an img element, keeping in mind that we can then use a completely different logo for mobile because it’s in the stylesheet.

2. Mobile – We need to adapt to the changes we just made on the desktop version. In this case, we are changing the logo. So, you make another logo that is 150px wide and set the mobile CSS accordingly.

3. Repeat – Pick another issue to fix, rethink the desktop version, fix the mobile, repeat.

Additional Device Iterations

These iterations will look just like the previous two–an initial iteration followed by iterations to fix issues for that device. So, you pick Blackberry. The desktop version will stay the same on the initial iteration, then adapt the mobile style sheet for the device being sure that any changes don’t skew the design for other mobile devices, and then move on to issue fixing iterations.

In closing, web design is quite an art. Yet, hopefully this general tip will help web designers think about how they make stylesheets in a way that is fast and efficient. I highly recommend watching the presentation “Rethinking the Mobile Web” which takes the approach of designing for mobile first, instead of the desktop. What do you think the pros and cons are of the two approaches?

About the Author: Joe Purcell is a technology virtuoso, cyberspace frontiersman, and connoisseur of Linux, Mac, and Windows alike.