Treehouse: Grow your CSS skills. Land your dream job.

Alternate website for iPad & Mobile

  • # March 27, 2011 at 4:40 pm

    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:

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

    # March 27, 2011 at 5:00 pm

    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.

    # March 27, 2011 at 5:13 pm

    For redirecting I was going to do this in the htaccess file — is it not a good idea?

    #redirect mobile browsers
    RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
    RewriteRule ^(.*)$ [R=301]
    RewriteCond %{HTTP_USER_AGENT} ^.*BlackBerry.*$
    RewriteRule ^(.*)$ [R=301]
    RewriteCond %{HTTP_USER_AGENT} ^.*Palm.*$
    RewriteRule ^(.*)$ [R=301]

    # March 27, 2011 at 6:31 pm

    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

    # March 27, 2011 at 10:42 pm

    Thanks guys, this has been extremely enlightening. :)

    # March 27, 2011 at 10:51 pm

    This is what I think. I think the “mobile version” is a fad that will die. I have a iPhone. I hate mobile versions. They are always striped down – dumbed down versions of the full site. Why do I want that??? Especially when my iPhone is perfectly capable of displaying the site faster and better than my XP? This is why I don’t bother. And doubly espesially for the iPad. That’s the same size (and 10 times faster) than your old XP running ie6. I see no point personally.

    # March 28, 2011 at 9:09 am

    Eric, I share that sentiment, honestly. But it’s all about UX. If a guy with 10K to spend on a website, catches my display ad on his Android mobile, clicks it, and sees a poorly put together website or a website that requires a ton of scrolling and rotating and zooming and blah blah blah, he’s going to get annoyed.

    I hate making multiple versions of the same damn thing, so I’m with you 100% … unfortunately it seems necessary to ensure ALL your visitors have a good experience.


    Except IE6 users … they can all die.

    # October 27, 2011 at 5:49 am

    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.

    # October 27, 2011 at 11:02 am

    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

    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.

    # October 27, 2011 at 12:00 pm

    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.

    # November 7, 2011 at 5:45 pm

    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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.