What are you looking at on a web page anyway?

When you look at any web page, you are viewing on your computer screen some content in the form of text, pictures, and maybe some animation and video. The format of what you are seeing when you look at any specific page is the end result of some designer's or some programmer's intentional decisions to make it that way. Why does it look the way it does and why do most web sites look different from each other?

The bottom line is that there are virtually unlimited tools available for making web pages, and really, virtually no rules that define how a web page should look or behave. In the "techno lingo" there is HTML, XHTML, XML, CSS, ASP, PHP, Javascript, Flash, and more, all of which exploit the inherent power of computers to present information in whatever imaginative way the designer intends. So why is any given web page made the way it is? There seem to be so many different ways that it is done, why select one way versus another? There is no one answer to this question, there are many factors involved. The world wide web is wide open, and there is no real "standard" for how to design and produce a web page.

A web page is not the same as a printed page

Everyone is familiar with the idea of reading a book or a magazine. These methods of delivery rely on the printed page; and when the authors are developing the page layouts, the text, the pictures, and so forth, they are doing it with the knowledge that when they are done and it goes to final print, everyone who uses their product will have the same viewing experience. Every page of the book or magazine will look identical to every person that reads it, no matter where they are. This situation is not true of a web page, and this is probably the major cause of all of the stress, debate, argument, etc. over the "right" way to make a web page. If your goal is to design a web page that will look the same to everyone who views it, you will have a difficult time because of these reasons:

• Your users can have a huge variety of monitor sizes (or screen resolutions if you prefer): 640x480, 800x600, 1024x768, 1920 x 1200 and many more. Because a web browser by default wants to "fill up" whatever space is available, things will tend to look different on the different sizes.
• There are different web browsers that may display a given page differently: Internet Explorer, Chrome, Firefox, Netscape, Safari, etc.
• The user may configure their browser in different ways, which then affects the page viewing area: add-on toolbars like Google or Yahoo, sidebars for favorite links, the text size they select, etc.
• The user may just decide to resize the browser window to suit their fancy, which in many cases changes the page being displayed.
• Users may be use mobile devices to view your web pages, such as tablet computers (iPad) and smart phones. These have even different screen sizes and some of them are quite small.

 

There are just some of the reasons that it is very difficult to design a page that will look the same to all viewers, such as the printed page would. In the "early days" of the internet, there were a lot of designers who came from the print world who did not want to accept this limitation. This lead to all sorts of workarounds, including the use of tables for layouts, the so-called single-pixel gif trick, designs "best viewed at 1024x768 resolution" and more. This also lead to the "design versus usability" debate, that still continues today to a degree (Try a search on "design versus usability" for more information, or try a search on "jakob nielsen" to see usability viewpoints or "david siegel" for design viewpoints).

As the web and the tools to support it have evolved, there are certainly different methods that can be used to "force" a design that will look the same, or close to it, to the majority of users. But this inevitably involves "non-standard" programming, extra coding, and more work. In recent years there has been a trend to produce web pages with more consistent and standardized structure, particularly for business-oriented sites. The introduction of the new HTML5 coding for web pages offers the opportunity to produce well-structured web page designs that are also pleasing to the eye without having to use extra coding (like JavaScript) and graphics (like unnecessary images or Flash files for buttons).

Good design principles still apply

The basics of good design have been around for a long time and still apply in the medium of the internet. That is, if you want to have web pages that are not only informative but easy to read and nice to look at too. This may be part of the argument between the designers and the usability proponents: often, usability is considered to be the complete final solution with no regard to design whatsoever, resulting in web pages that are "usable" but maybe also "ugly". Maybe it is possible to mix the two together and create usable web pages that also follow sound design principles! The use of HTML 5 offers more possibilities to produce "nice-looking" web pages while staying with clean and fast-loading code for the pages.

The "sort of standard" web page size

The big question is ""what size should the web pages be?". Generally when we discuss the size of the web page, we focus on the width. If the width is set to a defined size, then the length of the page will be determined by how much content you put in it. There will be a certain amount of content at the top of the web page that will be visible to pretty much everyone when the web page is loaded. Then, depending on the size of each user's display device and the length of the content in the page, there can be some information that is not visible, or "below the fold" as they say. In order to see this information, the user needs to use the scroll bar to go downward. Fortunately, this "affordance" is an interaction that is pretty much universally understood so you are fairly safe to assume that the user will scroll downward to see the information below the fold. Of course, this will always assume that whatever you have written will be of enough interest for them to keep reading. On the internet, CONTENT IS KING.

If you set the width of your web page wider than the display of a given user, then they also will have to scroll horizontally. Horizontal scroll bars aren't all that great for a user experience so that is best avoided if possible. You can do a search on "web page size" and see a gazallion discussions about how big to make a web page. There isn't any correct rule for this. You have to take a shot at it based on current best practices. For example, this particular web page has been defined to be 960 pixels wide. This is a fairly common range nowadays. It will fit comfortably within a display that is 1024 pixels wide. While there are a lot of users who now have monitors bigger than the old standby 1024 x 768, it is still a width limit to think about for a lot of users and also for laptop and netbook users. 960 pixels is also a fairly roomy-feeling width to put content into so this size is a good compromise.

Note that some of the mobile devices have clever browsers that will nicely display web pages even if the web page has been constructed at a width wider than the display. For example, on a Blackberry phone this particular web page will display in full form, along with a magnifier tool for zooming in. On an iPad using Safari, the page will fit the width perfectly, and do so whether you flip it to landscape or portrait mode. This sort of technology is great for web designers because it means that they can produce a single-size web site rather than creating different versions for different devices.

Why doesn't our web page fill up the monitor?

Since I get asked this question multiple times I will answer here once and for all. This is a common question when one of our users views a web page on a high-resolution monitor, such as 1600 to 1920 pixels wide. In this case yes there will be "blank space" on the left and right side of the page. This is a result of an intentional design decision to make the page at a width suitable for MOST displays WITHOUT having to do horizontal scrolling. An unavoidable result of this is that there will be extra space when it is viewed on the bigger displays. But it is not something you should obsess about, this is a commonly-accepted practice at this time. Check out the web sites of companies who spend MILLIONS of dollars on their web sites and you will see the same effect: Microsoft, Dell, Ebay, Apple, Toyota, and many many other.

Use a web page design strategy that is suitable to your site

The overall strategy of your web site will help determine what kind of layout strategy you should use.But there is always something to be said for simplicity, and if you can achieve pages with good designs simple and effective HTML structure you can save time, and time = money.

back to top