Determine correct breakpoints to wireframe to a responsive website!

Question

My problem is about choosing the right breakpoints for a responsive website as it's wireframing (Not determining in the code phase). I am having trouble about this. Because many people say that choose different breakpoints. For example in the below websites if you look at them you'll see that there are number of different suggestions. Some recommend to choose 5 breakpoints. Some recommend to choose just 3 (mobile,tablet,desktop). But I confused. Here are links about different suggestions: http: //support.balsamiq.com/customer/portal/articles/615901 http://getbootstrap.com/css/ What are the ideal widths a website should be designed for on a phone/tablet/computer? And many suggestions more than that.

For example, Bootstrap suggests 4 different breakpoints. These are small-tablet-desktop-large desktop. Can anyone tell me what is the best way to choosing correct breakpoints? I had decided to choose tree: 320px to 480px, 480px to 768px (for the mobile landscape orientation), 992px, 1200px+ But one more question occurs at this time. Which sizes do I need to use between these two: 320px or 480px? and 480px or 768px (for the mobile landscape orientation).

Edit: The other question that is really important for me is: Let's we assume that I've chosen the number of breakpoints I will use but what should be the size of them? For example, some grid system has 980 width some has 992 width (like in bootstrap) and some has 960px width. There are really confusing for me to determine the correct breakpoint width for wireframe. Thank you...

Answer 1

Nice question.

I think there is no "best practice" here because it really depends on what your wireframing objectives are (e.g. high fidelity vs low fidelity, proof of concept vs specific interaction design, etc).

But if it helps, here is how I wireframe responsive websites:

• I use wireframes for very rapid, iterative UX design. So speed and iterability are very important to me.

• My UX teams understand responsive design, so they are able to "interpolate" between two layouts without having to create a wireframe to illustrate exactly how flow changes.

• I typically just do two low-res wireframes: mobile and web. For web, I use a landscape 16:9 frame (since the high-aspect-ratio is typically hardest to design), and for mobile I use the iphone 5 aspect ratio.

• Based on these two endpoints my teams are usually able to interpolate how elements would flow for different aspect ratios and viewport sizes. If it's something complicated, we sometimes add a few more wireframes in between.

• Wireframing in low-res allows us to avoid the extra effort to get pixel-perfect. Precise breakpoints are done later in styling once we get the basic responsive flow right, because doing it too early is a waste of effort and money. It also gets our priorities right: iterability is more important than fidelity, and behavioral flow is more important than styling.

• Setting precise breakpoints is expressly not something we do in wireframing. It's done later on in styling, because a truly responsive website should accommodate a large and smooth range of viewports, so we avoid wireframing the breakpoints intentionally to avoid creating "false anchors" psychologically and visually.

YMMV depending on how your team works and what you use wireframes for.

Answer 2

Your breakpoints should be defined by your content and your content only.

Take each element case by case and decide based on ease of content consumption at what point it should break into some other layout configuration.

It's a mistake to silo everything on a site into predetermined screen widths as you'll end up individual elements which are little bit stretched or a little bit squashed and therefore harder to read or click. Elements that would actually have benefitted from another 100 pixels either way before breaking. To do this successfully you must focus on the content of those elements rather than on a set breakpoints.

It's also a wise move to break away from the idea of tablet, mobile and desktop because in reality things are more fluid. Thinking about content ahead of devices and their technical specs is how to win with this one. A good example of this is laptops, many of which have touch screen interfaces and are technically mobile, i.e. used over wireless or on transport etc, but from whose screensize you cannot deduce this information, hence tying screen sizes to device types can be very misleading and impact on the user experience.

Answer 3

The best breakpoints depend upon your content and design of the website that you going to develop.

To make website responsive you have to check at what resolution breakpoint is your design getting disturb it all about your way of thinking and capability.

And also consider the current available devices resolutions screens for ex. iPads, mobiles etc.

Most considered break points:

• 320
• 480
• 640
• 860
• 776 or 768
• 900

etc.