Liquid Web Design
If your eCommerce website isn’t optimized for the many different mobile devices that consumers are using today, then you’re likely missing out on a significant amount of sales. In fact, mobile sales grew 43% compared to Black Friday in 2012. While providing consumers with more avenues to make purchases is a boon for retailers, it does present some drawbacks. If your website isn’t easy to use or fast-loading on a variety of devices, and doesn’t immediately present the information your customers are looking for, they are likely to give up and shop elsewhere. Instead of creating a separate website for mobile devices, a better solution is to use responsive design principles.
Responsive design is an approach aimed at crafting websites to provide the optimal viewing experience – no matter what device it’s viewed on. When viewed on mobile devices, websites that are not responsive often require scrolling, resizing and zooming. None of this makes the shopping experience easier for the consumer.
This approach adapts the site layout to fit the viewing environment, whether it be a desktop, a tablet or a smartphone. The layout is designed to accommodate different screen sizes through the use of media queries, fluid grids, and flexible images.
Main Components of Responsive Design
- Fluid, proportion-based grids use relative units, like percentages, (rather than absolute units) to size page elements.
- Flexible images are also sized in relative units, to prevent them from displaying outside of their containing element when that element is resized.
- CSS3 media queries use the characteristics of the viewing device, such as screen widths, to determine which set of style rules is applied.
- Server-side components, such as feature detection and device detection, work with client-side methods to decrease the site’s load time even more.