Better Mobile Development
There has been so much talk of recent directed at mobile design and development, where it is and where it’s headed. Some say it’s the future and the only future, while others say you should still continue to design for desktop before mobile. All in all, when building a responsive website or strictly adaptive mobile site, there are a lot of factors to think about regarding device sizes, percentages, fluid layouts, server side logic for switching content and overall best practice for an optimal mobile experience.
I’ve thought of some tips I like to stick by when building a mobile site, specifically adaptive:
High Resolution Images
Most iPhones have a retina display which will scale everything by a factor of 2 as well as Android devices hosting a resolution of up to 1080p. The layout and text when doubled scales fine as they’re vector and controlled using CSS, however CMS controlled images tend to blur when stretched on some devices. A script that I found useful to overcome this was Retina.js.
By including this script in your site, Retina.js checks each image on the page to see if there’s a higher resolution version of that image on your server. If a higher-resolution variant is available (by following the naming convention requirements EG: photo.jpg and photo@2x.jpg) the script will then server the @2x image instead. A similar process can be applied to background images in CSS if it is really necessary. I prefer to use CSS3 where possible for radius, gradients, shadows, though if need be, the CSS equivalent uses media queries:
#logo {
background-image: url('/images/logo.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url('/images/logo@2x.png');
background-size: 200px 100px;
}
}
Forget Hover States
Today’s touch screens can’t detect when a finger is getting close to a device to touch, so the concept for desktop sites with hover states need not apply. By having a:hover on your links, the iPhone will actually display the click and remain on screen after the finger has left the screen. This can become really annoying.
As previously discussed, using old school web design techniques of slicing buttons, gradients, rounded corners are long gone.
With CSS3 we can create clean semantic mark-up for buttons and layout design with the use of gradients, shadows and radius. Modern mobile devices support and embrace CSS3, so should we!
View Desktop Option
Lastly, when building an adaptive mobile site, always remember to have a “View Desktop Site” link to return to the normal site. Being adaptive, various areas of the mobile site may be switched off via server side to tie in with design and UX. Not all users will want the mobile site 100% of the time, so it’s best we give them the option.
