«

»

May 11 2013

Print this Post

Mobile friendly websites

The file sizes associated with web pages have increased as designs get more complex and rich in media. As expected network speeds have also increased to accommodate the growing bandwidth demand. When it comes to mobile Internet, it is lagging bit behind the conventional Internet. The download speed of a average Canadian household is about 85 Mbit/s in the top tier plans as of 2013, while the average speed of mobile Internet not even 1/3 of it. The gap is so big, it impacts negatively on the performance of general websites. This is why even media companies like CNN, BBC and CBC have developed mobile versions of their web content in addition to media rich desktop version.

The mobile Internet is growing at a rapid rate in almost every country on Earth. Hence, the demand for mobile friendly fast loading websites are growing and so are the tools to combat it. I will introduce you to those tools and their advantages and disadvantages.

Mobile friendly right out of the box

I can categorically argue that almost every single non-graphic/media oriented website in 1980s and 1990s were 100 % mobile friendly. Even the most early version of the Internet called bulletin board system probably more mobile friendly than the desktop version of this site. Today visitors are not only attracted to functionality but also the visual appeal.

There are several way to balance between the visual appeal and mobile functionality. The concept of responsive themes are not a new one because it is similar to those 1980s sites. What sets it apart now is that modern responsive themes do not compromise graphical elements. If you are using CMS (Content Management System) programs, then you can load a theme with responsive support. When someone enter the site on a mobile device or on a smaller resolution device, the theme width and dimensions of elements will change accordingly. This is a right out of the box type solution, in which web editors do not have to depend on outside applications or scripts for mobile version of the site. Obviously it is better than an independent mobile site like in the old days. When you have independent sites, you have to edit two different files when publishing a single post. Another advantage is if you do not have a CMS program, you could still use responsive themes to automate using CSS and other scripts. It is not that hard to implement a responsive theme on a HTML site.

But it is not the silver bullet either. One of the major faults in responsive themes is that if a visitor decide to re-size their window on a desktop, it will response to the change as well. Not only that, on mobile devices you lose the ability to just switch to full desktop mode. Because we have large screen devices like tablets and SG Note II/III, I find some responsive themes can be annoying to use.

Make it mobile

gmneoBy using a separate set of conditions for mobile users, you can create a mobile version of the same content with different a mobile friendly outline. In order to do this, you will install two different themes. A mobile detection script will pick up on visitor using mobile devices and automatically direct them to the mobile version of the site. If they wish, you can still provide an option for the user to switch back to the desktop version. If you are using a CMS, there are many plugins and extensions for both Drupal and WordPress. One of my favorite is Graphene Mobile Neo. I recommend using a mobile theme from the same developers who created your desktop theme to avoid any script conflicts and to retain all the short codes in the mobile version. Hence if you are using the Graphene Desktop version, please consider buying the their Mobile Neo version. A lot of people don’t know that Graphene WordPress theme is highly customizable and can be use even on large scale corporate environments. You can also use either versions of the Graphene theme as a stand along (without the need to have one version to support the other).

Unfortunately I have already purchased a mobile friendly theme for this site from another developer. It is actually far more expensive than Mobile Neo. It does not support any third party short codes without major modifications to the code. It is called WPtouch. I don’t say that their version is bad, but they do charge an arm and a leg for not only for initial purchase, but also for higher upgrade versions. They probably have the most popular mobile plugin in the WordPress market. I do not recommend them because I don’t think the theme worth $59 Canadian.

I have to be honest that I am bias towards mobile themes (as opposed to responsive themes). I don’t exactly remember where I read them, but several research groups have studied the load time and resource usage by a responsive and mobile themes. The conclusions of these studies are about 50/50 in support of mobile themes. I personally noticed that having a mobile theme and/or an independent mobile version to be more useful. The biggest advantage is that since you have two independent set of options for each version, you have full control over both versions. In addition, users now have the option to switch between the versions when using mobile devices. I publish a lot of Geology and Programming related articles here. One of the responsive themes I tried pushed some of my content to a side when viewing on a mobile window. It makes it harder to read and sometimes even useless all together. While I am sure someone will come up with a way to switch off responsiveness of a responsive theme (what a crap load of words, lol), I still prefer the customizations of mobile themes. You can also reduce the server load by preventing scripts specifically used on desktop, when someone use your mobile site. Another thing I did with mobile theme is to replace a code in mobile version to optimize usability. For example, let’s say you have a photo gallery. Each photo is open on a pop-up “lightbox” on desktop. If you have the same operation, but now on a very small screen, the pop up will most likely will either go off screen or will be too small to view. You could replace the code specifically in the mobile side to avoid such issues.

Problems with browsers

A major problem with browsers is that there are too many. Look at IE (Internet Explorer) disaster. I hate writing code just to make IE users happy. Depending on the mobile browsers your visitors use, your site will be displayed either right or wrong. Nope, I never seen half-right rendering. Specially if you are running a business, you need to have the online publications as smooth as possible. Even I found myself switching to desktop version of my own site because some of my images are improperly rendered in the mobile theme. This another reason why I support mobile theme with a desktop switch option!

Conclusion

At the end it is your choice! Some of you will disagree with my experience with WordPress mobilization methods. As long as you can keep your mobile visitors (customers) happy, that’s what counts. When designing and coding websites, keep in mind that most people are not as tech savvy as you are. Do not expect your visitors to spend time figuring out how to make their experience pleasurable. It is your responsibility to provide support for the site.

Permanent link to this article: http://sanuja.com/blog/mobile-friendly-websites