adobe stock iconDownload 10 Free Photos & Design Assets From Adobe Stock Download Now

Designing a Mobile Stylesheet for your Website

on Web Design

It seems mobile is becoming more powerful with the younger tech audience. More kids and young adults are carrying around smartphones than 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 in to 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 developers 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 in most mobile devices.

The fix for this small problem is fluid layouts. Apply layouts to your design which aren’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 into 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 re-define 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. If 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 towards 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!