Web Design - The Forgotten Nuts and Bolts

  • 1,648 views
Uploaded on

 

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,648
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 2.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 3.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 4.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 5.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 6.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 7.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    - Not more than 25 Chinese (~20 for English) characters per row. Top 10 Design Principles
  • 8.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 9.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 10.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 11.
    • Brand True
    • Light
    • Ease of Use
    • Visible Navigation
    • Visually Crisp
    • and Hierarchical
    • Readability
    • Consistency
    • Flexibility and Efficiency
    • Privacy and Security
    • Help and Documentation
    Top 10 Design Principles
  • 12. Some forgotten Nuts and Bolts
    • Browser
    • Image
    • Text
    • Site Map
    • Button/Link
    • HTML lingo
  • 13. Some forgotten Nuts and Bolts
    • Browser
    • Image
    • Text
    • Site Map
    • Button/Link
    • HTML lingo
    - 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
    • Browser
    • Image
    • Text
    • Site Map
    • Button/Link
    • HTML lingo
    • Add Keyword to “Alt” Text so search engine can find you!
    • Avoid large image - slows page load
  • 15. Some forgotten Nuts and Bolts
    • Browser
    • Image
    • Text
    • Site Map
    • Button/Link
    • HTML lingo
    - 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
    • Browser
    • Image
    • Text
    • Site Map
    • Button/Link
    • HTML lingo
    - At a glance view for navigation. - Important for both search engine and users.
  • 17. Some forgotten Nuts and Bolts
    • Browser
    • Image
    • Text
    • Site Map
    • Button/Link
    • HTML lingo
    - 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
    • Browser
    • Image
    • Text
    • Site Map
    • Button/Link
    • HTML lingo
    - 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
      • Make sure pages are indexable, and indexed, by search engines.
      • On-page factors
      • Off-page factors
  • 22. Search Engine SEO Principles
      • Index
      • On-page factors
      • Off-page factors
    - 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
      • Index
      • On-page factors
      • Off-page factors
    • - Keywords in Title tag
    • - Keywords in Meta tag
      • Do NOT use same set of keywords across the whole site.
    • - Meaningful file name
    • - Place CSS and Javascript files external to HTML page
    • - Keyword density / positioning
  • 24. Search Engine SEO Principles
      • Index
      • On-page factors
      • Off-page factors
    • We are also a search engine, so the company is sensitive about internally produced spam. Do not do it!
      • Keyword spamming
        • Use small font, same/similar color as the background
      • - Do not rely on link farms
  • 25. Search Engine SEO Principles
      • Index
      • On-page factors
      • Off-page factors
    • - Number of links to page
      • - Internal
        • Cross-property links
        • Site map - navigation
      • External
    • - Anchor text
      • <a href=“site.html”>Anchor Text</a>
      • Avoid using meaningless anchor text link like “more”, “click here”
    • - Remove obsolete web pages
  • 26. Search Engine SEO Principles
      • Index
      • On-page factors
      • Off-page factors
    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
    • - Set benchmark to evaluate success
    • - Bid on many keywords
    • - Set bid strategies
    • - Categorize your keywords by campaigns / ad groups
    • - Make sure tracking mechanisms are in place
    • - Direct-linking URLs to the page related to the search term
    • - Review your pool of keywords and bid strategies constantly
    • - Leverage seasonal search terms to capture more traffic and opportunities