Næse for design og kommunikation til nettet
Webdesign
Sådan fixes IE7’s z-index bug med jQuery
9 feb 10
Det er sædvanligvis Internet Explorer, der kræver ekstra opmærksomhed, workarounds og udviklingstid, når man skal gøre et website kompatibelt på tværs af webbrowsere. Jeg har lige spenderet en del tid på at komme omkring en grov renderingsfejl i IE før version 8, der rammer den orden hvori CSS positionerede HTML elementer stables. Jeg er rendt ind i IE’s z-index bug.
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 Mere > Bedre design med 4 basale principper: CRAP
6 jan 09
Jeg har lært et nyt ord i dag: CRAP! Et huskeord eller en forkortelse for 4 basale designprincipper under overskrifterne Contrast, Repetition, Alignment og Proximity.
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 Mere >
Art Direction plugin til Wordpress – Pimp dine indlæg
21 dec 08
Jeg har tidligere skrevet om Jason Santa Maria’s blog, der har det særkende at næsten hvert indlæg er individuelt gennemdesignet i en stil, der passer ind i sitets overordnede look and feel.
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 Mere >
Tips til forbedring af brugergrænsefladen
18 dec 08
Webdesign består i overvejende grad af design af brugergrænseflader. Man falder ofte over sites, hvor fokus i designet er placeret uhensigtsmæssigt. Der findes mange eksempler på at farver, kontraster, størrelser og afstande i tekst og layout er mere tilfældigt valgt end bevidst udnyttet til sammenbinding og adskillelse af elementer samt opmærksomhedsskabelse.
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:
Smashing Magazine har et rigtig godt indlæg med 10 gode tips og masser af både gode og Mere >
Apropos enestående webtypografi
16 dec 08
Fornylig skrev jeg lidt om typografi på nettet. WebDesignerWall har en glimrende artikel om emnet, Fonts and the Web af Juul Coolen. Artiklen kommer omkring 4 forskellige metoder til at spiffe de typografiske muligheder i webdesign op.
- 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-facereglen.
Julekalender for webnørder
16 dec 08
Min favorit-julekalender i år er absolut 24 Ways. 24 Ways er julekalenderen for webnørder. Hver dag i december frem mod jul publiceres her en daglig dosis webdesign- og udviklingsgodter i form af artikler om emnet, skrevet af nogle af branchens førende designer og udviklere.
Å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.
Inspiration til design af søgeboksen
5 dec 08
Når brugeren ikke kan finde rundt på websitet, er søgeboksen ofte sidste udvej? Men hvordan designer man en effektiv søgeformular? Smashing Magazine har en god artikel om emnet med eksempler på dos & don’ts, bud på designovervejelser og masser af inspirerende screen dumps.
Hvordan designer man en effektiv 404 side?
5 dec 08
Fejl 404 sider er ikke altid lige hjælpsomme. Tallet 404 siger formentlig de færreste brugere noget som helst. Hvordan designer man en 404 side, som kan hjælpe brugeren videre?
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”.
Enestående webtypografi
1 dec 08
… er en umulighed, fordi antallet af skrifttyper, der typisk findes på brugernes computere og dermed er tilgængelige til brug i webdesign, er stærkt begrænset. Har man en lækker corporate skrifttype kan den altså ikke umiddelbart bruges. Man må gå andre veje, hvis man vil fremhæve et bestemt visuelt udtryk eller identitet på nettet.
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 Mere >
Runde hjørner med jQuery
27 nov 08
Pænt afrundede hjørner i webdesign laves på klassiske vis med grafikstumper i top og bund af de bokse, der ønskes afrundede. Denne metode har imidlertid ofte den ulempe, at den kræver ekstra opmærkning, der ikke nødvendigvis giver mening, skaber rod i koden samt kræver indlæsning af ekstra grafik, som er med til at sløve indlæsningstiden af websitet.
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 Mere >
Mit navn er Morten Brunbjerg Bech. Jeg er webdesigner, front end udvikler og bibliotekar på Horsens kommunes biblioteker. Netsans er min porteføljemappe, sandkasse og huskeseddel.