Responsive en mobiele website voor recruiters

86
MOBIEL DESIGN Han Rusman [email protected] @hanrusman

Transcript of Responsive en mobiele website voor recruiters

Page 1: Responsive en mobiele website voor recruiters

MOBIEL DESIGN

Han [email protected]

@hanrusman

Page 2: Responsive en mobiele website voor recruiters

• In 1995 had 30% uit de fortune 500 een website.• In juni 2013 heeft slechts 10% daarvan een mobiele site

STATISTIEKEN

Page 3: Responsive en mobiele website voor recruiters

STATISTIEKEN

• 2015 is het mobiele web voor het eerst groter dan het desktop web– Morgan Stanley (2010)

Page 4: Responsive en mobiele website voor recruiters

STATISTIEKEN

iPhone:2G januari 20073G juni 20083Gs juni 20094 juni 2010

Page 5: Responsive en mobiele website voor recruiters

STATISTIEKEN

• In 2012 werden er meer smartphones en tablets verkocht dan pc’s. (wereldwijd)

Page 6: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 7: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 8: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 9: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 10: Responsive en mobiele website voor recruiters

• Het aantal ‘mobiele breedband aansluitingen’ is > 10 miljoen–8,9 daarvan zijn echt mobiel

–(maart 2013)

STATISTIEKEN

Page 11: Responsive en mobiele website voor recruiters

STATISTIEKEN

• Januari 2012 was gemiddeld 10%• December 2012 rond de 20%• Oktober 2013 rond de 26%

Page 12: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 13: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 14: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 15: Responsive en mobiele website voor recruiters

STATISTIEKEN

• YouTube 40% mobiel

Page 16: Responsive en mobiele website voor recruiters

STATISTIEKEN

• Facebook mobile ads. • 30% van alle ads is mobile

Page 17: Responsive en mobiele website voor recruiters

STATISTIEKEN

• Google onderzoek:– Survey/interviews– 1000 Amerikanen– Tussen 18 en 64– Representatieve sample Amerikaanse bevolking– Q1 2013

Page 18: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 19: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 20: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 21: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 22: Responsive en mobiele website voor recruiters

STATISTIEKEN

Page 23: Responsive en mobiele website voor recruiters

GOOGLE ANALYTICS - MOBIEL

Page 24: Responsive en mobiele website voor recruiters

GOOGLE ANALYTICS MOBIEL

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

apparaten

Page 25: Responsive en mobiele website voor recruiters

APPARATEN

Page 26: Responsive en mobiele website voor recruiters

APPARATEN

Page 27: Responsive en mobiele website voor recruiters

APPARATEN

Ultra HD: 7680 x 4320

Page 28: Responsive en mobiele website voor recruiters

APPARATEN

Ultra HD: 7680 x 4320

Page 29: Responsive en mobiele website voor recruiters

APPARATEN

Ultra HD: 7680 x 4320

Page 30: Responsive en mobiele website voor recruiters

14 van de 21 is niet mobiel

Page 31: Responsive en mobiele website voor recruiters

14 van de 21 is niet mobiel

Page 32: Responsive en mobiele website voor recruiters

14 van de 21 is niet mobiel

Page 33: Responsive en mobiele website voor recruiters

7 van de 21 is wel mobiel

Page 34: Responsive en mobiele website voor recruiters

OPLOSSING? RESPONSIVE!

Page 36: Responsive en mobiele website voor recruiters

CASE 1: THE NEXT WEB

Page 37: Responsive en mobiele website voor recruiters

CASES 1: THE NEXT WEB

Page 38: Responsive en mobiele website voor recruiters

CASES 1: THE NEXT WEB

Page 39: Responsive en mobiele website voor recruiters

CASES 1: THE NEXT WEB

Page 40: Responsive en mobiele website voor recruiters

CASES 1: THE NEXT WEB

Page 42: Responsive en mobiele website voor recruiters

CASES 2: MICROSOFT

Page 43: Responsive en mobiele website voor recruiters

CASES 2: MICROSOFT

Page 44: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttp://www.theguardian.com/uk?view=mobile

Page 45: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttp://www.bostonglobe.com/

Page 46: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttps://www.spotify.com/nl/

Page 47: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttp://www.regent-college.edu/

Page 48: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttp://contentsmagazine.com/

Page 49: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttps://www.gov.uk/

Page 50: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttp://www.nd.edu/

Page 51: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttp://www.passengerfocus.org.uk/

Page 52: Responsive en mobiele website voor recruiters

ANDERE MOOIE CASEShttp://www.smashingmagazine.com/

Page 53: Responsive en mobiele website voor recruiters

RESPONSIVE VS MOBILE

Page 54: Responsive en mobiele website voor recruiters

CASE MOBIEL: ASR

Page 55: Responsive en mobiele website voor recruiters

CASE MOBIEL: ASR

Page 56: Responsive en mobiele website voor recruiters

CASE MOBIEL: ASR

Page 57: Responsive en mobiele website voor recruiters

CASE MOBIEL: ASR

Page 58: Responsive en mobiele website voor recruiters

WAAROM RESPONSIVE?

Goed voor SEO

Page 59: Responsive en mobiele website voor recruiters

WAAROM RESPONSIVE?

Gebruiksvriendelijk

Page 60: Responsive en mobiele website voor recruiters

WAAROM RESPONSIVE?

Makkelijk te beheren, zowel in content als techniek

Page 61: Responsive en mobiele website voor recruiters

ADAPTIVE OF RESPONSIVE

Responsive: http://goldengridsystem.com/Adaptive: http://framelessgrid.com/

Responsive past vooral de grootte aan.Adaptive kijkt naar de vorm.

Page 62: Responsive en mobiele website voor recruiters

ADAPTIVE DESIGN

Page 63: Responsive en mobiele website voor recruiters

MENU’SMobiel menu

Page 64: Responsive en mobiele website voor recruiters

MENU’SToggle menu

Page 65: Responsive en mobiele website voor recruiters

MENU’SFooter menu

Page 66: Responsive en mobiele website voor recruiters

MENU’SOff-canvas

Page 67: Responsive en mobiele website voor recruiters

MENU’SToggle menu

Page 68: Responsive en mobiele website voor recruiters

MENU’SHybrid

Page 69: Responsive en mobiele website voor recruiters

MENU’S

Page 70: Responsive en mobiele website voor recruiters

MENU’SPriority-approach

Page 71: Responsive en mobiele website voor recruiters

TIPSDenk aan een sollicitatiestrategie

Page 72: Responsive en mobiele website voor recruiters

TIPS

Trial and error

Page 73: Responsive en mobiele website voor recruiters

TIPS

Meten, meten en meten

Page 74: Responsive en mobiele website voor recruiters

TIPSDenk aan je formulieren

Page 75: Responsive en mobiele website voor recruiters

TIPSOntwikkel voor de massa

Page 76: Responsive en mobiele website voor recruiters

TIPSMakkelijk contact opnemen

Page 77: Responsive en mobiele website voor recruiters

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.

Page 78: Responsive en mobiele website voor recruiters

TIPS

• Afbeeldingen:– Een definitieve oplossing is er nog niet

maar;• Beste oplossing is adaptive images,

verschillende grotes inladen bij breekpunten• http://responsiveimages.org/demos/basic-im

plementation/index.html

Page 79: Responsive en mobiele website voor recruiters

TIPSLet op tabellen

Page 81: Responsive en mobiele website voor recruiters

TIPSDenk aan je externe platforms

Page 82: Responsive en mobiele website voor recruiters

TIPSDenk aan je externe

platforms

Page 83: Responsive en mobiele website voor recruiters

WERKENBIJENECO.NL

Page 84: Responsive en mobiele website voor recruiters

WERKENBIJNS.NL

Page 85: Responsive en mobiele website voor recruiters

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

Page 86: Responsive en mobiele website voor recruiters

The primary design principle underlying the Web’s

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