Kennispresentatie groep 4 - Fludism
David Hutten, Jonathan Marchal & Bas van Agten
Intro Tegenwoordig hebben we steeds meer apparaten om websites te bereiken. Het ideale hieraan is dat er altijd wel een optie is om naar een website te browsen, zowel thuis als onderweg. Echter is hierbij ook een dilemma ontstaan. De resoluties en formaten van de schermen zijn steeds meer gaan variëren. En de komst van touchscreen navigatie heeft het hier ook niet makkelijker op gemaakt. Hierdoor werden er problemen ondervonden over de weergave van websites. Sites die niet paste of te klein werden, maar ook website die niet goed weergegeven werden op de schermen. In het begin werd het geaccepteerd en creëerde de grote namen vaak een mobiel platform of een mobiele website om het beter bereikbaar te maken. Om dit probleem op te lossen zijn ontwerpers en developers met het volgende gekomen.
Fluidism Wat dit inhoudt is eigenlijk dat een website zich vloeiend aanpast aan de resolutie waarin de site getoond wordt. Dit doet het doormiddel van het aanpassen van de content elementen binnen een site. Zo zorg je er zo voor dat je website altijd gevuld is met content en je geen last meer hebt van enorme witruimtes aan de zijkanten en scrollen van links naar rechts. Als deze techniek goed uitgevoerd wordt zorgt het er ook voor dat een website gebruiksvriendelijker wordt en beter bereikbaar is.
Fixed vs Fluid Om het verschil tussen Fixed en Fluid design beter te illustreren zal ik aan de hand van deze afbeeldingen uitleggen wat het verschil is. Bij fixed design zijn alle elementen bij alle schermresoluties altijd exact dezelfde grootte. Dit wordt uitgedrukt in pixels. Bij Fluid design wordt de grootte van een element bepaald in percentages en is deze dus verschillend per resolutie.
Termen Fluidism is eigenlijk de overkoepelende namen van een paar andere noemers. Dit zijn de volgende: Liquid design Liquid design is het feit dat de wrappers zich aanpassen in een bepaald percentage zonder hierin grenzen te hebben. Dus de wrappers blijven op hun plaats, maar de groei van deze wrappers is niet beperkt. Elastic design Dit is eigenlijk het zelfde als liquid, maar hierin zijn er bepaalde grenzen vast gesteld. Dus als de resolutie groter wordt dan een bepaalde verhouding stopt het met groeien of krimpen. Hierdoor heb je meer controle over de compositie en zullen er minder fouten optreden. Responsive design Bij Responsive design wordt de content verplaats van plek. Dit gebeurt meestal door een grid systeem. Als de vakken dan niet meer naast elkaar passen wordt de indeling ervan verandert. Dit houdt meestal in dat het onder elkaar wordt geplaats. Maar het kan ook zijn dat sommige elementen gewoon verdwijnen als het te klein wordt. Dit zijn meestal afbeeldingen of videoplayers. Combinatie Maar in de meeste gevallen zal je tegenwoordig een combinatie van deze begrippen binnen een site vinden. Dit is meestal de combinatie tussen elastic en responsive. Hierbij groeit het grid aan de hand van de resolutie en bij bepaalde waarde wordt de website heringedeeld. Hiermee heb je de meeste controle over wat de gebruiker te zien krijgt op een visueel aantrekkelijke manier.
Voordelen - Het kan gebruiksvriendelijker zijn omdat het zich aanpast aan de gebruiksbehoefte. - De hoeveelheid extra witruimte is tussen de verschillende browsers en schermen hetzelfde, wat visueel aantrekkelijker kan zijn. - Als het goed ontworpen is dan kan het de horizontale scroll bar weghalen uit lagere resolutie schermen. - Het past zich aan, aan de schermresolutie. - Bij juiste toepassing responsive kan de zelfde site makkelijker als mobiele site fungeren door langwerpige navigatie. - Geen noodzaak voor meerdere websites.
Nadelen - De ontwerper heeft minder controle over wat de gebruiker ziet en kan hierdoor opmaak problemen over het hoofd zien. - Afbeelding en video moet mogelijk op verschillende breedtes gezet worden om op elk scherm goed uit te komen. - Met enorm hoge resoluties, kan er een te kort aan content ontstaan op het scherm. Wat het visueel minder aantrekkelijk maakt. (liquid design, geen elastic) - Werkt niet goed met gecompliceerde visuele websites. - Als het niet goed toegepast wordt kunnen er visueel onaantrekkelijke situaties ontstaan. - Is meestal meer werk om te creëren dan fixed.
Onderzoek Uit onderzoek van Telecompaper blijkt dat in het eerste kwartaal van 2012 bezat 34%(2010)> 56 procent van de Nederlanders een smartphone en al 17% van de Nederlanders zouden inmiddels een tablet gebruiken. Dit blijkt uit cijfers van marktonderzoeker Intomart GfK. En 40% procent van de televisies is een smart tv. De designwereld is in korte tijd enorm veel veranderingen doorgegaan en zal altijd blijven veranderen. Aan ons als UXD om mee te gaan met deze veranderingen en ons aan te passen aan de ontwikkelingen. Fluid-design is enorm in ontwikkeling omdat er moet worden vormgegeven voor de tablets, smartphones en smartTVs. Er komen steeds meer mensen die websites bekijken op een van deze apparaten en daarom is het voor ons van belang om aan deze stijgende behoefte te voorzien.
Barack Obama Een goed voorbeeld van een website die uitstekend gebruik heeft maakt van fluid design is de website van de campagne die Barrack Obama voert. De website is vormgegeven voor PC, tablet en smartphone en komt op elke pagina op zijn eigen manier tot zijn recht. Doordat de containerstructuur wordt aangepast aan de hand van welke resolutie je apparaat is. En elementen zijn zo vormgegeven dat de website gemakkelijk navigeerbaar blijff, afhankelijk van welk apparaat je gebruikt. Je ziet dat je met fluid-design het beste uit je apparaat haalt en de beste User-Experience creëert.
Fork.com Steeds meer websites maken gebruik van fluid design, designers zien steeds meer het voordeel voor het designen van fluid desginwebsites. Daar tegenover staat natuurlijk het ouderwetse fixedvormgeven, wanneer je op deze manier naar je pagina’s kijkt op bijvoorbeeld je smartphone. Laad de pagina langzaam, past de website zijn resolutie niet aan en maakt het geen gebruik van de mogelijkheden die je hebt op een smartphone of een tablet, waarmee je met je vinger navigeert in plaats van je muis/pentablet. De toekomst ligt uiteraard in fluid-design en vormgeven op de fixed manier is tegenwoordig eigenlijk not done.
Patterns Responsive design is geen techniek maar een samenraapsel van verschillende technieken. Die je samen kunt gebruiken om een flexibele website te presenteren. Responsive en fluid design is niet alleen je resolutie en container structuur aanpassen aan je apparaat. Er zijn technieken die we ook al op school eerder hebben besproken die toegepast worden. Luke Wroblewski(LukeW is an internationally recognized digital product leader who has designed or contributed to software used by more than 700 million people worldwide. Luke is the author of three popular Web design books (Mobile First,Web Form Design & Site-Seeing: A Visual Approach to Web Usability) ) schrijft op zijn in een artikel op zijn website over Off Canvas. Er is veel variëteit op het gebied van responsive design lauyout patterns, er zijn daarbij ondertussen ook al wat typische standaarden ontwikkeld/ontstaan. De meeste fluiddesign proberen alles verticaal op de kleine schermpjes van een smartphone te krijgen. Maar je kunt natuurlijk ook gebruik maken van de ruimte die buiten het scherm valt van wat je ziet. Dit pattern zorgt ervoor dat je heleboel extra ruimte creëert voor het kleine schermpje dat je smartphone heeft. We zouden onszelf limiteren als we ons beperken tot het vormgeven van het scherm dat we zien. Er is altijd meer ruimte off-screen! Zoals het plaatje hiernaast laat zien bevind content zich hier buiten het zichtbare scherm. Het houdt content of bijvoorbeeld navigatie buiten het scherm tot het moment dat de gebruiker de content nodig heeft en oproept.
Facebook Dit patroon wordt al slim toegepast op verschillende mobiele websites neem bijvoorbeeld Facebook die slim gebruik maakt van dit off-screen pattern. Ze houden de navigatie buiten beeld totdat de gebruiker dit element oproept. Ook de website van Barack Obama maakt hier van gebruik.
Bottom-nav Dit pattern zorgt er simpelweg voor dat je navigatie naar de footer van je mobiele scherm gaat. Dit is voor een website niet handig maar voor een mobiele website erg handig. Bij een mobiele site is het prima om je ruimte onderaan een pagina te gebruiken voor de navigatie. Naar beneden scrollen is een natuurlijke beweging die bij een mobiele site zeer gewoon is. Een nadeel hieraan is dat de gebruiker de navigatie niet direct bij de hand is en de gebruiker misschien moet gaan zoeken.
Keith Dawson Keith Dawson vertelt in zijn quote dat webdesign al erg ver is en er al veel bestaat. Het wiel hoeft niet telkens opnieuw uitgevonden te worden maar kan prima herbruikt worden.
Ethan & John Nu jullie weten wat Fluid design allemaal inhoud ga ik wat dieper in op de mogelijkheden van Fluid Design voor de ontwerpers en bouwers. Dit doe ik aan de hand van de expertise van Ethan Marcotte en John Allsopp. Ik zal eerst even wat vertellen over deze professionals. Beide heren zitten al lang in het webdesign circuit. Ze ontwerpen en bouwen websites en hebben beide een passie voor css, wat aan de basis ligt van het ‘fluid design’. Met deze passie en jarenlange ervaring hebben ze een leidersfunctie verworven binnen de wereld van fluid-/responsivedesign. De kennis die ze hebben over dit onderwerp verspreiden ze door middel van lezingen, het houden van seminars en schrijven via digitale en geprinte media. http://ethanmarcotte.com/ http://johnfallsopp.com/
Ethan Marcotte Ethan heeft een eigen blog, de ‘Unstoppable Robot Ninja’ waar hij regelmatig interessante artikelen post over webdesign. Ook kan hij op twitter gevolgd worden. Daarnaast heeft hij een aantal boeken geschreven waaronder ‘Responsive Web Design’. Dit boek schets een goed overzicht van de mogelijkheden binnen ‘fluid design’ en is een goede basis voor designers die hieraan willen beginnen. http://unstoppablerobotninja.com/ Responsive Web Design van Ethan Marcotte ISBN 978-0-9844425-7-7
John Allsopp John Allsopp heeft net zoals Ethan een aantal artikelen geschreven over ‘fluid web design’ en is erg nauw betrokken met de ontwikkeling van webdesign. Waar Ethan vooral bezig is met de mogelijkheden van het huidige ‘Fluid Design’, kijkt John meer naar de toekomst, wat er gaat komen, en waar de mogelijkheden liggen. Dit zet hij kracht bij als één van de oprichters van het in 2004 opgerichte ‘Web Directions’ conference. Tijdens ‘Web Directions’ komen leidende experts binnen de web industrie bij elkaar om trends en hun visie op deze wereld te delen. http://www.webdirections.org/
TV versus radio John Allsopp legt Fluid Design uit aan de hand van een ouder voorbeeld van veranderingen in media. Hij verwijst naar de tijd van de TV die in het begin “Radio with pictures” werd genoemd. Hij legt dit op de volgende manier uit: “Because radio required a voice over to describe what listeners couldn’t see, early television drama often featured a voice over, describing what viewers could”. Met andere woorden, op TV werd eenzelfde manier gebruikt voor het overbrengen van content die bekend was van de radio, maar door de mogelijkheden van het nieuwe medium was dit overbodig.
Web versus print En zo legt hij nu ook het medium print en web tegenover elkaar. Hierover zegt hij “It’s the tension between an existing medium, the printed page, and its child, the web. And it’s time to really understand the relationship between the parent and the child, and to let the child go its own way in the world”. Hiermee doelt John op het feit dat we nog veel te veel vasthouden aan een vaste grootte die komt uit het print tijdperk en de nieuwe mogelijkheden van het web moeten uitbuiten, oftewel het feit dat de weergave een dynamische grootte heeft. Artikel: http://www.alistapart.com/articles/dao/
Fluid design Ethan legt uit dat bij het ontwerpen van ‘Fluid Design’ met drie onderdelen rekening gehouden moet worden. Hij deelt het in in ‘Fluid Grids’, ‘Flexible Images’ en ‘Media Queries’. Fluid Grids slaat op liquid of elastic design en betekent de elasticiteit van de content kaders op de website. Bij het ontwerpen kan rekening gehouden worden met de breedte en hoogte van deze elementen en de marges die het hanteert. Om dit flexibel te maken worden deze maten altijd in percentages uitgedrukt. Een content kader baseert zijn afmetingen dus op de grootte van de browser. Naast Fluid Grids kan de ontwerper zich ook bezig houden met flexible images. Net zoals de content kaders worden de maten van de afbeeldingen via percentages bepaald door de grootte van de browser. Met deze twee onderdelen heb je veel invloed op de rekbaarheid van de website. Fluid grids http://www.alistapart.com/articles/fluidgrids/ Flexible images http://unstoppablerobotninja.com/entry/fluid-images Media Queries http://www.alistapart.com/articles/responsive-web-design http://www.w3.org/TR/CSS21/media.html#media-types
Responsive design Met het laatste onderdeel dat Ethan aankaart heeft de ontwerper invloed op de responsiviteit van de website. Door middel van Media Queries kan je de volledige layout aanpassen aan verschillende groottes. Media Queries zijn gebaseerd op het aangeven van een bepaalde reikwijdte. In een Media Querie kan je de layout bepalen aan de hand van verschillende vormen van media types, maar ook minimale of maximale groottes van de browser. Hierbij wat voorbeelden van mogelijke queries. @media @media @media @media
screen {...} handheld {...} projection {...} braille {...}
Hier zie je hoe je per medium type de layout kan bepalen. Op de plek van de puntjes kan per medium de vormgeving van de elementen bepaald worden. @media all and (min-width: 768px) {...} @media handheld and (max-width: 480px) {...} Naast de layout bepalen per medium kan de reikwijdte van de Media Queries ook bepaald worden aan de hand van de breedte van de browser. @media handheld and (min-device-width: 480px) and (orientation: landscape) {...} Ook zijn er nog andere options waarmee je de reikwijdte van de Media Queries kan bepalen waardoor je nog meer controle hebt over de responsiviteit van je website. Hier zullen in de toekomst alleen maar meer opties aan toegevoegd worden indien er meer mogelijk is en er meer variatie zal ontstaan in digitale weergave mogelijkheden.
Fluid sketching Met deze sheets kan je schetsend weergeven hoe elementen zich verhouden in verschillende groottes. Digitale Sketch sheets van Denise Jacob’s: http://jeremypalford.com/arch-journal/responsive-webdesign-sketch-sheets Analoog sketchbook: http://appsketchbook.com/products/responsive-designsketchbook
Ter inspiratie Inspiratie wireframes van responsive layouts hoe de elementen zich verhouden tussen desktop en mobiel. http://www.thismanslife.co.uk/projects/lab/ responsivewireframes/#desktop
960 Joni Korpi ontwikkelde een dynamische versie van het oude 960 grid system (fixed layout) voor ‘fluid web design’ en noemt dit het Golden Grid System. http://goldengridsystem.com/ Paravel, een driemans web design bedrijf heeft ook een eigen dynamische grid gebaseerd op het oude 960 grid, genaamd foldy960. Er zijn nog tal van andere voorbeelden voor dynamische grids, waarvan er ook een heleboel gebaseerd zijn op het oude 960 grid.
Grid calculator Fluid Grids is een online calculator die aan de hand van wat ingevoerde gegevens een fluid based css voor je opmaakt. http://csswizardry.com/fluid-grids/
Respond.js Niet alle oudere browsers supporten responsive designs. Scott Jehl heeft een javascriptje geschreven, genaamd respond.js die ervoor zorgt dat responsiviteit ook werkt op browsers die dit niet ondersteunen. Waaronder Internet Explorer 6 tot en met 8 en Firefox 3. https://github.com/scottjehl/Respond
Screenfly Met screenfly kan je websites via een makkelijke manier op standaard groottes bekijken en testen. In dit programma zijn de standaard groottes voor computerschermen, tablets, smartphones en zelfs televisieschermen opgenomen. http://quirktools.com/screenfly/
Fluid toekomst Zoals ik al eerder zei is John erg gefocust op de toekomst van Fluid Design. Hij merkt dan ook op dat Fluid Design vooral gefocust is op kleinere resoluties dan de standaard. Het speelt vooral in op nieuwe mediums zoals tablets en smartphones die het aantal verschillende resoluties erg verhoogd. Echter raadt hij aan ontwerpers ook rekening te houden met grotere resoluties. Vaak wordt er nu nog een maximale breedte gehanteerd, maar ziet hij hierin ook een grote kans voor fluid design. Hij geeft als voorbeeld het medium tv die kan gaan voorzien in het gebruik van veel hogere resoluties dan nu gebruikelijk is.
A Dao of web design John schreef voor ‘A list apart’ een artikel waarin hij oude chinese filosofie van ‘Tao Te Ching’ gebruikte om verandering aan te geven binnen de webdesign. Zo ook de volgende geschrifte: “A newborn is soft and tender, A crone, hard and stiff. Plants and animals, in life, are supple and succulent; In death, withered and dry. So softness and tenderness are attributes of life, And hardness and stiffness, attributes of death.” Tao Te Ching; 76 Flexibility Artikel: http://www.alistapart.com/articles/dao/
Stelling Fixed layouts zijn achterhaald en dienen niet meer gebruikt te worden. Fluiddesigns zijn de toekomst. Onze mening: “Fixed designs zijn sneller en makkelijker te creëeren en dus automatisch goedkoper. Zodra je met statistieken kan aanwijzen dat er geen behoefte is aan een fluiddesign kan de kwestie geld of tijd een gegronde reden zijn om te kiezen voor een fixed layout. Echter, in deze tijd, met onze manier van media consumptie is dit scenario al bijna ondenkbaar geworden.“
