Your SlideShare is downloading. ×
0
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Web Design - The Forgotten Nuts and Bolts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Design - The Forgotten Nuts and Bolts

1,687

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. <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. <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. <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. <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. <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. <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. <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. <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. <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. <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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>

×