Giving Users Style Choice
Sometimes your site’s style doesn’t meet the needs of all your visitors. And once in a great while you get a chance to see what your users are seeing and make a change to benefit them.
Having recently recieved an Eee PC for graduation, I suddenly saw the world of 800×640 resolution and understood that fixed width dual sidebars was a BAD design decision.
Small Screen User: What? Only see one word per line? Preposterous!
My site should now be more friendly to small screens because of several changes I made to the CSS. The same changes should also benefit users with screen readers and text based browsers. The method should also work with users who have JavaScript disabled. If you’d like to use CSS to change your site to be more friendly, here’s what I did.
Organize Your Content
Break your content up into divs. Organize those divs so that the most important content is at the top of the HTML and the least important is at the bottom.
Organizing your content this way will make it easier to use CSS, make it naturally more friendly for text based browsers and screen readers. On my site the first div has the page navigation. The second has the content. The ads, search box and my doodles all are added at the very end of the HTML.
Use CSS to put the divs where you want them. If you don’t know CSS, then it’s time to learn!
Provide alternative styles
Firefox and other good browsers make it easy to switch between provided stylesheets. Most of you will be here with Firefox. In your Firefox menu go to ‘View’ –> ‘Page Style’ –> and choose a style!
Add these alternative styles with a line of code in the <head> like that below. The key is the rel=”alternative stylesheet” part.
<link rel="alternate stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="screen" title="Small Screens" />
You can offer all sorts of different styles. Ideas include a) Alternative themes, b) high contrast version, c) small screen version, d) no images version.
Automatically Pick The Right Style
Sadly, browsers don’t send window or screen size to the server. JavaScript knows though! Since this is the case, we’re going to need to use client side scripting to change stylesheets automatically.
The first part of this step is to give the default CSS line (in your <head> section) an id so that JavaScript can get a handle on it more easily. Then we use the screen.width value to determine if we’re going to switch the CSS on the user. My code goes a little something like this:
<script type='text/javascript'> if(screen.width <= 800){ document.getElementById('maincss').href = 'freestyling.css'; }</script>
The above snippet will realize that the user has a small screen and change the CSS to a small-screen friendly version
Of course this part won’t work for visitors who have JavaScript disabled, which is why we’re going to add one more piece to the puzzle so that they too can benefit from alternative stylesheets.
Give The User Choices
Your visitors know what size works best for them, so give them a choice. You may notice a new menu item on the side of this page which gives the options “Small Screen CSS”, “Normal CSS”, “Default CSS”. These links call change-css.php with different parameters, causing a cookie to be set or unset.
In the head section include (you ARE using includes on your pages, aren’t you?) we now add a little bit of code to check if there is a cookie, and if so to use the style sheet specified by the cookie
<?php
if($_COOKIE['screensize'] == 'normal'){
print "<link id='maincss' rel='stylesheet' type='text/css' href='http://stuporglue.org/ohyesivegotstyle.css' media='screen' title='Default (Big Styles)'/>";
}else if($_COOKIE['screensize'] == 'small'){
print "<link id='maincss' rel='stylesheet' type='text/css' href='http://stuporglue.org/freestyling.css' media='screen' title='Default (Small Styles)'/>";
}
else
{
print "<link id='maincss' rel='stylesheet' type='text/css' href='http://stuporglue.org/ohyesivegotstyle.css' media='screen' title='Default Styles'/>\n";
print "<script type='text/javascript'> if(screen.width <= 800){ document.getElementById('maincss').href = 'freestyling.css'; } </script>\n";
}
?>
Note that I only print the JavaScript in the default case. This prevents us from changing the CSS stylesheet automatically if they’ve selected one already.
Cookie Setting Code
This is the code I use to set the cookies
<?php
// Check if they have the GET parameter we are expecting
if($_GET['screencookie']){
switch($_GET['screencookie']){
case('normal'):
// Set the normal CSS cookie
setcookie('screensize','normal',time()+60*60*24*30,'/');
break;
case('small'):
// Set the small CSS cookie
setcookie('screensize','small',time()+60*60*24*30,'/');
break;
case('ihatecookies'):
// Remove the cookie
setcookie('screensize','removing',-1,'/');
break;
}
}
//if they're coming from one of my pages already, send them back where they came from.
if(strpos($HTTP_REFERER,'http://stuporglue.org') === 0){
$place = "Location: $HTTP_REFERER";
header($place);
}
else {
// If for some reason they got linked to the change-css.php
// page without already being on the site, send them to the homepage.
header('Location: http://stuporglue.org');
}
?>
