Designing for Breakpoints

by Stephen Hay

26 Reader Comments

Back to the Article
  1. Great article! Was very impressed with your references to De Bono’s book and Eno’s cards. The book was a big help to me when it first came out in the 60’s and I used Eno’s cards to help inspire my art students in the 70’s. Thought they were both forgotten by your generation -glad to see they weren’t.
    Copy & paste the code below to embed this comment.
  2. Thank you for the great article! Also, you’re funny!
    Copy & paste the code below to embed this comment.
  3. Wonderful article! I will be directing anybody I come across who is confused about break points and why they are affecting our designs to it:)  Thanks for making my job a little easier!!
    Copy & paste the code below to embed this comment.
  4. A good approach of defining breakpoints is explained here in this example http://openweb.eu.org/articles/defining-breakpoints
    Copy & paste the code below to embed this comment.
  5. Reading this book now, and I must say, it’s awesome! Even though I just skimmed the article, I’ve already read the real thing. So this is a reinforcement that the material is great. Thanks again for a great read A List Apart (and Stephen Hay).
    Copy & paste the code below to embed this comment.
  6. Great read indeed and good luck with the book! Emil
    Copy & paste the code below to embed this comment.
  7. All of you: Thanks so much for the kind words and taking the time to comment! I’m glad the excerpt is well-received; ALA did a great job of taking a part of the book that doesn’t need (as much) context as other excerpts would have. That said, @Nick: I’m glad you’re enjoying the book as well ;-) @William: I’m a big fan of De Bono, as well as the kind of thinking that went into Oblique Strategies. Then again, I’m also an Eno fan. While I’m not as young as you might think, I find that most breakthrough thinking on creativity was done around De Bono’s time (read: when Lateral Thinking came out) and the classics are essential; I think they help as much today as when they were written. @Nicolas: (re your link) I’m all for content-out thinking. That said, I think the definition of breakpoints is really expanding. So I’ll see your link and raise with this from Stephanie Rieger: http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/ ;-) Cheers! @Diana: I’m a grump. KIDDING Thanks, all!
    Copy & paste the code below to embed this comment.
  8. It’s a great piece Stephen and I’m sure the book’ll be great. Stephanie’s article is great too. The notion of major and minor breakpoint still irks me. Typically these are based on popular current device classes, which seems really odd. Can a breakpoint not be a breakpoint, adjust design/layout as and when needed for the best possible experience. A single point may or may not have large amounts of code or create significant visual change. What is major and minor should surely be in the eye of the creator? Like I say…it’s a genuinely great article but find this notion of device classes and major & minor breakpoints a little too fixed in a truly fluid & flexible landscape.
    Copy & paste the code below to embed this comment.
  9. @Dan: this is probably where the excerpt fails slightly, as I’m a huge (and outspoken) proponent of letting content determine where breakpoints are. The chapter this comes from is mainly about sketching; you already know a lot about your content and you’re making *estimates* about what this content will do based on very loose categories of devices or screens or browsers (or even capabilities). You will revise this when you get to a web-based design mockup, but you have to start somewhere, and for many designers, starting in the browser is just too much to ask. I have to give them a break, since I ask them in the book to ditch Photoshop comps. This process is more like, “Once this gets much wider than a smartphone, one column simply won’t do for this content. I’ll most likely change the layout. How might that look?” Devices *classes* are groups of similar devices, not specific devices. Since they are just “types” of devices, they are not fixed at all. Device classes could be “devices with very narrow screens”, or even “devices with a camera”. They are NOT, however, iPhone 5 or HTC One. So I tend to disagree with you that device classes are too fixed. See this sketching as a way of planning for the web’s fluidity. Designers need to accept that fluidity, but sketching what they might want to do at various breakpoints helps them design for it. In the end (and unfortunately what happens next is not part of the excerpt), the design will take the form of a mockup in the browser, and what happens there will determine where the real breakpoints are. Sure, you don’t know beforehand exactly where a particular major breakpoint will be. Sketching breakpoint designs beforehand, though, does afford you the opportunity to have an idea of what you’d like to do when that breakpoint does occur. In this sense, where breakpoints happen is absolutely in the eye of the creator.
    Copy & paste the code below to embed this comment.
  10. Well said. And great content. Love Edward deBono.
    Copy & paste the code below to embed this comment.
  11. Most of my recent projects based on the data available for users have had 2 to 3 break points and been fluid from then at each break point, as you quite rightly say at the start of the article “let’s use about 12 of them, right? No!”
    Copy & paste the code below to embed this comment.
  12. This process is more like, “Once this gets much wider than a smartphone, one column simply won’t do for this content. I’ll most likely change the layout. How might that look?” Devices classes are groups of similar devices, not specific devices. Since they are just “types” of devices, they are not fixed at all. Device classes could be “devices with very narrow screens”, or even “devices with a camera”. They are NOT, however, iPhone 5 or HTC One. So I tend to disagree with you that device classes are too fixed.
    オススメのデジカメ
    Copy & paste the code below to embed this comment.
  13. Wow - you covered a lot here!  Thanks for the solid article. 
    What I love about working in the web design ‘space’ is that’s it’s always evolving, changing, and a challenge to stay current with.  Keep learning, and keep challenging yourself!  Thanks!
    Copy & paste the code below to embed this comment.
  14. Great article with some solid points about approach. Thanks!
    Copy & paste the code below to embed this comment.
  15. This post is quite impressive. I liked this concept of breakpoints. Appropriate breakpoints are informed by the design, if breakpoints are dead, responsive design is dead, because responsive design relies on breakpoints both in creative work flow and as a key to establishing user-need-and-context-based master layouts.
    Copy & paste the code below to embed this comment.
  16. During most of our responsive web design projects, we use classic typography theory to determine the right breakpoints for the responsive website design & development. We also create different webdesign layouts for different languages.
    Copy & paste the code below to embed this comment.
  17. Great article, thank you for sharing! I think this would be a good starting point for responsive design. The way I’ve worked before was to do the desktop design first, think about the navigation on smaller screens and go from there. It worked, but there was a lot of stopping to think about the smaller details and throwing in breakpoints wherever needed.  Your way sounds much more structured and organised! I also like your ideas for asking ‘what if’ when stuck on a problem. Looking at issues from a different perspective, or discussing with the person next to me usually throws up some good ideas and this sounds like it would jump start the process. I find tables are one of the most awkward things when designing for mobiles, like you said every case is different. I’ve used the foo tables plugin a few times and that works well, but I wondered if a case could be made for leaving complex tables as they are, and allowing users to scroll horizontally. I find it easier to understand tables when I do that, maybe other people feel the same? Or at least offer the option to see the tables as they originally were, then the user can make the choice.
    Copy & paste the code below to embed this comment.
  18. this is OT, but why isn’t the illustrator credited in the by line?
    Copy & paste the code below to embed this comment.
  19. @Andy Parker 1: He’s credited in the ever-present sidebar at the top of the article.
    Copy & paste the code below to embed this comment.
  20. well! this is one of impressive article. Thanks Stephen for the solid article.  What I love about working in the web design ‘space’ is that’s it’s always evolving, changing, and a challenge to stay current with.  Keep up your hard workign on that. I think the book will be informative too.
    Copy & paste the code below to embed this comment.
  21. I found the Table solution very helpful when thinking about displaying database data across devices.  It actually solved a problem I was thinking I would get stuck on a team scheduling application. Lateral Thinking has a great synergy with responsive design and mobile first.  I love the direction web development is going.  Looking forward to more great content for us website makers.
    Copy & paste the code below to embed this comment.
  22. up to I looked at the receipt that said $8681, I have faith that…my… brother was actually erning money parttime from their laptop.. there neighbour has done this 4 less than eleven months and a short time ago paid the dept on their condo and purchased a great new Acura. read more at, http://m3mi.com/3621CHECK IT OUT
    Copy & paste the code below to embed this comment.
  23. Diseño de respuesta: Es tan natural esta tendencia para la construcción de contenidos digitales que surgen interesantes tips como los de este artículo. La recomendación, ir del dispositivo más pequeño al más grande. Lo curioso, comparar el diseño de maquetas con un storyboard.
    Copy & paste the code below to embed this comment.
  24. Phew… This is kind of what I have been doing intuitively when working with Responsive pages / sites. Thanks and good luck with your book. I hope to get a copy soon.
    Copy & paste the code below to embed this comment.
  25. Hi there, this is a great resource for the Responsive Design Knowledge Hub. Check it out here: http://goo.gl/0FkpcE
    Thanks!
    Copy & paste the code below to embed this comment.
  26. Thanks a lot! Great read, just bookmarked it :)
    Copy & paste the code below to embed this comment.