Design for PCs, but don't break on mobile

[EvanGR]

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!

[jdog]

We very had great experiences using a responsive grid, for example cssgrid.com

Hth, Jochen

[wwb_99]

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.

[StevenHu]

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.

[EvanGR]

Great information, thank you all, and especially StevenHu

[samanime]

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:

.this:hover { display: block }

I change to:

.this:hover, .this.active { display: block }

and then I add some JS like this (using jQuery for clarity):

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.

[wwb_99]

Scrolling within divs seems to work for me on the old iPad. See Stackoverflow's notification box for an example.

[samanime]

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).

[StevenHu]

I suggest you look at responsive design so your site scales successfully across a wide range of screen sizes:

http://webdesignerwall.com/tutorials...-media-queries
http://designwoop.com/2012/03/15-det...ign-tutorials/
http://greensopinion.blogspot.com/20...universal.html
http://designmodo.com/responsive-design-examples/
http://www.alistapart.com/articles/fluidgrids/

[avansarea]

Thank you, designmodo's example and alistapart information is very useful. Good to know that people is more interested in RWD.

[markbrown4]

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,