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.
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 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 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.
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 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 breakthrough@wearejh.com or +44(0)115 7940060.