In the first few days following the launch of the first iPhone in June 2007, the device was met with divided opinions. While some people criticized its high price, others saw it as a revolutionary product. Today, fourteen years later, the iPhone has become the force to reckon with, setting numerous standards in the mobile phone industry. Apple continues to present new models every year. And although mobile vs desktop conversion rates show that desktop converts twice as much, 53% of global online traffic coming from mobile phones states that mobile is the preferred web browsing option for most people. This is why web designers need to constantly fine-tune their skills accordingly to make websites mobile-friendly. In today’s article, our web design agency Chicago explores how iPhone dominance on the market affects the world of website design.
iPhone market share in the United States
Apple offers an abundance of products across various electronics categories such as laptops, smartwatches, and tech-related services like the App Store, Apple Pay, and cloud storage. However, the iPhone continues to be its main source of revenue as it generates over 50% of the company’s sales worldwide.
Almost 300 million people in the United States use a smartphone, which is around 90% of the country’s population. Around 47% of that number uses an iPhone, which is over 113 million people. In fact, Apple has sold over 1.5 billion iPhones since 2009, constantly increasing its share on the market.
But, what gave so many people a reason to get an iPhone, and how did web designers deal with this increase in demand? Let’s find out.
The revolutionary iPhone X and website design
On November 3, 2017, Apple released iPhone X. Although some unofficial concept arts of the iPhone show that the borderless screen was predicted long before the release of the iPhone X, it was this model that featured it first. While some web designers welcomed this new look due to more space to work with, others were a bit skeptical. Why? Well, because the device was not fully borderless. It featured a notch that contained a proximity sensor, speakers, front camera, etc. Apple engineers couldn’t find other solutions, so web designers had to brainstorm how to work with the notch in order to create a compelling website design for this iPhone model.
Due to the notch, the status bar on iPhone X is split into two parts. Designers had to update the interface of apps that use that space and ensure that it could be dynamically changed in height because of the taller screen.
When it comes to landscape mode, the iPhone X website and app design needed to be such that the notch doesn’t obscure part of the content. This is why content needed to be centered and placed symmetrically inside the device’s safe area.
Another thing that was new with iPhone X was the lack of a Home button. Instead, the device relies on a set of gestures, and this was something that the website design for iPhone X had to cope with. And so, avoiding the bottom of the screen when placing CTA buttons and interactive controls became a standard for this model to eliminate the possibility of users involuntarily interacting with them while making one of the default gestures.
Apple’s iOS 15 update
Announced in June and released on the 20th of September, iOS 15 is compatible with the following devices:
- iPhone 13, iPhone 13 Mini, iPhone 13 Pro, iPhone 13 Pro Max
- iPhone 12, iPhone 12 Mini, iPhone 12 Pro, iPhone 12 Pro Max
- iPhone 11, iPhone 11 Pro, iPhone 11 Pro Max
- iPhone XS, iPhone XS Max, iPhone X, iPhone XR
- iPhone 8, iPhone 8 Plus
- iPhone 7, iPhone 7 Plus
- iPhone 6s, iPhone 6s Plus
- iPhone SE (1st and 2nd generation)
- iPod touch (7th generation)
The new software features a huge update to Safari, the iOS default internet browser. In popularity, Safari is second only to Google Chrome among all web browsers. Although the exact percentage is disputed, it is estimated that as much as 34% of all mobile traffic originates from Safari, so the redesigned iPhone interface may conflict with a variety of website designs.
What has changed?
The interface got a full makeover. However, what affects iPhone website design the most is that all navigation controls are now combined into one tab bar. The bar is placed at the bottom of the screen so it would always be within reach of a thumb regardless of the size of the screen. Tab bar would appear when the page loads but would minimize as you scroll down. While the bar is minimized, small reload and stop buttons are shown at the bottom of the screen. To make the bar appear again, you either need to scroll up or tap anywhere close to the bottom of the screen.
How does the tab bar affect iPhone website design?
The new tab bar sets multiple challenges for web designers. Since it is not attached to the outside of the screen but instead floats over the top of the content, any elements behind it can be interacted with only when it is minimized. Another problem is the fact that the bar relies on swipe and tap interactions, so there is a chance that users might trigger undesired actions.
Here are a few things to avoid on your iPhone website design:
- The navigation bar or support widgets placed at the bottom of the screen
- A scroll to the top button placed at the bottom of the screen
- Basket summary placed at the bottom of the screen
- CTAs positioned just above the fold
Though it is hard to say exactly which portion of your audience uses the new iOS 15, you can get a rough estimate by checking the portion of traffic coming from Safari through your website analytics. However, since many of these elements are common, especially to eCommerce stores, most site owners will probably have to rework their website design following this new iPhone software update.
How to adjust the website design to make it compatible with this iPhone software update
Since the iPhone’s web browser won’t automatically adjust your website design, you will have to redesign it yourself. The steps you have to take primarily depend on your specific website design. However, one thing is sure: You need to replace, remove, or reposition all conflicting elements.
If you simply need to reposition some of the elements on your website, the easiest way is to use special CSS properties called Environment Variables. These were added in 2017 to deal with the aforementioned notch problem and will dynamically adjust the design of your website to account for the tab bar. Website elements will be placed higher while the tab bar is active and lower while it is minimized. You can also input additional JavaScript to further adjust this behavior.
Another thing you can do is simply shift all of the conflicting elements placed at the bottom of the screen slightly up so they wouldn’t interfere with the tab bar.
Final thoughts
While the world of web design is pretty unpredictable with new trends emerging regularly and even some of the old ones being reinvented, there is a constant that’s been trending for quite a few years: iPhone is increasing its market share in the United States rapidly. With nearly half of the mobile traffic coming from iPhones now, web designers need to be on a continuous search for new creative solutions to account for various design and software features, both current and upcoming, of this electronic giant.
