When we create a web site, we usually decide the look of it and the way the visitor is actually experiencing it. Sometimes we might need to create different look for the same site, especially if we are dealing with specific groups of users. I'm going to explain in a simple way how to let the user choose the style of the web page according to its needs. To do so, we are going to use CSS and ASP.
An explanationI understand that you might be confused about it all. Let me explain...
Suppose we have the task of developing a web site for a company with low vision people as main market target.
It is clear that we need to help that group of possible users in surfing our site. For that reason, we might create a link somewhere on the page, so that the user can choose the way the page looks.
It's a conditional statement, where the appropriate stylesheet is included to the page, according to the choice made.
I understand that the whole thing is not very complicated for experienced coder, however sometimes simple things are overlooked and we look for complicated solutions while basic answers are just there, not considered.
Anyway, let's see how to do it.
The CSSFirst of all, just build two stylesheets. The two .css files will be used in two different situations. We can name one file "normal.css" and the second "lowvison.css".
The two files will contain different CSS rules according to the needs of the web visitor. For example the font size: in a normal situation the rule could be:
In the lowvision.css file, the same rule could be:
font: 12px Arial,Helvetica,Sans-serif;
The things we should take care of could be: the contrast between text and background, the links appearance (bigger and more visible), and so on, for other rules.
font: 130% Arial,Helvetica,Sans-serif;
The ASPIn the main page, where the user can choose between the two styles, we first gather the relevant information. The CSSStyle variable is the one we use to determine what style we are going to use:
In the <head> of the document we insert a conditional statement:
CSSStyle = Request.QueryString("CS")
Ok. Now we need a little bit of HTML.
If CSSStyle ="lv" then
<link rel="stylesheet" href="lowvision.css" type="text/css">
<link rel="stylesheet" href="normal.css" type="text/css">
The HTMLWe need to insert a simple link that will trigger the lowvision.css file. According to the above code, when first loaded, the site uses the normal.css file. Now we need something to let the user choose the low vision style. Just a small link... as you may have guessed:
Select type of display:<br>
The above code refers to a homepage named "index.asp".
<a href="index.asp?CS=lv">Low Vision</a>
I know that the above example is very (very) basic. However, as I said before, sometimes we look for complicated solutions while simpler answer are just there waiting to be found.
This is an example. If you like, you might make it more complicated by using more than two stylesheets. Or maybe you might like to use a different way of letting the user switch between styles...
Have a nice day and keep following the web thought.