28 Aug 2008

Website design notes

Filed under: Software and Technology by Hari
Posted at 09:00:25 IST (last updated: 28 Aug 2008 @ 09:00:25 IST)
Just some observations on web design based on my experience with my company's website.
  1. If you want to use a fixed-width header graphic, it's nearly impossible to make a theme which is "free-form" fluid width, that is, scales to any resolution. You have to center the content within the browser for the theme to work well.
  2. If you want to use a fluid-width, free-form theme, you need to design a header logo that merges with a background colour or pattern at one end so that header can stretch to any resolution without appearing odd or broken.
  3. If you mix percentage widths with pixel widths in the style sheets of a single design, you can expect some strange results. For example a hundred percent width specifies just 100% of the current visible browser width, completely ignoring the regions covered by horizontal scrollbars (at least in Firefox). This can lead to strange results at resolutions lower than that which the website was designed for. For example, the 100% regions get cut off at the visible region while the fixed width regions can go into the scrolling region. This typically happens with a fixed width sidebar mixed with a fluid width content area
  4. The CSS attributes max-width, min-width etc. are of very little use in fixing such issues caused by mixing of fixed pixel widths and fluid percentage widths as the problem will either occur at a higher resolution or at a lower resolution.

I believe that until the industry evolves a style-sheet technology can work "intelligently" - that is start accepting dynamically calculated values - the problems of design will remain. The compromise will always be between utilizing the entire browser width while sacrificing a bit of style and utilizing only a portion of it to maintain an elegant, graphics-oriented design.

6 comment(s)

Leave a comment »
  1. Testing my gravatar...

    btb wrote a guest post on Singapore-since you'd been there, awaiting your comments

    Comment by Shrinidhi (visitor) on 28 Aug 2008 @ 17:18:53 IST #
  2. Shrinidhi, I'll take a look at the post. I saw it in my feed-reader but I've not yet read it fully.

    Comment by hari (blog owner) on 28 Aug 2008 @ 22:16:16 IST #
  3. The biggest problem with fluid-width design isn't in the CSS. That can be fixed one way or another. The biggest problem is that not all the browsers behave as intended. IE6 is a perfect example -- fluid-width requires a CSS hack.

    I'm considering dumping my current theme and going for a cleaner, fixed-width theme. I've had nothing BUT problems with the fluid-width design.

    Comment by RT Cunningham (visitor) on 8 Sep 2008 @ 22:14:28 IST #
  4. RT, my point exactly. The interpretation of CSS attributes vary across browsers leading to problems.

    Also if you have a image type header (like the one I use on this site) it's plain impossible to have an attractive fluid width theme which should be obvious to most people, but difficult to explain if not understood.

    Comment by hari (blog owner) on 8 Sep 2008 @ 22:26:53 IST #
  5. If you have a fluid width theme (like mine, for example), you have to tame it sometime (as I have, for example) and specify a maximum width before it gets to be ridiculous. You have to solve the image header problem with creativity, of course.

    Saying all of that, I've never seen why anyone would ever want to read a web page that is too wide anyways. You're working your eyes too hard if they have to go from side to side to far of a distance. Has anyone seen an 18" wide magazine? Of course not! There's a reason for that. :D

    Comment by MrCorey (visitor) on 9 Sep 2008 @ 04:29:24 IST #
  6. MrCorey, yes I agree. That's why I choose a fixed width design because it avoids a lot of potential downfalls of a fluid width theme.

    Also fixed width just looks more professional for a corporate website.

    Comment by hari (blog owner) on 9 Sep 2008 @ 08:09:38 IST #

Leave a comment

First-time comments on this blog are moderated.
Your name*
Email ID*
(wont' be published)
Website
Your comments*
(No HTML allowed)		 :-) :-D :biggrin: :-P ;-) 8-) :-( :mad: |-| :oops: :-/ :-| :roll:
bold italic quote code
Code* captcha Enter the code you see in the image
* required fields