Webtips

Kleur schema's volgens kleurtheorie

Genoeg te doen maar toch tijd voor dit. Ik tikte ‘css’ in het venstertje van de blogzoekmachine Blogsearch.ask.com.

Op de eerste site die werd genoemd gaf Mike Rundle vijf tips voor het schrijven van css. Ik verdeel mijn css-bestanden doorgaans (soms maak ik er gewoon een zooitje van, en zijn de regels onderin het bestand de meest recente aanpassingen) in onderdelen van de pagina, dwz links, structuur, headers etc. Rundle stelt een indeling voor op hiërarchie in de cascade.
Interessant.

In een van de css-bestanden waar hij naar verwijst stond een underscore voor visibility:hidden. Een hack waar ik nog niet van had gehoord? Juist. Petr van Pixy.cz bedacht hem en schreef er in 2003 deze pagina over.

Na dit alles te hebben gelezen klikte ik in de navigatiebalk op ‘Tools’ en die pagina bracht me naar Color scheme. Een leuke tool voor het samenstellen van een kleurenschema.

Een uur verder, en geen steek opgestoken met het werk aan de nieuwe nlpvf-site. Wat heb ik geleerd? Geen vage zoekopdrachten meer!

CSS menu's

http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/ heeft een serie css menu’s gemaakt die u zonder meer kunt gebruiken.

Fireworks tutorials

Op http://solardreamstudios.com/learn/fireworks/ is een serie tutorials te vinden voor Macromedia Fireworks.

Apple's aanpak

Hoe begin je? Alleen nog maar div’s of toch een tabel? Wat wil je?

U weet dat ik tabellen alleen wil gebruiken voor ‘tabulaire informatie’, bijvoorbeeld een vergelijking van drie zaken op verschillende aspecten. Op de x-as de zaken, op de y-as de aspecten. In het grid dat zo ontstaat kun je heel wat cijfertjes of gegevens kwijt.

Voor lay-out van pagina’s gebruik ik div’s die ik met css op hun plaats zet.

Dat zou een onderdeel van mijn ‘best practice’ zijn. Apple doet dat een stuk vollediger en misschien wel realistischer op een pagina die heet Web Page Development: Best Practices.

Eps en Freehand

Een eps afkomstig uit Photoshop ziet er in Freehand MX vreemd uit. Een vlak met daarin een kruis op een lege pagina op de plaats waar een beeld zou moeten staan. Dat is alles wat er wordt getoond. Versturen naar Adobe Distiller levert een pdf op waarin het beeld wel te zien is. “Freehand benutzt zur EPS-Darstellung nicht die Feindaten, sondern nur ne Bildschirmdarstellung”, zoals het wordt verwoord op een Duitse site.

Wat te doen?

1. De eps-en converteren naar pdf en ze vervolgens openen in Freehand. Let daarbij op veranderingen in kleur.
2. De eps openen in Ghostscript of eigenlijk GSView, en de afbeelding knippen en plakken naar Freehand.
3. Een derde oplossing wordt beschreven op www.macromedia.com/go/03677 maar daarvoor is Photoshop nodig. En dat staat niet op mijn pc, begon het daar niet mee?

Streepjes en afbreken

Met de verbouwing van de nlpvf-site, liep ik er frontaal tegenaan: afbreektekens en gedachtestreepjes. In een valide xthml-document is het zaak om de juiste codering te kiezen. Gedachteloos een – plaatsen is er niet meer bij; voortaan moet het een – – (en dash) zijn. Maar ik wist niet dat er meer mogelijkheden waren die bovendien bepalen of een regel wordt afgebroken of niet.
Een hulpvolle pagina is deze: http://www.cs.tut.fi/~jkorpela/dashes.html
Als ik die pagina goed lees, moet ik voor het gebruik van een gedachtestreepje midden in een zin een — (em dash: ‘used e.g. to make a break in the flow of a sentence’) gebruiken en geen – (en dash: ‘used e.g. to indicate a range of values’). Dus geen 8011 maar een 8012. Hmm, waar zit die zoek en vervang ook alweer in MySql?

Winmail.dat

Het is iets dat ik al had moeten weten, maar echt ik wist het niet. Jaren geleden, nog in de PC-Active-dagen (twee koppeltekens in een samengesteld woord: welke moet weg?) gebeurde het regelmatig dat attachments niet goed aankwamen. Niet echt bevorderlijk voor je geduld als je vlak voor een deadline op en neer springt. Henk of Hayo kwam aanzetten met een utility (jawel zo noemde je dat toen) die uit de code-brei tekst of afbeeldingen wist te kleien.
Vorige week ontving ik voor de eaa-website een attachment ‘winmail.dat’ waarin beslist een word-doc zou huizen. Een tweede poging van de zender leverde hetzelfde onleesbare resultaat. De oplossing vond ik op http://www.biblet.freeserve.co.uk/ in de utility WMDecode. Downloaden naar een directory, sleep de winmail.dat er naar toe laat het met een rotssmak op het icoon of naam van de .exe vallen, en uit de brokstukken rijst een keurig, leesbaar bestand. Wist u allen natuurlijk allang, maar ik nog niet! Heus!

Horizontale verschuiving

In een ontwerp verschuift een pagina soms als de tekst niet lang genoeg is om een scrollbalk aan de rechterkant van het scherm op te roepen. De oplossing is om in het css-bestand het volgende op te nemen:

Buiten de grens

Vanochtend las ik op Fadtastic een bericht over ontwerp waar wordt gespeeld met de borders van de pagina. Dit effect komt tot stand door het oproepen van een plaatje in de achtergrond, en in dit plaatje de border opnemen.

Genoemde voorbeelden:

Lousco
Dev.upian.com

PHP Scripts

Voor de ontwikkeling van een nieuwe versie van de NLPVF-site was ik op zoek naar een aantal scripts ter aanvulling van de standaard mogelijkheden die Movable Type biedt, en liep tegen deze sites aan, bekende kost als:
http://www.sourceforge.com
http://php.resourceindex.com

maar deze kende ik nog niet:
http://www.opensourcecms.com
Een nuttig startpunt voor de zoektocht naar een open source cms.

IE 7?

Een nieuwe versie van Internet Explorer? Bill heeft het gezegd, het staat hier geschreven, het gaat echt gebeuren… Ze hebben het over het verbeteren van de veiligheid, wat een schone zaak is, maar ze zullen toch geen nieuwe versie uitbrengen zonder de fouten in de css-engine aan te pakken? Een toekomst zonder hacks… Nee hoor, ik ben klaar wakker, zei de optimist…

Contrast tussen kleuren

Het gebeurt niet meer zo vaak dat je kunt verwijzen naar een interessante download. Voor webdesign zijn de meeste tools gewoon als on-line dienst beschikbaar: zoals Textile of Layout-o-matic. Maar het ding waarmee het contrast tussen kleuren is te analyseren kunt u ouderwets
hier downloaden. En handig is deze contrastanalyse bij het vaststellen van de basiskleuren van het ontwerp. Door twee kleuren - een op de voorgrond en een op de achtergrond - te vergelijken op verschil in helderheid en kleur wordt aangegeven of het contrast voldoende is. De kleuren kunnen worden ingegeven met hexadecimale waarden of via een kleurenkiezer - fraai vanwege het vergrootglas en - aangewezen.
De Contrastanalysator berekent het verschil voor de vier typen kleurenblindheid voldoende is, aan de hand van twee formules (zie site). Een goede uitkomst geeft zekerheid over optimale leesbaarheid, en dat willen we allemaal. Waarom anders nog geschreven?

sIFR

‘Image replacement’ is een manier om een zeldzaam font te gebruiken dat vrijwel zeker op maar een paar pc’s aanwezig is. In de html of php schrijven we een header, en in de css laten we die vervangen door een plaatje waarin we dat font gebruikten. Dit is leuk voor een enkele keer, maar ondoenlijk als je alle tussenkopjes op een pagina wilt vervangen. Flash to the rescue! (eigenlijk hou ik helemaal niet van Flash), Mike Davidson vertelt hoe het moet.

301

In de webdesign-discussielijst kwam ik het advies tegen om bij een verplaatsing van bestanden binnen een site 301 correct te implementeren. “Juist, zou iedereen moeten doen, maar wat is het?” mopperde ik, hinderlijk getroffen door een gebrek aan kennis. Een link naar een prima tutorial leerde me dat ik al lang drienuleende op nlpvf.nl. 301 is de code waarmee een browser wordt verteld dat een pagina permanent verhuisd is. In een .htaccess bestand kan vervolgens de plek van de nieuwe bestanden worden gewezen. Zoekmachines zullen vervolgens de oude url plek uit hun database schrappen en de nieuwe opnemen. Als het goed is, en dat is het vaak…

Fixed doosje

Ik vroeg me af of ik deze site al een keer had genoemd. De css-discussielijst bracht me er vandaag weer eens naar toe. Waar gaat het over? Het concept van een vak dat op dezelfde plek blijft staan als er naar beneden wordt gescrolld. Op veel websites wordt hiervoor javascript e.d. ingezet. Tagsoup maakt duidelijk dat het ook zonder kan.

Outlook

Wie ondersteuning nodig heeft op het gebied van Outlook kan eens een bezoek brengen aan www.slipstick.com.

Favicon - deel 2

Pfoeh, net een uur bezig geweest om de kwestie rond het favicon uit te zoeken. De tutorial van Michael Hocke is helder maar beslist onvolledig kwam ik tot mijn schade vandaag achter. Voor de update van de website van De Deltareeks leek het me aardig om deze site te voorzien van een eigen icoontje, en dat moest natuurlijk het plaatje zijn van het liggende boek. Uitgezocht en goedgekeurd door de commissie wijze mensen die aan de basis van deze collectie Nederlandse literaire klassieken stonden. Goed, eerst begonnen met de originele eps, en geschaald naar de gewenste grootte van 16 bij 16. ‘To no avail’, de fragiele lijntjes lopen dicht. Goed terug naar een versie die ik bij een vorige update van de site transparant heb gemaakt, gebruikt voor het vormgeven van sommige links…

Foutje in foutcontrole

Schrijf je eens een keer iets, staat er doodleuk @HTML Code: voor. Ik weet wel waar die tekst vandaan komt: de macro die gebruikt wordt voor de conversie van Word naar Quark! Vergeet het, en lees de juiste tekst op:
http://www.bruothron.nl/tips/000023.html

Favicon

De manier om zo’n mooi icoontje voor je url af te beelden wordt hier beschreven:
http://www.vanho.de/tutorial/favicon.php

Formulieren

Een nuttige cursus over het toegankelijk maken van formulieren is te vinden op:
http://jimthatcher.com/webcourse8.htm

Kolommen

De css-discussielijst houdt een wiki bij, wat een prima startpunt is bij het ontwerp van een pagina. Zo bracht een post me bij een fraaie lijst met links naar driekolommen ontwerpen.
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
De site van Alex Robinson biedt een handige tool om een basislayout te genereren:
http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml

Verticaal centreren van afbeelding

Steve Clay is een ontwerper die vrijwel iedere dag aanwezig is op de discussielijst voor css-enthousiasten, met relevante antwoorden op soms minder terzake doende vragen. Zo ging hij deze week in op een vraag hoe een afbeelding verticaal kan worden gecentreerd als het plaatje zich in een omvattend element bevindt (‘fotolijstje’ of zoiets). Op zijn website http://mrclay.org/web_design/centered_image/ beschrijft hij een methode om dit te doen.

htaccess

Wie werkt met een Apache webserver zal htaccess kennen. Het bestandje waarmee je bijvoorbeeld voorkomt dat bezoekers de inhoud van een directory kunnen opvragen. Op
deze plek is een tutorial te vinden die laat zien wat er mogelijk is htaccess.
http://www.freewebmasterhelp.com/tutorials/htaccess/

Snelmenu

In aanvulling op een eerdere webtip vond ik deze bij Zeldman. Op de onderstaande site zijn negen verschillende menu’s op te halen, gratis en voor niks.
http://www.e-lusion.com/design/menu/

Smarty veel verstandiger

In php-pagina zoek ik me altijd rot naar de code die tussen de html schuilt. Vooral het aanpassen van een pagina die we niet zelf hebben geschreven is daardoor zeer tijdrovend. Een vergelijkbare onderverdeling tussen code en opmaak zoals de taakverdeling tussen css (opmaak) en html (inhoud) lijkt de oplossing. Wat geklaag in een toevallig gesprek gaf me het duwtje in de richting: Smarty. En het is maar anderhalf jaar geleden dat een webontwerper aan tafel vertelde dat hij daar mee bezig was ;-) Kun je ook een loden brein hebben?
http://smarty.php.net/crashcourse.php
(ik moet me er nog wel in verdiepen)

Weten wat een blinde ziet

Rekening houden met wat een slechtziende wel of niet kan zien zou een voorwaarde moeten zijn voor elke ontwerper. Ik denk er zelf - treurig als het is - veel te weinig over na. Alphaworks, een divisie van IBM die zich bezighoudt met nieuwe technology, heeft een ‘disability’ simulator gebouwd, die misschien waardevol kan zijn. De simulator kijkt naar bijvoorbeeld kleurcontrast en de mogelijkheid om lettertypes te veranderen, en draait vervolgens een rapport uit met tekortkomingen en een score van toegankelijkheid en gebruiksgemak voor blinden en slechtzienden.
http://www.alphaworks.ibm.com/aw.nsf/FAQs/adesigner (nog niet getest)

Foutcontrole

Fouten maken is menselijk maar de taak om de gemaakte fout op te sporen is bij tijd en wijle onmenselijk. Wanneer de geschreven code niet het gewenste resultaat oplevert, is het zaak om stap voor stap te achterhalen wat er aan de hand is. Op
http://www.positioniseverything.net/articles/mys-bug.html staat een stappenplan.
Een vergelijkbare, maar veel uitgebreidere aanpak van probleemoplossing is te vinden op het ‘spiekbriefje’ van Dave Shea, de man achter Zen Garden op http://mezzoblue.com/css/cribsheet/
(Let ook even op fraaie gebogen pijltjes die hij vooraf laat gaan aan een dd)

Vast element in IE

Als het nodig is om een element een vaste positie op het scherm te geven, is position: fixed; de methode. Ook al scrollen we naar beneden, het gefixeerde element blijft op dezelfde positie staan in de viewport (het gedeelte van het scherm dat we daadwerkelijk zien). Alleen ondersteunt Internet Explorer aan dit alles, en laat het element in het niets verdwijnen wanneer naar beneden wordt gerold (of klikt u nog op dat balkje?).
De pagina van Eric Bednarz gaat in op de mogelijkheden om dit te verhelpen in zowel IE 6 als de oudere 5 versies.
http://devnull.tagsoup.com/fixed/

Link te lang?

Kan op http://url123.com/. Je mag er maar een per sessie laten inkorten.

Rollover buttons

Methode voor het maken van rollover buttons, zonder javascript.
http://www.digitalmediaminute.com/article/89

Stileer een hr

De manier om een horizontale lijn op een pagina te plaatsen is tegenwoordig om een border om een element te plaatsen. De reden hiervoor is dat het hr-element in browsers op verschillende manieren weergegeven worden. Via css kunnen we zo’n lijn een kleur geven, en dat werkt in Mozilla maar niet in bijvoorbeeld Opera. Sommige browsers vinden het een ‘block’ element, andere weer zien het element als ‘inline’ of ‘inline-block’. Een helder artikel over het stileren van een hr-element is hier te vinden:
http://www.sovavsiti.cz/css/hr.html

Box model hacks

Er zijn een aantal methodes om de bekende ‘box model hack’ in te voeren, u weet wel de truc om Internet Explorer valse waarden te voeren, en toch de juiste door te geven aan browsers die wel hun best doen.
De eerste waar we op in gaan is de
Escaped character methode
De naam is wat het doet: een \ (escape) zorgt ervoor dat IE over de regel heenkijkt en pas weer bij de volgende selector begint te lezen. Andere browsers hebben geen last van de \ en interpreteren gewoon de laatste regel:

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 200px;
        \width: 220px;
        w\idth: 200px;
}

De tweede methode is Alternate Box Model Hack. Dit is een vereenvoudiging van de eerste methode die er op neer komt dat de laatste regel gewoon wordt weggelaten. Werkt ook.

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 220px;
        w\idth: 200px;
}

Dan is er een manier die wat minder net is (maar geen hacks nodig heeft): ‘Div’ities’, die inhoudt dat we in één div de breedte en hoogte aangeven, en in een andere padding (‘bladvulling’ zou ik moeten schrijven, maar begrijpt u het dan?) en marge. Als volgt:

#div1 { float: left; width: 300px; }
.innerdiv { padding: 10px; }

Het bepalen van marge en padding kan natuurlijk direct op een element (bijvoorbeeld een paragraaf) dat in die div zit, zonder een aparte div te maken:

#div { float: left; width: 300px; }
p { padding: 10px; }

Check van HTTP headers

In sommige gevallen wil je weten wat er wordt meegezonden in de HTTP header. De onderstaande site biedt een functie om dit te doen.
http://www.delorie.com/web/headers.html

IE 7

Nee zover zijn we nog niet, en moeten we met zijn allen hacks gebruiken om onze pagina’s er ook in helaas de meest gebruikte browser goed uit te laten zien. In afwachting van de eeuwige wijsheid van de Redmondse prinsen is Dean Edwards alvast begonnen om Internet Explorer te verbeteren, door de browser de standaarden beter te laten respecteren.
http://dean.edwards.name/IE7/

Erven van eigenschappen

In mijn vorige post schreef ik ‘erven van eigenschappen’ alsof het vanzelfsprekend is. Dat is het niet, en geloof me ik heb genoeg stijlpagina’s gezien waarvan de auteur(s) niet op de hoogte waren van deze basis van css. Dat ‘cascading’ staat er niet voor niets.
Het verschil tussen div p en div>p maakt de kracht van het erven duidelijk. Het eerste is te lezen als ‘elke paragraaf die deel uitmaakt van een div’, dus elke afstammeling van een div. De tweede is gerichter en spreekt ‘de paragraaf die meteen volgt op een div-selector’ aan. Het ‘kind’ van de div. Deze manier om het gedrag van kinderen te bepalen - Child selectors - wordt niet ondersteund door IE/Win!!!
Een uitstekende cursus over selectors is te vinden op: http://css.maxdesign.com.au/selectutorial/
Nog meer uitleg op http://nemesis1.f2o.org/aarchive?id=3
Andersom kan ook, om uitleg te krijgen van een complexe declaratie of om het verschil tussen twee alternatieve notaties (a.class:hover of a:hover.class) te zien: http://gallery.theopalgroup.com/selectoracle/

Een div centreren

Het is vrij eenvoudig om een div te centreren. De opzet bestaat eigenlijk uit twee stappen. De eerste is het aangeven dat zowel de linker- als de rechtermarge van de div ‘automatisch’ moeten worden bepaald, door margin: 0 auto; te declareren. Als het niet al te snuggere jongetje uit de klas begrijpt IE dit niet. Om deze browser een handje te helpen zetten we de volgende stap door text-align: center; aan de body toe te voegen. En klaar is onze gecentreerde div.

body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}

Door te schrijven dat de tekst in de body gecentreerd moet worden, geldt dit vanzelfsprekend - door het erven van eigenschappen - ook voor de tekst in de div. Door het toevoegen van text-align:left aan het doosje wordt dit verholpen.
De vraag is nu waarom de body een min-width aan zijn broek krijgt. Dit heeft te maken met gedrag in Mozilla. Als we dit niet vermelden, steekt de helft van de gecentreerde div aan de linkerkant uit de pagina. Het opgeven van een minimale breedte is de oplossing.
Voor meer informatie over de auto-margin methode: http://www.andybudd.com/…/centering_a_div

Mail to beschermen

Ik vergeet het telkens te schrijven, elke keer wanneer ik een e-mailadres wil afschermen moet ik het weer opzoeken. Vanaf vandaag niet meer nodig, want hier is: http://automaticlabs.com/home/

Netscape 4 en css

Op de css-discussielijst publiceerde Mr. Clay de volgende methode om css-pagina’s voor te schotelen aan Netscape 4:

**** in HTML:
<script type=”text/javascript” src=”/js/site.js”></script>
<link href="/css/imports.css" media="screen" type="text/css" rel="stylesheet">
<link href="/css/print.css" media="print" type="text/css" rel="stylesheet">

**** in /js/site.js:
if (document.layers) {
document.write(‘<link rel=”stylesheet” type=”text/css”’
+ ’ href=”css/nav4.css” />’);
}

**** in /css/imports.css:
@import “general.css”;
@import “unique_pages.css”;

**** in /css/nav4.css:
/* NN4 styles */

Deze methode kan worden gebruikt als het nodig is om N4 aparte stijlen mee te geven. Het voordeel hiervan is dat deze stijlen niet conflicteren met de echte stijlen, en dat deze laatste wel worden voorgeschoteld aan browsers die css goed interpreteren.

Weblog als website

• Adaptive Path’s MT Setup : Doug Bowman(July 11, 2003)
• Rebuilding a Portfolio : Doug Bowman(July 16, 2003)
• Doing your whole site with MT : Brad Choate(July 15, 2003)
• A Whole Lotta Features – Beyond the Blog : Matt Haughey(July 14, 2003)
• New Sidebar Links : Jason Kottke (July 14, 2003)
• Beyond the Blog and other links on making MovableType a Content Managment System : Dean (July 16, 2003)

Editor op het web

Wie een snelle editor zoekt om een tekst te hmtl-en, kan terecht op http://daringfireball.net/projects/markdown/dingus. De Perl-module kan ook worden geïntegreerd met Movable Type, en dat is nu precies de tool waarmee deze pagina's worden bijgehouden. De link vond ik op de pagina van Todd Dominey. Aanbevolen kost!

Wrap tekst rond afbeelding

Op Big Baer (vraag me niet naar het waarom van de 'ae' in beer) is een tutorial te vinden over het plaatsen van tekst naast een afbeelding. Het werkt met 'sandbag' div's. Sandbag is naast zandzak ook een werkwoord, dat dwingen betekent. De divs dwingen de tekst om zich te voegen naar de afbeelding.
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

Formulier met geheugen

Op de volgende pagina is een script op te halen dat ervoor zorgt dat de ingevoerde data bewaard blijft. Het script maakt gebruik van cookies. Een handige optie voor het bewaren van klantinformatie.
http://www.doxdesk.com/software/js/form.html

Meta Tag Generator

Pfoeh, eindelijk weer eens tijd voor iets leuks. De nieuwsbrief die mijn zo vriendelijke provider gisteren stuurde, deed me belanden op de f2o.org homepage, om specifieker te zijn op de pagina met uitgelichte websites. Een van de sites daar is van het Nemesis-project (http://nemesis1.f2o.org/). Ik was wel eens op die site geweest, omdat een van de mensen op de css-discussielijsten er naar verwees, maar ontdekte nu pas de metatag-generator. Kijk dat is nu het leuks waar ik het over had. De functionaliteit die verkregen wordt met het gebruik van Metatags is krachtig. Zo verhelpt een van die tags het rotgeintje van Internet Explorer om knoppen te plaatsen op je afbeeldingen. Een andere tag stuurt crawlers van zoekmachines aan. Ze zijn er in vele soorten en maten, wat hulp kunnen we dus goed gebruiken. De Meta Tag Generator biedt die hulp, eenvoudig en doeltreffend.

Toegankelijkheid

Rekening houden met minder valide bezoekers is waar het om draait bij accessibility, ofwel toegangelijkheid. Een standaardwerk op dit gebied is geschreven door Joe Clark en integraal te lezen op:
http://joeclark.org/book/sashay/serialization/

In de roos

Wanneer je een layout wil maken met een "http://www.wpdfd.com/editorial/thebox/deadcentre4.html":kader precies in het midden.

Maximum lengte van regel

Bij het ontwerpen van een publicatie is het vaststellen van de lengte van een regel een zeer belangrijk onderdeel. Dit geldt voor boeken, tijdschriften maar zeker ook voor websites. Vaak wordt de breedte van een tekstregel vastgesteld in een bepaalde hoeveelheid pixels. Pixel is echter een absolute eenheid en houdt geen rekening met de grootte van het font.
In een pure css lay-out willen we de gebruiker een aantal keuzes laten, waaronder het aanpassen van de tekstgrootte. Ems biedt die flexibiliteit maar verstoort de opmaak van een pagina. De oplossing ligt in het gebruik van ems als eenheid en het gebruik van maxwidth.
Meer hierover is te lezen op:
http://www.maxdesign.com.au/presentation/em/
http://www.svendtofte.com/code/max_width_in_ie/

Achtergrondinformatie over lengte van regel:
http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm
http://www.humanfactors.com/downloads/feb03.asp

De familie Font

Bij de keuze voor de volgorde van lettertypes in een font-declaratie lijkt een keuze voor de door Microsoft geïnstalleerde fonts gerechtvaardigd. Dat is nu eenmaal het platform waar de meeste bezoekers van uw site mee werken. Maar welke zijn aanwezig is een vraag die wordt opgelost op twee pagina's van Microsoft zelf. Daar wordt meer informatie gegeven over het lettertype en aangegeven bij welke MS-producten het standaard wordt geïnstalleerd.
http://www.microsoft.com/typography/fonts/default.asp
Lettertypes op de Mac:
http://www.microsoft.com/typography/fonts/mac.htm

Aan de hand van deze lijsten is gemakkelijk een overzicht te krijgen van de meest 'aanwezige' lettertypes.
Bij een voorkeur voor een weinig voorkomend lettertype, kan deze gerust op de eerste plek in een declaratie worden gezet, zolang er in diezelfde declaratie maar een algemener font wordt aangegeven.

Om een voorbeeld te geven:

body {
font-family: "Sassoon Primary", "Lucida Grande", Verdana, Helvetica,
Arial, sans-serif;
}

In deze code wordt eerst een afwijkend font genoemd, gevolgd door een veel voorkomend font op de Mac, een font dat op vrijwel alle Win en Mac-systemen voorkomt, en afgesloten door de default sans-serif.

Effectief e-mail schrijven

Ik vind het best hoor om mailtjes met spelfouten en onvolledige antwoorden te lezen. Om de zin "je moet dat maar even voorschijten" die ik ooit gemaild kreeg, kan ik nog steeds gniffelen. Alleen betwijfel ik of dit soort mail echt goed bij me overkomt. Of ik ze onthoud of er iets mee kan doen, is nog maar de vraag.
Vandaag kwam ik een artikel tegen met een serie tips over het effectief communiceren via e-mail. Voor iedereen die mail verstuurt zou het bekende stof moeten zijn, maar dat is niet. Dat verzeker ik u.
http://www.webfoot.com/advice/email.top.html

Uitklapbaar menu (DOM)

Op Brainjar is een uitgebreide tutorial te vinden voor het maken van een menu-balk met scroll-opties.
http://www.brainjar.com/dhtml/menubar/

Hoera

De installatie van Movable Type is gelukt. Met behulp van de informatie in het forum van mijn aardige provider f2o.org was het eigenlijk een zeer eenvoudige klus. De informatie in het forum bood zelfs een oplossing voor de foutmeldingen die verschenen toen ik mijn eerste berichtje wilde posten. Het was een kwestie van rechten, zoals wel vaker in deze wereld.

jpg versus gif

Wanneer het om tekst gaat in een afbeelding (of andere ‘line art’) is gif de beste keuze. Jpegs zijn lossy, of het nu een groot of een klein bestand is, waardoor het er minder goed uit ziet. Bovendien zijn ze altijd gerasterd. Probeer hoge resolutie gif, met een anti-alias voor tekst. In bijvoorbeeld Fireworks wordt er standaard een ‘smooth anti-alias’ toegepast, wanneer er tekst wordt ingevoegd.

Tutorial over Float

Een uitgebreide tutorial over het floaten van een plaatje en tekst is te vinden op:
http://css.maxdesign.com.au/floatutorial/index.htm

Zoekstrings die valide zijn?

Soms willen pagina’s niet valideren vanwege de links naar pagina’s. Een link die tekens als een & bevatten levert een waarschuwing op van bijvoorbeeld de W3C-validator. Dan Benjamin’s Hivelogic’s url cleaner verhelpt dit:
http://www.hivelogic.com/urlcleaner.php