Vänligare än vanligt

Jag är lika vänlig som vanligt, men min hemsida är nu vänligare mot besökare med liten skärm. Med hjälp av CSS3, HTML5, media queries och Respond.js så anpassar den sig nu så att den är läsbar även i (de flesta) mobiltelefoner utan att behöva zooma och scrolla i all oändlighet.

Jag har varit sugen på att mobilanpassa hemsidan länge, men efter att ha läst boken Responsive Web Design av Ethan Marcotte igår kände jag mig tvungen att göra något direkt. Boken är lättläst och kort och man plöjer utan problem igenom den på 4 timmar om man redan är bekant med CSS.

Min hemsida baserades tidigare på en fast 960 pixlar bred design men som tur är var allt redan gjort med semantisk HTML och CSS. Omvandligen till en dynamisk design gick därför på några få minuter, och för att göra det enkelt för mig utnyttjar jag just nu bara en media query. Är fönstret/skärmen mindre än 768 pixlar så gör jag allt till en kolumn samt justerar marginaler och några andra småsaker.

Det finns fortfarande en hel del saker att putsa på och jag måste testa på lite fler telefoner och webbläsare, men som ett första utkast fungerar det utmärkt. Prova gärna genom att göra er webbläsare smalare, när ytan som hemsidan visas på blir mindre än 768 pixlar så kommer (förhoppningsvis) vissa saker automatiskt ändra storlek.