comgt
cee oh em gee tee - "commgitt"
Login to access.
User: pw: ?
Web Browsers Design Master Servers Statistics

 
Web Design
Introduction & Overview

Quick Design Tips (per July 2009):

  1. Keep web pages between 20 kB to 300 kB. As general rule - audio, video, higher-res photos/graphics will of course be larger but should always be optimized and compressed as much as possible.
  2. Screen size 1024x768 or larger is used by more than 90% of users.
  3. Consider the Audience - Intended Visitors, including capabilties of their equipment to access the Internet (hardware, software, access speed)

Table of Content:

 

 

 

Audience - Indented Visitors

Indended audience - who do you want to visit you web site?

What capabilites do they have? Connecting from cell phones/on the road, dial-up, broadband, ... IT or not-IT savvy, and so on.

Technical aspects to consider when designing web sites include visitors platforms - operating systems, browsers, screen sizes, plug-ins for handling audio, video, Adobe Flash, ... More information in Statistics.

Why? Reasons to have a web site - information, marketing, sales, support, ...

 

 

Size DOES Matter

Size relate to different objectives in regard to web design:

Size of Web Pages:

Smaller is better. For fastest possibly loading of pages onto visitor's screen.

More in And So Does Speed.

Screen Size - Resolution:

The "right" size is best. To optimize visitors experiencies, one need to consider likely monitor sizes.

Examples of screen sizes for different types of users, visitors:

Screen Size Need to (Should) Design For Example of Users
  • Small screens

Cell phones/PDAs. (E.g.) Apple iPhone (320x480), Nokia E71 (320x240), RIM Blackberrys (240x260, 480x320, 480x360,...), Sony Ericsson S710a (240x320).

Road warriors of all sorts who want to get/have access at any times. Increasingly, also non - road-warriors are using iPhones, iPod Touch, and other smaller devices to browse the Internet.

  • Average
1024x768 (XGA) - per June 2009 data indicate around 90% has monitors (Internet use) with this resolution, or higher.

General, personal- as well as business- use.

  • Large screens:

Could consider page designs using possibly even larger screens like 1920x1200 (WUXGA), common for 24" monitors, and 2560x1600 (WQXGA), 30" monitors.

Photographers, designers, architects, and other creative people.

From What's a Good Web Page Size, Web Builder's Cafe:

When a visitor to your Website is viewing your pages through a browser, you want them to be able to see the entire width of the page without having to scroll left and right.  People don't mind scrolling up and down, but they can get aggravated when they also have to scroll left and right.

As a Web designer, you want to design your pages to work with as many browsers and screen resolutions as possible, but you have to find a "happy middle ground" since there are a variety of screen resolutions and sizes in use.

As you scan the Web, you will see that Websites use different page widths.
  • Many popular sites are set up to display a full 1024 pixel page width with Graphics and Content.
  • Others will even go beyond 1024 pixels.
  • Some sites keep their pages to a narrower 750 to 800 pixel width.
  • Still, others sites will hold their Graphics and Content within the 750 to 800 pixel width, but will place advertisements beyond the 800 pixel width on the right hand side of the page.
  • You will even find a few sites that still use a page width of 640 pixels. 

Now days, most all computer users have a monitor that can display a resolution of 800 x 600 pixels or higher and a majority of them have 1024x768 or higher resolutions.  There are very few people who still use a 640 x 480 resolution screen.

Many Web designers design for a screen width of around 750 pixels.  This page size will fit on an 800 x 600 screen and allows a little extra room for borders.  This width will also work for all higher resolutions as there will just be a little more space between the edge of the Web page and the edge of the screen.

There is no "right or wrong" answer to the question.  You'll have to decide which size you want to design for, but the 750 to 800 pixel width page will fit onto the most screens without users having to scroll left and right, although a wider 1024 pixel page allows for more information.

I recommend that you don't go wider than the 1024 width and don't go narrower than the 750 pixel width.  The pages for Web Builder's Cafe are constructed at a width of 900 pixels.

Additional readings, references:

 

 

And So Does Speed

Standard guidelines for ideal Web response times are:

[Retrieved 2009-07-31 from www.useit.com/papers/responsetime.html, via en.wikipedia.org/wiki/World_Wide_Web#Speed_issues.

 

 

Size and Speed

So, when designing web sites how big files should we allow? One thing is sure, if visitors have to wait they quickly turn away and go elsewhere.

The standard for many years was to keep page sizes below 35 kB.

In 2009, the recommendations are try keeping pages in the range of 20 kB to around 300 kB due to technological changes including (e.g.):

The table below give a few examples of how much time different types of documents, size of information, will take to download (view in web browser). Note that the number are theoretical and should be viewed as minimum time it will take to load. Figures doesn't consider inefficiencies and interuptions etc in the communications, slow servers, slow clients, ...

    Time to Download  
    Dialup Slow/Low[1]
Broadband
3G [2]
(US avg)
Common
Broadband
Higher
Broadband
Few in the
US have...
< Type of internet access
    56kbps 256kbps 1.25 Mbps 2.5 Mbps 5 Mbps 10 Mbps < Nominal speed
Example of Information Size 7kB/s 32 kB/s 156 kB/s 312 kB/s 625 kB/s 1250 kB/s < Normalized[3]
Letter/A4 - size page of plain text 2kB 0.3 s 0.06 0.01 < < <  
Low-end in multi-media era (2009) 20 kB 2.9 s 0.62 0.12 0.06 0.03 0.016  
The standard for many years, max 35 kB 5 s 1.1 0.22 0.11 0.06 0.03  
Web page with size of 100 kB 14.3 s 3.1 0.64 0.32 0.16 0.08  
  -"- 200 kB 28.6 s 6.2 1.28 0.64 0.32 0.16  
  -"- (High-end in multi-media era) 300 kB 43 s 9.4 1.9 0.96 0.48 0.24  
Time to download different type of media:
2-minute Flash video 5 MB 12 min 2.6 min 32 s 16 s 8 s 4 s (E.g. YouTube)
5-minute video podcast 20 MB 47 min 10 min 2 min 1 min 32 s 16 s  
30-minute audio podcast 28 MB >1 hr 15 min 3 min 1.5 m 45 s 22 s  
Legend Green Fast enough to provide good or decent user expecience.
  Yellow Around 1 second is the highest acceptable response time.
  Orange Couple of seconds or more - people start to become annoyed and turn away.
  Red 10 second and more - unacceptable response time, user experience is interrupted, user is likely to leave the site or system.

Using 8 bits per byte. And decimal (power of 10) SI prefixes - 1 k (kilo) = 1000, 1 M (Mega) = 1000 0000, and 1 Giga (G) = 1000 000 000.
1000 Mega (M) = 1000 0000 kilo (k))

[1] Broadband is often defined as at least 256 kbps; in cellular networks, the 2.5G or 2.75G generations can provide speeds in this area
(256 kbps)
[2] 1.2 Mbps from blogs.zdnet.com/BTL/?p=11580 (Jan 22, 2009); using 1.25 as half of next speed up (in this comparison).
Note that this is often lower depending on where you are - limited availability of 3G outside of major cities in the US.
[3] Normalized into kilobytes per second. Theoretical, not actual. (E.g. a 56 kbps dial-up modem could provide throughput of 3 kByte/s
up to 22 kByte/s varying on details in underlying standards, including hardware compression.)

More information on bandwidths for different devices, communications technologies, in en.wikipedia.org/wiki/List_of_device_bandwidths.

ddd

ight corners of the table without adding additional markup. Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. Please consider the example below:

CompanyQ1Q2Q3Q4
The above data were fictional and made up, please do not sue me 
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3