Top Banner
Daniela Kirsch www.helloplugin.de
35

Developing Responsive Frontends With The Latest Tools

Jan 27, 2015

Download

Technology

Daniela Kirsch

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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