Magento Responsive Web Design is

Awesome

Agenda

Magento RWD Theme SASS

Config.rb Fallback Debugging Breakpoints

Spite images RWD++

Packages

base default enterprise

iphone Rwd

default enterprise

Responsive web design (RWD)

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

RWD

Magento Enterprise Edition 1.14 and Magento Community Edition 1.9 come with a new theme named rwd that implements Responsive Web Design (RWD) practices.

Magento CE's and EE's responsive theme uses a number of new technologies:

Obviously HTML and CSS

Sass/Compass: A CSS pre-compiler that provides organizable, reusable CSS.

jQuery: Used for all custom JavaScript in the responsive theme. jQuery operates in noConflict() mode so it doesn't conflict with Magento's existing JavaScript library.

Exceptions

- Multiple address checkout - Tags

- Popular search terms page - Polls

- Popular search terms cloud - E-mail templates

- Site map - Captcha

- My Account—Billing Agreements - My Account—Recurring Profiles

- The gift registry (EE only) - Place order by SKU (EE only)

- Multiple wishlists (EE only)

RWD Directory• app/design/frontend/rwd

• skin/frontend/rwd

How You Customize CSS

1. Write CSS in the Sass style sheets using the same structure that the Magento responsive theme uses. strongly recommended

2. Directly modify the CSS files that ship with the responsive theme and ignore the Sass files. Don’t Do this

RWD SASS

In previous versions of Magento, all CSS styles were grouped into a massive styles.css file that was cumbersome and difficult to navigate.

The CSS in the rwd theme is organized into individual files referred to as Sass partials

SASS config.rb

config.rb: Configuration values that tell Compass to look in the scss directory for Sass files and to export the CSS to the css directory. It also includes information about how Compass should format the compiled CSS add_import_path output_style environment

SASS Fallback with magento

Click icon to add picture

add_import_path

SASS Fallback with magento

Click icon to add picture

add_import_path

environments

Breakpoints

$bp-xsmall: 479px;

$bp-small: 599px;

$bp-medium: 770px;

$bp-large: 979px;

$bp-xlarge: 1199px;

The breakpoint variables are intended to be used with max-width by default.

When you use the breakpoint with min-width, you should add a pixel ($bp-medium+1) so the min-width and max-width styles don't both get applied to the same viewport size.

Breakpoints

Try to maintain breakpoint changes inside the selector

• Easy to maintain

• Well organised

• Easy to find

• Easy to understand

• Repetitions can be reduced

Variables

Mixins

Supported Devices and Browsers

Windows:

Internet Explorer 9 and later

Latest stable version of Chrome

Latest stable version of Firefox

Android: Chrome browser on Android 4.0+ (also known as Ice Cream Sandwich)

OS X:

Latest stable version of Chrome

Latest stable version of Firefox

Latest stable version of Safari

iOs (iPhone and iPad): Safari on iOs 7Basic compatibility should be expected on Android 2.3+ (and other

mobile devices) and Internet Explorer 8, but full support is not guaranteed.

Sprite images

Rendered Pixels

1X images 2X images 2X images (iPhone 6) 3X Images (iPhone 6+)

Sprite images

Click icon to add picture

Sprite images

Sprite images

Expand RWD

Two types of clients

1. who expects fancy webshops

2. who just expects a standard responsive webshop

We created a RWD++

Site was delivered quickly Mixin made is easy to create new themes in minutes Main Modifications on homepage Main Modifications Product detail Main Modifications Product overview Modified Menu

Thank you!!