SEO: A Web Design Perspective


Published on

A look at SEO through the eyes of a web designers. How can we, as web desingers, incorporate SEO-centric tools and techniques as we work with informationa rchitecture, XHTML, and CSS.

Published in: Technology, Business
  • Hello.Mapetite.
    I am From Colombia. I participating in a contest and its presentation I liked very much, because in my company we working with web design,& e-marketing, in the slide we talk about the reasons for have a site in the web, and how you can do it very easy, I invited, to visit my slide and if it likes, please add me to your favorites, thank you very much.

    Congratulations! I’ll add to favorites.

    I hope you add me to your favorite ’♥’ bye bye

    See my presentation -
    Are you sure you want to  Yes  No
    Your message goes here
  • For me, SEO is step 1 in web design. Apart from being the most common beginning to the user experience (i.e. search engine results), it's also half the story behind a site's success (visitors x conversion).
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

SEO: A Web Design Perspective

  1. 1. SEO: A Web Design Perspective SEO/Internet Marketing Meetup San Antonio, TX October 2008
  2. 2. Build Off A Strong Foundation <ul><li>Separate form from presentation </li></ul><ul><li>Design for indexing. </li></ul><ul><li>Optimize your XHTML and CSS </li></ul>
  3. 3. Separate Form From Presentation <ul><li>Create form (structure) with XHTML, presentation with CSS (stylesheets). </li></ul><ul><li>Create standards-compliant structure using divs (containers) instead of tables. </li></ul><ul><li>Use tables only with tabular data. </li></ul><ul><li>Don’t replace tables with divs; watch out for “divitis”! </li></ul>
  4. 4. Design for Indexing <ul><li>Keep your information architecture simple and intuitive (Don’t Make Me Think! - Steve Krug). </li></ul><ul><li>Avoid building all-Flash websites. </li></ul><ul><li>Use real text in headers/site navs with image replacement techniques in CSS. </li></ul><ul><li>Use CSS’ hover feature for mouseovers instead of graphical mouseovers. </li></ul><ul><li>Organize content in descending order of importance: left to right, top to bottom. </li></ul>
  5. 5. Design for Indexing <ul><li>Keep the top section of web pages (<head> </head>) light; don’t jam pack it with code. </li></ul><ul><li>Spin off scripts/stylesheets into external files and link to them. </li></ul><ul><li>Emphasize important text/keywords with <strong> and <em> tags. </li></ul>
  6. 6. Optimize XHTML <ul><li>Provide Doctype and language information in XHTML document. </li></ul><ul><li>Create semantic markup. </li></ul><ul><li>Create unique title for each page, leading with required keyword(s), and relevant to page content. </li></ul>
  7. 7. Optimize XHTML <ul><li>Use the meta name=“description” tag on each page with unique descriptions for each page. </li></ul><ul><li>Keep description relevant to page content, keyword rich, and succinct. </li></ul><ul><li>Use only one h1 tag per page. </li></ul><ul><li>Provide alt tags for all images that convey meaning; alt tags can be ignored for “eye candy” graphics. </li></ul>
  8. 8. Optimize CSS <ul><li>Use shorthand descriptions where possible. </li></ul><ul><li>Keep whitespace and tab space to the minimum (Use only what is necessary for readability). </li></ul><ul><li>Avoid hacks to cater to different browsers; use conditional comments to serve up browser/version specific stylesheets. </li></ul>
  9. 9. Optimize CSS <ul><li>Eliminate unwanted rules if using CSS frameworks. </li></ul><ul><li>Neutralize browser defaults with only those resets that are needed on your website, especially when using a package option like Eric Meyer’s Resets. </li></ul><ul><li>Include markup and stylesheet guides. </li></ul>
  10. 10. Sources <ul><li>SEO and Your Web Site (Digital Web Magazine) </li></ul><ul><li>7 Principles Of Clean And Optimized CSS Code </li></ul>