Measuring the speed of resource loading with JavaScript and HTML5

This is a follow up article to Measuring site performance with JavaScript on mobile, I suggest you read it before you continue. In the previous article I talked about the Navigation Timing spec, here I will talk about the Performance Timeline and Resource Timing specs and how they work in IE10, the first browser to implement them. I created a page that shows some of the data available and a library that generates a HAR that you can later analyse.

Continue reading

Measuring site performance with JavaScript on mobile

There is a lot of talk around responsive Web design being too slow or too resource intensive and that other methodologies can achieve better performance. I don’t want to go into the details of which approach is better because I think different scenarios require different solutions. What is certainly true in all cases is that a Web site or app that loads faster is better than one that is slow. Companies like Google, Gomez and Akamai have all published papers and survey results showing how speed affects user perception of a service from your desktop computer and even more on a mobile device (KISSmetrics has also drawn a nice infographic for the lazy ones). This is the first article and another one will follow shortly. Continue reading

HTML5 forms (and IE10 (Mobile))

One of the many improvements introduced by HTML5 is around forms, users hate filling forms and developers hate validating the data submitted. HTML5 makes these tasks a lot simpler.
In this article I will not talk about what HTML5 added, but I will rather focus on what is new in IE10 mobile, i.e. the browser that comes with Windows Phone 8. At the end of the article I have collected a few useful links that cover HTML5 forms at large and provide more examples and complete support tables. All the code examples are meant to be cross-browser, unless specified. Continue reading

Responsive images and tinySrc

Producing images of the perfect size, when you create a Web site that targets multiple device classes with very different screen sizes is always a problem. There are a number of solutions out there, but they all require some kind of server-side detection and image wrangling. tinySrc is a nice and simple solution that takes away most if not all of the legwork. Possibly the only downside of tinySrc is that it relies on server-side detection itself. A lot of developers that worked with browsers like Chrome, Firefox and Opera advocate for client-side detection where it’s the browser that tells you about its capabilities instead of relying on a static database. I will not go into the details of why and when one is better than the other, let’s just say that tinySrc already gives you the power of the server-side, with my little software you can also benefit from the power of the client. Continue reading