Developing Responsive Frontends With The Latest Tools

35
Daniela Kirsch www.helloplugin.de

description

This session will provide you with an idea of the most popular frontend development tools and tricks. You will see how to develop a responsive, mobile first frontend that is BITV2.0 compliant and cross-browser compatible. And how to use those tools in your next Drupal project to enhance your performance.

Transcript of Developing Responsive Frontends With The Latest Tools

Page 1: Developing Responsive Frontends With The Latest Tools

Daniela Kirsch

www.helloplugin.de

Page 2: Developing Responsive Frontends With The Latest Tools

We hire

Page 3: Developing Responsive Frontends With The Latest Tools

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
Page 5: Developing Responsive Frontends With The Latest Tools

Frameworks

Tools

Preprocessors

Themes

Page 6: Developing Responsive Frontends With The Latest Tools
Page 7: Developing Responsive Frontends With The Latest Tools
Page 8: Developing Responsive Frontends With The Latest Tools
Page 9: Developing Responsive Frontends With The Latest Tools
Page 10: Developing Responsive Frontends With The Latest Tools

ZEN

Nucleus

FusionAdaptive Theme

Tao

Omega4BigDaddy

Page 11: Developing Responsive Frontends With The Latest Tools
Page 12: Developing Responsive Frontends With The Latest Tools

$ drush omega-wizard

Page 13: Developing Responsive Frontends With The Latest Tools
Page 14: Developing Responsive Frontends With The Latest Tools
Page 15: Developing Responsive Frontends With The Latest Tools

42

Page 16: Developing Responsive Frontends With The Latest Tools

42

Page 17: Developing Responsive Frontends With The Latest Tools
Page 18: Developing Responsive Frontends With The Latest Tools
Page 19: Developing Responsive Frontends With The Latest Tools
Page 20: Developing Responsive Frontends With The Latest Tools
Page 21: Developing Responsive Frontends With The Latest Tools
Page 22: Developing Responsive Frontends With The Latest Tools

EM is relative

to the font-size

Page 23: Developing Responsive Frontends With The Latest Tools
Page 24: Developing Responsive Frontends With The Latest Tools
Page 25: Developing Responsive Frontends With The Latest Tools
Page 26: Developing Responsive Frontends With The Latest Tools
Page 27: Developing Responsive Frontends With The Latest Tools
Page 28: Developing Responsive Frontends With The Latest Tools
Page 29: Developing Responsive Frontends With The Latest Tools
Page 30: Developing Responsive Frontends With The Latest Tools
Page 31: Developing Responsive Frontends With The Latest Tools
Page 32: Developing Responsive Frontends With The Latest Tools

In Berlin IDs have been duplicated!

Page 33: Developing Responsive Frontends With The Latest Tools

• 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

Browserstack.com

IETester

Responsinator.com

On Devices