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.
Responsive Design
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.
Use HTML5
Image by iprospect
It goes without saying that html5 is the future because there is lot more you can do with it compared to simple html. Most web browsers are compatible with it nowadays and they are integrating all html5 features so for instance instead of using javascript/flash for animations why not use html5?
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.
Better use of javascripts
Case study by yottaa
As you know javascripts are very important nowadays and with more mobile usage people are using more and more menus, carousels etc in javascript so consider following;
-
Remove unnecessary javascript imports especially when you buy themes or pre made templates.
-
Do not use inline javascript code or js files in head, because when the webpage is loading, it stops to execute javascript code, once it’s executed it continues to load the remaining of the page so delay on page loading speed.
-
In case if you have external javascript file imports such as jquery from their server (<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>) need loading, there is an additional time of getting that file from the server it resides so again page loading speed compromised.
Best option is to combine all javascript in one file, minify it, and use async attribute <script src="app.js" async></script> and put all javascript files just before </body> tag.
Async attribute tells the web page to continue loading the page and load the javascript file once it’s downloaded/ready. This increases the performance and load pages faster. Although sometime you may not be able to use async depending on what you are trying to achieve so keep this in mind before using async with every javascript file.
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.
Try using other means of doing the same thing such as javascript or other css properties.
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.
Cool, right?
Check this excellent list of all the tags available.
Responsive Typography
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.
CSS
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
check searchenginejournal.com
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.
Knowledge graph
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.
Breadcrumbs
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
Well you hardly see any new websites built in flash but there are still old websites which use flash. Everyone knows with the emergence of html5 and javascript liberaries you can pretty much do anything which you used to do with Flash. Even Mozilla announced last year that it can run Flash content without Flash plugin.
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.
You can use html5 instead of flash for certain functionality and also use javascript for many other features.
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.
Minify everything
At the end when you have finished designing your website, you should minify all your javascript, CSS, and html code.
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.
AMP reduces the size of page by cutting on most speed hungry css, javascript etc, thus increasing the speed.
Want to share this infographics with your audience? Simply copy below code and paste it in your blog html.
Source http://www.ikozmik.com/web-design-trends-to-follow-for-better-seo-in-2016
I just came across an update on this article which I wanted to share. Please check The 60 Biggest Design Trends Of 2019
Referral Marketing: Why It Is Important And Here To Stay