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...
No comments:
Post a Comment