How to Design a Mobile Stylesheet for Your Website


By

It seems mobile is becoming more powerful with the younger tech audience. More kids and young adults are carrying around smartphones than in any other time period ever before. Each one of these devices is not just a phone but a mobile computer built with access to any website over the Internet.

This leaves a lot to the imagination when it comes to mobile design. If you are developing a website and know you’ll have a market running through mobile browsing, it would be a good idea to optimize a mobile stylesheet. It doesn’t take much work and will save your visitors a lot of frustration.

How the Mobile is Shaping the Web

5-10 years ago, web developers had concerns over browser compatibility and JavaScript functionality. Getting CSS to run properly in all of the major desktop browsers was hard enough. Now it seems designs have much more to focus on.

With access to the Internet easier now than ever before, we can assume a portion of your audience will be mobile.

Based on the numbers, we’re only going to see further growth in this area. More people are buying iPhones and Android-powered devices every month. 3G networks are building out to a wider range and offering stronger signal strength.

We’re ushering into a new world of mobile technology, and as the Internet’s users adapt, so must web developers.

The Power of CSS

Lucky for us CSS is a powerful language applicable to many areas of styling websites. It’s a simple job to structure styles compatible with mobile devices only, along with a slew of options for how pages are structured.

Below is some simple code you can add to your site to allow for an external CSS stylesheet. Notice the media type set to “handheld,” which is the definitive factor for parsing mobile styles.

<link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld" />

This stylesheet attachment will only load when your site is parsed by a mobile browser. This is an invaluable technique that doesn’t take long to implement and will catch the largest majority of your visitors.

It used to require some fancy JavaScript data management to determine what type of browser your visitors were running and display CSS styles accordingly. As our standards grow, it makes the developer’s job that much simpler.

You can rename your .css file to anything you’d like. The only key aspect of the above link element is the media attribute.

Allow for Fluctuations in Layouts

When optimizing your site for mobile design, you have to take into account smaller projections through smaller screens. This means loading a page with a set 960px container will not look so pretty on most mobile devices.

The fix for this small problem is fluid layouts. Apply layouts to your design that isn’t set to exact values (pixels) but can expand and contract based on the amount of room available. The most compatible units to work with are percents or ems.

Both values will fit just as well. However, you’ll see the best results setting division widths in percentages. Styling your main container to fill 100% screen width will fix most bugs found on mobile devices. Depending on how your elements are structured, this may not be an end-all-be-all fix. Try messing around with many different values until you can find one which fits best.

Hide Awkwardly-Proportioned Content

Often times we’ll run large block areas for our websites containing content jammed into smaller places. This is true for many sidebar widgets and footers on most websites. This content will only hinder the mobile user experience and should be taken care of in a clean, professional way.

Styles can also be added to your handheld.css sheet to clear up problem areas. If you’d want to re-structure the content, it’s easy enough to edit styles (e.g., li elements in your footer), although sometimes the content is just too much to handle.

In these cases, it’s easier to remove the element entirely and redefine the look of the site. This can be done with the display: none property.

These techniques all come back to eliminating as much clutter as possible for your readers. You must step back and consider what reason your visitors are going to your site in the first place.

Ensure your content can shine and sit foreground as the page loads. It should be easy to scroll and read through, large enough to understand what words are on the page, and fitted with enough spacing to not kill your visitors’ eyes.

Optimizing Mobile Images

A common question for designers is how a website’s images will fit in on each browser. Desktops are generally not a problem anymore, as there is plenty of room for page elements. However, depending on which browser you’re running, a mobile device could issue some problems.

As many of the techniques have been so far, this is another simple fix. Since images are not going to auto-resize in most browsers, you need to set them firmly in place with a max-width value. You should find out what some of the common sizes are for screen resolutions and fix your sizes accordingly.

A safe range would be anywhere from 200px-350px in width. Height needs no limit, as users can scroll endlessly. Suppose you work with Google Analytics, you can get a full report about what browsers your visitors are using. Check to see what devices are most common and research their screen resolutions. From these results, you should be able to determine a common setting for all your images.

Designing for mobile isn’t as hard as many make it out to be. With so many techniques supported by our current standards in HTML, it would be foolish to pass up such power in controlling your visitor’s browsing experience.

These tips should get you started on the right track toward mobile stylesheet development. Optimization is the first step on your checklist, but don’t sacrifice user experience for a clean slated layout.

Consider all of your options when developing a mobile stylesheet, look to other websites for inspiration and keep up on design trends!


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.