The real problems with the Magento RWD theme and how we fix them

There has been a number of posts here on our blog about Magento backend development, extensions, integration and useful tips. In this particular article, however, we’re going to deal with another topic, namely frontend, through the example of NILA, a unique responsive theme, developed by AionHill.



Introduction

Those who already have dealt with Magento frontend development, probably know the Magento RWD theme (Responsive Web Design). This responsive template comes with the Magento basic package, which can be used to build mobile-ready online stores.

Mobile-ready is not to be confused with mobile-first as mobile-first is the approach that works way better with mobile devices since it places faultless mobile use as top requirement. With the appearance and spread of smartphones, our internet usage has been dramatically changed. In today’s world more and more people use their smartphones or tablets to gather information on the net and also to do their shopping. Therefore it is crucial to make online purchases with mobile devices simple, clear and fast.

So most of the time, our clients assign us to optimize their online store look, in addition to desktop, for mobile devices working 100% to achieve flawless UI/UX.

The RWD theme, let’s be honest, can fulfil these criteria only to a certain extent. I’m going to write about this below in detail. After several development projects, we decided to create a separate theme with the help of the Bootstrap framework, based on the RWD solution.

 

Nowadays it is must in ecommerce to make online shopping flawless on mobile devices. Click To Tweet

 

Implementation

What are the reasons why, I believe, RWD is not the best solution for creating a 21st century mobile-first ecommerce store?

  • It is mobile-ready, not mobile-first (still supports desktop display in the first place)
  • Out-of-date grid system (RWD uses a several year-old, custom developed grid system with which it is difficult to create unique mobile friendly designs, while NILA uses one of the most up to date fronted frameworks, Bootstrap, with a 12-column grid system, flex support—an ideal solution for fast developments)
  • It’s not modular (it is not possible to modify separately sub-pages and layouts, everything is managed with CSS files)
  • There is no OOP CSS (Since RWD contains only one compiled CSS file, so it is difficult to modify basic settings like colour, font type etc.)
  • Poor browser support (no explicit support of OSX/iOS)
  • Design

 

Our graphic designers have worked out the NILA appearance based on RWD. We tried to make it clearer while applying mobile-first aspects. This means that we use a base to top build up process both in terms of design and implementation. For colour shades we have chosen bluish grey, which resulted in a very clear-cut “minimalistic” approach.

 

Creating a new skin

First, we created a new skin under the RWD package. We did not use a new package because the structure of the NILA template is based on RWD, and because of this we could go on with developments faster.

 

rwd vs nila template structure

 

In practice we overrode the templates and layouts we needed from the NILA skin, while, in the current version, we manage the rest of the structure from RWD.

We used the latest version of Bootstrap (3.3.6), CSS was implemented with Less (stylesheet language) in terms of object orientation. The package version of NILA will contain only the compiled CSS files.

Every page and sub-page got a new design, we elaborated a uniform appearance and took special care of email templates and language versions (hu_HU).

 

NILA code build-up

Now let’s take a look at the code structure of NILA.

 

Directory structure

NILA theme: app/design/frontend/rwd/nila

 

NILA skin:: skin/frontend/rwd/nila

 

Our skin directory is made up of several sub-directories.

  • aion: NILA skin own CSS / JS file­s that influence the appearance of the page
  • css: email­inline.less, frontend appearance for email templates
  • images: default RWD template images
  • img: images belonging to NILA theme
  • vendor: directory of third ­party libraries and modules (Bootstrap, Fontawesome, Owl.Carousel)

 

Grid system

It’s the template system of RWD, based on a custom-developed grid system, which can be used only partially for the development of mobile-first pages template.

 

Example:


@media only screen and (min-width: 480px) {
  .customer-account-login .col2-set .col-1,
  .customer-account-login .col2-set .col-2 {
    padding-top: 0;
    margin-top: 20px;
  }
  .customer-account-login .col2-set .col-1 {
    padding-right: 20px;
  }
  .customer-account-login .col2-set .col-2 {
    padding-left: 20px;
    border-left: 1px solid #ededed;
  }
}
@media only screen and (min-width: 770px) {
  .customer-account-login .col2-set .col-1 {
    padding-right: 0;
  }
  .customer-account-login .col2-set .col-2 {
    padding-left: 60px;
    border-left: 1px solid #ededed;
  }
}
@media only screen and (max-width: 479px) {
  .customer-account-login .col2-set .col-1 {
    padding-bottom: 30px;
  }
  .customer-account-login .col2-set .col-2 {
    padding-top: 30px;
    border-top: 1px solid #ededed;
  }
}

As we can see, the declaration of the grid system’s mobile breakpoints does not adjust to standard breakpoints, but creates unique points: 479, 770, and examining the code further, we can find more “alien”/unusual/non-standard breakpoints:


@media only screen and (max-width: 535px) {...}
@media only screen and (max-width: 525px) {...}
 

We chose the Bootstrap framework for the NILA grid system which was developed with a mobile-first approach and aligns with the standard breakpoints and thus supports standard resolution parameters:


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

 

rwd vs nila grid

 

 

Less files

We have built up our template to be as modular as possible and to be modified easily. Every page, CMS page was given a separate Less file, therefore we can modify the template on a modular level. In case of new projects, there is no need to use the whole template, it’s enough to use some of the layouts.

The uniform elements display features of the template, e.g. header, footer, buttons etc. are also included in a separate Less file. We also created a BASE.less file for storing variables, functions and mixins.

 

rwd-vs-nila-less-file

 

Only the nila.css file is present on frontend, and this is built up from modular less files the following way before compiling:

  • Base.less
  • Default.less
  • Module.less

 

 

rwd vs nila directory

 

In case of a new page, we only need to assign module_name.less module_neve.less file to nila.less and after reversing, nila.css will contain the new or modified appearance.

 

Javascript

From a JS point of view, the NILA theme does not contain any major modification compared to RWD. We used only OwlCarousel.js­t besides the Bootstrap plugins for the slider of the main page new product offers.

 


   jQuery("#home-products-grid").owlCarousel({
        autoPlay: false,
        items : 5,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
        navigation: true
    });

As we can see, 5 products are displayed by default in the slider, further products can be viewed by sliding. If we’d like to show a different number of products, we can set it in the admin panel, by modifying the line below as well as modifying the values of the javascript “items”:

 


   $content = '{{widget type="catalog/product_widget_new" display_type="new_products" products_count="5" template="catalog/product/widget/new/content/new_grid.phtml"}}';

 

Template override description

Since the present version of NILA is based on the RWD package, we only modified those template / layout files that we needed for unique appearance. In later phases of development NILA will get separated from the RWD package and will function as a separate package.

 

  • CMS
  • Home
  • Category
  • Product
  • Cart
  • Checkout
  • Wishlist
  • Dashboard
  • Account

 

One of the most important advantages of the NILA theme is its modular build-up. While modifying the “old school” RWD theme is rather laborious (only compiled CSS is available in the package), the NILA theme can be customized in a matter of minutes by modifying the base.less and default.less files.

 

Further mobile optimization

As I’ve mentioned, our template was built up with a mobile-first approach, our aim was to make it as mobile user friendly as possible. Since a number of elements are hard or impossible to use on mobile devices (e.g. tables, shopping cart, checkout, tap areas), we developed a custom module which recognizes the device type of the user and thus load mobile and desktop blocks accordingly.

We based our module on the well-known directory solution, MobileDetect PHP.

 


<?xml version="1.0"?>
<config>
    <modules>
        <Aion_MobileDetect>
            <version>0.1.0</version>
        </Aion_MobileDetect>
    </modules>
    <global>
        <helpers>
            <aion_mobiledetect>
                <class>Aion_MobileDetect_Helper</class>
            </aion_mobiledetect>
        </helpers>
    </global>
</config>

 

Detecting type of mobile:

 


public function isMobile($userAgent = null, $httpHeaders = null)
{
        if ($httpHeaders) {
            $this->setHttpHeaders($httpHeaders);
        }
        if ($userAgent) {
            $this->setUserAgent($userAgent);
        }
        // Check specifically for cloudfront headers if the useragent === 'Amazon CloudFront'
        if ($this->getUserAgent() === 'Amazon CloudFront') {
            $cfHeaders = $this->getCfHeaders();
            if(array_key_exists('HTTP_CLOUDFRONT_IS_MOBILE_VIEWER', $cfHeaders) && $cfHeaders['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] === 'true') {
                return true;
            }
        }
        $this->setDetectionType(self::DETECTION_TYPE_MOBILE);
        if ($this->checkHttpHeadersForMobile()) {
            return true;
        } else {
            return $this->matchDetectionRulesAgainstUA();
        }
}

 

Our function can be called the following way in either of our template:

 


$helper = Mage::helper('aion_mobiledetect/data');
if($helper->isMobile())
{
  echo “is mobile”;
} 

else 
{
  echo “is not mobile”;
}

 

This solution gives us the opportunity to load unique blocks, in addition to responsive layouts, to mobile devices whose structure is completely different from desktop display structures. These block will only be downloaded by our browser if we use the website on the given device. Thus we can avoid downloading unnecessary elements.

 

Safari / iOS support

Another big drawback of the basic RWD theme is that it supports certain types of browsers poorly. Our clients usually require that their online stores should work fine with OSX and iOS browsers apart from Windows based browsers like IE10+, Chrome, Firefox, Opera.

Since Safari handles certain values differently by default than Chrome, simple modifications to general Less files would not solve the problems.

By showing a simple example, Safari handles the “display: flex” value in a different way from Chrome or Firefox, so we needed to make the following modification:


.aion-dashboard-whislist {
 .cart-item {
 display: -webkit-flex;
 -webkit-flex: 1;
 -webkit-box-flex: 1;
 }
}
 

Please note: in case of Safari, another problem is formatting the forms because OSX and iOS both display native form elements. After having discussions with our designers, we finally decided, in order to achieve a better user experience, to keep the native appearance of the form elements under the OSX/iOS systems instead of using unique / Bootstrap form elements.]

The previously mentioned MobileDetect was used as a solution, complemented with a Safari detect feature:

 


/**
* This method checks if browser is Safari / Desktop
* @return bool
*/
public function isBrowserSafari()
{
    $agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : "";
        if (stripos($agent, 'Safari')
            && stripos($agent, 'iPhone') === false
            && stripos($agent, 'iPod') === false
            && stripos($agent, 'Chrome') === false) {
            $this->setBrowser(self::BROWSER_SAFARI);
            return true;
        }

     return false;
}

 

To be used in the following way:

 


$helper = Mage::helper('aion_mobiledetect/data');

if($helper->isBrowserSafari()) 
{
    $body_class = "__browser_safari";
} 

else
{
    $body_class = "__browser_other";
}

 

Using this, we could make modifications just for Safari browser specific CSS files that do not influence the appearance in Windows based browsers.

 


/** This less file support OSX/Safari browser compatibility!*/
@import "base";
.__browser_safari {
 … custom solutions
}

 

SummaryThe NILA theme will include a lot of corrections and unique solutions compared to Magento RWD, which can make your ecommerce store even more successful. We have developed our template in such a way that any online store can be customized fast and simply with it.

The NILA template is still under development and we are currently testing it in-house with smaller projects, but the day soon will come when it is publically available as a package solution.

Of course, when this day comes, we will let you know about it here on our blog.

 

Dániel Kovács

Dániel Kovács

Frontend Developer

Dániel is a senior frontend developer. He likes challenges and completes frontend developments while keeping an eye on recent trends. A real hipster with beard and glasses, riding a fixie. He also likes reading or watching TV series. His dream is to become a Formula 1 pilot with Scuderia Ferrari.


  • casey

    This is awesome and exactly what I am looking for. Any idea when it might be available, perhaps a beta version?? 🙂

    • Hi Casey!
      Our NILA theme has not yet reached the stage to be offered in a “boxed” format. But it’s good news that in Q2 2017, we plan to launch our extension and service store (to be built on Magento 2) where NILA will most probably be also on sale.

  • Michael

    Sounds nice. Any ETA on the project for a beta version?

    • Hello Michael!
      It is likely that we’ll offer the “boxed” version only in Q2 2017 when our extension and service store is launched. In the meantime we’re developing, testing it further and adding new features as well.

    • Sorry for the late answer Michael, we stopped Nila project and working on Magento 2 projects only.

  • Lyle

    Hi,

    Have you released the NILA theme yet for Mage 1? If so please share link.

    Cheers

    • Sad story, but we stopped Nila project and focus on Magento 2.

NEED A RELIABLE, PROFESSIONAL MAGENTO DEVELOPMENT PARTNER?

Contact us if you have any question or requirement related to the preparation of a new or renewal of an existing online store.

magento_request
Do you need our support?
  • Magento Site Check
  • Magento Code Audit
  • Magento SEO Audit
  • Magento Project Rescue
Request help
Next