Optimizing with Responsive Images

We all know that good quality product photography is a must have for eCommerce websites because big, beautiful, captivating images help your customer feel confident that what they are buying will meet their expectations once it is delivered.

If you are considering having the homepage of your site covered with full width images, than using an optimized method which loads an appropriately sized image for the screen width is essential. Understandably this adds to the content creation aspect by designing three banners, or cropping three images, but it is well worth as an increased load time is likely to cause a customer to leaving the page.

Related: The Future of Responsive Web Design

A customized image for mobile, tablet, an desktop will ensure that not only are you serving the appropriate image size but that the content itself is optimized too. Font sizes, ratios and the length of copy you can use in a desktop banner is can be longer and include more details than an image for mobile that is 1/4 of its size. This content can, and should be revised for screen width otherwise it’s likely not worth showing if the user cannot read it. Providing the best option for each device shows a level of polish and detail while boosting user experience.

Foundation Interchange

Front end developers have been working with responsive designs for a few years now and originally hiding and showing content may have worked as a solution visually, but it still means that you are loading all images even though only one is showing. In this tutorial I will explain how to use Foundation’s responsive image system, Interchange which “uses media queries to dynamically load responsive content that is appropriate for different users’ browsers.” Content that is being constantly updated on an eCommerce site is usually controlled through a content management system that clients can updates themselves to feature promotions, new products or marketing campaigns so we will cover a few different places you might want to do this with a Magento site.

Adding responsive images to a Magento project:

Optimizing with Responsive Images
To add interchange to a Magento product we will only need to edit one file, local.xml where we will add the scripts. We will be adding jQuery first, Foundation second, and Interchange last – the order here is important.

Step 1. Add jQuery and Foundation to the project:

We want these both loading on every page so we will add it to the default handle.

<layout>
    <default>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/jquery-1.8.3.min.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/foundation/foundation.js</name><params/></action>
        </reference>
    </default>
</layout>

Related: Looking for The Best Responsive Sites? Here are 15 to Inspire You!

Step 2. Add interchange.js to the page:

Locate the page you need the functionality on, and add it to the appropriate handle. This ensures we are only loading it on pages that need it. This example would be adding it to the Category Listing Page to use in the Category Description field.

<catalog_category_view>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/foundation/foundation.interchange.js</name>
            <params/>
        </action>
    </reference>
</catalog_category_view>

Check the media queries set in foundation.interchange.js and ensure they match your project, because these are the ones that Interchange will follow.

Step 3. Create a new static block or CMS page:

Page:

CMS > Pages > Manage Content > Add New Pages

Static Block:

CMS > Static Blocks > Add New Block

Category Description (Banner Image):

Catalog > Categories > Manage Categories > Choose Store View > Descriptions

Step 4. Add the Responsive Images:

Using the WYSIWYG editor, select and upload the images you wish to use. We use the data-interchange attribute to define the path to each image and the media query it should be shown at.

<img alt="" data-interchange="[/media/wysiwyg/banner-medium.jpg,(default)],[/media/wysiwyg/banner-smaller.jpg,(smaller)],[/media/wysiwyg/banner-small.jpg,(small)],[/media/wysiwyg/banner-medium.jpg,(medium)],"/>

You’re now Responsive and Optimized

Adding custom images to your online store will not only ensure you are serving the appropriate screen size, which instills confidence in customers, but also will optimize your content! Creating custom images sizes for mobile, table, and desktop will only add the user experience of your website, and will keep your customers coming back for more. Hopefully my tutorial on how to use Foundation’s Interchange on a Magento site helps you optimize easily with responsive images. Comment below if you have any questions!

Related: Attention Designers: How to Optimize Your Files for Developers Building Responsive Websites