When choosing breakpoints in responsive web design, what resolutions do you consider? That is which would be the most important to include and which are simply overkill? Just curious.

Edited November 8, 201411 yr by RobertS

I don't think the numbers are hugely important, I just run with 480px, 780px, 900px, 1100px. But I often change these or add in new media querys depending upon the circumstances. You want to ensure that the website looks great at every conceivable screen size so if you see things starting to look less than perfect at a particular viewport width then add in a media query around there to fix the issue. Clearly testing things in this nature means that you should be testing as you are building, you can't decide upon all the breakpoints prior to coding.

Edited November 8, 201411 yr by rbrtsmith

This is where customer profiling comes in. Yes, you need to use the use the general screen sizes as Privileged mentioned above, however, you (or your client) need to find out which device, browser and browser version, the website visitors will use to access the website.

 

Example: if you are creating a website that will only be used your client's employees and they all have a Blackberry Passport (1440 x 1440 pixels) then you need to make sure the website looks great for that device in the first instance.

This is where customer profiling comes in. Yes, you need to use the use the general screen sizes as Privileged mentioned above, however, you (or your client) need to find out which device, browser and browser version, the website visitors will use to access the website.

 

Example: if you are creating a website that will only be used your client's employees and they all have a Blackberry Passport (1440 x 1440 pixels) then you need to make sure the website looks great for that device in the first instance.

 

I wouldn't (in almost all cases) design for a specific browser or device, this can be very dangerous. Your design should work across all devices and screen sizes. it's no good building a website that is not compatible with viewport sizes that might come into the market within the next few years. In most cases these days this is a minimum requirement and it's not particularly difficult to attain either, so long as the design is sensible.

 

The only profiling you should do that's directly related to what browsers your users are likely to lose is for legacy browsers. We generally go back as far as IE9 as IE8 usage is less than in the UK. There maybe specific use cases though where we support IE8. Although this browser profiling has nothing to do with RWD.

Edited November 9, 201411 yr by rbrtsmith

I tend to apply media queries to suit the content. For instance content in a 4 column grid may look fine at 960px on one site, but may appear too "squashed" on another - in which case I'd test a 1 or 2 column style whichever suited best.

As the other guys put it there are no rigid points to break with RWD. For me my basic test is slowly minimising my browser and hoping for a smooth transition from full screen to around 240px ish. The main thing to watch for is that the content of the page still makes logical sense when the layout changes - I've seen a few RWD sites where the column content ends up the wrong way round when it gets to mobile screen sizes.

Edited November 9, 201411 yr by BrowserBugs

Outwith the usual standard sizes to accomodate for smartphones, tablets etc. the resolutions that your website 'breaks' should be your breakpoints

As the other guys put it there are no rigid points to break with RWD. For me my basic test is slowly minimising my browser and hoping for a smooth transition from full screen to around 240px ish. The main thing to watch for is that the content of the page still makes logical sense when the layout changes - I've seen a few RWD sites where the column content ends up the wrong way round when it gets to mobile screen sizes.

240? What the heck reason you have for going that small?

240? What the heck reason you have for going that small?

 

 

Smallest screen I know of is iPhone at 320. I can't see anything smaller coming out. but then again.. who knows!

There are some older androids that go that small... but honestly I don't care two cents about those phones.

240? What the heck reason you have for going that small?

 

Why not? TBH 240 is the min I let my design fold down to but if it's no 'extra' hassle then why not? As for tech yes it's old phones below 320 generally but with Apple Watch etc no idea what could be around the corner.

Hey, if you want to do it, then go for it, but Im not going to bother trying to make a site look good for 240 when the usage is so low, its not even worth a brain thought. So much so that I just looked at my analytics. Since 2006, I haven't had one with a resolution under 320. Thats over 200,000 sessions. Also I control the analytics for a international brand, which has over 600,000 sesssions in the last 6 months, and guess how many they have had... zero.

There is pretty much no reason to account for it. And there is no reason to try to account for a unreleased product right now.

 

Sorry, you are wasting your time, No matter how much or little you spend on it, Any time is time spent unwisely.

Sorry, you are wasting your time, No matter how much or little you spend on it, Any time is time spent unwisely.

 

If it took time! lol and you claim you're 'Advanced' ... *sigh*

 

To make it simple for you; fluid from 30,000px to 240px ... job done

Edited November 17, 201411 yr by BrowserBugs

 

If it took time! lol and you claim you're 'Advanced' ... *sigh*

 

To make it simple for you; fluid from 30,000px to 240px ... job done

 

lolwut?

 

fluid =/= responsive. It could look fine at 320 but break at 240. or have you not done anything more complex than a basic brochure site?

Ah well agree to disagree as this is taking longer than making a site fit 240

I have to agree with @@cibgraphics here, occassionally some of my more simple UIs do work down below 300px and if they do then great, but there's little point in spending time fixing layouts that break on viewports this small. On a highly complex UI this could be incredibly time consuming. It is sort of similar to going down the route of supporting IE6 and so on, the market share is that low it's a waste of time, that could be better spent enhancing user experience on more common devices. These fixes will also add bloat to the css.

Edited November 18, 201411 yr by rbrtsmith

occassionally some of my more simple UIs do work down below 300px and if they do then great, but there's little point in spending time fixing layouts that break on viewports this small.

 

 

This is where i'm coming from, nothing I build 'breaks' at 319px and there are no 'extra' clauses to make it down to 240. Where I fail to see a point in the rigid nothing below 320. If we actually look at my post you will see...

 

 

For me my basic test is slowly minimising my browser and hoping for a smooth transition from full screen to around 240px ish.

 

Please note the 'For me' and the '240px ish' ... nowhere do I say it must go down to 240; gotta love forums with 15 replies and 9 of which are splitting hairs to an opinion of an answer. If it helps stick my answer down with the 'overkill' options which was in the question, IDM.

Edited November 18, 201411 yr by BrowserBugs

But in the case you do build a complex layout and it breaks at say 315px, are you going to take the time to fix it?

 

The 320px boundary is kind of set because that is the smallest popular device on the market. Great if something works down below this, but I don't and I'm pretty sure the majority of the industry agrees that it's no biggie if it doesn't.

But in the case you do build a complex layout and it breaks at say 315px, are you going to take the time to fix it?

 

The 320px boundary is kind of set because that is the smallest popular device on the market. Great if something works down below this, but I don't and I'm pretty sure the majority of the industry agrees that it's no biggie if it doesn't.

 

No I don't take the time to fix it below 320, have I ever said I do? It's the 'great if something works down below this level' and at no point have I said otherwise. As I said before it's how I test things, and in an ideal world everything would smoothly work from a desktop to the smallest size possible. Instead of loading every emulator or deep probes with Chrome extensions a quick 'simple' test is to narrow a browser - saves time.

 

Please note the 'For me' and the '240px ish' ... nowhere do I say it must go down to 240; gotta love forums with 15 replies and 9 of which are splitting hairs to an opinion of an answer. If it helps stick my answer down with the 'overkill' options which was in the question, IDM.

 

Here is the thing, perception is everything. You seemed to make it clear that you test and consequently fix anything down to 240px, which IS a waste of time. We don't want people thinking this is something they should be doing.

It may be splitting hairs for you, but the last thing we need on this forum is misinformation and someone taking testing down to 240 as gospel. For example, if I told you I test stuff down to IE5, you would assume I fix stuff for IE5 correct? It is the same in this case.

 

No I don't take the time to fix it below 320

 

 

Then why test it?

 

Instead of loading every emulator or deep probes with Chrome extensions a quick 'simple' test is to narrow a browser - saves time

 

 

Not sure the point of this. No one said we were loading every emulator and deep probes with chrome extensions. We were arguing over testing under 320 down to 240.

Hahahaha ... then delete most of the forum if what peeps say is gospel.

 

Take back all my posts, all hail the new master of all @@cibgraphics

Edited November 18, 201411 yr by BrowserBugs

No need to be bitter.

Right that's it, I'm getting the police involved.

Wow - didn't mean to get everyone's feathers ruffled over what breakpoints to use. In the end, the first reply was best - it depends on the client and situation. In testing the waters, I am using 320, 480, 768, 1024, & 1280. Good start? Overkill? Not nearly enough?

Also, when one is using breakpoints, is this technically "adaptive" web design over "responsive"? Just wanting to make sure I use the right terminology.

Edited November 19, 201411 yr by RobertS

Responsive = fluid width + media queries

Adaptive = static width + media queries.

Wow - didn't mean to get everyone's feathers ruffled over what breakpoints to use. In the end, the first reply was best - it depends on the client and situation. In testing the waters, I am using 320, 480, 768, 1024, & 1280. Good start? Overkill? Not nearly enough?

 

Also, when one is using breakpoints, is this technically "adaptive" web design over "responsive"? Just wanting to make sure I use the right terminology.

 

I think that many is overkill, you don't need a breakpoint at 320, one at 480 should suffice. again I'd probably skip the 1024 one, you can always add in extra media querys to something that requires something more specific, again those points you choose can vary depending on the project

I put my breakpoints into sass varibles simply using the following as a base in my start template:

 

$screen-lg rarely gets used if I am being honest though.

 

$screen-xs: 480px;

$screen-sm: 768px;

$screen-md: 992px;

$screen-lg: 1200px;

Edited November 19, 201411 yr by rbrtsmith

Follow up question - is it now commonplace to NOT differentiate between adaptive and responsive web design as it pertains to offering it as a service or is it critically important in terms of ethics to ensure the correct terminology is used?

Honestly the client usually doesn't care, they mostly just want it to work with mobile.. We as professionals should though. But it is important that we use the right terminology and explain to the client what they are getting.

I am curious to know how many design for the really big screens? 23" = 1920x1080 & 27" = 2560x1440). Kindle Fire HDX? Just curious.

My sites are device agnostic, in that they should look good in all screens, no matter the size. that is how responsive design should work when properly implemented.

As the other guys put it there are no rigid points to break with RWD. For me my basic test is slowly minimising my browser and hoping for a smooth transition from full screen to around 240px ish. The main thing to watch for is that the content of the page still makes logical sense when the layout changes - I've seen a few RWD sites where the column content ends up the wrong way round when it gets to mobile screen sizes.

 

This is my approach exactly and it's worked for quite a while. I add in break points for when the website needs altering not for when I hit a certain screen size of a specific device.