magento rwd is awesome
TRANSCRIPT
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)
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
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
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.
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