User interacting with gold iPhone

Effective Thinking

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.

StatCounter

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.

When it comes to the various technologies you can employ on your site — HTML, CSS, Javascript, etc. — there are a number of variables to consider and too many recommendations to list here. I recommend you see the “Development” section of my white paper, “Responsive Web Design: Much More Than Media Queries,” where I cover the following areas:

  • 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
  • Javascript – browser compatibility, cross-browser libraries, responsive widgets, and performance considerations for widgets
  • 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.

  • Robert Allen

    Going to develop a responsive website but little bit confused about bootstrap and CSS3 media query. But did the same thing in my views as both will give you a responsive website. Then when we need bootstrap and when CSS3?
    Best Web Development Services

  • CSS3 is a series of properties and rules added to CSS. Among them are media queries that allow us to apply different CSS rules based on display dimensions and density.

    Bootstrap is a framework to accelerate development. It’s a collection of practices and written components. It relies on CSS3 for it’s grid system among other things.

    So you will always use CSS3.

    Use a framework like Bootstrap or Foundation if you want to quickly build out a site or application without writing all the code yourself. With this also comes well-documented and tested components and practices.

  • Pingback: Three Responsive Design Considerations | EffectiveUI()