For a Future-Friendly Web

Talk given at Designers+ workshop

Transcript

1. For a Future-Friendly Web
   

   View Slide

2. 88 choses sur HTML5
   

   View Slide

3. View Slide

4. Chaque Mercredi !
   

   View Slide

5. WEB NATIVE
   vs
   

   View Slide

6. WEB NATIVE
   vs
   native
   device
   

   View Slide

7. WEB NATIVE
   &
   native
   device
   

   View Slide

8. WEB
   native
   

   View Slide

9. ~ ~
   * * * *
   * *
   ~ * * ~ *
   * ~ * * ~
   ) ( ) *
   * ~ ) (_) ( (_) ) (_) ( *
   * (_) # ) (_) ) # ( (_) ( # (_) *
   _#.-#(_)-#-(_)#(_)-#-(_)#-.#_
   * .' # # # # # # # # # # # `. ~ *
   : # # # # # # # # :
   ~ :. # # # # .: *
   * | `-.__ __.-' | *
   | `````"""""""""""````` | *
   * | | ||\ |~)|~)\ / |
   | |~||~\|~ |~ | | ~
   ~ * | | *
   | |~)||~)~|~| ||~\|\ \ / | *
   * _.-| |~)||~\ | |~|| /|~\ | |-._
   .' '. ~ ~ .' `. *
   : `-.__ __.-' :
   `. `````"""""""""""````` .'
   `-.._ _..-'
   `````""""-----------""""`````
   Le web a 20 ans !
   

   View Slide

10. Question
    Quelles sont les 3 principales technologies
    du web ?
    ? ? ?
    

    View Slide

11. Question
    Quelles sont les 3 principales technologies
    du web ?
    ? ?
    HTML
    

    View Slide

12. Question
    Quelles sont les 3 principales technologies
    du web ?
    ? ?
    HTML HTTP
    

    View Slide

13. Question
    Quelles sont les 3 principales technologies
    du web ?
    ? ?
    HTML HTTP URI’s
    

    View Slide

14. The primary design principle underlying
    the Web’s usefulness and growth is
    universality… it should be accessible
    from any kind of hardware that can
    connect to the Internet: stationary or
    mobile, small screen or large.Loosely
    “
    Tim Berners-Lee
    Long Live the Web: A Call for Continued Open Standards
    and Neutrality
    

    View Slide

15. Want to know if your ‘HTML application’
    is part of the web? Link me into it.
    Not just link me to it; link me into it.
    Not just to the black-box front page.
    Link me to a piece of content… That is
    the web: The beautiful interconnection
    of navigable content.
    “
    Ben Ward
    Understand the web
    

    View Slide

16. View Slide

17. Responsive !
    

    View Slide

18. HTML
    CSS
    JS
    

    View Slide

19. HTML
    Contenu
    

    View Slide

20. http://www.flickr.com/photos/brad_frost/7387827018/in/set-72157630163121422
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. CONTENU
    

    View Slide

26. in order to embrace designing native
    layouts for the web – whatever the
    device – we need to shed the notion
    that we create layouts from a canvas in.
    We need to flip it on its head, and
    create layouts from the content out.
    “
    Mark Boulton
    A Richer Canvas
    

    View Slide

27. “CONTENT FIRST”
    

    View Slide

28. View Slide

29. https://speakerdeck.com/brad_frost/for-a-future-friendly-web
    

    View Slide

30. CSS
    Présentation
    

    View Slide

31. RESPONSIVE DESIGN
    

    View Slide

32. View Slide

33. CONTEXTE
    

    View Slide

34. View Slide

35. JAVASCRIPT
    Comportement
    

    View Slide

36. Hey
    Je pensais qu’on allait parler design !
    Remboursez !
    

    View Slide

37. développeurs = designers
    

    View Slide

38. UX designer Interaction
    designer
    Front-end
    developer
    Toute l’équipe
    

    View Slide

39. UX designer Interaction
    designer
    Front-end
    developer
    Toute l’équipe
    

    View Slide

40. As a T-shaped designer one should have
    experience across the multiple
    disciplines with a focus or preference
    for one or two. Being T-shaped means
    you can shift yourself and provide value
    at just about any stage or type of
    project – like sketching, wire-framing,
    visual design, and code.
    “
    Mark Otto
    Flatten those T’s
    

    View Slide

41. THANKS
    

    View Slide

42. Mehdi Lahmam B.
    @mehlah
    Craftsmen
    

    View Slide