Is it common for website to render differently across modern android browsers?

Question

I'm building a mobile website and I'm having trouble getting the website to appear consistently across various android phones on 4.0, 4.1 and 4.2 on chrome browser and stock browser. But when I view the same website on iphones 4s and 5, running ios 5 or ios6, the site appears and functions consistently.

The mobile site I'm working on makes use of CSS3, a lot of javascript animation, imported fonts from fonts.com, and integration with videos from vimeo.com.

Below are examples of issues I'm running into on various androids and their browsers:

• Person 1 - GS3 - Android 4.0 - Stock browser - the website always crashes
• Person 1 - GS3 - Android 4.0 - Chrome browser - the website works great, except some fonts don't appear
• Person 2 - Galaxy Nexus - Android 4.2 - Stock browser - works great
• Person 2 - Galaxy Nexus - Android 4.2 - Chrome browser - vimeo videos don't play
• Person 3 - Galaxy Note - Android 4.0 - Stock browser - everything works great
• Person 4 - Samsung Galaxy - Android 4.1 - stock browser - the site keeps crashing

Is it common for the same website to render inconsistently across various android browsers on operating systems 4.0 and up?

Answer 1

To an extent, yes, it is common. This is because Android devices aren't necessarily consistent in both hardware and features, especially when you start getting into carrier-locked devices.

In mobile devices in general, JavaScript and Flash support can be sketchy (Vimeo may anticipate this and use HTML5 instead, but you're still talking about playing a video, which is, in itself, resource-intensive). Some will support these, while others won't, and some of the ones that support them may not have the hardware to handle them. JavaScript, Flash, custom fonts, and video playback are all resource-intensive, so it's possible you're overloading what the device is capable of.

I recommend paring down your aesthetic features for the mobile browsers, such as using the stock fonts, cut down on the animations (most of which likely don't add value, anyway), and trim off some of the heavier CSS3 tricks (transforms, animations, etc), and see if that improves matters on these browsers. It might also be a good idea to offer some kind of "failed embed" fallback, such as a link, for the videos. (It might be easier to start by cutting out the JavaScript and advanced CSS entirely, then slowly add things back in until you find the breaking point.)

As a side note, it might also be worthwhile to look into the concept of "mobile-first" development principles, which includes focusing on your content, then adding aesthetics as the capabilities of the browser support it (instead of starting big and cutting things out as support drops off).