Some clients ask what screen sizes are best when designing a responsive website.  For instance, they ask whether their website should support the Apple line of devices, or the Android systems, or the Windows based computers.  My first question is why?  Does your customer analytics drive you towards a certain set of systems?   Most times, the answer goes along this line. “No, but I heard there are more Apple devices on the market and my website should support these.”

My answer is, why not build your website so that it supports the majority of available devices?  I also ask “What about future devices?”.  You do not want to rewrite your website each time new devices come on the market.  Why not design your website so that it breaks (responsive design speak for automatically adjust) at the precise screen size where your display starts to look out of place?

This is the approach used by several frameworks such as Skeleton, Foundation, and Bootstrap.  Although the number of breakpoints differ between frameworks, the approach to responsiveness is quite similar.  Bootstrap, a very popular css framework, has device screen breaks for extra small (smart phones), small (tablets), medium (desktops), and large (wide-screen monitors).  It is also designed with a “mobile first” concept which supports smartphones right from the beginning.

Another benefit of using one of these frameworks is that you only have to build one version of your website.  No longer do you have to create different websites for different devices.  This makes revisions easy (you only do them once), keeps all device web pages the same (common look and feel), and leads to faster development time (only one code base).

So which devices should your website support?  I say support them all with a mobile first responsive framework!  You will save time and money while producing a website that works for the greatest number of devices.

Want more articles? Visit

Share This