<html><!-- #BeginTemplate "/Templates/coolblue-inside.dwt" -->
<head>
<!-- #BeginEditable "doctitle" --> 
<title>Design VS. SEO: Can My Site Look Good and Rank Well?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="title" content="Design VS. SEO: Can My Site Look Good and Rank Well?">
<META NAME="description" content="Free articles that can be used to learn about website design and development.">
<META NAME="keywords" content="free web templates, web template, site layouts, page layouts, page sets, graphic sets, web design, linkware, money, financial, floral, computer, hi tech, technology, skyline, building, patriotic, american, flag, automotive, christmas, baby, restaurant, halloween, sports, business">
<META NAME="rating" content="general">
<META NAME="distribution" CONTENT="global">
<META NAME="resource-type" CONTENT="document">
<META NAME="last-modified" CONTENT="2006/12/08">
<META NAME="robots" content="index,follow">
<META NAME="revisit-after" content="10_days">
<!-- #EndEditable --> 
<LINK REL=stylesheet HREF="http://www.webmajestic.com/mystyle.css" TYPE="text/css">
</head>
<body bgcolor="#79849A" topmargin="0">
<!-- Kontera ContentLink(TM);--> 
<script type='text/javascript'>
var dc_AdLinkColor = 'green' ;
var dc_UnitID = 14 ;
var dc_PublisherID = 11118;
var dc_adprod = 'ADL' ;
</script>
<script type='text/javascript' 
src='http://kona.kontera.com/javascript/lib/KonaLibInline.js'>
</script>
<!-- Kontera ContentLink(TM) --> 
<table border="0" cellpadding="0" cellspacing="0" width="750" align="center">
  <tr> <!-- Shim row, height 1. --> 
    <td><img src="../images/shim.gif" width="750" height="1" border="0"></td>
    <td><img src="../images/shim.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr valign="top"> 
    <td bgcolor="#FFFFFF"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="10">
        <tr> 
          <td width="76%" valign="top"> 
            <div align="center"> 
              <table border="0" cellpadding="0" cellspacing="0" width="750">
                <!-- fwtable fwsrc="home2.png" fwbase="index.gif" --> 
                <tr> <!-- Shim row, height 1. --> 
                  <td><img src="../images/shim.gif" width="217" height="1" border="0"></td>
                  <td><img src="../images/shim.gif" width="533" height="1" border="0"></td>
                  <td><img src="../images/shim.gif" width="1" height="1" border="0"></td>
                </tr>
                <tr valign="top"><!-- row 1 --> 
                  <td rowspan="2"><img name="index_r1_c1" src="../images/index_r1_c1.gif" width="217" height="263" border="0" usemap="#hoover_index_r1_c1MapMap"><map name="hoover_index_r1_c1MapMap"><area shape="rect" coords="8,9,198,245" href="../index.html" alt="Home" title="Home"></map></td>
                  <td><img name="index_r1_c2" src="../images/index_r1_c2.gif" width="533" height="230" border="0" usemap="#hoover_index_r1_c1Map"><map name="hoover_index_r1_c1Map"><area shape="rect" coords="447,176,531,213" href="http://www.webmajestic.com/contact.html" alt="Contact Webmajestic" title="Contact Webmajestic"><area shape="rect" coords="349,175,444,213" href="http://www.webmajestic.com/resources.html" alt="Resources" title="Resources"><area shape="rect" coords="3,175,79,214" href="http://www.webmajestic.com/web_lessons.html" alt="Web Design Lessons" title="Web Design Lessons"><area shape="rect" coords="83,176,169,214" href="http://www.webmajestic.com/templates" alt="Web Design Templates" title="Web Design Templates"><area shape="rect" coords="170,177,262,213" href="http://www.webmajestic.com/articles" alt="Web Design Articles" title="Web Design Articles"><area shape="rect" coords="263,177,349,212" href="http://www.webmajestic.com/graphics" alt="Free Web Graphics" title="Free Web Graphics"><area shape="rect" coords="4,4,527,165" href="../index.html" alt="Home" title="Home"></map></td>
                  <td><img src="../images/shim.gif" width="1" height="230" border="0"></td>
                </tr>
                <tr valign="top"><!-- row 2 --> 
                  <td background="../images/index_r2_c2.gif" valign="middle">
                    <div align="right"><!-- Google CSE Search Box Begins --> 
                      <form id="searchbox_001927420258398297637:nplqsaxspt4" action="http://www.webmajestic.com/results.html">
                        <input type="hidden" name="cx" value="001927420258398297637:nplqsaxspt4" />
                        <input name="q" type="text" size="30" value=" " />
                        <input style="background:CCCCCC; border-width:1px" type="submit" name="sa" value="Search" />
                        <input type="hidden" name="cof" value="FORID:11" />
                      </form>
                      <script type="text/javascript" src="http://google.com/coop/cse/brand?form=searchbox_001927420258398297637%3Anplqsaxspt4"></script>
                      <!-- Google CSE Search Box Ends --></div>
                  </td>
                  <td><img src="../images/shim.gif" width="1" height="33" border="0"></td>
                </tr>
              </table>
              
              <script type="text/javascript"><!--
google_ad_client = "pub-3142337522589164";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
//2007-09-30: webmajestic
google_ad_channel = "6999496151";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0033FF";
google_color_text = "000000";
google_color_url = "0033FF";
//-->
</script>
              <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
            </div>
            <!-- #BeginEditable "content" --> 
            <div align="center"></div>
            <table width="100%" border="0" cellspacing="0" cellpadding="5">
              <tr valign="top"> 
                <td> 
                  <h1 align="center">Design VS. SEO: Can My Site Look Good and 
                    Rank Well? by: John Krycek </h1>
                  <table width="100%" border="0" cellspacing="0" cellpadding="2">
                    <tr valign="top"> 
                      <td><font face="Arial, Helvetica, sans-serif" size="2"> 
                        <script type="text/javascript"><!--
google_ad_client = "pub-3142337522589164";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text";
//2006-12-07: webmajestic
google_ad_channel = "6999496151";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0033FF";
google_color_text = "000000";
google_color_url = "0033FF";
//--></script>
                        <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                        </font> 
                        <table width="236" border="1" cellspacing="0" cellpadding="5" bordercolor="#6666FF">
                          <tr> 
                            <td> 
                              <p><b>Related Articles</b></p>
                              <p><a href="webdesign-business.html">Web Design 
                                Business - 5 Surefire Ways To Fail</a></p>
                              <p><a href="web-design-work.html">How Not To Get 
                                Web Design Work</a></p>
                              <p><a href="website-copy.html">Your Website Copy 
                                Could be Letting You Down</a></p>
                            </td>
                          </tr>
                        </table>
                        <p>&lt;&lt; <a href="index.html">Return to Articles Home 
                          Page</a><font face="Arial, Helvetica, sans-serif" size="2"> 
                          </font></p>
                      <font face="Arial, Helvetica, sans-serif" size="2"> </font></td>
                      <td> 
                        <p>Do you have to sacrifice all of the creative and artistic 
                          elements of your web site to rank in the search engines? 
                          Later in this article I'll show you a real case scenario 
                          and the design and SEO approach used. </p>
                        <p>Thanks to the birth of professional search engine marketers 
                          the top ranks are saturated with the pages of companies 
                          that can pay for such insight. That said, it's certainly 
                          possible to employ high ranking tactics in your own 
                          website. Actually, the most basic tactics can move you 
                          up from an 800 position to a 300. However, it's the 
                          top of the scale where efforts seem almost inversely 
                          exponential or logarithmic, you put a ton in to see 
                          a tiny change in rank. </p>
                        <p>How do you meld the ambitious overhauls required to 
                          attain significant ranking and NOT compromise the design 
                          of your site? </p>
                        <p>DESIGN CAN'T BE IGNORED </p>
                        <p>If you have an existing site, you've probably tied 
                          it into your existing promotional content. Even if you've 
                          allowed your website to cater to the more free form 
                          of the net, it should still be designed as a recognizable 
                          extension of your business. </p>
                        <p>The reasons for doing so are valid, and can't simply 
                          be ignored for the sake of achieving a first age position, 
                          can they? If your research into search optimization 
                          leaves you shuffling around thoughts of content, keyword 
                          saturated copy and varying link text, you are correctly 
                          understanding some of the basic pillars of search engine 
                          optimization. </p>
                        <p>And, you aren't alone if you have this disheartening 
                          thought&#151;If I do all this SEO stuff and reach number 
                          one across the board, who would stay at my site because 
                          it's so stale and boring I'm even embarrassed to send 
                          people there! </p>
                        <p>There are two ways to successfully combine design and 
                          SEO. The first is to be a blue chip and/or Fortune 500 
                          company with multi million dollar advertising and branding 
                          budgets to deliver your website address via television, 
                          radio, billboards, PR parties and giveaways with your 
                          logo. </p>
                        <p>Since chances are that's not you, and certainly not 
                          me, lets look at the second option. It begins with some 
                          research into your market, some thoughtful and creative 
                          planning, and a designer who is a search engine optimizer, 
                          and understands at least basic CSS and HTML programming 
                          techniques. Or a combination of people with these skills 
                          that can work very well together. </p>
                        <p>DESIGN IS FOR BROCHURES, INSTANT RESULTS ARE FOR THE 
                          WEB </p>
                        <p>That's not the whole truth, but it will help compare 
                          and contrast design and SEO. In reality, SEO needs the 
                          quantity and detail of supporting text that a brochure 
                          has, but good web design has to catch a viewer's attention 
                          in 5 seconds. It's pretty difficult to read and absorb 
                          the content of an entire brochure in less than 5 seconds. 
                        </p>
                        <p>Search engines need rich, related, appropriate, changing 
                          and poignant content. And for them to rank you, all 
                          of that must be on your pages. But if it's not well 
                          organized and broken down into bite size chunks, no 
                          one is going to bother learning about what you're offering. 
                        </p>
                        <p>CONSTRUCTION 101- ATTRACTIVE DESIGN AND SEO </p>
                        <p>Sadly, it's very difficult to optimize a site without 
                          completely overhauling it. You'll soon understand why. 
                          Design and SEO must be strongly rooted into every aspect 
                          of each other, possessing a true, symbiotic relationship. 
                          Lets look at a simplified example of this. Lets say 
                          you are optimizing a page for the keyword phrase, &quot;pumpkin 
                          bread recipe.&quot; </p>
                        <p>From a design standpoint &quot;Pumpkin Bread Recipe&quot; 
                          would be the heading for the page, in a nice, readable 
                          font with the words perhaps an orange-brown color. And 
                          lets add a fine, green rule around it. </p>
                        <p>There are many ways to create that simple, colored 
                          heading. However, there is only one way that is best 
                          for both design and SEO. That is to use Cascading Style 
                          Sheets, or CSS. In addition, that line of code containing 
                          &quot;Pumpkin Bread Recipe&quot; needs to be as close 
                          to the top of the page as possible (which CSS also allows). 
                        </p>
                        <p>To a viewer, the recipe text might be read more if 
                          it were located to the right of a photo of a buttered 
                          piece of pumpkin bread on a small plate next to a lightly 
                          steaming cup of coffee. </p>
                        <p>SEO needs to read that ingredient list and baking instructions. 
                          Search engines now understand on a rudimentary level 
                          that the ingredients are indeed related to the optimized 
                          words- pumpkin bread recipe. </p>
                        <p>Additionally, it would take many extra lines of code 
                          to make a table in this example if you didn't use CSS. 
                          Search engines don't like extra code. In fact, given 
                          enough times, that &quot;extra&quot; code will make 
                          the keyword phrases seem less important and hurt rank. 
                        </p>
                        <p>Note: In the page code, a few thousand characters more 
                          than you need to get all of that content organized would 
                          normally just add to your page load time, and might 
                          be acceptable. But to a search engine, that time can 
                          really add up. It wont read through page after page, 
                          site after site, billionth after billionth character 
                          of unimportant code to find the relevant text. Therefore, 
                          the less code, the better your chances. Moral- Less 
                          code, more content. </p>
                        <p>SEO USUALLY MEANS REDO </p>
                        <p>In the previous pumpkin example, CSS will eliminate 
                          the need for almost any extra code at all, and provide 
                          the means to place the text to the right of the photo. 
                        </p>
                        <p>Now, imagine that someone had already created this 
                          page, but done so using other programming methods. The 
                          page could very well be W3C compliant, well programmed 
                          and got the job done. However, without designing and 
                          programming for optimization as in the above illustration, 
                          the end result would have no significant rank compared 
                          to others that do. </p>
                        <p>You can be sure that there exist at least 30 web sites 
                          built to rank for the keywords &quot;pumpkin bread recipe&quot;. 
                          Note- why did I use the number 30? It's safe to assume 
                          if you're not on the first three results pages of a 
                          search, you're not being seen. </p>
                        <p>While this is a simple example, hopefully you understand 
                          that it would be impossible to optimize this simple 
                          page without redoing it. This isn't always the case, 
                          but extrapolate this into detailed, multiple pages in 
                          an entire website and the issue is greatly magnified. 
                        </p>
                        <p><br>
                          AESTHETIC IMPORTANCE VS. TRAFFIC </p>
                        <p><br>
                          Everyone has an idea of what they want their site to 
                          look like. The pretty factor- splash pages, cool flash 
                          and graphics must now be justified as to their importance 
                          to the bottom line. If you want/need to establish an 
                          online presence, you will have to make some compromises 
                          in these areas. </p>
                        <p>Understand exactly the role your site should play in 
                          your company marketing. </p>
                        <p>Ask- What is the goal of your website and who is its 
                          audience? Is it for existing clients to see? Is it to 
                          reach new clients? To venture into yet untapped market 
                          segments? </p>
                        <p>Ask- How strongly do your other marketing efforts promote 
                          your site? </p>
                        <p>Ask- Is your website an extension of your existing 
                          collateral that must reflect the same graphical look? 
                        </p>
                        <p>Ask- Is your website meant to assist to your sales 
                          force or is it your sales force? </p>
                        <p>Chances are you wont have any single answers. That's 
                          ok. It will give you some meat for your designer/SEO 
                          to digest and develop a solution for you. </p>
                        <p>REAL CASE OF DESIGN BALANCED WITH SEO AND SALABILITY 
                        </p>
                        <p>If you sell jewelry solely online, you must have a 
                          catalog of exceptional photography and detailed, high-resolution 
                          close up images. But, you must be optimized and rank 
                          well if you want to sell any of that jewelry. </p>
                        <p>If such a company approached me with this project, 
                          my recommendation would be this: If you sell a product, 
                          people have to see that product. Lots of good images. 
                          The site should be slick and sheik and easy to navigate. 
                          The home page has to capture the buyer's attention. 
                          If it's very expensive jewelry, the site should have 
                          a lot of class and elegance. If it's home made jewelry, 
                          the site shouldn't look home made. </p>
                        <p>However, as you have no store front, if the online 
                          community can't find you, you're business will fail. 
                          So I'd have a very optimized home page with some discussion 
                          of the quality of your product, the history of your 
                          company, etc. This is also great sales copy. Ad a few 
                          special catalog pieces with descriptions below some 
                          smartly placed gifs, jpegs and readable type graphics 
                          built out of CSS and you've got a cool to look at, content 
                          rich, well optimized layout. </p>
                        <p>I'd make the link to your catalog very obvious and 
                          prominent. Note the catalog is not the homepage. I'd 
                          also include subsequent well written, in depth pages 
                          about the history of some specific pieces. Load them 
                          with targeted keywords and a few images. Again, make 
                          your catalog link very prominent. In doing so you're 
                          creating relevant content for search engines AND providing 
                          additional pages that can rank. </p>
                        <p>The catalog can be database driven, simple and changeable, 
                          and you have the foundation to build your search rank. 
                        </p>
                        <p>PLANNING YOUR SITE </p>
                        <p>If your designer is not a search engine optimizer, 
                          hire one to work with your designer from the initial 
                          development stage of your site. If you would like a 
                          visible presence that is not dependant on traditional 
                          marketing efforts to get your name around, then you 
                          will have to optimize. </p>
                        <p>However, with advances in html and css, text itself 
                          can be a very flexible and attractive design element 
                          with endless possibilities. Site optimization consists 
                          of some rigid, unbendable rules. It can be intertwined 
                          successfully with very creative and attractive design. 
                          If your Designer and SEO aren't the same person or company, 
                          make sure they have the same, close working relationship. 
                        </p>
                        <p>About the author:<br>
                          John Krycek is a creative director at the Mouseworks.ca 
                          Toronto website design.. Learn more about search engine 
                          optimization, internet marketing, web development and 
                          graphic design in easy, non-technical, up front English 
                          at <a href="http://www.themouseworks.ca" target="_blank">http://www.themouseworks.ca</a>! 
                        </p>
                      </td>
                    </tr>
                  </table>
                  <font face="Arial, Helvetica, sans-serif" size="2"> </font> 
                </td>
              </tr>
            </table>
            <!-- #EndEditable --> 
            <div align="center"> </div>
            <div align="right"></div>
          </td>
        </tr>
      </table>
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="top"><!-- row 3 --> 
    <td background="../images/hoover_index_r3_c1.gif" valign="middle"> 
      <div align="center"><a href="http://www.webmajestic.com">Home</a> | <a href="http://www.webmajestic.com/webguide.html">Tutorials</a> 
        | <a href="http://www.webmajestic.com/userpages">Free Site Builder</a> 
        | <a href="http://www.webmajestic.com/templates">Templates</a> | <a href="http://www.webmajestic.com/articles">Articles</a> 
        | <a href="http://www.webmajestic.com/graphics">Free Web Graphics</a> 
        | <a href="http://www.webmajestic.com/awardsprogram.html"> </a> <a href="http://www.webmajestic.com/resources.html">Web 
        Resources</a> | <a href="http://www.webmajestic.com/links.html">Links</a> 
        | <a href="http://www.webmajestic.com/privacy.html">Privacy</a> | <a href="http://www.webmajestic.com/contact.html">Contact</a></div>
    </td>
    <td><img src="../images/shim.gif" width="1" height="34" border="0"></td>
  </tr>
</table>
<div align="center"><font color="#CC6600"><font color="#FFFFFF"> © 2000-2008 <a href="http://www.webmajestic.com">Webmajestic.com</a>. 
  All Rights Reserved</font></font><font color="#FFFFFF">.</font> </div>
</body>

<!-- #EndTemplate --></html>