Opgaven: En lang række list items skal udstyres med forklaringer i form af drop downs. HTML koden ser således ud.

<ul class="linklist">
  <li>
    <h4>Overskrift 1</h4>
    <a href="#" class="dropdown-trigger">Vis beskrivelse</a>
    <div id="beskrivelse-1">
      Beskrivende note der falder ned, når man klikker på linket "Vis beskrivelse".
    </div>
  </li>
  <li>
    <h4>Overskrift 2</h4>
    <a href="#" class="dropdown-trigger">Vis beskrivelse</a>
    <div id="beskrivelse-2">
      Beskrivende note der falder ned, når man klikker på linket "Vis beskrivelse".
    </div>
  </li>
</ul>

CSS koden ser således ud.

.linklist li {position:relative;width:270px;}
.linklist li div.hidden {display:none;} /* skjuler div'en, før den aktiveres med jQuery .slideDown() */
.linklist li div {
  background:#ddd;
  border:1px solid #ccc;
  left:0;
  padding:6px 12px 12px;
  position:absolute;
  top:20px;
  width:244px;
}

<div> elementet bør således placere sig ovenpå <li> elementerne. Det virker bare ikke i IE før version 8, fordi stakkeordenen er fejlbehæftet. Jeg prøvede at løse problemet ved at definere en lavere z-index på <li> elementerne, end på <div> elementerne, men det løste ikke problemet. De efterfølgende <li> elementer blev stadig vist ovenpå det aktive <div>element.

Efter en del søgning på nettet fandt jeg Vance Lucas’ jQuery-baserede løsning af problemet:

$(function() {
  var zIndexNumber = 1000;
  $('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
  });
});

Ideen er, dynamisk at vende standard z-index stakkeordenen af HTML elementerne om. Således sikrer man, at elementer, der ligger højere i kildekoden også har en højere z-index orden på siden, hvilket burde løse renderingsproblemet i IE.

Det løste ikke umiddelbart mit problem. Jeg havde imidlertid andetsteds læst, at man skulle kunne løse problemet ved at give det relativt positionerede omgivende element en højere z-index orden, end det absolut positionerede element.

Det gav mig ideen til også at lave en Vance Lucas jQuery løsning på det relativt positionerede <li> element, men med en højere z-index orden. Altså:

$(function() {
  var LizIndexNumber = 1100;
  $('li').each(function() {
    $(this).css('zIndex', LizIndexNumber);
    LizIndexNumber -= 10;
  });
  var DivzIndexNumber = 1000;
  $('div').each(function() {
    $(this).css('zIndex', DivzIndexNumber);
    DivzIndexNumber -= 10;
  });
});

Og voila! Så virker det.

Contrast: Kontrast drejer sig om udnyttelse af størrelser, former og farver til at skelne elementer fra andre elementer. Brugen af fed får f.eks. den fedede tekst til at adskille sig fra den øvrige tekst. Et element med orange baggrundsfarve skiller sig f.eks. ud, hvis alle andre elementers baggrundsfarve er grå osv.

Repetition: Gentagelse af designelementer drejer sig om at skabe et konsistent design. Information, der optræder på alle sider, bør således placeres ens på alle sider. Punktopstillede lister bør være ens. Antallet af skrifttyper bør begrænses til 2-3 og overskrifter, underoverskrifter og brødtekst bør se ens ud på alle sider. Det handler om at skabe en helhed, hvor brugeren hurtigt vil komme til at forvente, at elemeter med et bestemt udseende indikerer en bestemt egenskab.

Alignment: Opstilling af elementerne handler om at sætte designet i system. Intet bør placeres tilfældigt. Et grelt eksempel er centreret tekst, hvor teksten mangler bagkant og derved bliver mindre læsbar. Alt bør have en vis visuel forbindelse til noget andet. Det gør det nemmere for brugeren at forstå og navigere i designets system.

Proximity: Nærhed drejer sig om elemternes indbyrdes relation. Elementer, der har relation til hinanden bør grupperes tæt sammen. Når mange elementer grupperes tæt sammen, bliver de visuelt til én enhed snarere end mange seperate enkeltdele. Dette hjælper til at organisere information og reducerer rod.

Mange af disse principper ser vi også i gestaltlovene. Men forkortelsen CRAP gør det måske lidt nemmere at huske.

Nu er det blevet lidt lettere, i hvert fald rent teknisk, at opnå noget lignende med WordPress. Noel Jackson, designer hos Automattic, der udvikler WordPress, har nemlig for nylig udgivet et plugin, der gør det muligt at lave brugerdefinerede designs til indlæg enkeltvis, mens et globalt stylet arkiv bibeholdes.

Men ét er teknikken. Den virkelige udfordring ligger i designopgaven, hvis hvert indlæg i en blog ønskes stylet individuelt.

Plugin’et hedder Art Direction. Det er i beta og version 0.2 er ude nu.

• Læs mere om Art Direction på Noel Jackson’s blog.
• Download Art Direction her.

Hvilken søgeboks er f.eks. vigtigst i dette design?

Her giver især gestaltlovene nogle gode rettesnore. Niels Gamborg har  nogle udmærkede forklaringer af gestaltlovene her:

• Loven om figur og baggrund
• Loven om nærhed
• Loven om lighed
• Loven om lukkethed
• Loven om forbundethed

Smashing Magazine har et rigtig godt indlæg med 10 gode tips og masser af både gode og dårlige eksempler, der kan hjælpe med at rette et website med for mange designtilfældigheder op til en mere effektiv brugergrænseflade.
10 Useful Techniques To Improve Your User Interface Designs

• Image Replacement – hvor teksten erstattes af grafik med CSS.
• sIFR (Scalable Inman Flash Replacement) – hvor typografien erstattes af Flash.
• FLIR (Facelift Image Repalcement) – hvor teksten erstattes af grafik on the fly vha. PHP.
• CSS3 – hvor der i fremtiden vil kunne gøres brug af @font-face reglen.

Læs Fonts and the Web af Juul Coolen på WebDesignerWall.

Årets foreløbige favoritter er:

• Making Modular Layout Systems af Jason Santa Maria
  Om hvordan man udvikler ekstremt fleksible layouts med CSS.
• Rocking Restrictions af Tim Van Damme
  Om produktivitet, go’s og no-go’s som webdesigner.
• Geometric Background Patterns af Veerle Pieters
  Om sømløse baggrundstapeter.

Designing The Holy Search Box: Examples And Best Practices.

Hongkiat.com har samlet en liste over 404 sider. De er ikke alle lige gode, men her er nogle kreative bud på fejlbeskeder og under alle omstændigheder god inspiration.

Se Hongkiat’s “60 Really Cool and Creative Error 404 Pages”.

Grafik
Nogen har fundet på at gøre det med grafik. Teksten udskiftes enten manuelt med grafik og CSS eller dynamisk med PHP og javascript. Begge metoder giver et pænt resultat, men kan, hvis det gøres forkert, være på bekostning af tilgængelighed, og samtidig bliver der naturligvis mere grafik, der skal downloades.

Flash-metoden sIFR
Andre har fundet på at udskifte teksten med flash. En metode, der kaldes sIFR. Resultatet er nydeligt, men ulempen er, at den specielle skrifttype først indlæses, når resten af sitet er indlæst.

Ren CSS
Man kan godt lave signifikant typografi med de gængse web skrifttyper og CSS alene. Faktisk er de typografiske muligheder i CSS ret oversete, efter min mening. Man kan få ganske meget genkendelighed ud af at arbejde med skriftstørrelser, seriffer, sans-seriffer, minuskler, majuskler, kursivering, vægtning, skydning og knibning, selv med et begrænset udvalg af skrifttyper. Og her gås til gengæld ikke på kompromis med mængder af grafik, indlæsningstider og tilgængelighed.

Nogle eksempler i vilkårlig orden:

Helvetica/Arial, 44 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Trebuchet MS, 24 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Georgia, 12 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Georgia, 20 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Verdana, 13 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Trebuchet MS, 14 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Helvetica/Arial, 18 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Trebuchet MS, 18 pixels
Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 1234567890

Prøv også
Typechart.com har samlet en masse eksempler sammen, hvor CSS koden er lige til at klippe og kopiere.
Tjek det ud på typechart.com

Slip for unødig grafik og HTML
Med javascript kan man imidlertid undgå både ekstra opmærkning og grafik. Dave Methvin har lavet et plugin til javascript-biblioteket jQuery, som kan netop dette. jQuery er et glimrende letvægts-javascript framework, der gør det nemt for designere med begrænset kodeerfaring at lave relativt avanceret funktionalitet i et website.

Fra grafik-pest til javascript-kolera?
Skal man så rode sin kode til med javascript i stedet for grafik og opmærkning, bare for at få runde hjørner? Som sagt kan jQuery bruges til rigtig mange ting. Har man i forvejen brug for noget af jQuery’s funktionalitet, er det oplagt at anvende til også at lave visse grafiske effekter og vil klart være at foretrække fremfor den ekstra opmærkning og grafik. Jeg vil helt sikkert gøre brug af dette plugin i fremtidige projekter.

Der er en demo af Round Corner plugin’et samt link til download af scriptet her.