• Save
Web Design - The Forgotten Nuts and Bolts
Upcoming SlideShare
Loading in...5
×
 

Web Design - The Forgotten Nuts and Bolts

on

  • 2,848 views

 

Statistics

Views

Total Views
2,848
Views on SlideShare
2,848
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Design - The Forgotten Nuts and Bolts Web Design - The Forgotten Nuts and Bolts Presentation Transcript

      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
      • 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
    • Some forgotten Nuts and Bolts
      • Browser
      • Image
      • Text
      • Site Map
      • Button/Link
      • HTML lingo
    • 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
    • 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
    • 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.
    • 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.
    • 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.
    • 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
    • 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
    • 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
    • Search Engine SEO Principles
        • Make sure pages are indexable, and indexed, by search engines.
        • On-page factors
        • Off-page factors
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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