Monday, 18 February 2013

Responsive design - em or px for breakpoint measurements


Introduction

As I stated in an earlier post this year (actually my first post of the year) I'm going to be writing posts on responsive design as I'll be building my first site using it this year. This is about what I've learnt through trial & error about what measurement to use when defining breakpoints.

Using em measurements for breakpoints

I read a few posts on Google basically stating that defining your breakpoints in em measurements instead of pixels has the benefit that if a user increases the browser text size then the page will switch between responsive breakpoint designs as well as switching at different screen / browser window sizes.

This sounded great to me as I'm sure people have the text size permanently increased on their browser / operating system, I personally do on my mobile phone and giving them a design which best suited the larger text size and not just the browser window size seemed like a great idea. I started to have problems though while actually trying to implement this in a HTML & CSS wireframe I was making (I got a bit carried away with that wireframe and pretty much made the site, but that's for another post), mainly with mobile phones.

My problem with using em for breakpoints

I had the problem that some mobiles phone browsers have the default font size larger than 100% to compensate for the smaller size text the user will see on a website designed for desktop browsers. This in-turn would show a page layout that I had designed for a smaller screen size and as a result I didn't feel the user was getting as good as an experience as they could.

Here's and example of what I mean, I had a layout designed for large screen phones like the Galaxy Nexus but when using the default browser that comes with Android it would showed the design made for the really small Android phones. So I had one of the biggest screened phones on the market displaying a design for one of the smallest phones on the market, this confused me for a long time as I couldn't see why it was doing this but other browsers were fine on the same phone. Then I worked out the default browser text size for the Android browser is larger than 100%.

This was looking ridiculous to me and I really thought people were losing out on a large part of the experience, after all the text wasn't getting so big that it would've broken my design for large screen phones anyway

So I switch back to pixel measurements for breakpoints

In the end I decided using pixel based measurements for breakpoints would certainly be the better way to go as using em had caused me so many problems and when I actually used it, it didn't seem to work as well as I'd hoped or imagined.

I however still had to take into consideration that some people use text zoom on their browsers and some browsers have the text zoomed in by default so I used the same method I've been using for years which is to make sure the design of the site is fluid enough to take text size changes into account. Also to help mitigate this potential problem is to make sure your responsive breakpoints for smaller screens are designed so that text size isn't an issue and users won't have to zoom in or increase text size anyway.

Concluding thoughts

If anyone reading this has had different results when using em measurements for breakpoints please let me know as part of the reason I gave up on them was to do with my frustration of not realising some browsers default to a zoomed in state. However I also think using em measurements wasn't very useful and having a fluid design which can cope with various text sizes at the different breakpoints you set for your design is a much better way to go to deliver the best experience to users.

Further reading



No comments:

Post a Comment