Get Updates

New posts, webinar and event invitations, and more.

Top 5 Weapons of a Mobile Web Design/Developer Ninja

, Thursday, December 8th, 2011

Use these super-simple but astoundingly powerful tips and techniques to bump your mobile sites from mediocre to magnificent.

1. Speed up rendering by harnessing the GPU.
Mobile devices have very powerful gpu processors, but they’re only used by mobile browsers if there’s an animation-esque style(s) to trigger them. Toss -webkit-transform: translateZ(0); in your css to make it happen
via html5rocks.com

2. Scale images in the browser.
By default, images will stay fixed to their original size. With a tiny little css we can tell the major browsers to scale these images in relation to their container with max-width:100%;.

3. Fix safari landscape to portrait resize bug.
Sometimes safari fails to scale correctly when rotating from portrait->landscape->portrait. That’s bogus. Update your meta viewport tag with the fix via stackoverflow:
<meta name = “viewport” content = “user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width”>
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
via stackoverflow.com

4. Put Content first
Switch the order of content and navigation using display declarations:
@media screen and (min-width: 30em) {
body {
display: table;
caption-side: top;
}
[role="navigation"] {
display: table-caption;
}
}

via adactio.com/journal/4780/

5. fix page navigation
empty a tags <a href=”#”> won’t moving pages to the top of the page like they do on desktops. If you have pages with long content, help folks jump around wiht a little js
$('#jump-to-top').click(function(e) {
window.scrollTo(0,0);
e.preventDefault();
});
$('#skip-to-bottom').click(function(e) {
bottom = $(document).height();
window.scrollTo(0,bottom);
e.preventDefault();
});


2 Responses to “Top 5 Weapons of a Mobile Web Design/Developer Ninja”

  1. Lavern Eppolito Says:

    How do you make a website Iphone friendly and easier to use on the iphone and other mobile phones?

  2. Brett Motte Says:

    I’m bookmarking this. Thanks for the article.