I’m mobile! I wanna see mobile friendly websites!

Providing smooth user experience for mobile users through mobile friendly websites is one of the hottest topics of web design nowadays. Google recently announced that starting April 21; they will use mobile friendliness as a ranking signal. It means you need to be quick to support mobile devices, or your organic traffic might get a big hit until you do so.

Last few months I’ve been focusing on responsive design concepts and did some experiments myself. I would like to share my personal step-by-step mobile friendliness implementation which can be a useful guide for many.

Strategy: Responsive Design

It is possible to achieve Mobile friendliness through 2 primary strategies:

1. Having a mobile-friendly version of your site either using the same URL with dynamic serving or redirecting to different domain/subdomain or folder
2. Having a responsive design

Both have advantages and disadvantages. Having a separate mobile version of the site can be the best performer concerning page speed mainly because you don’t need to include anything that will not be visible on a mobile screen.

Page speed is an important factor for SEO but considering difficulties to keep up-to-date two versions of your website I strongly suggest going with responsive design and apply speed improvements over it.

Having a single site with responsive design will also simplify analytical reporting and tracking. You will also be safer on Google indexing side because any misconfiguration with two different site approach can get you penalized due to duplicate content or you may weaken your Pagerank concentration.

By the way, even you choose to go with the two-site strategy you will most likely end up using a responsive front-end framework for the mobile version.

Using media queries, responsive design will let your site look great practically on every screen size.

Ok, so we’re going with the responsive layout. Now let’s choose how to implement it.

Responsive Front-end Framework: Bootstrap 3

Selecting a framework for the responsive design was easy for me. When I searched for possibilities, I ended up a good summary of 22 responsive css frameworks. For page speed considerations, it may be a good idea to go with a simple framework if you don’t need fancy functions.

On the other hand, a complete framework like Bootstrap will ensure you’ll get whatever you may need in the future. That’s the common strategy I follow during software programming. I choose the platform which is widely used and supported so that I can find components/add-ons and get answers to my questions easily.

It looks like Bootstrap by far the most commonly used responsive CSS framework. It has great documentation and support. I suggest to start with Bootstrap 3 and later either make it lighter or move to a simpler framework if you are sure that one also be enough for you.

Bootstrap officially supported by below browsers:

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.

Implementation

12-column grid system allows Bootstrap to support almost any design format you may need.

Implementation is straightforward. Since Bootstrap is a front-end framework, it will be very quick to implement it. Unpack the files, add the reference to Javascript/CSS files and installation is complete. A good front-end developer with good HTML, CSS, Javascript knowledge can easily convert a whole site into the responsive design in a week. You will need to override only a few default styles, remove fixed width from div and image styles and add grid containers and responsive classes. Most of the effort will be spent for setting up a good menu system for mobile view. The rest can be done with closed eyes.

If you are confused about Bootstrap grid system check this great article explaining the magic behind why the Bootstrap 3 grid works.

You may use Google’s mobile-friendly websites test to test the result:

https://www.google.com/webmasters/tools/mobile-friendly/

If you choose to use an add-on for the mobile menu (e.g. a “Facebook mobile like” menu) make sure it responds fast enough on mobile devices. Checking only from a desktop browser may mislead about the performance of the add-on. I saw many great looking add-ons working so slow on a smartphone. Just be cautious.

Handling Compatibility Issues: Internet Explorer 8 and below

Although it is not very common, Internet Explorer 7 and 8 versions are still in use. While personal users mostly prefer Chrome and can keep their browsers up to date, due to Microsoft’s wide presence in big commercial companies and government offices you will continue to get traffic from older versions of Internet Explorer. It is up to 5-7% of your web site’s traffic, but I think it is still an important proportion.

When you’ve implemented Bootstrap, check your site with Internet Explorer 8 and see the surprise: It shows smartphone mobile view regardless of the size of the viewport. It is because older versions of IE does not support media queries which are fundamental to responsive design. Don’t worry; it is easy to support Internet Explorer 8 and below.

Respond.js is the solution to support IE 6, 7 and 8. As it is mentioned in Bootstrap documentation, below code (with related files and proper directory setup) will be enough to add proper compatibility:

[sourcecode language=”html”]
<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”/respond.min.js”></script>
<![endif]–>
[/sourcecode]

If you want to use respond.js or Bootstrap from CDN, you may need addition configuration. Actually, when checking with page speed tests I found using local css/js files faster than using content delivery network if your server is powerful enough and your visitors are concentrated in one geographical area (e.g. all from one country). Of course you may consider CDN once again if you are getting huge traffic.

After adding respond.js to the code, you’ll see that your site looks on IE 8 almost same as other browsers. You may need to tweak some div sizes, margins, paddings, etc. You may go for them and fix one by one or entirely ignore small differences as they have almost no user experience effect and do not worth the effort.

Visual Add-ons: Font Awesome and Glyphicons Halflings

I’m sure every front-end developer had tough times to find proper icon sets. You like an icon set, but you need to resize every image. You find a great set of icons, but they are not in the color you need. You see a beautiful icon but it is not transparent, or someone added a drop shadow to it.

Now we have a solution: scalable vector icons that can be instantly be customized. You can change anything that can be done with the CSS power. Color, size, drop shadow etc. You do not need to maintain CSS sprite images anymore. No need to use Photoshop to customize simple icons.

Font Awesome brings over 500 vector icons with only one font! Similarly, Glyphicons have over 600 vector icons and comes bundled together with Bootstrap. Since it was already in the pack, I chose to use Glyphicons. The icon sets are more or less the same. You will probably need only a few familiar icons for the starting: search, mail, telephone, user, trash bin and navigation icons.

Glyphicons are an excellent way to add icons and customize them.

When you try to use Glyphicons you may face with two issues with quick solutions:

1. If your icons are not visible and, you are using Bootstrap over CDN. It is due to some of the Bootstrap CDNs do not include
Glyphicons. Just download Bootstrap pack and unzip /font folder and it’s content to your web site’s root.

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

2. Although Glyphicons are visible, website checks or Fiddler debugger give “404 not found” error for woff/woff2 files especially used by Adsense ads served on your site. It is due to these MIME types are still not a standard and might not be configured on your web server.

For ASP.NET sites running on IIS, just add below code to specified location in your web.config file and you’ll be fine.

[sourcecode language=”html”]
<system.webServer>
<staticContent>
<remove fileExtension=”.svg” />
<remove fileExtension=”.eot” />
<remove fileExtension=”.ttf” />
<remove fileExtension=”.otf”/>
<remove fileExtension=”.woff” />
<remove fileExtension=”.woff2″ />
<mimeMap fileExtension=”.svg” mimeType=”image/svg+xml” />
<mimeMap fileExtension=”.eot” mimeType=”application/vnd.ms-fontobject” />
<mimeMap fileExtension=”.ttf” mimeType=”font/ttf” />
<mimeMap fileExtension=”.otf” mimeType=”font/otf” />
<mimeMap fileExtension=”.woff” mimeType=”application/x-font-woff” />
<mimeMap fileExtension=”.woff2″ mimeType=”font/woff2″ />
</staticContent>
</system.webServer>
[/sourcecode]

Adjust your Adsense Ads for Mobile Friendly Websites: Responsive Ad Unit

Google Adsense has already introduced responsive ad units to support mobile friendliness and changes in viewport size. You can create a responsive ad unit in seconds and replace your existing ad codes with new ones but if you are planning to make any modifications over the code I strongly suggest going through Google guidelines in advance. The number of ad units, the effect of display:none ad units on this count, the number of big size ad units and dynamic resizing of ad units are sensitive topics you need to master before any implementation.

Although Adsense Policy prohibits sticky ad units, official Google Adsense blog announced upcoming mobile anchor ads to make ad units sticky on mobile views.  It is still not rolled out to public therefore I would stay away from manually fixed ads (sticky ads) on mobile views until it is officially provided by Google.

Mobile Content SEO Strategy: Prioritize your primary/unique content

While moving into responsive design, it is good chance to re-visit your SEO strategy and adjust your layout accordingly. Google does not like hidden content in general. It does not mean that you should not hide anything.

If you believe a part of the site is damaging user experience on mobile views you may choose to hide it for mobile visitors. For example, you may have a “contact us” link both on top and bottom of the page on desktop view but due to limited space, you may want to hide the top one on mobile view.

I believe navigation items are the safest for hiding to provide better user experience for mobile devices. On the other hand, think 10 times before hiding any useful content. As Google’s Web Spam Team head Matt Cutts mentioned hundreds of times, general rule of the thumb applies here as well:

If the visitors find useful content with smooth experience Google Search Algorithm will also appreciate your site.

Prioritizing the useful content is done through 2 steps:

1. Visual prioritization

2. Prioritization in code

Visual prioritization is the easiest way to move content to the upper side of the page, basically above the fold. It means, better you keep your header, navigation and ad area small in height so that visitors can quickly start reading the content and recognize if the content is useful or not.

Similarly, moving sidebar menu from left to right can also help. It is much related with above the fold page speed measurement which I’ll explain later in detail.

Prioritization in code can be a little tricky. I suggest applying just small float left/right setups for that instead of using Javascript to completely redraw the page. Inside your code, content visible on the right side of the page can be before the sidebar on the left side of the page.

New Generation SEO: Focus on Page Speed

Google has launched Page Speed Service as limited field trial.

Page Speed is playing more important role than ever. Page Speed is already one of the major components of new generation SEO: Fast responding page means smoother experience. Smooth experience means visitors will appreciate more. If visitors appreciate more, Google also does and ranks your site higher. Higher ranking means more organic traffic.

For the beginning, below two tools will be your best friends during optimization process:

1. Page Speed Insights

Page Speed Insights by Google is the ultimate benchmark tool for all of us. Basically, the scores you’ll get here will be the ones affecting your ranking. It measures desktop and mobile page speed separately as well as mobile user experience. Guidelines to improve performance are quite clear. Just go over the identified issues one by one and try to fix them. Getting a 95+ even 100 score for mobile user experience is easy I would say. The most challenging part is to decrease server response time.

2. Web Page Test

Web Page Test tool shows details about every single object your page loads. It clearly shows execution order, how much loading each file takes, how much time it takes to render the first view and complete the page. Using this tool you can identify the images you can merge in CSS sprites to decrease server rounds. It is also useful to see if javascript deferring actually working or not. It helped me finding out missing woff file declarations which were not visible on human eyes. There are a few more free web tools providing similar analysis, you can pick any.

Are you ready?

Use Google’s Mobile Friendliness Test, Page Speed Insights tool and Webmaster Tools to see readiness level of your website. Do not rely much on emulators or desktop views, go and find actual mobile devices and check your site’s visuals and page response times.

If everything seems okay now it is time to focus on page speed once again. Since it is a very broad topic, I decided to write a separate post about page speed strategy and tactics.

Time to see the mobile friendly websites!