5 Tips for Responsive Design Planning
Responsive design can be an extremely useful tool and solution when employed properly and for the appropriate problems. It's important to note that not all sites are compatible with a responsive design, while others are perfect candidates for this type of setup.
Deciding to go responsive involves a lot of planning, so to help you get underway, here are five tips to consider if you’re thinking about taking the plunge.
1. Understand All Viewports
The very first thing that you need to do is list out all viewports (browser window sizes) that you will need to create wireframes and designs for. If you want to get really specific, this website lists out viewport sizes for nearly every device that currently exists. But a good place to start is with the following widths:
- 320px wide for smartphones
- 768px wide for tablets (when held vertically) or 1024px (when flipped horizontally)
- 1024px and up to 1680px (sometimes higher) for desktops.
- Additionally, you'll need to consider that content will adapt differently to various devices and operating systems
2. Build a Triple Wireframe
One you've figured out your viewports, it's time to start wireframing. For the best results, you should create three layouts per page – one for desktops, one for smartphones, and one for tablets.
A good tip is to pick one specific viewport, and design to that one first. Then, adapt the design to other two viewports.
3. Avoid Bandwidth & Performance Issues
A big challenge of responsive design is figuring out ways to avoid pushing content down to devices with limited bandwidth. While high resolution photos and numerous JavaScript files look and work great on desktop, they can easily cause a slow and not-so-user-friendly experience on smartphones and tablets.
A great solution is to re-purpose desktop content by pre-optimizing images and other items before sending these files to handheld devices.
Additionally, using compact scripts and lightened-up code will take up as little bandwidth as possible.
4. Create Content for Your Responsive Audiences
The way users consume content on a mobile device versus what they’re looking for on desktop is really different.
So, while planning for responsive design, list out what your users want from each experience, what tasks they're looking to complete and what would be the most useful to them on each different device.
5. Ensure Seamless Experiences
While users want something different from their mobile interactions with your site than what they want from desktop, there is an increasing trend of users employing both mobile and desktop to complete a task. This use case, starting a task on one device and moving to another, is called sequential screening.
The experience that the mobile and desktop versions of your site provide should therefore compliment each other. The structure of the site should make it easy for these users to move from one device to the other to quickly and easily complete their task.
[dropshadowbox align=”none” effect=”lifted-both” width=”auto” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]Wondering what route to take when it comes to a responsive design vs. a mobile site? We have indicated advantages and disadvantages for both. Click here to read. [/dropshadowbox]
This post is sponsored by AgilityCMS. Find out more at agilitycms.com.