I love a good cheeseburger, always have. My all time favorite was a local grease pit in my hometown of Cleburne Texas that sadly is no more. Nonetheless I have many other options, especially when I go home to Texas, like this weekend! Today I came across an article talking about the new Jack In The Box mobile web site, I was excited. Here is a fast food brand I loved as a kid. Ironically I loved their Hot Ham and Cheese sandwiches the best, but their burgers are pretty darn good too. So I immediately went for a visit, on my Nokia Lumia 920 Windows Phone and was sadly disappointed.
Sadly Jack In The Box does not redirect to their mobile site for Internet Explorer 10, ouch. For fun I decided to open the site in IE 10 on my desktop by changing the User Agent String to iPhone. The site is a mess and honestly I don't have the time to go in and figure out what is wrong with their CSS, but my experience tells me there is absolutely no reason why the site should not legibly render in IE 10.
For the record, the site does not render well on my Android phone either, its too wide.
Next I decided to open the site on my iPhone on my home Fios Wifi. My first impression was ‘that took a long time’. So I decided to go back to the desktop to get the site's waterfall in Internet Explorer and Chrome. Unprimed, meaning this is the first time you have ever visited the site there are 51 requests, totally 2.15 MB! You may not think that is bad, but it is, its really bad. There are 28 image requests, 11 scripts, 4 big fat requests to Facebook, 3 custom fonts and 1 large CSS file.
28 image requests for the home page is a bit hard to swallow. I know what is happening here, marketing. If you have ever worked on a consumer oriented site where marketing is involved you know what I mean. I get featuring your top products in a prime spot, but the images are twice as large as they need to be. A mobile browser is typically 320x480 pixels. The Jack In the Box Hero images are 640x558 or larger. Now I will give them praise because the images they are using are compressed really well, which is not that typical. Altogether there are 8 very large hero images that slide right to left in 2 different locations.
Honestly, my opinion for a mobile presence is not to push those products at all, instead promote store locations. This is much more functional. When I am loading a site on the phone like Jack In the Box there are two things I would like to do, find a store and place an order. But having the promos is fine, but maybe not 4x2, but instead a single promo with access to the videos as well as the menu (which the site has).
Some of the resources, like http://assets.jackinthebox.com/easter_eggs/zipper/mobile/BaconWink.gif?1360084078036, are not even used on the home page, but somehow downloaded. This is another common practice I see a lot as I evaluate web sites. You should never load a resource that you don't need. If you are, load it in the background, after what I consider the functional site is loaded.
There is at least 1 image sprite in use, but there are several other images that should have been added to the site's image sprite. Doing this reduces the number of requests and the size of the overall payload. Several images I thought should be part of the sprite I could not figure out where they were actually used, so see the previous critique.
Now for file sizes. There is a single CSS file, which is great, but its 300kb in size. I am having a hard to accept I have built several mobile web apps of this size and larger with about a tenth of the CSS, and it worked across all browsers. So I am having a hard time accepting the need for that much CSS. Its a lot to download and it only slows down the site's rendering because all those rules have to be evaluated.
Next scripts. Again the size is too much, over 407kb from the site, plus Facebook, Google and some other utility scripts. Again not sure why so much script for a site as simple as this. Again I have done more with much less. Next the scripts are all loaded in the document's HEAD, not at the page's bottom. This is another core web performance practice violation.
Some other observations for mobile web sites. The developer used the HTML5 mobile boilerplate (or at least I think they used the mobile version), which is perfect. Everyone should start there. The problem is they neglected to replace the stock favicon and touch icons with Jack In The Box branding.
Speaking of touch icons, they do not prompt the user to add the site to their home screen. This is another ignored practice every mobile web presence should implement. Its very easy to do so with Matteo Spinelli’s Add To Home Screen script and CSS. Combing this with the Mobile Web App Capable META tag puts web apps on an almost equal level with native iOS applications.
There are many other issues as there are with any web site or application there always are. I hate when I am forced to release an application before I feel it is ready or has the proper run-time optimizations in place. I have had to just have my heart crushed by marketing teams and stakeholders that don't want to listen to how their choices will damage the overall experience. Jack in the Box is not alone either. I decided to spread the love around if you will and visit 3 of their competitors mobile web experiences, Whataburger (my favorite burger BTW), In and Out and Carl's Junior (who I consider Jack in the Box's #1 competitor). They all failed my expectations.
In and Out and Whataburger do not have a mobile web presence. Seriously? Carl's Junior had a decent mobile web property. All loaded very slowly on all my phones, again over my Fios WiFi.
So why did I write this blog post? I did not do it to pick on Jack in The Box, they are a fine company and I do enjoy their burgers, nor to pick on their competition. Its because there needs to be a standard we as web developers accept as a minimal viable mobile web experience. This involves understanding and knowing how to execute engaging user experiences on par with native applications, and unlike Facebook, that bar is very achievable. Our end users have a minimal expectation for performance and experience and we should honor that. We should also be mindful of our customers mobile bandwidth plans and not try to consume every byte of data they pay for each month.
Its not that these things can't be done, they can. Sadly what I see is a group of web developers and designers who accept false limits on their abilities. This attitude is contagious to stakeholders, marketing and our potential customer bases.
To Jack In The Box's credit the overall site experience was good. I like the features, I can find a store near me and I can evaluate the menu, watch their funny commercials and even share on social media. I may have presented some of it in a slightly different way, but that's OK.
If you want to learn more about the concepts I am sharing and are in Dallas this weekend come to the Dallas Day of .NET and attend my sessions; “It's OK, You Can Create Kick-Ass Web Apps” on Friday and “Web Performance optimization for Modern Web Applications” on Saturday.