The success of a website starts with its conception. The past days, a site design was used to retain user attention. Right now, it does more than that. The way your site are coded is the base of its success or fail!
A website is now designed for both human and search engine. New technologies are being used and the web bots are more intelligent. It makes a semantic web where bot understand websites to deliver the best answer to human’s requests.
In fact, It is difficult to give priority to user or search engine experience. The key is to consider them both! Even if a website is made for human reader first, they will find your website most of the time through search engines. And, the user experience is factor of higher search engine ranking for your website.
The ways user acts with your optimized content is a ranking factor for further searches related to those visited pages.
In this article, we will talk about 6 important keys and goals to keep in mind when coding a site. You’ll end up designing a website which is optimized for both user and search engine friendly experiences.
User friendly and search engine friendly website
A website is user friendly when it is ergonomic, easy to read, navigate through and informative and/or interesting.
A website is search engine friendly when search bot which are not human (yeah,… i know), can read, browse, extract information and understand the meaning of your website’s content.
Making a website good for searches engines and users improve your website ranking and placement in Search Engine Result Pages. It helps your website to be easy to get bookmarked, shared and revisited by your readers.
Either you are a freelance designer, hobby designer or pro designer, those following points must be always in your mind when coding or styling! Here are 6 important keys that make a website successful and enhance search engine and user experience!
Key 1.- Make it Cross browser
A website which is cross browser is a website which look the same or are still nicely rendered on most web browsers. If you are not using LESS CSS, using -moz-, -0- and related may help keeping the same look and feel everywhere!
A cross browser website helps protect a brand, keep the whole audience happy. Different Technics and frameworks are being developed today and we may take a look at some of them in further articles.
Key 2.- Make it Responsive and mobile friendly
The access to the web and internet services through handheld devices is being increased continuously. If you’d like that the person A at office, the person B at beach can both access your website through whatever the used device, you must consider developing both desktop and mobile version of your website or making your site responsive.
Thus different approach exists, you have to decide on the best among responsive design, mobile detect or mobile apps! Process are started to create different results pages for web and mobile search! Only the site optimized for the related platform will nominate the searches for that particular search. It is necessary to start today and make your site available everywhere!
Key 3.- Build it with Semantic coding
Since HTML 4, the web is being meaningful for software. The process of making web easily understandable for web programs is called semantic web. It is even more present in HTML 5, the latest to date version of Hypertext Markup Language (HTML) from the World Wide Web Consortium (W3C).
HTML 5 comes with tags such as <article>, <aside>, <header>, <footer>, <section>, <cite>. It includes various input type (email, number, tel, date). All those tags are more precise than a fieldset, a div, span or text input. They are understandable by both human and machines.
There are also open graph tags for your site head which is invisible to your users. They help you customize how social networks extract your content at sharing and let them understand it.
Even the classes used for your website define your content. If you find most websites with classes [published, updated, hentry, entry-title, entry-meta], it is just standard classes for micro info extraction which may help your site ranking. You can read more about it on micro formats dot org!
And, Google with Yahoo and Bing use schema.org format to understand web context. It is recommended that each website implements those schemas to nominate the search results. Google has a feature called In Depth Articles Search Results which use those data!
Key 4.- Design it for typographic and readable content
It is recommended and almost required that your site content is more than 300 words. If you are familiar with the subject, it is easy to write a 700 to 1400+ words articles. Now imagine your readers reading these 1400+ lines…
So,- it is important to design your website with classes to make it typographic with nice buttons, table, quote, and more with a reasonable text size readable on any platform.
Typographic take care of space between paragraphs, text font, text color, etc… From my own experiences, an article well formatted have 85% more probability to be read from start to end than the same content writing from scratch without typographic considerations.
Key 5.- Make it load Fast
The load time for a website is important. It is a site ranking factor in searches engines. And even for ad pricing if you are using AdSense.
Use sprites and make use exact dimension image rather than re-sized ones via cascading style sheet. Choose carefully the site background. Use css as much as possible for effect realizable though image and background image gradient. It is recommended to use repeated design pattern for background instead of wide picture!
Key 6.- Make the site content featured
Consider adding your content before for both human readers and search engines. Instead of floating the sidebar, float the content as the floated part must be above the HTML document stream. There are so much Technics to achieve content first such as vertical-align combined with display-inline without float, float with content floating next sidebar, skip to content link, etc…
Those points must be considered by everyone who are, somehow, close to web design! But it is mostly recommended to
- Freelancers who want to produce the best quality work!
- Webmasters who want to code its website to rank at the best place fastest at possible and get audience!
- Site owners who want to order a template with custom requirements!
consider these points will just help you level up your site. A comment or a social sharing will be appreciated! thanks for reading!