Magento 1.9 CE is finally here with a range of new features including a fully responsive theme.

I have been inpatiently waiting for the release of the RWD responsive theme and its finally arrived. The following article will break down the new features offered by the new responsive theme.

Responsive Design

As the name suggests, the new theme is responsive. In this day in age, mobile optimisation of your store is extremely important and it should be as easy to navigate on a mobile and tablet as it is on a desktop.

This works with the use of CSS break-points in width offering different styles depending on the devices resolution. On smaller devices blocks resize and re-order themselves displaying the most relevant information improving user experience.

Improved Navigation

The new RWD theme offers improved ease of use with clean and easy to navigate menus. Using a new drop-down menu and new styles this menu is well improved from the previous menu.

Responsive Main Nav

This intuitive nav offers an excellent user experience on mobile devies whilst retaining all of the functionality. Compressing into 4 tabs which work in a drop-down fashion to display appropriate content. With an added “View All (Category)” link in each category linking to the parent category.

Customer Account Menu

The new customer account menu offers easy access too the customers whislist, cart, checkout and to the register & login page. Having all this information in one place improves visitor flow.

Fly-Out Cart

Previous versions of Magento included a cart widget which displayed the customers shopping cart information. In the new RWD template this functionality has been drastically expanded. The new fly-out shopping cart not only allows customers to view the items in their cart but also edit quantities , product variations, and remove items completely.

Catalog Pages

The new template completely overhauls all the catalog pages including the product list & product view pages. With new features that were only previously available by installing third party extensions or custom development.

Product List

The product list has been given an extensive makeover. With a cleaner and well balanced product grid & new icons for switching between list & grid view. In mobile vew the layered navigation will now collapse into a drop-down above the product grid improving ease of use.

Colour Swatches

Colour swatches have been available in the previous versions of Magento by purchasing third party extensions. With 1.9 colour swatches are “out of the box”. Configuration of these swatches do require some knowledge of uploading files to a server and are not completely configurable in the Magento backend.

Product Page

Removing clutter, the new product page is extremely clean and simple. With the addition of social network buttons which in previous versions had to be added manually, this was an intermediate development task.

In earlier versions of Magento the user was required to navigate too a product review page to read individual reviews. Now the reviews are displayed on the actual product page. Does this not only improve customer experience but having reviews on the product page is vital for SEO.

The individual reviews are available within a tab along side the product description. I have noted an issue with this format, that the product specific reviews page still exists which could cause duplicate content issues. I now make sure that my robots.txt file disallow /review/product pages.

Product Zoom

Another important update on the product page is the newly included lightbox product image zoom.

This newly added feature was previously available as paid extensions from third party developers. The now standard product zoom feels more integrated rather than a bolt on.

The product image gallery has also been improved. Previously clicking the additional images would pop-up full sized in a new window. Now, when clicked the new additional image will replace the main image and allow the product zoom to work on the new image.

Banner Slider

Thats right, the new responsive theme is now packaged with a fully responsive banner slider. This jQuery slider can be included on any page where the following script is called in the header.


$j(document).ready(function () {

// ==============================================
// UI Pattern – Slideshow
// ==============================================

$j(‘.slideshow-container .slideshow’)
.cycle({
slides: ‘> li’,
pager: ‘.slideshow-pager’,
pagerTemplate: ”,
speed: 600,
pauseOnHover: true,
swipe: true,
prev: ‘.slideshow-prev’,
next: ‘.slideshow-next’,
fx: ‘scrollHorz’
});
});

This slider can be added too CMS pages or can be used in a static block just by calling the following HTML code.


<div class="slideshow-container">
<ul class="slideshow">
<li><a href="linkhere"><img src="imagehere" alt="" /></a></li>
<li><a href="linkhere"><img src="imagehere" alt="" /></a></li>
</ul>
<div class="slideshow-pager"></div>
<span class="slideshow-prev"> </span> <span class="slideshow-next"> </span>
</div>


As mentioned this slider is fully responsive and looks great on smaller devices.

Shopping Cart

The shopping cart has been simplified giving a much cleaner appearance. Providing more information to the customer with less clutter by implementing a 2-column layout as standard. Allowing the shopping cart contents to sit side by side with the total.

Other subtle touches that greatly improve user experience are the individual update boxes for each product line in the cart which only appears after the quantity box has been changed.

My Thoughts

Many designers including myself have been eagerly anticipating the release of this new theme. For Magento this was well overdue but offers a range of features that we did not expect such as product zoom & colour swatches. These are a welcome addition to CE as these have previously been paid extensions.

I personally think the new RWD theme looks very pretty. Clean, sleek and easy to navigate – ideal for modifying or great out of the box. The new additions in the RWD theme will save developers hours of work & save Magento store owners money.

Let me know what your thoughts on this theme are. How have you customised yours?