Websites that make their customers work to read them are not the best way to get business. Miniscule fonts, text in colors that make it hard to see against the background color, and lines that are piled on top of each other are problems, but they're easy to correct. Let's take a look at five easy fixes:
1. Format your text/fonts using CSS. Cascading Style Sheets (CSS) are the standard now - use one style sheet and control how text looks on your entire site. Make a change to the style sheet and your whole site is updated. It makes updating your website a lot easier.
2. Make the font size big enough to read. Consider your audience. Even if they are a group of teenage boys looking for new motorbikes, it's never a good idea to use really small fonts. It doesn't have to be huge, but up to a point, larger type is better. 12-pt Verdana is better than 8-pt Verdana.
3. Make the text contrast with its background. The more contrast, the better especially for people with a disability. Black-on-white or white-on-black are examples of the highest contrast you can get. Use colors if you like, but if you squint at the page and your text basically vanishes, there's not enough contrast.
4. Give the lines room to breathe. Try not to stack lines on top of each other. If people struggle to read it they will just give up. Use the line-spacing directive in CSS and give it some padding; I'll often set line-spacing to 140% of the height of a typical line.
5. Break text up into chunks. No matter how good a writer you are, people don't want to read endless pages of text. Break it up by using headlines that reflect the subject of the paragraph(s) to follow so people can scan down to the parts that really interest them, or use bulleted lists to change the pace of the writing and slow down the scanning.
And finally (not one of the 5 Easy Ways to Improve Legibility but still quite important) check your spelling. While on the surface it may seem like a minimal issue it simply makes you look like you don't care enough to get it right. Use that ubiquitous spellcheck tool wherever you can.
Making your website's content more legible is easy. It doesn't take a lot of time, mainly common sense. The payoff will be text that's more readable, customers that stick around long enough to get your message, and improved credibility with your visitors.
Monday, 5 October 2009
Monday, 21 April 2008
IMAGES IN WEB PAGES – When to use GIF, JPEG or PNG
There are three image formats widely used in web pages: GIF, JPEG and PNG. You need to choose the right format for your website images so that they will look good and still be a reasonable size.
Remember that web pages need to be about 70k or less (images and all) so that your pages download fast – this keeps your site visitors from falling asleep.
Points to remember:
JPEG
Use JPEG to save photographs.
JPEG cannot have transparent backgrounds.
JPEG is not good at preserving exact colors – don’t use them for logos or text.
GIF
Use GIF to save images that have sharp lines (like text) and solid colors.
Examples:
A solid red square
A typical corporate logo
Use GIF to save images that need to have a transparent background.
GIF was invented for creating screen graphics – don’t use GIF for images that you want to print on paper because they will look crappy.
PNG
Use PNG if you want to have images with blended (fades smoothly), transparent backgrounds.
Use PNG if you need to create print ready high-resolution graphics.
THEORY AND COMMENTS
ABOUT JPEG
Having plenty of time to spare because they were unable to get any dates, a bunch a nerd-photographers invented the JPEG – a method of compressing/packaging photographs in a digital format. JPEG is able to compress images by dumping unneeded image information – this makes JPEG a ‘lossy’ image format.
Because of this, with each generation that an image is saved as a JPEG, the quality gets lower since image information is getting lost with each cycle. As the quality of the image drops (information lost), the image starts to look worse and worse.
Don’t get me wrong; JPEG is still a great format for photographic images (widely used in high-end digital cameras like the Canon Digital Rebel,) you just need to know how to use them properly.
ABOUT GIF
GIF was designed for screen graphics in the day when modems were really slow. As such, they are very limited and can only support up to 256 colors.
GIF has a very simple one-color transparency, or as some people would describe it: an ‘on/off’ type of transparency. But, they are small in size and do a great job with images that have sharp lines … as I listed above.
ABOUT PNG
PNG was designed with the web in mind and is (by far) the most flexible graphic format ready for web use. The only problem is, that images saved as PNG always seem to be larger than their GIF or JPEG counter part. As such, most web designers just use GIF or JPEG.
PNG can do nifty things like contain gamma-correction information that automatically corrects the brightness of an image in different operating systems.
PNG has that smooth transparency I mentioned – graphic designers would recognize this as a 16 bit alpha channel. What that means, is that every pixel in a PNG can be semi-opaque to whatever degree you want.
PNG images come out larger because graphic design programs (Photoshop, Corel Photo Paint et cetera) are actually doing a bad job in creating PNG images. Maybe one day, they will get their act together and we can then all take advantage of PNG
Remember that web pages need to be about 70k or less (images and all) so that your pages download fast – this keeps your site visitors from falling asleep.
Points to remember:
JPEG
Use JPEG to save photographs.
JPEG cannot have transparent backgrounds.
JPEG is not good at preserving exact colors – don’t use them for logos or text.
GIF
Use GIF to save images that have sharp lines (like text) and solid colors.
Examples:
A solid red square
A typical corporate logo
Use GIF to save images that need to have a transparent background.
GIF was invented for creating screen graphics – don’t use GIF for images that you want to print on paper because they will look crappy.
PNG
Use PNG if you want to have images with blended (fades smoothly), transparent backgrounds.
Use PNG if you need to create print ready high-resolution graphics.
THEORY AND COMMENTS
ABOUT JPEG
Having plenty of time to spare because they were unable to get any dates, a bunch a nerd-photographers invented the JPEG – a method of compressing/packaging photographs in a digital format. JPEG is able to compress images by dumping unneeded image information – this makes JPEG a ‘lossy’ image format.
Because of this, with each generation that an image is saved as a JPEG, the quality gets lower since image information is getting lost with each cycle. As the quality of the image drops (information lost), the image starts to look worse and worse.
Don’t get me wrong; JPEG is still a great format for photographic images (widely used in high-end digital cameras like the Canon Digital Rebel,) you just need to know how to use them properly.
ABOUT GIF
GIF was designed for screen graphics in the day when modems were really slow. As such, they are very limited and can only support up to 256 colors.
GIF has a very simple one-color transparency, or as some people would describe it: an ‘on/off’ type of transparency. But, they are small in size and do a great job with images that have sharp lines … as I listed above.
ABOUT PNG
PNG was designed with the web in mind and is (by far) the most flexible graphic format ready for web use. The only problem is, that images saved as PNG always seem to be larger than their GIF or JPEG counter part. As such, most web designers just use GIF or JPEG.
PNG can do nifty things like contain gamma-correction information that automatically corrects the brightness of an image in different operating systems.
PNG has that smooth transparency I mentioned – graphic designers would recognize this as a 16 bit alpha channel. What that means, is that every pixel in a PNG can be semi-opaque to whatever degree you want.
PNG images come out larger because graphic design programs (Photoshop, Corel Photo Paint et cetera) are actually doing a bad job in creating PNG images. Maybe one day, they will get their act together and we can then all take advantage of PNG
Sunday, 30 December 2007
Lite Web Design
Don't Make Them Wait
01-13-2000 by Scott Pamatat of DesignMore.com
I have noticed that many web sites are trying to portray themselves as if they were a TV network. They put top-notch graphics and sound into their web page. What these companies are missing is that their visitors are not watching TV. This works fine for those with broadband high speed connections. The fact is, most are viewing your web site on a screen that is between 15 and 19 inches wide, can only see 216 colors, and can only download at 28.8 kb per second.
What does all this mean?
You as a web site owner, designer, CEO, or any one who has control over a web site should follow a simple rule. Are you ready? Here is the rule: make sure you are on a 28.8 connection; type in the URL for your web page; hit enter, and hold your breath. If you needed to gasp for air before the page was fully down loaded you really need to cut down on the size of the page. I'm sure some of you can hold your breath for a long time. So I will give you all a suggestion that your web page should be no larger then 50K. I would shoot for less than 30K. The number one visited web site home page is under 21k. That's right, Yahoo's home page is only 20k. This might seem like very little but you really can do a lot within that size.
How can I get it under 50K? 30K?
First, all your graphic images should be as small as possible. Try to get them smaller than 4k. Going up to 6k is reasonable. When designing a graphic for the web site keep in mind the number of colors being used. I know, as a graphic designer, it was hard for me to go from millions of color to only 216. Yes, 216 is the number of colors you have on a web safe color pallet. Use solid colors when designing your image. PhotoShop has made the gradient such a popular tool. It looks good to fade things in and out. I always see a background border made up of this gradient. I always right click on that image to see the size. The 8k-12k is not worth the space. The problem with the gradient is it uses many colors and dithering. Both take up big time K. The more color you have in an image the bigger it's going to be.
Use design more, graphics less. For a web page to be successful it needs to download quickly and look good. Here is the dilemma download quick or look good? Instead of designing graphics and taking pictures and turning them into jpgs to make your web page look good, try using color schemes. Use cell colors to make boarders. Use the negative space on your web site. What is not there is just as important as what is there. Remember sometimes less is more. When in doubt think of a typical visitor coming to your web page. Would that extra graphic sell them or keep them coming back again and again. If the answer is yes, by all means keep it. If the answer is "well maybe" or "it just looks good there", yank it. Viewers will appreciate not waiting more then they have to. The web is here to make our life easier not to sit in front of a screen waiting for heavy web pages to download.
01-13-2000 by Scott Pamatat of DesignMore.com
I have noticed that many web sites are trying to portray themselves as if they were a TV network. They put top-notch graphics and sound into their web page. What these companies are missing is that their visitors are not watching TV. This works fine for those with broadband high speed connections. The fact is, most are viewing your web site on a screen that is between 15 and 19 inches wide, can only see 216 colors, and can only download at 28.8 kb per second.
What does all this mean?
You as a web site owner, designer, CEO, or any one who has control over a web site should follow a simple rule. Are you ready? Here is the rule: make sure you are on a 28.8 connection; type in the URL for your web page; hit enter, and hold your breath. If you needed to gasp for air before the page was fully down loaded you really need to cut down on the size of the page. I'm sure some of you can hold your breath for a long time. So I will give you all a suggestion that your web page should be no larger then 50K. I would shoot for less than 30K. The number one visited web site home page is under 21k. That's right, Yahoo's home page is only 20k. This might seem like very little but you really can do a lot within that size.
How can I get it under 50K? 30K?
First, all your graphic images should be as small as possible. Try to get them smaller than 4k. Going up to 6k is reasonable. When designing a graphic for the web site keep in mind the number of colors being used. I know, as a graphic designer, it was hard for me to go from millions of color to only 216. Yes, 216 is the number of colors you have on a web safe color pallet. Use solid colors when designing your image. PhotoShop has made the gradient such a popular tool. It looks good to fade things in and out. I always see a background border made up of this gradient. I always right click on that image to see the size. The 8k-12k is not worth the space. The problem with the gradient is it uses many colors and dithering. Both take up big time K. The more color you have in an image the bigger it's going to be.
Use design more, graphics less. For a web page to be successful it needs to download quickly and look good. Here is the dilemma download quick or look good? Instead of designing graphics and taking pictures and turning them into jpgs to make your web page look good, try using color schemes. Use cell colors to make boarders. Use the negative space on your web site. What is not there is just as important as what is there. Remember sometimes less is more. When in doubt think of a typical visitor coming to your web page. Would that extra graphic sell them or keep them coming back again and again. If the answer is yes, by all means keep it. If the answer is "well maybe" or "it just looks good there", yank it. Viewers will appreciate not waiting more then they have to. The web is here to make our life easier not to sit in front of a screen waiting for heavy web pages to download.
Sunday, 5 August 2007
web design - site structure
Good web design requires a solid site architecture based on the site's goals and target audience established in a project brief. The deliverables from this phase most often are:
1. Content Outline
2. Site Diagram
3. Wireframes
These three deliverables are dependent on each other and need to be completed sequentially.
Content Outline
Working closely with your clients, create a list of all existing content. Brainstorm content that needs to be created for the site. Review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. Try to plan for the future and how the site content might need to grow as this will inevitably happen. Next, group your content into categories. As you categorise your content, considering getting user feedback through a card sort. Once your categories are established, create an outline of your content and review it with your target audience for accuracy.
Site Diagram
Take your final content outline and create a sitemap or site diagram. A site diagram is a visual representation of your content outline and site structure. You can use Excel, Visio or Smartdraw to create your site diagram.
Wireframes
A wireframe is a non-graphical layout of a web page. It is a simple drawing of the blocks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site.
Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer.
Contact Carnival Media Group to design your website today!
1. Content Outline
2. Site Diagram
3. Wireframes
These three deliverables are dependent on each other and need to be completed sequentially.
Content Outline
Working closely with your clients, create a list of all existing content. Brainstorm content that needs to be created for the site. Review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. Try to plan for the future and how the site content might need to grow as this will inevitably happen. Next, group your content into categories. As you categorise your content, considering getting user feedback through a card sort. Once your categories are established, create an outline of your content and review it with your target audience for accuracy.
Site Diagram
Take your final content outline and create a sitemap or site diagram. A site diagram is a visual representation of your content outline and site structure. You can use Excel, Visio or Smartdraw to create your site diagram.
Wireframes
A wireframe is a non-graphical layout of a web page. It is a simple drawing of the blocks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site.
Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer.
Contact Carnival Media Group to design your website today!
Tuesday, 17 July 2007
website or web site?
From AskOxford.com:
Question:
How should the term 'website' be written in official documents and on the web? Should it be website or web site, and should there be a capital W?
Answer:
It always takes a little time for new words to settle to a standardized form. Our most recent dictionary, the revised 11th edition of the Concise Oxford Dictionary, published in July 2004, shows website as the standard form, and future dictionaries will reflect this.
We recommend capital initials for Internet, World Wide Web, the Web, but not for individual sites.
Question:
How should the term 'website' be written in official documents and on the web? Should it be website or web site, and should there be a capital W?
Answer:
It always takes a little time for new words to settle to a standardized form. Our most recent dictionary, the revised 11th edition of the Concise Oxford Dictionary, published in July 2004, shows website as the standard form, and future dictionaries will reflect this.
We recommend capital initials for Internet, World Wide Web, the Web, but not for individual sites.
Saturday, 7 July 2007
Your web site should be easy to read
The most important rule in web design is that your web site should be easy to read. What does this mean? You should choose your text and background colors very carefully. You don't want to use backgrounds that obscure your text or use colors that are hard to read. Dark-colored text on a light-colored background is easier to read than light-colored text on a dark-colored background.
You also don't want to set your text size too small (hard to read) or too large (it will appear to shout at your visitors). All capitalized letters give the appearance of shouting at your visitors.
Keep the alignment of your main text to the left, not centered. Center-aligned text is best used in headlines. You want your visitors to be comfortable with what they are reading, and most text (in the West) is left aligned.
You also don't want to set your text size too small (hard to read) or too large (it will appear to shout at your visitors). All capitalized letters give the appearance of shouting at your visitors.
Keep the alignment of your main text to the left, not centered. Center-aligned text is best used in headlines. You want your visitors to be comfortable with what they are reading, and most text (in the West) is left aligned.
Tuesday, 19 June 2007
Pay now or pay later
Usability isn't necessarily a new term, but when it comes to how users interact with the Web, it takes on a whole new meaning. Web usability is evolving as we learn more and more about how our users interact with our online information, how they retrieve it and use it, how they want to move on our site, what they anticipate and what they expect within the realm of their experience.
The term 'usability' has historically involved testing how users actually get on a system and use it. With Web usability, I prefer to take it one step further and think of it in terms of how a user gets on a Web page and a) anticipates how to interact with it and b) actually interacts with it. This anticipation is what we need to test for along with use; it's the intuition and the logic involved in the Web experience that differentiates Web usability from other types of usability. Failing to rethink our approach to usability predisposes us to either success or failure—I don't know about you, but I prefer the success path. Web users are a fickle group; let's face it, if you don't anticipate what they want, give them what they want, how they want it and when they want it, you can forget the bookmark; they're not returning.
Think of Web usability as a 'pay now or pay later' proposition. If you don't check in with users early in the development process, you run the risk that you won't meet their needs when you launch the site. When you realize their needs haven't been met, you have to go back and rethink your whole approach, rehire the web developers and get them refocused on the project so they can redevelop the site. The terms, 'rethink', 'rehire', 'refocus' and 'redevelop' should be conjuring up visions of dollar signs for you, not to mention the fact that your brand, image and credibility were damaged in the process of launching a site users weren't able to use.
Testing for usability is a choice, not a requirement, and it is often the first step in the development process that management will scratch if time is running short. The next time you approach your web project, consider using the web usability strategy I developed to understand the scope of testing usability, how you could easily administer a test session, who you should test and what you want to test for. It may be less burdensome than you think!
The term 'usability' has historically involved testing how users actually get on a system and use it. With Web usability, I prefer to take it one step further and think of it in terms of how a user gets on a Web page and a) anticipates how to interact with it and b) actually interacts with it. This anticipation is what we need to test for along with use; it's the intuition and the logic involved in the Web experience that differentiates Web usability from other types of usability. Failing to rethink our approach to usability predisposes us to either success or failure—I don't know about you, but I prefer the success path. Web users are a fickle group; let's face it, if you don't anticipate what they want, give them what they want, how they want it and when they want it, you can forget the bookmark; they're not returning.
Think of Web usability as a 'pay now or pay later' proposition. If you don't check in with users early in the development process, you run the risk that you won't meet their needs when you launch the site. When you realize their needs haven't been met, you have to go back and rethink your whole approach, rehire the web developers and get them refocused on the project so they can redevelop the site. The terms, 'rethink', 'rehire', 'refocus' and 'redevelop' should be conjuring up visions of dollar signs for you, not to mention the fact that your brand, image and credibility were damaged in the process of launching a site users weren't able to use.
Testing for usability is a choice, not a requirement, and it is often the first step in the development process that management will scratch if time is running short. The next time you approach your web project, consider using the web usability strategy I developed to understand the scope of testing usability, how you could easily administer a test session, who you should test and what you want to test for. It may be less burdensome than you think!
Subscribe to:
Posts (Atom)