To design pages also for Tablets/PDA/Mobiles or wait ?

[NetProwler]

It is often noticed that people who are running forum create free application for Android/Ipad tablets. It makes it easy for the die-hard forum members to partake in the discussion. But in the process, they lose out on the opportunity to serve ads - but that is a different story.

I collated some interesting information from our server logs about the kind of browsers people use in different countries:

USA/Canada :

Internet Explorer: 42 %
Firefox: 18.5 %
Google Chrome: 16 %
Safari: 13.4 %
Android Browser: 2.5 %
Opera: 1.4 %
Iphone/Ipad: 0.6 %


Western Europe: UK (English pages):

Internet Explorer: 58%
Firefox: 18 %
Google Chrome: 12 %
Safari: 8 %
Android Browser: 2.5 %


Asia: India/Malaysia/Singapore:

Internet Explorer: 34 %
Google Chrome: 30.5 %
Firefox: 25.8 %
Safari: 3.2 %
Opera: 2.3 %
Android browser: 1 %


The above information averaged over a period of 3 months on a few general topic sites, shows that we have to pay more attention to Google Chrome than we have ever done in the past. Some of our pages don't render well in GC as they do in IE/FF which we will address in due course. (CSS lines, borders and other elements desire different treatment in Chrome). Looks like we are back in the 1990 -era of cross browser compatibility issues.

Our main worry is the growing trend of hand held devices (Tablets/ Mobiles/PDA) and how do we design pages for them ? The screen size varies so much - from large screen LCD TVs running Android, Ipad's 10 inch screen and the minuscule mobiles sporting 3.5 inch screens.

There is no one size which fits all.

My tablets show images all right - only the text needs to be enlarged. What is the general ball park figure in designing pages for the diminutive screen sizes ? Sadly we still carry over some remnants of tabled pages.

Any insights ? Or the whole exercise can be shelved for now ?

[deepsand]

Unless the site(s) in question is(are) of a commercial nature, with a customer base known to actively be engaged in on-line purchasing, I'd bag it for now.

[a53mp]

IE does not render code correctly, if it did then it would work fine in Chrome and FF and other browsers.

[geels]

We have found that many of our clients with mobile devices actually prefer to use the full web sites. Some mobile sites are annoying and limited in scope. It is true that the low end devices with screens 3.5 inch or lower are better serverd by mobile sites, but the trend it toward larger screens so specifically designing web sites for mobile devices may not be as important as you may think. Do not assume that everyone with an Android device prefers a mobile site.

By all means test your web site and eliminate problem hotspots. Make it usable on mobile.

[subsystems]

One organized workable solution is to construct the layout of your site into a more or less multi-column format. Over simplified example: Create div columns 1 - 5. Have each column the same width. Each panel of content can be defined to be 1 column wide, 2 columns wide etc. Create 5 different layouts and set a cookie to store which layout should be displayed for the device. Now for each layout define which panel should appear in which column(s) as well as the number of columns widths the panel should be. Note: I'm not saying the content within panel div is always multi-column. When I refer to column 2 the panel could be 1,2 or 3 column widths wide but still the panel content could be a single non-columnar block of text or wide version of a graphic etc.

For a mobile phone everything would be in column 1. For medium tablets the layout would be 2 columns. For PC layout 5 your header would be 5 columns wide, left nav in column 1, right info in column 5 and for the middle content it would start in column 2 and be 3 columns wide.

I've seen similar layout methods referred to as the grid method. It is a more organized way to deal with the problem and give a good looking controlled appearance on a variety of devices.

[deepsand]

IE does not render code correctly, if it did then it would work fine in Chrome and FF and other browsers.

Not really. At the very least, different browsers implement different features of the as yet incomplete standards for HTML5 and CSS3.

[NetProwler]

Thanks for all the replies.

@deepsand : I would follow your advice "I'd bag it for now.". Succinctly put. Thank you.

@a53mp: All browsers have their own way of rendering CSS. GC and Safari use Webkit rendering Engine and hence require some workaround.

@geels: Yes. Thanks.

@subsytems: Although your idea of columns looks good - I am worried about the extra complexity. Do you have any page in mind with that kind of layout ? It would be helpful to view them.

Thanks again.

[diyday]

You can use the Opera Mobile Emulator to view your site as it appears in various tablet devices, and develop your site for mobile-friendliness right from your desktop. The one drawback to it is that, as far as I can tell, you can't use it to view your site in the Apple browser (iOS). However, you might be able to create a "Custom" profile for iPad settings (I don't know, I haven't tried).

opera.com/developer/tools/mobile/

[NetProwler]

Thanks diyday. I have android tablets and Android running in a virtual box. I have to hunt for an Ipad emulator.

[ronchalice]

It really depends on your target audience. Mine will likely be using Kindle Fire and Nook tablet in addition to iPad, iEtcetera, and Android tabs and Smartphones. By the end of next year I expect that less than a quarter of my audience will be on desktops/laptops. So... I'm already beginning major conversions of 80 sites. About 25 wordpress sites are already done, using WPTouch. In addition to page widths, column widths, and navigation, there are also things like image sizing, Retina image resolutions, and not having capabilities like mouse-over and hover.