I'm an entry level UX designer. Recently the startup I'm working for asks me to create responsive mobile mockups for their site I designed a month ago. I have a few questions regarding the design process. Thanks in advance to anyone with input.

  1. I have knowledge in HTML&CSS. So who should make the call of how to use Bootstrap (for example, how many Bootstrap columns an image should take in different sizes)? The front-end developer or the designer?

  2. Should I design the mobile mockups directly and let the developer figure out how to apply Bootstrap or media query or should I tell them? (I guess it overlapped with the first Q)

  3. My PM asked me to change the background image of the mobile version, because the original one doesn't look good on mobile. I wonder if it's conventional to do so?

  4. And if your answer didn't cover this one: what should a responsive web design process look like?

  • 1
    Sorry, I think this question is much too broad and voted to close it as such. If you have a question about a particular part of this process, please edit it to match – Zach Saucier Feb 23 '16 at 3:56
  • To answer your questions: Whatever works for you. – Hanna Feb 23 '16 at 15:36

You already have a page layout mockup and you know you are using Bootstrap, so there are really 3 ways to go forward from here:

  1. Traditional — redo your page layout mockup as a set of responsive page layout mockups in a handful of sizes, all using a grid that is similar to the Bootstrap grid

  2. Modern — use a responsive design tool like Tumult Hype, which enables you to create a responsive design on a grid that is similar to the Bootstrap grid with optional animations and interactivity that can be exported as a mockup and/or an HTML prototype

  3. Native — hand-code an HTML prototype using the Bootstrap template itself, so that you can create your responsive design natively in HTML with the actual Bootstrap grid, doing as little coding as possible and zero optimizations (e.g. put your image assets in at full size, target only one browser) and create mockups by taking screenshots on the target devices themselves or using a tool like Fake that can capture browser renderings at various sizes

Depending on the project, I use either the Modern or Native approach. If the layout and animations are simple, I use the Native approach so that I get into the browser right away, and focus my design efforts on making great assets that work within a simple responsive grid. If the project demands complicated layouts and animations, I use Hype so that I can focus on the layouts and animations in a very creative way, and then export an updated prototype at the end of each day.

Prototypes are so much easier to share with team members than mockups. Put the prototypes on a private development server, and everyone can browse them, see animations, compare on various devices. And you can always render a mockup from the prototype when you need them.

There is a Responsive Design Mode in the Safari browser that shows the current page at a bunch of sizes and is really helpful, and there is probably a Chrome extension that does the same thing.

As for how you adapt your designs to each size, I recommend you be aggressive in making changes that suit that particular size. Yes, definitely use flat color areas in a small size and replace them with background images in a bigger size. You can even make the smaller sizes basically image-free. And you can add additional explanatory text blocks in the larger size that are hidden at the smaller sizes.

Definitely think of the phone size as the main size, and the bigger ones are enhanced versions of the phone size that grow to take advantage of the additional screen space and bandwidth. It’s not only psychologically easier, it is the truth based on the numbers of devices because phones way outnumber everything else.

Keep in mind the phone use case might be on an elevator. What you want to show and how you show it should be tailored to not only the size but what the user of that size expects and requires.

Which exact sizes you design for is up to you, because it has a lot to do with the design you have created. I like to think in terms of a 4–8 inch phone/tablet layout that is like a minimalist paperback book, a 9–15 inch tablet/notebook layout that is like a rich coffee table book, and a 1920x1080 desktop/TV layout that is like a poster. Then the standard 1:1 version of the desktop/TV layout is an HDTV and the Retina 2:1 version is a 4KTV.

  • Hi Simon, thank you very much for your detailed reply! I learned a lot! I would like to ask you a few follow-up questions. Thanks again for sharing! So I've never used Hype before, but heard of it. In terms of UI design, is it as good as Sketch? And in terms of motion design, Principle and Hype which is better? Also I know you mentioned but just want to make sure: If I'm asked to design desktop version in the beginning, even if the stakeholders haven't mentioned the mobile view, should I still consider mobile first? Thank you! – Ethan Feb 25 '16 at 0:56

I can see this having several different approaches, all based on company policies, culture, personal work flows, etc. To answer your questions, with respect to MY typical workflow...

1&2: Usually, a front-end designer will create a mockup/design in Photoshop and then hand to a back-end designer/coder to code their design into a functioning website. I can do both, so my abilities are applied to whichever stage in the design process they need to be. The overall look and feel of the site, things like image sizes and positions, is usually taken care of by the front-end designer. Figuring out how to break the desktop site down into a mobile version might involve a bit of teamwork, to determine which objects and sections are more important than others and determine their arrangement. There are often elements that can be hidden altogether in a mobile version, which takes me to the next question...

3: Yes, this is normal. Swapping images to solid colors is another safe bet too.

4: This depends on your target audience and how they will be viewing your site. If you are designing a site for a primarily mobile-based experience, then it might be worth designing your site to look best on mobile devices and then worry about scaling it up to fit desktop browsers.

My usual workflow goes like this:

PS design > DW coding of design > media quieries/mobile

  • I'd argue you should always design mobile first. That gives you the ability to properly prioritize user needs immediately and usually allows desktop views to avoid cruft. – DA01 Feb 23 '16 at 16:51
  • Hi John, thank you very much for your answer and sharing your experience. They are really helpful! – Ethan Feb 25 '16 at 0:40

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