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.

In Sketch, I set up 2 Artboards next to each other, one for iPhone and the other for iPad, which will fit in higher resolutions as well.

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.

For the Hero content, I centered the phone for Mobile, but for Desktop, it goes to the left. Also, the number of cars is dynamically increased depending on the browser’s width. Finally, the header is slightly bigger for mobile devices.

While scrolling is fun on Mobile, we shouldn’t let people scroll excessively for little content. That’s why I made the icons smaller and the text more condensed. If I just placed the 3 big circles on top of each other, there would be 3 times as much scrolling for the same amount of content.

More often than not, your content will look exactly the same everywhere. No change to make! ☺

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.

When resizing to less than 720px wide, the header transitions to a bigger size with comfortable buttons at 60px.

The sizes, alignment, number of menu items and buttons adapts to the device’s width.

If you know your proportions, you can hit a good middle ground where the sizes are applicable to both Mobile and Desktop. E.G. the section titles.

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.

In Sketch, you can export your assets to SVGs. Insanely useful.

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.

At the bottom, when the car starts, I used webkit-transform instead of using jQuery’s animate. The performance gain is significant. Additionally, it works well on Mobile Safari and Chrome.

As for the Parallax, I created a different speed for 3 different elements. I used -webkit-transform instead of CSS top position. The scroll is much smoother because of it.

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>

When people visit your site on their iPhone or iPad, they’ll see a nice banner that links them to the App Store.

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.

Here I can inspect the iPhone’s Safari browser.

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.

It took me a while to figure out that the option in the Hamburger Menu > Tools > Inspect Devices

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.

Discuss on Designer News