{"id":1950,"date":"2011-05-09T12:56:11","date_gmt":"2011-05-09T09:56:11","guid":{"rendered":"http:\/\/www.webseoanalytics.com\/blog\/?p=1950"},"modified":"2012-03-26T14:34:23","modified_gmt":"2012-03-26T14:34:23","slug":"basic-rules-for-an-impressive-seo-compatible-web-design","status":"publish","type":"post","link":"http:\/\/www.webseoanalytics.com\/blog\/basic-rules-for-an-impressive-seo-compatible-web-design\/","title":{"rendered":"Basic Rules for an Impressive &#038; SEO compatible Web Design"},"content":{"rendered":"<p>The design of a Website heavily affects the Sales and the Image of a company and at the same time it might positively or negatively affect the SEO campaign. Developing an impressive and SEO compatible Web Design can help you improve your conversion rates, increase your sales and improve your placement in Search Engine Results. In this guest article Audrey Zucker explains why &#8220;less is more&#8221; in the world of design and she lists the basic rules for developing an Impressive and SEO compatible Web Design.<br \/>\n<!--more--><!--noteaser--><\/p>\n<p class=\"guestpost_note\">This is a guest post by <strong>Audrey Zucker<\/strong>. Audrey is the Managing Director at Mozaik, an Online Marketing and <a onclick=\"_gaq.push([`_trackEvent`, `Mentions`,`in-blog`, `Mozaik`]);\" href=\"http:\/\/www.mozaik.com\/web_development_programing.php?lang=1&amp;utm_source=webseoanalytics&amp;utm_medium=link&amp;utm_campaign=guestpost\" target=\"_blank\">Web Development<\/a> Agency specialising in providing <a onclick=\"_gaq.push([`_trackEvent`, `Mentions`,`in-blog`, `Mozaik`]);\" href=\"http:\/\/www.mozaik.com\/services_seo_sem.php?lang=1&amp;utm_source=webseoanalytics&amp;utm_medium=link&amp;utm_campaign=guestpost\" target=\"_blank\">SEO<\/a> and Digital Marketing services. Mozaik has been awarded several times with web design and development prizes since 2005. Feel free to follow her on <a onclick=\"_gaq.push([`_trackEvent`, `Mentions`,`in-blog`, `Mozaik-Twitter`]);\" href=\"http:\/\/twitter.com\/mozaikagency\" rel=\"nofollow\" target=\"_blank\">Twitter<\/a>.<\/p>\n<div style=\"text-align: center; margin: 10px 0 10px 0;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1961\" title=\"web-design-seo\" src=\"http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-seo.jpg\" alt=\"web-design-seo\" width=\"600\" height=\"401\" srcset=\"http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-seo.jpg 600w, http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-seo-300x200.jpg 300w, http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-seo-448x300.jpg 448w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/div>\n<p>\u201cLess is more\u201d. With a generation of web users that absorb as much visual information in one day as our parents did in months, there is only one secret: be <strong>precise<\/strong> and <strong>concise<\/strong>. You will gain in <strong>readability<\/strong> and of course in <strong>loading times<\/strong>.<\/p>\n<h2>Menu &amp; Navigation: Strategical Positioning of the elements<\/h2>\n<ol>\n<li>Place your Menu on the <strong>top<\/strong> of the page. This is what a user needs in order to access your main pages at once and it should contain the <strong>main keywords<\/strong> of our SEO strategy inside the links. Place it Horizontally for less items and vertically for listing or for large menus.<\/li>\n<li>Submenus should be as <strong>visible<\/strong> as the main menu but at the same time they have to be placed <strong>strategically<\/strong>. Don\u2019t ask yourself why you don\u2019t receive traffic in the sub sections of your website if they just can not be seen. Also note that even if some of the submenu items are \u201cno followed\u201d or they are less important from SEO perspective this does not mean that those pages are not interesting for the visitors.<\/li>\n<li><strong>Avoid<\/strong> as much as possible the <strong>third level menus<\/strong>. Note that it is usually better to implement the content in an attractive and easily accessible way in the second level pages or by using listings.<\/li>\n<li>Work on your <strong>internal linking strategy<\/strong>. Placing direct links from your homepage to the most important pages of your website can help both the SEO and improve <strong>conversion rates<\/strong>.<\/li>\n<li>When possible avoid using the \u201c back\u201d button because it really shows that your navigation has issues and that the website was not seriously conceived according to the content and despite all rules of usability. Instead you should use a <strong>breadcrumb navigation<\/strong>.<\/li>\n<\/ol>\n<h2>Colours: Ensure Brand impact and Readability<\/h2>\n<div style=\"text-align: center; margin: 10px 0 10px 0;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1963\" title=\"web-design-colors\" src=\"http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-colors.jpg\" alt=\"web-design-colors\" width=\"600\" height=\"336\" srcset=\"http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-colors.jpg 600w, http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-colors-300x168.jpg 300w, http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-colors-500x280.jpg 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/div>\n<p>Too much info <strong>kills<\/strong> the info and this applies also to <strong>colors<\/strong>. Revise your company profile and accordingly define a main set based on <strong>3 to 4 main colors<\/strong> that match harmoniously. You need:<\/p>\n<ol>\n<li>1 <strong>intense\/flashy<\/strong> color that will stand out and that will be used for the links and for the H1-6 tags.<\/li>\n<li>1 <strong>readable colour<\/strong> for the main text &amp; content. It should be relaxing for the eyes and easily distinguished from your background.<\/li>\n<li>Up to 2 unique \u201c<strong>signature<\/strong>\u201d colours that will communicate the image of your website. Those colours have to marry <strong>harmoniously<\/strong> with the 2 previously selected.<\/li>\n<li>Don\u2019t forget to choose <strong>dynamic<\/strong> and \u201c<strong>clean<\/strong>\u201d colours for titles and links and \u201c<strong>cool<\/strong>\u201d tones for the background and text. If you need more colours, use only variant tones based on the main color set.<\/li>\n<\/ol>\n<h2>Graphics &amp; Fonts: it should not cost your SEO when 90% of users won\u2019t see the difference<\/h2>\n<div style=\"text-align: center; margin: 10px 0 10px 0;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1965\" title=\"web-design-fonts-cloud\" src=\"http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-fonts-cloud.jpg\" alt=\"web-design-fonts-cloud\" width=\"600\" height=\"380\" srcset=\"http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-fonts-cloud.jpg 600w, http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-fonts-cloud-300x190.jpg 300w, http:\/\/www.webseoanalytics.com\/blog\/wp-content\/uploads\/2011\/05\/web-design-fonts-cloud-473x300.jpg 473w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/div>\n<p>Surfing on the wave of the <strong>minimal trend<\/strong> that invaded the world of design, there will be some elements in your web design that will make the difference, while some others that only you will be able to see.<\/p>\n<p>Just think seriously what is <strong>your target group<\/strong> and how much sensible it is to loading time versus advanced design. Then ask yourself: is it really necessary to use this element? The answer is not systematically no, since some details will really make a difference and <strong>differentiate<\/strong> your website from the mass. It\u2019s all about <strong>balance<\/strong>.<\/p>\n<ol>\n<li>Ask yourself if a special font or visual effect that you insist on placing is actually worth using a Flash or a JavaScript library that costs you a lot in <strong>loading time<\/strong>.<\/li>\n<li>If you have to use it, make sure it will not affect your SEO campaign or your internal linking strategy.<\/li>\n<li>If you have to go for a Flash menu, make the proper <strong>HTML menu replacement<\/strong>. This can really help your SEO and improve your indexing.<\/li>\n<li>Prefer beautiful buttons and <strong>original details<\/strong> than heavy image backgrounds, huge images or gradient backgrounds.<\/li>\n<li>Keep it cool with the images and don\u2019t confuse your visitors with <strong>too many visuals<\/strong>.<\/li>\n<li>Don\u2019t forget to use the <strong>main keywords<\/strong> of your SEO campaign in the <strong>image names<\/strong> and in their <strong>alt<\/strong> descriptions.<\/li>\n<\/ol>\n<p>Applying the above tips will not only provide you a <strong>clear<\/strong> and <strong>modern<\/strong> design but also they will help you structure your website information and proceed to the organization of the content. Moreover you will be able to positively affect your SEO by reducing the <strong>loading time<\/strong> and by improving the <strong>indexing process<\/strong> of your website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The design of a Website heavily affects the Sales and the Image of a company and at the same time it might positively or negatively affect the SEO campaign. Developing an impressive and SEO compatible Web Design can help you &hellip; <a href=\"http:\/\/www.webseoanalytics.com\/blog\/basic-rules-for-an-impressive-seo-compatible-web-design\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,7,10],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/posts\/1950"}],"collection":[{"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/comments?post=1950"}],"version-history":[{"count":3,"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/posts\/1950\/revisions"}],"predecessor-version":[{"id":2509,"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/posts\/1950\/revisions\/2509"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/media\/1963"}],"wp:attachment":[{"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/media?parent=1950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/categories?post=1950"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webseoanalytics.com\/blog\/wp-json\/wp\/v2\/tags?post=1950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}