Designing Mobile First
Build a responsive design that works across devices
Almost 25% of the Web’s traffic now comes from mobile. If you didn’t build a responsive site, you’re already losing a quarter of your users. The good news is that with tools like Sketch, Web Inspectors and CSS3, it’s effortless — you just need to know where to start and how to grow from it.
Recently, I designed a mobile first experience for Carshare.hk, Ripplechat.io and Canvaspod.io. In this post, I’ll walk you through my process.
The Mockups in Sketch
If your design fits in an iPhone screen, then it will most certainly look great in all other devices. Since our audience comprises of people of all age groups, they have come to enjoy bigger typography and images. Good for reading from a comfortable distance. That’s exactly what we’re going to serve them. We’re going to make the site responsive and content-focused.
For Mobile, we design at 640px wide, at a viewport of 0.5 scale. We want to avoid as many differences as we can, while aiming for a beautiful user experience for both. You shouldn’t have to design 2 different sites. Rather, you should make it respond depending on your device’s width.
Design Standards for Touch
If you have some experience designing an iOS App, you’ll be familiar with the minimum sizes for typography (24px+, optimal for reading: 32px), buttons (44px to 88px) and navigation bar (72px to 98px). It’s also in line with Android devices.
Typography Sizes and Proportions
To some extent, bigger is better. But more importantly, it’s the proportions that harmonize the content. If your body’s typography is set at 24px, then make sure that the rest of the site is consistent with it. There are no hard rules to this, but the line-height should be from 1.2x to 1.4x the font size. Set the sizes, thinness and color variations based on priorities. A lot of it comes from gut feeling and trained eyes.
Titles are usually larger by 1.5x-2x, but thinner as well — otherwise they’d steal too much attention.
Line length should be between 45 and 90 characters. Read this little guide about Typography for more info.
Working with SVG
SVGs are resolution independent. They work across devices seamlessly at any pixel density.
They’re also incredibly easy to use — they work exactly like an <img> would.
SVGs will work on IE9+, Firefox, Safari and Chrome. But if you absolutely need to support older browsers, here’s a fallback that requires an image.
Using Webkit For Animations
Performance is important — it directly affects the user experience. If it’s slow, people won’t appreciate the subtleties of your design because their judgement will be clouded by how slow it is.
Setting the Viewport
We need to tell iOS and Android devices to scale the design at 0.5 so that it will work beautifully at 640px wide. For for the iPad, we will scale at 1.
iOS Smart Banner
If you have an iPhone, you can include a snippet of code that will be placed on top of your Website linking to your App.
<meta name=”apple-itunes-app” content=”app-id=myAppId>
Using the iOS Simulator
If you’ve learned some Xcode, you’ll have in your arsenal a neat tool to preview your Website on an iPhone and iPad.
Inspect Elements in Safari
If you have Developer Tools enabled on your iPhone, iOS Simulator and Safari, you can directly inspect the HTML/CSS elements. This is hugely useful for debugging, performance tests and applying styles instantly. For more info, Read here.
Inspect Android’s Chrome
Half of mobile users come from Android devices. In order to inspect the elements in Android’s Chrome browser, you’ll need to follow this useful guide.
Final Thought
Building a truly responsive site that works across browsers and devices isn’t easy. That’s why we have to work efficiently in order to avoid spending most of our time doing the stuff that drives us crazy. Just like we’ve learned to skip IE6, we’ve gotta cut some older devices and smaller resolutions as well.