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
Website Design Tips - Melbourne Australia
The design and layout of your website is the next most important part of building a website. Make a bad choice here and it won't matter how great your content is or how much advertising you do. If your site looks bad no one will visit and those that do won't stay long or buy anything.
Choose your colors carefully and keep in mind that your tastes may not be appealing to your target audience. Try a few different color schemes and ask some of your friends or family for their opinions about them. And remember this term, "white-space". In general, white-space is the cornerstone of good website design. Keep the background areas where your information or products will be displayed white or another light / pale color. Dark or oddly colored backgrounds distract your visitors from your information and also can make it difficult to read. Background images are also a big don't for the same reasons plus they make your pages load more slowly. Colored text should also be used sparingly. Contrast is key, otherwise it can be very difficult to read. Try to use colored text only to emphasize important information. If you choose to use a color other than black throughout your site make sure it is dark.
The name of your website, domain name, or business name should be prominently featured somewhere at or near the top of your pages either within your logo or near it. And it should fit within the typical boundaries of the page. If you make it too big or it contains too many words then it will stretch your pages so wide that most visitors won't be able to see the whole page unless they scroll sideways. Very annoying, and definitely not good website design. More about this later.
The layout is how things are arranged on your pages. There are many different ways to display your content and we'll cover that a bit farther down the page. What we're going to discuss here are the elements that frame your content such as your navigation menu buttons, any graphical accents, logos, etc.
The placement of the navigation buttons or links of a website are usually placed in one of 3 different areas of the page. Across the top of each page or down the left or right side. Regardless of where you choose to put them try to keep the text on the buttons or in the links as short as possible. Anything longer than one or two words will cause that part of your layout to be too wide and crowd your content area.
In general, you can only fit up to 8 buttons (maybe less depending on how much text you use) across the top of your pages and if you choose that layout then how the subpage page links are displayed also may have a limitation. Some layouts with top page primary page buttons will also display subpage links in a second row across the top and others will display them down the left side of the page.
Where your navigation buttons or links appear on your pages should be decided by the number of main or primary pages you will have in your website. Primary pages are the pages organized just below your home page in the structure or diagram of your website.
Navigation buttons down either side of your pages don't run into any limitations due to the endless amount of vertical space on every page. Remember though that the amount of text on the buttons will greatly affect the amount of space for content.
Choose your colors carefully and keep in mind that your tastes may not be appealing to your target audience. Try a few different color schemes and ask some of your friends or family for their opinions about them. And remember this term, "white-space". In general, white-space is the cornerstone of good website design. Keep the background areas where your information or products will be displayed white or another light / pale color. Dark or oddly colored backgrounds distract your visitors from your information and also can make it difficult to read. Background images are also a big don't for the same reasons plus they make your pages load more slowly. Colored text should also be used sparingly. Contrast is key, otherwise it can be very difficult to read. Try to use colored text only to emphasize important information. If you choose to use a color other than black throughout your site make sure it is dark.
The name of your website, domain name, or business name should be prominently featured somewhere at or near the top of your pages either within your logo or near it. And it should fit within the typical boundaries of the page. If you make it too big or it contains too many words then it will stretch your pages so wide that most visitors won't be able to see the whole page unless they scroll sideways. Very annoying, and definitely not good website design. More about this later.
The layout is how things are arranged on your pages. There are many different ways to display your content and we'll cover that a bit farther down the page. What we're going to discuss here are the elements that frame your content such as your navigation menu buttons, any graphical accents, logos, etc.
The placement of the navigation buttons or links of a website are usually placed in one of 3 different areas of the page. Across the top of each page or down the left or right side. Regardless of where you choose to put them try to keep the text on the buttons or in the links as short as possible. Anything longer than one or two words will cause that part of your layout to be too wide and crowd your content area.
In general, you can only fit up to 8 buttons (maybe less depending on how much text you use) across the top of your pages and if you choose that layout then how the subpage page links are displayed also may have a limitation. Some layouts with top page primary page buttons will also display subpage links in a second row across the top and others will display them down the left side of the page.
Where your navigation buttons or links appear on your pages should be decided by the number of main or primary pages you will have in your website. Primary pages are the pages organized just below your home page in the structure or diagram of your website.
Navigation buttons down either side of your pages don't run into any limitations due to the endless amount of vertical space on every page. Remember though that the amount of text on the buttons will greatly affect the amount of space for content.
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.
Subscribe to:
Posts (Atom)
