Mini Tutorial:
Responsive Design and Magento

Why go Responsive?

We’ve been experiencing an exponential growth of technology within the last five years. All new devices that come into play need to be Internet ready; bringing along a lot of different screen resolutions. In the field of web design and development, we’re unable to keep up with that pace. Everything suggets the in 2015 the most common platform used for eCommerce will be Mobile. If we’re not ready we could risk losing visitors to our sites.

Related: How to get Customer Feedback on your Site

One way to solve this could be to develop specific applications for each device. We could just hire companies to develop specific applications for today’s most used platforms (iOS and Android). But what about tomorrow? What about Windows’ mobile users? I know that some people may think Blackberry is out of the equation, but how about their high management company users? Consider this: is your site fully viewable on a iPad? What happens when the user changes from landscape to portrait mode? and what if you go to a Samsung Galaxy phone?

Working on the web, is a constant change. Our work is often refined or replaced within a year or two. We need to adapt to survive!

Responsive Definition

Smashing Magazine: “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.”

Wikipedia:“Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule[1], with fluid proportion-based grids (which use percentages and EMs instead of pixels)[2] , to adapt the layout to the viewing environment, and probably also use flexible images”

With the mix of flexible grids and layouts, flexible images and a strong knowledge of CSS media queries, your site could adapt to viewport modifications. That’s Responsive.

Examples

Nuts.com

SSENSE

Dress Responsivelly

Fluid Systems

Being a huge fan of grid system, I don’t hesitate to adopt a fluid grid system to achieve the responsive look. They all use variations on their CSS definition to achieve the look. Some use percentages others use pixels. Get to know them and choose wisely.

Fluid 960 Grid System

Skeleton

1140 CSS Grid

Magento How To

Once you have adopted your grid system it’s time to get it working on Magento. This will be a quick introductory on how to do it. Let’s assume that we’re using Magento Enterprise and that we are working with skeleton grid system.

  1. Upload your grid system to the /skin/frontend/enterprise/[template] folder
  2. Include your new CSS file on the /app//design/frontend/[template]/layout/local.xml
     <action method='addCss'><stylesheet>css/skeleton.css</stylesheet></action> 
  3. Modify files 1column.phtml, 2column-left.phtml, 2column-right.phtml and 3columns.phtml located at /app/design/frontend/[template]/template/page/. Add the class container to the wrapper div.
    <div id="wrapper" class="container">
    
  4. Finally is up to editing all the files needed. Start adding the rows and columns accordingly. I leave you with a header.phtml example
     <div class="header-container">
        <div class="header">
            <div class="row">
                <div class="nav nine columns offset-by-seven">
                    <ul class="top-nav">
                        <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('top_links')->toHtml() ?>
                    </ul>
                </div>
            </div>
             <div class="row">
                <div class="logo four columns">
                    <?php if ($this->getIsHomePage()):?>
                        <h1 class="logo"><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
                    <?php else:?>
                        <div class="logo"><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
                        </div>
                    <?php endif?>
                </div>
                <div class="twelve columns">
                    <div id="cart-wrapper">
                        <?php echo $this->getChildHtml('topCart') ?>
                    </div>
                </div>
            </div>
    
            <div class="row">
                <?php echo $this->getChildHtml('topMenu') ?>
                <?php echo $this->getChildHtml('topSearch') ?>
            </div>
    
            <div class="row">
                <hr class="sixteen columns">
            </div>
        </div>
    </div> 

Useful Links

If you’re interested in responsive web design, adaptive web design or progressive enhancement (or if you’ve not heard of them), a good way to start will be to read about it. Here’s a quick list of reading material for you:

Conclusion

I think that the constant changes in the Internet is meant to keep us web designers and developers entertained. We need to keep ourselves up to date with new technologies. In the end it’s all about making the best recommendation to our clients based on their requirements. Every client is an unique case. Keep yourself informed on the latest and future trends. When it comes to decisions such as building an application or moving forward to responsive, make the best suggestion based on your client’s expectation and budget.