Three web design practices for the upcoming iOS7

Original author: Mike Abasov
  • Transfer


In a week, Apple will open iOS7 to the world.

The new version of the operating system that generates 56.5% of world surfing (Note translator: according to the statistics of Mobify) includes new features and amazing design improvements.

Some of the most interesting changes to iOS can be found inside the Safari built-in browser. These changes directly affect the operation of the browser and the familiar user experience when working with the browser and sites.

In this article I want to talk about the three main UX / UI changes in Safari on iOS7 that you should keep in mind when optimizing sites for Apple devices.

1. Swipe from the edge of the screen is dead


(Translator's note: Swipe - moving your finger across the screen in one direction, also known as swiping)
In previous versions of Safari, the user could call the Notification Center by swiping down from the top of the screen, but in iOS7 Safari can use all 4 edges of the device’s screen .

Gestures were included that allow you to use swipe from left to right to go back through the browsing history of the browser, as well as from right to left to go forward. There is also a swipe from the bottom up to access the Control Center (Control center).

How does this affect sites


Firstly, if you used or planned to use navigation in the form of a swipe, you need to reconsider your decision. In order to avoid violations in the user's experience, you need to replace the navigation from the swipe options with the navigation by touching the screen and page elements.

Next, you need to review how you used the image carousels on the site. If images are shown with little or no indent from the edge, the user can start scrolling the carousel from the very edge of the screen, thereby activating the transitions in the browser history. (Translator's note: It is likely that you can turn off history navigation in some meta tag of the page)
Left: Skinny Ties on iOS6 - The carousel works as expected.
Right: Skinny Ties on iOS7 - Scrolling the carousel now activates a gesture to jump back through the browser history.

2. Good navigation is now much more important.


Another thing you'll notice in the new Safari is that the interface elements are minimized when you scroll the page.

The address bar becomes smaller, the main navigation disappears completely, appearing again when quickly scrolling up (Note: a similar system is used in Google Chrome for iOS).



How does this affect sites


Well-designed sites will benefit from this minimalism and look better, but sites with inconvenient navigation will struggle to keep the user on the site without the usual back / forward buttons.

That’s why you need to make sure that your site’s navigation is simple, intuitive, and easy to manage.

3. Browser elements may interfere with the display of information.


As mentioned above, Safari in iOS7 minimizes interface elements when viewing pages, or removes them altogether.

It also means that the interface can change height, which may be important for some sites.

For example, the screenshot below shows that on our site client logos in iOS7 are only half visible (unlike iOS6).



Evidence of use by people is an important factor for our company, so we must consider the possibility of changing the structure and maintain the visibility of the logos on each of the devices and screen sizes.

How does this affect sites


Simply put, you have another factor to test. If changing the height of the working field is critical for your site, you should make sure that your site looks good on iOS7.

Conclusion


We at Mobify are very excited about the new iOS and the new version of mobile Safari. It will be interesting to see how the new design direction chosen by the Johnny Ive team will affect applications, sites and interface design in the near future.

At the same time, the best thing web designers and developers can do is to get iOS7 devices in their hands, or download Xcode5 (now offered as Developer preview) and make sure that their sites will work fine and look on this operating system.