Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Best method of updating a website for display on mobile devices

Options
  • 27-08-2012 11:30am
    #1
    Michael_Dare
    Registered Users Posts: 55 ✭✭


    There seems to be a lot of different answers out there on how best to structure a website to display on full size machines, and on tablets and smart phones. It's become a bit of an issue for one of our sites, as 20% of the traffic is now coming from mobile devices, and we expect that to grow.

    It's a full blown eCommerce site, and the problem we're having is with high resolution / small screen devices.

    To display an eCommerce catalogue on a small device with a high screen resolution, (4.5 inch screen, 1024px width), we're going to have to show larger images, larger fonts, larger edit boxes, etc. Without doing this, even though the website is fully visible, everything is too small to allow for meaningful browsing and purchasing.

    We're looking at maybe using Wurfl (http://wurfl.sourceforge.net/) to detect the actual size of the device, and showing 2 slightly different versions of the site depending on the device.

    Does anyone have any direct experience with this problem? I'd appreciate any feedback from people who have had to address this themselves, as we're not finding any definitive or best-practice answer out there. A lot of the advice seems to revolve around the screen resolution, while ignoring the actual, physical screen size.

    With the smaller and cheaper Nexus 7 tablet taking off, and Amazon soon to release their new tablets (probably Nexus 7 size), this is an issue that's only going to get bigger.

    Any advice would be appreciated.


Comments

  • Options
    #2
    John_Mc
    Registered Users Posts: 2,791 ✭✭✭John_Mc


    Setup a subdomain to handle mobile traffic. Check on the main domain if it's a mobile/touch device and redirect to mobile domain.

    I would use something like jQuery Mobile to handle the page layout.


  • Options
    #3
    Giblet
    Registered Users Posts: 11,979 ✭✭✭✭Giblet


    Look up CSS media queries and responsive layouts. jQuery mobile is a non-runner, too slow.


  • Options
    #4
    John_Mc
    Registered Users Posts: 2,791 ✭✭✭John_Mc


    Giblet wrote: »
    Look up CSS media queries and responsive layouts. jQuery mobile is a non-runner, too slow.

    Really? I know jQuery UI runs horribly on IOS. I'm going to be doing a mobile site soon and was going to use it. Any alternative frameworks which give me similar functionality for free?


  • Options
    #5
    Giblet
    Registered Users Posts: 11,979 ✭✭✭✭Giblet


    CSS3 is yer only man, along with some of the newer DOM API stuff (such as transition callbacks). Less is more on mobile when it comes to scripting (and desktop too in fact). You have powerful tools such as CSS transitions that already fallback gracefully.


  • Options
    #6
    mwrf
    Registered Users Posts: 522 ✭✭✭mwrf


    John_Mc wrote: »
    Really? I know jQuery UI runs horribly on IOS. I'm going to be doing a mobile site soon and was going to use it. Any alternative frameworks which give me similar functionality for free?

    Sencha Touch performs excellently on iOS
    http://www.sencha.com/products/touch


  • Advertisement
  • Options
    #7
    Giblet
    Registered Users Posts: 11,979 ✭✭✭✭Giblet


    It's pretty awful on all but the fastest phones, not to mention huge, I strongly suggest you don't rely on scripting for layout issues.


  • Options
    #8
    smcelhinney
    Registered Users Posts: 1,127 ✭✭✭smcelhinney


    Most devs and designers I know are leaning towards responsive design with media queries, but the downside is that you will probably have to do some reengineering of your base HTML.

    If you are planning a redesign anyway, then you should definitely look into a fluid grid-based responsive design system. The ones I've worked with are Skeleton and Bones, both in Wordpress, but I'm sure there are boilerplate versions of them too. Both comply to HTML5 standards too.


Advertisement