Responsiv design – webbens hetaste trend

Responsiv design – webbens hetaste trend

Inom webbdesign och webbutveckling, är det allt svårare hålla jämna steg med nya resolutioner och enheter som kommer dagligen. Surfande i mobiltelefoner och surfplattor gjorde jobbet ganska svårt för utvecklare. I början löste man problem med upplösning så att man byggde en och samma webbplats med olika upplösningar och då skulle en javascript kod känna igen vilken upplösning man har och skicka vidare användare till rätt version av hemsidan. För många webbplatser, att skapa en webbplats version för varje upplösning och enhet var det helt enkelt opraktiskt.
Efter det började man bygga webbplatser speciellt för mobila enheter. Den trend är fortfarande ganska aktuell, inte bara för upplösningens skull utan även för innehålls skull, för mobil bredband har först nu på senare år blivit snabbare och mer användbar. De flesta mobila sajter har en ”m” framför domännamnet, så i vår t fall skulle man hitta bloggen på m.falknet.se. Men jag gjorde aldrig en speciell mobil version.

Den nya trenden inom webbdesign heter responsive design och det är design som ska reagera på användarens beteende och miljö baserad på skärmstorlek, plattform och orientering. Design består av en blandning av flexibla nät (grids) och layouter, bilder och en intelligent användning av CSS. När användaren växlar från sin bärbara dator till iPad, bör webbplatsen automatiskt ändras för upplösning, bildstorlek och skript. Med andra ord bör webbplatsen ha tekniken för att automatiskt svara på användarens preferenser. Detta eliminerar behovet av annan utveckling för varje ny enhet på marknaden. Det vill säga en design för alla enheter. I praktiken betyder det att lager, divar, bilder och andra design objekt ska inte ha storlekar (bredd och höjd) i pixlar utan antingen i procent eller ingen bredd/höjd alls. Det gör att vid smalare upplösning ändras webbobjektens ordning och bilderna skalas automatisk. Följande bilder illustrerar det jag skrev om. Jag har planer att ändra design på falknet.se i just responsiv design inom kort.