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

Is your eCommerce site affected by issues caused by the iOS 15 Safari redesign?

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, iOS 15 might be causing issues that mean you 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.

iOS 15 is causing issues for many eCommerce websites. Find out why it's happening and how you can fix it

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 and cause issues for 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 in iOS 15?

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 Safari new tab bar, introduced in iOS 15, interferes with popular eCommerce site design choices, causing issues for user experience

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 for eCommerce sites?

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 iOS 15 Safari tab bar could cover important eCommerce site elements - like navigation bars - and cause issues for your users

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 to avoid any user experience issues. 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. 

CSS properties like Environment Variables can be used in your design, to ensure that all users can effectively navigate your website, whether they choose to use the new iOS 15 tab bar or not

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.

To combat iOS 15 changes interfering with your eCommerce site design, it may be as simple as moving your navigation bar up a little so it is no longer covered by the new tab bar

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

Time to take action?

With iOS 15 already in use, it’s key that you fix any user experience issues this may be causing on your website. If your eCommerce site includes any of the conflicting elements we mentioned in this post, then it’s imperative that you make changes to avoid any negative impact on your revenue.
Has your digital agency brought up how these changes will affect your site, or suggested improvements before the update launched? Long before the update shipped, we had already started supporting our clients with the changes that needed to be made to ensure their customers aren’t affected. If you’d like to explore the options of switching to a specialist Adobe Commerce and 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.