CODEWITHSUNDEEP
cssresponsive-designmedia-queries
TacoCat
TacoCat

Reputation: 469

Standard resolution sizes to optimize for

I'm working on one of my first responsive websites and I'm trying to figure out for what kind of resolutions to optimize for.

Is there any standard or what? What are your practices? It would be nice to know.

Upvotes: 0

Views: 68

Answers (2)

Paracetamol
Paracetamol

Reputation: 342

It's true what Travis L said – don't design on screens, but rather add breakpoints for specific elements that you find stop working on certain resolutions.
The key to this is to minimize static values and rely on scalable / percentage-based grids.

That being said, there is an extensive list of device sizes; the most obvious approach is to think of resolution groups:
Like most screens being no smaller than 320px width, most mobile sizes in the 320–640px range, tablets usually around 960px. Keep in mind, that you can turn most devices by 90° and that blowing up mobile layouts on large desktop screens looks awful as well.

Upvotes: 0

Travis L
Travis L

Reputation: 681

Instead of designing "for screens", I would challenge you to use this method:

Design breakpoints around your content, rather than fitting your content to screen sizes (which change all the time). Start small, what's the best way to access my content on a small screen? Once you have that to start with, widen your browser. At what point does it become useful to revise the layout? There's your first break point.

Upvotes: 2

Related Questions