Coding for mobile

Several random thoughts and notes after a few mobile projects I worked on recently.

Images

If you expect images too big for a small screen, you might want to make sure they always take a new line and are not floated with text:

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
}

• display: block; ensures line break before and after all images and removes white space following inline elements.
• max-width: 100%; ensures that image won’t take more than 100% of available horizontal space.
• height: auto; keeps the right aspect ratio when scaling image. You don’t need this one if you don’t define width and height with HTML attributes.
• margin: 10px auto; – centering image if it’s not big enough to fill all horizontal space.

Consider using different responsive images options to serve the right image resolution to your site’s visitors.

Forms

Let’s say you want your form fields take 100% horizontal space. Fixed width defined in pixels is not an option, using media queries won’t be perfect either. Use width: 100%; with box-sizing.

input[type="text"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Box-sizing is widely supported and super useful in mobile projects - use it!

To get rid of default iOS form fields styling you can use -webkit-appearance: none; but that’s not enough for <input type="number" /> field.

Even though spin buttons are hidden, you will notice width: 100%; for text input is not the same as it is for number input. That’s because the spin button is not visible, but it’s still there… kind of. Reset margins and you’re good to go.

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    margin: 0;
}

I’ve seen this a couple months ago, looks like it’s fixed in iOS5.

Line break

Use word-wrap: break-word; for long links and situations where you expect long strings without spaces. They can cause horizontal scroll on small screens, and this usually is not a good experience.

Data tables

Tables with more than just a few columns are not very easy to read on small screens.

If possible, try to linearize tables, make them look more like a list if only your data stays easy to read and understand. It depends on situation, but you can always experiment with display: block; on table cells and rows, hide empty cells with td:empty { display: none; } and so on. Whatever works for you, but don’t forget about accessibility.

Here’s Chris Coyer’s take on this topic and how it affects accessibility.

Media

HTML5 video and audio are great on desktop but when it comes to mobile, consider a different approach. Turns out using just a link to a video file is the easiest solution. As always it depends on your project and supported devices, but if you’re only aiming to relatively modern platforms, let’s say iOS, Android 2.2+ and Blackberry 6.0+, tapping on a link to a .mp4 video file will open a full-screen native video player and this, I think, is the best video experience you can get on a phone.

One thing to remember. Media source file can’t be stored on a password protected domain, even if it’s the same as the web site and you have already logged in. It doesn’t make a difference to iOS, but Android and Blackberry just won’t play it and keep saying the media file can’t be played/found/etc.

JavaScript

Your desktop website can use lots of fancy jQuery plugins to make everything jump and dance but make sure you don’t do that on your mobile site. And if you don’t use them, don’t load all the JavaScript files. Use JS media queries and scripts like LazyLoad.js or yepnope.js to load your code only when it’s needed.

The latest jQuery version, 1.7, is 92KB minified, so really, don’t make me download it to see your fancy carousel, please.

If you really need jQuery-like syntax, go for Zepto.js – a brilliant little framework for mobile WebKit browsers. You probably won’t even notice it’s not jQuery. If you only want to access DOM with CSS selectors, use querySelector and querySelectorAll, all browsers support them!

There’s also a bunch of other micro-frameworks to help you not use jQuery to do the most basic tasks.

Plugins

iScroll

Great library to add position: fixed; support to mobile devices. Works well most of the time and is easy to use, but when it comes to more complex and JS-heavy content it might get pretty nasty.

Issues with forms

With current version (iScroll 4) you need to make sure on your own if form fields are still usable, as the library uses event.preventDefault() on all touched elements, thus making form fields not receiving focus. Using event.stopPropagation() on touchstart and mousedown events in your loaded function should help, but sometimes you may even need to use iScroll’s destroy() method and initialize it again every time user taps on a select field. It’s as bad as it sounds and performance can suffer.

function loaded() {
  myScroll = new iScroll('wrapper');
  
  $('select').bind('touchstart', function(e){
    myScroll.destroy();
    setTimeout(function(){
      myScroll = new iScroll('wrapper'); 
    }, 500);
  });
  
  $('input, select')
    .bind('touchstart', function(e){
      e.stopPropagation();
    })
    .bind('mousedown', function(e){
      e.stopPropagation();
    });	
}

Accordions

iScroll needs to be refreshed every time you do anything that changes height of the content like showing, hiding or adding new elements. As basic thing as accordion worked terribly slow for me on iPhone 4 even thought it couldn’t be any simpler than just adding and removing class from a few elements with no animation.

Images

img { height: auto; } will break iScroll because document height calculation gives wrong results, so when all images are loaded you need to refresh iScroll again.

Just don’t

All that said, think about this: if you need fixed header or footer on your site, just use position: fixed; in CSS and forget about JS for this stuff. Latest Android supports it (I guess?), iOS5 supports it too, even if it’s buggy, it should be good enough for basic use. iOS5 can be installed on iPad, iPod Touch and iPhones starting with 3GS, so it’s a majority of iOS users.

Or maybe not? Brad Frost on fixed positioning in mobile browsers.

jQuery Mobile

History

Swipe left and right through history with jQuery Mobile:

$('body')
    .live('swipeleft',function(e){
        window.history.back();
        e.preventDefault();
    })
    .live('swiperight',function(e){
        window.history.forward();
        e.preventDefault();
    });

jQuery Mobile + 320 and up

html { overflow-y: scroll; } used in 320 and Up breaks select fields on Android when used with jQuery Mobile. This happened only to selects not visible in the viewport right after page load. Remove that rule and it should be OK.

Testing tools

You can spend most of the time developing in a narrowed desktop Safari window, but sooner or later you’ll need to test your work on mobile devices. Most likely you don’t own a couple smartphones just for teting, so you need another way to do it.

Simulators, emulators

If you’re lucky enough to work on a Mac you should download Apple SDK with iOS Simulator, which is the best simulator available. You can test on the latest iOS versions on both iPhone (also Retina display) and iPad.

There are Opera Mobile Emulator and Opera Mini Simulator, both work pretty well for doing some quick checks.

When it comes to Android and Blackberry… yes, there are simulators, but I say they’re good candidates for the worst software I’ve ever used. Both work terribly, require a fairly strong machine to even start, and if you’re lucky (or not) to run it, you can forget about experiencing anything even close to a real device.

Update: I started testing on the latest BB 7.0 simulator recently and must say it’s not that bad anymore.

• Mobile Emulators & Simulators: The Ultimate Guide

Web Inspector for Mobile?

Each one of these tools deserve a longer testing and a separate blog post, so just a short note here.

Weinre

Web Inspector Remote, now a part of PhoneGap. Lets you use the Web Inspector you know from Safari and Chrome browsers to remotely debug your projects running on mobile devices or simulators. Really easy to use, especially on a Mac. A little buggy, sometimes it can’t render the whole DOM properly, but I believe it’s going to get better eventually. Recommended.

Socketbug

Similar to Weinre but looks way better. Built with Node.js and Socket.IO, supports iOS, Android & WebOS. Definitely worth checking.

Aardwolf

Another remote JavaScript debugger for iPhone/Android/WindowsPhone7 build with Node.js.

Ripple

A multi-platform mobile environment emulator as a Chrome plugin. Targeted towards PhoneGap, WebWorks, WAC, Opera, mobile web development and testing.

iWebInspector

Profile and inspect web applications running on iOS Simulator

More reading

• Coding for the Mobile Web
• Mobile Performance Manifesto
• Future Friendly
• Essential considerations for crafting quality media queries
• CSS3 Media Queries? Download Answers
• Event delegation for touch events in JavaScript
• Mobile Design and Development by Brian Fling
• Mobile web content adaptation techniques
• Multi-Device Web Design: An Evolution

Accessibility

• Resources for Mobile Accessibility Guidelines
• Making web content more accessible with iOS VoiceOver
• WAI ARIA support on iOS

Features support

• When can I use…
• HTML5 compatibility on mobile and tablet browsers