Fred Water – Magento Enterprise Responsive Design
Responsive Design for Magento Enterprise Site: Fred Water
Customer Paradigm helped create the Magento-based eCommerce site for Fred Water, using a responsive design template that shifts the layout of the site, based on the end user’s screen size.
Fred Water is a unique company in that they sell bottled water in a container that they really and truly want people to refill and reuse. They’ve designed their bottles not to be compatible with the beverage holder in your car; instead, the bottles are designed to fit into people’s pockets so you can bring them with you.
The Fred Water site is about as complex and custom as you can get. Instead of a typical home page / category page / product page / cart page layout and user experience, the site has been designed as a single one-page site to load quickly and minimize page transisitions.
On a normal Magento Enterprise eCommerce site, clicking on the “Buy Fred” button would take the end user to a category page, where they could view and select products. And then drill down to an individual product page, and then add something to the cart (another page) and then finally go to the checkout page.
Instead, the Fred Water site allows the end user to scroll down on the home page, view “Water” or “Not Water” (t-shirts, mostly), and add something to their “pocket.” All one on page load, and all using a custom-built responsive Magento Enterprise design. Only when you visit the checkout page is another page actually loaded for the end user.
From a technical perspective, Customer Paradigm’s team of expert Magento Developers did programming backflips to make this work, and look easy and effortless to the end user. Especially with a responsive design layout. Plus, the system uses highly complex shipping rules, that allows for free courier delivery in specific geographic areas, and low-cost shipping options based on the selection in the cart.
The way that the site is designed and constructed, it is responsive to the end user’s device.
On a full size screen (i.e. a laptop or desktop computer), the site fills the screen edge-to-edge:
On a tablet or iPad, the layout shifts so that the visitor is able to interact with the site in a slightly smaller screen format:
And on a smart phone, such as an iPhone, the Magento Enterprise responsive design has a more phone-friendly layout. The “Create Account” and “Sign In” options are still at the top, but there is now the Fred logo at the top left, and a touchscreen-friendly menu icon:
On the checkout page, the Magento Enterprise system fully leverages the responsive design. Here’s how the checkout page appears on a full-sized screen (i.e. desktop or laptop):
On a tablet or iPad, the Checkout page’s responsive theme allows for an easier user experience, that allows the end user to fill out the form fields in a top-down linear way (as opposed to the three column layout for the desktop version):
And on an iPhone or other smart phone device, the checkout page on the Magento Enterprise site is slimmed down and easy to use:
Free, No Obligation Consultation About Magento Programming:
Call Today! 303.473.4400 Toll Free 888.772.0777