Detta är inte en föreläsning i vanlig bemärkelse utan snarare en resurssida kring mobila webbsajter/webbapplikationer. Tanken är att du följer materialet här och tittar på inspelningarna och läser referenser. Mycket är förhoppningsvis skåpmat vad det gäller det tekniska, men det finns många andra intressanta aspekter att beakta i detta material.
Introduktion
65% (54% 2012) av svenskarna använder internet i mobilen. I åldersgruppen 26-35 år är det 85% som använder internet i mobilen dagligen. (Källa: “Svenskarna och Internet 2013″). Är det rimligt att vi fortsätter att utveckla desktopsidor i första hand och mobilsajter i andra hand?
Joel Bergqvist från Daytona pratade om ämnet på Webbdagarna för något år sedan och ger här en utmärkt introduktion till denna del:
Responsiv webbdesign
Om du vill skapa en applikation eller webbplats som anpassar sig efter klientens bredd så är det någon form av responsiv design du kommer att använda. Du är förmodligen ganska van vid detta sedan ÅK1 då du arbetade med media-querys för att uppnå detta via CSS. Du kan jobba på liknande sätt i denna kurs, men för att komma fortare fram så kan jag tycka att det i denna kurs är dags att kika in något befintligt CSS-ramverk som kan göra mycket av arbetet för dig. Det kan också finnas en poäng i att läsa igenom den artikel av Ethan Marcotte på A List Apart som ligger till grund för begreppet Responsive Design. Du kommer säker att förstå att detta inte är något nytt och revolutionerande utan ett sätt som vi jobbat på i många år, men som först nu fått en benämning. Artikeln ger dessutom ett bra exempel på en sida med responsiv design.
I årets föreläsning om Mobila Enheter i Webbteknisk introduktion så tar jag upp en del nyheter som inte fanns med när du läste kursen och en del som kan vara intressant att repetera. Du bör som minst ha skrollat igenom denna föreläsning för att få en repetition och snappa upp det nya.
Länkar:
Mobile First
Mobile first handlar om att utveckla för mobila enheter i första hand. Varför? Lyssna på Luke Wroblewski som bland annat skrivit boken Mobile First när han ger dig tre konkreta anledningar.
Luke Wroblewski | Mobile First | live at An Event Apart | video from Jeffrey Zeldman on Vimeo.
CSS-ramverk
Givetvis kan du skapa dina designer från scratch med media queries, men ett snabbare och smidigt sätt att komma fram när det handlar om att skapa responsiva designer är att använda färdiga css-ramverk. Beroende på ramverk så får du lite olika hjälp. Vissa ramverk hjälper dig med att stila allt från formulär, tabeller till att skapa den övergripande layouten på sidorna medan andra ramverk koncentrerar sig på att bara hjälpa till med den övergripande layouten. En sak står klar, med tanke på den enorma mängd ramverk som finns tillgängliga så finns det inte ett ramverk som passar alla utan här får man experimentera sig fram för att försöka hitta det som passar dig bäst.
Under webbprojekten som WP2012 genomfört i höstas så var det många som provade på att använda ramverk då ett av kraven var en responsiv design. De populäraste alternativen var utan konkurrens “Bootstrap”, “Skeleton” och “Foundation”. Och det kan kanske vara klokt att börja titta på dessa om man känner sig osäker. För dig som testat på att använda CSS-förkompileraren SASS så kan “The Semantic Grid System” vara intressant att undersöka närmre.
