So every once in a while I find something online that a big company that annoys me, why because they should have enough development resources to fix it and they should have a financial incentive to fix it. Today I noticed that it was Apple Trailers was failing to load any CSS which ended in the terrible screenshot you can see below. My Google search was for “Her movie 2014” and while it’s the correct movie the page showing in Google is a horrible user experience and just looks unprofessional without the style guide loading.
So maybe it was just the page that was broken? Nope it appears that the CSS is failing to load across the entire site but all the on-page images seem to load so what else could I check. I found the CSS files were loading correctly if you clicked the individual style sheet links but I also noticed that all the CSS files were on HTTP:// not the current HTTPS:// site I found in Google. This was a rookie error that a company as focused on design as Apple should be able to get this right…
Why Care about it?
Outside the fact that Apple is the world’s largest publicly traded company based on market capitalisation they are also known for their obsessed with perfection and sorry folks but these pages look like shit. The problem is that all these HTTPS versions of their site are the version that Google has decided to index and show as per the screenshot below. The problem for Apple is that Google is choosing to show the HTTPS version which is currently broken so it’s a bad experience for more than just me, it could be everyone searching in Google for trailers and then clicking to watch them on Apple.
What other fun things are happening?
You can see that there is a warning on the HTTPS version of their site that states “this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the look of the page”. So has Apple just screwed up with their HTTPS version of their site or is someone trying to do what is warned by Chrome and trying to hack Apple?
How can it be fixed?
I’ve heard that Apple hates to use a 301 redirects but these are a valid option and just redirect HTTPS visitors to the correct HTTP version of their website and the problem is solved. Apple’s web developers could also look at ensuring CSS elements load correctly on the HTTPS version of their website which would fix the user experience.
Another option which might seem a simple solution is to add canonical tag that points to the HTTP:// version of their site to give Google a big hint on which is the correct site that should be showing. As you can see below from the source code screenshot there is no canonical tag on the page but here is a link if you want to know what a canonical tag does.