Hi All

 

Just looking for some advice on break points. In particular, I was wondering if there is some agreed standard in the community anyone knows of, for when to hide a pages normal nav area and display a mobile one.

 

I'm kinda just winging it at the moment as I attempt to code my first responsive page with media queries.

Yet I'm not sure if my chosen break point of 820px is to early to show a mobile nav.

 

Anyone care to share their opinion?

 

 

 

Firstly don't use px when you're specifying measurements (unless you're doing a border). Use ems or rems instead as these will ensure the content scales with the device and makes it much easier to create something that's responsive and tweak later. Use an online converter to convert your px to em/rem. They can take a little getting used to but once you're comfortable with them, they'll rapidly speed up your development time.

 

Here's a little article by Google on breakpoints. There's no hard and fast rule since devices are different and new devices are emerging all the time. The best thing to do is test your site at different sizes and add a break point if you feel the content needs one. Don't let the code or a responsive grid design when to break it.

I cover dynamic navigation breakpoints in my blog post http://rbrtsmith.com/2014/12/handling-responsive-navigation/

 

I prefer to go with a dynamic breakpoint like the example in my blogpost, that way if the menu items were to change in any way then you wouldn't need to work out a new breakpoint. Handy if you have a lot of clients.

 

 

Btw I use REMs & EMs for most things but I wouldn't use them for breakpoints. why? Because it's not something that should be tied to the root font size in my opinion. Also it makes for easier debugging in the Chrome dev tools to use px in media querys.

The original argument for EMs against px was for zooming on old IE implimentations. All the versions of IE that support media querys do not suffer those zoom issues with pixels, so that's not a valid argument here.

 

You cannot directly convert px to EM or REM because REMs and EMs is directly related to the font size - not the viewport or device size. setting a root font size of 62.5% will mean that you divide the px by 10 to get the equivalent REM, things get more complex with EMs because of the way they cascade. An online converter ain't gonna manage this if it doesn't know your font sizes.

 

I use media querys to change the root font size for different screen sizes, this allows the typography, spacing units and so on to scale down as the viewport size reduces.

Edited January 22, 201511 yr by rbrtsmith

Great article Robert, I think I'll have to try this in future. As a reluctant developer, responsive navigation is normally the part of the job that brings me to the edge of tears with frustration.

 

Btw I use REMs & EMs for most things but I wouldn't use them for breakpoints. why? Because it's not something that should be tied to the root font size in my opinion. Also it makes for easier debugging in the Chrome dev tools to use px in media querys.

The original argument for EMs against px was for zooming on old IE implimentations. All the versions of IE that support media querys do not suffer those zoom issues with pixels, so that's not a valid argument here.

 

Good point, I've heard mixed things about rem/em vs px breakpoints, but I agree having a 'hard' breakpoint defined is easier for debugging. One argument was that it's more flexible when it comes to varying device sizes, particularly with the influx of 'phalbets' and 'in-between' devices, but I guess the proof is in the pudding as they say.

 

You cannot directly convert px to EM or REM because REMs and EMs is directly related to the font size - not the viewport or device size. setting a root font size of 62.5% will mean that you divide the px by 10 to get the equivalent REM, things get more complex with EMs because of the way they cascade. An online converter ain't gonna manage this if it doesn't know your font sizes.

I use media querys to change the root font size for different screen sizes, this allows the typography, spacing units and so on to scale down as the viewport size reduces.

 

 

Yes, I didn't specify in the original post that em/rem is linked to the root font size (I tend to use 16px as my base) as I assumed it would be covered in the article I linked to.

Thanks for the kind words

 

Using Em's and Rems aren't at all influenced by the device size, it's down to the font-sizing of the root (HTML) element. I have some preset media querys but I also add more if necessary when it requires. But if were coding in a responsible manner i.e. avoiding magic numbers completely you will find yourself requiring far less media querys, and things will still look great at all conceivable screen sizes.

 

Like vertically centering content properly rather than using padding / margin values (magic numbers!) you know it remains centered no matter how tall or width the container is. Otherwise you need a bunch of media querys to keep adjusting those magic numbers... not a good way to develop a robust front-end

Edited January 22, 201511 yr by rbrtsmith