Ontwikkelaars tips
Iedere dag verschijnt hier een nieuwe korte tip bij het Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver die ook op Twitter verschijnt.
- Gif ondersteunt indextransparantie: pixel dekt 0 of 100 procent. Met png heb je alphatransparantie: een beetje doorzichtig kan dan ook.
- Een .png heeft de voorkeur boven .gif en vaak ook boven .jpg. Maar veel mobieltjes ondersteunen .png niet, dan dus toch maar .gif en .jpg
- Begin een tekst met een kort intro met een samenvatting of conclusie van het artikel. Prettig voor de haastige lezer!
- Goede gewoonte: geef een zin max. 15 woorden en een alinea max. 6 regels tekst. Plaats onder een subkop (h2 of h3) niet meer dan 3 alinea's.
- Maak bij voorkeur niet meer dan 1 h1-kop per pagina oftewel 1 hoofdstuk per pagina. Beter voor de lezer en beter voor Google.
- Een -teken tussen 2 zoekwoorden in een bestandsnaam maakt dat het wordt gelezen als 2 woorden. Met een _teken leest het als 1 woord.
- Maak het zoekmachines gemakkelijk: zorg voor schone code en plaats de tekst als eerste in de code en (als het kan) de navigatie pas daarna.
- Zorg dat iedere pagina eigen zoekwoorden heeft die overeenkomen met de tekst. Gebruik die zoekwoorden ook bewust meerdere malen in de tekst.
- Plaats de belangrijkste zoekwoorden in bestandsnamen, de paginatitel, de koppen in de tekst, de namen van links, en natuurlijk in de tekst.
- Liever 1 enkel goed gekozen zoekwoord in de head dan nog 2 erbij zetten die minder goed zijn. Zorg altijd dat ze in de pagina zelf voorkomen
- Laat links altijd openen in hetzelfde venster zodat de lezer terug kan met de back-button, die kent iedereen. En anders, vermeld het erbij.
- Veel bezoekers slaan het menu over en gaan direct door naar het zoekveld. Plaats het zoekveld op de bekende plek rechts bovenin de pagina.
- Een logo staat bij voorkeur in de linkerbovenhoek. Saai, voorspelbaar? Wel duidelijk waar je bent en daarmee gewaardeerd door de bezoeker.
- Een favicon helpt om te zien op welke site je bent. IE zoekt zelfs standaard naar een favicon als je een pagina als favoriet markeert.
- Gebruik ook de bestandsnaam om te tonen waar de lezer zich bevindt. De naam die je hier gebruikt speelt ook mee bij het zoekmachineresultaat
- Lezer en Google zien in de title van de pagina waar ze zijn. Zinvol om in de title de belangrijkste zoekwoorden van de pagina te verwerken.
- Elastic layout doe je eigenlijk alleen voor IE6 (10-20% van de bezoekers) omdat de andere grote browsers standaard al de hele site schalen.
- Lezers haken af als ze te ver van links naar rechts moeten lezen. Hou daarom een max-breedte van 550 pixels aan voor stukken tekst.
- Planning van een site: doelgroep, concept, functioneel ontwerp, interactie ontwerp, storyboard, visueel ontwerp, HTML/CSS, livegang, testen
- Kies Synchroniseren in paneel Bestanden en Dw vergelijkt je lokale en externe bestanden. Je kunt kiezen welke je wilt up- of downloaden.
- Met een herhalingsgebied in een template kan een bepaald element, bv. een li of een p, herhaald worden. Slechts de inhoud is dan bewerkbaar
- Een site die wordt onderhouden in Contribute en templates gebruikt, geeft de bewerkbare delen vrij aan de redacteur, de rest is afgeschermd.
- Met ingesloten templates maak je varianten van de hoofdtemplate, handig als je een ontwerp hebt dat bestaat uit een aantal varianten.
- Bij templates heb je ook optionele gebieden die je laten kiezen in welke afgeleide pagina je bepaalde inhoud wilt tonen of juist verbergen
- In Dreamweaver kan je gebruik maken van templates: wijzigingen in de HTML-code worden dan met 1 klik in alle afgeleide paginas doorgevoerd
- De best practices van #mobileweb op een rijtje bij @W3C: jt.ws/ca
- #mobileweb: zorg altijd dat de desktopversie en de mobiele versie samen onder dezelfde URL staan en thematische consistentie hebben: One Web
- Een andere, uitgebreide validator voor #mobileweb is jt.ws/c9
- Voor #mobileweb heeft het W3C een aparte validator: jt.ws/c8.
- Device targeting voor stylesheets voor mobieltjes kan ook zonder scripting en vind je op jt.ws/c7
- Een alternatieve HTML-pagina voor #mobileweb heeft device targeting nodig: jt.ws/c6
- #mobileweb: voor een goede webpagina op een mobieltje heb je aparte stylesheets nodig en toch bij voorkeur ook een aangepaste inhoud.
- De browser zorgt ervoor dat op iedere afgedrukte pagina de paginatitel, url en datum komt te staan. Ook dit valt buiten jouw controle.
- Omdat de printermarges onbekend zijn, weet je ook niet hoeveel inhoud er op een pagina past. Page-breaks met CSS worden hierdoor ongewenst.
- Over printermarges heb je geen controle, dat regelt de lezer zelf. Als je de body een margin:0 geeft voorkom je wel onnodige extra marges.
- Elementen naast elkaar zijn vaak een probleem bij printen: zet daarom in de stylesheet voor print alle floats op none en positions op static
- In een printversie kan je de navigatie, strepen onder links en (achtergrond)afbeeldingen weglaten. Pixels kan je omzetten naar millimeters.
- Hoe ziet een print van jouw webpagina eruit? Maak een aparte stylesheet voor print en plaats in de link het media-attribuut met waarde print
- Plaats, bij vervanging, de nieuwe favicon dubbel: ook onder een andere naam plus een link in de head jt.ws/c5
- Het voldoet om favicon.ico op het hoogste niveau in de root te plaatsen. In oudere IE-versies moet de lezer de pagina bookmarken.
- Een favicon zal pas in IE zichtbaar zijn als het een echt ico-formaat is. Google op 'favicon generator online' om een favicon te maken.
- Procenten en ems kan je ingeven met decimale waardes, gebruik wel een punt ipv een komma. En kleiner dan een pixel zal het nooit worden :-)
- Markeer niet alleen met een kleur dat een invulveld is vergeten in te vullen: dit kan een probleem zijn voor kleurenblinde bezoekers.
- Pas als tekstvelden en tekstgebieden dezelfde fonts en font-size hebben, ziet een gelijke breedte in ems er in alle browsers ook gelijk uit.
- Voor een textarea zijn cols en rows verplichte attributen. Desondanks kan je met CSS de breedte en hoogte ingeven voor een tekstgebied.
- In formulieritems is het name-attribuut een formcontrole naam, daarom kan in dat geval de waarde verschillen van die van een id.
- Het element label is inline en mag niet los in het element form staan, wel in een fieldset; ook een goede reden om deze vooral te gebruiken
- Voor een button, bijv. een verzendknop, is het beter om een title-attribuut in de inputtag te plaatsen in plaats van een label te gebruiken.
- Ipv een for-attribuut kan je ook in het formulieritem zelf een title-attribuut met als waarde de id-naam van het formulieritem plaatsen.
- Een attribuut 'for' in de labeltag met als waarde de id-naam van het bijbehorende formulieritem, is goed voor de toegankelijkheid.
- Semantiek: met het element legend geef je de titel aan de fieldset, met het element label koppel je een naam (niet id) aan een formulieritem
- Het is een goede gewoonte om in een formulier de velden te groeperen met een of meer fieldsets. Zet zonodig met border: 0 de randen uit.
- Dw geeft het niet als optie maar een invulveld kan background-color: transparent hebben. Je moet het zelf intypen dus let op de spelling.
- Hou er rekening mee dat een mailadres op een webpagina een goede kans loopt op spam. Oplossingen en meer hierover op jt.ws/c4
- Een formulier heeft echt geen tabel nodig voor de layout. De formulieritems kan je met CSS precies zo positioneren als jou het beste uitkomt
- Een hidden field is niet zo verborgen als de naam suggereert. De inhoud ervan wordt niet in de browser getoond maar staat gewoon in de code.
- Het attribuut name is niet toegestaan in de formtag maar hoort wel in de andere elementen in het formulier te staan voor de verwerking ervan
- Safari geeft een ontwikkelmenu vergelijkbaar met Firebug via Voorkeuren, Opera via menu Extra en Chrome via menu Weergave
- Gebruik naast de webdeveloper toolbar ook Firebug om je werk te onderzoeken, de codes te bekijken en fouten op te sporen jt.ws/c3
- De webdeveloper toolbar in Firefox maakt het eenvoudig om je pagina te onderzoeken en biedt ook diverse validators jt.ws/c2
- De validator in Dreamweaver (werkbalk Document, Opmaaktags controleren) kan ook een hele site tegelijk checken.
- In Deamweaver kan je het DocType van een pagina eenvoudig omzetten met menu Bestand, Converteren (File, Convert).
- Is je DocType XHTML 1.0 Transitional en wil je weten of je HTML klopt met Strict? Ga dan in de validator naar More Options Document Type
- De meldingen van de validator zijn zeker in het begin erg cryptisch en soms intimiderend. Weet dat 1 fout vaak meerdere meldingen geeft.
- Het is een goede gewoonte om de grammatica van je HTML te checken met de validator van het W3C jt.ws/c1
- Dreamweaver biedt uitstekende CSS-layouts aan met een leerzame beschrijving erbij. Je vindt ze in het dialoogvenster voor een nieuwe pagina.
- Een absoluut element kan eigenlijk op iedere plek in de code staan zolang het maar binnen zijn eigen (relative) containing block blijft.
- Een AP zal zich positioneren tov zijn containing block. Dat is een parent met position:relative en bij afwezigheid daarvan is dat de body.
- Een absoluut gepositioneerd element (AP) is in feite een aparte laag die zich niets aantrekt van de onder- (of boven)liggende elementen.
- Position:absolute plaatst een element waar je maar wilt, ook bovenop een ander element. Met bijv top:4em en left:10em geef je de positie aan
- Als je een afbeelding wilt laten meeschalen met de lettergrootte plaats je deze in de HTML-code. Geef 'm dan in CSS een afmeting in ems.
- Als een afbeelding dient als illustratie, dus niet van belang is voor de content van de site, heeft het de voorkeur deze te plaatsen in CSS.
- Een afbeelding die in HTML-code een width en height heeft, kan daarnaast in CSS ook afmetingen in ems krijgen waardoor deze meeschaalt
- Gebruik maten in ems om mee te schalen met font-size, px voor vaste maten, % als de maat afhangt van de vensterbreedte. Geef fonts altijd %
- Je kunt de afstand tussen listitems verhogen met padding, margin, maar ook met line-height. In ems schaalt deze mee met de font-size.
- Overweeg of het zinvol is om padding en margin in ems in te geven; meeschalen met de lettergrootte van tussenruimtes kost wel schermruimte.
- De formule om ems op een plek met font-size: 80% te berekenen is ((aantal pixels:16) : 80) x 100. Een getal in decimalen kan ook bv 6.35
- Handige formule om afmetingen in pixels om te rekenen naar ems: aantal pixels gedeeld door 16. Dit werkt bij een lettergrootte van 100%
- Als een lezer de lettergrootte in de browser aanpast, zal een layout met afmetingen in ems meeschalen.
- In een elastic layout staan de afmetingen van elementen in CSS in ems. Een em is zo groot als de letter M die is ingesteld voor dat element.
- Met overflow:hidden blijven geneste margins en floated blocks binnen een block-level div: ze steken niet meer uit en de div rekt met ze mee.
- Met overflow:auto krijgt een box een scrollbalk als de inhoud er niet in past. In een klein venster kan dit een dubbele scrollbalk geven.
- Als een vaste hoogte niet te vermijden is, gebruik dan ems ipv pixels zodat de hoogte van box tenminste met de lettergrootte meeschaalt.
- Het is een goede gewoonte om een box te laten meerekken met de inhoud. Vermijd dus vaste hoogtes.
- Een AP (Absolute Positioned element) krijgt van Dreamweaver altijd een z-index. Deze is overbodig als de volgorde in de code voldoet.
- Gebruik z-index alleen om volgorde van stapeling aan te passen; om lagen te stapelen in volgorde van de code voldoet absoluut positioneren.
- Wees zuinig met display: none, Google kan je verdenken van spam. Als je inhoud bestemd voor SEO verbergt kan je site uit de index verdwijnen
- Met visibility kan je een element onzichtbaar maken; de ruimte blijft dan wel open. Met display:none komt ook de ruimte van het element vrij
- Met display: none geef je aan dat de browser het element niet moet tonen. Let op dat veel screenreaders het dan ook niet zullen voorlezen.
- Met width: auto maak je een eerdere width ongedaan en zal het element zijn standaardbreedte weer aannemen.
- In Dreamweaver CS5 ontbreekt de validator, maar met deze extensie jt.ws/cf vind je 'm terug via menu Bestand (File).
- Wist je dat je in Dw ook code kunt valideren? De meldingen zijn vaak duidelijker dan in de validator van het W3C. Zie de werkbalk Document.
- Vanaf Dw CS4 kan je in paneel Properties (Eigenschappen) ook CSS ingeven. Id's toekennen aan een element kan nu ook vanuit datzelfde paneel.
- De code navigator (vanaf Dw CS4) is een aanrader als het gaat om nakijken welke CSS op een bepaalde plek in een pagina van toepassing is.
- Als je javascript:; gebruikt als tekst in een nowherelink ipv een hekje, voorkom je dat in sommige browsers de pagina naar de top springt.
- Ook tekst die dient als kop van de site hoeft niet in een eigen div alleen omdat het de kop is: een h1 kan dezelfde CSS krijgen als een div
- Een afbeelding die dient als kop hoeft niet speciaal in een eigen div te staan zolang hij maar in het containing block van de site staat.
- Laat je niet verleiden tot overbodige divs: de ul van een menu bijv. is een block-level element en kan dezelfde CSS krijgen als een div.
- Gebruik voor layouten als eerste de natuurlijke flow van de pagina. Wil je meer, gebruik dan float. Kies pas als laatste voor positioneren.
- Position: static is de normale positie van een element en geef je in om een overerfde positie te overschrijven.
- Een element met position: fixed is en blijft gepositioneerd tov het browservenster als er wordt gescrold (werkt niet in IE6 en ouder).
- Je kunt ook negatieve waardes ingeven voor top, right, bottom en left. Dit werkt ook in IE6 (negatieve marges werken daar namelijk niet in).
- Een element absoluut gepositioneerd met top, right, bottom en left zal zijn afmeting aanpassen aan het containing block (werkt niet in IE6)
- Een element met position: relative in combinatie met bijv. een top en een left zal zich positioneren tov zijn eigen oorspronkelijke positie.
- Geef een element met z-index altijd ook een position absolute, relative of fixed, anders zal het niet werken.
- Position: relative dient om een element tov zichzelf te positioneren, het te markeren als containing block of om z-index mogelijk te maken.
- Gebruik position: absolute uitsluitend als je echt absoluut wilt positioneren, dus altijd icm minstens twee coordinaten zoals top en left.
- Eyeopener: heb je ooit al eens gedacht bij position: relative dat relative hier wel eens familielid zou kunnen betekenen?
- Een element met position: absolute zal zich ten opzichte van de body plaatsen als er geen parent is met een position: relative.
- Geef een containing block een position: relative en een ingesloten element met position: absolute zal zich ten opzichte daarvan positioneren
- Geef een verouderde pagina zonder DocType niet zomaar een DocType want je hebt grote kans dat de weergave dan juist fout gaat.
- Een pagina zonder DocType wordt door de browser herkend als verouderd en wordt dan op bijpassende wijze (quirk modus) geinterpreteerd.
- Als een tabel zich ervoor leent (omdat er eigenlijk niet echt zowel kols als rows nodig zijn) is een definitielijst een goede vervanging
- Minder bekend zijn definitielijsten. Gebruik deze als het een opsomming van termen en hun beschrijving betreft, zoals in een woordenboek.
- Als de browser de door jou in Dw ingestelde list-style-position niet weergeeft, controleer dan of de eigenschap wel voluit is geschreven.
- Een achtergrondplaatje als opsommingsteken voorkomt weergaveverschillen in de browsers. Maar deze schaalt niet mee met de lettergrootte.
- Geef lijsten altijd een margin-left en een padding-left naar eigen inzicht, en voorkom zo weergaveverschillen van lijsten in de browsers.
- Adresgegevens zijn een opsomming van naam, straat enz. Een menu is een opsomming van links. Plaats beide daarom in een lijst ipv met breaks.
- Live View is een voorvertoning van de pagina in de browser binnen Dreamweaver. Vergeet niet om Live View na gebruik weer uit te zetten
- Heb je voor de alinea een lettergrootte ingesteld van bv. 85% en wil je de tekst in de tabel gelijk hebben? Geef de tabel dan diezelfde 85%.
- Onverklaarbare tussenruimte in een tabel? Laat de sluittag van de cel op de inhoud aansluiten en laat de tr- en td-tags op elkaar aansluiten
- De inhoud van een cel staat standaard vertikaal gecentreerd. Geef om verassingen te voorkomen, standaard vertical-align: top in voor een td.
- Een cel rekt mee met de inhoud ook al heeft deze een vaste breedte of hoogte. Let dus goed op de afmetingen van de inhoud van een cel.
- Om te voorkomen dat 2 woorden na elkaar op verschillende regels komen te staan 'plak' je ze aan elkaar met een non-breaking space.
- Met samengestelde kiezers heb je minder classes en id's nodig. De code wordt daarmee schoner en leesbaarder.
- Geef de tabel een class en je kunt de ingesloten cellen vormgeven met een samengestelde kiezer: voorkom dat ze een eigen class nodig hebben.
- Weerhoud jezelf van schuiven met tabelranden in het documentvenster van Dreamweaver, je maakt hiermee ongewenste attributen aan in de code.
- Een uitgebreide tabel is voor de browser eenvoudiger om op te bouwen dan een tabel die bestaat uit meerdere ingesloten tabellen.
- Let op dat je in Dw bij het maken van een tabel geen breedtes, randen, padding en spacing ingeeft: allemaal vormgeving die thuishoort in CSS
- Gebruik tabellen alleen voor tabulaire data: inhoud die rijen en kolommen nodig heeft met koppen in zowel horizontale als vertikale richting
- Springen de cellen van een tabel-in-de-maak alle kanten op in Dreamweaver? Maak eerst de tabel helemaal af, dan valt vaak alles op z'n plek.
- Gebruik een universele kiezer (sterretje) alleen als dat echt nodig is omdat echt alle elementen hiermee door de browser worden afgewerkt.
- Als je een sterretje gebruikt als kiezer, geef je aan dat de CSS-regel geldt voor alle elementen in de site (universele kiezer).
- Gebruik !important bij uitzondering omdat het speciale eigenschappen van gebruikerstylesheets zoals dat in Firefox mogelijk is, blokkeert.
- !important na de waarde van een CSS-regel geeft aan dat deze voorrang heeft en niet overschreven kan worden: p { color: 000 !important; }
- Test je werk online in de verschillende versies van IE met IETester jt.ws/c0 of op bit.ly/pRHT
- Een rootrelative link begint met een / en beschrijft het pad vanuit de root ipv vanuit de pagina
- Dreamweaver werkt de link in een conditional comment niet automatisch bij als je de pagina verplaatst. Gebruik daarom een rootrelatieve link
- Plaats een conditional comment na de links van de andere stylesheets. Zo overrulet de CSS die alleen gelezen wordt door IE de andere CSS.
- Met conditional comments kan je extra stylesheets toevoegen met uitsluitend die CSS die de afwijkingen in IE (vaak vooral IE 6 en 7) aanpakt
- Check je site eerst steeds in Firefox. Dit komt, zolang je geen gekke dingen doet, meestal overeen met de andere bekende browsers.
- Stel browsers waarin je wilt testen in de voorkeuren van Dw in. Gebruik daarna de wereldbol in de werkbalk Document voor de voorvertoning.
- Onder menu Bewerken, Sneltoetsen (Edit, Keyboard Shortcuts) maak je in Dreamweaver je eigen sneltoetsen aan (Mac: onder menu Dreamweaver).
- Goed uitgangspunt voor je ontwerp in Photoshop is een hoogte boven de vouw van je website van ca. 550-600 pixels.
- Pleidooi voor een nieuwe max-breedte van 930px voor een webpagina! Want op een 24' beeldscherm passen 2 vensters naast elkaar van 960px.
- Je kunt een element meerdere klassen geven. Plaats dan de namen van de kiezers achter elkaar, bijv. class="accent extra".
- Gebruik uitsluitend class voor een stijl die op meerdere plaatsen in een pagina gebruikt gaat worden. Gebruik in alle andere gevallen id.
- Voorzie je stylesheet van commentaar om dingen toe te lichten. Alles wat tussen /* en */ staat, wordt door de browsers genegeerd.
- Een block element centreer je horizontaal met margin:auto. Met text-align:center centreer je de inhoud van een element (en deze overerft!).
- Bij voorkeur blijft bij een rij floated blocks er altijd één zonder float en width. Deze past zich aan de beschikbare ruimte aan.
- Een block-level-parent rekt standaard niet mee met zijn ingesloten floated block. Een parent met float of overflow:hidden rekt wel mee.
- Tekst staat altijd om een floated block heen. Tekst is inline en alleen blocklevel elementen zoals bijv. div, h1, p, negeren floated blocks.
- Floated blocks staan niet meer in de flow van de pagina, ze zweven erboven. De block-level elementen in de pagina negeren de floated blocks
- Een floated block is een zwevend inline-block element: uiterst links of rechts op de regel (of aansluitend bij al aanwezige floated blocks).
- Terminologie uit mijn boek: containing block is de (grand)parent ten opzichte waarvan een element absoluut gepositioneerd staat.
- Terminologie uit mijn boek: een floated block is 'n block-level element met een float (deze is vervolgens niet meer helemaal block-level).
- Meer weten over inline en block elementen? jt.ws/cn
- Problemen bij layouten zijn vaak op te lossen door te kijken welke elementen inline of block-level zijn. Dit kan ongewenst gedrag verklaren.
- Een inline element kan slechts inline elementen insluiten. Inline heet ook wel text-level. Tekst is ook inline: alle letters naast elkaar.
- Een block-level element kan block en inline elementen insluiten. Uitgezonderd h1, h2 enz en p die slechts inline elementen kunnen bevatten.
- In CSS kan je met de eigenschap display een block-level element veranderen in inline of inline-block en andersom.
- Bij inline-block elementen werken width en een height wel (block) maar ze staan toch naast elkaar (inline). Bijv. img en floated blocks.
- Inline elementen zijn zo breed als hun inhoud en staan naast elkaar. Width of height geven heeft geen zin. Bijv a, br, em, strong, span.
- Blocklevel elementen gebruiken de volledig beschikbare breedte en krijgen pas een width als nodig. Bv h[..], p, ul, li, div, form, fieldset
- Je kunt elementen verdelen in 2 groepen: inline en block. Inline elementen staan naast elkaar, block elementen beginnen op een nieuwe regel.
- Let op dat je een border altijd een style (bijv. solid) geeft; met alleen een width en/of een color wordt de border niet weergegeven.
- Beter om een element met een width geen padding en borders te geven maar aan de inhoud ervan. Let er dan wel op dat deze geen width krijgt.
- Het boxmodel telt padding en borders bij de width van een element op, de box wordt dus breder (overigens niet in IE 5.5 en ouder).
- Top en bottom marges van aangrenzende blocks overlappen elkaar, je ziet dus geen verschil als je een van beide marges op 0 zet.
- Als je afmetingen in ems ipv in pixels instelt, is de maat afhankelijk van de lettergrootte die de lezer heeft ingesteld.
- Gebruik altijd procenten voor de lettergrootte zodat ook lezers met oudere browsers een grotere letter kunnen instellen.
- Br-tags zijn bestemd voor regeleindes. Goed gebruik is bij een gedicht: plaats een break na iedere versregel. Groepeer de versregels in p's.
- Structureer je tekst met alinea's. Browsers geven deze standaard witruimte met margin-top en -bottom.
- Het is slecht gebruik om br-tags te gebruiken om witruimte in tekst te maken: witruimte is wat je ziet op het beeldscherm dus maak je in CSS
- Het element em benadrukt tekst en is dus betekenisvol voor Google en screenreaders. Deze zien het element i als vormgeving en betekenisloos.
- Met het element b maak je tekst alleen maar vet, strong benadrukt tekst. Dit geeft betekenis en de browsers maken de tekst toch ook vet.
- Het gekozen font en color van de body gelden in beginsel voor de hele inhoud. Geef dit daarom pas in voor andere elementen als het afwijkt.
- Als je voor de body de marges op 0 zet dan overschrijf je de marges voor left, right en top die de browsers zelf standaard geven.
- Kies in de voorkeuren van Dreamweaver om CSS te schrijven in steno. Bijv. margin: 0 10px 0 20px ipv voor iedere kant een aparte declaratie.
- IE 6 en 7 kennen geen min-height en min-width maar als je speciaal voor deze browsers een height en een width ingeeft werkt dat hetzelfde.
- Geef een webpagina bij voorkeur geen vaste hoogte maar laat de inhoud de hoogte bepalen. Een min-height kan wel.
- Zorg dat links in een tekst onderstreept zijn of op een andere manier herkenbaar zijn voor kleurenblinde bezoekers.
- Als je geen tooltip wilt zien in IE, plaats dan een leeg attribuut title. Dat ziet er zo uit: title="".
- Gebruik het attribuut title voor tooltips: de tekst komt in beeld als de muis boven bijv. een afbeelding, link, formulieritem blijft hangen.
- Voorkom onnodige informatie die de screenreader moet voorlezen: laat het attribuut alt liever leeg als de afbeelding slechts illustratief is
- Het attribuut alt is een verplicht alternatief voor een afbeelding die niet gezien kan worden, het attribuut title is een aanvulling.
- De lettergrootte van de lezer bepaalt hoeveel letters er op een regel passen. Een regeleinde (break) kan daardoor net verkeerd uitkomen.
- Een bestandsnaam zoals deze-naam.html wordt door de zoekmachines gelezen als 2 woorden en deze_naam.html als 1 woord.
- Spaties in bestandsnamen maken lelijke URL's: de meeste browsers geven bijv. naam pagina.html weer als naam%20pagina.html.
- Gebruik geen hoofdletters in bestandsnamen. Omdat links hoofdlettergevoelig zijn is het een goede gewoonte om kleine letters te gebruiken.
- De keuze van een h1 of een h2 staat los van de lettergrootte. Kies geen h2 omdat de h1 te groot is: pas dan in CSS de grootte van de h1 aan.
- Zorg dat alle inhoud tussen HTML-tags staat, hiermee geef je betekenis aan die inhoud en kan je tekst benadrukken (semantiek).
- Met HTML-elementen geef je de structuur van de HTML-pagina aan (html, head, body) en van de inhoud (h1, h2, h3, h4, p enz).
- Hou inhoud en vormgeving gescheiden: de HTML-pagina is bestemd voor de inhoud van de pagina, plaats de vormgeving met CSS in de stylesheet.
- Geef je webpagina een DocType zodat de browser, je HTML-editor en de validator weten hoe je code te interpreteren, schrijven en controleren.
- Voeg aan iedere kiezer met a:hover ook a:focus toe zodat ook lezers die geen muis gebruiken maar het toetsenbord, zien welke link ze kiezen.
- De carousel is aan het eind gekomen en daarmee ook weer aan het begin. De bestaande tweets zullen worden uitgebreid met nieuwe.