0

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)?

  • +1 for being a very common question and an even bigger pain point in a lot of software dev processes. – DA01 Jul 11 '15 at 18:38
  • 1 if I'm also coding it and it's a project i am familiar with (I can visualize the stacking in my head and only need the medium-screen mockup)... 3 if developers are involved: phone, tablet and laptop... – CleverNode Jul 29 '15 at 16:35
1

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.

1

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.

0

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.
  • 1
    Lots of anonymous downvotes as of late. As always, it's appreciated when you downvote if you could leave a comment as to how an answer could be improved. – DA01 Jul 11 '15 at 22:40
  • Not sure why you got the downvote...I think we qualify as the former. We are designing for bootstrap to hand off to the dev team whom we are in regular communication with, and I have a decent understanding of front end development and frameworks although i wouldn't call myself a full-blown front end developer. – evanomics Jul 13 '15 at 20:54
  • @evanomics then I think that's doable. As long as there is an understanding there, the odds are you'll be in regular communication anyways. You speak the same language, in other words. – DA01 Jul 13 '15 at 21:29
  • @DA01 People have a hate/love relationship with the word "Bootstrap", I guess thats the reason for many of the anonymous downvotes... – Bluewater Jul 29 '15 at 15:12
0

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.

http://webdesign.tutsplus.com/articles/my-thoughts-on-designing-in-the-browser-vs-designing-in-photoshop--cms-23405

0

Three, usually defined in the project brief. Desktop, tablet, mobile, at 1024px, 768px, and 320px.

Not sure what Bootstrap has to do with it.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.