Your SlideShare is downloading. ×
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True   </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul>...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
<ul><li>Brand True  </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><...
Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </...
Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </...
Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </...
Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </...
Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </...
Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </...
Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </...
Search Engine How it works? Spider :  Search engines run programs to download pages by following links. Index :  Once down...
Search Engine How it ranks? Search Ranking Popularity = Link Popularity (LP) (also called LinkFlux, Page Rank, connectivit...
Search Engine SEO Principles <ul><ul><li>Make sure pages are indexable, and indexed, by search engines. </li></ul></ul><ul...
Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-p...
Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-p...
Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-p...
Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-p...
Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-p...
Search Engine SEO Process Analyze Track Optimize Analyze the site for problems -  Missing keyword repetition  -  Poor keyw...
Search Engine Marketing 8 Easy Tips <ul><li>-  Set benchmark to evaluate success </li></ul><ul><li>-  Bid on many keywords...
Upcoming SlideShare
Loading in...5
×

Web Design - The Forgotten Nuts and Bolts

1,688

Published on

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,688
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Web Design - The Forgotten Nuts and Bolts "

  1. 1. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  2. 2. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  3. 3. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  4. 4. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  5. 5. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  6. 6. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  7. 7. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>- Not more than 25 Chinese (~20 for English) characters per row. Top 10 Design Principles
  8. 8. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  9. 9. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  10. 10. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  11. 11. <ul><li>Brand True </li></ul><ul><li>Light </li></ul><ul><li>Ease of Use </li></ul><ul><li>Visible Navigation </li></ul><ul><li>Visually Crisp </li></ul><ul><li>and Hierarchical </li></ul><ul><li>Readability </li></ul><ul><li>Consistency </li></ul><ul><li>Flexibility and Efficiency </li></ul><ul><li>Privacy and Security </li></ul><ul><li>Help and Documentation </li></ul>Top 10 Design Principles
  12. 12. Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </li></ul><ul><li>Button/Link </li></ul><ul><li>HTML lingo </li></ul>
  13. 13. Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </li></ul><ul><li>Button/Link </li></ul><ul><li>HTML lingo </li></ul>- Keep key message above the fold (~520px). - Keep in mind, there’re many people still use 800 x 600 monitor! ~520 pixels
  14. 14. Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </li></ul><ul><li>Button/Link </li></ul><ul><li>HTML lingo </li></ul><ul><li>Add Keyword to “Alt” Text so search engine can find you! </li></ul><ul><li>Avoid large image - slows page load </li></ul>
  15. 15. Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </li></ul><ul><li>Button/Link </li></ul><ul><li>HTML lingo </li></ul>- Avoid use smaller than 12px size font (Trad. Chinese) - Legibility: make sure enough contrast between font color and background color.
  16. 16. Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </li></ul><ul><li>Button/Link </li></ul><ul><li>HTML lingo </li></ul>- At a glance view for navigation. - Important for both search engine and users.
  17. 17. Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </li></ul><ul><li>Button/Link </li></ul><ul><li>HTML lingo </li></ul>- Make sure a button look like a “ clickable ” button/object. - Rollover effect – arrow cursor switches to hand cursor ,button/object shows highlight, text link shows underline/highlight. - Text link and visited colors.
  18. 18. Some forgotten Nuts and Bolts <ul><li>Browser </li></ul><ul><li>Image </li></ul><ul><li>Text </li></ul><ul><li>Site Map </li></ul><ul><li>Button/Link </li></ul><ul><li>HTML lingo </li></ul>- Include keyword in the “title” of the page - Include keyword in the 'meta' description - Include keyword in the 'meta' keywords - Avoid Frame
  19. 19. Search Engine How it works? Spider : Search engines run programs to download pages by following links. Index : Once downloaded, the search engine will build an Index by extracting information from the documents. Serve : When a search is performed, software sifts through the index to produce the most relevant results according to the algorithm. Internet crawler DB Webmap DB Index Query Analyzer FE
  20. 20. Search Engine How it ranks? Search Ranking Popularity = Link Popularity (LP) (also called LinkFlux, Page Rank, connectivity, WebRank etc) Measures the popularity of a given webpage based on the number of inbound links to that web page, both internal and external. Content = Information Rank (IR) Scores a webpage for it’s content, a measurement of a pages relevance for a given keyword. TF/IDF & document hierarchy
  21. 21. Search Engine SEO Principles <ul><ul><li>Make sure pages are indexable, and indexed, by search engines. </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-page factors </li></ul></ul>
  22. 22. Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-page factors </li></ul></ul>- Avoid showing redirects to search engines - URL structure - Robots.txt - Page Size - Dynamic/Static Pages - Use plain HTML for site navigation
  23. 23. Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-page factors </li></ul></ul><ul><li>- Keywords in Title tag </li></ul><ul><li>- Keywords in Meta tag </li></ul><ul><ul><li>Do NOT use same set of keywords across the whole site. </li></ul></ul><ul><li>- Meaningful file name </li></ul><ul><li>- Place CSS and Javascript files external to HTML page </li></ul><ul><li>- Keyword density / positioning </li></ul>
  24. 24. Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-page factors </li></ul></ul><ul><li>We are also a search engine, so the company is sensitive about internally produced spam. Do not do it! </li></ul><ul><ul><li>Keyword spamming </li></ul></ul><ul><ul><ul><li>Use small font, same/similar color as the background </li></ul></ul></ul><ul><ul><li>- Do not rely on link farms </li></ul></ul>
  25. 25. Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-page factors </li></ul></ul><ul><li>- Number of links to page </li></ul><ul><ul><li>- Internal </li></ul></ul><ul><ul><ul><li>Cross-property links </li></ul></ul></ul><ul><ul><ul><li>Site map - navigation </li></ul></ul></ul><ul><ul><li>External </li></ul></ul><ul><li>- Anchor text </li></ul><ul><ul><li><a href=“site.html”>Anchor Text</a> </li></ul></ul><ul><ul><li>Avoid using meaningless anchor text link like “more”, “click here” </li></ul></ul><ul><li>- Remove obsolete web pages </li></ul>
  26. 26. Search Engine SEO Principles <ul><ul><li>Index </li></ul></ul><ul><ul><li>On-page factors </li></ul></ul><ul><ul><li>Off-page factors </li></ul></ul>LinkFlux/PageRank is the way for Search to express a global popularity for a page. A vote (link) to this page by other pages. Example: Websites Websites
  27. 27. Search Engine SEO Process Analyze Track Optimize Analyze the site for problems - Missing keyword repetition - Poor keyword choices - Content duplication - CMS related issues Monitor progress in key areas - Rankings increase? - More pages indexed? - More referrals? Optimize based on analysis - Change keywords - Repeat target words - Modify CMS to accommodate SEO - Delete duplicates On going process
  28. 28. Search Engine Marketing 8 Easy Tips <ul><li>- Set benchmark to evaluate success </li></ul><ul><li>- Bid on many keywords </li></ul><ul><li>- Set bid strategies </li></ul><ul><li>- Categorize your keywords by campaigns / ad groups </li></ul><ul><li>- Make sure tracking mechanisms are in place </li></ul><ul><li>- Direct-linking URLs to the page related to the search term </li></ul><ul><li>- Review your pool of keywords and bid strategies constantly </li></ul><ul><li>- Leverage seasonal search terms to capture more traffic and opportunities </li></ul>

×