5 Tips to Improve your Site’s Design and Ranking

Posted In: Usability, By , 4 Comments

The “give-and-take” between design and functionality is something that can be seen in many situations. While having a superbly crafted interface is extremely functional, there are many products with quality designs, think automobiles and fashion, which are not practical at all.

A good design for a website usually indicates that it has a high level of usability. This means that there is a sufficient amount of visual cues that will help users to navigate through the content on the site.

Where a trade-off between performance and design can arise in web design is in SEO. Most design elements rarely help SEO; in fact, they can actually have a negative effect Here are 5 tips that designers can use in order to ensure that their websites have a chance to rank well in SERP’s.

1. Optimizing Images

Optimizing Images
SEO can be affected by the way that you embed images on a webpage. Basically, there are up to 3 elements for embedded images that can help to optimize your site for SEO.

The Filename. It is important to properly label your image files. These file names should use keywords that are relevant to the image. It is also recommended to use a dash to separate words rather than an underscore.

Alt Attributes. Have you ever noticed when you place your cursor over an image and a piece of descriptive text appears? An alt attribute is what provides this text for the image. Alt attributes were originally created in order to help the visually-impaired to navigate through a page. However, these are now used by search engines to index the keywords that are relevant to various images.

These alt attributes present another way to notify search engines that a webpage or website is relevant to certain keywords. If you slip these keywords in to your description you will be able to help improve that page’s rankings on SERPS.

Title Attribute. When the image in question is a hyperlink that links internally it is possible to apply the title attribute to the link. A title attribute is a way to indicate the significance of the link and its landing page, to search engines.

When it comes to text links the anchor text is used for this purpose. However, with an image link there is no anchor text. That is why it is a good idea to place a title tag in the link portion of the HTML for the image link. This will provide another signal to search engines about what users will find when they click on that link.

2. Page Load Times

Page Load Times
The length of time that a page takes to load is one of the factors that help search engines to determine how that page will rank. The main priority of search engines is to deliver the best results to users. These users happen to be humans who do not enjoy having to wait for a page to load. So if your website is having load-time problems it will have a negative effect on your ranking.

There are certain measures that can be taken in order to improve your load-time. Firstly, it is recommended that you optimize all of the images on your websites so that they do not weigh down the page too much.

Secondly, it may be a good idea to use a file hosting service. These will host all of the images and media on your website and spread them out amongst a worldwide network of servers. The server with the closest location to the user will be the one that loads your website’s media. This will allow the fields to load much quicker for the user.

Thirdly, your CSS should be optimized. Start off by searching for ways in which you can clean up and shorten your CSS files so that browsers have less to process. It might also be a good idea to find out how many stylesheets are layered on top of one another and determine if it is possible to merge any of them.

Lastly, if your page is running any javascript or widgets, set it up so that they load after the main content area has finished loading. This will ensure that if the third-party javascript does not load, it will not drag your entire website down as well.

3. Copy Elements

When it comes to having a website rank well there are few things that are more important than content. This high level of importance is partly due to the user. If there is no content on the page, than there is no reason for a user to visit that page. Another reason for this importance is the SEO factor; the keywords within the content are used by search engines to determine what the page is relevant to.

There are certain HTML design elements that can be implemented in order to help your page rank in SERPS; and that will have an effect on the appearance of your content.

Header tags (H1, H2, etc.) are a used to divide up the content on a page. These are useful visual cues that make the material easier to scan and therefore, help users navigate their way through the content.

Headers are also used as an indicator to search engines to tell them what the page is about. Headers can be even more important than the specific keywords used within the content when it comes to influencing the page’s ranking.

When creating content for your site, start off with giving the article a title by using a H1 tag. If you have 250 words of content or more you can then figure out how to break it up with H2 and H3 tags. The result will be a piece of content that is easy to scan and therefore, more user-friendly. It will also result in another strategic area to place specific keywords that you would like the page to rank for.

4. HTML 5

HTML 5 has two important SEO benefits. The first of these is the load-time. HTML 5 is a great alternative to using Flash because it allows you to include interactive media on your website that will not drag it down too much.

Another benefit to HTML 5 is that it provides a significant amount of tags for designers to make use of. These tags can be used to organize your material and structure the content so that search engines will be able to comprehend it. These tags include header, footer, article, section, div, etc.

HTML 5 tags are a good way to provide another signal to search engines to let them know that a page, or a specific section of a page, is relevant to a set of keywords. For example, rather than using the div tag you can use the article to tell search engines that this section of the content is the main focus of the entire page. This way search engines will know that the keywords in that area carry more importance than those that are located elsewhere.

At this time there is no solid documentation that explains how HTML 5 tags will figure in to how search engines determine a page’s ranking. However, using HTML 5 will not hurt your ranking position and it may have a positive influence in the years to come.

5. Flash Hacks

Flash Hacks
Flash is not as popular as it once was; there are fewer new Flash-based websites being launched these days. However, this does not rule out the possibility that you have an existing Flash website or that your site includes some flash-based elements. There are two ways in which you can help your flash sites get more SEO kick.

The first thing that you should do if you are running a site that is primarily driven by Flash is create a HTML shell for the website. This shell should include the site’s text links, page titles, meta descriptions and possibly a little descriptive text that explains the flash content. Once this is done, use javascript to determine if a browser can view Flash or not. If it cannot view Flash (this is the case for search engine bots) the HTML shell for the site should be presented in its place.

Once the HTML shell has been created you should optimize all of the individual flash elements. This recommendation applies to sites that are completely based on Flash and to HTML websites that include certain Flash elements.

To optimize a Flash element is similar to optimizing an image. Basically, you should label your flash files using descriptive keywords and keep these keywords separate with dashes rather than underscores. This will give even more signals to search engines that will let them know what you page is about.

Final Thoughts

In terms of SEO there does not have to be any give-and-take between a website’s performance and design. This is because having a good design can help with a site’s performance.

There are multiple methods that can be used to optimize your existing design for SEO purposes; or that you can use to improve your design to the benefit of both SEO and usability.

However, there can be a time when a trade-off between the site’s performance and SEO arises. When you run up against one of these situations it is always best to design in for users rather than the search engines.
It is important to keep in mind that search engines work to deliver the best results to humans, not to search bots. If you design with search engine bots in mind you will end up with no users viewing your page; and your chances of ranking well on SERPS will vanish.

About the Author:

Web designer/developer holding Masters degree in IT, currently living in Australia. Passionate about Wordpress, PHP, Fireworks and Jquery.
  • http://www.garimela.com Khandaker Mehedi Hasan

    I am a new website & graphic designer this “5 Tips to Improve your Site’s Design and Ranking” tutorials will helpful for me.

    Thanks & Regards

  • http://www.wordsuccor.com/ Emily Johns

    This may sound a little cheesy but practice makes perfect, the more you do it the easier it becomes. Thank you for sharing, great post!

  • http://www.authorselvi.com Priya Ganesh

    Great Post, Thanks for sharing! Would request you to update to latest 2017 trends.

  • http://fugenx.com/services/mobile-application-development/ Sam sandy

    Straight to point Article. Tips will be really useful. Nice one.