Webbdesign

Två hårdkokta länktips och en reflektion om responsiv webbdesign

30 januari, 2013

Responsiv-Design_440

För det första är programmering inget vi arbetar med personligen på Webbevakning, och det är mycket sällan som vi tar upp såpass tekniska aspekter. Men vi har en teknisk bakgrund och en hög förståelse för webbteknik och utveckling, och teknik är förutsättningen för digital kommunikation. Så när jag tog del av de här länktipsen idag kunde jag inte låta bli att dela med mig av dem.

För just responsiv design tycker jag suddar ut gränserna mellan kommunikation, design och teknik. Eller kanske inte suddar ut. Snarare binder samman på ett nytt sätt. I praktiken ställer produktionen av responsiva webbplatser nya krav på projektkommunikation genom hela kedjan av: målgrupp > syfte > kund > projektledare > designer > programmerare > publiceringsverktyg. Alla delar måste stötta varandra och det måste hänga ihop idag på ett nytt intressant sätt som tvingar många att tänka och lära nytt.

Att förstå tekniken förbättrar kommunikationen

Det kommer ständigt ny teknik, nya verktyg eller funktioner både på grund av förbättringar eller nya behov som uppstått. Vi som jobbar med kommunikation varje dag i multipla kanaler känner att det dels är viktigt att hänga med men faktiskt också att har vi bättre koll på tekniken så kan vi tidigt nyttja den på rätt sätt för bättre kommunikation.

Just nu är vi involverade i två projekt där just den responsiva aspekten är extra viktig. Vi har gjort ett antal rena mobilwebbar men få helt responsiva webbplatser tidigare, så det är riktigt kul med intressanta diskussioner med både kund, designer, utvecklare och med oss som har tyngdpunkten i löpande kommunikation – som ska informera, marknadsföra, sälja och alltid fungera.

Jag siktar på att återkomma med djupare reflektion kring förhållandet mellan teknik och kommunikation i en responsiv design i samband med lansering av kundprojekten längre fram. Nu till till de där länktipsen.

Länktips för mall och verktyg till responsiv webbdesign

Det första tipset gäller designarbetet med avstånd och marginaler för olika plattformar. Det finns så många olika mått och upplösningar på olika telefoner, plattor och datorer att det knappt går att hålla reda på. Här gäller det att sätta marginalerna rätt för att en given designanpassning ska fungera för så många skärmar som möjligt samtidigt som innehållet ska presenteras på ett bra sätt. Är du involverad i responsiv design på något sätt så är det här en mycket nyttig artikel att läsa, både för övergripande förståelse och för handfast arbetsmall.

A Simple Device Diagram for Responsive Design Planning

Det andra tipset är en liten genväg på vägen mellan design och teknik. Ett ”grid” att designa efter och en funktion som hjälper till att göra verklighet av den. Prova förresten ändra storleken på webbläsarfönstret när du tittar på länken, så ser du hur innehållet renderas om efter bredden på fönstret.

1140 CSS Grid System

Ett sista tips, fast mer för underhållning, är ett grymt exempel på responsiv webbdesign. Surfa på en dator till SVT Play och dra i hörnet på ditt webbläsarfönster. Så kan det fungera på riktigt helt enkelt.

Du kanske också vill läsa

1 kommentar

  • Reply #Blogg100 - en utmaning vi antar, på vårt sätt - Webbevakningsbloggen 1 februari, 2013 at 11:39

    […] januari: Två hårdkokta länktips och en reflektion om responsiv webbdesign | […]

  • Svara