developing responsive frontends with the latest tools

35
Daniela Kirsch www.helloplugin.de

Upload: daniela-kirsch

Post on 27-Jan-2015

117 views

Category:

Technology


1 download

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

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