Fleksibel webdesign

Engang kunne man designe målfaste websider, som så ordentlige ud på alle computerskærme, men sådan er det desværre ikke mere.

MobilbrowserDen tid er næppe fjern, hvor en skærm kan implanteres i håndfladen, skønt det ikke vil gøre den store forskel for mange smartphone-brugere.

Men hvad jeg tænker om at se panorama­­billeder på en 320 pixels bred smal skærm er irrelevant; smartphones og tablets i alle mulige og især umulige størrelser er kommet for at blive.

Og da jeg kan se, at også mine sider tilgås af folk, der ikke har råd til en skærm af anstændig størrelse, har jeg overgivet mig til “responsive webdesign”.

Det går ud på at designe sine websider, så de ser nogenlunde lige dårlige ud på alle skærmstørrelser.

På bloggen er det nemt; der bruger jeg et plugin, som detekterer mobilenheder og indretter udseendet derefter. Godt ser det ikke ud, men det kan da læses.

På alle mine ”almindelige” websider med jomfruelig HTML er det ikke så ligetil.

Man kan sylte siderne ind i javascript o.l., som detekterer, hvilket legetøj læseren benytter, og så bruge målrettede stylesheets, men det er skruen uden ende, for der er mange dimser derude, og der kommer flere til.

Nej, løsningen må være ”responsive webdesign”. ”Lydhør webdesign” lyder fjollet, så jeg foretrækker ”fleksibel”. Ét design til alle formater, ét sæt HTML-kode, ét stylesheet.

Siderne skal skrues sammen, så elementerne flydende kan flytte sig for hinanden, man skal skalere med relative størrelser som procenter i stedet for pixels, man skal definere maks- og minimumsstørrelser og meget andet.

Det er slet ikke så ligetil, og det kræver, at man går på kompromis med nogle ting – det er umuligt at få tingene til at se godt ud på alle skærmstørrelser.

Jeg har nu redesignet mine faktasider for rejsemål, fx Fakta om Sicilien, så de fungerer bare så nogenlunde. Man kan prøve at gøre browservinduet mindre og så genopfriske (F5) for at få Google til at finde et annonceformat, der passer til den nye størrelse.

Nu mangler jeg bare at redesigne nogle tusinde andre sider fra bunden, og når det er gjort, har jeg sikkert lært så meget, at jeg utilfreds starter forfra.

Hvis du keder dig, så få en hjemmeside.

8 thoughts on “Fleksibel webdesign

  1. Donald

    Nåja, det var faktisk bare meningen, at skærmen skulle kunne ombryde teksten så det passede til skærmen. De havde jo alle pæne matrix monospace fonte som lignede en grov Courier.

    Jeg mener at mange firnaer laver specielle smartphone websider, men jeg har svært ved at forstå hvorfor, måske er jeg ved at blive for gammel. Men jeg synes oplevelsen af naturen uden skærm er større. Jeg har to gange oplevet at nære venner, når de ser mine fotos på 24″ 1920×1200 skærm siger “hvor er det smukt! Hvem har taget det billede?” – billeders ultra-raffinerede lyseffekter komme simpelthen kun til udtryk på en moderne stor fladskærm.

    Sicilien siden fungerer fint og minder mig om at jeg gerne vil til Sicilien og spise grøntsager 🙂

    Svar
    1. Eric

      Ja, mange firmaer har specielle sider til mobile enheder, men jeg gider ikke “dobbeltbogholderi”. Jeg er ved at komme efter teknikken, så siderne og deres elementer automatisk tilpasser sig skærmstørrelsen.
      Jeg giver dig ganske ret i, at billeder tager sig bedst ud på en stor skærm, men det er et faktum, at flere og flere holder mere øje med smartphonen end med trafikken 😉

      Svar
    1. Eric

      Tak Hanne, men der mangler endnu noget med at optimere læsefeltets bredde i forhold til skærmvinduets bredde. Indtil læsefeltets/tekstens bredde bliver større end skærmens bredde, ønsker jeg kun at reducere “marginen”, men ved endnu ikke hvordan.

      Det kan gøres med css, og der er mange derude, som ved alt herom, men jeg søger ihærdigt efter en forståelig forklaring. De er næsten alle elendige pædagoger, som tager en masse viden for givet og serverer css-kodestumper uden at putte dem i et helhedseksempel.

      Derefter kommer det eksotiske, som når mobildimsen vendes, så der skiftes mellem portrait og landscape. Suk!

      Men det skal nok lykkes på et tidspunkt 🙂

      Svar

Skriv et svar til Eric Annuller svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *