Best Method For Mobile Friendly Sites

[learning_brain]

I'm currently designing a new layout for a website, but feel the need now to make it mobile friendly.

I understand that there are simple css tricks such as media type = handheld, but this is very limited when it comes to modern mobile browsers which view pages pretty much as they were designed to be viewed in FF, Safari or Chrome.

Mobile screens now go up to 1280x800 resolution (G Note, HTC One-X etc). However, the physical screen size still isn't quite enough to browse with ease... herein lies the problem.

I have also read a bit about detecting user-agents, but again, this is not necessarily the best solution as user-agents become ever-more varied and numerous.

Are we expected to re-design a site/css for every eventuality or is it best to simply detect resolution and offer set categorised layouts?

I don't really want to go down the liquid layout route as I can't really control the content as it is now.

There are so many articles on this on the web... the problem is knowing which is the best method to adopt.

This site does have php support, but is currently static. There is no CMS.

Can anyone advise or point me in the right direction?

BTW - page in progress is at http://www.donbur.co.uk/eng/css/csstest.php (Nav is really complex so is going to need some work for mobiles).

Thanks

Richard

 

[essellar]

You can use @media queries in your CSS to provide a set of fixed layouts based on the browser resolution and/or device resolution. It's not necessarily easy to arrange rules to give this sort of "stepped responsiveness", but there isn't as much chaos to deal with as there would be for a fully-liquid layout. You pick three or four resolution ranges and essentially build a stylesheet for each in the same CSS file, which gets around the cache issues you'd have if you issue a new stylesheet for each resolution set using, say, SASS or straight PHP.

If you decide to go that route, there's a more in-depth article at the Mozilla Developers site.

 

[learning_brain]

Thanks essellar

I have now looked into this in more detail and your suggestion would appear to be the easiest solution... however....

Many mobile or "wireless" devices now have (in many cases) higher resolutions than standard workstations or media type "screen". For instance, we still get many visits with 1024x768 resolutions - which is fine and the css for media type "screen" works great.

I have an Android based Galaxy Note: resolution 1280x800.... which parses full html, css, flash and video content - sounds great but the physical screen size is 5.3". Equally, the latest iphones, HTC titan and HTC one-X also have very high resolutions with relatively small physical screen sizes.

This poses a problem, because if I go down the "detect resolution" route, it will not switch the css style sheet and you're left with an interface that is predominantly designed for screens 15"+. Equally, the majority of smart phones and tablets do not support the "hover" attribute in css - which completely wrecks my nav system from an architecture and styling point of view.

I have now read more about Wurfl.xml user-agent data and there is a php installation which includes a class that detects wireless device capabilities.

My current thinking is that 1) I determine if the device is wireless or not - if so - switch to a different css rule or even different page architecture.

Ooops... tablets............

Arrrgghhh

 

[essellar]

This will get better once devices start obeying the rules a little bit more consistently. A "px", for instance, is defined in the spec as an absolute linear value of 1/96 of 1in (although a "screen inch", one would assume, would be allowed to vary somewhat to account for user zoom preferences). Devices with higher-resolution displays are supposed to understand that they are operating at higher resolutions, and use a length value based on angular displacement. (That is, screens that are normally viewed at closer distances would have "tighter" display than screens that are viewed at longer distances. An "inch" or a "centimeter" would be quite a different size on a 60" screen viewed across the room than it would be on a smart phone or smart watch, for instance.)

One solution I've seen (but not tried) is to serve graphics at double the size for everybody and scale down for non-Retina-type displays. There are some neat articles over at A List Apart on the subject; you may or may not find them useful. (Your work is mostly in an area that is uninteresting to me—not that the work itself isn't interesting, but the itch you're scratching isn't one that I have, so I haven't spent a lot of time investigating causes and cures.) I fear that waiting for universal compliance with the standards is going to turn into a "next year in Jerusalem" ritual of centuries' duration, though.

 

[learning_brain]

Making our website mobile friendly was not on my list of priorities either, but there are rumors circulating that there will be more mobile based traffic than workstation traffic in circa 1 year. I can't see any evidence of that yet from Analytics, but as it's my job, I need to ensure the user experience is as good as possible.

Thanks for the advice.

I have discovered another trick - a meta tag which deals with viewports, which resolves a lot of my problems.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This way, if my little wireless sniffer kicks in, I can load this and control the minimum/maximum portal size.

I have also used an if{}else{} to control the nav menu based on mobile use - as well as removing a lot of javascript and other tricks for the mobile users.

Tested and works a treat. Check it out if you feel like it. - link the same as in post 1.

Richard

 

[ellescuba27]

var uagent = "";
if (navigator && navigator.userAgent)
uagent = navigator.userAgent.toLowerCase();
function DetectGoogleTV()
{
if (uagent.search("googletv") > -1)
return true;
else
return false;
}
function DetectAndroid()
{
if ((uagent.search("android") > -1) || DetectGoogleTV())
return true;
//Special check for the HTC Flyer 7" tablet. It should report here.
if (uagent.search("htc_flyer") > -1)
return true;
else
return false;
}
if (!DetectAndroid()) {
//No Detect Android
}