Wednesday, February 26, 2014

Top 5 things I learned about responsive design while making mistakes and being mentored by developers

1. Let’s agree on a definition.

Let’s say that at one point someone who looks a whole lot like me assumed that everyone had the same definition of responsive design. You know what they say about people that assume.

Some define responsive design as the same exact design responding to a device. Little to nothing changes as far as the original desktop design is concerned. Here, it’s big and wide! Here, it’s small and narrow. Look at that.

imageimage

Others, like us here at Rightpoint, see responsive design as a whole experience. An experience optimized for the device you are consuming the site on. That means that as far as content goes, prioritization may shift, be condensed or even hidden all together. Birds sing, unicorns dance.

For example, on a mobile device, text heavy areas can turn into a simple block with a headline that can be expanded if desired. With a smaller screen comes a bigger need to scan high-level content areas. Like this.

imageimage

The difference between one or the other tends to be time and money, so make sure you, your developer, and your client all agree on the definition of a “responsive” experience. Double check that project budget to make sure it lines up with the effort involved and prioritize your design accordingly. Speaking of developers…

2. Don’t hand off and run. Hang out and learn.

Love thy developer. Channel your inner child and ask them lots of questions. Why? How? Do you like layer comps? Do you like interaction labeled a certain way? Why does it do that? What happens if I do this? Can I touch this? Can I, Can I??

Spend time together with the design. Sit together in a physical space if at all possible. (See Exhibit A below.) Check-ins with your developer during the design process should follow the Chicago Rule for Voting: Early and Often. Find the break points within your responsive grids and try to identify problems early. Don’t surprise your developer late in the game (unless it’s with chocolate or coffee, in which case, totally fine). The more you think like a developer the easier your (and their) job will be.

Exhibit A. Me and Liz in the team room. You can imagine how easy it is to ask annoying questions when you’re this close. Lucky Liz.

image

3. Big images are pretty. And dumb. Pretty dumb.

Actually not dumb as much as they require more time for planning the responsive resizing. This is America and we like things big after all. But if you don’t plan ahead, things can get unfortunate. For example, look at these happy people on a normal sized screen!

clip_image011

But now you increase your browser size to accommodate a large monitor and oh…nice…torsos?

clip_image013

Images that are more abstract or can be customized to include lots of non-essential space around the focus of the image tends to work best. Like these:

clip_image015clip_image017

Another way to deal with large images and avoid embarrassing crops is to set a max width and once you hit it only the background expands to avoid any embarrassing image crops.

The more control you have over the final site the easier it is to make perfect, but this is the real world and often times you have a client managing the content within the CMS. Which brings me to number…

4. Know your content. And know who will upload it.

If you are in full control of the content and maintenance of a site you designed and developed, congratulations. Keep It Beautiful my friend. If you are not, you need to anticipate the limitations within your design before handing your beautiful responsive baby over to your client. You are hired because they are NOT designers and developers so assume they will not have an eye for the perfect image or recognize when there is too much content in a small space. Fool proof your design as much as possible by image boxes, character limits, etc. (*shameless plug* I will write a blog post about this later this spring, so stay tuned.)

5. Take the mega monitor out for a drink but not dinner.

"But how will the responsive site look on my 27 inch mega mac screen?” As a designer you are probably one of the lucky few who can drag a browser window the length of a football field to explore how various sites interact with these extremes. But let’s be real, most people do not spend time with beauties like the one below. They interact with smaller monitors. Have a plan for what a mega monitor will do to your design but don't spent excessive time on it.

clip_image019

Responsive design is a relatively new way to address a never-ending offering of devices and screen sizes. It’s exciting to work with as it constantly forces you as a designer to consider the user AND their device which means content first. I am certainly no expert in responsive design, far from it. But if there is any advice I can pass on it’s that the fastest way to learn is completely letting go of your fear of asking dumb questions, being humble in the face of everything you don’t know, and stepping out of your designer comfort zone. And oh, always bring your developers coffee and chocolate.