Device Independent Web - All For One, One For All

all-for-one-one-for-all
"All For One, One For All!"

 

What Happened...

A few days ago, I got an email with a url to an article on a website.
I clicked it without giving it much thought and the page opened on my web browser and for a moment I was puzzled as it looked quite not what I expected.

The font size was unnecessarily big, the paragraphs filled the entire width of the window, images were stretched, and I scrolled down and on the bottom of the pages there were several huge buttons filling all the available width.

At first I thought ‘what a badly designed website’ and then realised something was not right (other than it looked bad…).

I checked the url and it started with “mobile”.

Yes, it was the mobile version of the webpage.

I removed the “mobile” bit and it reopened the normal desktop version of the webpage now with a lot more comfortable look.

I figured out what happened there. The colleague was looking the webpage on his mobile phone and shared it by sending the url.

I’m sure many of you have the same experience.

 

Why...

I don’t want to start yet another debate what should a mobile internet be like or even the point of the existence of mobile internet (such as “There is no mobile internet” debates). There are plenty of other people talking about it with probably more knowledge than I have.

This post is not to argue or teach others what to do but just to talk about a little detail seems to be forgotten sometimes.

I appreciate the extra effort the people pour in to make their website look better on mobile devices or smaller screens.
Most of the times, it really helps my browsing experience.

But sometimes they seem to forget how advanced the mobile and web technology is becoming.

One example is Chrome browser on all the different devices.
As far as you are logged in, your browsing history and bookmarks are shared between devices. It knows what were the webpages you were looking on your phone so you can open them again on your desktop and vice versa.

It’s not just the browsers.

There are many many chances that you send an email with a link to somebody or even to yourself while browsing on your mobile phone and the recipients may open it on their desktop exactly like my experience above.  

That brings forward the importance of being versatile between devices.

In many cases if you open a webpage saved or sent from desktop on your mobile web browser, it correctly shows the mobile version of the page.

What it seems to be often forgotten is the opposite case.

Even a big company like BBC (http://m.bbc.co.uk) has forgotten it.

Maybe it's like that so the developers can check the mobile version of website easily on their developing process, or just a simple memory loss, or hasn't been considered at all, I am not sure.

 

A Little Thought...

One way to fix this quickly is just not to forget to check what device the webpage is opened on even on the mobile version of the website.

However, if you can afford to re-make the website, probably one of the most manageable ways of ensuring cross device experience will be using responsive web design. This may bring another good old everyone’s favourite debate of what and how responsive design should work but that is another story.

May your tool be Twitter Bootstrap (http://twitter.github.com/bootstrap/), Skeleton (http://www.getskeleton.com/), or HTML KickStart (http://www.99lime.com/elements/) or whatever you choose to work with for an easier start, or even your own creation.

Responsive web design lifts at least the burden of managing two or more different versions of the same page or template for different devices and it comes with an extra peace of mind that you don’t have to worry about the different devices and screens available on the wild all the time.

Another side effect of responsive design I like is that it makes the user experience less cluttered by forcing the designers and developers to think more about what and how to show and not, of course that’s if they are bothered to be bothered…