Do reuse images
Once images are loaded they are stored in cache.
If you use the same image in several webpages the image will be
loaded the second time in a breeze. It is necessary to have the
image in the same location. Also be sure to use exactly the same
filename. Even if a browser can handle differences in uppercase
and lowercase, your browsercache can not.
Don't reference images from other sites
If you use images from another site (i.e. an image archive ) do copy
them to your own site.
Looking up other servers to get the images would introduce
overhead and an extended load-time.
Do provide size information
If you use large images, videos etc., give an indication of the size
before the actual transfer begins.
Don't use large textual images
Avoid creating images of large pieces of text. It gives you more
possibilities but it costs valuable bandwidth.
If you do need textual images be sure to reduce the number of
colors.
Don't use wordprocessors
Don't use wordprocessors to write HTML. They really mess it up.
It's not uncommon for a site to double or triple in size because tags
are added unnecessarily by a wordprocessor.
100 Do's and Don'ts in Web Design SpiderPro
Presenting Text
Don't use blink
The tag
Web solution, Websites help, Java help, C & C# Language help
Sunday, November 18, 2007
27 Dos Web Design
27 Dos Web Design
General information
You're allowed to distribute this ebook as long as you leave the orginal pdf-fileintact and you don't charge anything for it.I hope you'll find this styleguide usefulJan Kampherbeek101 Do's and Don'ts in Web Design SpiderPro-3-IndexGeneral information
2Index
3Content : 18 do's and don'ts 4Navigation: 16 do's and don'ts 8Design: 8 do's and don'ts 11Bandwidth: 9 do's and don'ts 13Presenting Text: 16 do's and don'ts 15Images and colors: 10 do's and don'ts 19Compatibility: 13 do's and don'ts 21General: 9 do's and don'ts 24A concluding don't 26About SpiderPro 27Disclaimer 27Release History 27100 Do's and Don'ts in Web Design SpiderPro-
Do know your audience
It's important to know your audience.If you write for a site that sells toys you'll use other words, colors,images etc. compared to a site for online banking.Write and design with your visitors in mind. Don't get tempted towrite for yourself.Do write about the subjectWrite about the subject.Saying: This page is about breeding goldfish talks about the page.Instead, start right away with the subject. Breeding goldfish is apopular hobby....Do use short sentencesUse short sentences.The World Wide Web is fast. Your visitors want to get your info in asnap. So read and reread your text. Then cut out as manyunnecessary words as possible.Do use correct spellingOK, this one will turn against me....Use correct English or whatever language your site is written in. Asa standard routine use a spelling checker but don't rely completelyon it. Human proof reading is necessary.This can be difficult - especially if you're not native speakingEnglish like your Dutch speaking author of this eBook.100 Do's and Don'ts in Web Design SpiderPro-
Don't use meaningless words
Do you have a cool site with hot subjects?Or a hot site with cool subjects?On some hype-sensitive sites these kind of words might be useful but onmost sites you'd better refrain from meaningless words.Don't use jargonAvoid jargon.That goes for Internet jargon but also for jargon for any othersubject.Only if your site is focused on a selective group of specialistsjargon might make sense.Don't write technicalDon't write technical. Your visitors don't care how you created yoursite and that you prefer Perl over TCL/TK (or the other wayaround).Instead write about your subject.Do use the first screenBe sure to put important text on the first part of your page, the partthat will show up first on a screen.Do present the issues right awayYour visitor wants to know immediately what she can find on yoursite. Keep that in mind when designing your site.Present the important issue(s) of your site on the first page.100 Do's and Don'ts in Web Design SpiderPro-
Do use a descriptive title
The text for the tag
27 Dos web Design
Do comment on your links
Add value to your links by annotating them.
You visited the linked site otherwise you wouldn't publish the link in
the first place. Right? Share your knowledge and add a description.
Do update your pages
Be sure to check your pages on a regular base and to update them
if necessary.
Do show date of update
You update your pages on a regular basis. Don't you?
Make clear to your visitors how recent or (out-)dated your
information is. Provide the date of the last update. And don't forget
to change the date if you change a page...
Do ask for feedback
You can learn from your visitors.
Ask for their feedback and give them an e-mail address to reach
you.
Don't show any page under construction
Don't publish a page that's under construction.
People will hate you if you do.
If the page isn't finished, it's not ready to be published.
In a sense most pages are always under construction because they
are updated (more or less) frequently.
100 Do's and Don'ts in Web Design SpiderPro
Do use explicit addressing
Navigation should be clear. Links like Back, Next, Previous, or
clickable images of arrows, do point in an unclear direction.
What is 'Back'. The page your visitor came from? The preceding
page in your own website?
Make navigation clear by supplying links like Chapter 12. The
history of beekeeping.
Do check your links
OK, it's a cliché. But anyone who surfs the web will agree. Check
your links frequently.
Don't just check them to avoid 404 errors. You might find that an
external link still works but that the content behind it has changed.
Don't change links
Figure out a good addressing scheme and stick to it.
People will create links to your site. Be sure not to break these
links.
Do always supply textual links
Supply textual links. Using only clickable images or image maps
makes your site unusable for anybody that disables images.
Do supply a link to home
In the rare case people get lost in your site, a link to home comes
in handy.
Supply such a link on each page.
Do use navigational aids at the top and the
bottom
Supply navigational aids at the top and the bottom of your page. If
you do, people probably won't need to scroll to navigate.
Do use a table of contents
Do use a table of contents, preferably as a menu. Without it your
visitors will get lost.
Do create a “what's new” page
Returning visitors are interested in the latest additions on your site.
Create a What's new page to supply that info.
Do use short routes
Supply short routes to information. Avoid too many menus and
submenus, instead use larger menus with more items.
People will appreciate it getting to the desired info quickly.
Do keep menu items related
Menu items should be related, don't mix them randomly.
Try to share comparable items in one menu. You can use a larger
menu for more itemgroups if you separate these groups in a clear
way.
Don't link to irrelevant pages
Use only hyperlinks within the context of your page. People will feel
lost if you try to use too many links.
Don't repeat links too often
You shouldn't repeat links in the text. I.e. you have a page about
beekeeping and want to link it to to a page that describes different
kinds of honey. Then don't link every occurrence of the word
honey.
The only exception are links in a menu. You can repeat menulinks,
i.e. on the top and on the bottom of your page.
Don't use ambivalent navigation
Navigation must be clear. Unless you run some kind of
experimental site be sure to avoid experimental buttons that make
visitors have to guess what they mean.
Don't create dead end pages
A dead end page is a page that is linked to by other pages but
itself has no links.
A visitor gets trapped in a dead end page and needs his
backbutton to get away.
Don't use dead end pages.
Don't make prisoners
You can imprison your visitors. I.e. by redirecting them to a page
without taskbars and icons.
But your prisoner will escape eventually and never return.
Don't frame other sites
You can load pages from other sites within a frame of your own
site.
Don't!
It might ruin the look and feel of the framed site. And it gives the
wrong idea that the framed site is a part of your own site.
Load all pages in a full page.
Design
Do use a consistent look and feel
Your site should stand out as a whole. Use the same look and feel
for all the pages at your site. This way your visitors have a sense of
recognition when they visit various pages. Using stylesheets makes
it much easier to maintain the look and feel of numerous pages.
Do use recurring visual elements
Repeat visual elements (images, colors, fonts etc.) on several
pages. This will add to a consistent look and feel.
Don't use dark backgrounds
Dark backgrounds tend to make text less readable. So avoid dark
colors or dark backgroundimages. If you do need them, use a
nonserif font for the text (like Arial, Universe, Helvetica) and be
sure to not to use a small fontsize.
Don't cram your pages
A page with text pushed aside against the border of a table - or an
image - looks awful. Don't cram your pages, use colspan and
borderspan for tables and vspan and hspan for applets and
images.
Don't push your table out of the screen
Tables are very flexible. They're able to get almost anything more
or less visible on a screen.
But by putting large elements in a table cell you might force the
cells to become too large. Thus making horizontal scrolling
necessary.
So limit the number and size of pictures, long words (e.g. long
links), predefined text etc.
Don't overuse frames
Use only a limited number of frames. Always check if the screen
doesn't get crammed if a low resolution screen is used.
Do vertical align the content of table cells
You do you use table cells to get your info on the right position?
Then be sure to align the content vertically.
Don't mix horizontal aligning
Mixing centered text and text that's left aligned makes a mess of
your page.
If you want to center text do it consistently.
Exceptions are centering text of headers or centered text placed in
a border.
100 Do's and Don'ts in Web Design SpiderPro
Do use few colors in your GIF's
Minimize the number of colors in your GIF images.
GIF's can be stored with a maximum of 256 colors. Minimizing the
number of colors to 16, 8 or even 2 dramatically reduces the size of
the GIF-file and therefore improves performance.
Choose as few colors as possible without ruining the image. You
might test both reducing colors with error correction or by selecting
the nearest color.
Do use high compression in JPEG
Improve the performance of your site by reducing the size of your
JPEG-images.
JPEG can be saved with different compression-percentages. A
high compression results in a smaller file size but also in a less
perfect image. Test several compressions for each image you want
to use. For different images the acceptable compressions will
differ.
Do reserve space for images
Generally text arrives more quickly than an image. By reserving
space for an image the browser is able to render the text. A visitor
can start reading right away. Reserving space is done by defining
the attributes vsize and hsize in the tag
Do provide thumbnails for large images
In some cases you do need large pictures that take a while to load.
I.e. if you're running a website on modern art.
In such a case do provide small copies of the original images
(thumbnails) that link to the original ones.
Add value to your links by annotating them.
You visited the linked site otherwise you wouldn't publish the link in
the first place. Right? Share your knowledge and add a description.
Do update your pages
Be sure to check your pages on a regular base and to update them
if necessary.
Do show date of update
You update your pages on a regular basis. Don't you?
Make clear to your visitors how recent or (out-)dated your
information is. Provide the date of the last update. And don't forget
to change the date if you change a page...
Do ask for feedback
You can learn from your visitors.
Ask for their feedback and give them an e-mail address to reach
you.
Don't show any page under construction
Don't publish a page that's under construction.
People will hate you if you do.
If the page isn't finished, it's not ready to be published.
In a sense most pages are always under construction because they
are updated (more or less) frequently.
100 Do's and Don'ts in Web Design SpiderPro
Do use explicit addressing
Navigation should be clear. Links like Back, Next, Previous, or
clickable images of arrows, do point in an unclear direction.
What is 'Back'. The page your visitor came from? The preceding
page in your own website?
Make navigation clear by supplying links like Chapter 12. The
history of beekeeping.
Do check your links
OK, it's a cliché. But anyone who surfs the web will agree. Check
your links frequently.
Don't just check them to avoid 404 errors. You might find that an
external link still works but that the content behind it has changed.
Don't change links
Figure out a good addressing scheme and stick to it.
People will create links to your site. Be sure not to break these
links.
Do always supply textual links
Supply textual links. Using only clickable images or image maps
makes your site unusable for anybody that disables images.
Do supply a link to home
In the rare case people get lost in your site, a link to home comes
in handy.
Supply such a link on each page.
Do use navigational aids at the top and the
bottom
Supply navigational aids at the top and the bottom of your page. If
you do, people probably won't need to scroll to navigate.
Do use a table of contents
Do use a table of contents, preferably as a menu. Without it your
visitors will get lost.
Do create a “what's new” page
Returning visitors are interested in the latest additions on your site.
Create a What's new page to supply that info.
Do use short routes
Supply short routes to information. Avoid too many menus and
submenus, instead use larger menus with more items.
People will appreciate it getting to the desired info quickly.
Do keep menu items related
Menu items should be related, don't mix them randomly.
Try to share comparable items in one menu. You can use a larger
menu for more itemgroups if you separate these groups in a clear
way.
Don't link to irrelevant pages
Use only hyperlinks within the context of your page. People will feel
lost if you try to use too many links.
Don't repeat links too often
You shouldn't repeat links in the text. I.e. you have a page about
beekeeping and want to link it to to a page that describes different
kinds of honey. Then don't link every occurrence of the word
honey.
The only exception are links in a menu. You can repeat menulinks,
i.e. on the top and on the bottom of your page.
Don't use ambivalent navigation
Navigation must be clear. Unless you run some kind of
experimental site be sure to avoid experimental buttons that make
visitors have to guess what they mean.
Don't create dead end pages
A dead end page is a page that is linked to by other pages but
itself has no links.
A visitor gets trapped in a dead end page and needs his
backbutton to get away.
Don't use dead end pages.
Don't make prisoners
You can imprison your visitors. I.e. by redirecting them to a page
without taskbars and icons.
But your prisoner will escape eventually and never return.
Don't frame other sites
You can load pages from other sites within a frame of your own
site.
Don't!
It might ruin the look and feel of the framed site. And it gives the
wrong idea that the framed site is a part of your own site.
Load all pages in a full page.
Design
Do use a consistent look and feel
Your site should stand out as a whole. Use the same look and feel
for all the pages at your site. This way your visitors have a sense of
recognition when they visit various pages. Using stylesheets makes
it much easier to maintain the look and feel of numerous pages.
Do use recurring visual elements
Repeat visual elements (images, colors, fonts etc.) on several
pages. This will add to a consistent look and feel.
Don't use dark backgrounds
Dark backgrounds tend to make text less readable. So avoid dark
colors or dark backgroundimages. If you do need them, use a
nonserif font for the text (like Arial, Universe, Helvetica) and be
sure to not to use a small fontsize.
Don't cram your pages
A page with text pushed aside against the border of a table - or an
image - looks awful. Don't cram your pages, use colspan and
borderspan for tables and vspan and hspan for applets and
images.
Don't push your table out of the screen
Tables are very flexible. They're able to get almost anything more
or less visible on a screen.
But by putting large elements in a table cell you might force the
cells to become too large. Thus making horizontal scrolling
necessary.
So limit the number and size of pictures, long words (e.g. long
links), predefined text etc.
Don't overuse frames
Use only a limited number of frames. Always check if the screen
doesn't get crammed if a low resolution screen is used.
Do vertical align the content of table cells
You do you use table cells to get your info on the right position?
Then be sure to align the content vertically.
Don't mix horizontal aligning
Mixing centered text and text that's left aligned makes a mess of
your page.
If you want to center text do it consistently.
Exceptions are centering text of headers or centered text placed in
a border.
100 Do's and Don'ts in Web Design SpiderPro
Do use few colors in your GIF's
Minimize the number of colors in your GIF images.
GIF's can be stored with a maximum of 256 colors. Minimizing the
number of colors to 16, 8 or even 2 dramatically reduces the size of
the GIF-file and therefore improves performance.
Choose as few colors as possible without ruining the image. You
might test both reducing colors with error correction or by selecting
the nearest color.
Do use high compression in JPEG
Improve the performance of your site by reducing the size of your
JPEG-images.
JPEG can be saved with different compression-percentages. A
high compression results in a smaller file size but also in a less
perfect image. Test several compressions for each image you want
to use. For different images the acceptable compressions will
differ.
Do reserve space for images
Generally text arrives more quickly than an image. By reserving
space for an image the browser is able to render the text. A visitor
can start reading right away. Reserving space is done by defining
the attributes vsize and hsize in the tag
Do provide thumbnails for large images
In some cases you do need large pictures that take a while to load.
I.e. if you're running a website on modern art.
In such a case do provide small copies of the original images
(thumbnails) that link to the original ones.
27 Dos and Don'ts in Web Design
You're allowed to distribute this ebook as long as you leave the orginal pdf-file
intact and you don't charge anything for it.
I hope you'll find this styleguide useful
Jan Kampherbeek
101 Do's and Don'ts in Web Design SpiderPro
intact and you don't charge anything for it.
I hope you'll find this styleguide useful
Jan Kampherbeek
101 Do's and Don'ts in Web Design SpiderPro
Index
General information 2
Index 3
Content : 18 do's and don'ts 4
Navigation: 16 do's and don'ts 8
Design: 8 do's and don'ts 11
Bandwidth: 9 do's and don'ts 13
Presenting Text: 16 do's and don'ts 15
Images and colors: 10 do's and don'ts 19
Compatibility: 13 do's and don'ts 21
General: 9 do's and don'ts 24
A concluding don't 26
About SpiderPro 27
Disclaimer 27
Release History 27
100 Do's and Don'ts in Web Design SpiderPro
Do know your audience
It's important to know your audience.
If you write for a site that sells toys you'll use other words, colors,
images etc. compared to a site for online banking.
Write and design with your visitors in mind. Don't get tempted to
write for yourself.
Do write about the subject
Write about the subject.
Saying: This page is about breeding goldfish talks about the page.
Instead, start right away with the subject. Breeding goldfish is a
popular hobby....
Do use short sentences
Use short sentences.
The World Wide Web is fast. Your visitors want to get your info in a
snap. So read and reread your text. Then cut out as many
unnecessary words as possible.
Do use correct spelling
OK, this one will turn against me....
Use correct English or whatever language your site is written in. As
a standard routine use a spelling checker but don't rely completely
on it. Human proof reading is necessary.
This can be difficult - especially if you're not native speaking
English like your Dutch speaking author of this eBook.
100 Do's and Don'ts in Web Design SpiderPro
Don't use meaningless words
Do you have a cool site with hot subjects?
Or a hot site with cool subjects?
On some hype-sensitive sites these kind of words might be useful but on
most sites you'd better refrain from meaningless words.
Don't use jargon
Avoid jargon.
That goes for Internet jargon but also for jargon for any other
subject.
Only if your site is focused on a selective group of specialists
jargon might make sense.
Don't write technical
Don't write technical. Your visitors don't care how you created your
site and that you prefer Perl over TCL/TK (or the other way
around).
Instead write about your subject.
Do use the first screen
Be sure to put important text on the first part of your page, the part
that will show up first on a screen.
Do present the issues right away
Your visitor wants to know immediately what she can find on your
site. Keep that in mind when designing your site.
Present the important issue(s) of your site on the first page.
100 Do's and Don'ts in Web Design SpiderPro
content
Do use a descriptive title
The text for the tag
Subscribe to:
Posts (Atom)