Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Responsive Websites

No description
by

Wilbert Corts

on 29 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Websites

Het Bos en de Bomen
Native VS Mobile Website VS Responsive
Tools!
Wat is....
Native Apps
Mobiele websites
Responsive Webdesign
Browser & Resolutie
Native App -Tools
Mobiele website -Tools
Responsive Design tools
Phonegap
Boilerplate initializr
http://www.initializr.com/ Een verzameling van libraries...
Cons
Niet voor desktops
De normale site werkt ook
Functioneert niet zonder internet
Web-experience ipv Device Experience
Meerdere URL's (SEO koppelingen, bots crawlers mensen
Aparte desktopsite dus apart upgraden
Pro's
1 HTML structuur
Voor bijna "alle" devices
Direct beschikbaar
Easy-upgrade
SEO +Googlebaar
Deelbaar (FB, Google+)
Snel en licht ***
User Experience **
Werkt niet zonder internet
Minder toegang tot native functionaliteit
Web-Experience ipv Device Experience
Minder snel **
Verwarrende of verdwijnende objecten (waar is dat plaatje, die shortlist, dat item nou? Stond toch linksboven op de site?)
Normale site werkt ook vaak wel (dubble tab, pinch to zoom)
Duurdere start indien gewerkt wordt zonder templates
Alle platformen
Easy Upgrade in eigen taal
Voor bijna "alle" mobiele platformen
SEO + Googlebaar
1 URL, 1 HTML (bots, crawlers, mensen)
Deelbaar (FB, google+)
User Experience **
Snel**
Cons
Pro's
Adaptive...Layout?!
Plus een beetje Adaptive
http://teamtreehouse.com/library/mockups-for-responsive-design/introduction
Adaptive Webdesign
In het kort:
Wanneer je gekozen hebt om een mobiele website te maken
Een native app wordt gebouwd voor een specifiek type device en OS. De gebruiker download de app en voor elke update is een nieuwe downloadactie nodig. Data die in de app gebruikt wordt kan worden opgeslagen op het device, of op de server.
Wanneer User Experience voorop staat en/of er Consumer Response nodig is.
Wanneer er gebruik moet worden gemaakt van de functies van het device
Bij weinig (functionele) updates
Indien je een game wil maken
Indien de app erg veel gebruikt wordt
Kosten schalen mee met het aantal platformen, meerdere codestructuren
Initiëele download voor de gebruiker duurt 'lang'
Updaten via app store
Native functies van het apparaat beschikbaar
Functioneert zonder internet
Snelst ****
Device-eigen User Experience ****
Cons
Pro's
Wanneer te gebruiken?
Een mobiele website is een website alleen gemaakt voor kleine schermen. De site wordt niet op het device gehost maar op een server en is beschikbaar via een URL in de browser.
Wanneer je gekozen hebt voor het maken van Native Apps
Wanneer de normale website te druk is om weer te geven op een mobiel en 'Core' informatie genoeg is.
Wanneer te gebruiken?
Wanneer te gebruiken?
Website gebruik makend van een grid-based design met berekende procentuele breedtes (Target : context) die zorgen voor een 'Fluid' meegroeiende website.
Content neemt altijd de volledige breedte in van de parent en is daardoor 'Fluid'.
Door gebruik van media queries worden blokken content binnen het grid verplaatst.
Wanneer je initiële budget wat groter is
Wanneer je op 1 plaats wilt onderhouden
Wanneer het belangrijk is om op meerdere platformen gevonden te worden.
Maakt een site nog sneller en lichter
Je geeft precies de juiste content weer voor een optimale weergave
User Experience ***
Pro's
Bij Adaptive design serveer je content dynamisch op
basis van het type device waarmee je de aanvraag doet. Via:
- Request.browser.ismobiledevice
- Via JavaScript doorgeven van de screenresolution

Dit wordt vaak in combinatie gedaan met responsive webdesign.
http://msdn.microsoft.com/en-us/library/ms972953.aspx
http://framelessgrid.com/
http://stackoverflow.com/questions/8340644/request-browser-ismobiledevice-false-for-android-why

Verschillende weergaven van je website, andere HTML (bots, crawlers, mensen)
Werkt alleen met JavaScript
Con's
Wanneer gebruiken?
Als aanvulling op Responsive Design, Mobiele website of Adaptive layout
Of met volledig schermresolutie-eigen content
(Variant op Responsive Design, niet te verwarren met Adaptive Design)


Website gebruik makend van een grid-based design met FIXED breedtes die zorgen voor een schokkend meegroeiende website.
Content neemt altijd de volledige breedte in van de parent maar wordt niet Fluid omdat de parent een statische breedte heeft.
Door gebruik van media queries worden blokken content binnen het grid verplaatst.
Adaptive Layout: http://framelessgrid.com/
http://goldengridsystem.com/
Als alternatief voor Responsive Design
Adaptive webdesign: http://www.bostonglobe.com/
Hulp van de community
Welke browser werd gebruikt?
Wereld:
http://gs.statcounter.com/
Europa:
http://gs.statcounter.com/#browser-eu-monthly-201208-201308
Azië:
http://gs.statcounter.com/#browser-as-monthly-201208-201308
Noord Amerika
: http://gs.statcounter.com/#browser-na-monthly-201208-201308
Zuid Amerika
:http://gs.statcounter.com/#browser-sa-monthly-201208-201308
Oceanie:
http://gs.statcounter.com/#browser-oc-monthly-201208-201308
Afrika:
http://gs.statcounter.com/#browser-af-monthly-201208-201308
Nederland
: http://gs.statcounter.com/#browser-NL-monthly-201208-201308
Welke resolutie werd gebruikt voor desktop?
Wereld:
http://gs.statcounter.com/#resolution-ww-monthly-201208-201308
Europa:
http://gs.statcounter.com/#resolution-eu-monthly-201208-201308
Azië:
http://gs.statcounter.com/#resolution-as-monthly-201208-201308
Noord Amerika
: http://gs.statcounter.com/#resolution-na-monthly-201208-201308
Zuid Amerika
: http://gs.statcounter.com/#resolution-sa-monthly-201208-201308
Oceanie:
http://gs.statcounter.com/#resolution-oc-monthly-201208-201308
Afrika:
http://gs.statcounter.com/#resolution-af-monthly-201208-201308
Nederland:
http://gs.statcounter.com/#resolution-NL-monthly-201208-201308
Welke resolutie werd gebruikt voor mobieltjes?
Wereld:
http://gs.statcounter.com/#mobile_browser-ww-monthly-201208-201308
Europa:
http://gs.statcounter.com/#mobile_browser-eu-monthly-201208-201308
Azië:
http://gs.statcounter.com/#mobile_browser-as-monthly-201208-201308
Noord Amerika
: http://gs.statcounter.com/#mobile_browser-na-monthly-201208-201308
Zuid Amerika
: http://gs.statcounter.com/#mobile_browser-sa-monthly-201208-201308
Oceanie: http://gs.statcounter.com/#mobile_browser-oc-monthly-201208-201308
Afrika:
http://gs.statcounter.com/#mobile_browser-af-monthly-201208-201308
Nederland:
http://gs.statcounter.com/#mobile_browser-NL-monthly-201208-201308
Helpt je een keuze maken bij het zoeken naar de juiste techniek voor mobiele 'apps'.
Iphone
Android
.Net & Iphone
Android-look
http://www.componentone.com/superproducts/studioiphone/
http://www.monobjc.net/
http://www.robovm.org/
Iphone & .Net
http://gigaom.com/2010/03/31/iphone-development-alternatives-code-without-objective-c/
http://www.monobjc.net/
http://en.wikipedia.org/wiki/IOS_SDK#.NET.2FCLI
http://bit.ly/JoK3YT
Development via Objective C en IOS SDK
http://bit.ly/OFLmVe
Phonegap.com
Iphone & Java
Vergelijking van IOS tools voor Java
http://bit.ly/XHqanN
http://en.wikipedia.org/wiki/IOS_SDK#.NET.2FCLI
Android browsers:
http://www.onbile.com/info/most-popular-android-browsers/
Iphone Browsers:
http://ipod.about.com/od/bestiphoneapps/tp/Top-Iphone-Web-Browser-Apps.htm
Development via Android NDK
http://developer.android.com/tools/sdk/ndk/index.html
Phonegap.com
"Een mobiele website is in principe een gewone website maar dan voor kleinere schermen."
http://www.asp.net/mobile
.Net
http://bit.ly/sBJ25G
Java
All-in-oneTemplates
Boilerplate
Boilerplate bevat templates voor CSS, HTML, Javascript met daarnaast Polyfills.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
http://remysharp.com/2010/10/08/what-is-a-polyfill/
http://blog.teamtreehouse.com/html5-quick-start-with-boilerplate
Bootstrap
( http://www.initializr.com/ )
( http://getbootstrap.com/2.3.2/ )
Bootstrap bevat templates voor CSS, HTML, Javascript en Polyfills. Heeft een set standaard controls met een sterk eigen design. (Waar je evt. vanaf kan wijken). Bevat zowel een fluide als een fixed Grid.
http://bootswatch.com/
http://getbootstrap.com/2.3.2/customize.html
http://getbootstrap.com/2.3.2/components.html
http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bootstrap-to-create-a-responsive-website-design/
PhoneGap is an application container technology that allows you to create natively-installed applications for mobile devices using HTML, CSS, and JavaScript.
Algemeen
http://jquerymobile.com/
Hybride apps
Een hybride app is een native app gebouwd via een platform zoals phonegap. Phonegap converteert deze app naar de gewenste native taal.
Wanneer je wel native apps wil maar de kosten in bedwang moet houden en één app wil beheren.
Vaak langzamer dan een echte native app
Updaten via app store.
Look en feel net even minder dan een echte native app
Debuggen is lastiger
Eerste download duurt 'lang' voor de gebruiker
Phonegap is feilbaar
Gemakkelijk meerdere native apps bouwen
Bouwen in je eigen webtaal
Apparaatsensors bereikbaar
Snel ***
Device-eigen User Experience ***
Cons
Pro's
Wanneer te gebruiken?
Voor hybride apps:
http://people.apache.org/~pmuellr/weinre/docs/latest/
Weinre webinspector: 'firebug' voor hybride apps:
Alternatieven voor Phonegap:
http://vsnomad.com/
http://www.appmobi.com/
http://www.appcelerator.com/
http://www.motorolasolutions.com/US-EN/Business+Product+and+Services/Software+and+Applications/RhoMobile+Suite#
http://www.kassenaar.com/blog/post/2012/10/29/Kennismaken-met-PhoneGap-introductie.aspx
Manier 1
Manier 2
Automagisch
https://build.phonegap.com/
Zelf installeren: flexibeler en meer controle
Download phonegap PER platform 1 maal
Installeer Java om een android app te maken, .Net om een windows app te maken en Xcode om een apple app te maken
http://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html
Installing Phonegap
Cursus phonegap:
http://www.vijfhart.nl/oracle-web/opleidingen/oracle-web-cursus-pagina/training-id/1523/phonegap-mobile-app-development.htm
De keuze, de gevolgen hiervan voor
de look & feel en... de eigenaar.
De Opdrachtgever is verantwoordelijk
Techniek maakt design
Einde!
Gesprek met de opdrachtgever:
Neem een rudimentair overzicht van de functionele eisen en de doelstellingen van de applicatie mee. Bespreek minimaal de volgende punten:
Techniek i.c.m. de technische voor en nadelen
Techniek i.c.m. de design keuze

Voer dit gesprek met een programmeur én een designer. Het doel is: Zorgen dat de keuze bij de opdrachtgever ligt en weloverwogen genomen wordt.
Een knop is een knop... toch?
Een knop ziet er op een Android anders uit dan op een iphone. Wanneer je een website maakt die ook op mobiel bekeken wordt vraagt de opdrachtgever vaak om een bepaalde telefoonstijl zich niet voldoende realiserend dat er ook gebruikers zijn met een andere telefoon dan hij/zij.

Je kunt wellicht de look van een Apple of Android benaderen maar het zal nooit goed genoeg worden. Bovendien komt vervolgens persoon twee met een Sony die zegt, 'dat is helemaal niets'.
Beter is het daarom om de gebruiker te informeren over de verschillende technieken, en aan te geven dat een (native)App iets anders is dan een website en dat als je kiest voor een website je een eigen design moet bedenken net zoals bij een normale website.
http://www.mobileawesomeness.com/
Ideeën nodig om met de klant te bespreken? Kijk eens online
"Ik wil een mooie flashy app" a.k.a. "opleuken"
http://prezi.com/2k5dc41f5xof/responsive-websites/
of niet...?

Start @ 5:50
Waht is teh Fluid grid?!
http://phonegap.com/about/feature/
jQuery
Een javascriptlibrary die DOM-manipulatie, event handling en animatie over verschillende browsers eenvoudig maakt.
Modernizr
1: Een script die je <body> classes meegeeft waaraan je kunt afleiden welke css3truckjes je kunt gebruiken.
2: Een script waarmee je html 5 elementen in IE8 en eerder kan stylen. (stylen, niet dat ze in 1 keer gaan werken)
3: Een script waarmee je features van de browser kan detecten.
http://webdesignernotebook.com/css/how-to-use-modernizr/
http://modernizr.com/docs/
html5 shiv
Polyfill
Ie 8 en eerder hebben geen ondersteuning voor html 5 omdat ze de elementen niet als elementen herkennen. html5 shivs is een script waarmee je ie8 en eerder laat weten dàt de elementen bestaan. Dit is nodig zodat je er css kan aanhangen. Html 5 shiv is onderdeel van Modernizr. Let op het zorgt er niet voor dat een video element in een keer gaat werken!
Een polyfill is een js wat html5 /css3 gedrag kan imiteren in oude browsers. Let op: sloom, en niemand kijkt je site in 2 browsers, dus maakt t uit als het anders is?
http://modernizr.com/docs/#polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Mobile-first responsive
Twitter bootstrap
Dit zijn html en css files die een mobile first responsive gridsysteem bevatten. Itt bootstrap zitten er geen classes bij voor formelementen of javascriptbehaviour.
Dit is een html/ css / js library waarmee je standaard styling en behaviour kan toevoegen aan je website doormiddel van het toevoegen van classes op elementen. Daarnaast is het een gridsysteem voor responsive gedrag van je website.
http://verekia.com/initializr/responsive-template
http://getbootstrap.com/getting-started/#examples
http://www.javaworld.com/javaworld/jw-03-2013/130327-open-source-java-iphone-tools-compared.html
http://michaelcrump.net/ios-programming-for-net-developers-book-review
http://www.codenameone.com/
http://developer.android.com/guide/webapps/index.html
http://www.monobjc.net/
http://gigaom.com/2010/03/31/iphone-development-alternatives-code-without-objective-c/
http://developer.android.com/tools/sdk/ndk/index.html
http://mobile.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/
http://www.oracle.com/technetwork/java/javame/javamobile/overview/getstarted/index.html
http://www.asp.net/mobile
http://ipod.about.com/od/bestiphoneapps/tp/Top-Iphone-Web-Browser-Apps.htm
http://www.onbile.com/info/most-popular-android-browsers/
http://people.apache.org/~pmuellr/weinre/docs/latest/
http://www.kassenaar.com/blog/post/2012/10/29/Kennismaken-met-PhoneGap-introductie.aspx
http://www.vijfhart.nl/oracle-web/opleidingen/oracle-web-cursus-pagina/training-id/1523/phonegap-mobile-app-development.htm
http://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html
http://www.1stwebdesigner.com/inspiration/mobile-web-designs-show-future-trends/
http://prezi.com/2k5dc41f5xof/responsive-websites/
http://webdesignernotebook.com/css/how-to-use-modernizr/
http://modernizr.com/docs/
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://verekia.com/initializr/responsive-template
http://getbootstrap.com/getting-started/#examples
Alle links uit deze presentatie op een rij:
Polyfill is javascriptcode waarmee je html5 gedrag in oude browsers imiteert
Full transcript