Responsive for many different size phones

Designing for the web is fairly straightforward but when it comes to smartphones, there are many different sizes to design for these days. By default Chrome’s responsive development mode comes with 7 different phone sizes as presets and there are about 5 more to choose from.

Obviously, it’s not practical to create breakpoints for all of those. In fact, you probably want them to all be within one breakpoint. What strategy have you found that works best for this. Do you design for the widest layout and set the breakpoint accordingly and then use the pins and flexible layouts to scale things down for the others? I’m hoping there are some tricks that some of you can share for what has worked best.

Thank you.

the layout depends on the content of the page and the target of your users. I start from the ipad portrait and this is also the reference for the desktop. The second layout is the iPhone portrait (320/400px) In some cases you can use only two layouts, with this trick you can avoid the desktop layout ( by adding a css to set the max-width)

1 Like