June 16, 2014
Tips for Responsive Website Development
When developing a site that will display on numerous devices, it is imperative to know what features will work on each of the browsers. CanIUse.com is an excellent resource for determining if a feature has enough browser support to be included.
It’s generally not a good idea to try to support all browsers, so draw the line at a logical place and record your decisions in a support matrix. Understanding the current traffic on a site and browser/device trends will help make this determination. Current site statistics are a good place to gain initial insight into the makeup of the site’s user base. However, be cautious that the numbers can be misleading when presented on their own. User interviews are helpful, to complement and further explain the analytics data. You can determine overall browser and device trends by visiting a site that tracks that. They don’t all use the same process, so be cognizant of their gathering methodology (in case it introduces bias). I prefer using StatCounter Global Stats.
Remember that your support matrix doesn’t have to be a hard line; a tiered approach often works well. In this method, the site’s primary browsers get the full experience while secondary browsers get a functioning experience that may simply lack some visual polish. A possible third tier may only get primary site functionality, or a message directing them to another channel for help.
- HTML – conditional comments, IE scripts, meta tags, semantic tags
- CSS – preprocessors, browser prefixes, fallback values, measurement units, media queries, drawing in CSS, and grid systems
- Hardware Acceleration – to handle animations and transitions better across devices
If you have recommendations related to responsive website development, I’d love to hear them. Leave a comment, and stay tuned for the final part of this series: alternate formats.