SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Greece
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Design for PCs, but don't break on mobile

    Hello people,

    I need your help with something... I only recently got into the mobile world and discovered that some of my websites do not work that well with the touch interface. Mostly menus with hover fly-outs and such.

    Now unless the requirements demand so, and time+budget permits, I won't go into building separate mobile versions of the websites I do. But I DO want to take steps to make the websites function OK (i.e. completely usable) on touch interfaces. I need some guidelines, some DOs and DONTs and any advice on the matter.

    In short: how to design normal websites that do not break on phones and tablets.

    Anyone knows of such resources, or can offer advice in this thread? Thank you!

  2. #2
    SitePoint Addict
    Join Date
    May 2005
    Location
    Tauranga, New Zealand
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We very had great experiences using a responsive grid, for example cssgrid.com

    Hth, Jochen
    http://www.automatem.co.nz
    Websites, On-line Software and everything Internet
    Follow on Twitter | Connect on LinkedIn | Read on Posterous

  3. #3
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,653
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You ran into the big one -- most touch UIs have no concept of over so anything relying upon hover and hover alone just won't work. Beyond that most modern sites will at least render reasonably well on modern mobile devices. Only real way to be certain is to acquire mobile devices and commence to testing as you really can't effectively do much else.

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    From what I've seen on the few iOS and Android devices I've seen, the devices do an excellent job of reducing the web site to fit the screen, and allow the user to double-tap a section or table cell or div to enlarge it to full screen width for easier reading.

    What you need to keep in mind is the difference between the tap of a finger and the click of a mouse. There is no hover on a device as there is when a mouse hovers over a link, so you can't expect a hover to work on a mobile device - which you've found out.

    When you play a video, the video by default (not by extra coding on the developer's part) plays on the screen by itself, not on the web page. There's a button above the video the user taps to return to the page containing the video link.

    <Alt> text can be seen on the device if the picture won't load, or before the photo appears, but the <title> tag won't because it depends on hover.

    Drop-down option links are automatically converted to popups on the Android devices and a scrolling list on the iPhone at comfortable sizes for finger-tapping goodness. Radio buttons and check boxes are often too tiny and really need to be enlarged in CSS for smaller screens, or staggered 40-50px apart to help the user comfortably select the correct one. (Putting them in <li>s with text-decoration:none at 50px line-spacing helps.)

    I hope these tips will help you get going.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Greece
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great information, thank you all, and especially StevenHu

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    What we've done on our site to retro-fit it for mobile is add some Javascript that targets mobile devices and adds "click" actions to hover events.

    So, something like:
    Code:
    .this:hover { display: block }
    I change to:
    Code:
    .this:hover, .this.active { display: block }
    and then I add some JS like this (using jQuery for clarity):
    Code:
    if( strstr($_SERVER['HTTP_USER_AGENT'],'Android') ||
      strstr($_SERVER['HTTP_USER_AGENT'],'webOS') ||
      strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
      strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
    ){
    $('.this').click(function() {
      $('.active').removeClass('active');
      $(this).addClass('active');
    
      // Hide it again when anything else is clicked.
      $(document).click(function() {
        $('.active').removeClass('active');
        $(document).unbind('click');
      });
    });
    }
    The other biggie for desktop to mobile is scrolling within elements. It just doesn't work (like a div with overflow: auto). For these, I recommend just making a mini-page and redirecting mobile sites to those (if the scroll part shows up on click or hover). If it's always there, you have bigger problems and I recommend getting rid of it in general.

  7. #7
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,653
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Scrolling within divs seems to work for me on the old iPad. See Stackoverflow's notification box for an example.

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Scrolling within divs on iDevices does work, using a two-finger action (or so I'm told). However, I've been told it's awkward. It also doesn't work on Android devices (at least as of 2.3 with the default browser). I also don't think it fits the typical feel of a mobile site (a scrolling pane within a scrolling pane when controlled with something as relatively large as a finger is rather awkward no matter how you pull it off).

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, designmodo's example and alistapart information is very useful. Good to know that people is more interested in RWD.

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Here's a basic list I put together a while ago.
    • Optimise styles for small screens with @media queries & viewport meta
    • 44px x 44px tap size
    • Don't rely on :hover, or mouseover events to get to content
    • Keep popups stand-alone - they cannot send data to the parent window
    • Avoid scrolling content areas - It can be achieved in Mobile Safari using touch events and CSS transitions but it's not easy
    • Keep bandwidth to a minimum, the iPhone won't cache anything bigger than 25K uncompressed.


    Some techniques perform better on mobile as well.
    e.g. transitioning transforms is much more per formant than transitioning top / left.
    Avoid heavy Javascript client-side frameworks like backbone / ember. Keep things simple.

    Hope it helps,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •