mobile first vs responsive

Since when Google announced its new Mobile First optimization, there are lots of discussions about it. Some just read parts of Google’s posts and provide misleading information about the future of SEO saying responsive is OK.

Google has never said Mobile Responsive First. Has Never said Responsive First. Google Says Mobile First. This is future of SEO

But What Does Mobile First Mean?

Simply, this means that you must have a separate Mobile and desktop sites. And for search engine, those sites that have a separate optimized website have priority for indexing, PR and search listings. In order to avoid duplicate content error, you need to add a meta tag for every single page of your mobile site and another meta tag for desktop to tell search engines that one is the original and the other is canonical.

Why Responsive Design Not Working Out?

When you create a responsive website, you need to use large high quality images so that the responsive functionality, resize it for different width of browser, wide screen monitor, or mobile. These images are usually big files and loading them take time. For example, you use 5 high quality 1600×400 pixels for the slider of your home page, each file will be around 400KB total of 2MB only for a slider. For desktop users that usually use high speed cable connection, this can be nothing, but not for a mobile user.

When you have a separate Mobile and Desktop, we have another scenario. Optimized width of images for a smartphone browser is 600 pixels. Now when you resize your 1600 pixel image to 600 pixel, the file size will be about 70KB and 5 image of 70KB create a total bandwidth of 350KB. (2MB vs 350KB). Now, optimizing just all images for home page, will reduce the bandwidth traffic and speed up page load time. The same will apply to css and other scripts. For a mobile version, you will not need to load css and scripts that are used for desktop version. all these will cause your pages load much faster on a mobile device.

A Simple Comparison

desktop_mobile_first

By Comparing the 2 above screenshots, you will see that google does not accept a responsive desktop for mobile and accepts the separate mobile version.

Check your website here

Other Issues

When you have a Mobile First custom site, programmer has a full control over the css codes and will create an interface with a minimum number of css and script file. Only necessary codes and scripts will be used. The less css and script file your page load, the faster your page loads.

WordPress

WordPress is basically a Blog CMS. There are many plugins and themes that help you create a website with WordPress. You cannot expect the performance and functionality of a custom site from WordPress. Developer create Mobile First custom website specifically for you and your business. This does not apply to WordPress. It is a general purpose Blog website that you can force it almost does that but with lots of plugins.

  • Developers of plugins do not know what you want to do you with their plugins, so they provide so many functionalities that you may want to use only a few of them. All these plugins have their own css and script files that are added in the header section of all your pages, no matter you use those functionalities on that page or not, it is a mobile device or desktop. All css and scripts are loaded. This will create a big delay in page load time. In custom sites, scripts are limited and loaded only on pages that need them. This will also reduce page load time.
  • WordPress all the time provides new version, fixing some problems and offer new improvements. All plugins then have to update their codes and some times, they cannot provide an update and you may lose some functionalities or make your website vulnerable until developer provide a compatible update. You will not have such problem with a custom site.

Can I Have only 1 Responsive Mobile Website and User it for Desktop Too?

It is your website, but can you imagine how an image that is optimized for mobile looks like on a desktop monitor?