Why is responsive web design so important? 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 have 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.