RWD Podcast Episode #14
Listen to episode
Show Notes
Using Responsive Frameworks and standard breakpoints
I also came across a question around using responsive frameworks or using a set of predefined breakpoints when approaching new projects. I can see the benefit for both approaches, but there is a much better (in my opinion) approach towards this — my answer is as follows.
I would lean towards saying no, you shouldn’t have predefined breakpoints.
Standardisation is great when you can rely on standards. Standards would mean that everyone would be using the same phone with the same dimensions with the same pixel ratios. Standards would also mean that everyone would have the same website with the same strucutred content, same navigation patterns, same number of columns, same ratio of columns, same widgets in the side bar and same interactions and transformations.
If we have these two things then you could easily define specific breakpoints.
One thing you mention was “what or how would you target the devices”. This raises another interesting discussion point. Should we be targeting specific devices? If our client specifically wants to target the iPhone and iPad then we’re already including 4 separate queries to cover the iPhone4 and iPhone5 and the various iPads now available, but is this actually what the client wants? Do they really mean iPhone & iPad or do they want their website content to be easily digested across mobile and tablet devices as well and desktops (and game pads, e-readers, televisions etc etc). It is usually the latter case, and with the number of different dimensions in the market today you have two choices
- Set breakpoints for every device size
- Set breakpoints when the content requires a tweak (text size, column width etc)
With option 1 you have standard breakpoints & with option 2 you do not. What you do have with option 2 is a site that works beautifully across every device size available today, and every size available tomorrow as well because the design looks great in those in-between bits.
I’m not totally against setting defined breakpoints to get started if that’s your workflow. I prefer to approach from a single tube of content and begin to make the viewport wider. When it looks rubbish, add a breakpoint and include the required tweaks. Rinse & repeat.
If you work better with set breakpoints then by all means use that approach, it still works better than a desktop and mobile specific site, but try and not be set with the same breakpoints every time, feel free to tweak them a little.
