Thinking from a mobile first perspective with phablets in play and Microsoft Surface, should I stick to the standard breakpoints or go with more of:
@media only screen
and(max-width: 414px)
and (max-width: 736px)
and (-webkit-min-device-pixel-ratio: 2) {
}
This is what I am thinking. If I do it like that for hand held devices and just develop fluid, would it be better? Or should I use what was mentioned here:
I think targeting specific devices has is its place, though I don't think it's a good starting point.
As a more general approach to mobile design, have you considered begining with a responsive design, there are a host of frameworks available to get you started quickly.
Then test your site at different viewports and add your own media queries that are specific to your design. For example maybe the layout of your header works best if it changes at 800px instead of your framework preset of say 768px.
As a final step, test your site on as many devices as you can and only then write device specific media queries, and only if they are really necessary.
Ideally you want your mobile site design to work well for current and future mobile devices, and so the more general your approach is at the start, the more you'll future-proof your design.
Good luck!
