1

I was given a quote for a website that states: "responsive 3 breakpoint design, designs for mobile (portrait, landscape), tablet (portrait, landscape), desktop (optimized to 1200 pixels) plus desktop to accommodate larger screens."

Wouldn't that then be 6 breakpoints?

Improve this question
4
  • Not necessarily. A break-point indicates where the layout changes as a result of screen size. One can have the same layout for both portrait and landscape.
    – Mayo
    Mar 31, 2015 at 17:31
  • @Mayo that's true, but then why mention them as two separate things? I, too, count 6 breakpoints, but really you need to ask the person that gave you the quote.
    – DA01
    Mar 31, 2015 at 21:04
  • I agree it's confusing the way it was described. I think the person who wrote the quote should have come up with a clearer way of describing what the company would produce. As it is it's open to interpretation.
    – Mayo
    Mar 31, 2015 at 21:40
  • On a side note, a better way to handle responsive design is not to look at the type of layouts (mobile, tablet, desktop, ...) but just add a breakpoint when the design actually breaks, hence the term.
    – Vince C
    Apr 29, 2015 at 6:21

2 Answers 2

Reset to default
3

Not really.

Although not terribly up to date, the following illustrations demonstrates the concept of breakpoints well:

A horizontal axis with marks for various devices widths and heights, split into 4 main sections

What's important to notice is that often the same device (iPad, for instance) will fall into a different area when in landscape or portrait.

A more up-to-date figures are provided by Bootstrap:

A table showing the 4 device sizes for Bootstrap's grid system

There are 4 'areas' and 3 breakpoints.

Anyhow, whoever wrote the requirements was fully aware of responsive breakpoints, but I agree that adding landscape/portrait is confusing, particularly as devices vary in size.

Improve this answer
0

instead of being concerned with device breakpoints the best practice is to design for your smallest viewport first.Don't worry for portrait and landscape state , they will fit because you use min-width. and also media queries is very general and vary from case to case. you could define based on your audience how many break point you need e.g for my recent case i used this queries:

@ media (min-width:400px) larger than mobile @ media (min-width:550px) larger than phablet @ media (min-width:750px) larger than tablet @ media (min-width:1000px) larger than desktop @ media (min-width:1200px) larger than desktop HD

(based on http://getskeleton.com/#queries)

example: you would have break in these two point for ipad @ media (min-width:750px) larger than tablet for portrait Ipad @ media (min-width:1000px) larger than desktop for landscape Ipad

But if you want to design based on framework like bootstrap you could use just 3 break point , i use bootstrap always as frame work but i believe there is some limitation in design and feeling ( may some call it advantage) cause it's break sooner than user will expect, for example i have 13 inch laptop and for some website it fall into the Ipad state ( hamburger menu ) which i don't like , i think i lose the full ability in my laptop with this sort of design.

Then all is depend on amount and kind of data that you have and audience as well, if you want to design a news website, big amount data and vary user go for 3 point break because it's clean and all people can use it .

As result no worry for portrait and landscape state , they will fall into next queries.

For more explanation : http://www.websitedimensions.com/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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