際際滷

際際滷Share a Scribd company logo
MOBIEL DESIGN
Han Rusman
han@netwerven.nl
@hanrusman
STATISTIEKEN

 In 1995 had 30% uit de
fortune 500 een website.
 In juni 2013 heeft slechts
10% daarvan een mobiele
site
STATISTIEKEN
 2015 is het mobiele web voor
het eerst groter dan het
desktop web
 Morgan Stanley (2010)
STATISTIEKEN
iPhone:
2G januari 2007
3G juni 2008
3Gs juni 2009
4 juni 2010
STATISTIEKEN
 In 2012 werden er meer
smartphones en tablets
verkocht dan pcs. (wereldwijd)
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
 Het aantal mobiele breedband
aansluitingen is > 10 miljoen
8,9 daarvan zijn echt mobiel
(maart 2013)
STATISTIEKEN
 Januari 2012 was gemiddeld
10%
 December 2012 rond de 20%
 Oktober 2013 rond de 26%
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
 YouTube 40% mobiel
STATISTIEKEN
 Facebook mobile ads.
 30% van alle ads is mobile
STATISTIEKEN
 Google onderzoek:
 Survey/interviews
 1000 Amerikanen
 Tussen 18 en 64
 Representatieve sample Amerikaanse bevolking
 Q1 2013
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
STATISTIEKEN
GOOGLE ANALYTICS - MOBIEL
GOOGLE ANALYTICS MOBIEL





SEO
Verschillende apparaten
Landscape vs portrait
In de toekomst gebruikers ipv apparaten
APPARATEN
APPARATEN
APPARATEN

Ultra HD: 7680 x 4320
APPARATEN

Ultra HD: 7680 x 4320
APPARATEN

Ultra HD: 7680 x 4320
14 van de 21 is niet mobiel
14 van de 21 is niet mobiel
14 van de 21 is niet mobiel
7 van de 21 is wel mobiel
OPLOSSING? RESPONSIVE!
OPLOSSING? RESPONSIVE!
CASE 1: THE NEXT WEB
CASES 1: THE NEXT WEB
CASES 1: THE NEXT WEB
CASES 1: THE NEXT WEB
CASES 1: THE NEXT WEB
CASES 2: MICROSOFT
CASES 2: MICROSOFT
CASES 2: MICROSOFT
ANDERE MOOIE CASES
http://www.theguardian.com/uk?view=mobile
ANDERE MOOIE CASES
http://www.bostonglobe.com/
ANDERE MOOIE CASES
https://www.spotify.com/nl/
ANDERE MOOIE CASES
http://www.regent-college.edu/
ANDERE MOOIE CASES
http://contentsmagazine.com/
ANDERE MOOIE CASES
https://www.gov.uk/
ANDERE MOOIE CASES
http://www.nd.edu/
ANDERE MOOIE CASES
http://www.passengerfocus.org.uk/
ANDERE MOOIE CASES
http://www.smashingmagazine.com/
RESPONSIVE VS MOBILE
CASE MOBIEL: ASR
CASE MOBIEL: ASR
CASE MOBIEL: ASR
CASE MOBIEL: ASR
WAAROM RESPONSIVE?

Goed voor SEO
WAAROM RESPONSIVE?

Gebruiksvriendelijk
WAAROM RESPONSIVE?

Makkelijk te
beheren, zowel in
content als techniek
ADAPTIVE OF RESPONSIVE
Responsive: http://goldengridsystem.com/
Adaptive: http://framelessgrid.com/

Responsive past vooral de grootte aan.
Adaptive kijkt naar de vorm.
ADAPTIVE DESIGN
珂掘鰻雨S
Mobiel menu
珂掘鰻雨S
Toggle menu
珂掘鰻雨S
Footer menu
珂掘鰻雨S
Off-canvas
珂掘鰻雨S
Toggle menu
珂掘鰻雨S
Hybrid
珂掘鰻雨S
珂掘鰻雨S
Priority-approach
TIPS
Denk aan een sollicitatiestrategie
TIPS

Trial and error
TIPS

Meten, meten en meten
TIPS
Denk aan je formulieren
TIPS
Ontwikkel voor de
massa
TIPS
Makkelijk contact
opnemen
TIPS
 Snelheid:
 Grofweg driekwart verwacht een even snelle
website als op desktop.
 Hetzelfde percentage verlaat de site als deze
niet binnen 5 seconden geladen is.
TIPS
 Afbeeldingen:
 Een definitieve oplossing is er nog niet maar;
 Beste oplossing is adaptive images, verschillende
grotes inladen bij breekpunten
 http://responsiveimages.org/demos/basicimplementation/index.html
TIPS
Let op tabellen
TIPS

Let op embedded
TIPS
Denk aan je externe platforms
TIPS
Denk aan je externe platforms
WERKENBIJENECO.NL
WERKENBIJNS.NL
WAAROM NU?
 Techniek komt nu pas echt van de grond
 Browsers gaan snel vooruit -> CSS3 (IE9)
/ HTML5 (IE9)
 Percentage mobiel stijgt hard
 In den beginne was het web responsive
The primary design principle underlying the Webs
usefulness and growth is universality.

The Web should be usable by people with disabilities.
It must work with any form of information, be it a
document or a point of data, and information of any
quality from a silly tweet to a scholarly paper.
And it should be accessible from any kind of

hardware that can connect to the Internet:
stationary or mobile, small screen or large.
Tim Berners-Lee

Long Live the Web

More Related Content

Responsive en mobiele website voor recruiters