Software Engineering Stack Exchange is a question and answer site for professionals, academics, and students working within the systems development life cycle. It only takes a minute to sign up.
Sign up to join this community
I am learning how to make responsive layouts for sites and web applications. It's said we need to use media queries to find out the width(resolution) and then select the layout(wireframe) for that screen.
I would like to know how many layouts(wireframe) should I make for?
Please advice as per your experience.
For example:
Technically responsive design does not depend upon resolution. A good responsive design will flow to fill the available space.
Its said we need to use media queries to find out the width(resolution) and then select the layout(wireframe) for that screen.
No, you should not target a layout to specific media resolutions. You should adjust the cascading flow of the elements as media types change, and adjust your CSS settings according to pixel density.
I would like to know how many layouts(wireframe) should I make for?
You do not design your wireframe to target specific device sizes. You adjust the size of elements in the flow of the document so that everything fits together nicely.
Once you start created fixed layouts for media types you'll run into problems.
You should not focus on how many layouts there should be but try to focus on what your website will look like.
Let's say you build a full-scale site and notice that if you render it under 800px, it isn't user friendly any more. Then you need to create a responsive layout for that size.
Then again, downsizing to maybe about 400px, it starts looking crowded. Build another media query.
As you see, it all comes down to content. Never try to think in the direction of devices. Always content.
You should be aware of the various resolutions and the sorts of devices people will use to view your site, and make that part of your test plan.
Unless you're in a position to have regular releases targeting the current crop of popular devices in your market (that was my job for many years!) your design is going to outlive the resolution/power status quo. So you want to make sure that core design adapts gracefully to its conditions so that viewing it next year on a new smartphone that has twice the resolution of your desktop monitor is OK, or that if it's loaded up on a legacy tablet that struggles with javascript performance the user can still more or less get their job done.
But given a responsive design, you want to check it on devices that you have reason to believe people are going to view it on, and use your understanding of your market/userbase to prioritise bugs that turn up. So in most cases, if you load up your site in a PC browser window and it breaks when you resize it, that's a bug and you'll have to fix it. If it doesn't look quite right on a few different popular smartphones and tablets going back a couple of years, those are probably a bugs and you'll probably want to fix them. If you get an opportunity to test on a Samsung A411 and it's all broken to hell, that is probably not worth fixing unless you have reason to believe a lot of people amongst your potential users will be using cheap legacy devices (but there was a time when that was 60% of my users, so I absolutely had to fix those bugs!).
The rabbit hole of device variability goes down forever, and there's no timeless answers there: it's going to depend on your market, your priorities, the time you release, and those are all things you'll have to figure out for yourself from whatever information you can get. But in general if you think responsive at design time and specific resolutions/devices at test time you should be OK. Just watch out for things that may not be as responsive as CSS/HTML, such as video or particularly demanding javascript.
Here's my personal list, ordered by width in pixel...
This worked for me on many websites with no complaint from clients / users. Of course you can adapt one layout to be ok on many different sizes by making it liquid.
