NetMedian.com

Tuesday, February 01, 2005

Make your Web Site Design fluid

In my last article I had briefly touched on your user experience. In that article, I had explained how your web site needs to be fluid to accommodate different browsers and screen resolutions. In today’s day and age, this is more of a norm. Yes, wouldn’t it be nice if everyone used just one browser and surfed on just one resolution.

A quick aside. What is resolution? Resolution (on a general level) to me defiens the fineness or clarity of your user’s screen. If you want a more deeper meaning of this term then I suggest going to Google.com and type “define:Screen resolution” (without the quotes). Although screen resolutions are increasing these days, the most common resolution is 800x600 pixels. It is still not uncommon to find users browsing with screen resolutions of 640x480 pixels.

Now, here’s the problem. If a web designer designs your web site for a screen resolution of 640 x 480 pixels, then anyone visiting your web site with a higher resolution monitor will see your pages as being too small. The text and graphics will be too small. Complicate it even further by now viewing your web site on even higher resolutions (which is getting more popular today). Now your web site will look really really small. Not something you want to show your visitors.

Flip this around and say your web designer builds your web pages in very high resolution. What will happen if a user with a lower resolution monitor visits your site? You guessed right. It will look too big on their monitors. Now they will have to not only scroll vertically (down) but horizontally (across) as well.

Can we prevent this? Well, the issue today is that most browsers attempt to build on standards, but don’t follow them to a T. As a result quirks exist.

Enter CSS. CSS is really an acronym for Cascading Style Sheets. CSS has been around for a long time but is gaining popularity now as the answer to most of the problems illustrated above. CSS has the power to separate layout from formatting. Let me explain this with an example.

Let’s say we were building a web site that had three columns and text present in all three columns. We could very easily go ahead and build a table that specified the three columns. So, for example, our code may look like this:


<table>
<tr>
<td>My first column></td>
<td>My second column></td>
<td>My third column></td>
</tr>
</table>


Now, if we wanted to put in some more columns, we would have to go and insert the necessary code for those columns. Now let’s take this a step further. If we wanted to colour the first column as blue, the second column as grey, and the third with red (bear with me here), we would generally go to each of the column definitions and specify the colours for each column.

Now, there’s nothing wrong in doing this. In fact, if you look around a lot of web sites actually use this style of development to build your web page. So, is there a problem with this? Well, here’s what I see. Let’s say, you needed to have three more columns in the first column, two more columns in the second and one more in the third. Now all of a sudden, your code starts looking pretty ugly.

To complicate this, let’s say we wanted to add more colour to each of these columns. The most common way of doing this, is to go to each of the column definitions (<td>) and literally spell out the definitions. So, you may have your code looking like this:

<blockquote>
<td nowrap height="130" valign="top">
<b><i>
<font face="Arial Narrow" color="#336699" size="2">
<span style="font-size:14;line-height:17px;">
Here’s my text
</span>
</font>
</i></b>
</td>
</blockquote>

Let’s take a closer look at the code above. The code that starts with <font face… tells us that we’re specifying formatting options for our text “Here’s my text”. Now, if we wanted to use the same formatting options for other text we would have no choice but to copy this formatting and apply it to other text. If you continue doing this, you will see and now you have mixed your formatting right in with your content. I think you’re beginning to see where I’m getting with this. You’re right. This becomes extremely difficult to maintain. Now let’s say no to change the colour of your text throughout your document. You will have to go through each occurrence in your file for the text “#336699” and replace it with your new colour definition. That’s not all. If you want to change to a different font, you have to go and change that too. Now do you see how complicated this can get? Talk about a maintenance nightmare.

In my next article, I will discuss the basics of CSS and how it can be applied to your web page.
Till next time.

Thank you for visiting NetMedian.com - Please visit again.