Chapter 3 - Mobile and Browser Support

We learned in Chapter 2 how to put together Open Graph, Twitter Cards, Meta Tags and Schema.org and now we need to make sure our web presence works for a majority of browsers for desktops and mobile devices.

First, let's take a look at the current browser market share in February 2019.


Desktop and Mobile Browser Market Share February 2019 - Stats by Statcounter.com

Chrome is the clear leader when it comes to browser usage. However, you cant count out Safari, Firefox and Microsoft IE & Edge support.
78.71% of mobile browsers in this list were tested with wadebach.com and 5headinternet.com and 91.42% of desktop browsers were tested based on these stats by StatsCounter.
Chrome, Firefox, Safari, IE and Edge were tested.

And now let's take a look at the current operating system market share in February 2019.


OS Market Share February 2019 - Stats by Statcounter.com

Android and Windows are in a tight race but we need to support IOS too.
86.48% of operating systems were used and tested for this article based on these stats.
Windows, IOS and Android were tested.

Let's look at the mobile and browser support using my websites wadebach.com and 5Head Internet Solutions.

Meta Tags

(Used by Browsers, Search Engines and other web services)

The meta tags HandHeldFriendly and MobileOptimized are nice to have but remember in Chapter 2 that Google doesn't support these tags. The ViewPort tag is supported. The setting I use is the most basic. I trust my code that it will work accordingly regardless of how the site is viewed and on any platform or operating system. There are other settings like initial-scale that controls the zoom of the page. maximum-scale, minimum-scale, and user-scalable properties also control how zoom is used.

I enjoy extending website applications to the mobile application platform instead of developing for the mobile stores. Apple Touch Icons allow you to make your application or webpage look like a native application on the device's home page. You can use Apple-touch-icon or Apple-touch-icon-precomposed for the home page graphic. Precomposed uses the natural image while the basic call will have added effects to the icon.

Apple-touch-startup-image is used when your application or webpage is being loaded. It is mainly used when the connection is offline.

How to Save the Apple launch icon to IOS Home Screen

Using Safari, click on the action button and scroll to the right until you reach "Add to Home Screen". Edit the title if you like and press Add. The icon will be added to your device.

How to Save the Apple launch icon to Android Home Screen

Using Chrome, click on the menu button and select "Add to Home screen". Edit the title if you like and press Add. The icon will be added to your device.

Cascading Style Sheets

(Used by Browsers)

Cascading Style Sheets should be the only files that contain any proprietary browser styles that control how content is displayed. It doesn't make sense to me to add code in your applications that is specific to one browser unless it is for an organization and they have defined company standards. IE use to be the company standard and still is for many organizations. I worked for one company where Chrome was the only supported browser and the company was a windows shop. This opens a can of worms for IT department to explain that their users can't use Firefox, IE or Edge due to them not working properly. For me, it just makes sense to use code where all browsers can view the content without functionality issues. I want my code to work with every operating system and all browsers. I use Adobe ColdFusion for developing applications, but my code doesn't use proprietary Adobe code. I can move it from a CF server to a Lucee server and run without problems. It's always best to keep it simple.






IOS

(Used by Apple Devices)

Everything is looking great with Chrome, Safari, Firefox and Edge with an IOS device. There is some minor spacing differences but that is not a concern.





ANDROID

(Used by almost everything besides Apple devices)

Everything is also looking great with Chrome, Firefox and Edge with an Android device.

HTML

(Used by Browsers)

There are times where an application or a website just won't work for a smaller mobile display with portrait. The snippets of example code above can help. If the device's view width is under 800 and in portrait orientation then display the warning message until the user rotates their device to landscape mode.

Mobile Results for 5HeadInternet.com


Portrait

Landscape





DESKTOP

(Windows 10)


Everything is looking great so far. The spacing is slightly different for each browser but not enough to warrant any changes.

Desktop Console

Every modern web browser includes a powerful suite of developer tools. Browser web developer tools should be a step in your testing and QA reviews. The tools can check loaded HTML, CSS and JavaScript. These tool can help you fix any possible issues with these elements.

How To Access Developer Tools

Press CTRL - SHIFT - I for Windows and Linux or CMD - OPT - I on OSX.

Press F12 for Windows only.

Press CTRL - SHIFT - I for Windows and Linux or CMD - OPT - I on OSX

Press F12 for Windows only.

Safari > Preferences, click Advanced, then select "Show Develop menu in menu bar."

Conclusion

IOS, Android and Desktop examples show that you can provide an excellent design, navigation and multiple layers of bells and whistles all while having them work properly for more than 90% of operating systems and browsers. You will have a further reach for your products and services.

We are now ready with Open Graph, Twitter Cards, Meta Tags, Schema, Mobile and Browser support. We look into old school practices in the next chapter and how some of it is still relevant today. We'll tie it all together with searching and posting in chapter 5.

We have covered so far...
CH 2: Meta Tags
CH 2: Open Graph
CH 2: Twitter Cards
CH 2: Schema.org
CH 3: Mobile Support (IOS and Android)
CH 3: OS Support (IOS, Android and Windows)
CH 3: Browser Support (Chrome, Safari, Firefox, IE and Edge)


Questions, comments, want to point out errors or just want to say Hi? Please fill out the contact form below.

3/1/2019 - Chapter 1 - Hello World! - Website Upgrade
3/5/2019 - Chapter 2 - The Big 4
3/10/2019 - Chapter 3 - Mobile and Browser Support
3/12/2019 - Chapter 4 - Old School
3/16/2019 - Chapter 5 - Posting and Searching
3/22/2019 - Chapter 6 - Images and Analytics
3/24/2019 - Chapter 7 - Retrospective I
4/13/2019 - Free Basic Website Meta Tag Generator

First Name:

About Wade

I am dedicated and accomplished application developer and multi-hat information system administrator and manager. Extensive background with the full lifecycle of hardware with systems, devices, networks, databases and software development while ensuring optimal performance.
 
WadeBach.com

Last Name:
Email:
Message: