Award Confetti logo-bs logo-dxn logo-odl Magento Piggy Bank 09AEAE68-D07E-4D40-8D42-8F832C1A04EC 79C8C7E9-0D9D-48AB-B03B-2589EFEE9380 1A734D92-E752-46DD-AA03-14CE6F5DAD57 E622E2D4-3B9C-4211-8FC3-A1CE90B7DFB2 Group 19

Why the iOS 15 update might break your eCommerce website – and what you can do about it

Have you prepared for the Safari redesign in iOS 15?

If your first thought upon reading that was, “What on earth are they talking about?”, then we’ve got both bad and good news for you. The bad news is, you might have a pressing site layout redesign project on your hands; the good news is, you’re reading this post, so you’re probably two steps ahead of your competitors.

The background

iOS 15 is the latest version of Apple’s mobile operating system, which is used by all iPhones. This new software update will be available to compatible device users (iPhone 6S and later models) in Autumn 2021, and includes a major update to the default iOS web browser, Safari. For iPhones, this includes a redesigned interface which may conflict with some website designs and layouts.

Safari is the second most popular mobile browser behind Google Chrome, and while the exact percentage is disputed, up to 34% of all mobile traffic may originate from Safari. And this might be more of a problem than it first seems; while there are more Android phones on the planet than iPhones, and they typically use Chrome, in our experience we usually see much higher traffic and sales numbers attributed to Apple devices and Safari users. Perhaps it’s because they are more likely to be digital shoppers, or tend to have more disposable income; but whatever the reason, unless you can happily afford to risk a significant segment of your mobile traffic – this is an update you want to pay attention to.

The change

What is different about Safari?

Apple has given Safari users a major update for 2021 – new capabilities have been added like a customisable start page, tab groups, and voice search. More importantly, the interface has been completely redesigned. On iPhones, all the navigation controls have been combined into one “tab bar” (also called the “nav bar” or “address bar”) which has been placed at the bottom of the screen, making it easy to reach with a thumb regardless of screen size.

The tab bar is shown when the page first loads, then minimises as the page is scrolled down. It can be revealed again by either scrolling back up, or by tapping near the bottom of the screen. While minimised, there are small reload/stop buttons at the bottom of the screen.

The new tab bar is positioned towards the bottom of the screen and minimises into the edge – Image source

Why is this tab bar a problem?

The new tab bar presents a couple of issues. Firstly, instead of being attached to the outside of the screen, the bar floats over the top of page content, meaning any elements behind it can’t be seen or tapped until it is minimised. Secondly, it relies on subtle swipe and tap interactions, so there’s a risk of triggering the wrong thing and frustrating visitors, especially as users get used to the change.

These are bigger concerns if your website design has any of the following elements:

  • Navigation bar fixed to bottom of the screen
  • Support widgets (e.g. live chat, feedback) fixed to bottom of the screen
  • A “scroll to top” button fixed to bottom of the screen
  • Basket summary fixed to the bottom of the screen
  • Important CTA positioned just above “the fold”

Many of the above elements and positioning are quite common within eCommerce, and we have already been advising our clients of any changes they may need to make to their websites before the iOS update is released.

The new tab bar could overlap important website elements like navigation bars – Image source

Is this definitely happening?

Apple is running a developer programme to test iOS 15. The beta software is already up to version 4 and Safari has received multiple tweaks, including to the new tab bar. Between now and the final release, Apple could make further revisions to improve the user experience, but it is unlikely to completely remove the tab bar interface.

Update – 20th August: There’s been a development! Apple have added a new feature into their iOS 15 beta which allows users to toggle the new tab bar and Safari layout on and off – effectively offering the option for users to revert to the old layout. However, as we have no way of knowing how many users decide to toggle the tab bar off – or actually prefer the new layout and decide to stick with it – the issue still remains, and any of the design elements we mentioned above could still create poor experiences for a large portion of users.

The reach

Which iPhone models are compatible?

The new iOS 15 will be supported by the following devices. Any new models that are launched later this year will come installed with iOS 15 out of the box. Older models won’t be eligible for the update, so the Safari experience will stay the same (navbar at the top).

  • iPhone 12, iPhone 12 Pro, iPhone 12 Pro Max, iPhone 12 mini
  • iPhone SE (2020)
  • iPhone 11, iPhone 11 Pro, iPhone 11 Pro Max
  • iPhone X, iPhone XR, iPhone XS, iPhone XS Max
  • iPhone 8, iPhone 8 Plus
  • iPhone 7, iPhone 7 Plus
  • iPhone 6s, iPhone 6s Plus
  • iPhone SE (First Generation)

How many of my users will it affect?

The proportion of your audience affected, and the resulting impact on your revenue, will vary widely, but it’s easy to get a rough idea by examining your website analytics to see the proportion of your traffic originating from Safari on iPhones – for example, 41% of visitors to the JH website are doing so using an iPhone. You can also dig a little deeper and examine your conversion data – what percentage of your customers are checking out using Safari on iPhone? You might be surprised by the results!

The timing

When is iOS 15 being released?

No specific date has been set. Apple just says it is “coming this fall”. Based on previous years, it is likely to be released around the same time that new iPhone models are launched. That would be mid to late September.

How quickly will people upgrade?

Apple reports that 90% of all devices introduced in the last four years use iOS 14 (the most recent version of iOS). Generally there tends to be quite a buzz when a new version of iOS is launched, and iPhone users are keen to upgrade to the new system – it is estimated that it took just over 6 months from the launch of iOS 14 for iPhone users to reach this level of adoption. That takes into account both people who either upgrade old devices or buy new models.

The options

What can you do about it?

Safari won’t automatically make adjustments to your website design to make it more compatible with the new browser layout. If you have any design elements that conflict with the new tab bar, you will need to actively redesign your website. What needs to be done depends on your specific design, but generally speaking you will either need to reposition, replace, or remove any conflicting elements.

However, for some merchants, fixing this issue may not be quite as complex as it first seems. One idea for repositioning could be to use special CSS properties called Environment Variables to dynamically adjust the website design based on the state of the tab bar. These were originally added in 2017 so that websites could account for the “notch” at the top of the iPhone X. Website elements would be higher when the tab bar is expanded, and lower when it is minimised. This behaviour could be enhanced further with additional JavaScript. 

The safe area measurements change as the tab bar is expanded and minimised – Image source

It may also not be necessary to completely redesign your website if the current layout relies on a navigation bar or other fixed elements positioned at the bottom of the screen – it could just be a case of shifting it up slightly so that it doesn’t clash with the new Safari navigation bar.

Fixed website elements like a navigation bar can be positioned further up the screen – Image source

Time to take action?

With the planned release of iOS 15 just a matter of months away, it’s key that you start preparing for this key update now. If your eCommerce site includes any of the conflicting elements we mentioned in this post, then it’s imperative that you start making preparations to avoid any negative impact on your revenue.
Has your digital agency brought up how these changes will affect your site, or come up with improvements before the update launches? We’ve already started supporting our clients with the changes that need to be made to ensure their customers aren’t affected. If you’d like to explore the options of switching to a specialist Magento eCommerce agency that will help you stay two steps ahead of your competitors and grow your market share, get in touch for a chat via thrive@wearejh.com or +44(0)115 7940060.