Angular js mobile jsday 2014 - Verona 14 may
Embed Size (px)
Transcript of Angular js mobile jsday 2014 - Verona 14 may
- ANGULARJS MOBILE - VERONA 14 MAYJSDAY 2014 byLucianoAmodio : : adamquadmon @lucianoamodio
- WHO AM I?
- I'M A SOFTWARE ENGINEER DOING CODE SINCE 2000
- MY FIRST CONFERENCE (AS AUDITOR) HERE IN VERONA IN 2012
- THE SECOND ONE MARCH 2013
- HERE I MEET AND WAS LOVE!
- I STARTED STUDYING HARD
- DOING IT WRONG generator-angular-silex
- DO YOU KNOW THIS GRAPH? Ben Nadel: Myexperience with AngularJs
- THEN I WAS INVOLVED IN
- AND WITH AN INSPIRING LEAD AND AN AMAZING TEAM
- WE DID IT! THE ANGULARJS VERSION OF THE NAMSHI MOBILE WEBSITE
- IN THIS TALK I WANT TO SHARE WITH YOU HOW WE MADE ROCKET INTERNET IN GERMANY SAY WOW!
- LET'S START
- WHAT IS RESPONSIVE?
- aresponsive website respond to the ambientadaptingitself to provide the bestuser experience
- WHAT CAN BE RESPONSIVE?
- LAYOUT / MEDIA QUERIES Mediaqueries are filters thatcan be applied to CSS styles. Theymake iteasyto change styles based on the device, including the displaytype, width, height, orientation and even resolution.
- LAYOUT / SET YOUR VIEWPORT
- LAYOUT / TECNIQUES Google Web Fundamentals
- LAYOUT / MOSTLY FLUYD
- LAYOUT / COLUMN DROP
- LAYOUT / LAYOUT SHIFTER
- LAYOUT / OFF CANVAS
- IMAGES / OPTIMIZATION You should maybe with Optimize Images grunt-responsive-image
- IMAGES / RESPONSIVE Should I use srcset attribute or picture element? Tryask those guys: Maybe using for apicture elementpolyfill or aBBC solution: responsiveimages.org picturefill Images.js
- IMAGES / RESPONSIVE our solution (the concept):
- FEATURES You can use to provide differentcontentor behaviours (think aboutmouseover on atouch onlydevice!) Modernizr Butdon'tforgetto provied (expeciallyfor IE)polyfills
- USEFUL RESOURCES You reallyshould read Google Web Fundamentals Butalso givingalook at is notabad idea! Yeoman generator-mobile
- MOBILE ISSUES
- DON'T MAKE THEM WAIT! PRETEND TO BE FAST