Responsive design is the newest trend in web development, and it is changing the way people create and view websites. The term “responsive design” describes websites that are responsive in regards to the device they are being viewed on. For example, a responsive website design is viewable (and navigable) on everything from the smallest smart phone screen to the largest desktop screen. There are several key factors that comprise responsive design in ecommerce sites, and they must all be incorporated into the development process to have a design that is as responsive as possible.
Use a fluid grid. Traditional websites are built on a fixed grid pattern, which is determined by a specific number of pixels. A fluid grid is not based on pixel number, but rather on ratio and proportion; therefore, it is able to adjust fluidly when the screen size is changed.
Calculating page element proportions. It’s quite easy to calculate the size (or proportions) of your page elements (as opposed to measuring them in pixels). Simply divide the target size of your elements (product images and shopping carts, for example) by the context size to get your percentage. For example, If your target size is 100 pixels and your context (page) size is 900 pixels, then your proportion would be approximately 11 percent.
Don’t round off your numbers. When writing code for responsive design, it may be tempting to round off your numbers (just calculate the above example to reference this tip). However, computers don’t need the rounding, and are more exacting without it.
CSS style sheets. How do you keep all of your design elements consistent, relative to screen size? Through CSS style sheets. Therefore, the bulk of your coding efforts will be in this aspect; pay close attention to the decisions you make in your CSS style sheets.
Media queries. You will need to provide a solution for when screen size drops so like that the original page content become illegible. Your answer to this is media queries via your CSS style sheets. Media queries enable you to tailor your content to the site visitor, when circumstances require that you scale down and leave some elements out.
Targeted pixel widths. As you develop media queries, you will need to choose some parameters within which to target them, bearing in mind that today’s ecommerce customers shop from an array of devices. A good rule of thumb is to focus on the pixel widths of 320, 480, 600, 768, 900 and 1200 pixels.
Test as you go. When in the development phase, you can easily test your design to see how responsive it is by narrowing your browser to see how your site content adjusts itself, whether BigCommerce’s shopping software still shows correctly, and more. If your most important ecommerce aspects aren’t displaying as you’d like them to, it’s back to the drawing board.
If you are to stay relevant in today’s worldwide web, then you must know about responsive web design. Follow these tips to find your way around the development process.
