1. Magento Responsive
Web Design is Awesome

2. Agenda
 Magento RWD Theme
 SASS
 Config.rb
 Fallback
 Debugging
 Breakpoints
 Spite images
 RWD++

3. Packages
 base
 default
 enterprise
 iphone
 Rwd
 default
 enterprise

4. 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)

5. 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.

6. 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)

7. RWD Directory
• app/design/frontend/rwd
• skin/frontend/rwd

8. 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

9. 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

10. 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

11. SASS Fallback with magento
add_import_path

12. SASS Fallback with magento
add_import_path

13. environments

14. 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.

15. Breakpoints
Try to maintain breakpoint
changes inside the selector
• Easy to maintain
• Well organised
• Easy to find
• Easy to understand
• Repetitions can be reduced

16. Variables

17. Mixins

18. 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
7
Basic compatibility should be expected on Android 2.3+ (and other mobile
devices) and Internet Explorer 8, but full support is not guaranteed.

19. Sprite images
Rendered Pixels
 1X images
 2X images
 2X images (iPhone 6)
 3X Images (iPhone 6+)

20. Sprite images

21. Sprite images

22. Sprite images

23. Expand RWD
Two types of clients
1. who expects fancy webshops
2. who just expects a standard responsive webshop

24. 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

28. Thank you!!