Tag-arkiv: HTML

Om typer af input

Når jeg skal udfylde en formular på nettet, ser jeg alt for ofte, at udviklerne bag ikke benytter sig af, at input-felter kan være andet end almindelig tekst. Udover typen text findes der blandt andet også url, email og number. Disse typer er utrolig nyttige, fordi de fortæller klienten mere om, hvad der forventes af inputtet. Det bruges specielt i to tilfælde:

  • synshandicappede som får læst sidens indhold højt
  • mobile enheder, der tilpasser tastaturets layout

Selv har jeg naturligvis mest erfaring med den sidste kategori. Når man skal indtaste en url eller en email kan det være irriterende, at skulle skifte frem og tilbage mellem tastaturlayout for at finde de rette tegn. Det kræver så lidt at bruge url og email til web- og emailadresser, og effekten er stor.

Eksempel på type=email

På iPad ændrer tastaturlayoutet sig, så @ er lettere tilgængelig, når type er sat til email.

Så hvis du laver websider, så husk på følgende:

  • brug number, url og email til inputfelter som falder indenfor de respektive kategorier
  • browsere, som ikke forstår typerne, falder tilbage til almindelig tekstinput, så det er ikke farligt at bruge

Der findes også mere eksotiske typer som “color,” “date” og “range” men de skal nok bruges med lidt større forsigtighed, siden de ikke er direkte undertyper af text som de andre er. Dem kan du læse mere om her.

HTML-tip: få bedre formularer med label-tagget

Alt for ofte når jeg skal udfylde en formular på nettet, ser jeg at man ikke har brugt <label> tagget rigtigt (eller ikke i det hele taget). Det ses specielt på radio- og checkboxes, hvor man er nødt til at klikke på selve elementet for at markere det. Bruger man <label> rigtigt, kan dette forbedre brugervenligheden i dine formularer betragteligt.

Her er et eksempel på en formular, hvor man ikke har gjort det godt nok:

Og her er et eksempel på en formular, hvor det er gjort rigtigt:

Bemærk hvordan du kan markere den nederste checkbox ved at trykke på teksten såvel som direkte på boksen. Det kan du ikke i den øverste. Dette medvirker til at det bliver meget lettere for brugeren at bruge formularen.

Metoden er ganske simpel, egentlig: <label> tagget skal kobles sammen med det form-element, det beskriver. Det gøres med “for” attributten på <label>. Der angiver man id’et på det element, som <label> beskriver. For eksempel:

<label for=”bananer”>Bananer:</label><input type=”checkbox” id=”bananer” name=”bananer” />

Mere skal der ikke til for at øge brugervenligheden på en formular!

Du kan også opnå samme effekt hvis du lægger input-elementet indeni label-elementet.

Bloggen som blad

I (stærk?) kontrast til mit forrige indlæg, hvor jeg efterlyser lidt nytænkning i udviklingen af det elektroniske blad/avis, vil jeg gerne fremhæve en artikel fra den anden grøft; bloggen som blad (eller the Death of the Boring Blog Post). Her efterlyses mere innovation i blogs; hvorfor skal blogindlæg være så kedelige og hvorfor ikke gøre dem mere blad-agtige?

Det er meget interessant læsning, og jeg håber vi kommer til at se flere blogs som skrives på denne måde. Jeg fik næsten følelsen af at sidde med en udgave af WiRED eller lignende, når jeg læste artiklen.

Bagsiden af medaljen er dog, at det bryder lidt med hele blog-ideen. Blogs er hvermandseje så alle og enhver kan publicere noget til web. Her er den en stor fordel med et strømlinet design, hvor man bare kan putte sin tekst ind i midten. Skal man lave mere fancy blogindlæg som dem i artiklen, er der ingen vej udenom. Man er nødt til at skrive HTML og CSS selv for at få den form man vil have. Glem alt om WYSIWYG (indtil videre).

Samtidig bryder konceptet lidt med min personlige mantra, nemlig at separere form og indhold. I artiklen nævnes en designer som faktisk går så langt som at bruge inline CSS – noget som får mig til at slå korsets tegn.

Sidst men ikke mindst sætter denne ide også en begrænsning på produktiviteten, i hvert fald hvad antal blogindlæg angår. Når det tager timer eller ligefrem dage at designe et indlæg, bliver det ikke til alverden man kan få ud.

Flyv-en-drage OSX

Som relativt nybagt Mac-nørd (fanboy hedder det, hvis du er Windows-fantast) og mere erfaren web-, (X)HTML-, JavaScript-, XML-nørd kan jeg ikke lade være med at blive en kende imponeret over Flyakite OSX. Det er Mac OS X implementeret i førnævnte teknologier, og det er utrolig godt lavet og samtidig utrolig ubrugeligt. Prøv at kaste et blik på det.