hoe kan een website geoptimaliseerd worden voor verschillende apparaten? by Glenn V

Nosize nl multimedia oplossingen

H o e ka n e e n w e b s i te ge o p t i m a l i s e e rd word e n vo o r ve rsc h illen d e a p p araten?

Glenn Vlekke

0805372

Mobile life

To e g e p a s t o n d e r z o e k

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Colofon Glenn Vlekke 0805372 info@nosize.nl www.nosize.nl Hogeschool Rotterdam Studie: Mediatechnologie Minor: Web & Mobile Begeleider HR: Robert de Ruiter

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 2

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Samenvatting Steeds meer apparaten zijn verbonden met internet, waardoor websites op deze apparaten te bekijken zijn. Om voor al deze apparaten één website te maken die zich aanpast aan het apparaat zijn er een aantal technieken nodig. De beste technieken om dit uit te voeren zijn CSS3 mediaqueries, aanpassen op user agent, responsive images en cache manifest.

CSS3 mediaqueries Mediaqueries zijn CSS filters waarbij aan de hand van de maximale breedte een andere layout getoond kan worden. Het voordeel van deze techniek is dat resolutie afhankelijk de stylesheet zich aanpast en dat het op elke browser werkt.

Aanpassen op user agent De user agent bevat informatie over de browser en het systeem en wordt meegestuurd van de browser naar de server. Hierdoor kan er een andere layout getoond worden. De voordelen van deze techniek is dat de gebruiker zelf kan kiezen of de mobiele of de desktop versie getoond moet worden. Een ander voordeel is dat het niet resolutie afhankelijk is waardoor een klein scherm met een grote resolutie toch de layout krijgt voor een mobiele versie. Een groot nadeel van deze techniek is dat bij nieuwe apparaten de sleutelwoorden voor deze apparaten toegevoegd moeten worden aan het filter.

Responsive images Als een afbeelding op kleinere apparaten wordt bekeken dan hoeft de afbeelding niet op volledige grootte te zijn. Door responsive images toe te passen wordt de juiste grootte van de afbeelding geladen. Voordelen zijn dat de afbeeldingen sneller gedownload zijn met lagere resoluties. Een ander voordeel is dat er data bespaard word omdat de afbeeldingen kleiner zijn. Nadeel is dat de server of programmeur meerdere afbeeldingen moet aanmaken die extra schijfruimte nodig hebben.

Cache manifest Een manifest zorgt er voor dat bepaalde bestanden in de cache worden opgeslagen, zodat deze niet opnieuw gedownload hoeven te worden. De voordelen van manifest zijn dat de website sneller geladen wordt vanaf de tweede hit vanuit dezelfde browser. Een ander voordeel is dat het data bespaard bij gebruikers met een mobiele verbinding. Een nadeel van deze techniek is dat de programmeur het cache manifest moet aanpassen bij een wijziging in de cache bestanden.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 3

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Inhoudsopgave Inleiding............................................................................................................................5 Wat zijn de belangrijkste factoren? .......................................................................................6 Aanpassen op resolutie...............................................................................................6 Welke technieken gebruiken de resolutie om de layout aan te passen? ........................7 Adapt.js ..................................................................................................7 Media queries (CSS3) ................................................................................8 Aanpassen op user agent ..........................................................................................10 Android ............................................................................................................10 iOS ..................................................................................................................11 Windows phone .................................................................................................12 Desktop ...........................................................................................................12 Waarop kan gedetecteerd worden of het een mobiel apparaat is? .............................13 Snelheid .................................................................................................................14 Responsive images ............................................................................................14 Cache manifest .................................................................................................14 Conclusie en aanbeveling...................................................................................................17 Bibliografie ......................................................................................................................18

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 4

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Inleiding Steeds meer apparaten krijgen een internet verbinding, waarbij elk apparaat een andere browser kan hebben in combinatie met andere versie nummers. Elk apparaat heeft daarbij een ander soort verbinding, met als gevolg dat de website snel of langzaam geladen kan worden. Om de laadtijd zo kort mogelijk te houden zal er ingespeeld moeten worden op de snelheid van de verbinding. Cache is een mechanisme in browsers waarin bestanden voor een bepaalde tijd opgeslagen worden, zodat deze bestanden niet opnieuw gedownload hoeven te worden. Het lastige van cache is dat elke browser andere criteria heeft voor het opslaan van de bestanden. Hierdoor worden bestanden in bepaalde browsers wel in de cache geplaatst en bij andere niet. Resolutie en de grootte van het beeldscherm heeft ook veel invloed op de optimale vlakverdeling van een website. Dit artikel geeft een antwoord op de vraag “hoe kan een website geoptimaliseerd worden voor verschillende apparaten”

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 5

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Wat zijn de belangrijkste factoren? De trend om apparaten te hebben met internetaansluiting zal zich uitbreiden naar wekkers, magnetrons, projectors en multimedia tafels. Om een website optimaal te maken voor verschillende apparaten zijn de volgende factoren van invloed: 1. Resolutie 2. Schermgrootte 3. Snelheid dat de website geladen wordt.

Aanpassen op resolutie De resolutie is bij veel websites nog statisch. De website http://bol.com heeft een breedte van 984 pixels en schaalt niet mee in grootte en veranderd niet op verschillende apparaten. Tot nu toe zijn ontwerpers bezig geweest met een resolutie die op de meeste apparaten beschikbaar waren. Dit was vroeger 800x600 en is later naar 1024x768 verschoven. Dit komt mede door de tools die worden aangereikt om een website te bouwen. Als de designer een nieuw document maakt moet de breedte en hoogte bepaald worden. Een ander voorbeeld van statisch ontwerpen is het gebruik van grids, waarvan http://960.gs één van de bekendste is. De verschuiving vind nu plaats van statische naar schaalbare websites.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 6

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Welke technieken gebruiken de resolutie om de layout aan te passen? Adapt.js Via de JavaScript library Adapt kan er afhankelijk van de resolutie een ander CSS bestand ingeladen worden. Dit wordt gerealiseerd door een bereik te beschrijven van elk individueel CSS bestand. De volgende code is een voorbeeld van de implementatie: var ADAPT_CONFIG = { range: [ ‘0px to 760px ‘760px to 980px ‘980px to 1280px ‘1280px to 1600px ‘1600px to 1920px ‘1940px to 2540px ‘2540px ] };

= = = = = = =

mobile.css’, 720.css’, 960.css’, 1200.css’, 1560.css’, 1920.css’, 2520.css’

Ondersteuning Werkt bij alle browsers die javascript ondersteunen. Hier vallen alle meest gebruikte browsers onder, mits de gebruiker javascript heeft uitgeschakeld. Voordelen 1. Alleen CSS bestanden die nodig zijn worden ingeladen, waardoor de pagina sneller laad. Nadelen 1. De CSS bestanden kunnen pas geladen worden nadat het JavaScript bestand geladen en uitgevoerd is. Hierdoor kan vertraging ontstaan in de webpagina dit is uiteindelijk merkbaar voor de gebruiker.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 7

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Media queries (CSS3) Als de resolutie te klein wordt voor de inhoud worden er media queries gebruikt. Een voorbeeld is te vinden op http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign. De volgende code is een voorbeeld van een CSS3 mediaquery op basis van de resolutie. #sidebar { width: 280px; float: right; } @media screen and (max-width: 980px) { #sidebar { padding: 8% 7%; margin-bottom: 10px; } } @media screen and (max-width: 650px) { #sidebar { width: 100%; float: none; margin: 0; } }

Ondersteuning De media queries zijn onderdeel van de CSS3 specificatie en worden goed ondersteund bij de laatste versies van alle browsers. Sommige websites passen de media queries echter nog niet toe, omdat Internet Explorer 8 en lager niet over deze functionaliteit beschikt. Met de volgende code is het wel mogelijk om in Internet Explorer 8 en lager hetzelfde effect te krijgen via javascript:

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 8

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Waarbij veel websites via media queries testen of het mogelijk is om een mobiele variant aan te bieden is dit een oplossing die niet meer volledig werkt. De mobiele apparaten krijgen een steeds hogere resolutie terwijl ze dezelfde schermgrootte behouden. Een voorbeeld hiervan is de Galaxy Nexus met een resolutie van 1280 x 720 pixels op een 4,65 inch display in vergelijking met een 43 inch tv die dezelfde resolutie kan hebben in combinatie met bijvoorbeeld Apple TV. Deze ontwikkeling betekend dat het controleren op resolutie eigenlijk geen goede manier is om te controleren of er een klein scherm gebruikt wordt. Voordelen 1. Resolutie afhankelijkheden kunnen in de stylesheet zelf geplaatst worden 2. Werkt op alle gangbare browsers met behulp van javascript. Nadelen 1. Laat ook de volledige versie zien op telefoons met een klein scherm met hoge resolutie.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 9

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Aanpassen op user agent Elke browser stuurt een user agent mee zodat de server weet vanaf welke browser er een aanvraag wordt gedaan. De user agent werd vroeger vooral gebruikt om met verschillende code implementaties om te gaan bij verschillende desktop browsers. Momenteel worden ze bij veel sites gebruikt om te controleren of de gebruiker doorgestuurd moet worden naar een mobiele variant. Deze methode wordt ook wel “Browser sniffing” genoemd. Een groot nadeel van deze methode is dat er veel verschillende browsers zijn en deze allemaal met verschillende schermgroottes en resoluties werken. Een gevolg van deze methode is dat er een database moet zijn met de meest voorkomende apparaten, wat voor scherm de apparaten hebben en wat voor layout er dan gepresenteerd moet worden. Een andere mogelijkheid van sommige browsers is dat de user agent aangepast kan worden. Aan de ene kant kan er daarom niet vertrouwd worden of de browser wel echt die browser is die in de user agent staat. Aan de andere kant heeft de gebruiker de vrijheid om alleen maar mobiele versies van websites te zien of toch de volledige versie.

Android Vanaf Android 4.0 (Ice cream sandwich) zit er een functie in de standaard browser die de user agent verandert van Android(mobile) naar Chrome(desktop). De versies voor Android 4.0 hebben dit nog niet waardoor op deze versies de mobiele variant gedetecteerd zal worden. Via de user agent kan wel de Android versie achterhaald worden. Dit betekent dat de website zich ook kan aanpassen aan gebruikers met de eerste tablet versie Android 3 (Honeycomb) en op eerdere telefoon versies van Android (versie 2 en lager). Door deze methode worden alle Android telefoons en tablets gedekt met uitzondering van de Samsung Galaxy tab 7 inch GT-P1000 die werkt op Android 2.2. Om toch te controleren of het een tablet is kan er ook gecontroleerd worden op het woord “Tablet” aangezien deze wel voorkomt in de user agent.

Voorbeelden van Android telefoons user agents: Galaxy Nexus / 4.0.1 “show as desktop” Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24 Galaxy Nexus / 4.0.1 “show as mobile” “Mozilla/5.0 (Linux; U; Android 4.0.1; en-us; sdk Build/ICS_MRO) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30” Samsung Galaxy S2 / 3.2.7 Mozilla/5.0 (Linux; U; Android 2.3.7; nl-nl GT-I9100 Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 10

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Voorbeelden van Android tablets user agents: Samsung Galaxy Tab 10.1 / 3.0 Mozilla/5.0 (Linux; U; Android 3.0; xx-xx; GT-P7100 Build/HRI83) AppleWebkit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13 Samsung Galaxy Tab 7 GT-P1000 / 2.2 Mozilla/5.0 (Linux; U; Android 2.2; en-gb; SAMSUNG GT-P1000 Tablet Build/MASTER) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 Archos 110 / 2.1 Mozilla/5.0 (Linux; U; Android 2.1-update1; en-ie; A101IT Build/ECLAIR) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2

iOS De producten van Apple die iOS draaien geven net als de android telefoons en tablets een productnaam mee en de versies. Een groot verschil is dat er bij alle apparaten het woord “Mobile” in de user agent staat. Waardoor de iPad ook als klein apparaat gezien kan worden. Om toch een grote variant te laten zien kan er gecontroleerd worden op de combinatie “iPad” en “Mobile”. Als deze trend zich voordoet met andere producten dan moeten die producten ook toegevoegd worden in de database.

Voorbeelden van iOS user agents: Apple iPad Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 Apple iPhone Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 Apple iPod Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 11

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Windows phone De telefoons waar de Windows phone software op draait heeft dezelfde functionaliteit als bij Android. De browser kan zowel de desktop variant als de mobiele variant te tonen van een website. Om een windows telefoon te detecteren kan gezocht worden op het sleutelwoord ‘“Windows Phone”.

Voorbeelden van Windows phone user agents: Lumia 800 / 7.5 show as mobile Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; NOKIA; Lumia 800) Lumia 800 / 7.5 show as desktop Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; XBLWP7; ZuneWP7)

Desktop De user agents van de desktops zijn minder belangrijk als je volgens het principe ontwikkeld dat er eerst naar mobiele apparaten gekeken wordt. Als die vervolgens niet gedetecteerd worden kan de desktop versie getoond worden.

Voorbeelden van Desktop user agents: Chrome 16.0.912.63 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7 Safari 5.1.2 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.52.7 (KHTML, like Gecko) Version/5.1.2 Safari/534.52.7 Firefox 9.0.1 Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3 Opera 11.5 Opera/9.80 (Windows NT 6.1; U; nl) Presto/2.9.168 Version/11.50

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 12

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Internet Explorer 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; .NET4.0E Internet Explorer 8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)

Waarop kan gedetecteerd worden of het een mobiel apparaat is? Het detecteren voor de meest gebruikte apparaten kan op een aantal sleutelwoorden. Er wordt eerst gekeken naar de mobiele sleutelwoorden om te kijken of het een mobiel apparaat is, zo niet dan word de desktop versie getoond. De volgende sleutelwoorden horen bij mobiele browsers: 1. Mobile 2. Android 3. Phone De volgende sleutelwoorden mogen niet voorkomen bij mobiele layout: 1. Tablet 2. iPad

Voordelen Gebruiker kan in de browser zelf kiezen of het de desktop versie ontvangt in plaats van een mobiele versie. (Android en Windows phone). Resolutie onafhankelijk waardoor kleine apparaten met een grote resolutie een mobiele versie ontvangen.

Nadelen Als nieuwe apparaten afwijken van de sleutelwoorden die geanalyseerd zijn zullen deze toegevoegd moeten worden aan het filter.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 13

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Snelheid Bezoekers en zoekmachines hechten veel waarde aan de snelheid waarmee de websites worden geladen. Dit blijkt wel uit de aandacht die bijvoorbeeld Google besteedt met Page Speed. Op Google IO 2011 verklaart Google dat de laadtijd van een pagina direct invloed heeft op hoeveel gebruikers de pagina gaan gebruiken en dat ze daarom de laadtijd meenemen in de page rank. De laadtijd is zeker belangrijker bij mobiele apparaten omdat die verbindingen langzamer zijn dan vaste verbindingen.

Responsive images Als een website op een apparaat met een klein scherm bekeken wordt (bijvoorbeeld een telefoon) dan is het niet nodig om de volledige resolutie aan te bieden. Uit onderzoek van Jason Grigsby (Responsive IMGs) is gebleken dat er 80% bespaard kan worden om de afbeelding aan te leveren die aansluiting heeft bij de resolutie van het apparaat. De afbeeldingen kunnen op verschillende manieren geoptimaliseerd worden voor de verschillende apparaten. Dit kan zowel gebeuren op aanvraag bij een bepaalde resolutie of bij een aantal voorgedefinieerde resoluties.

Voordelen 1. 2.

Gebruikers krijgen sneller de afbeeldingen te zien als ze met een lagere resolutie naar de website toe gaan. Gebruikers met mobiele verbindingen besparen data als ze met een lagere resolutie naar de website toe gaan.

Nadelen 1. 2.

Meer schijfruimte nodig op de server Er moeten verschillende versies van afbeeldingen gemaakt worden door de server of de programmeur.

Cache manifest Een manifest zorgt er voor dat bepaalde bestanden in de cache worden opgeslagen, zodat deze niet opnieuw gedownload hoeven te worden. Doordat het niet opnieuw gedownload hoeft te worden is de laadtijd van de pagina sneller. Als de layout van de website in de application cache word opgenomen krijgt de gebruiker ook direct de basis layout van de website, waardoor het voor het gevoel sneller gaat. Een voorbeeld van het toevoegen van een manifest is Gmail. Google heeft 3 seconden tijdwinst geboekt door het manifest toe te voegen bij de mobiele versie. Op de volgende pagina staat een voorbeeld van een manifest.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 14

Nosize nl multimedia oplossingen

Hoe kan een website geopƟmaliseerd worden voor verschillende apparaten?

Implementatie in html: <html manifest=”example.appcache”> Implementatie htaccess AddType text/cache-manifest .appcache Cache manifest bestand example.appcache CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached ‘master entries’. CACHE: /favicon.ico index.html stylesheet.css images/logo.png # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html De volgende sleutelwoorden worden als volgt gebruikt: CACHE: De bestanden die onder cache staan moeten worden opgeslagen. NETWORK: De bestanden die onder network staan worden altijd gedownload. FALLBACK: De bestanden die onder fallback staan zullen getoond worden wanneer de download bron niet bereikt kan worden.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 15

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

In het manifest bestand staat altijd een versienummer. Het versienummer is nodig als images/logo.png gewijzigd wordt maar de bestandsnaam hetzelfde blijft. De afbeelding bij de gebruiker wordt namelijk niet opnieuw gedownload als het cache bestand ongewijzigd blijft. Bij het wijzigen van het versienummer zal de browsers herkennen dat er iets veranderd is in het manifest en zal de browser de bestanden opnieuw downloaden.

Voordelen Bij de tweede hit vanaf dezelfde browser zal de website sneller geladen worden. Gebruikers met mobiele verbindingen besparen data.

Nadelen Programmeur kan het cache manifest over het hoofd zien waardoor nieuwe versies van bestanden niet veranderen bij de gebruiker.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 16

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Conclusie en aanbeveling Om een website optimaal te laten werken zal er gebruik gemaakt worden van de volgende methodes voor de visuele aspecten: Media queries (CSS3) en aanpassen op user agent. Waarbij aan de hand van de user agent bepaald wordt welke layout geladen moet worden. Vervolgens kan via de media queries bepaald worden hoe de vlakverdeling verdeeld moet worden voor de desktop versie. Er is niet gekozen voor adapt.js omdat dit te veel vertraging oplevert met het downloaden en verwerken van de website. Om de website zo snel mogelijk te laten werken zal er gebruik gemaakt worden van responsive images en cache manifest. Deze technieken vullen elkaar aan waarbij cache manifest er voor zorgt dat de statische bestanden gecached worden. De bestanden die in het cache staan zullen afhankelijk zijn van de responsive images waardoor er een aantal manifesten ontstaan voor een bereik van resoluties.

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 17

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Bibliografie Mediaqueri opgeroepen op December 11, 2011 van Mediaqueri.es http://mediaqueri.es/ Forget responsive web design opgeroepen (Januari 31, 2011) op November 21, 2011 van Csswizardry: http://csswizardry.com/2011/01/forget-responsive-web-design/ Responsible responsive images (November 9, 2011) opgeroepen op November 21, 2011 van Adactio: http://adactio.com/journal/4997/ Jason Grigsby - Responsive IMGs (September 27, 2011) opgeroepen op November 21, 2011 van Cloudfour: http://www.cloudfour.com/responsive-imgs/ Adaptive or Responsive Design (Januari 24, 2011) opgeroepen op December 11, 2011 van Posterous http://pgdev.posterous.com/adaptive-or-responsive-design Thoughts About Responsive Design (Augustus 15, 2011) opgeroepen op December 11, 2011 van Van Seo Design http://www.vanseodesign.com/web-design/thinking-responsive/ Responsive Web Design (Mei 25, 2011) opgeroepen op December 11, 2011 van A list apart http://www.alistapart.com/articles/responsive-web-design/ Mobile browser cache limits, revisited (Juli 12, 2011) opgeroepen op December 11, 2011 van Yahoo user interface blog http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/ iOS 5 Top 10 Browser Performance Changes (Oktober 12, 2011) opgeroepen op December 11, 2011 van Blaze http://www.blaze.io/mobile/ios5-top10-performance-changes/ Understandig mobile cache sizes (Juli 12, 2011) opgeroepen op December 12, 2011 van Blaze http://www.blaze.io/mobile/understanding-mobile-cache-sizes/ Staffanstorp opgeroepen op December 11, 2011 van Staffanstrop http://staffanstorp.se Optimising for High Pixel Density Displays opgeroepen op December 12, 2011 van Menacing Cloud http://menacingcloud.com/?c=highPixelDensityDisplays

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 18

Nosize nl multimedia oplossingen

Hoe kan een website geopĆ&#x;maliseerd worden voor verschillende apparaten?

Responsive webdesign op basis van context en behoeften (November 28, 2011) opgeroepen op December 12, 2011 van Frankwatching http://www.frankwatching.com/archive/2011/11/28/responsive-webdesign-op-basis-van-contexten-behoeften/ Tweakers opgeroepen op December 11, 2011 van Tweakers: http://tweakers.net Tweakers opgeroepen op December 11, 2011 van Tweakers: http://tweakers.mobi Wurlf opgeroepen op December 17, 2011 van Sourceforge: http://wurfl.sourceforge.net/ About MobileESP opgroepen op December 17, 2011 van MobileESP: http://blog.mobileesp.com/?page_id=2 960 Grid System opgeroepen op December 18, 2011 van 960 Grid System: http://960.gs/ Page speed opgeroepen op December 19, 2011 van Google Code: http://code.google.com/intl/nl/speed/page-speed/ Optimising for High Pixel Density Displays opgeroepen op December 31, 2011 van Menacingcloud: http://menacingcloud.com/?c=highPixelDensityDisplays Adapt.js opgeroepen op December 31, 2011 van 960: http://adapt.960.gs/ Combining meta viewport and media queries (September 14, 2010) opgroepen op December 31, 2011 van Quirksmode: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html Media Queries W3C Candidate Recommendation (Juli 27, 2010) opgeroepen op December 31, 2011 van W3 http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/ Handset detection opgeroepen op Januari 5, 2012 van Handset detection: http://www.handsetdetection.com/ Detect mobile browsers opgeroepen op Januari 5, 2012 van Detect mobile browsers: http://detectmobilebrowsers.mobi/ Responsive illustration opgeroepen op Januari 6, 2012 van This mans life: http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

Glenn Vlekke - 0805372 - Mobile life - Toegepast onderzoek

Pagina 19