Website Redesign: What are the critical screen resolutions ?

In Part 2, Which Browsers to Target?, we reviewed the targeted browsers and version using Google Analytics
In this part, we evaluate using same period of Google Analytics data.
We sort from most common to less common, guestimate the user profile and their trend [ex: iPhone6 already in the stat but growing fast] and finally put priorities based on % + trend.
More difficult then it seems since some report physical resolutions, some report CSS type resolution, etc.

The reason to not only use % but also estimated user profile and trend is to ensure our web site update will actual target our critical customers [we have both B2B thus must consider "old" corporate computers used by buyer/admin; and B2C thus must consider latest mobiles] not only now but at least for the next 12 months.

We group and organize them in a limited, manageable number of screen resolution, and put them in a more visual infographic with portrait/landscape actual size when suitable that we will use later to do our Responsive Web Design with the critical size breaks.

Responsive Web Design : Screen Resolution Target Infographic

Next Episode: drafting Responsive Web Design for the critical screen resolution…

In part 1, Why an updated web design?, we reviewed the rationales behind our decision to go for a design update.

In this part, we describe which platform/OS/browser we will support and test our web site against.

Step 1: Get stats from Google Analytics

We used past 3 months of Google Analytics to get the following statistics on our visitor base.

1. Operating System:
   
2. Browsers:
   
   Need to go into more details 
   1. Chrome
       

      Very messy and not really useful…

   2. Safari
       

      Quite a range…

   3. Internet Explorer
       

      Definitely useful, still close to 20% of IE users using IE8, guessing corporate computers running XP…

   4. Android Browser
       

      So only 4.x, no need to worry about older versions…

Step 2: Making Sense of it, Threshold selection

Now let’s make more sense of this, using excel and setting some targets

1. Operating System:
   

   OS	%	S%
   Windows	53.9%	53.9%
   iOS	16.9%	70.8%
   Macintosh	15.7%	86.5%
   Android	12.9%	99.5%
   Linux	0.3%	99.7%
   Windows Phone	0.1%	99.9%
   Others	0.2%	100.0%

2. Browsers:
    

   Browser	Version	actual %	∑ %
   Safari	7.0.x	17.02%	17.02%
   Chrome	36.x	16.96%	33.98%
   Chrome	37.x	13.53%	47.52%
   Chrome	35.x	7.17%	54.69%
   IE	11.0	6.14%	60.83%
   IE	9.0	3.66%	64.49%
   Android	4.x	3.04%	67.53%
   IE	8.0	2.89%	70.41%
   Chrome	1.5	2.40%	72.82%
   IE	10.0	1.68%	74.50%
   Safari	5.1.x	1.00%	75.50%
   Safari	8.0	0.85%	76.35%
   Safari	6.0	0.84%	77.20%
   Opera		0.51%	77.71%
   IE	7.0	0.38%	78.09%
   IE	6.0	0.04%	78.12%
   in bold the browsers to be used for full testing

Next Part: Choosing targeted screen resolutions

Why an update ?

First to consider is actually….
Why we should not do any significant update !

1. Our website has pretty good Google rankings for most of our critical keywords in our targeted market Singapore:[more on why later]
   • 42 top ranks
   • 96 ranks 2-5
   • 25 ranks 6-10

   This include not only long-tail low-search keywords (ex:”laser cut leather singapore”, top rank) but also some describing our main activity (ex:”large format printing”, top rank) and some wide and competitive (ex:poster printing, rank 2).

2. We got an average of above 200 visitors per day, most of them qualified that translate to around 50 requests by email and 20 phone calls, being our main business source of new customers, both B2B and B2C, and just nice to fill our production.
3. Our customers regularly praise our website, easy to use even on mobile and comparing favorably against our competitors

So Why ?
Here is our reasoning:

1. We never totally polished our current web site, with many small details here and there [pixels alignment, differences in rendering in various browsers, some pages with gallery some with slide-shows] not satisfying our perfectionist eyes. Trying to fix these with our current HTML+CSS has proven difficult, so a rewrite is expected to allow this
2. While our website has some basic Responsive features and display nicely on smartphones and tablets, it’s not optimized for Retina type aka high DPI displays, with our logo and “icons” being blurs etc.
3. Our website load very fast, but still use a lot of bandwidth and HTTP requests for the “enhanced” features “Gallery” and “Map”, making it not totally mobile friendly
4. We have additional websites on the way for dedicated products/brands (BenMark, Sign4Sure). Updating our current website will provide us a real-case and a base for these two websites.

Each of this point is not enough to take the risk and bear the cost of a redesign. But all together their offer a more compelling story.
And oups, I forgot one key reason: I’m in charge of our web and wanna enjoy some of the new technologies and hopefully share and get praised for it

Next episode: part 2 – Target and Criteria

Featured image © Violetkaipa | Dreamstime.com – Technology In The Hands Photo