|geekwagon.net at 325px|
I'm not a fan of where they choose break points for responsive design. No doubt they've put in more effort than me, but with their defaults a half-sized browser window on a 1280 x 1024 monitor brings up the shortened "hotdog" style menu.
I am old fashion, I still have a 4:3 monitor (in my defense it is my secondary monitor). For geekwagon.net's more responsive redesign I made up my own break points. They are not perfect, but here is the thought behind them.
At it's smallest, geekwagon.net displays only two tabs and my contact information. This is how it appears on most mobile devices (I don't have many to test with). My phone shows a width of 1080 with a pixel ration of 3, so it's 360px wide. A mobile device with a pixel ratio of 2, 540px wide, will also show this version.
The half window I was complaining about with bootstrap, also shows this window... so I'm a total hypocrite, but at least I don't have a "hotdog" menu.
|geekwagon.net at 640px|
|geekwagon.net at 960px|
|geekwagon.net at 1100-ish px|
The final break point is at 1100-ish pixels. Here the only change is the summary tab switches to two columns.
This post has referred to break points in terms of pixels, but the css media queries are in em's. I choose this because zooming shouldn't break a website (and as I get older I find a lot of websites I Crtl + mouse wheel on). Zooming in or out on geekwagon.net should yield appropriate results. For example, in Chrome with a zoom set to 400% on a 1920 x 1080 monitor the page will look like it does at it's narrowest break point. Although it will be giant.
My personal website doesn't appear under the projects I've worked on even though I've spent a lot of time on it. There is however an easter egg that will explain a little about the philosophy behind geekwagon.net.
Now all I need to do is spend some time refining the code that makes my blog! I know how horrible it is.