As technology continues to evolve, we have access to information through all manner of devices from smartphones to tablets to laptops. This has given rise to the newest form of content creation known as responsive web design. Marketers everywhere are racing to implement responsive designs for their product websites, and with this comes a new set of rules for interacting with designers and developers. While most developers have been mulling over responsive design best practices for the past several years, these concepts are still relatively new to most marketers, and many struggle to understand how this new methodology will impact their role in the development process and the formulation of their marketing content.
Whether your marketing department is in charge of overseeing the entire website development process, or just responsible for providing marketing copy, understanding these rules will help you make the most of responsive design.
What Is Responsive Design?
Responsive design has become the industry standard approach to creative web design. The term responsive design, first coined in 2010, describes an approach aimed at creating sites to provide the optimal viewing experience over a variety of devices using one scalable design. Through the use of the fluid grid concept, flexible images and CSS3 media queries, responsive design addresses the challenge of organizing and creating sites that can be viewed across a wide range of devices employing various operating systems.
A good responsive website design should load quickly, read easily, and be clear in its navigation with minimal resizing, panning and scrolling.
7 Rules For Marketers Tackling Responsive Web Design
1. Define & Communicate Your Goals
It’s important that your goals for the website are clearly defined and communicated to all team members, including copywriters, user experience architects, designers, and developers. This one may seem obvious, but it’s easy to leave out team members who traditionally have not needed to know about your marketing goals in any detail. Responsive design is a highly collaborative process, and each team member needs context in order to deliver results. Achieving your goals will require an intelligent mashup of smart copy, compelling design, and efficient technical delivery. To start, make sure you define the following for each major section of your responsive website:
1. Typical visitor profiles (buyer personas) – Who is visiting your site?
2. Key visitor motives – Why are they visiting your site?
3. Key concepts that need to be communicated – What do you want them to know?
4. Primary and secondary calls to action – What do you want them to do?
2. Prioritize Your Content
With responsive design, content can be moved, resized, and appear/disappear as you move through different screen sizes. Variations in content configuration can drastically change the tone of your message, the perception of your brand, and response rates on your forms. Create a content hierarchy to establish which pieces of content are most crucial, so that primary calls to action and key content are always the center of attention. Skilled designers and developers will help you find the ideal content configurations based on your goals and priorities.
3. Distill Your Content
Users are looking for quick loading functionality and obvious navigation. Not all content is created equal, so prioritize and don’t be afraid to cut the fluff. As a marketer, you’re probably a maverick at fashioning lengthy value propositions or boring product specs into pithy, digestible chunks. Use your mad skills to distill your most important concepts into bit-sized, space-efficient blurbs that will flow easily into a modular, responsive design.
Find creative ways to communicate complex concepts to your users. Instead of using big blocks of repetitive text, consider using videos, infographics, or interactive features to give form and shape to complex ideas. Don’t hesitate to involve your design and development teams for ideas. Leverage their expertise to inform the type of marketing content you create.
To get your creative juices flowing, here are 25 beautiful examples of responsive web design for inspiration.
4. Adapt to a More Flexible Development Process
As mentioned earlier, responsive design is a highly collaborative process. The lines between content, design, and technology have become increasingly blurred. The traditional linear development process is fast becoming passé. Most marketers think of site development in three major stages: 1) copy and content development, then 2) layout and design, and lastly 3) coding of the design. While this is still mostly true, these disciplines are now more interdependent, which means a cyclical approach is warranted.
A responsive website may need to go through several cycles of collaborative refinement before you achieve the best results. Work with your team or agency to set up regular cross-disciplinary meetings. Most good website development company’s now cross-train key team members to enrich interactions (e.g. Graphic designer might have knowledge of html/css, and Developer might be cross-trained in interface design). You won’t necessarily need to have “complete” design frames before you start development. Many teams choose to create basic frames and styles, then allow the design to evolve organically in the browser as things are developed. From a marketing perspective, prepare to refine your contributions based on input from other team members, and don’t be inflexible.
5. Start on Mobile
When designing a responsive website, the trick is to keep it simple, and start small. With such a large percentage of users accessing your site from a mobile device, start on the smallest screen size you plan on supporting, and build out from there. Your developer or designer may refer to this as the “Mobile First” approach. This may seem backward to many marketers, but it will help you prioritize your content and cut out unnecessary elements that will clutter your site and distract visitors. If you can make your site attractive and functional on a small screen, then you are on the right track. Your functionality can progressively increase for larger screen sizes, but you don’t want your mobile site to feel like an afterthought.
Starting small forces you to focus users’ attention on truly important elements of the site, and ensures that all of your essential content is compatible with every device type. You don’t want to design your primary calls to action or the visual centerpiece of your website for a desktop size, only to find out later that you must completely re-work your content or your design for smaller devices. When considering responsive design, think adaptive design, focused content, lean graphics, and an uncluttered aesthetic.
6. Forget Mobile Myths
It’s often said in the marketing community that mobile users are rushed, distracted, and on-the-go. This leads marketers to shortcut functionality or leave important features off of mobile websites or applications. However, according to a survey done by Compete Pulse, this isn’t necessarily the case. People use their mobile devices under all sorts of circumstances, and being on mobile doesn’t necessarily imply the user is limited on time. 84% of people use mobile devices while at home, 80% during misc. downtime, 62% while watching TV, and so on. Responsive design allows you to offer a consistent, device-neutral experience.
7. Plan for a Bigger Upfront Investment
Building a responsive web design can take more time to develop than a static desktop site. It not only requires more time, it requires more resources, more testing and more dollars (prepare for 20-30% more than a regular static website). When your team or agency gives you time and price estimates, remember that this will be the only portal you need to develop, and you’re saving the cost of developing a separate mobile site or mobile application. Also remember that this is a long term investment. Responsive sites are easier to maintain than multiple flat websites/applications, and in the long-run, the investment will pay off.
Your content will be centralized, so you can avoid the headache of updating your mobile app, mobile website, and desktop site every time product details change. Not to mention that the brand experience will remain consistent for your customers across all channels.
10 Steps to Turn Your Website into a Marketing Machine
Are you considering a website redesign? Download our Free Whitepaper Checklist.