een responsive pagina maken in HTML5 en CSS3

met Dreamweaver CS6

Responsive Design is een techniek waarbij de presentatie en vormgeving van een webpagina bepaald wordt door de afmeting van de scherm en soms zelfs door het device (het apparaat) waarmee de pagina wordt bekeken.
Met deze tutorial maak je een pagina die responsive is. Een deel daarvan wordt geregeld met media queries: het opvragen van de breedte van het venster. voor grote vensters is er ook nog een een deel van het ontwerp fluïd gemaakt. Het beoogde resultaat zie je hier.

stap 1: het resultaat (00:02:44)

Je ziet hier het resulaat van deze reeks filmpjes. Er wordt een responsive webpagina gemaakt. Deze zal bij verschillende grootes van het venster de webpagina anders weergeven. In het kader van deze tutorial worden de verschillen aangedikt.
Ook op een iPad zie je verticaal of horizontaal een andere weergave.
In Dreamweaver CS6 kun je de verschillen ook zien met gelijktijdige weergave van verschillende vensters. Maar ook met Safari is dat mogelijk. Je kunt de venstergrootte onder de bladwijzers instellen. Bijvoorbeeld voor een iPhone in portretmodus met: javascript:self.moveTo(600,0);resizeTo(320,480);

stap 2: de inhoud (00:11:48)

De site wordt in Dreamweaver gedefinieerd. Dit is erg belangrijk omdat daarmee de betrokken bestanden kunnen worden afgebakend.
De inhoud wordt in het document gestopt. Er komt een deel tussen de header-tags; een ander deel tussen de article-tags, en twee delen in de beide aside-delen.
Voor wie het nog niet weet: in het article is bij deze pagina een grote opsommingslijst. Dat is immers eigen aan het recept. We werken met en ongeordende lijst. Er vindt dus geen nummering plaats. In een van de asides komt ook een afbeelding van het gerecht te staan.
Mocht je bijzondere tekens tegenkkomen dan kun je op http://www.css-voorbeelden.nl/artikelen/lijsten/artikelen-063.html of op of op http://www.utf8-chartable.de/unicode-utf8-table.pl?number=1024&htmlent=1 de juiste UTF-8 code of d ejuiste MTNL-entiteit vinden.

stap 3: menu en wrapper (00:05:32)

De inhoud wordt in deze video afgerond. Er komt een alles omvattende div die de id wrapper (inpakpapier) meekrijgt. Deze zal er na de vormgeving voor zorgen dat alles midden op de pagina komt en de gewenste breedte krijgt.
Het navigatiemenu is een ongeordende lijst van de menuopschriften. Deze is op verschillende manieren vorm te geven met stijlbladen, wat we verder in de tutorial zullen doen.
In deze beide laatste video's is veel aandacht besteed aan de structuur en de semantiek van de webpagina. Bij het ontwerp van webpagina's staat de inhoud dan ook centraal. Allemaal eht gevolg van de begrijpelijke trend 'mobile first'.

stap 4: verscheidene stijlbladen (00:10:17)

De vormgeving wordt met een apart stijlblad gerealiseerd. Er worden slechts een paar selectoren gebruikt om wat vormgeving op de #wrapper en de header uit te voeren. Slechts de breedte van de wrapper en de achtergrondkleuren worden ingesteld.
Voor meerdere vensterbreedtes een apart stijlblad gemaakt. Daarin verschillen ze demonstratief slechts in de breedte en de achtergrondkleur van de header.
De desktop-versie heeft geen vaste breedte, maar een breedte, die als een percentage van het venster wordt opgegeven.
Als je die drie stijlbladen vervolgens ook koppelt, dan blijkt altijd het laatste stijlblad de regels van de voorgaande stijlbaden te overschrijven: cascading.

stap 5: media queries (00:03:42)

Als er meerdere stijlbladen zijn, overschrijft de laatste de voorgaand.
Media queries schakelen stijlbladen aan als er aan bepaalde voorwaarde wordt voldaan. In Dreamweaver CS6 kun je media queries via een venster aanschakelen. In de voorbeeld worden de bestaande stijlbladen ingevoegd.
Omdat het eigenlijke stijlblad was weggenomen, wordt deze weer voor de media queries toegevoegd.

stap 6: media querie iPad (00:05:21)

Voor een iPad moeten er in de querie aanvullende eisen worden toegevoegd om het verschil tussen de staande en de liggende (portret en landscape) positie van het apparaat door te voeren. Ze zijn te vinden op http://css-tricks.com/snippets/css/media-queries-for-standard-devices.
Voor de portretversie luidt deze bijvoorbeeld:
<link href="stijlen/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

stap 7: opmaak header (00:06:50)

De header wordt opgemaakt.
Het valt op dat er een ruimte valt tussen de header en de bovenkant van het venster.
Om dit te verhelpen worden marge en padding van html, body, header en h1 op 0 gezet.
dit moet als eerste in het stijlblad worden opgenomen.
Wil je daarna toch een tussenruimte tussen de bovenzijde van het venster en de tekst van de h1, dan verhoog je de padding van de h1-tag.
Ook wordt er en webfont van Google voor het font ingezet.
Ook moet je opmerken dat deze wijzigingen alleen in het basisstijlblad hoeven worden opgenomen. Omdat in de stijlbladen van de mediaqueries niets hierover staat, worden deze eigenschappen automatisch ook in de andere stijlbladen doorgevoerd.
Daarom kunnen er ook wel herhaalde eigenschappen in die stijlbladen worden weggehaald. Alleen dat wat verandert in de querie is nodig.

stap 8: venstergrootte Safari (00:03:38)

Als de pagina voor de versie van de portretversie van de iPad veel inhoud krijgt komt er een scrollbalk. In de oudere versies van Safari komt er dan een scrollbalk, zodat er minder ruimte is voor de inhoud. Het gevolg daarvan is dat in Safari op de desktop er dan het stijlblad voor de iPhone in werking wordt gesteld.
Op een iPad treedt dit probleem niet op. De scrollbalk is daar veel dunner maar hij ligt daar als het ware ook boven de inhoud. daardoor wordt het venster voor de inhoud dus niet smaller.
Om dit in Safari op de computer op te lossen, kun je naar de bladijzer bewerking gaan en daar de breedte van 768 px ophogen naar 783px: de breedte van de scrollbalk (15px) dus toevoegen:
javascript:self.moveTo(0,0);resizeTo(783,1024);

stap 9: afbeeldingen plaatsen (00:07:49)

Op de achtergrond van de header komt een afbeelding. Binnen Dreamweaver selecteer je binnen de juiste stijlblad de header in het venster CSS-stijlen. Een klik op het potloodje brengt je in het bewerkvesnter. daarin kun je in de categorie Achtergrond de afbeelding kiezen. Vaak wil je niet dat die zich herhaald, zodat je kiest voor de optie no-repeat. Ook kun je zowel verticaal als horizontaal de positie instellen.
De geplaatste afbeelding in de weergave voor iPhone blijkt te breed te zijn. Met wat aanpassingen in de code kun je die passend krijgen. Allereerst verwijder je de attributen voor width en height in de html. Je voegt in de img-tag wel een klasse toe. Hier is gekozen voor de klasse 'passend'. In het stijlblad maak je dan een selector '.passend' met als eigenschap max-width die je de waarde 100% geeft.

stap 10: schaduw bij tekst (00:06:16)

De header tekst is door de achtergrondafbeelding slecht leesbaar. de kleur wordt aangepast en er wordt een schaduw toegevoegd. De eigenschap voor schaduw bij tekst is de text-shadow. Deze heeft 4 waarden nodig: horizontale verschuiving, verticale verschuiving, grootte en kleur. Om de kleur transparantie te geven geven we de kleur een rgba-waarde mee. De a staat voor het alpha-kanaal en is een getal tussen 0 en 1. Gebruik daarin wel de punt, want de komma duidt een nieuw getal aan.
text-shadow: 0 0 15px rgba(255,255,255,0.7);

Ook de gewone tekst in de header wordt hier met padding gepositioneerd.

stap 11: verticaal menu (00:08:58)

Eerst wordt er opgemaakt voor het mobile device: mobile-first.
Het HTML-opmaak van het menu bestaat uit een ongeordende lijst van linken: nav - ul - li - a. Hierdoor kun je op verschillende onderdelen van het menu je opmaak realiseren.
Allereerst wordt van de nav de achtergrond ingesteld.
Daarna worden de bullets en het inspringen van de menu-items verwijderd in de nav ul. (Let op dat je dat niet voor de ul doet, want dan zijn alle andere opsommingslijsten ook zonder opsommingsbullets!).
Bij de nav ul zet je dus de list-style-type op none en de padding en de marge op 0.
Vervolgens kun je de nav li een andere achtergrondkleur geven en in dit voorbeeld afgeronde hoeken. De kromming is half zo groot als de hoogte zodat het afgeronde balkjes gaan lijken. Met wat marge aan de onderkant krijg je de linkjes enigszins uit elkaar.
Daarna komt de nav a aan de beurt. Die geef je een color mee, je verwijdert met text-decoration: none; de onderstreping. De line-height krijgt de hoogte, die je voor de linkjes wil instellen, display:block zorgt ervoor dat je niet precies op het woordje hoeft te klikken om te linken, maar het hele balkje klikbaar is.
Dat ga je ook zien als je de roll-over maakt. Als je de achtergrondkleur van de nav li wilt aanpassen voor de roll-over dan maak je een achtergrond kleur voor nav li:hover

stap 12: horizontaal menu (00:08:10)

Voor de staande versie van de iPad is het praktisch om de menuopmaak vanuit de iPhone te kopiƫren. Hierdoor zie je welke bijschrijvingen er gemaakt zijn. Als er voor het nieuwe menu veranderingen zijn, kun je de wijziging aanbrengen. Zaken die hetzelfde moeten blijven kun je verwijderen, want die worden via het stijlblad van de iPhone al doorgevoerd.
Omdat het menu horizontal wordt moet in ieder geval bij de nav li gewerkt worden met float:left. Dit betekent dat de elementen zover als mogelijk links zullen gaan staan en de overige linkjes er rechts naast komen te staan. Ook moet je ze een breedte meegeven.
Als je de tekst in het midden van de linkjes wil, geef de nav li dan ook een text-align met de waarde center mee.

stap 13: horizontaal fluid menu (00:06:31)

In de desktop stijl is de breedte in procenten. Met 4 linkjes kun je dan voor elke link 25% van de breedte nemen. Ware het niet dat de breedte van 1px aan de rechterzijde ook bij de breedte komt. Daardoor past het menu net niet meer en krijg je een verloop.
Om dit te voorkomen wordt het rechterstreepje weggehaald bij de nav li en geplaatst bij de nav a. Hierdoor passen de 4 linkjes weer wel over de hele breedte van de pagina. Dit lukt omdat de nav a een display: block had (via de standaardstijl) en de hele li dus opvult. De rechterrand komt dus tegen de rechterkant van de nav li aan te staan.
We willen ook het laatste rechter streepje weer weghalen. Dat kan natuurlijk met het kenmerk border-right:none. Maar de selector blijkt niet nav a:last-child te zijn. Want daarmee selecteer je feitelijk van elke li de laatste a en is dus overal het rechterrandje weg. De juiste selector is daarom nav li:last-child a. Hiermee wordt van het laatste list-item in de navigatie de a geselecteerd.

stap 14: opmaak article en aside (00:04:42)

Voor de opmaak voor smartphones hoeft er niet zoveel te gebeuren. Je kunt de uitlijning aan de linkerkant afstemmen. Dit gaat via de padding.
Als de padding 2 getallen meekrijgt, dan wordt de verticale en de horizontale padding ingesteld. Door de selector article, aside te kiezen wordt dit zowel voor het article als voor beide asides doorgevoerd.

stap 15: article en aside naast elkaar (00:06:10)

Je kunt het article en de aside naast elkaar zetten. Je geeft ze een kleinere breedte en een float: left mee. Als de float alleen aan het article wort gegeven, geef de aside dat een voldoende linkermarge mee, zodat deze naast het article staat.
Als je de vormgeving op 1 van asides wilt laten toepassen maar niet op de andere, dan kun je een article ook nog een class meegeven en dan daar de stijlregel voor schrijven. Wil je op een geven ogenblik niet meer dat de float voor de volgende elementen opgaat, dan kun je een div toevoegen en deze een clear:both meegeven. Dit element en de daaropvolgende komen dan weer netjes onder de vorige elementen te staan.


stap 16: alles naast elkaar (00:06:28)

Voor de desktop moet nog een opmaak voor de inhoud gemaakt worden.
Alle elementen komen via flost:left naast elkaar en krijgen een relatieve breedte.
Door deze flost lijkt het dat #wrapper geen onthoud meer heeft: zijn achtergrondkleur wordt dus niet meer getoond. Door een folter toe te voegen en deze een clean:flost te geven staat deze zeker onder de asides en het artikel. Hierdoor 'herstel' de #wrapper zich.
Voorzie de footer zelf van inhoud en opmaak. Voor het maken van een verloop kun je bijvoorbeeld kijken op http://gradients.glrzad.com/

stap 17: randen (00:07:01)

De opmaak kan met randen worden versterkt.
Per device kan dat anders.

stap 18: zoekvenster (00:08:49)

Als toetje wordt er in de header een zoekvenster toegevoegd.
In HTML5 kan dat mooi als je de input-tag een type: search meegeeft. De placeholder geeft het venster zijn voorlopige inhoud.
De rest van de video zorgt voor het plaatsen van dit zoekvesnter. Het zoekvenster krijgt position: absolute. Dan kun je met waarden voor right en top, dit element precies naar rechts en boven schuiven. Alleen die positie blijkt dan ten opzichte van de <body> te zijn. Een absoluut element wordt altijd gepositioneerd ten opzichte van het element boven zich dat zelf gepositioneerd is. Tot nu toe is dat er niet en kiest het dus de body.
Om dit op te lossen krijgt de #wrapper een position relative. Hierdoor verplaatst de #wrapper zich niet, maar de elementen daarbinnen kunnen met position: absolute wel precies worden geplaatst.
Tot slot moet de <h1> wat plaats maken voor het zoekvenster. Dit kan met een forsere padding aan de bovenkant.


Als het goed staat deze training al in de Public Map van de Dropbox (of op een andere online plek) en heb je de Public Link al gemaild naar t.denblanken@ma-web.nl.

Extra toevoegeing: responsive lay-outen op een visuele manier in CS6 (00:10:56)

Voor een fluid responsive ontwerp heeft Dreamweeaver CS6 een boilerplate. Je kunt bij het begin van een pagina kiezen voor dynamische rasterlay-out. Er komt dan een menu waarin je voor de 3 devices de breedte het aantal kolomrasters en de afstand daartussen kunt instellen.
Vervolgens klik je in het invoegvenster bij het onderdeel lay-out op de knop Div-tag voor dynamische rasterlay-out.
Geef deze een zinvolle naam! Je begint met de lay-out voor een mobiel en zet alle element dus op een nieuwe regel. Daarna is het praktisch om de elementen met de juiste inhoud te voorzien. Vervolgens ga je naar de weergave voor tablet en je maakt enkele elementen smaller. Doe dit aan de rechterzijde van de elementen. (Als je het aan de linkerzijde doet vergroot je alleen maar de linkermarge!)
Er komt dan ook vanzelf een klein pijltje aan de rechterbovenzijde van de div, waarmee je het element naast de andere laat "floaten".

Wil je hier meer over zien kijk dan op: http://www.youtube.com/watch?v=oODR_-uXpvg of op http://tv.adobe.com/watch/cs6-creative-cloud-feature-tour-for-web/creating-adaptive-designs-using-fluid-grid-layouts-in-dreamweaver-cs6/ van Adobe zelf.