How To Transition A Client To Responsive Web Design

Responsive web design infographic

Responsive Design – Website Branding

Clients finally making that upgrade to responsive design are often unclear on what the process actually entails and how the responsive design will relate to their needs and web strategy. What this post advocates is to think “responsively” from the outset, rather than building a great desktop site and hoping for the best on other devices. That’s key, you want to conceive of the design on the three main platforms simultaneously: desktop, tablet, and phone. Responsive web design increases engagement. Engagement is informed by content and strategy, so this is a big part of the design process.

Designer Fonts

Creatives are individualistic so, there is no “one size fits all” way to start your new responsive web design project. However, the more you can polish your system, the more polished you will appear to your clients. Clients of every shape and size often begin the process by saying “how do we start?” Offering a great customer service experience by having a system to walk client’s through the process, builds trust and makes for smooth web development. The system discussed here combines strategy with infographics.

1. Explain How Web Design Has Changed In Recent Years

If your client is now transitioning to responsive design, chances are that the web has changed a lot since their last website. Here’s a list of the major characteristics of current web design trends.

  • Layouts are based more on grids and layers (strata)
  • Bigger images and image-driven layouts
  • Bigger font sizes (remember all those old Flash websites with tiny type? LOL)
  • More space, more “air” between sections
  • SEO-centered designs focused on internal linking – promoting your best pages and trimming/weeding/eliminating non-converting pages and pages with duplicate content

2. Explain How Content Dictates Design

Before you can dive into design, content has to be discussed. You can make the greatest web design of all time, but if the client’s content doesn’t fit (words and strategy), what good is it? Content also implies that there are business objectives for your client as well as a target audience to consider. Content brings strategy, objectives, and brand tone into focus. Step 1 is to have conversations about content–the strategic objectives and the relative length of the copy. Does the client have a lot to say or do they want image-heavy design? If the latter –  a picture is worth a thousand words – what words do they need to capture?

  •  If they have all their copy ready – you can proceed directly to the design concepting process.
  • If they have no copy ready, but some ideas, make sure you get the client to make an outline. You should be able to start design concepting with an outline.

3. Explain Responsive Web Design With Infographics

Responsive web design is of course essential in 2015 and beyond for both user experience and SEO. And that’s how you’ll explain it to your client, particularly if they are starting from a point where they need a little webucation. In order for the end-user to get the best experience across a range of devices, from desktop computers to tablets and phones–we need to start the web design process knowing that it will be a responsive design.

It’s important to have phone and tablet mock-up templates ready to go. You can use wireframes, realistic photos of devices, or even employ actual creative depending on how you think your client will best be able to digest the information.

Responsive web design wireframe infographic

Above are wireframe examples for a client making the transition to responsive design. This example is probably relevant for a B2B professional service company. With this infographic, the client instantly understands how their content would look on all devices. This information will help them to evaluate their content structure and ultimately clear the way for the design process to begin. This is why it’s best, if at all possible, to begin concepting on all three devices–it yields information and perspective. This leads to a more successful outcome for all.

Leave a Reply

Your email address will not be published. Required fields are marked *