Choosing Media Breakpoints

One thing that has been nagging me in the back of my head and prevented me from moving forward is that I wasn't sure of the layouts I wanted to get for different media devices. I didn't know how many breakpoints I wanted, or where those breakpoints would be best situated.

Sure I've read of some in articles, they mostly reference the iPad and iPhone, and well, I'm kinda anti-Apple... So I didn't want to base myself on them but rather on actual resolutions.

So I took the time to look through my google analytics for my blog and see what people are viewing my webpage on. In my mind, I saw a total of 12 different possible breakpoints from all the data I analysed. Yes, that is a lot!! And I cannot create all of them, or well not all of them right away. I don't know if they will all even be necessary in the end, it will depend on where I go with the first ones. My goal might be to one day have the blog optimized for all those breakpoints (which seperates landscape and portrait in some cases).

I've read many an article saying to start responsive design at 320 and work your way up. Well, I don't have a smartphone, I cannot design for it right away, right off the bat. And besides, it's not the biggest chunk of my pageviews. It's still much more logical to start at a normal size screen. What is normal size? Well, it would seem between 1280 and 1439 px wide. Which is my work laptop. I'll make everything responsive so it'll pretty much fit any screen without a scroll bar in sight.

Then I'll go to smartphones, below 320, or maybe below 480 to start with, then redefine those later...

Then it'll be optimized for the iPad in portrait mode, or portrait below 1000, and above 480.

Then for big screen larger than 1920.

Then we'll see. Ideally these are all the breakpoints I could imagine myself doing (in size order):
1) <300 both landscape and portrait(cuz these are almost squares), but there are very few it would mostly be for older phones 2) >301 <479 portrait 3) >480 <599 portrait 4) >301 < 601 landscape (could be divided into 2 if I'd really want to, this would be the very last resort though) 5) >600 < 1000 portrait (tablets' most popular resolution) 6) >600 <1023 landscape 7) >1001 portrait (maximum size for portrait)
8) >1024 <1279 9) >1280 <1439 (most popular resolution and default one) 10) >1440 <1919 11) >1920

So yes, lots of work ahead of me!! If I choose it. I just really needed to know the grand plan to be able to devise how I want my header to rearrange, because it's gonna be the most complicated part to code I think. I've got such grand plans indeed for it! But the more I read, the more I realise not quite everything is possible here. Especially if I want it to be responsive. It would be easier if I just wanted it adaptative (pretty much fixed size but changes layout on breakpoints). I don't want to start working on the header layout just to realize something is not possible for the smallest viewport and have to recode everything.

It will be epic!

TBC...