-1

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...

  • Responsive breakpoints have been asked and answered multiple times before. Please search more carefully and tag your questions appropriately. Here's your answer: Goldilocks Approach. – dnbrv Feb 17 '15 at 19:25
  • I think it's more closely a duplicate of the Responsive Breakpoints? question. @dnbrv, the question you've linked asks about the maximum breakpoint rather than the full spectrum. – Graham Herrli Feb 17 '15 at 19:48
  • I adhere to the rule that the content drives the actual breakpoints. This means that the breakpoints for an e-commerce site, a news site, or a product site will be different. Yet, I stand by Goldilocks in that you need only 2 breakpoints and 3 screen sizes: tiny/mobile, midrange desktop, and large desktop. – dnbrv Feb 17 '15 at 19:53
  • Before this question get voted close, I'll note that this may actually be a question about wireframing process rather than choosing specific breakpoints. Instead of marking as duplicate it may be better to ask the OP to re-scope the question to one of wireframing practice. – tohster Feb 17 '15 at 20:09
  • I'm leaving this open for now, but I suggest following @tohster's advice above. – JohnGB Feb 17 '15 at 20:12
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.

1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.