Mobify Developer Blog Mobify
, September 10 2013

Three Early iOS 7 Web Design Best Practices

iOS 7 Web Design Early Best Practices

In just over a week, Apple will finally release iOS 7.

The new version of the operating system that powers 56.5% of global mobile pageviews is shipping with a whole range of new features and exciting design improvements.

Some of the most interesting changes to iOS can be found inside mobile Safari. These changes directly affect the design structure of the browser, and so, by extension, a user's experience of your site.

In this post, I want to share with you three core UX/UI changes in Safari on iOS 7 that you should keep in mind when optimizing your site for Apple devices.

1. Edge Swipes Are Dead

Previous versions of Safari allowed users to swipe down the Notification Centre from the top edge of a device. However, in iOS 7, Safari takes full advantage of all four edges of a user's device.

Gestures have been incorporated that let you swipe from left to right to navigate back through the browser history, and from right to left to navigate forward through it. You can also swipe from the bottom up to access the new Control Center.

How This Affects Your Site

First, if you were thinking of using any kind of slide-out navigation, you'll need to reassess the implementation. To avoid breaking the user experience, you now need to trigger the navigation "on touch" rather than "on edge pull".

Next, you have to revisit the way you use image carousels on your site. If the images are displayed with little or no padding, a visitor may start swiping them at the very edge of the screen, triggering the iOS back/forward gesture.

Skinny Ties on iOS 6 and iOS7

Left: Skinny Ties on iOS 6 — Carousels work as expected.
Right: Skinny Ties on iOS 7 — Swiping the carousel now triggers a gesture to go back a page.

UPDATE: As one of the commenters pointed out, the carousel isn't actually broken. It still works if you don't swipe from the edge of the screen. What I tried to illustrate is that your visitors will likely be swiping all over the screen and may trigger a gesture they aren't expecting.

2. Good Navigation Is More Important Than Ever

Another thing you'll notice about the new Safari is that the interface gets minimized as you scroll through a website.

While the URL bar just gets smaller, the basic navigation disappears completely and can only be brought back up by quickly scrolling upwards (note: a similar pattern is used in Google Chrome for iOS).

Smashing Magazine on iOS 7

How This Affects Your Site

Well-designed websites will benefit from this more minimalist and immersive experience, but sites with confusing navigation will struggle to keep users on the page without the simplicity of the back/forward buttons.

That's why you need to make sure that your site's navigation is easy, intuitive, and touch-friendly.

3. More Screen Real Estate. Different Fold.

As mentioned above, Safari now sports a new, full-screen design where interface elements minimize or disappear during normal browsing.

What this also means is that the fold, which is an important consideration for many sites, may shift unexpectedly.

For example, on the screenshot below, you can see that on our own site, the customer logos are only half-visible on iOS 7 (vs. iOS 6).

Mobify.com on iOS 6 and iOS7

Social proof is an important factor for our company, so we may consider adjusting the layout to keep the logos visible on every device and screen size.

How This Affects Your Site

Simply put, you now have another environment to test for. And if the fold is critical to your mobile UX, you should make sure you look at how your site appears on the new iOS as soon as possible.

Conclusion

At Mobify, we're really excited by the release of iOS 7 and the new version of mobile Safari. It's going to be an interesting journey to see how the new direction chosen by Jony Ive's team will impact app, web, and interface design for years to come.

In the meantime however, the best thing web designers and developers can do to make sure that their sites work great in this OS is to get their hands on a device running iOS7, or download Xcode 5 (currently offered as a developer preview).

Your Turn

Did we miss something? Share your tips and discoveries about building sites for iOS 7 in the comments below!

Hope that article was useful for you!

Would you like to receive more mobile web tips in your inbox, right when we publish them?

Subscribe to Mobify’s Developer Blog!

You'll be joining a community of awesome, like-minded mobile developers.

And you'll get articles full of mobile web development tips and tricks, in your inbox, right when we publish them.