6 keys to an optimized design for search engine and user

Double check your site success with an optimized design!


How to design a website that is both optimized for searches engines and readers? It starts right from the conception of your website. Let's see how 6 simple keys may help you optimized design for search engine and user.

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 human reader and searches engines. New technologies are being used and the web bots are more intelligent.

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 searches engines queries. Plus, the user experience is factor of ranking of your website in searches engines.

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 target  to design 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.

It is recommended that your scripts are added to site bottom. As site is read from top to bottom by web browsers, it will increase your site speed. The load of those JavaScript files will remain transparent because your site will be already readable!

Reduce HTTP header request is crucial! Those micro seconds and perhaps seconds requests are really important and play a big role in the complete load time of your site! Reduce images, style sheet and JavaScript requests to gain some golden seconds!

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

The content is the most important part of your website. Either it is text or multimedia, content is king. With JavaScript and CSS positions, you can add your content at top while in the coding it is below a lot of codes. Consider that search engines just extract the content. The CSS is always requested as an independent HTTP request. So, the code is read as it is.

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!

Pierre Eustache

Pierre Eustache C. is the owner and chief editor at heedpages.com! He shares his interests and experiences about internet marketing, money making methods and program reviews, web tools and even more related topics.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ eight = 10

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge