Blog

Why It Looks Like That: Constraints in Web Design

March 4, 2009

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 web site 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.

Posted by Matt Gardner at 10:46 PMTracker Pixel for Entry

Comments

This is a fabulous post!!  Thank you so much for explaining it all in such a straight forward way.
I can’t wait for the next post on layout, font, and interaction. 
Thanks!

By Kelly from Chicago on Mar 5, 2009

Concisely explained - a great post and especially useful for clients. Thank you!

By Jeanette Pham from Milwaukee on Mar 8, 2009

Matt,
This is a great post that beautifully clarifies a lot of questions.  Good job!

By Donna from Florida on Mar 11, 2009

I agree with that blog.

But you can detail about programming a web site. Even that there are standard. Most web sites are programmed for Google and lacks of originality and web design. (Sorry I’m a fan of flash site)

smile

...

By Joel from Quebec on Mar 12, 2009

You do a great job at pointing out the limitations that all us web designers deal with.  Standards make our lives easeir sometimes, but you lose some element of control.  It is a very interesting and complex trade off.

Between monitors, browsers, and all the other factors, it is quite a challenge to “frame” the user experience as you will.

Thanks again!

By Forex from USA on May 5, 2009

I agree with your post here that what we see on one screen may look different if resolution is changed or a different browser is used to view the same page.  Unfortunately these are the hurdles of web development and can not be standardized at this time.  Great and informative post. Thanks for sharing.

By Robert from Toronto on May 22, 2009

Another contraint that is often hard for clients to stomach is when you tell them that the font they’d like to use isn’t “web safe” and therefore can’t be used. @font-face and flash based typography methods have gone some way to alleviate this, although I would still count typography as one of the major constraints in web design.

By Web Design Sheffield from Sheffield, England on Sep 14, 2010

That?s a superb post by Matt. The article has simply described all the facts and limitations that most of the designers and developer usually face. I am certainly looking forward for something more informative on fonts, color schemes and user interaction. The post has usefully cleared a lot of queries that rose previously in my mind.

By Jordan III on Nov 27, 2010

Add Your Comment

Please enter the word you see in the image below:


From the Blog

  • Click to fill out the Hop Studios Quote Request Form



 

Recent Blog Posts

RSS Feed


Archives