Blog

A traditional print project has one chief constraint: money. You can apply more to get what you want: larger paper sizes, more or brighter colors, or more exciting art. The balance between what a client can afford and what the technology can provide directly shapes the project’s parameters (if all aesthetic concerns are equal).

A web page, however, because of its distribution method, is shaped by forces outside of a web developer’s or client’s control. Some of these limits are created by international standards, others by technological limits or even just established conventions. For someone new to creating web pages it can be a confusing obstacle course with hidden problems.

Hop Studios often is in the position of explaining why the Internet works the way it does to clients. The Internet, unlike other earlier media forms, is largely shaped by extrinsic forces.  Answers to the why question, as any parent knows, are an ever-expanding snowball that often result in the classic “Because I said so!” or “That’s just the way it is!” This rarely works on clients. Therefore, I have tried to break down a few of the basic elements that shape the way that websites look and behave.

Page Size

Nobody sees the web in exactly the same way. Not in a philosophical, “everyone is special” sense, in a very practical sense. One of the basic differences is the hardware we use to look at it - our monitors. The resolution of your monitor has a direct correlation with the amount of information that can be displayed on it. Older or smaller monitors (and let’s ignore, briefly, the very small screens of mobile devices) have a lower resolution. Because of the convention that websites should only expand lengthwise, monitor size directly effects the width of websites. Many websites are centered in the browser window, creating unused areas to the left and right of the main content on larger monitors.

The smallest screen resolution standard that is designed for in 2009, is 800 x 600 pixels, roughly 4% of users browse the web at that resolution. This format is generally considered the lowest recognized standard. 800 by 600 is quite small and well designed pages for this size should allow for the space used by the frame of the browser and scroll bar. So the maximum space you can design for is roughly 740 pixels wide. This assumes that 800x600 users will browse the web with their browser window maximized.

In the last few years the adoption of larger monitors with better resolutions has moved the majority of users to the next larger resolution, 1024 by 768. About 36% of users browse at this resolution. Allowing for the browser frame gives you a conservative width of 980 pixels. This is the size most contemporary webpages are built to display at.

The bottom line for clients: As you increase width you decrease accessibility. Most clients will have no problem cutting out 1 or 2 percent of web traffic, but if your site has an unique audience, like older users or mobile devices, your design should account for that. Hop Studios uses site usage statistics and research to help us decide on the best size for you.

Browser

For designers, this is an old, ugly chestnut, for web users this is the forgotten variable. Your browser has a huge and somewhat hidden impact on the structure of the Internet. Why? because different browsers render code differently.

There are many browsers in the world but the most popular are Firefox, Safari, and Internet Explorer. Making your website look the same in all the of the browsers is called cross-browser testing, or cross-browser compatibility.

There are two schools of thought for dealing with cross-browser compatibility, the first is complete parity, where your code renders the same across all browsers. This creates a strange situation where the capabilities of your site are decided by the weakest player. You have to accept the limits of the least technologically advanced browser. Which in this case is Internet Explorer. Explorer is less capable then most other modern browsers, and in the case of IE 6, has fundamental errors in the way it renders HTML and CSS.

The second method for web development is tolerable degradation, this means that a level of disparity is allowed between browsers, as long as they degrade gracefully and the differences are accounted for. This method can include more design and programming time but is probably the more commonly used. A variety of hacks, work-arounds and secondary style-sheets make it possible to target specific browsers.

There are fundamental differences that designers have less control over. While it is possible to style some of the elements of the browser window frame, this is seen as an outdated avenue for expression and is generally unfashionable. Today the browser frame is not considered as part of the design canvas. The default appearance for HTML elements like forms, input fields and buttons are set by each browser. Unless overridden, these have a lot of visual variety across all browsers.

The bottom line for clients: Your site may look different in different browsers, and other people might not see exactly what you are seeing. Hop Studios tests the sites we create in all of the major browsers. It is also important to realize that if you personally use an outdated or eccentric browser, it might not be in your best interest to optimize your site for what you see.

Color

Many users don’t recognize this as a limit, but only 16,777,216 unique colors are possible on the web, less then 50% of the color spectrum that is visible to humans. Computer monitors use the additive RGB color model. An additive model of color uses light and “adds up to white” when all colors are combined in equal amounts. We are generally more familiar with the subtractive system used in painting, printing and pigments. Subtractive systems, like CMYK, remove color to get back to the white of the page or substratum.

Based on the Young-Helmholtz theory RGB mimics how humans see, and occupies a gamut (all of the achievable colors in a given color reproduction system) in the center of our visible spectrum.

On a more practical level, there is significant color drift between Mac and PC screen settings. Macs closely mimic the printed page and display colors as brighter, they can show colors that have very low saturation. As designers often favor apple products this can mean that subtle colors are harder to co-ordinate across computers.

Finally, monitors display colors differently based on calibration, age and technology. Color display can be tweaked and fine tuned, but most users don’t calibrate their monitors. Older Cathode ray tube (CRT) monitors display color differently them modern liquid crystal displays (LCD). Individual image files may also have built in color profiles that are recognized in some browsers and not in others, causing images to display differently.

The bottom line for clients: Sadly, color is almost impossible to match perfectly across all computers and monitors. If you have specific company colors that you have to match, it’s a good idea to optimize them for the highest proportion of your audience, and (it pains me to say it) recognize that you can’t control everything!

Whew, well that’s a start! In my next post i will attempt to cover the problems with type (aka fonts), file size, layout, and interaction. We have just barely scratched the surface here; the web is a very complex non-place.