1. SEO – Designing Basic Guidelines
1. Content should be equally balanced on both sides of the page:
When users enter a website, their focus first starts at the top left of the page and hovers
there before slowly tracking to the right. Contrary to what many think, the web user is
focused more on the text of the page, rather than images or graphics. This is where balance
comes into place. Balance will not only make your page more visually appealing, but it will
make your page easier to read and items easier to find. A good layout will help the objects
on your page to flow.
2. Build simpler pages:
Clean your website up by removing all the unnecessary visual elements. This will allow
important items to stand out. Leave some white space on the page. The illusion of space is
visually pleasing, as well as easier to navigate.
Otherwise, your visitor will not get the information we are providing him and may leave in
hurry.
• Color is the big subject. As soon as you add more than one color to a page, you
make the other colors look different. On the web, though, you should usually avoid
using too many colors on one page. Even if they are complementary, it will look
garish. Use the color of the country’s flag is very good and it is general practice.
• Space plays an important role as you can create all sorts of illusions with the
amount of space you put between your objects, and where you put it: design is
often as much knowing where to put something as it is knowing what to put there.
If you make things overlap, or example, the covered things appear to be at the
'back' while the uncovered ones are at the 'front'.
• Emphasis can be used if you want to make part of the page stand out from all the
rest. Grouping everything together and then moving one thing a significant distance
away from them will make it a focal point, as will making it a different shape from
the others, or a different color.
• Line The directions of your lines will give a mood to your design: as a rule,
horizontal lines are calmer, vertical lines are moderately active, and jagged or
diagonal lines are very active. If you were designing an austere financial news site,
then, you'd use horizontal lines, while a fun site for kids would be full of lines going
in all sorts of directions.
2. 3. Font Size to consider:
The size and type of font needs to be considered and try to use simpler and easy available
fonts. San-serif fonts such as Arial and Verdana are popular choices for on-screen reading.
The font size should be no smaller than 10 points and no larger than 14 points.
4. Keep clean background:
The background textures and colors you choose have the ability to gauge the overall appeal
of the website. Lots of texture and graphics in the background can be distracting, and the
more texture you add to the background, the less noticeable your text and images become.
5. Choosing graphics for pages:
Below are some instances where we can use graphics to enhance the look and feel of pages:
• Logo – Logo is your brand recognition and it adds visual appeal to your web pages.
• Title bars – The title bar lets your visitors know which page they are on.
• Horizontal rules – Graphic lines are often used to separate categories or sections of a
webpage.
• Background images – Are used to add visual appeal or make a web site easier to navigate.
• Photos – Personalize a website and make it inviting.
• Navigation icons, such as `home' and 'back' enhance a page because they are familiar and
users anticipate seeing them.
6. Navigation should be considered:
Create a toolbar with links that are easy to navigate. CSS plays an important rule here for
creating the toolbar in an area that makes sense. Going with the norm will create a sense of
familiarity and facilitate the ease of navigation. And don't forget a link to your homepage.
It's often forgotten but very important to point your users to your home page.
7. Readability of text on the page:
You have great copy, but are you displaying it effectively? Make your pages easy to read.
Break up blocks of text and create short paragraphs.
• Consider the key points on each page and create headings and subheadings.
3. • Only use one or two fonts. Select one font for your headings and subheadings and another
for the body text.
• Highlight key words and phrases by bolding or using a different color. Be careful when
selecting colors, and don't use every color in the rainbow. Many, such as yellow and pink,
don't stand out well if you've selected a white or black background.
8. Scrolling:
People do not like to scroll Horizontal, so it is necessary not to have horizontal scrolling.
Vertical scrolling is ok if you have to have it, but consider moving larger blocks of
information to another page and providing links. So if you've got to have a scrolling page,
try to keep all your important information above the fold.
9. Quick Page Load:
We all get impatient when it takes more than 5 seconds to connect to a website. Users want
to make contact, and make it quick. Ensure that your pages load as quickly as possible.
Eliminate unnecessary graphics, especially flash graphics...they can be time hogs.
10. Google Ads Format:
Google Adsense Format can be used as per the content’s placement over the page and
purpose of the website. So, it is very difficult to define in advance.
Below is the format of ads:
https://www.google.com/adsense/static/en_US/AdFormats.html
11. Bread Crumb:
Generally, we place the bread crumb in the content area at the top. For example,
http://www.greatdad.com.
12. Heading text (h1) will require to search crawl
13. Use only gif and jpg images
14. Try to compress images with the help of designer
15. Hypertext should highlight differently (color, weight, decoration etc.)
16. Need to stand out object who help to grab conversion ratio
17. 3 or 2 frame layout always looks good
18. Logo should require minimum 25px height
19. Only website logo should bigger then other logo
20. Check accessibility of page
21. Avoid unnecessary comments on page
4. 22. Define doctype on the page
23. Try to develop website in table less environments
24. Always define type to javascript
25. Make sure W3C principles for nesting tables and div
26. Maintain the typography and datatype in HTML, Clientfiles, Serverfiles, Images and
folders
27. Maintain folders structure
28. Don’t use hidden tags
29. If flash necessary make sure about object tag
30. Flash not be increase from 40k, use loader if necessary
31. Avoid use of inline style and on page script
32. Alternate text and title useful for any website
33. Rights and legal agreements need to display on bottom of the page
34. Help, sitemap and FAQ require for better navigation and understanding concept of
application
35. Tag line