2. “There is no Mobile Web.
There is only The Web,
which we view in different ways.
80% van de Nederlandse bedrijven houdt geen rekening met mobile bezoekers

3. Internet groeit... en groeit
● 1992, eerste webpagina wordt gepubliceerd
● mei 1993 50 websites wereldwijd
● 1995 HTML (documentopmaaktaal) beschikbaar voor groter publiek
● CSS maakt meer styling mogelijk
● 1996 ontwikkeling database gebaseerde webinhoud
● 1998 Google
● 2001 Web 2.0; gebruikers gaan een rol spelen
● 2003 start WordPress
● 2006 Twitter
● December 2012 634 miljoen websites wereldwijd
● 2013:
● 96% van de Nederlanders heeft toegang tot internet
● 4,5 uur per dag online
● 2,3 apparaten ter beschikking

4. Net als de bezoeksmogelijkheden
Apparaten Besturingssytemen Versienummers Browsers
● Laptop ● Windows
En op al
● Desktop ● Apple
● Smartphone ● Linux
● Tablet ● Android
● TV
die apparaten
moet het werken

5. In Cijfers
Meest gebruikte apparaat in Nederland? Touch apparaten in Nederland?
58% van de Nederlanders
heeft een smartphone
28% van de Nederlandse
gezinnen hebben een tablet
Meest gebruikte formaten?

6. Eisen aan websites
● Werkt op alle apparaten
● Laadt snel
● Makkelijk in gebruik
● Duidelijke navigatie
Wensen aan websites
● Grote afbeeldingen
● Interactief
● Sliders
● Oneindig scrollen (horizontaal of verticaal)
● Cirkels

7. Functies en tools
Voor ontwerpen Voor ontwikkelen

8. Workflow
Klant is op zoek
Naar een website
Ontwerper ontwerpt
pagina's
Ontwerper zoekt
webbouwer
Webbouwer
Bouwt op basis
van ontwerp
Ontwerper geeft
feedback over
gebouwde
website
Ontwerper koppelt terug
aan klant, klant is tevreden,
betaalt.

9. Nieuwe workflow
Klant is op zoek
Naar een website
Ontwerper
ontwerpt stijl
elementen Ontwerper
overlegt met
bouwer, Samen
maken ze een
wireframe
Ontwerper
overlegt
wireframe met
klant
Webbouwer
bouwt op
basis van
wireframe

10. HUH?
Stijlelementen?
widgets buttons
sfeer footer
logo
kleuren
koppen
Beeld achtergrond
sidebars
fonts elementen
Wireframe?
De indeling van de pagina's op de verschillende apparaat formaten

11. Wat is er anders
Statische ontwerp-fase verdwijnt
Ontwerpen van stijlelementen in photoshop
“schermafbeelding” ontwerpen voor elke pagina in photoshop
Layout ontwerp in browser
Vaste breedte verdwijnt
Breedte van de website 940px of 960px of 1024px
Maximale breedte bepalen daarna werken met breekpunten
Content bepaald op basis van de layout
Inhoud staat inhierarchisch, layoutin de sidebar, van het apparaat,
Content wordt het contentvlak, of is afhankelijk de header of de footer
belangrijkste content springt het meest in het oog
Werken in % in plaats van in px
Elk onderdeel van de layout heeftde layout worden begrensd in
Afmetingen van onderdelen van eigen afmetingen
hoeveel % van de totale breedte

12. Breedte in %
Als je een maximale breedte hebt vastgesteld voor je ontwerp ga je percentages uitrekenen
Bijvoorbeeld: Groot scherm Tablet Telefoon
Maximale breedte = 1024px
Header = 100% 1024px 768px 480px
Content area = 62% 635px 476px 297px
Sidebar-rechts = 34% 348px 261px 163px
Ruimte tussen 40px 30px 19px
content en sidebar = 4%

13. Breekpunten
Deze breedtes kun je testen, en op basis daarvan bepaal je de breekpunten
Bijvoorbeeld:
Vanaf beeldschermbreedte 600px worden alle vlakken 100% breedte
waardoor de sidebar onder de contentarea zal vallen
Of
Vanaf 480px is alleen de content area zichtbaar, de breedte van de sidebar
wordt 0%
Breekpunten worden vastgesteld in het css bestand van door middel van
media queries:

14. @media only screen
and (max-width : 759px)
{
#main {
overflow: visible;
}
#primary {
padding-bottom: 0px;}
#content {
background: #ffffff;
float: none;
margin:0px!important;
padding: 0 3%!
important;
width: 90%!important;
}
#secondary,
#tertiary {
width: 80%;
margin: 0 auto;
}
#main {
padding: 0.8em;
}

15. Voorbeeld wireframe

16. En verder?
Interactie op touch is anders dan apparaten met een muis
Menu
Hoover
Scroll

17. Vragen?

18. Discussie
Een website is een tool, geen doel
Vormgeving staat den dienste van klantvriendelijkheid en gebruiksgemak
Conversie is het belangrijkste van een website
Ik weet hoe websitebezoekers zich gedragen en pas mijn vormgeving daar op aan
Informatie architectuur is een duur woord voor het aanleveren van pagina voorbeelden
Mijn werk begint eigenlijk pas nadat de website is opgeleverd

19. HTML5 + CSS3

20. Waar haalt ze het vandaan?
http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
http://www.nu.nl/gadgets/3368282/bijna-25-miljoen-tablets-in-nederland.html
http://www.myabgc.com/resources/kid-on-computer.jpg
http://www.nownederland.nl/facts/internetvaardigheid/browsergebruik/#.UWHwK1pdW0w
http://static3.ad.nl/static/asset/2012/Internetgebruik_822.pdf
http://www.howtogomo.com/nl/d/waarom-mobiele-site/
http://services.google.com/fh/files/blogs/ompnl.pdf
http://emerce.marketingpapers.nl/documents/responsive%20design.pdf#top
http://www.loveinfographics.com/categories/mobile-phone-and-tablet-computing-infographics/best-apps-for-designers-infographic