“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

● 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

Internet groeit... en groeit

Net als de bezoeksmogelijkhedenApparaten Besturingssytemen Versienummers Browsers

● Windows● Apple● Linux● Android

● Laptop● Desktop● Smartphone● Tablet● TV En op al die apparaten

moet het werken

In Cijfers

Meest gebruikte formaten?

Meest gebruikte apparaat in Nederland? Touch apparaten in Nederland?

58% van de Nederlanders heeft een smartphone

28% van de Nederlandse gezinnen hebben een tablet

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

Functies en toolsVoor ontwerpen Voor ontwikkelen

WorkflowKlant is op zoekNaar een website

Ontwerper zoekt webbouwer

Ontwerper ontwerpt pagina's

Ontwerper geeft feedback over gebouwde website

Webbouwer Bouwt op basis van ontwerp

Ontwerper koppelt terug aan klant, klant is tevreden, betaalt.

Nieuwe workflowKlant is op zoekNaar een website

Ontwerper overlegt wireframe met klant

Ontwerper overlegt met bouwer, Samen maken ze een wireframe

Ontwerper ontwerpt stijl elementen

Webbouwer bouwt op basis van wireframe

HUH?Stijlelementen?

Wireframe?

sfeerkleuren

achtergrondfonts

buttonslogo

Beeldelementen

De indeling van de pagina's op de verschillende apparaat formaten

widgets

sidebars

koppen

footer

Wat is er andersStatische ontwerp-fase verdwijnt

“schermafbeelding” ontwerpen voor elke pagina in photoshopOntwerpen van stijlelementen in photoshopLayout ontwerp in browser

Werken in % in plaats van in px

Vaste breedte verdwijnt

Breedte van de website 940px of 960px of 1024pxMaximale breedte bepalen daarna werken met breekpunten

Inhoud staat in het contentvlak, of in de sidebar, de header of de footer

Content bepaald op basis van de layout

Elk onderdeel van de layout heeft eigen afmetingenAfmetingen van onderdelen van de layout worden begrensd in hoeveel % van de totale breedte

Content wordt hierarchisch, layout is afhankelijk van het apparaat, belangrijkste content springt het meest in het oog

Breedte in %Als je een maximale breedte hebt vastgesteld voor je ontwerp ga je percentages uitrekenen

Bijvoorbeeld:Maximale breedte = 1024pxHeader = 100% Content area = 62%Sidebar-rechts = 34%Ruimte tussen content en sidebar = 4%

Telefoon

480px297px163px19px

Groot scherm

1024px635px348px40px

Tablet

768px476px261px30px

BreekpuntenDeze 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 vallenOfVanaf 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:

@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;

}

Voorbeeld wireframe

En verder?Interactie op touch is anders dan apparaten met een muis

Menu

Hoover

Scroll

Vragen?

DiscussieEen website is een tool, geen doel

Mijn werk begint eigenlijk pas nadat de website is opgeleverd

Informatie architectuur is een duur woord voor het aanleveren van pagina voorbeelden

Ik weet hoe websitebezoekers zich gedragen en pas mijn vormgeving daar op aan

Conversie is het belangrijkste van een website

Vormgeving staat den dienste van klantvriendelijkheid en gebruiksgemak

HTML5 + CSS3

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

Waar haalt ze het vandaan?