Custom CSS Stylesheets for Small Screens

I’ve gotten a good handfull of visitors from EeePC related sites, so I assume that some visitors are coming on their EeePCs. I was playing with some other site layout issues at the same time anyways, so I decided to do a couple of things to make it easier on those with small screens.

Notice: This info is old and probably out of date. A better method of doing this probably exists. If it’s helpful, great, but please take it with a grain of salt.

Smart Chunking

The main reason this site doesn’t play well with small screens is because of the two sidebars. To get around this, I broke up the sidebar content into three different divs. The most important one is the navigation, the next most important is the Firefox button / Shirts by Me bar. The least important is the Google search, Bluehost ad and the google ads. The main body of content also got its own div.

I had initially had all this content at the top of the HTML. I decided that only the navigation should go at the top of the page. This benefits small screen users as well as the blind and those using text based browsers.

Super Style

The next thing I did was to create an alternative stylesheet. This stylesheet puts the navigation across the top horizontally, then displays the page contents across the whole width of the window. The other stuff just gets tacked onto the bottom. This same stylesheet should get used if the browser requests the ‘handheld’ media CSS file, or if a Firefox user goes to their View–>Page Style–>Small Screens menu item. The Small Screens menu item is actually my Small Screens CSS file.

Below is the CSS section of the <head> part of this site. Notice that there are two media=”screen” sections, but that the ‘freestyling.css’ file has a rel attribute of ‘alternative stylesheet’. This is the magic that makes it not load, but be present in the Firefox Page Style menu. I designate the same stylesheet for handhelds and for printing as well.

<lt;link id='maincss' rel="stylesheet" type="text/css" href="http://stuporglue.org/ohyesivegotstyle.css" media="screen" title="Default Styles"/>
<lt;link rel="alternate stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="screen" title="Small Screens" />
<lt;link rel="stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="handheld" title="Handheld Screens" />
<lt;link rel="stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="print" title="Print Media" />

Cookies anyone?

Now I create a check to see if the user has a cookie installed on their computer from this website. The cookie simply has a key-value pair of ‘smallscreen’=>1|0. When the page is sent to the user, a check is made to see if a cookie is set. If it is set and it is 1, the CSS for small screen is sent, otherwise the normal CSS is sent. I also created a simple form that will let the user set or unset the cookie.

Javamatic

The last step to making this site more readable to small screen visitors is to automatically switch over to the small screen CSS style if their browser is too small. This little snippet of code will load the freestyling.css file if the screen width is 800 pixels or less. Sorry this is JavaScript and not something serverside like PHP.

In the case that the user has said ‘smallscreen=0’ in their cookie, I send them the large screen CSS and don’t print out the JavaScript at all

if(screen.width <= 800){ 
    document.getElementById('maincss').href = 'freestyling.css'; 
}

This entry was posted in Programming, Projects and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *