You are here: Home Development HTML HTML: Dress Right - Go Bottomless
HTML: Dress Right - Go Bottomless PDF Print E-mail
User Rating: / 0
PoorBest 
Development - HTML
Written by Rick   
Sunday, 29 June 2008 07:58

Have you ever noticed, while using a style sheet or other method of absolute positioning in HTML, that position 0,0 is the upper left corner. All references to establish width and height assume the page has no predefined right side or bottom. HTML is in fact designed not to have a right border or page bottom. This becomes a primary consideration for web design.

Why worry?

The display resolution has a direct impact on the user experience. Designing a web site with a fixed width of 2048 pixels will leave the majority of your audience unable to view your page without having to scroll right. One needs to create a design that will accommodate as many visitors as possible. Have a look at stats provided by W3Schools to determine the current optimal resolution. At the time of this writing, a site designed to accommodate a 1024 pixel width will cater to 98% of the audience.

Dress Right

Studies suggest, as web designers, we have a limited opportunity to grab a visitors attention. The most important area of most websites, is the portion of the page that is initially displayed in the browser. This is often referred to as "above the fold", it's the area described above, before requiring the visitor to scroll to see more. Not establishing the width of a site leaves the potential to have 2 "folds". Undesirable to say the least.

Utilization of tables to create a fixed width is one way to accomplish the task, albeit old-fashioned. A better approach would to use nested divisions in cascading style sheets by assigning the outer division a max-width and/or min-width property. Calculating the width is a matter of subtracting the browser borders and scroll bar from the desired width (in this case 1024). I believe the actual number is 998 pixels. Typically, I'll add some space on either side of my outer division which creates a "padding" around the area of the screen I use for displaying HTML. I'll usually use 960 to 976 pixels and align the division to the center of the screen.

Go Bottomless

Being bottomless is a natural part of HTML. Don't limit this feature. Take advantage of it!!

Swimming down-stream is way easier than swimming up-stream wouldn't you agree? I've had many clients present me with a request to make a web site look like a print ad. Additionally, they request dynamic content. So the question I ask is where do you want the scroll bar? In it's normal location, at the right edge of the browser window, or should it be in the middle of the page to scroll through dynamic content (an unnatural location for users, also ugly)? By the way: scroll bars inside a web page require special coding for each common browser, and even at that, some browsers don't support all the commands. This creates a coding nightmare and an ugly web page.

Making HTML display a "fixed height" page is not hard. If the content of the site is very limited. If the text will never overflow it's assigned area. If the site is entirely based on Flash. If the site is primarily eye-candy. These would be good reasons to create a "fixed height" page. Even so, we can't anticipate every possible configuration of a users browser. Are they using the browser in full-screen? Do they use multiple task bars? What font size are they using? Inevitably the page ends up with undesirable scroll bars and "blows-out" the bottom anyway.

Further, limiting the height will create a condition where; to relay more information to the customer, extra pages will be required. Now a user has to go to another page, where simply dynamically expanding the page would have sufficed.

Stop fighting it, work with it! Create your web page to grow in length. You'll appreciate this when it's time to add content to a page, work with dynamic content, or simply add new pages. Your visitors are used to the location of the scroll bar, don't make it painful for them by adding more or changing the location. 

In truth most visitors won't bother to scroll down a page anyway. Our chance to sell them or draw them deeper into our site is "above the fold". If you've failed to compel them to want to use the scroll bar, the odds of making a sale are not good anyway. Don't compound the difficulty of retaining visitors by putting scroll bars in an unnatural location. 

Comments (0)
Write comment
Your Contact Details:
Gravatar enabled
Comment:
[b] [i] [u] [url] [quote] [code] [img]   
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):S
:!::?::idea::arrow:
Security
Please input the anti-spam code that you can read in the image.