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 explanation
I 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 CSS
First 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:
font: 12px Arial,Helvetica,Sans-serif;
In the lowvision.css file, the same rule could be:
font: 130% 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.
The ASP
In 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:
<%
Dim CSSStyle
CSSStyle = Request.QueryString("CS")
%>
In the <head> of the document we insert a conditional statement:
<%
If CSSStyle ="lv" then
%>
<link rel="stylesheet" href="lowvision.css" type="text/css">
<%
else
%>
<link rel="stylesheet" href="normal.css" type="text/css">
<%
End IF
%>
Ok. Now we need a little bit of HTML.
The HTML
We 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>
<a href="index.asp?CS=n">Standard</a>
<a href="index.asp?CS=lv">Low Vision</a>
The above code refers to a homepage named "index.asp".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.
0 thoughts:
Post a Comment
Comments are moderated. I apologize if I don't publish comments immediately.
However, I do answer to all the comments.