SlideShare ist ein Scribd-Unternehmen logo

Magento RWD is Awesome

Insight on Magento RWD theme

1 von 28
Downloaden Sie, um offline zu lesen
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)

Recomendados

Handling web servers of high traffic sites
Handling web servers of high traffic sitesHandling web servers of high traffic sites
Handling web servers of high traffic sitesAshfame
 
Squishy pixels
Squishy pixelsSquishy pixels
Squishy pixelsFITC
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
Krishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsessionKrishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsessionKrishan Mohan
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshopShaho Toofani
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)Folio3 Software
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960LightSpeed
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 

Más contenido relacionado

Ähnlich wie Magento RWD is Awesome

Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerLizzie Hodgson
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer
 
Responsive with SASS and compass
Responsive with SASS and compassResponsive with SASS and compass
Responsive with SASS and compassDavid Malinowicz
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozókMáté Farkas
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
Spectrum 2015 responsive design
Spectrum 2015   responsive designSpectrum 2015   responsive design
Spectrum 2015 responsive designNeil Perlin
 
Responsive Web Development
Responsive Web DevelopmentResponsive Web Development
Responsive Web DevelopmentReema
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy gridsoovor
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth makingCathy Lill
 

Ähnlich wie Magento RWD is Awesome (20)

Fewd week3 slides
Fewd week3 slidesFewd week3 slides
Fewd week3 slides
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
 
Responsive with SASS and compass
Responsive with SASS and compassResponsive with SASS and compass
Responsive with SASS and compass
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
 
Beginning CSS.
Beginning CSS.Beginning CSS.
Beginning CSS.
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Understanding sass
Understanding sassUnderstanding sass
Understanding sass
 
Fewd week7 slides
Fewd week7 slidesFewd week7 slides
Fewd week7 slides
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Web designing course in bangalore
Web designing course in bangaloreWeb designing course in bangalore
Web designing course in bangalore
 
Spectrum 2015 responsive design
Spectrum 2015   responsive designSpectrum 2015   responsive design
Spectrum 2015 responsive design
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
Responsive Web Development
Responsive Web DevelopmentResponsive Web Development
Responsive Web Development
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy grid
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth making
 
Compass n Sass
Compass n SassCompass n Sass
Compass n Sass
 
Big Frontends Made Simple
Big Frontends Made SimpleBig Frontends Made Simple
Big Frontends Made Simple
 

Último

10 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 202410 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 2024Thijs Feryn
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Umar Saif
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...Fwdays
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
Apex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptxApex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptxmohayyudin7826
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxInfosec
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...MarcovanHurne2
 

Último (20)

10 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 202410 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 2024
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
Apex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptxApex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptx
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptx
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
Digital Transformation Strategy & Plan Templates - www.beyondthecloud.digital...
 

Magento RWD 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)
  • 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
  • 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
  • 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+)
  • 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