Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelien Schlumberger
Aurelien Schlumberger
6,127 Points

Responsive design breakpoints for new phones and tablets

I am currently remodelling one of my website, and I have been using pretty old responsive design referring to the Twitter Bootstrap device width breakpoints.

Now that we have new phone resolutions coming out every month, I am really confused at what is the best practice and what should be my break points. This is important because the usage of my website on a mobile device is really different than on a computer.

Lets take the Apple phones. The resolutions for the devices are as follows:

  • iPhone 1st Gen, 3G and 3GS = 320 x 480
  • iPhone 4 and 4S = 640 x 960
  • iPhone 5c and 5S = 640 x 1136
  • iPhone 6 = 750 x 1334
  • iPhone 6 Plus = 1080 x 1920 (downgraded from the original 1242 x 2208)

One would assume that we should create @media breakpoints for each... But no, you also have to take in consideration of the Pixel density or PPI (pixels per inch). Now I find it super tedious to figure out what is the device-width for each phone considering the resolution, screen physical size and pixel density. To my understanding the CSS breakpoints rely on the device-width and not the screen resolution.

I also wish to customise @media breakpoints for tablet or landscape experience because again I want the navigation, button and link interactions different on a mobile (touch) device and on a computer. For example, you cannot hover with a touch tablet.

Finally Apple is one brand, but I would also like to keep it consistent with HTC, Samsung, Nokia, Google Phone, XiaoMi, and so many more brands.

  1. What are your suggestions?
  2. What is your approach?
  3. What is an effective way to calculate device-width?
  4. What breakpoints do you use?
  5. Is there a trick to separate touch devices with desktop devices?

Thank you!

3 Answers

Christopher Borchert
Christopher Borchert
14,814 Points
Christopher Borchert
Christopher Borchert
14,814 Points

Hi Aurelien,

I have a couple of things to add that I hope you find helpful. They're out of order, and the post is a bit long. Sorry.

5) As far as I know, there is no way to determine if the user is on a touch-enabled device. There are ways to determine if the BROWSER is touch enabled, and it seems that modernizr does a good job of this (see the documentation under touch events, or this tutorial ). Keep in mind that many laptops and desktops have both touch and mouse events now. My best advice is to think mobile first: that you should make your site accessible to any mobile users without their having to access tooltips, large sidebars, etc. Once these features are added back in, either through being able to access hover events or media queries, they should enhance the user's experience. You shouldn't make something required to access your website that will limit your user base (flash websites annoyingly did this for a long time).

4) I agree with a lot of what has been said above: make the site look good based on the size, and forget about fitting every screensize. The larger phone sizes can be a drag, especially in landscape mode, but, if you do your job, you provide an opportunity for every user to access your (or your client's) product in an easy and even pleasing way. If they decide to use landscape mode, that's their choice. I like your breakpoints, and, considering the research you've put in, I'm sure if any issues arise, you'll be quick to fix them. I tend to add another breakpoint at around 1024px or 1280px for even larger screens to put a non-flexible max-width to any elements which were percentage-based before (text areas or featured images). That way, lines of text don't get too big, and images don't get too distorted.

3) There are ways to calculate device width in Javascript (window.screen.width and window.screen.height), but there might be an easier solution for you covered in the "Device specific media queries" videos in the CSS Foundations course by Guil Hernandez. Here's the rundown: a) Set the viewport width to the device width so that any devices which try to start zoomed out (desktop mode) will view the page as you meant them to (this goes in your head tag): 

<meta name="viewport" content="width=device-width, initial-scale=1">

b) If you want to do a media query for device size, as opposed to window size, you can use a separate (min/max-)device-width in your stylesheet:

@media screen and (max-device-width: 480px){
}

would affect all devices 480px width and smaller, but not resized browsers in a larger device. Guil suggests to use device-width in queries sparingly or as a backup.

c) If you're worried that the layout of the site will change based on pixel-ratio, etc. I don't think you have to. The max-width of an iPhone6 plus is 414px, not 1242px or 1080px, so your media queries will still work. More on this can be found in the second video on device specific media queries, or in this blogpost, or in this article.

I hope that this helped. Best of luck!

-Chris

Aurelien Schlumberger
Aurelien Schlumberger
6,127 Points

Hello Christopher,

Thank you for your wonderful and detailed answer. Modernizr looks really cool and I will try it out in my app, awesome!

I will also add your suggested breakpoint. Looking at the website Wayne provided, both 1024px and 1280px seem important for landscape mode. I will test it around even if it requires a bit more coding. So far, with my limited testing capabilities, my breakpoints are doing pretty well.

All of your points really help, and if someone had the same questions/concerns I hope they will come across your comment.

Time to check all of your links ;)

All the best!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Aurelien,

I would suggest that you concern yourself less with the device sizes and just work on your site appearance when you resize your browser. If you make sure your site looks good as you resize your browser window it will look good on all devices no matter what the size.

There are so many devices now that you would end up with so many media queries in your css.

That's my approach anyway.

Aurelien Schlumberger
Aurelien Schlumberger
6,127 Points

Thank you Wayne,

I agree with you that there are too many devices!

Resize the browser is helpful to view the aesthetic part of the website, but I also have to take in consideration functionalities that will not work on a mobile device. For example I have tooltips that are displayed on mouse hover, not mouse down, and there is no hover state on a touch device.

Also I don't know what the device-width is for the iPhone 6 and iPhone 6 +, but even with their super high resolution and screensize I still prefer to view the website as mobile version than as tablet version. What are the device-width for these two phones?

What breakpoints do you suggest using ?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

I would think more about what Wayne said and try not to get bogged down in device sizes as there are too many different combinations.

In media queries, a breakpoint isn't really a specific device size. It's a point in your website width where your site design breaks and you need to put in a breakpoint that sorts out the visual design for that general area.

Of course, be aware of the trends in screen/device sizes and the most common ones but try not to memorise them all and fill your CSS with so many media queries because It'll cause you too many headaches in the long run.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

You can take a look at Viewport sizes here, but this just adds to the point about not trying to cater to them.

You can find iPhone 6 viewport Sizes here

Aurelien Schlumberger
Aurelien Schlumberger
6,127 Points
Aurelien Schlumberger
Aurelien Schlumberger
6,127 Points

Thank you Wayne and Jonathan for your answers. It is much appreciated!

The Viewport sizes website is super handy! And I found one answer from that website. In Bootstrap, 768px was a breakpoint that is good for the iPad, but too small for the Galaxy Note, and that was pretty important. In Asia, I believe that there are a lot more Samsung users than Apple users (my website is both in English and simplified Chinese). Now to summarise my breakpoints I will probably go with something as followed:

/* Really small phones */
@media screen and (max-width:320px) {}

/* Regular smart phones, including iPhone 6 + with 414px viewport! */
@media screen and (min-width: 321px) {}

/* Regular Tablets from 480 to 800px including Galaxy tablets - 768px is only good for iPad */
@media screen and (min-width: 481px) {}

/* Desktops and Laptops */
@media screen and (min-width: 801px) {}

Have a wonderful Sunday!

Aurelien