Responsive breakpoints is mostly said to depend on your design needs. While this approach is so true, during the redesign process of this site, I felt an unappeasable curiosity on the real browser window size statistics of the current visitors.
So once you are planning a responsive site redesign, you can see your own browser window size statistics using the tool below I made for.
Collecting real wolrd browser window size statistics for your site can give you meaningful insights before even layout your design, or while fitting responsive breakpoints, measuring grid column sizes.
Responsive breakpoints based on browser window size statistics
As I did not found any browser window resolution analytics tool out there, I decided to have my own. Started to collect window size data into Google Analytics, with a really basic visualization of the browser window size samples in the end.
While it is still in a beta phase, it actually works. You can start collecting browser window size statistics right now at Browser window size statistics for Google Analytics.
Start collecting your visitors browser window size statistics with this tinly little tool. Will provide meaningful insights while design responsive breakpoints.
I really enjoy watching all the patterns shaping from the data. For instance I was actually surprised seeing browser window size statistics for this blog. Analytics showed that there are way more users browsing on the higher resolutions than I expected.
I’m not saying the 1440px but all the visitors above. You can see many visitors with 1680px browser window resolutions, also a notable amount of samples around 1920px, and there is many lazily resized browser windows between the 1920px and 2560px era as well. I’m crying when think of the experience for those readers. Personal favourite is having some samples with Morgan Knutson style portrait displays also. Without having these insights I would have created a way more convervative setup of breakpoins for the responsive redesign of this site.
The initial design for the responsive breakpoints considered only browser window sizes below 1440px.
In addition, I can now have a feel the weight of the intermediate resolutions. The non-fullscreen browser window sizes streches all around resulting is really exotic window sizes. Having this in mind I can put the responsive design towards flexible widths with a lot more confidence.
While this feature is for personal use yet, I made some overlays with actual layout screenshots to check the browser window heights against the content. Now I have a taste of what is going to be cropped on page load initially.
Using custom dimensions in Google Analytics makes it lovingly easy to collect browser window size samples.
As Google Analytics holds all the resolution samples you track, you can easily create custom reports for further data processing. Event the first version of this tool was feed by those CSV files obtained from Google Analytics dashboard. You can setup a Flat table custom report with Browser window size as the dimension and New visits as a metric for example.
In any way, these statistics made the webdesign process way more confident. Backed with real user data the whole process became somehow more living. This can give a really clear focus when you determine dimensions, weighting the content, whatnot.
Once you gave this a try, please do not hesitate to submit/vote feature requests via this basic UserVoice forum I’ve just set up. I’m really curious if what tools can assist even further all the responsive webdesign decesions.
The post Responsive breakpoints backed with statistics appeared first on eppz!.