responsive webdesign

Download Responsive webdesign

Post on 30-Jun-2015

200 views

Category:

Internet

0 download

Embed Size (px)

DESCRIPTION

Asterix en Obelix nemen je mee op reis door het Responsive Webdesign landschap

TRANSCRIPT

  • 1. Responsive webdesign Denver Sessink DTC Media

2. Inhoud Introductie Smartphone evolutie Use cases Mobile first Mobile web-techniques Dieper in de techniek RWD in de praktijk 3. Lets go! 4. Smartphone evolutie Wat Steve Jobs ons aandeed 5. Smartphone evolutie 6. Steve Jobs changed the world 7. Steve Jobs changed the world twice 8. Evolutie van internet 9. Use cases smartphone | tablet | laptop | desktop 10. Smartphone 11. Smartphone 3G verbinding on the go snel iets opzoeken kan langzaam zijn direct bellen niet printen payment nog lastig WIFI verbinding thuis, werk snel iets opzoeken veelal snel internet printen is lastig payment nog lastig 12. Smartphone Surfin Nieuws lezen Occasions zoeken Uitgebreid nieuwe modellen zoeken Werkplaatsafspraak maken Contactinformatie opzoeken Bedrijfshistorie lezen Inruilwaarde berekenen & offerte aanvragen 13. Tablet 14. Tablet touch! vooral thuisgebruik groter scherm tablet heeft gemiddeld meer dan 1 gebruiker snel iets opzoeken maar ook relax surfen printen is lastig 15. Tablet Surfin Nieuws lezen Occasions zoeken Uitgebreid nieuwe modellen zoeken Werkplaatsafspraak maken Contactinformatie opzoeken Bedrijfshistorie lezen Inruilwaarde berekenen & offerte aanvragen 16. Desktop 17. Desktop Muisbediening! Echt de tijd nemen Groot scherm (bijv. 1280x1024) Grote diversiteit browsers IE8 / Chome 34 18. Desktop Surfin Nieuws lezen Occasions zoeken Uitgebreid nieuwe modellen zoeken Werkplaatsafspraak maken Contactinformatie opzoeken Bedrijfshistorie lezen Inruilwaarde berekenen & offerte aanvragen 19. Mobile first nadenken over de essentie 20. Begin klein 21. Use cases Niet alleen de homepage Contactinformatie Werkplaatsafspraak maken Occasions zoeken Occasion bekijken 22. Mobile first in de praktijk Heel tijdrovend Per device(groep) een ander design Lastig met de klant te communiceren Wel in je achterhoofd houden 23. Mobile web- techniques adaptive, mobiele website, responsive 24. Mobiele website m.domein.nl of domein.nl/m Volledig eigen content Design toegespitst op use case SEO lastig Extra site om te onderhouden 25. Adaptive webdesign adaptief [adp'tif] aangepast voor een bepaalde omstandigheid 26. Adaptive webdesign Specifiek device (bijv. alleen smartphone) Niet flexibel Sneller te ontwikkelen 27. Responsive Web Design RWD responsief [rspn'sif] wat een antwoord bevat / responsieve communicatie ( 28. Responsive webdesign [reactief] communicatie waarbij je ingaat op iets dat je gesprekspartner net gezegd heeft Alle devices Flexibel Veel ontwikkeldtijd 29. Waarom responsive? Best mogelijke voorbereiding op toekomst Heel veel verschillende devices Ontwikkelingen gaan heel snel door Opvulling tussen kleinste en desktop 30. Nu wat techniek Viewport, Media Queries 31. Viewport Veel complexer dan je denkt! 32. Viewport Some mobile browsers, notably Safari iPhone, have a default layout viewport of around 850 to 1000 pixels much larger than the device width. (Why? In order to accomodate desktop sites whose developers did not test on mobile. Such sites usually stretch to roughly that width.) - PPK 33. Device viewport Het zichtbare deel van het scherm van het device Wordt door fabrikanten soms anders ingesteld Je met iets doen om controle te houden Media query pakt device viewport 34. Device viewport beinvloeden Device width leest actuele de schermbreedte uit device-width != device viewport device viewport instellen: 35. Kortom Hou controle over de viewport door hem altijd op device-width in te stellen! 36. Media queries browser support, resoluties, voorbeelden 37. Browser support CSS3 Internet Explorer 9+ Firefox Chrome Safari Alle mobiele browsers (Chrome, Firefox, IE Mobile, Android Browser, iOS Safari) Zie http://caniuse.com/css-mediaqueries 38. Apparaten en resoluties 39. Media query @media screen and (min-width: 600px) and (max- width: 900px) and (orientation: landscape) {} 40. Media types @media screen and (min-width: 600px) and (max- width: 900px) and (orientation: landscape) {} 41. Selectors @media screen and (min-width: 600px) and (max- width: 900px) and (orientation: landscape) {} 42. Media query: Small screen @media screen and (max-width: 640px) {} 43. Media query: Medium screen @media screen and (min-width: 641px) and (max-width: 1024px) {} 44. Media query: Large screen @media screen and (min-width: 1025px) and (max-width: 1440px) {} 45. Media query: XLarge screen @media screen and (min-width: 1441px) {} 46. Pro tip! Media querys worden ondersteund in een iframe. Een iframe kan dus ook responsive inhoud tonen! 47. RWD in de praktijk nauw samenwerken 48. Grid systems Standaard CSS voor responsive weergave van elementen (tabellen, kolommen, afbeeldingen, formulieren, etc.) Twee bekende: Twitter bootstrap ZURB Foundation Twitter bootstrap heel gebruiksvriendelijk ZURB Foundation meer geavanceerd 49. ZURB Foundation 12 kolommen standaard (instelbaar) 30px gutter standaard (instelbaar) 50. Rijen en kolommen 51. Rijen en kolommen (mobiel) Het aantal kolommen blijft gelijk! Standaard volledige breedte . small-12 Zes kolommen . small-6 52. Rijen en kolommen (tablet) Het aantal kolommen blijft gelijk! Zes kolommen: . medium-6 53. Er is nog vl meer... .show-for-small-only .show-for-medium-up .hide-for-small-only .hide-for-xlarge-up .show-for-landscape .show-for-portrait .show-for-touch 54. Praktisch Blijf voor desktop ontwerpen Responsive maken doet een front-end developer De volgorde van de elementen in het design blijft voor desktop, tablet en smartphone gelijk Uitzonderingen zijn mogelijk maar hebben direct effect op bijv. snelheid en SEO 55. Einde verhaal Vragen? 56. After party SASS, Responsive Video, Polyfills