Top 5 Weapons of a Mobile Web Design/Developer Ninja

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

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”/>

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;


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) {
$('#skip-to-bottom').click(function(e) {
bottom = $(document).height();

Are you excited about the epic stuff you just read?

Are you smart, motivated, and eager to solve problems in a collaborative environment? If so, we want you! Join our team!

See Our Current Career Opportunities