Recently, I was practicing web design beyond code things. But after I opened Sketch and just started to make a rectangle of my site, I got stuck.
What width should I use?
I'd search for the resolution stats at this site. And for my own taste, I chose 1440px for width. (Due to the characteristic of 1440, it's easier to divided 2, 3 or 6. ) However, now I have to choose the width for mobile (and also, if possible, for tablet). Although there's an article about media query on CSS Tricks, I have no idea how many px should I use.
Is there any way to figure out this?
Answer
The short answer is: there is none.
If you want your website to be prepared for use in the wide, wild world, you should keep any screen width between, say, 480 and 4800px in mind. Modern designers for responsive webdesigns (designs that adapt to the width of the viewport) work with ranges of widths. Each range has its own quirks to adapt the website to the width.
The borders of these ranges aren't set in stone.
In my case, they usually depend on the particular design. I start out with the smallest screen, design that, and stretch the viewport until the layout becomes ugly or unwieldy. Then I set a boundary and start designing for the next width range.
Pixel size is no longer an indication of device type.
Keep in mind that a screen size in pixels does not necessarily give an indication of the type of device used: there's small phones on the market these days that use Retina screens, effectively doubling their pixel widths without changing the physical dimensions (much). Therefore, you could have a 960px phone as opposed to a 800px monitor. (Admittedly, those latter ones are rare these days.)
No comments:
Post a Comment