This document provides guidelines on web design best practices, known as "do's and don'ts." It contains over 100 tips across various categories like content, navigation, design, bandwidth usage, and text presentation. The guidelines recommend using short sentences, correct spelling, descriptive titles, and updating pages regularly. They advise against dark backgrounds, cramming pages, and hiding or misusing links. The goal is to create an easy-to-use site that loads quickly.
Everything Non-SEOs Need to Know about SEOBrightEdge
Listen to SEO Strategist George Freitag go over the primary reasons for SEO-web designer/developer smackdowns. Then, learn how to avoid these frustrations while creating great sites that make both sides happy.
In this presentations you'll learn:
- What the most common conflicts between SEOs and other web folk are.
- How to avoid large technical issues that can hurt your site.
- How you can have an SEO strategy that focuses on actual strategy, rather than fixing problems.
... And most imporantly:
How to keep SEOs from getting all up in your business.
Link bundle available at:
http://portent.co/seo-no
A design talk geared towards designers who are new to the world of web design. I’ll cover items such as: how web design is unique from other kinds of design (such as print), how to leverage research and analytics to create data informed designs, steps to become a proficient web designer and how to choose and work with developers. If there are folks in the room using Illustrator or PSD, I'll show you how to set up Illustrator files for web design and prep files for a developer.
How to get started with blogging and basic principles to writing them. Also a few examples of blogs I have created.
This presentation was done for Coldwell Banker Real Estate of the Mid Atlantic.
Updated Feb. 9, 2014. This PPT is a review of color and fonts as used with HTML5 and CSS. Used in an undergraduate journalism class called Advanced Online Media Production.
Everything Non-SEOs Need to Know about SEOBrightEdge
Listen to SEO Strategist George Freitag go over the primary reasons for SEO-web designer/developer smackdowns. Then, learn how to avoid these frustrations while creating great sites that make both sides happy.
In this presentations you'll learn:
- What the most common conflicts between SEOs and other web folk are.
- How to avoid large technical issues that can hurt your site.
- How you can have an SEO strategy that focuses on actual strategy, rather than fixing problems.
... And most imporantly:
How to keep SEOs from getting all up in your business.
Link bundle available at:
http://portent.co/seo-no
A design talk geared towards designers who are new to the world of web design. I’ll cover items such as: how web design is unique from other kinds of design (such as print), how to leverage research and analytics to create data informed designs, steps to become a proficient web designer and how to choose and work with developers. If there are folks in the room using Illustrator or PSD, I'll show you how to set up Illustrator files for web design and prep files for a developer.
How to get started with blogging and basic principles to writing them. Also a few examples of blogs I have created.
This presentation was done for Coldwell Banker Real Estate of the Mid Atlantic.
Updated Feb. 9, 2014. This PPT is a review of color and fonts as used with HTML5 and CSS. Used in an undergraduate journalism class called Advanced Online Media Production.
Bản gốc mã nguồn wordpress vẫn có nhiều điểm chưa tối ưu tốt cho SEO, tài liệu này sẽ hướng dẫn một số thủ thuật SEO cho wordpress tốt hơn, giúp cải thiện mức độ SEO Onpage cho wordpress.
Making your site printable: WordCamp Buffalo 2013Adrian Roselli
The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts. It should now be easier than ever to respond to a format that has existed since the start of the web – print. I’ll walk through the process for making your responsive sites respond to the format we most often forget.
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
Slides from my presentation at Breaking Development 2012 in Orlando. This deck is not intended to be standalone, and probably made more sense in combination with my talk. At least, I hope so. I understand that video of the talk will be available in the near future on the Breaking Development website.
Introduction to Usability Testing: The DIY Approach - GA, London January 13th...Evgenia (Jenny) Grinblo
The slides from my General Assembly workshop on January 13th, 2013 (https://generalassemb.ly/education/introduction-to-usability-testing-the-diy-approach)
ABOUT THIS WORKSHOP
Usability testing can quickly uncover areas of an interface that frustrate users and hurt business goals but many teams put it off due to budget, time, or training concerns.
This workshops will take you through a do-it-yourself approach to usability testing. We'll cover the basics (benefits, recruiting, and how to plan a test), learn how to facilitate a test to get reliable results, and how to use the testing results to move usability improvements forward. You'll walk away with the tools to hold a complete usability testing right away.
TAKEAWAYS
Learn why and when to hold usability testing
Learn practical tools and methods to overcome time, budget or training concerns that block user testing from happening
Shift the conversation from opinions and hunches to proven usability problems that your team can solve together
Remote UX Research Videos of real people interacting with your brand, regardless of device or location.
68% Rockefeller Corporation of users give up because they think you don’t care about them.
Beware of Multi Level Lesson one
Poorly organized information • Hover tunnels = early collapsing • Inconsistent triggers
Multi Level Navs • Don’t rely on the back button • Labels help • Remember context
Links should look like Lesson two
Navigating through a site shouldn’t be a process of trial and error. Links
Links • Difficult to discern what is or is not a link • Missing click history • Inconsistent link styling in the same view
More payment options Lesson three
UX Archive
Payment options • Optimize existing checkout flows • Implement a virtual wallet • Don’t forget trust
Not all icons are Lesson four
Drag or expand? http://www.exquisitetweets.com/collection/lukew/2919
http://www.exquisitetweets.com/collection/lukew/2919
Icons • Consider context • Use tooltips • Try your designs out with real users
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. ” “ Jakob Nielsen User Advocate and principal of the Nielsen Norman Group
Social security matters Lesson five So does copy!
Social privacy matters Lesson five
Social privacy • Be transparent • Make your privacy policy accessible • Look for serendipitous moments of interaction
Advertising lacks Lesson six
Consistent copy and images • Continue the conversation from ad to landing page • Keep the messages simple • Work with marketing or advertising teams
Categorization is Lesson seven
There’s no perfect way to categorize pages or products (but there’s a right way to do it). Categorization
Focus on building intuitive experiences
A mental model is what the user believes about the system at hand. ” “ Jakob Nielsen User Advocate and principal of the Nielsen Norman Group
Learn from your users • Improve mental models • Add cross-references • Solve for your primary audience(s) • Make sure your search works Categorization
Multi-level navs aren’t user friendly Mega menus and clickable menus help create a better experience for your users. Links should look like links Tried and true link conventions from the early days of the web are still the most effective ways to format your links. Consider more payment options Virtual wallet services are a great way to make checking out easier and more secure. Not all icons are universal Test users for comprehension and use tool tips to describe your most important icons.
10 Most Common Misconceptions About User Experience DesignWhitney Hess
Here's the presentation I gave at Pittsburgh Web Design Day (http://www.webdesignday.com) based on my article on Mashable (http://mashable.com/2009/01/09/user-experience-design/)
Bản gốc mã nguồn wordpress vẫn có nhiều điểm chưa tối ưu tốt cho SEO, tài liệu này sẽ hướng dẫn một số thủ thuật SEO cho wordpress tốt hơn, giúp cải thiện mức độ SEO Onpage cho wordpress.
Making your site printable: WordCamp Buffalo 2013Adrian Roselli
The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts. It should now be easier than ever to respond to a format that has existed since the start of the web – print. I’ll walk through the process for making your responsive sites respond to the format we most often forget.
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
Slides from my presentation at Breaking Development 2012 in Orlando. This deck is not intended to be standalone, and probably made more sense in combination with my talk. At least, I hope so. I understand that video of the talk will be available in the near future on the Breaking Development website.
Introduction to Usability Testing: The DIY Approach - GA, London January 13th...Evgenia (Jenny) Grinblo
The slides from my General Assembly workshop on January 13th, 2013 (https://generalassemb.ly/education/introduction-to-usability-testing-the-diy-approach)
ABOUT THIS WORKSHOP
Usability testing can quickly uncover areas of an interface that frustrate users and hurt business goals but many teams put it off due to budget, time, or training concerns.
This workshops will take you through a do-it-yourself approach to usability testing. We'll cover the basics (benefits, recruiting, and how to plan a test), learn how to facilitate a test to get reliable results, and how to use the testing results to move usability improvements forward. You'll walk away with the tools to hold a complete usability testing right away.
TAKEAWAYS
Learn why and when to hold usability testing
Learn practical tools and methods to overcome time, budget or training concerns that block user testing from happening
Shift the conversation from opinions and hunches to proven usability problems that your team can solve together
Remote UX Research Videos of real people interacting with your brand, regardless of device or location.
68% Rockefeller Corporation of users give up because they think you don’t care about them.
Beware of Multi Level Lesson one
Poorly organized information • Hover tunnels = early collapsing • Inconsistent triggers
Multi Level Navs • Don’t rely on the back button • Labels help • Remember context
Links should look like Lesson two
Navigating through a site shouldn’t be a process of trial and error. Links
Links • Difficult to discern what is or is not a link • Missing click history • Inconsistent link styling in the same view
More payment options Lesson three
UX Archive
Payment options • Optimize existing checkout flows • Implement a virtual wallet • Don’t forget trust
Not all icons are Lesson four
Drag or expand? http://www.exquisitetweets.com/collection/lukew/2919
http://www.exquisitetweets.com/collection/lukew/2919
Icons • Consider context • Use tooltips • Try your designs out with real users
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. ” “ Jakob Nielsen User Advocate and principal of the Nielsen Norman Group
Social security matters Lesson five So does copy!
Social privacy matters Lesson five
Social privacy • Be transparent • Make your privacy policy accessible • Look for serendipitous moments of interaction
Advertising lacks Lesson six
Consistent copy and images • Continue the conversation from ad to landing page • Keep the messages simple • Work with marketing or advertising teams
Categorization is Lesson seven
There’s no perfect way to categorize pages or products (but there’s a right way to do it). Categorization
Focus on building intuitive experiences
A mental model is what the user believes about the system at hand. ” “ Jakob Nielsen User Advocate and principal of the Nielsen Norman Group
Learn from your users • Improve mental models • Add cross-references • Solve for your primary audience(s) • Make sure your search works Categorization
Multi-level navs aren’t user friendly Mega menus and clickable menus help create a better experience for your users. Links should look like links Tried and true link conventions from the early days of the web are still the most effective ways to format your links. Consider more payment options Virtual wallet services are a great way to make checking out easier and more secure. Not all icons are universal Test users for comprehension and use tool tips to describe your most important icons.
10 Most Common Misconceptions About User Experience DesignWhitney Hess
Here's the presentation I gave at Pittsburgh Web Design Day (http://www.webdesignday.com) based on my article on Mashable (http://mashable.com/2009/01/09/user-experience-design/)
Usability vs. User Experience: What's the difference?Domain7
What's the difference between usability and user experience? Is there one? Check out Domain7's quick, handy guide—for designers, developers, and clients alike! Learn more: http://www.domain7.com/blog
Jakob Nielsen developed the method of 'Heuristic Evaluation' to help identify problems with an interface. This presentation explains the 10 rules of thumb or heuristics with examples.
Stuff what we're doing at Edge Hill UniversityMichael Nolan
Presentation from 22nd July workshop session at Institutional Web Management Workshop 2008. Skip to slide 41 for my BarCamp session "10ish five-minute ways to improve your website".
Website usability ideas for business growthJames Smith
Website usability is about creating your website in such a manner that your website visitors can find what they're looking for quickly and easily. A usable website can bring in huge benefits on to your website and your business.
10 Simple Rules for Making My Site AccessibleHelena Zubkow
From the basic principle that the web should be great for everyone, Chris Albrecht and Helena Zubkow team up to present an informative accessibility demo that will rock your world. The goal of this session is to introduce developers to web accessibility – what it is, why it’s important, and how to build and test sites to make them as accessible as possible.
This includes a demo of how to do things the right way and the wrong way, some great tools, and a walkthrough of basic standards for accessibility.
- Intro - What is web accessibility?
- Why does web accessibility matter?
- Accessibility fundamentals (web accessibility in practice / code demo)
- Web accessibility tools to assess and improve your projects
- Q&A session
With more people building their own blogs, learn how to create more usable blogs and content for your audience. We will review 10 usability guidelines to help you create and manage your blog.
1. Thank You for Downloading this e-book
For downloading wide variety of books with no registration and with no
limitation Visit,
http://23ebooks.blogspot.in
Enjoy Direct download of e-books with no limit.
Enjoy reading…
2. 100 Do's
and Don'ts
in Web Design
Styleguide by SpiderPro
version 1.1
free ebooks by spiderpro
100 Do's and Don'ts in Web Design SpiderPro
3. -3-
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
4. -4-
content
Content
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
5. -5-
content
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
6. -6-
content
Do use a descriptive title
The text for the tag <TITLE> should be descriptive.
The title shows up in the results of search engines. A descriptive
title makes clear what people can expect on your site.
The title is also shown in the history list of browsers.
Do use small pages
The World Wide Web is not a book. People don't read it
sequentially. They want to select a small piece of info and decide
what info they want to read next.
So you should provide small pages. Cut long pages in pieces and
connect them through hyperlinks.
Don't split topics
Try to write one topic at one page.
If your page gets too large, try to rewrite the text in two minor
topics. Avoid using pages that force people to read sequential. In
that situation the links only interrupt the process of reading.
Do use implicit text for your links
Phrases like Click here or Check this link distract from the content
and are to be avoided.
Try to write your text in such a way that a link is a natural part of
the sentence. Instead of
SpiderPro is perfect reading on a rainy afternoon
Click here to visit it
try to write something like
On a rainy afternoon SpiderPro is perfect reading.
100 Do's and Don'ts in Web Design SpiderPro
7. -7-
content
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
8. -8-
navigation
Navigation
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.
100 Do's and Don'ts in Web Design SpiderPro
9. -9-
navigation
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.
100 Do's and Don'ts in Web Design SpiderPro
10. -10-
navigation
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.
100 Do's and Don'ts in Web Design SpiderPro
11. -11-
design
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.
100 Do's and Don'ts in Web Design SpiderPro
12. -12-
design
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
13. -13-
bandwidth
Bandwidth
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 <IMG>
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.
100 Do's and Don'ts in Web Design SpiderPro
14. -14-
bandwidth
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
15. -15-
presenting text
Presenting Text
Don't use blink
The tag <BLINK> should never have been introduced to HTML.
Blinking text is irritating, it offends your readers. Don't use it.
Don't use columns for text
You can show your text in 2 or more columns. This can be
implemented with tables or with the not official tag <MULTICOL>.
The result is newspaper-column like page.
But columns have a large drawback on a screen. It takes more up-
and-down scrolling to read the text, especially if it's a large page.
Avoid using columns this way.
Don't use small serif letters
Serif letters are developed for printing. They don't look good on a
computer screen. At least not in smaller fonts.
You should avoid these letters, especially if the serif is tiny, like
Times.
Don't use all capitals
DO NOT USE ALL CAPITALS.
It takes more time to read text that consists of only capitals.
Besides, using all capitals is the online equivalent of shouting.
Don't overuse bold text
Bold text is meant to give some focus to a part of your text. Don't
put whole paragraphs in bold. It has the same effect as shouting.
Keep focus - and bold text - short and functional.
100 Do's and Don'ts in Web Design SpiderPro
16. -16-
presenting text
Don't overuse italics
Text in italic is hard to read on a screen. The resolution of a screen
just isn't capable to present italics without distorting them slightly.
This is even more noticeable if you use a small font.
So don't use italics for larger portions of your text.
Don't use small fonts
Don't use small fonts (font size smaller than 4). Small letters are
hard to read and that's even worse on a computer screen.
Don't use too many fonts
Using all kinds of fonts on one page - or in one site - is a very bad
typographical practice.
Unless you run an online font-archive.
Do use punctuation
Present information surveyable.
Present it in small chunks. Use headings to separate them. Use
lists to avoid long textual summing ups.
Don't hide your links
The default color settings of links is pretty standard.
You can change link colors. But if you do you'll have to be sure that
links can be recognized.
Don't let those fancy colors hide your links.
100 Do's and Don'ts in Web Design SpiderPro
17. -17-
presenting text
Do use all lowercase or all uppercase links
Many browsers discriminate between differences in case. Even if
your server doesn't, don't rely on it. If you'll need to move to
another server you will be happy if all your links still function. The
easiest way to accomplish this is to use links consequently all
lowercase or all uppercase.
Do separate adjacent textual links
If you place textual links horizontally be sure to separate them
clearly. With spaces, a vertical line, bracket, whatever.
The point is that it must be clear to a visitor where a link starts and
where it ends.
Do limit the size of predefined text
Predefined text (between the tags <PRE> and </PRE>) cannot be
wrapped. If you use it be sure to limit the size, especially the width.
Otherwise your visitors might need to scroll horizontally to read the
text.
Do limit the width of text
Reading full width text on a full screen browser is quite terrible. The
lines of text get too long; giving you a headache reading them.
Limit the width of text-lines using tables, blockquotes etc.
100 Do's and Don'ts in Web Design SpiderPro
18. -18-
presenting text
Do use textual dates
Probably you do use dates. For instance to show the most recent
update of your site.
But it's a world wide web.
Do keep in mind that 02-03-2000 will be the second of March or the
third of February, depending on the country your visitor comes
from.
If you use text for your month, like March 2, 2000 the date will be
correctly interpreted.
Do provide a visual e-mail address
The mailto: trick is great. Start the e-mail-application right from the
webpage. But it only works if your visitor uses an integrated e-mail
application. For all the others provide a readable e-mail-address.
100 Do's and Don'ts in Web Design SpiderPro
19. -19-
images and colors
Images and colors
Do use transparency
The presentation of images often improves by giving the images a
transparent backgroundcolor.
They'll better integrate visually with the background.
Do use interlacing
Interlace larger GIF-images. The visitor will get a quick feedback
while the image is still loading.
For very small images - like bullets - interlacing makes no sense
but in all other cases it does.
Don't use too many images
Too many images slows down your site. Don't chase your visitors
away; limit the number of images.
Do make your graphics reproducible
If you create your own graphics make them reproducible.
You might need another one of the same kind, so be sure to write
down all the effects and the parameters you've used to create the
graphics.
Do break up images
If you use large images you can break them up in several parts.
You can combine the parts in the webpage to form the original
image.
Doing so the image-parts can be downloaded parallel, thus
reducing download time.
100 Do's and Don'ts in Web Design SpiderPro
20. -20-
images and colors
Don't use PNG (yet)
PNG is a great format for graphics and will eventually replace GIF.
But right now many browsers are in use that don't support PNG.
For the time being stick to GIF and JPEG.
Do combine backgroundimages and
background-colors
Even if you do use a background-image, still provide a
background-color. The background-color should approximately be
the main color of the image.
If text has a color that contrasts with the background-image, it will
still be readable before the background-image is loaded.
Do use a browser safe palette
Use a browser safe palette for your colors.
This will prevent colors from dithering on older monitors.
Don't use too many colors
You have access to 16 million colors. Be selective - don't try to use
them all. Too many colors distract form what you're trying to say.
Don't override only one standard color
If you override a standard color, be sure to override them all.
Your visitor has her own color settings. If you change i.e. only the
fontcolor to darkblue, text might become unreadable on a dark
background. So be sure also to change the backgroundcolor.
100 Do's and Don'ts in Web Design SpiderPro
21. -21-
compatibility
Compatibility
Do supply alt's for your images
Quite a few people disable the automatic load of pictures in their
browser.
Don't blame them, some images take a lifetime to load.
By defining an alternative text with the attribute alt in the tag
<IMG> you can take care of imageless browsers.
Do use alt text for areas
Use the alt attribute to supply text for areas in an image map, thus
providing an alternative for browsers that don't support images.
Do use NOFRAMES
Not all browsers support frames. Define an alternative with the tag
<NOFRAMES>
Do use comments for JavaScript
If you use JavaScript, be sure to place the source between
comments in such a way that browsers that don't support
JavaScript won't show any garbage.
Don't be selective with browsers
You believe I'd change my browser just to visit your site? Wake up!
Saying Best viewed with my favorite browser only has the effect
that you drive off people with other browsers.
Test your site with the favorites. It should be readable with all the
important browsers.
100 Do's and Don'ts in Web Design SpiderPro
22. -22-
compatibility
Do test Java applets with all browsers
Java is great, I really love it. But as soon as a page starts with
Applet loading, I got this feeling it all ends up wrong.
There are indeed far too many untested applets wrecking browsers
and making sure a visitor will never come back again.
Do check your Java applets with all popular browsers before using
them.
Do test with fewer screen colors
256 colors still are popular and even 16 colors are used.
Test your site with these color settings. Admitted, with 16 colors
everything looks ugly. But be sure everything remains readable.
Do test with lowres
Test your pages with low resolution. If you don't use 640*480
yourself, just make your browser-window smaller to get the same
effect.
Do validate
Validate your pages. This is the best way to find errors that won't
show up in some browsers but might be the cause of trouble in
other browsers.
Don't rely on plugins
You can create astonishing effects with plugins like Flash and
Shockwave.
But don't rely on them.
Many websurfers don't bother to install plugins. They won't be able
to see the great effects you implemented. So offer an alternative or
even better: check for plugins.
100 Do's and Don'ts in Web Design SpiderPro
23. -23-
compatibility
Do check for browser version
If you want to use non-standard techniques (Netscape or Explorer-
specific tags) do check the browser version on the client. And do
provide an alternative for non compatible browsers.
Do warn for important cookies
Some pages rely on cookies. And some people disable cookies in
their browsers.
In many circumstances you just can't skip cookies. If so - supply a
warning. Thus giving the visitor an opportunity to enable cookies.
Do offer alternative views
You want to use the newest emerging technologies? Then consider
supplying an alternative view for those that don't use the latest
browsers.
100 Do's and Don'ts in Web Design SpiderPro
24. -24-
general
General
Do close popup screens
Remove your litter.
If you want to use popup screens, be sure to close them when the
visitor leaves.
Do stop sounds
If you wanna use sounds, be sure to stop them when the visitor
leaves.
Don't try to mislead search engines
Trying to mislead search engines by repeating keywords will turn
against you. Search engines recognize many of these attempts and
will react on it by giving your site a lower ranking. Or by not placing
it at all.
Don't try to misleadingly attract visitors
By adding keywords that are specific to adult sites (like 'XXX') you
might get some traffic. But those visitors will leave quickly - unless
you do have an adult site, ofcourse.
Do register your site
Register your site at searchengines and directories. This is still the
most important way to attract traffic.
100 Do's and Don'ts in Web Design SpiderPro
25. -25-
general
Do read the stats
Use the statistics of your site. It's a good opportunity to check for
errors like the dreaded 404's.
But statistics are also invaluable for marketing purposes. What are
popular pages? Which countries do your visitors come from?
Don't count hits
Hits are meaningless. A page with 5 images produces 6 hits. And
visited 3 times it produces 18 hits. If you want a counter on your
page, be sure to count the sessions: real visitors.
Do put contact info on your pages
Give your visitors a way to get in touch with you. Their feedback is
invaluable. Supply a e-mail address or a reply-form.
Do beware of robots
Search engines use robots that scan all your directories. Be sure to
provide a robots.txt file to make clear which directories and files
should not be indexed.
100 Do's and Don'ts in Web Design SpiderPro
26. -26-
a conclusive don't
A concluding don't
Don't take my word for it
Don't take my - or any other persons - word for it.
There's no such thing as a constitution of webdesign.
You might benefit by considering these do's and don'ts. But
actually they're a personal view. And you just might disagree.
But do give these 100 do's and don'ts a serious thought.
They might fit more often than you think
100 Do's and Don'ts in Web Design SpiderPro
27. -27-
You can subscribe at:
About http://www.spiderpro.com/ab/abmlist.html
SpiderPro
Disclaimer
This eBook is published by SpiderPro.
SpiderPro is a website that presents
information for professional The author of this ebook is Dutch, the
webmasters. use of English surely won't be perfect. If
Well, with professional I don't want to you find a more or less annoying
frighten anyone. If you just want to build mistake I'll be glad to receive a mail at:
a nice personal homepage you'll find corr@spiderpro.com
lots of info at SpiderPro.
But you'll also find info that you can use
only if you have access to a webserver. Jan Kampherbeek, June 27, 2001
Or if you know how to write programs.
With SpiderPro I hope to reach people
that are strongly involved with web
development. Maybe for a living, maybe
just for the heck of it...
Release
The URL of SpiderPro is history
http://www.spiderpro.com/
27 June, 2001 Initial release 1.0
4 Aug. 2001, Release 1.1, corrected
several language errors. Thanks to
Mailing List all who responded, please keep
sending your corrections.
SpiderPro's mailing list informs you
when new information becomes
available. Subscription is free.
If you subscribe, you'll receive mails
about updates to SpiderPro and about
new released ebooks.
Expect to receive this mails about 2
times a month.
SpiderPro will use your email address
for the sole purpose of sending you
mails from the list.
We will never use your address for any
other purpose. We will never give your
address to anyone and we will never
sell your address.
100 Do's and Don'ts in Web Design SpiderPro
28. Thank You for Downloading this e-book
For downloading wide variety of books with no registration and with no
limitation Visit,
http://23ebooks.blogspot.in
Enjoy Direct download of e-books with no limit.
Enjoy reading…