Simple SEO Tips for Web Designers

There are many articles on the web that discuss the basics of SEO. While most of these articles deal with technical aspects, there are very few that speak to web designers specifically. So I have outlined some simple SEO tips for web designers that are easy to use and don’t require much technical experience.

Let’s start by defining some basic SEO principals.

The goal of an SEO exercise is to optimise your content with your visitors as the primary concern. Much of what a web designer does is take into consideration the users experience while visiting a website. But there are a few minor principals that need to be applied to make sure the website design does not work against the SEO of the website.

Here are a few simple SEO tips for web designers.

Using Text in Images

Many web pages include a header image of some sort. The homepage is often designed as the showcase landing page with images, perhaps a slider of high-quality images that relate to the website, business and content. These images, many times, include some form of textual description to clearly convey a message to the website visitors.

In an effort to control the presentation of the message, a designer will sometimes embed the text within the image. This allows them to dictate the font being used and ensures the text is readable on any device.

When viewed by a website visitor, everything may look fine. But, because the text is embedded in the image, a search engine cannot determine the text from the image itself. The result is that the message is completely lost and the webpage will not be indexed for any of the text found in the image.

SEO is about getting the textual message right so that a search engine will index the page based on the text used. If the text is embedded in the image, an SEO technician or content editor cannot update the text. The image must be sent back to the designer for updates. This is less than ideal.

So SEO Tip Number 1 is, do not embed text in images. Let the web developer set up the page so that the text is placed over the image in a manner that is preferred by search engines. Keep in mind that this tip is for websites only. This is not directed at images used for Social Networking.

Using Images for Headings

On a related topic relates to using images in headings and sub-headings of content. Good writing practice tells the writer to break up a page with headings to focus on various areas related to the main topic. Again, the web designer may want to design the headings in a specific font style not available to most browsers. So they design every header as an image in order to control the font style.

The same principals that we addressed for embedding text in images also apply here. Don’t use images of text. It is bad for SEO.

This is probably a good time to discuss the use of fonts in web pages.

Using Fonts

If you perform a search on the web for fonts, there are millions of results returned. Embedding custom fonts into a website is a very simple process as well. Perhaps too simple.

Each time a font needs to be used, the web page must load a file to define the font for a users website. This file can be located on the same server as the website or on another website. Many fonts are even served up from a CDN.

Each time a font file needs to be loaded, the browser must make a request for the file. If there are 2 or 3 font files that requiring loading, this is not a problem. But if a web designer gets carried away, there could be far more requests made.

The guideline here is if you need to use custom fonts, keep them to 2 or 3 files so as to reduce the number of requests and the overall size of the website. Google is now taking into consideration the speed that a webpage is loading. If it is slow, Google will apply SEO penalties to the website.

Good web fonts are small in size and load quickly. Where can you get good font files:

1. Google fonts – Many free fonts and links to paid fonts
2. MyFonts – Nearly 150,000 fonts to use in your website

It is best if you can use a web-safe font. This is a font that comes bundled with a computers operating system. These are fonts like Helvetica, Arial, and Times Roman. There are many others. But if you use one of these no additional files are required to load the webpage.

Image Size and Density

Another area where a web designer should focus attention is on image size and density. Normally, images don’t need to be more than 1920 pixels in width and even then only for full-screen width images. The density of most images should be 72 dpi. There are screens that support 96dpi, but 72 dpi will work on these screens just fine. A larger density such as 300 dpi, is suitable for print, such as brochures, name cards, etc. But it is not necessary for displaying on a computer screen.

There are other issues relating to the use of images. But these issues are more technical and do not necessarily apply to web designers.

Just remember to supply your images to the development team in the largest format needed for the website, and at 72dpi. Do not supply images smaller than the largest size needed. So, if an image for a desktop layout needs to be 900 pixels wide, do not provide a 300 wide pixel image. The developer will need to scale it up and the image quality will suffer badly.

Summary

We hope these simple SEO tips for web designers were helpful. In our agency, these are the SEO considerations our web designers deal with the most.

If you have other issues you or other web designer are having trouble with, we would love to hear from you. Let us know what your SEO tips are for web designers.