A resolution to the worst of nightmares

Learn limitations, push it to the limit, but always keep an eye on the visitors

THERE IS one nightmare that will wake website designers wake up in a cold sweat screaming for their mothers. It's not browser incompatibility or browser safe colours, these issues are tricky but they have a certain reliability in their inconsistencies. No. The nightmare of which I speak is the dreaded screen resolution.

THERE IS one nightmare that will wake website designers wake up in a cold sweat screaming for their mothers. It's not browser incompatibility or browser safe colours, these issues are tricky but they have a certain reliability in their inconsistencies. No. The nightmare of which I speak is the dreaded screen resolution.

The problem is that there is no way of knowing what screen resolution (and what size display) the design will be viewed on. Too big, and lower resolutions will miss parts of it. Too small, and you waste valuable screen space. Learn the limitations of screen resolution, push them to the limit, but keep an eye on your audience.

What's it all about?

The "size" of screen is not so much limited by the physical dimensions of the display area but by the resolution at which that screen can display. Think of your screen as a grid made of tiny dots, called pixels. The more the screen can display, the higher the resolution.

But a monitor's resolution is not set in stone. Most can display at a variety of different resolutions, allowing the user to set it for their reading comfort. The physical dimension of the screen may be 15 inches but it might be able to display 640x480 or 800x600 pixels. A 21-inch monitor could also display 640x480 or 800x600 pixels but on a bigger monitor everything will look larger than with the same resolution on the smaller monitor. The higher the resolution, the more pixels get packed into the physical space accessible on screen so the larger monitor has more space and the size of each pixel is larger.

The resolutions that a computer screen can display depends on the type of monitor and the graphics capabilities.

Live screen space

For most web designers, height is not as vital as width. It's good to get the important information "above the fold" (the visible area of the screen when the page first loads), but vertical scrolling is okay but horizontal scrolling is taboo. Before beginning any web design decide which screen resolution the web page should fit comfortably (640x480 is the lowest common denominator and would ensure the widest audience). So, 640 pixels is the maximum width of the screen at that resolution, but this does not include the space taken up by the operating system and the browser window itself. The area you can use to display your site in the browser window is "the live space".

The Statistics

The visitor to your site can control the dimensions by resizing the browser window any way they want (unless you use JavaScript to force a width and/ or height). However, they are limited by the screen resolution which their monitor is set to.

StatMarket has been monitoring websites around the world and collecting data on screen resolutions (www.statmarket.com). It found just 13 per cent on 640x480, 54 per cent on 800x600 and 26 per cent on 1024x768. Seven per cent is either higher resolution monitors or lower resolution monitors, including PDAs and mobile phones.

StatMarket says that its data is based on a virtually random sampling of more than 32.5 million website users worldwide. Not only is 640x480 only a small part of the market, StatMarket says it has fallen almost 30 per cent in the past year, a downward trend that is likely to continue.

The writer is the author of 'DHTML For the World Wide Web'. If you have questions, you can find an archive of this column at www.webbedenvironments.com or send e-mails to: jason@webbedenvironments.com

Latest stories from i100
Have you tried new the Independent Digital Edition apps?

Day In a Page

Greece debt crisis: EU 'family' needs to forgive rather than punish an impoverished state

EU 'family' needs to forgive rather than punish an impoverished state

An outbreak of malaria in Greece four years ago helps us understand the crisis, says Robert Fisk
Gaza, a year on from Operation Protective Edge: The traumatised kibbutz on Israel's front line, still recovering from last summer's war with Hamas

Gaza, a year on from Operation Protective Edge

The traumatised kibbutz on Israel's front line, still recovering from last summer's war with Hamas
How to survive electrical storms: What are the chances of being hit by lightning?

Heavy weather

What are the chances of being hit by lightning?
World Bodypainting Festival 2015: Bizarre and brilliant photos celebrate 'the body as art'

World Bodypainting Festival 2015

Bizarre and brilliant photos celebrate 'the body as art'
alt-j: A private jet, a Mercury Prize and Latitude headliners

Don't call us nerds

Craig Mclean meets alt-j - the math-folk act who are flying high
How to find gold: The Californian badlands, digging out crevasses and sifting sludge

How to find gold

Steve Boggan finds himself in the Californian badlands, digging out crevasses and sifting sludge
Singing accents: From Herman's Hermits and David Bowie to Alesha Dixon

Not born in the USA

Lay off Alesha Dixon: songs sound better in US accents, even our national anthem
10 best balsamic vinegars

10 best balsamic vinegars

Drizzle it over salad, enjoy it with ciabatta, marinate vegetables, or use it to add depth to a sauce - this versatile staple is a cook's best friend
Wimbledon 2015: Brief glimpses of the old Venus but Williams sisters' epic wars belong to history

Brief glimpses of the old Venus but Williams sisters' epic wars belong to history

Serena dispatched her elder sister 6-4, 6-3 in eight minutes more than an hour
Greece says 'No': A night of huge celebrations in Athens as voters decisively back Tsipras and his anti-austerity stance in historic referendum

Greece referendum

Greeks say 'No' to austerity and plunge Europe into crisis
Ten years after the 7/7 terror attacks, is Britain an altered state?

7/7 bombings anniversary

Ten years after the terror attacks, is Britain an altered state?
Beautiful evening dresses are some of the loveliest Donatella has created

Versace haute couture review

Beautiful evening dresses are some of the loveliest Donatella has ever created
No hope and no jobs, so Gaza's young risk their lives, climb the fence and run for it

No hope and no jobs in Gaza

So the young risk their lives and run for it
Fashion apps: Retailers roll together shopping and social networking for mobile customers

Fashion apps

Retailers roll together shopping and social networking for mobile customers
The Greek referendum exposes a gaping hole at the heart of the European Union – its distinct lack of any genuine popular legitimacy

Gaping hole at the heart of the European Union

Treatment of Greece has shown up a lack of genuine legitimacy