The Yellow Flashlight goes mobile!

Finally, this site can be viewed on cell phones in a format more suitable and convenient for small-screen browsers.
In a world which is becoming more and more mobile, it is almost a necessity to create a mobile version of a website.
According to Wikipedia, there are more than 5 billion cell phones, on a planet occupied by around 7 billion people.
Countries like Montenegro, Saudi Arabia and Hong Kong, where the number of activated phones exceeds the number of people (in the case of Montenegro, the percentage is nearly double) expose the rather obvious fact that everyone and their dogs have a mobile device. Above all, this article by Wikipedia refers only to cell phones in existence. It does not include the large number of devices such as tablet computers in addition to the already excessive number of phones. However, the number of Web sites with support for mobile devices is still relatively low.


Why have a mobile website?

Having a website with mobile support is not only a matter of luxury but also a necessity. Website developers are constantly looking for more convenience to users and increase the satisfaction in the experience, while at the same time maximize the effectiveness and efficiency of the site. This is why I insist so much on avoiding when possible the use of Flash and begin to replace it with wonderful HTML5 tricks. Thus compatibility is even more effective with new devices. Best of all, creating a mobile version of a site doesn’t necessarily need to be a difficult task. This is where sites like Mobify come to play an important role.


How to make a mobile website out of a regular website?

Besides Mobify, other sites like Onbile can  help you with this task. Some free, some paid, but in this post I will mention the one that I used in the past for The Yellow Flashlight.
With an interface that is easy to navigate, Mobify offers the possibility to modify an alternate file with your CSS style sheet. This means that it uses the same elements of your site and modify it for a presentation on a small screen, allowing you to have a mobile site that is 100% functional and requires very little or no maintenance.
Mobify also points you step by step how to install a mobile browser detector in case you do not want to complicate your task with your own javascript.
There are several ways to detect the type of browser when a user enters a page so we can send the browser to a version of the page most appropriate for the characteristics of your device. This is now a task that Mobify can do automatically, if you wish.
Best of all, you can modify your CSS stylesheet as you please with the help of a simulator that shows you real-time changes.
With a tool like Xyle Scope that allows me to easily see my CSS elements of my site, I was able to achieve in just a couple of hours the implementation of the mobile version for The Yellow Flashlight and as designer of websites, I can offer this to my future customers for free.

Everything works as usual. Even the comments section. I only removed a few sections that were unnecessary for a mobile version, and the language tool that was not compatible with mobile devices. Today, I no longer use mobify, but my own switcher. I did this so I could have more control on what to display on mobile devices. I re-incorporated the language switcher too.

Like always, don’t hesitate to leave a comment or post your question. Have fun with your CSS style sheet for mobile websites!

Comments

  1. Nadira

    Nice browser detector. I’m writing this comment from my new iPhone. This page looks nice in mobile mode. Great design. Cheers

Leave a Reply

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