I am scoping a responsive project and thinking it will need views spanning from mobile to desktop. I am just wanting to confirm if it is necessary/helpful to do mockups for all 4 sizes (Extra small devices (phones, up to 480px), Small devices (tablets, 768px and up), Medium devices (desktops, 992px and up), and Large devices (large desktops, 1200px and up)?
Professionally in our e-commerce app, we typically mockup mobile, tablet and desktop. When designing please be aware that your content will stack when utilizing any responsive frameworks(bootstrap, foundation, etc).
We typically leave out large desktop mockups since our max-width is set to 992px due to cart restrictions and to maintain alignment and overall uniformity. But large desktops when employed in pet projects for us is an 100% width expansion.
Hopefully this sheds some light when designing for responsive frameworks.
At my current firm, we normally give the client 3 different designs, each design with a mock-up of mobile + desktop. We work with manufacturers most of the time and to be honest, our clients rarely know what they want until we show it to them.
The most useful part of making a mock-up for mobile, tablet, desktop is that you have a set point you want to end at instead of designing it on the spot and making it work. It saves time when you get to that point. Depending on the scope of the project and the client, you should adapt to their needs rather than using a blanket solution.
Professionally, I would say go with mobile, medium devices (tablets) and desktops.
If a client, like one we had who wanted his site to be fully responsive up to a width of 5k-6k pixels.... with various elements images with arcs having to conform to the layout, then yes. Having multiple mock-ups for yourself is useful. Just don't overwhelm the client with it.
It can be extremely helpful if:
- you are familiar with the front and framework being used to create the responsive layouts
- you understand presentation layer code (HTML, CSS and JS) and have a good understanding of the process your developers are using to make things responsive
- you are in constant communication with said developers and are open to things changing as it's being built.
But if the above isn't true, then multiple mockups can be a huge monkey wrench in the process as how responsive views are created in code can be very different than how responsive views were made by the designer in Photoshop. So different that if not carefully managed, you end up with highly unmaintainable code that will cause huge issues down the road.
In that situation, I'd strongly recommend a process of:
- design and mockup your mobilve views only
- created just a couple of generic desktop mockups to give developers an idea of the desktop layout
- hand your dev team these and then sit down next to them side-by-side (physically or virtually) to work through the other views in code.
What I've been doing professionally is a mobile and desktop design. I will do whatever pages are requested (typically homepage, landing page, and any special pages) Then I will figure out the in-between breakpoints as I develop the site. I find this saves me time to spin the project up, as well as, it addresses the issue that sometimes things "break" at different points than the standard breakpoints.
So, I find it helpful to do a 320px layout and a wide layout (something around 1300-1600px)
Increasingly, I am finding it beneficial to code my designs live, or do a hybrid of illustrator/browser design. Sometimes I will just prototype or design components (special features of the site) so that the project moves faster.
When I do component design prototypes, the client can see how the design piece will react "live" instead of having to imagine it through a series of flat designs. It also helps me figure out problem areas much faster and saves the time of laying it out in illustrator or photoshop. I realize this approach may not work for everyone, but I wanted to mention it in case some "devsigner" happens along this question.
In my current company we design for three breakpoints: Smart Phone, Tablet, and Desktop. You don't have to design for every single screen out there. Taking into account the most common ones should suffice.
That said, special circumstances or requirements might require you to do more than that. However, in a consumer app, the three breakpoints cover most of the ground quite well.