Web Designers get better results with stylesheets by learning them as a design technique in their own right, rather than blundering around with the idea that they're meant as a replacement for mis-used tables and/or invisible gifs and/or HTML3.2 etc.
Stylesheets are better for proposing presentation, because in principle they do no harm when their suggestions are inappropriate. If the stylesheet causes a problem in a particular situation, then the user can intervene: that's part of the design concept for CSS.
Stylesheets are, at least temporarily, worse because of the dreadful implementations that are out there, necessitating extra care in design - but it's getting better all the time, and one can shield obsolete implementations from the more risky parts of the CSS by various techniques.
The problem with table layout is that you're stuck with it even in situations where it makes no sense (think accessibility, in all its senses). Where, on the other hand, tables are used to express an actual relationship between the cell contents ("tabular data", to put it crudely) then they are doing their proper job in HTML.
June 6, 2008
Table vs CSS
Why should I use CSS layouts over tables?
Very simple, tables are for structuring tabular data, not for presenting visual layout. Cascading stylesheets are superior precisely for the reason that they don't (by design) affect the accessibility of the content and functionality on a page. HTML-as-visual-layouting language is deprecated, and browser support can be expected to get worse (which is better). CSS is intended, among other things, to solve the problem of general page layout that tables have been misused for in the past.
Besides, what's the alternative to CSS? Using table-layouted HTML3.2 pages will never guarantee everybody gets a nice rendering out of it. Quite the opposite -- it might result in a meaningless rendering in many situations.
With CSS positioning each element is a container which can be styled and positioned correctly. Because CSS is separate from the content in being defined in an external stylesheet, it is possible to switch off the presentation in user-agents where the presentation layer inhibits access to the information and content. The content then gracefully degrades to a completely usable and accessible browser default styling. The same cannot be said of tables.
CSS is optional, by design. The site may look plain on browsers which don't implement it, but at least (if the site is designed right) it will still work, in the sense of giving the reader full access to the information content. Since access to information always a higher priority than presenting it in a predefined style, this allows a larger audience to visit.
The browsers which don't implement CSS at all (e.g Lynx) will come to no harm and need no special attention, beyond normal good practices of web design. This is a significant cost saving in both development and testing cycles.
Tables are designed for presenting tabular data, layouts which use tables may make sense to the surfer using a visual browser, but often the underlying structure of the HTML, the document flow, does not linearise well. Thus when the page is viewed on devices that aren't visual browsers running on a PC (e.g. PDA's, mobile phones, voice browsers etc) the content does not make sense.
What makes tables a bad choice is that when used, it is impossible to differentiate reliably which table actually structures tabular data and which is being misused for layout. This effectively prohibits the use of tables in a semantic sense. Since the web is heading toward a human and computer based information environment, tables based layout dole out a large amount of damage for no advantage. There is also a Web Content Accessibility (WCA) component to this. Screen readers and specialized Web page rendering devices used by People with Disabilities often do not render layout table information satisfactorily.
Very simple, tables are for structuring tabular data, not for presenting visual layout. Cascading stylesheets are superior precisely for the reason that they don't (by design) affect the accessibility of the content and functionality on a page. HTML-as-visual-layouting language is deprecated, and browser support can be expected to get worse (which is better). CSS is intended, among other things, to solve the problem of general page layout that tables have been misused for in the past.
Besides, what's the alternative to CSS? Using table-layouted HTML3.2 pages will never guarantee everybody gets a nice rendering out of it. Quite the opposite -- it might result in a meaningless rendering in many situations.
With CSS positioning each element is a container which can be styled and positioned correctly. Because CSS is separate from the content in being defined in an external stylesheet, it is possible to switch off the presentation in user-agents where the presentation layer inhibits access to the information and content. The content then gracefully degrades to a completely usable and accessible browser default styling. The same cannot be said of tables.
CSS is optional, by design. The site may look plain on browsers which don't implement it, but at least (if the site is designed right) it will still work, in the sense of giving the reader full access to the information content. Since access to information always a higher priority than presenting it in a predefined style, this allows a larger audience to visit.
The browsers which don't implement CSS at all (e.g Lynx) will come to no harm and need no special attention, beyond normal good practices of web design. This is a significant cost saving in both development and testing cycles.
Tables are designed for presenting tabular data, layouts which use tables may make sense to the surfer using a visual browser, but often the underlying structure of the HTML, the document flow, does not linearise well. Thus when the page is viewed on devices that aren't visual browsers running on a PC (e.g. PDA's, mobile phones, voice browsers etc) the content does not make sense.
What makes tables a bad choice is that when used, it is impossible to differentiate reliably which table actually structures tabular data and which is being misused for layout. This effectively prohibits the use of tables in a semantic sense. Since the web is heading toward a human and computer based information environment, tables based layout dole out a large amount of damage for no advantage. There is also a Web Content Accessibility (WCA) component to this. Screen readers and specialized Web page rendering devices used by People with Disabilities often do not render layout table information satisfactorily.
June 5, 2008
Optimization of JPEG images
- The image compression techniques have their origin in the necessity of reducing the size of the file used to store the image, witch is huge when compared to storing text (a 800x600 24 bit color uncompressed image needs 1440000 bytes or 1.37 MB). One of the most popular formats is JPEG (which uses files with JPG or JPEG extensions), which can achieve compression ratios of 10:1 with almost no perceived loss of image quality.
Depending of the program you use for saving JPEG images, there are available some options for adjusting the compression of the image. In this article I'll try to explain how to adjust that options and optimize the ratio between image quality and file size. It's important take into account that some images are more suitable than others for JPEG compression (see flat images compression below). - Basic compression
optionsThe two basic options that are almost always present in every "Save JPEG" dialog are the compression/quality of the image, and the standard/optimized/progressive formats.
Both compression and quality refers to the same parameter but one is the inverse of the other (e.g. 35% compression is equal to 65% quality), depending of your program choice you'll find either. The more compression, the lesser image quality. The proper setting for this parameter depends of the image quality or file size you need/want to obtain, getting the best ratios with 50%-85% of image quality (15%-50% compression).
The standard (baseline) and optimized (baseline optimized) settings provides the same image quality but the optimized format provides a 2%-8% reduction of the image file size, so there is no reason for not use always this setting when not using the progressive format. The progressive format also provides the same quality, but offers an alternate method of displaying the image while it is downloaded, at the cost of a slightly increase in the file size (more details about progressive encoding). - Advanced options
Apart from that options, some programs like Corel PhotoPaint, Paint Shop Pro and IrfanView (this one is freeware) allow choosing the type of image subsampling, also called downsampling. The subsampling ratios according to the spec are 4:4:4 (no subsampling), 4:2:2 (standard subsampling) and 4:1:1. Adobe Photoshop also contemplates this option but it's adjusted automatically depending on the quality level selected: it applies subsampling for Medium and Low levels and uses no subsampling for Maximum and High (more details about subsampling/downsampling).
While the standard subsampling is usually adequate for most images, providing an adequate ratio between image quality and file size, there are some situations in which using no subsampling (4:4:4) provides a perceptible increase in the image quality, even if you use a higher compression ratio in order to maintain the file size. There most notable cases are when the image contains some portions with fine details, like text over an uniform background, and images that contain almost-flat colors.
June 4, 2008
Mistakes in Web Design
Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.
Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.)
1. Bad Search
Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody. A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.
Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.
2. PDF Files for Online Reading
Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts. Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.
PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.
> Detailed discussion of why PDF is bad for online reading
3. Not Changing the Color of Visited Links
A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past. Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.
> Usability implications of changing link colors
> Guidelines for showing links
4. Non-Scannable Text
A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read. Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:
5. Fixed Font Size
CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40. Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.
6. Page Titles With Low Search Engine Visibility
Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need. The page title is contained within the HTML title tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.
Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."
For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.
Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.
7. Anything That Looks Like an Advertisement
Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.) Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.
Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:
banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).
8. Violating Design Conventions
Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good. The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.
Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."
This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.
9. Opening New Browser Windows
Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.
Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.
10. Not Answering Users' Questions
Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish -- maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for. Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.
The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.
Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.
Enjoy!
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.
Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.)
1. Bad Search
Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody. A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.
Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.
2. PDF Files for Online Reading
Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts. Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.
PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.
> Detailed discussion of why PDF is bad for online reading
3. Not Changing the Color of Visited Links
A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past. Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.
> Usability implications of changing link colors
> Guidelines for showing links
4. Non-Scannable Text
A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read. Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:
- subheads
- bulleted lists
- highlighted keywords
- short paragraphs
- the inverted pyramid
- a simple writing style, and de-fluffed language devoid of marketese.
5. Fixed Font Size
CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40. Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.
6. Page Titles With Low Search Engine Visibility
Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need. The page title is contained within the HTML title tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.
Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."
For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.
Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.
7. Anything That Looks Like an Advertisement
Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.) Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.
Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:
banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).
8. Violating Design Conventions
Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good. The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.
Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."
This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.
9. Opening New Browser Windows
Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.
Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.
10. Not Answering Users' Questions
Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish -- maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for. Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.
The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.
Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.
Enjoy!
June 3, 2008
Print vs Web Design
When some people turn on their computer, they actually think they're seeing a printed page on their screen. They then assign print strategies to a web layout. But many of the rules of print simply don't apply to the web, so the end result is usually a mess, and the original promotional message of the business lost.
Resolution
GIFs and JPEGs
Fonts
Typography
Plug-ins
Navigation
Colors
Computer monitors
- Resolution
- GIFs and JPEGs
- Fonts
- Typography
- Plug-ins
- Navigation
- Colors
- Computer monitors
Resolution
- Resolution is the image quality measured in terms of how many pixels make up your image. It is commonly referred to as "ppi" (pixels per inch). Because your images are to be viewed on a screen, all web graphics should be no larger than 72 ppi. Anything higher has no improved effect, and only creates longer download times.
GIFs and JPEGs
- GIF is short for Graphics Interchange Format. GIF's advantages are that it is supported by practically all web browsers, can include transparent backgrounds, supports interlacing (providing a low-resolution preview of the graphic to the viewer while it downloads), and can be used as an image map (allowing the viewer to click on the graphic as they would a regular link to another site).
- JPEG is short for Joint Photographers Experts Group. JPEG is superior in rendering color and detail found in photographs or graphics using blends, gradients, and other tonal variations.
- Sometimes it's obvious that a graphic on someone's web page was saved in the wrong file format. Photos may look too grainy, or flat-color images may look too fuzzy. When selecting GIF or JPEG for your graphics conversion, it is important to consider the type of image you will be working with. Use a GIF format if your graphic consists primarily of line art or flat colors without gradients. JPEG-converted graphics are best for photographs or images with fine tonal variations in colors, such as images with gradients or metallic images. Choosing the right file format is not only important for the quality, but for keeping your image's file size to a minimum.
Fonts
- For your audience to view the same font (an unique set of type characters) you see on your own screen, they must also have the same font installed on their own individual computers. Otherwise, their browser will instead show a substitute font, which designers have no control over.
- For this reason, be more conservative with your choice of fonts. Display only what the general public already has on their computers. If you're looking for a contemporary look, use standard fonts like Helvetica or Arial. If you're looking for a more sophisticated look, use fonts like Times or Verdana. If you absolutely MUST have everybody see your creative font, then convert the selected text into a graphic. Use this option sparingly, though, since it will increase your web pages' download time.
Typography
- The harsh reality of web design is that you simply don't have the kind of control over how your text appears. It is far less sophisticated than what is possible in print media. The choice of font, the exact size of the text, where the text breaks, and how the text reads - all are aspects of typography. And on a web page, they are mostly determined by the web browser, not by the creator or owner of a web site.
- At a screen resolution of only 72 dpi, text is nowhere near as sharp on screen as it is on a print publication. For this reason, be very careful not to overload your readers with too much text and allow for some open white space.
Plug-ins
- There are several mistakes designers can make when it comes to adding plug-ins (a software extension that provides added capabilities to the browser) to their site. They may:
- create a link to the plug-in creator's web page but the visitor is no longer at the original company's web site.
- Some solutions to keeping your visitors' attention: code the link to the plug-in so that when it is clicked a new browser window will appear, rather than losing your web page. Better yet, try to obtain direct access to the plug-ins FTP site so that people will only see your web site while the plug-in downloads.
Navigation
- The web is a much more interactive experience than a print publication. The viewer controls the sequence of web pages and jumps from page to page using links. As a result, the web designer must organize the content on the web pages very differently from the way one might organize them from a brochure, newsletter, or book. Remember, your web site is not a document your audience can physically hold. You can't assume the viewer has seen previous pages or will proceed to subsequent pages on your web site. Each page must be able to stand on its own. Your audience always needs to be reminded where they are and how to get to anywhere else on your site.
Colors
- The advantage of color on the web is that it's cheap. Technically, you can produce millions of colors on your screen, provided your monitor and video display are a decent quality. The disadvantage is that there are actually only 216 web-safe colors - meaning that these are the only colors that appear the same on all monitors and operating systems without dithering, be they PCs or Macs.
- It is important to understand that colors from a print piece cannot be effortlessly transferred to a computer screen. Many print variables - paper thickness, texture, color, absorbency; inks - are not available for a computer monitor - a convex glass surface producing a screen flicker to project the image you see.
- Also, too much color on a web page can be distracting and counterproductive. The most successful strategy is to use color sparingly. Adding too many colorful items can create the visual equivalent of noise. Instead, leave room for white space. This will help your visitors focus on the items that are highlighted in color - a perfect opportunity to showcase your promotional message.
Computer monitors
- A web site that looks clean on a monitor with millions of colors could look dithered and jagged on a monitor with only 256 colors. Colors that appear bright and sharp on your screen may appear dark and dull on another's. A web page that appears well suited for a 17" or larger screen will appear cut-off on a smaller one. Even the operating system can affect your monitor display. Macintosh computers, for instance, have a higher gamma display, and web pages show up brighter on them than on Wintel PCs.
- Before making any design revisions, first view your web page on several computers. If you only have one computer, go somewhere off-site and view it. See how the web site reads under poor lighting as well. All of these factors can be observed before reaching an acceptable medium.
Subscribe to:
Posts (Atom)