Moderna CSS-ramverk för dator, surfplatta och mobil.
Det här året har varit spännande. Mobila webbplatser har verkligen slagit igenom. Precis som mobilappar blev populära för några år sedan är det nu den mobila webbplatsens tur, och den gör entré med kraft.
Som med det mesta, när många arbetar med att skapa mobila webbplatser uppstår det nästan en sorts religion. Och med religion menar jag olika sätt att uppnå samma sak. Det finns en mängd olika CSS ramverk som är tänkta att användas av designers och utvecklare. Det här inlägget är en kort introduktion till några av dem, med några fördelar och nackdelar.
CSS-ramverk för att bygga mobila webbplatser
Adaptive 960 Grid System
Det här ramverket är en vidareutveckling av det klassiska 960.gs och känns som en korsning mellan 1140 pixlar och Less Framework – med en rejäl dos extra designalternativ. Sex olika designer! Du skämtar! Men det kan faktiskt vara användbart om du vill skapa en webbplats som ska visas både på stora pekskärmar och små enheter, till exempel i en utställning.
Fördelar:
- Fungerar på i stort sett alla skärmar. #vinst.
Nackdelar:
- Massivt designarbete. (6 olika designer)
Less Framework
Less Framework, skapat av Joni Korpi, är en utmärkt resurs och en bra startpunkt för dig som vill börja experimentera med att anpassa webbplatser för mobil och andra enheter. Ramverket använder fyra olika lägen: dator, surfplatta och mobiltelefon (stående och liggande). Det här är de plattformar som används mest just nu, och en webbplats byggd med Less Framework ser bra ut nästan var den än visas.
Eftersom Less Framework bygger på fasta värden är det lätt att förstå och komma igång med. Nackdelen är just de fasta värdena – de kan ställa till det om webbläsaren inte rapporterar upplösningen korrekt. Då kan fel version av designen visas. Du måste dessutom designa allt fyra gånger, vilket är riktigt frustrerande.
Fördelar:
- Specifika lägen för datorer, surfplattor och mobiler
Nackdelar:
- Mycket designarbete (4 versioner/per sida)
- Om webbläsaren inte rapporterar rätt upplösning visas fel design (till exempel på Android eller i iframes)
1140px Grid
Det här ramverket, skapat av Andy Taylor, gör upp med 1024 pixlar som designupplösning och utgår istället från 1280 pixlar med ett rutnät på 1140 pixlar. Till skillnad från Adapt 960 och Less Framework är 1140 gridet anpassningsbart snarare än statiskt, vilket är bättre men kräver mer arbete och smartare lösningar ur ett designperspektiv.
Och det är just det som gör det briljant. Varför? För det första blir det väldigt enkelt att skapa flexibla webbplatser som fungerar i nästan alla fönsterstorlekar. Dessutom finns ett andra läge anpassat för mobil. Men i stället för att försöka trycka in all information i mobilen (nej tack) handlar det om att verkligen anpassa innehållet.
Resultatet? Bara två designversioner, jämfört med fyra i Less Framework och sex i Adaptive 960. Det gör 1140 till ett riktigt bra alternativ, särskilt eftersom de flesta kunder inte vill betala för en massa extra design. Det är som att ta det bästa från Adaptive 960 och skala ner det till det mest väsentliga.
Fördelar:
- Adaptiv design
- Bara 2x designer – snabbt och snyggt!
- Inga genvägar med bilder
Nackdelar:
- Kräver mer omtanke i HTML och CSS (dvs. inget för nybörjare)