6 Best practices of responsive web design

As promised in my previous article about top benefits of responsive design, today I will share with you 6 responsive design best practices & statistics.

Mobile web usage is growing at an extremely rapid rate that creates enormous opportunity for businesses and entrepreneurs. If a website is not optimized for mobile usage, you may lose a lot of potential and existing clients together with SEO position.

After attending many m-commerce events, here I would like to list key figures regarding mobile usage.

Responsive design statistics

• 46 percent of mobile web users are unlikely to return to a website they had trouble accessing in the past
• 4 out of 5 consumers shop on smartphones
• Conversion percentage on mobile devices is nearly 3 times higher than the same search done on a desktop or laptop
• 67% of people are willing to buy products from the company that has mobile friendly website
• Increased sales have been reported by 62% of companies which designed their website for mobile platforms
• 67% of people say that if the website works well on their mobile devices they are more likely to visit it again
• 70% of mobile searches lead to an action within the hour
• Smartphone users check their devices 150 times a day
• 45% of users ages 18-29 use their smartphones for searches every day
• 67% of smartphone owners check their phone for messages, alerts, or calls even when their phone is not sending an alert
• 44% of smartphone owners admitted to sleeping with their phone by their bed because they did not want to miss any calls, text messages, or social media updates while they were sleeping
• 29% of smartphone owners claimed that they can’t live without their mobile device.
• 34% of smartphone users go online mostly using their phones, and not on a desktop, laptop, or other device
• 44% of people surveyed claim that navigation was difficult on smaller devices
• 46% of people using mobile devices report having problems viewing a static site. A static site is a traditional, non-responsive website

A website that is not responsive will usually have usability issues such as links that are not clickable, the text and navigation is too small to read, images taking over the screen, scrolling problems, not seeing the article headline or intro paragraph etc. The goal of your business should be to solve a problem, not to create one. The same should go for your website. You should strive to make the lives of your users easier and make your solution accessible. I can say with no doubt that responsive design is not going anywhere soon, as it represents a relatively simple and cheap way for businesses to build a fully-functional mobile-friendly site. But responsive design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design.

Responsive design has gone from a question of “if” we should to “how” we should do it, and the process is what sets apart successful sites from the rest.

Responsive design best practices

1. BUILDING A FLOW WITH USERS IN MIND : GOALS & PREFERENCES

When you build a user flow, the first thing you need to think about is users! It seems to be obvious but many people think about their own flow not taking into account their target’s preferences. You may have different targets and for each target you need to create a different user flow. For example, if you are designing a business intelligence tool that allows users to create reports and share them, you need to have at least two flows: one flow for the reports consumer and an entirely separate flow for the reports builder, a person who shares his own reports.

Before starting creating your prototype flows, you should clearly understand your target’s needs. You need to do a marketing research and analyze what drives my target to my website and what are they trying to accomplish. Once you got your user’s profile, you can better grasp user goals. If you start with a detailed look at the objectives of the user and the business, you would be able to sketch out the various flows that need to be designed in order to achieve both parties’ goals. User objectives could range from finding a fact to finding a service to learning a new skill to asking for the help. Business objectives could be getting a lead, a like, a subscriber, a buyer, a download or a phone call.

Another very important aspect is before creating your flows you need to determine and map out where your users are coming from. This is very important. As its not the same if a user comes from Facebook or he comes from your landing page. Different entry points define different user behaviour. Let’s take a look at this example: how person buys a smartphone on Amazon.

Organic Search Visitor

1. Searches for reviews of iPhone
2. Enters Amazon.com.
3. Uses search bar to find iPhone
4. Browses more iPhone reviews
5. Uses search bar to find Samsung Galaxy
6. Browses Galaxy reviews
7. Returns to original iPhone Amazon vendor
8. Buys iPhone

Direct Visitor

1. Enters Amazon.com
2. Uses search bar to find iPhone
3. Buys iPhone

KEY QUESTIONS IS DESIGNING A USER FLOW 

1. Who is your target? Who you are designing for?
2. What user and business objectives need to be accomplished ?
3. Where your users are coming from; entry points ?

2. CONTENT

Before sketching or prototyping, a written outline helps you explore the most important part of your app or website – the content. Building flows around content gives you a much more accurate assessment of the total number of pages required for the user experience.

Starting a website design without content is like creating packaging design without the product. You can do your best and design absolutely fantastic package but the product can be bigger than the package or the package design is not consistent with the product. The package should transmit the same idea and goals as the product itself. Imagine if you create a layout and then the content is too long for it, you would need to do the work twice and lose time. A website’s design is more than a template into which clients will dump content. Starting with content allows you to decide how to best present it to users. In a responsive environment, starting with content also allows you to prioritize what is most important for your responsive website.

3. MOBILE – FIRST

Mobile-first approach is also a content-first approach. Mobile has the most limitations, for example a screen size and design for the mobile devices force you to prioritize content ruthlessly. Then, it will be much easier and faster design the desktop version already having the key areas identified. During your Mobile-First process, start with wireframes of the site’s content. You can then assign a priority to each section and content in the wireframes. A section’s priority will help you determine how and where to present it for different breakpoints. If your site is good on a smartphone, it translates better to all devices.

The mobile-first approach organically leads to a design that’s more content-focused, and therefore user-focused. The heart of the site is content – that’s what the users are there for.

Thinking mobile doesn’t mean eliminating information. It means sorting information into primary, secondary and tertiary content.

WORKFLOW THAT INCORPORATES MOBILE -FIRST RESPONSIVE PROTOTYPING

1. Map out your content across the whole site, using content inventory – spreadsheet, that contains all the elements you want to include.
2. Prioritize the elements in the content inventory and determine how to display the most important elements in the mobile version.
3. Start laying out the design with a content wireframe.
4. Add basic interactions so your responsive prototype reflects the core user flows. Buttons and menus should link to their respective pages. By connecting your pages with basic interactions, you’ve created a lo-fi prototype that you can immediately start testing with at least 5 users.
5. To test the prototype, you can either use the built-in tool offered by UXPin or use an outside service like UserTesting for example.
6. Repeat steps 1-5 as you scale up to larger viewports. Iterate and scale based on the user feedback.
7. Basing the visual design off your style tiles, you can now refine the visual design with Sketch, Photoshop, or whatever tool you normally use.

  TIPS

• Present lower-fidelity design options earlier in the process
• Enlarge touch targets – Fingers are much wider than pixel-precise mouse cursors, it means that you need larger elements on which to tap. Apple recommends 44 pixels square for touch targets. Give hyperlinks plenty of space, and slightly enlarge buttons.
• Don’t use hovers – designers often rely on hover and mouse over effects in their interactive work. Don’t use it for the mobile-friendly version.
•  Think about off-canvas navigation, expandible widgets, AJAX calls, or other elements on the screen with which users can interact without refreshing the page.
• Avoid large graphics – landscape photos and complex graphics don’t display well on small devices.
• Test it in a real device. Make sure that a site is easy to navigate, it loads in a timely fashion and text & graphics are easy to read.

4. STYLE TILES

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the site. Designers have traditionally used image editors like Photoshop to establish the look and feel of web elements. The issue with this approach is that Photoshop creates high-fidelity examples of a design when, at the start of a process, you should be focused on bigger-picture decision like typefaces, colors, and interface elements like buttons, menus, and input controls.

You need to define what the client’s needs are and what their brand identity requirements are. Interpret those client’s needs into decisions you can use in your project. Have a design kickoff meeting. Designers should be in every meeting. Interpret how the adjectives and themes you discovered translate into design principles such as balance and emphasis. That will help you make choices about how to use the elements of design. The goal is to provide the right subtle visual cues that guide human’s subconscious assumptions towards the desired adjectives and themes. Determine themes from the aggregated adjectives and begin to match them up with styles. The Style Tiles give the client a point of reference to determine if you both are on the same page. Iterate on those decisions, which you can do far quicker using Style Tiles than if you worked with a series of high-fidelity Photoshop files.

Elements of design: Line, Color, Shape, Form, Pattern, Space, Texture

Principles of design: Unity, Harmony, Balance, Rhythm, Emphasis

5. RESPONSIVE PROTOTYPES VS STATIC COMPS

Show responsive prototypes. Presenting static design comps does not work for responsive design. Static comps fail to show a design’s true user experience because they cannot change their layout based on screen size the way an actual website will. For responsive websites, you should show actual responsive examples.

6. EXTREME CASES

When designing web pages, there is a temptation to work on the easiest pages first so that you have some deliverables to show your stakeholders. This quicker turnaround may be nice, but in your design process you should focus on the most challenging and extreme scenarios. Just imagine how it will look like if the title is two or three times longer than what you have designed for. You need to think about all the extreme cases that may occur. This title: “App design tips” will be displayed in a layout template much differently than this one: “20 absolutely essential tips and tools for more effective and successful mobile app design”.

You need to have a plan for extreme cases like this across all screen sizes. It is not enough to ensure that the extreme case works well on large-screen displays that have more space. They must also work appropriately on tablet and smartphone.

I hope it was helpful! My next articles will be about top design trends in responsive  design, stay updated!