Responsive Design: Optimize your site for mobile devices

Usage of mobile devices forms a significant source of web traffic and, just like for computers, it is necessary to optimize your site so that it works best on mobile devices. Here are some basic ideas (and techniques) to understand everything a little more clearly.

Search engines classify websites optimized for mobile media into three categories:

  • Sites using responsive web design. The structure of URLs and HTMLs remains the same for all media (mobile or not) and only the CSS varies to adapt to the resolution of the screen used. This is the configuration recommended by Google.
  • Sites that use the same URL’s structure but whose HTML and CSS vary according to the media used.
  • Sites that use specific URLs based on the media used.

In this article, we will see how to implement each of these three configurations.

Responsive web design

Responsive web design is a configuration where the server always sends the same HTML code for all devices and where CSS changes the appearance of the page based on the size of the screen used. Search engines automatically detect this configuration and the user can thereby consult the pages in an optimal manner. To give you an example, here is the kind of CSS specification you can use:

@media only screen and (max-width: 640px) {...}

The maximum width of 640 pixels is only an example, not an obligation. However, try to define a reasonable width compared to the sizes of smartphone screens used most frequently. Each technical configuration has its advantages and disadvantages, so you can set up the one that works best for your site. Generally, if your configuration works on Google Chrome or Apple Mobile Safari, it will be compatible with most search engine algorithms.

Why use responsive web design?

Here are the three main reasons why search engines encourage you to use responsive web design:

  • By assigning the content of a web page to a single URL, you will facilitate its interaction with your visitors, and also facilitate the sharing and the creation of links that refer to your content. In addition, this will help the search engines to index your content correctly.
  • Not redirecting (depending on the device used) reduces the page loading time, which is considered to be one of the major components in regards to quality of user experience.
  • You save time and resources both for your website and for the search engine robots that analyze your links (the so-called “crawlers”). The pages optimized for responsive web design need to be analyzed only once by the robots (unlike other non-optimized pages) to recover your content. This optimization will allow robots to better index your content and display your updates faster.

Please note: Make sure you do not prevent robots from analyzing all the components of your pages (CSS, JavaScript, images) that use robots.txt or other extensions. The fact that robots have easy access to these external files will allow them to automatically detect your optimized configuration in responsive web design and therefore display your content appropriately.

Using the same URL structure but a different HTML

This configuration will allow the server to respond to user requests with different HTML (and CSS) code while keeping the same URL. In this configuration, the fact that the site changes the HTML code for mobile users is not immediately visible. Indeed, the content of the mobile site is then “hidden”, so it is recommended that the server sends a signal to the robot of the search engine so that it comes to analyze the page and discovers the mobile content. This trick is implemented using the “HTTP Vary” header.

HTTP vary header

The HTTP Vary header is important for the following two reasons:

  • It tells the cache servers used by the access providers that they must analyze the media used by the user when deciding whether to display the page using the information contained in the cache or not. Without the HTTP Vary header, the cache used for mobile devices can be mistakenly used for another device or vice versa.
  • It helps search engine robots analyze your mobile-optimized content more quickly.

The HTTP Vary header is therefore part of the server response in relation to a given query, for example:

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
 HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

This means that the content of the response will vary depending on which user agent is requesting to view the page. If your server already uses the HTTP Vary header, you can add “user agents” to the list that has already been used.

Using specific URLs for different devices used

In this configuration, each “desktop” URL has a “mobile” version optimized for displaying content. For example, we will have an imaginary page whose URL structure would be www.pagedemonsitetropcool.com for users of a computer and m.pagedemonsitetropcool.com for users of mobile devices. Search engines do not favour this particular URL format as long as both are accessible by robots.

Annotations for desktop and mobile URLs

To help search engine crawlers understand the configuration of your site, it is recommended to use the following annotations:

  • For desktop-optimized pages, add a special link rel = “alternate” tag pointing to the corresponding “mobile” URL. This will help the search engine robot find the location of the mobile page corresponding to your content.
  • For “mobile” optimized pages, add a rel = “canonical” tag link pointing to the corresponding desktop URL.

There are two methods for setting up these annotations: Directly in the HTML of the pages or in the site map. For example, suppose that the desktop URL is http://example.com/page-1 and that its corresponding mobile URL is http://m.example.com/page-1, the annotation would be:

For the “desktop” page,

<link rel=”alternate» media= ”only screen and (max-width: 640px) ” href= http://m.example.com/page-1”>

For the “mobile” page

<link rel=”canonical” href=http://www.example.com/page-1>

Annotations for your website map

Here is the line of coding you must include for optimized pages for computers:

&ltxml version=”1.0″ encoding=”UTF-8″?>

<urlset

  >

<url>

<loc>http://www.example.com/page-1/</loc>

<xhtml:link

    rel=”alternate”

    media=”only screen and (max-width: 640px)”

    href=”http://m.example.com/page-1″ />

</url>

</urlset>

The rel = “canonical” tag of the mobile URL will have to be added to the HTML code of the mobile page.

These annotations help search engine robots discover your content and understand the relationship between your “desktop” pages and your “mobile” pages. When you use different URL’s to give access to the same content in different formats, the annotations explain to the search engine algorithms that these two URLs have the same content and should therefore be considered as one entity and not two.

If both URL’s are processed separately, they will both appear in the search results and their position may be lower.

If you liked this article, you will probably also like this one: Our tips for creating an effective mobile ad.

Do not hesitate to contact us at 514 572 7758 or via our contact form if you wish to speak with an expert who will answer all your questions.

E-Reputation clean up: Improve your online image with 5 helpful tips

In the business world, the image and e-reputation (online) of your brand may be the most valuable asset that you own. Indeed cleaning up your e-reputation is very important for the lasting success of your business. In the heart of the digital age in which we live and operate every day, it becomes essential for anyone who aspires to lead their company to the “next level” to pay particular attention to their e-reputation and take care to clean up their online image if the need arises.

Truly a birthplace of “living memory”, the web has become a gigantic library that lists everything you have ever written, published and said since your first steps into the huge world that is the “World Wide Web”, a virtual universe that obviously doesn’t escapes the maxim stating that: “Words spoken fly away, while written words remain.”

So, want to take your company to the “next level” and get into the commercial heart of the web-jungle that houses your online business? Here are 5 simple tips for a successful cleaning up of your e-reputation:

E-reputation clean up step one: Reconnaissance mission

First, it is important for you and your team to know the current status of your e-reputation.

Consultation of major search engines

This is truly the first step to the successful clean up of e-reputation. Take inventory of all gears of research that may provide information on your business and make inventory trends driving the discussions that revolve around your online image.

Some essentials to include in your list of sources:

  • Google: The most popular search engine of the planet
  • YouTube: The second most popular search engine (yes!)
  • Twitter: What people think of you, in less than 140 characters!
  • Specific forums and discussion boards in your field: Many sites let users share their thoughts on a particular product or service. (Ratemyteacher for example)

In depth review of all your virtual identities

Your e-reputation includes the sum of subscriptions and accounts you have within the virtual socio-ecosystems such as Facebook, Twitter, Google+ and LinkedIn.

E-reputation clean up step two: Destruction of elements compromising your online image

Submit negative content removal applications

Without being overly pushy, contact the administrators of the sites where you found incriminating content and start a respectful and cordial discussion on your willingness to withdraw content from the “memory” of their site.

Most webmasters are usually very understanding, but it is possible that some refuse to cooperate, no need to embark on a war of words to eventually taint your e-reputation further.

Once this stage is completed, proceed to step three.

E-reputation clean up step three: Drown bad content by creating positive content that increases your e-reputation

Here are two “payable” options that are available to you: e-reputation protection agencies and the use of the use of SEO (Search Engine Optimization) science.

Online image protection agencies

Several companies offer protective services to your e-reputation by promising to follow everything that is written and shared on the web related to your business. These services can be quite expensive and in the end they merely ask with more insistence that negative content afflicting your online image be removed from the web. They can occasionally help you rewrite more positive content to dilute unwanted content.

 The use of SEO science

The second alternative for a successful cleaning up of your e-reputation is to directly tackle the problem by pushing the major search engines to recommend pages that display more positive content on your behalf, rather than direct users to pages which paint a less shiny picture of your business or your brand.

Indeed, companies specializing in SEO have extensively studied the behavior of Google and other search engines and are able to “understand” how these sites choose what content to offer Internet users first. As they are not the secret of the gods, the algorithms of the search engines is what makes them so popular and experts in SEO field can estimate how crawlers of these sites analyze your content and are therefore able to offer you some practices that can effectively dilute unwanted content and attract search engines to pages that give a better image of your brand or business.

Examples of services offered by SEO agencies to clean up your online image are:

  • Content development strategies
  • Optimization of previously created pages so they stand out in search results
  • More attractive content writing for Google crawlers and other major search engines
  • Acquisition of positive links from credible and reputable sites

Cleaning up your E-reputation: A laborious but important process

We hope these tips will help you to know where to start cleaning up your online image. We wish you the best of luck in redefining your virtual identity and your e-reputation!

Do not hesitate to contact us at 514 572 7758 or via our contact form if you would talk to an expert who will answer all your questions.

User Experience: What does this mean for web design

Over the years the Internet bubble has really evolved; today, website design is not only simply concerned with the set up pages one after the other. User experience or UX (from the acronym user experience) has become an important factor in website development.

Have you’ve already started analyzing your audience? Do you know the Internet users who surf your website?  Does your site have all the information needed to provide the best experience for your users? Find out what exactly user experience is in the field of web design.

What is user experience?

The term “user experience” was coined in the 1990s by Donald Norman. By definition, user experience is: “The responses and perceptions of a person resulting from the use or the anticipation of the use of a product, service or system”.

A mix between ergonomics and the human sciences, the user experience brings the most appropriate approach vis-a-vis a target audience based on many offers (products, services, companies, etc.). The more the approach is adapted, the more we notice an increase in satisfaction related to use of a website.

Since 2010, user experience has become the huge asset for web marketing strategies. Many physical businesses have therefore integrated it into their business plan so as to enhance the positive perception that their customers may have about their products, services and brand awareness.

With the ever-increasing use of websites, UX has taken an even larger role as it has proven to be particularly suited to the online world. Thanks to the many existing analysis tools, today we can acquire a great knowledge about our users. Therefore, a company can easily know the demographics of users operating on its site. And it is this deeper understanding of users and their behavior that allows companies to develop effective marketing strategies.

It is obvious that the user experience is deeply rooted in the psychological aspect of the Internet. Nevertheless, it is still difficult to measure all the hidden emotional factors for every user. It is for this reason that user experience is not an exact science and that its implementation requires continuous treatment in order to adjust itself to different users.

Advantages of user experience?

As we have mentioned above, the user experience is a decisive factor in the development of web marketing strategies for numerous companies. User satisfaction vis-à-vis products or services is put under the microscope. The more users understand and appreciate your services, the more users will use these services, or recommend them to others; thereby promoting customer loyalty and increasing the visibility of a product, service or a business. Is it not the goal of every company?

For this, the user experience plays on five key factors:

  • The emotional factor
  • The technical implementation
  • Ergonomics
  • Constant analysis
  • Using knowledge for the experience benefit

Thus, by properly using these factors, it is possible for all companies to build an effective and sustainable strategy.

How can user experience be used online?

Today an effective web marketing strategy doesn’t only depend on the user experience, however user experience does indeed contribute enormously to any web marketing strategy. To make a website “user friendly” it is important to run many analyses on the website. Is the visual layout of my site suitable for my target audience? Are my products or services clearly identified and identifiable for my visitors? Does my site adapt to the latest technology? Do people interact enough with my site, and why?

These questions can be endless, as there are so many factors contributing positively or negatively on website interactions. For this, a large-scale analysis must be performed to find any blocking factors, but also positive factors signs, which may be underutilized.

For this, it is important to understand how humans think so as to present a relevant and tailored user experience. Comprehensive analysis using appropriate tools will be your best ally. Number of page views, bounce rate, and time spent on each page are only a small part of the many issues that must be scrutinized, analyzed and understood in order to identify how users perceive and interact with your site.

The web designers who will create the structure of your website will use all collected information. If you better understand how humans perceive their environment, this will allow you to make your interface immediately understandable, clear and user friendly. Working on this content should help you to adapt to the structure, while serving to educate and arouse the desires of your users. Keep in mind that to attract the attention of your users, a page should not contain too many distractions; this helps promote the best and most effective experience and interaction with your website.

Constantly searching for things on your website can disrupt user navigation, or brake conversions; this can only possibly be fixed with a full knowledge of your audience. All analyzes of your users to design a suitable site should create a guiding path for your visitors; so that they arrive on your site for conversion to a product or service. All of this ensuring that the user is fully satisfied with the steps they have taken. It is in these conditions that the proposed UX will be optimal.

Now you know that to design an effective website, it is important to know who the users are who browse your pages and how they interact with your site. The information you collect should allow you to set up all essential elements to achieve the desired objectives.

When designing your site, it is very important to rely on factors that are very important for your users. Creating a good hierarchy of information available on your site, as well as a suitable web design are elements that are of great importance for bettering your user’s browsing experience. All these essential elements are combined to form part of an optimal user experience for your visitors.

Do not hesitate to contact us at 514 572 7758 or via our contact form if you would talk to an expert who will answer all your questions.

Youpi!
Scroll top