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, and here's what to consider if you’re thinking about taking the plunge.
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.
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 each browser size
A good tip is to pick one specific viewport, and design to that one first. Then, adapt the design to other two viewports.
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.
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, 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.
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.
1 (888) 299-2998