Accessible Web Design For Safari on The iPhone

Spread the word

Accessible web designer Safari Browser on iPhone and iOS

Many shoppers spend hours online searching for the best iPhone contract before making their purchase. They will compare contract deals across many Networks and are happy to switch to another provider if they can get a better deal.

And hey, why not switch if you can get an upgrade at a better price? Especially when there are excellent iPhone comparison tools around like iPhonesbaby that help people find the best deal easily. That particular site even has “Deal Alerts” so consumers can get the latest deals by email as they happen.

So let’s make no mistake, people love and treasure their expensive iPhone devices. This means that it’s even more important to make sure that the web pages you design are fully accessible in the Safari browser on Apple devices

This is the era of the smartphone. Small, ultra-powerful handheld devices that everyone carries. This current period of history is known for mass adoption of connected devices, including people using the Internet on their phones on a very large scale and on a daily basis.

First of all, if you need a refresher on accessible design, then read our post What is Accessible Web Design?

To take advantage of the current trends in user behavior characteristics, companies employ web designers to increase web engagement and ultimately to increase their profits. Now an interesting question arises here; Are all websites profiting from the web? The answer is simple. Unless you make a user-friendly or accessible website, visitors will not convert and add to a company’s bottom line.

The more accessible website design that you create, the more it will yield. Whatever the specific goals of the site may be, you can’t sell even a loaf of bread in a shop that doesn’t look clean or perhaps the door is stuck closed. You have to make it good looking on all devices and then you will be well-placed to make it attractive to potential customers.

Considering that the Apple iPhone is one of the most popular mobile devices currently in use, then iPhone accessibility becomes very important on every website. Statista published a report in 2016 stating that there were 90 million iPhone subscribers in the USA. By now there would be a lot more considering the fast-selling iPhone X.

Use Xcode’s IOS Simulator to Test Mobile Websites

It’s also worth remembering how important iPhones are to their owners. Most people carry their iPhone around with them all day long, use it as a calendar, check the time on it instead of wearing a watch, do all their social media interactions on it and even use it as an alarm clock. Most people have their iPhone with them, by their side 24/7 and even have it next them at night while they are sleeping.

There is no doubt about the value that people place on their mobile phones! Accordingly, people also expect information on their iPhone’s to be presented in the most flawless way possible. In fact, due to web and coding standards that have been in place for years, they actually expect this now.Gone are the days when you might forgive a website for not rendering properly on your phone’s browser!

Added to the high expectations that people have of their iPhone’s performance and ability to render any web page properly is the sheer cost of these devices.

But don’t just take our word for it. Walk on the streets and in the malls of the United States, and notice how everyone seems to be holding an iPhone. The product of Apple Inc. that has changed everyone’s life. It makes what you do every day, a lot easier than any other device.
This is why a lot of apps and websites are designed exclusively for the Apple Mobile Operating System, or iOS. It is not just because of the number of people that use it, but also the things that you can do with the advanced capabilities of the iPhone product.
iPhone Screen Size and Resolution history
Image courtesy of 
It should be obvious, that with a high-tech enabled audience, you need a great website that can meet their expectations. With the sheer number of people that are using the iPhone, and invariably the Safari web browser that is bundled with iOS, you need to develop a website that can use the advanced capabilities of the Safari browser and iPhone.
Safari is a great web browser for iPhone because it integrates iOS functionality in the browser. There are all sorts of tricks that your web designer can incorporate into the web pages that Safari can take advantage of.
For example, Safari makes it easy for users to dial a phone number straight from the browser without any special coding. The current HTML5 and CSS3 web coding standard incorporate lots of new features that mobile web browsers like Safari can take advantage of. One could say that coding pages for mobile phones is easier now than it ever was. Apple provides a full list of HTML5 and CSS3 features for Safari.

Web Inspector with Mobile Safari

So the page coding is one thing, but more important is the actual content. Here are some content oriented tips to help you design a more engaging website for Safari on iPhone:
  1. Be truthful as you can. Honesty is always the best policy. Any writing needs to have an authentic voice, so whether you are creating blog posts or product descriptions, make sure that you take a lot of care over the text. As well as avoiding litigation, the truth will always serve you better than falsehood. In conclusion, be wise, be authentic and be of service!
  2. Adapt to all iPhone screen resolutions.There are by now several different iPhone models and most have a different screen size and resolution. This means that your code should adapt the web pages to the different screen sizes. In general, this means using responsive web pages. Apple has published a full list of iPhone screen resolutions, as a guide for your responsive pages.
  3. Keep testing. When trying out new designs, it’s a good practice to keep testing the pages at every step in the design and publishing process. Use a good split-testing tool like Google Optimize to test one version of the page design against another. This will show the best result for user engagement rather than code bugs and what you may end up doing is negotiating a compromise between accessibility and responsiveness.
  4. Focus the content. Whatever a website visitor wants, they want it fast. Long paragraphs of irrelevant text, can drive them away to another website because the internet is chock full of web pages competing for attention. This does not mean that you make the page brief. In fact, you should aim to make your page the best page on the internet for a given topic. That means covering a single, focused topic in great depth but in an easy to read style.
  5. Ensure linked pages are accessible. Double check that any page you link out to is as accessible as your own page. This will not only provide the visitor with a smooth experience once they have left your site, but it will also please the search engines who like to crawl web pages. A smooth and crawlable web is of benefit to everyone. For example, if the page you link out to is not mobile optimized, then choose another page to link out to instead.
  6. Think about genuine accessibility. There’s a saying at Apple Inc. The products that they design are not just for some or most people, they should be designed for everyone. So imagine how a color-challenged visitor or a dyslexic visitor will consume your hard worked-on content? Many people who visit your website will have some kind of reading challenge. In fact, it is estimated that up to 20% of Americans have some kind of learning disability. Let’s help make the web accessible to everyone.
That may be enough to get you thinking about content accessibility, so let’s take a look at the issues regarding designing accessible web pages for iPhones and the Safari browser.

10 iOS Safari tips you need to know (but don’t)

  • Many designers have their favorite web browser and most design pages on a desktop computer. Often Firefox or Chrome is the developer’s browser of choice because they both have a lot of developer plugins available to aid coding. Safari does have some quirks and does not support all of the same features that the other browsers do, in fact, it may support some that the others don’t. This means that fully testing your final pages for compatibility in the Safari browser is paramount.
  • Once again, it’s worth acquiring a bunch of Apple devices, both new and old to test your web pages on using the Safari browser. Often developers will shortcut code and only design for the latest devices, forgetting that there are millions of older devices out there. Be smart and test your pages on at least 10 different Apple devices with different screen resolutions and iOS versions, not just the latest version.
  • Colors can render differently from browser to browser and Apple screens so make sure that the friendly HTML color scheme you use looks as you intended it in the Safari browser.
  • Navigation on a mobile device can be a challenge. Make sure it’s easy for your visitors to go back a page, find the menu and generally navigate around the site.

How to View Web Page Source Code on iPad

Keep the above tips in mind, and you’ll make both a successful and an accessible website for Safari on the iPhone. Remember, people love their iPhones and can take a long time to compare the best iPhone deals, these phones are coveted, luxury items and a status symbol. Many people spend more time on their iPhone than they watch TV in the modern world, so let’s make sure they can use your website on their phone and convert to a customer with ease!

How to Speed Up Safari on iOS 11

Spread the word

Leave a Reply

Your email address will not be published. Required fields are marked *