As you know search engine optimisation plays a major role in the growth of any online business and most internet marketing strategies revolve around or at least include seo as part of it, so it is essential to educate your web designer to follow the best practice.
While I think most experienced web designers will know about all of these practices but it is a good resource for a junior/mid-level designer and almost covers everything you need to know for best seo practice when converting your design to html.
Design by mosaic digital
I think every web designer out there knows about responsive design so if you don’t already do it, you should implement it. There are many excellent resources available on the web so I won’t go in details about how to properly implement it but would like to give one suggestion.
For responsive websites I will base my website to fit maximum 1366x768 resolution (unless you have a design which you are OK to fit 100% regardless of the screen size, as the bigger screen size will expand the web design which might not look good compared to small screens where responsive will keep your design intact).
Why I am saying maximum 1366x768?
Because we collected this data from our recent seo campaign which shows what screen resolutions are used most by users.
As you can see the most used screen resolution is 1366 or less so this is the perfect max size I would use for my website.
With google mobile update it is essential to have a responsive or mobile friendly design to be ranked in mobile search so responsive is absolutely recommended.
Use Responsive Viewport
With constant increase in mobile usage, we need to make sure all our websites work on all devices seamlessly.
For mobile devices don’t forget to add viewport <meta name=viewport content="width=device-width, initial-scale=1">
This controls how your website is displayed on a mobile device and adjusts the width and font sizes etc. Although this is part of a responsive design but sometimes people use fixed size viewport which is not recommended.
Image by iprospect
html5 is really additional tags you need to learn and what are they used for so it’s not hard to learn if you already know simple html.
If you compare Html vs Html5 you can see all the positive things html5 brings to your design and how easy it is to learn.
Case study by yottaa
Use Optimized images
Images are backbone of any design but many designers don’t realize that you can still get a good quality image with a lesser size if you optimize the images properly. Large images not only take long time to load but also use more bandwidth.
You can reduce the image size without losing much of its quality so go to the absolute limit of reducing the file size. Since there are many images in a normal design, you will reduce lot of page size and bandwidth and increase website loading speed. Don’t forget to use alt tags with each image and consult your seo person to get the image names and alt tags right while converting to Html.
Use of Display:None CSS property
While hidden text and links are black-hat according to google, displaying text as display:none; css property is in sort of grey area.
There is a mixed opinion about this but I would like to stay away from it simply because according to google if user and search engine see the same page differently it comes under black-hat so here is a little test I did.
If you see the above image, you can see I am using display:none attribute on word “Demo” and google can see that, while normal visitor cannot, so technically it violates the seo rule.
Obviously there are many occasions when you use this attribute, sometimes you will load the content in tabs which will set the content to display:none but since user knows that there are tabs and they can navigate to it so I have put this as grey area for seo.
Use mobile specific tags
Many designers may not know this but there are many mobile specific tags you can use in the html to create better user experience. For instance <a href="tel:00447930695611">Call us at 00447930695611</a> can be used to initiate a phone call from phone by clicking on the link.
Or use <a href="sms:00447930695611,00923008501950"> to initiate a message to multiple phone numbers, remove one number and comma to initiate to one number only.
Check this excellent list of all the tags available.
Excellent resource on typography
Most of the latest design trends use heavy typography which looks good for obvious reasons but use too much resources. Try not to use heavy font files or too many fonts in the same design.
Keep it simple and use one or two fonts. Make sure the font size is not too small for different devices and easily readable in mobiles devices.
Make sure when your design is finished there are no duplicate or unnecessary styles in your CSS. Remove them before making the website live.
If css is small and you have one page website you could always use inline CSS (by inline I mean if you have 10 styles you can copy them in the head section of the page instead of keeping it in .css file to reduce round trips to the server).
Rich snippets are used by google to better understand your content on the website. Make yourself familiar with these and start using them in your html.
You may not have to use it first time when you do a design but as a web designer you should learn about rich snippets so you can easily implement them.
These are essentially additional html properties to give more details to google about your content and very easy to implement.
While rich snippets may be used on demand depending on the website you are working on but you should consider using knowledge graph by google by default with each design anyway.
Knowledge graph is telling google about your website or company. There are three elements you can configure easily within your design and these elements are Logo, Contact details, and social profile links.
These will be then displayed by google in search results when someone searches for your company. Remember if google trusts your website, it will always be preferred by google in search results.
Many websites use breadcrumbs specially e-commerce websites or websites with lots of navigation. Remember to optimize the breadcrumbs for google as well. It is same as knowledge graph so you don’t need to learn anything extra for it.
Avoid one page websites
While this decision may not be entirely yours but you should try to avoid one page websites because google will have only one page to crawl so making it hard to optimize for many keywords, plus if everything is on one page it will increase the page size resulting in increase of load time.
Flash is obsolete
Flash has its own limitations, requires plugin to install and open to security threats.
Since Apple didn’t allow flash on iOS designers and developers have been moving on to different technology.
Open graph protocol
Just like knowledge graph by Google, web designers should be able to work with open graph.
Open Graph protocol was introduced by Facebook to promote integration of rich content from other websites to Facebook. So you can basically give more information to Facebook about the content being shared such as title, description, image etc, check kissmetrics article on how to use these tags properly.
Twitter also uses the same protocol so it’s worth spending some time to understand how it works.
This will not only decrease the size of your web page but also will make life hard for “design thieves” to copy anything from your website ;)
I hope I have covered as much as I could. Don’t forget to leave your comments and tell me if I have missed anything.
AMP (Accelerated Mobile Pages)
Accelerated Mobile Pages (AMP) Project is an open source project introduced by Google.
It is introduced to accelerate viewing of news, articles, blogs etc on mobile. It is basically an additional set of tags in HTML so a normal web designer who understands HTML should be able to work with it easily.
Want to share this infographics with your audience? Simply copy below code and paste it in your blog html.