: What does a responsive web design process look like? 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

@Nickens508

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:


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
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
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.

Vote Up Vote Down

@Cofer715

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

Vote Up Vote Down