Alternate website for iPad & Mobile

[tannercampbell]

I’ve never had a client ask to have a mobile or ipad version of a main website … until today. As such, this might be an easy question: How do I instruct the browser to detect if a visitor is using a mobile phone or an iPad and, if they are, direct them to a site built specifically for mobiles/iPads?

A second question: http://3rconcepts.com/test

Why won’t the drop downs on this website work on iPad? What have I done incorrectly?

[DogsGhost]

you use a media query to check for something like what kind of device the person is using or, as I usually do, check the current width of their browser. You then attach a stylesheet that has the altered styling for that screen size.

The first link is the full stylesheet for desktop browsers. then if the screen width goes to 768 or lower (ipad) the third stylesheet comes into play. Then if the screen goes belows 320px (phone) the 2nd sheet is activated.

[TT_Mark]

As DogsGhost says, you should be using media queries based on screen res rather than forcing a redirect in the htaccess. That way you will only have to maintain one site instead of 4+ and you’ll include all manner of different devices instead of just the 4 above

Check out http://mediaqueri.es/

[Brightonmike]

You should be able to just add some simple responsive CSS that just adjusts things slightly.

If you’re building from the ground up too, do it now. I’ve made the mistake of deciding to “mobilise” a website after it’s already been built using responsive CSS, which resulted it a few hacky methods and probably a few too many uses of “!important”.

Make it responsive from the ground up. No excuse not to do so – except laziness.

[KarimCossutti]

If it is iPhone/iPod & iPad specific i personally use this javascript snippet

code by Scott Rockers

If you are going Mobile in a wider sense u suggest using this http://code.google.com/p/php-mobile-detect/

Also for some business categories (eg: cafe, restaurant, cinema) i think that the content users look for while on mobile is the same that as desktop browsers, most likely people search for specific info while on mobile (address, phone numbers, schedules) and probably all the secondary content just slows down the site and bugs the user.

Obviously this does not apply to all sites, just some specific cases…
But it’s just my opinion.

[joelmb]

I too like brightonmike, have in the past only thought about the mobile version afterwards which is a pain and never as satisfactory.

Make it responsive.

Yesterday i posted a link to quite exciting Foundation from Zurb
Use html5 Boilerplate as your foundation.

Design once and forget about it. One size fits all… and 100 other cliche’s. But its clearly the way forward.

[kb04090]

I’ve built a test mobile page with media query which seems so much more appropriate. Of course my computer is up-to-date and I have IE9. When I view the page on IE8, it appears that none of the display:none CSS in the 3 size-driven style sheets work. The entire structure of the page is showing. I’ve tried

[Author]

Posts