It’s no secret that people these days seem to be glued to their mobile phones or tablets. Mobile sales and internet usage has exceeded that of desktops over the past few years. Many sites today are seeing 25-30 percent of their traffic come from mobile devices. Having a responsive, fluid layout (according to device width), is essential. Users will visit your site more often because of the legibility, usability, performance, and easy navigation.
For organizations that already having existing sites that lack responsive design, responsive retrofitting is an option to creating better user experience across all devices. This approach essentially works backwards to create responsive design. The most common approach to apply new responsive styles is to link CSS containing a “max-width” media query in individual CSS files. Max width indicates at what screen width certain styles should be applied to. A few common break points are:
320px: Smartphone portrait width
480px: Smartphone landscape width
768px: iPad portrait width
1024px: iPad landscape width
1244px: Desktop/Laptop width
These media queries can also be applied at the bottom of exiting CSS files. The use of using both “max-width” and “min-width” can become necessary and useful to produce certain styles at specific widths.
One pro to this approach is that design organization is already set. There is no need to go over color schemes, stock photos, or other design elements, allowing sites to launcher sooner. Keeping the same brand and design elements allows users to remain and familiar with the existing interface.
That is about the only pros to retrofitting approach. Retrofitting only scratches the surface of responsive web design and development. If an organization has the luxury to toss an existing site aside and start from the ground up, take it! Mobile-first responsive design is a much better approach to responsive web design. This approach allows developers to address problems and performance out of the gate, making it future friendly. Creating a site responsive from the beginning allows for a better cohesive design and performance experience for a user, as well as helps to attract and retain more users.