5 things you should know about responsive web design

//5 things you should know about responsive web design

Responsive web design is not new; we’ve been developing responsive sites for several years now – long enough to have learned a few things:

  1. What responsive web design is.

A responsive site is one that adjusts its design based on the size of the window you are looking at it with. But did you know that there are actually several different ways of doing responsive web design? This site does a great job of demonstrating the difference: http://www.liquidapsive.com/.

  1. There are different kinds of responsive web design.

Typically, we design our sites as responsive – meaning they have a series of resizable breakpoints (or liquid layouts). A breakpoint is the point at which a site design breaks to a new layout. The advantage of this type of design, from a user’s point of view, is that the site looks good at nearly every browser size, including phones, tablets and desktops.

  1. With truly responsive web design, you have to give up some control.

The disadvantage of responsive web design is that we do not have nearly as much control over the design as we would with adaptive web design because the site shifts and moves. If you need more control over the layouts, you might want to choose adaptive design. Adaptive design only has a set number of layouts: desktop, tablet and portrait phone, for example. This has the advantage that you can predefine the browser window size that will be designed and tested at; nothing changes in between those sizes. We have some clients whose regulatory department insists on adaptive layouts so they can be assured of consistency across all users and devices.

  1. Responsive web design does not like curves.

If you love curves in your design, be flexible when the designer presents the layouts. Curves do not work well in responsive design. In this site design, you can see how the text “Smiles from the heart” moves around in a not-so-elegant way. This is the downside to designing with curves – the curves don’t always resize well in responsive design.

Desktop size – note the placement of the “Smiles from the Heart” text
Tablet size: the “Smiles” text is now sitting awkwardly between the curved yellow section and the image.
Mobile size: for the mobile version, the “Smile” text is now on the image.
  1. Devices and browsers should be determined up front.

Because responsive web design shifts and moves depending on how you view it, your agency should be very clear on what browsers, devices and at what screen sizes your site will be tested at. At CPC Healthcare, we tend to use an 80% cut-off – what device/browser/resolution sets will ensure at least 80% of users will get an ideal experience. If you require a higher number, then your cost and time to launch will be longer so that the team can take the time to test on more browsers, devices and resolutions.

 

Responsive web design is the standard today, but it’s not the only way to design your site. It’s important to ensure that mobile users – who make up more than a third of all web traffic in Canada – have a good experience on your site.

 

No comments yet.

Leave a comment

Your email address will not be published.