October 9, 2015 by

Designing a Website? Don't Forget About SEO!

In today’s competitive online business environment, it’s important for Web Developers to consider SEO (Search Engine Optimization) in all steps of the web development process, including the design.

Since we partner with many Web Designers in our development projects, we put together these tips to ensure web designs not only look great (as always), but also have what it takes to compete in search engines.


What is SEO?

SEO stands for Search Engine Optimization. It entails both on-page “behind the scenes” coding and off-page digital marketing strategies (with the intention to improve visibility and ranking in search engine results).

To ensure clients receive a website with solid SEO fundamentals, follow these guidelines, keeping the client’s best interests in mind, while working your magic to create a user-friendly, aesthetically-pleasing web design.

Topics We’ll Cover:

1. Mobile-First Design Philosophy

2. User Experience & Conversion Rates

3. Header Text

4. Page Text

5. Images

1. Mobile-First Design Philosophy

According to Google, over half of all Internet searches take place on mobile devices. In addition, Google uses mobile-friendliness (or responsive web design) as a ranking signal. In other words, if websites want to perform well in search engines (like Google), they must be mobile-friendly. Designs MUST meet the needs of a mobile user, as websites are increasingly viewed on mobile devices over desktop computers.

For that reason, it’s key to follow a mobile-first philosophy when designing and developing websites. All designs must be built in a way that’s ready to adapt to changing sizes as websites are no longer built as a static, ‘one-design-fits-all’ website. Instead, all images, styles, and layouts must be ready to scale down to a small, handheld screen while maintaining the same beautiful aesthetic.

Learn more about the importance of Responsive Web Design.

2. User Experience & Conversion Rates

Great web design is important because it directly impacts user experience and conversion rates, a fundamental marketing element. To optimize conversion rates and provide a good browsing experience, ensure the navigation is clear and easy to understand. Users should be able to easily navigate through the website in ways that follow their expectations. The page should be clean with a good balance of white space. The main focus of the page should be prominent and users should be able to understand "what to do next" on each page.

Ultimately, it's all interrelated. Great designs produce great user experiences; great user experiences produce great conversion rates.

3. SEO-Friendly Header Text

Header Text is text-based page content defined in the code as a main header. It will be styled in a larger font size (or bolding) to help it stand out from the rest of the content. The top-level header text should be marked up with a <h1> Header Text tag. This tag helps search engine crawlers read what type of content is on the page, a factor that contributes to better SEO. For that reason, SEO specialists like to add keywords relevant to the page content to help the crawlers. When it makes sense with the design, each page should include a place to add text-based Header Text. Here are some tips:

• Ensure Header Text isn’t in the form of an image. Instead, provide an image and the web developer can add text on top of the image.

• Allow space for the Header Text to comprise of 7-8 words (approx. 500 pixels or 50-75 characters).

• Main Header Text should make sense as a header. It shouldn’t be forced and needs to make sense to be styled as the most prominent text on the page.                                                                           

4. On-Page Text

Leave room for text! Websites that are optimized for SEO will have a substantial amount of text-based content on the site. For that reason, ensure the design allows for text areas where the client can add keyword-friendly content to describe their business, products, services, history, etc.

This is important for users because it provides a satisfying browsing experience by giving them more information. It's important for search crawlers because they use the text to determine whether the website has enough “quality content” – a factor related to their search ranking.

5. SEO-Friendly Images

Ultimately, the designer knows best when it comes to images. Here are some tips to ensure the images are optimized for SEO and contribute to overall website goals.

• Avoid using excessive, overly-generic stock images. Suggesting clients hire a professional photographer for website photos is ideal.

• Give descriptive file names to the images. Since search crawlers can’t see (duh), it helps them understand what’s in the image. For example: webfitters-building-interior.jpg

• Ensure the text surrounding the image is relevant to the image. Again search crawlers are bots and might think it's a poor user experience if images/text are irrelevant.

• Don’t place important text within an image. It can’t be read by search crawlers.  

• Balance images with text. Too many images can hurt conversion rates because of too much scrolling to reach the actual content.

• Ensure images are friendly for social media sharing. If the page is shared in a Facebook post, which image can be pulled to use for the post?

Overwhelmed? ... Relax! Your Web Developer can assist you with many SEO design factors related to images, including re-sizing, re-naming and adding ALT text. When in doubt, ask for a little guidance. Web Developers and SEO Specialists will appreciate it in the end as it will make their job easier!


• Use a mobile-first design philosophy.

• Consider the user experience on desktop and smartphones.

• Ensure Header Text isn’t in the form of an image.

• Leave room to enter text-based content on the pages.

• Avoid cheesy stock photos.

• Own your design and have fun!

Ultimately, it's never a good idea to base your design entirely on SEO. Instead, base it on a quality browsing experience for the user, keeping SEO factors in the process. With this approach, you'll satisfy the best of both worlds while providing a great end-product for the client!

Have additional questions? Don’t hesitate to contact us at Webfitters. We'd love to help!

Connect with @WebfittersTeam on Twitter or Follow us on Facebook here!