Responsive webdesign
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive webdesign

on

  • 139 views

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

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

Statistics

Views

Total Views
139
Views on SlideShare
137
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 2

https://twitter.com 1
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive webdesign Presentation 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. Let’s 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 [adɑp'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 [rɛspɔn'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 móet 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: <meta name="viewport" content=" width=device-width">
  • 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 query’s 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 véél 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