Transcript
![Page 1: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/1.jpg)
Daniela Kirsch
www.helloplugin.de
![Page 2: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/2.jpg)
We hire
![Page 3: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/3.jpg)
crossbrowser
BITV2.0Touch
enabled
SEO optimizedPixel perfectResponsive
Editing text
Should be a piece
of cake
IE7!! IE6!!!
![Page 4: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/4.jpg)
![Page 5: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/5.jpg)
Frameworks
Tools
Preprocessors
Themes
![Page 6: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/6.jpg)
![Page 7: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/7.jpg)
![Page 8: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/8.jpg)
![Page 9: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/9.jpg)
![Page 10: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/10.jpg)
ZEN
Nucleus
FusionAdaptive Theme
Tao
Omega4BigDaddy
![Page 11: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/11.jpg)
![Page 12: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/12.jpg)
$ drush omega-wizard
![Page 13: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/13.jpg)
![Page 14: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/14.jpg)
![Page 15: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/15.jpg)
42
![Page 16: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/16.jpg)
42
![Page 17: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/17.jpg)
![Page 18: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/18.jpg)
![Page 19: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/19.jpg)
![Page 20: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/20.jpg)
![Page 21: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/21.jpg)
![Page 22: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/22.jpg)
EM is relative
to the font-size
![Page 23: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/23.jpg)
![Page 24: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/24.jpg)
![Page 25: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/25.jpg)
![Page 26: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/26.jpg)
![Page 27: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/27.jpg)
![Page 28: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/28.jpg)
![Page 29: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/29.jpg)
![Page 30: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/30.jpg)
![Page 31: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/31.jpg)
![Page 32: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/32.jpg)
In Berlin IDs have been duplicated!
![Page 33: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/33.jpg)
• Fonts must be resizable up to 200%
• All images must have alt attributes
• All links must have title attributes
• All links must be accessible with tab
![Page 34: Developing Responsive Frontends With The Latest Tools](https://reader034.vdocument.in/reader034/viewer/2022050808/54c733744a7959d67c8b4618/html5/thumbnails/34.jpg)
Browserstack.com
IETester
Responsinator.com
On Devices