Magento Responsive Design Case Study - Office Furniture Center

Office Furniture Center enables companies in transition to focus on their business instead of space planning and furniture selection. OFC creates an attractive, cost effective space for its clients through the creative blending of pre-owned, refurbished and new furniture. An account manager tours the client's space to interview key employees and diagram the company work flow. OFC designers use this understanding to create a plan that suits both client's current work force and allows for growth. The client is provided with three alternatives: pre-owned, refurbished and new furniture and has to select the option with the right look and the right price. Then the client will rely on an expert team of project managers and logistic coordinators to supervise the delivery and installation of his furniture.

Rocket Web was tasked with creating a Magento e-commerce site that is easy to use across numerous internet devices. To reach the best visual experience we used the approach of Responsive web design in this Magento project to keep the user experience consistent across desktop PCs, tablets and smart phones. The result is an e-commerce layout and design that remains in good shape at the smallest and largest widths With fluid images, headlines and body text that scales instantly in response to the screen size a customer is using.

This article brings closer to you this example of responsive design by presenting images and descriptions of various pages at different widths. We will start by describing the features present on Homepage at normal width.

The OFC homepage seeks to accomplish two main goals, to show the wide variety of products offered and to encourage customers to follow through with the primary call to action in requesting a quote. At desktop or horizontal tablet size a customer sees a rich, full experience tailored to their screen size. At this view all top navigation and sidebar navigation is seen at a glance. The sidebar contains videos, social media integration and call-outs showcasing the benefit of OFC's offering. If a tablet is positioned vertically, the elements displayed on the page change dynamically in responsive to the smaller screen. We now see header elements stacked vertically with the search bar filling 100% of the screen width. The sidebar disappears at this width so that that Request a Quote call to action and product imagery remain the primary focus.

As the homepage is viewed at the smallest width on a phone the design still offers a quality experience thanks to the fluid grids and flexible images. The top navigation converts into a single, highly accessible drop down and product imagery is dynamically sized for smaller screens. At phone width, the main focus of getting customers to see the breadth of product and complete the main call to action remains intact.

The main goals of the category pages are to show as many product options as possible, keep the call to action highly visible and offer relevant navigation to discover even more products easily. At the desktop width, we have 4 columns of products with related sidebar sub categories and layered navigation options for filtering. As the page decreases in width, we drop to three columns of products, then two. You will notice that the size of the product thumbnails scales so they are as large as possible to take up the full column width.

One of the most important elements that make OFC responsive is the fluid grids. The flexible grid system is based on proportions; it assures that all elements of the page are scaled when they are re-dimensioned. With a vertical tablet that does not have enough room for two columns of product images and the sidebar, the decision was made to slide the sidebar layered navigation under the product listing results. This keeps product imagery viewable on the screen on first load but then offers the user additional filtering capabilities after the scroll through the first page. Again product selection and primary call to action remain the most important page elements at this screen size.

On a phone size screen we're keeping the same priorities as the tablet while condensing main navigation into a more accessibly dropdown and cutting available products per column to one.

The last example of responsive design is the Checkout page. By dynamically scaling the checkout forms to make use of the available space in a screen we are able to create a smooth, accessible checkout that doesn't make the customer zoom in and out on smaller screen sizes.

Making a Magento e-commerce site responsive brings compelling advantages:

• Conversions increase as customers have a familiar shopping experience across all their devices.
• There is a single unified style that can apply to all screen sizes at the same URL.
• Responsive design forces you to refine e-commerce goals, and stick to them.
• Device specific bugs are less common as separate themes do not need to be maintained.