Responsive web design and conversion rates go hand-in-hand. In fact, a study from the Society of Digital Agencies (SoDA) said that 77% of agencies believe that poor user experience (UX) is the major weakness of most websites. Conversion rates mean business. The number of member registration, product sales and software downloads are only few of desired customer actions that determine a website’s success. To increase your conversion rates, there are five things you need to consider on your web design.
Start with a visual brand
The first step in responsive web development is to create a visual brand identity. Identify your brand’s mission and ask the question: “why do my customers need these products and/or services?” Doing this sets the foundation of your overall design because all efforts can be aligned to reach a common goal, which is either to eliminate a customer pain or appeal to a particular customer emotion. Does your brand aim to bring life improvements? Or does your brand connect with certain emotions that your customers strongly identify with? A sense of belonging, competition, fear or trust are some emotions that you can trigger relative to your market. Answering all these questions can lead to the formulation of a branding guide based on your mission and target audience creating a visual identity. Tim Hickle’s branding guide is a good place to start. A color palette with a combination of three primary and secondary colors with a primary logo are other must haves.
Create a mobile-first design
A type of responsive design approach, mobile-first design is exactly how it sounds: design for the smallest screen and work all the way up. A tenet of progressive enhancement ideology, it forces designers to create the smallest design containing only the essential features, thereby establishing the UX’s core. Being a grid-based design, starting with a mobile UX enable designers to create responsive websites, because grids can be easily optimized for a mobile responsive display. In this approach, start with large touch targets (i.e. 44 pixel squares) inviting clear call to actions (CTAs). This ensures that fingers can easily tap buttons and hyperlinks. However, remember to reduce the size of huge graphics as landscaped and complex photos often do not display well on small screens. Responsive websites also focus on content. Start with a content inventory listing all page elements and ranking them based on importance will help designers prioritize more important content that will drive user engagement.
Build responsive navigation patterns
Reactive navigation patterns naturally come together in responsive web development. A navigation drawer, also known as off canvas menu is one of the most popular mobile web patterns that allows navigation to be hidden on the left or right side of the screen and only reveal it based on user actions. This is particularly useful to make customers focus on the content and drive a particular behavior, say a blog subscription, a product trial, or a purchase. Creating page-jumps is another responsive website navigation pattern that enable visitors to quickly move from one part of your content to another, helping increase conversion rates. Page jumps work by either making customers leap to a target text or click a link where the target text exists. By doing this, relevant content that drive a primary user behavior can be easily found and also, site visitors can easily go to the information that they are interested in. One last responsive web development pattern that we can do is the display:none and display:block. This allows designers to easily hide or display content, which is especially useful when shifting web display sizes.
Use fluid typography
The use of fluid typography is a must have to create responsive websites. It starts with creating viewport units or a percentage of a browser’s viewport dimension. Four viewport options make it easy for developers to set fluid font-size on html relative to screen size
- vw: viewport width;
- vh: viewport height;
- vmin: the smaller value of the viewport’s width and height; and
- vmax: the larger value of the viewport’s width and height.
This interesting article by Michael Riethmuller tells you exactly how to use viewports for responsive web development. Choosing the right type of font is equally important to create responsive websites. Select fonts that will render well both of desktop and mobile platforms, ensuring that they are readable most especially your CTAs. Tools such as Typesetter can help in identifying the best font, their respective size and even spacing combinations.
Use Content-first design
Two things you have to remember: (1) content is king and (2) it is the main driver of a strong UX. Responsive web development calls the need for a content-first design, after all the primarily purpose of your website is to create valuable information for your customers. As mentioned earlier, content audit makes designers have a bird’s eye view of all available information and their rank based on importance. It also shows where the content is feeding from (like a content management system) making sure that it is considered in the responsive website’s overall technical and design architecture. Content Spec Sheets are also key to successful responsive web development to create structured contents for each webpage based on a business and user need; and even a particular objective such as increased conversion rates. The spec sheet will tell the designer everything that a web page requires such as overview, name, actors, compliance requirements, menu labels, meta tags and meta descriptions. Finally, a branding guide that combines both visual and editorial standards such as those of Google’s Material Design and Opower will make an easy reference to optimize UX and content integration.
A high conversion rate depends on a lot of factors; in which one of the most important is responsive web design. Remember to use these five approaches not only to enhance user experience but also to build a robust branding strategy that is consistent across platforms and devices.
