Tuesday, November 13, 2018

When you do a mockup design for a responsive website, do you do a mockup for every possible screen sizes?


I usually only do two mock-ups, if at all, one for the smallest possible screensize and one for the biggest - just to see which content fits where and which content is even necessary on mobile devices (take loading times into consideration, hence less imagery).
I then program a prototype with the rough HTML elements that are required and a basic styling, getting all the content in.
I then focus on the mobile version (the smallest screensize) and style it until it's pretty much done. Afterwards I keep scaling up the screen and once something looks off, I put in a media query and fix that element at this particular screen size.
Rinse and repeat for all elements, until you got your full blown desktop version. Also consider hiding or showing elements according to screensize and thus approximation of probable bandwidth.
As a disclaimer: that's only how I am doing it off work; at work we don't trouble ourselves much with this kind of stuff, since the backend deals with most of it already. For mobile we do extra optimized versions of the site with duplicated content.
So there might be new approaches to this problem out by now.

Always optimize for the device that will be the primary portal for the site but imo designing for desktop should always come first. It has more variables that will need to be solved. When the desktop is solved, you can start to design down in device size which you'll find is a much more intutive approach.
Desktop > tablet > phone
Different sizes within each device (nexus, iphone 6, htc, etc.) are front-end development adjustments (proper css), thus you do not need to mock for every phone on the market.
Stay in the know on what's the current most popular screen, tablet, and phone size, and then develop with a top down approach (i.e., if only 5% of the consumer base uses an iphone 4, it's the last thing you should develop for, if at all. That's up to your clients discretion and should be worked into your contracts).
M  

Depends on how dumb your stakeholders are. If they ask for multiple viewports you have to do it.

If I'm the one building out the front end I'll only design it once, desktop only because mobile is generally just a simple single column version of the same design.

If I'm not building the frontend, I'll do a mobile view and a desktop view. The front end dev should be able to fill in the space in between those.

0 comments:

Post a Comment