Responsive design roadmap

The digital world is getting more mobile every day. Desktops loose market share but smartphones and tablets are on the rise. There are three possible strategies for companies to adapt to this mobile trend. Invest in native apps (iOS, Android etc.), develop a mobile website (m.site.com) or choose for a responsive design. Which strategy you choose depends on a number of criteria.

The most important advantage of a responsive design is that it looks good on every screen (desktop, tablet, smartphone). If you choose for a responsive design, the following responsive design roadmap can help you with this strategy.

1. Is this the best strategy?
Does a responsive design give you a strategic advantage? Is the timing right? Check your website statistics. What is the usage share of visitors on a mobile device? Is it still less than 10%? Maybe its better to wait.

2. Put mobile first
A mobile screen is very small. You have to choose which content you will or will not show to your mobile visitors. By putting mobile first you automatically have to decide on what content has priority.

3. Prioritize content
Rank all your content chunks from most important to least important. This again helps you in deciding what to show an smaller screens. Designing for mobile is the art of not showing the less important content.

4. Choose your breakpoints
In a responsive design a different (adapted) design is shown for each screen resolution group. Screen width is leading in this. A desktop is wider than a tablet. A tablet is wider than a smartphone. The point on which you will show a different design template is referred to as a ‘breakpoint’. It is best to base your choices upon the screen width of the most popular devices like iPhone, Samsung Galaxy and iPad.

5. Decide on design patterns
Every design consists of several building blocks. These design elements or design patterns are important for a good user experience. Keep them as simple as possible and do not confuse the user.

6. Do wireframes and design
Wireframes are simplified sketches of your final design. Make a wireframe of every screen. Do this for every screen resolution group. Yes, its a lot of work, but you will notice that it brings more logic into your design. After you have finished all the wireframes a final design will be created.

7. Choose your tools
A lot of frameworks and content management systems have built in support for responsive design. Choose your own favorite. But don’t forget that text, images and video have to be able to scale smoothly in your responsive design. There are a lot of responsive tools available to help you with this.

8. Start coding
After all the previous steps have been completed, we can start with the actual development of the website. These are expensive hours, so its better to have everything 100% clear before we start.

9. Test on devices
Screen resolutions are a jungle. More devices means more resolutions. Test on as many popular devices as possible. If needed ask employees, friends and family (or professional testers) to assist you in hunting all possible bugs. A poorly tested responsive design can give you a true headache.

10. Launch!
You are now ready to launch your responsive design and prepared for a mobile future. You will see an increase of the percentage of mobile visitors. They will also stay longer at your site. They used to click away from it as fast as they could, but are now serviced like they should be.

Do you want to know more about responsive design? See the presentation below!