Viktor Bijlenga

Building Smartphone-Optimized Websites +

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

Googles rekommendationer om hur man bör hantera innehåll för mobila enheter. En bra anledning till varför man faktiskt bör bygga med Responsive Web Design.

Responsibilty Email Design

mail

Fler och fler människor läser sin mail i sin mobil, på en iPad eller via datorn. Det ställer nya krav på hur vi designar våra utskick. Det är vårt ansvar att se till att även nyhetsbrev tar steget in i framtiden.

Responsive Web Design kan vara ett sätt att möta dessa förändringar som just ju pågår med vår inbox, men jag tror inte det är det fullständiga svaret på problemet.

Därför har jag börjat tänka på hur jag själv skulle vilja att det vara. Dessutom har jag hittat på ett begrepp för det, som jag brukar använda när jag funderar kring dessa frågor.


Responsibilty Email Design

  • Responsibility – Ta ansvar för vad du skickar. Ingen gillar skit.
  • Responsive – Fokusera på upplevelsen = skapa bra och flexibelt innehåll för dina plattformar.
  • Respons – Utvärdera ständigt och förbättra i lagom takt. Tänk feedback.

Tre enkla punkter, som jag tror skulle förbättra många utskick som görs via email.


Responsibility – Ansvar är viktigt

Låt varje person välja själv om de vill ha ett nyhetsbrev. Använd inte någons adress bara för att den finns i något system. Var transparent och öppen. Låt de som vill ha mail, få dem. Opt-in, inte opt-out.

Det finns få saker som är lika tröttsamt som att avregistrera sig från nyhetsbrev som man inte vill få. Och du, se till att det är förbannat enkelt. Ingen blir glad av att krångla.


Responsive – Varför optimera för nya enheter?

device

Campaign Monitor:

If you send email newsletters, it’s likely that a growing percentage of your subscribers are reading your messages on an iPhone, tablet or similar. When we last surveyed email client popularity in 2011, we found that almost 20% of email opens occurred on a mobile device, rising dramatically from a mere 4% of the market when we last ran the numbers in 2009. iOS devices accounted for over 90% of these reported opens.

Små skärmar blir allt viktigare, även när det kommer till email. Fortfarande är det alldeles för många utskick som ser ut som skit när man öppnar de på en liten skärm.

Design är viktigt och en svår utmaning

Det här är en svår punkt att ge råd kring, eftersom jag upplever det som en utmaning att få allting att fungera som man vill. Alla webbdesigners som har designat ett nyhetsbrev vet hur krångligt det är. HTML-markup och stöd för CSS är lite bristfälligt. Fortsätt designa innehåll och koda, så löser det sig.

Tips på läsning:


Respons – Hur börjar jag?

Fundera igenom vilka nyhetsbrev du gillar. Lär dig av deras metoder, och börja diskutera hur era utskick kan bli bättre.

Att lära sig att göra vackra utskick är inte lätt. Det kräver tid, kunskap och en hel del experimenterande.

Nyhetsbrevet Pleasecopyme som Mattias Åkerberg gör inspirerar mig mycket, trots att det är analogt. Han har en skön ton, dessutom lyckas han ta betalt för det. Inspiration behöver inte bara inhämtas från samma medium. Lär dig av dina hjältar.

Tjänsterna Mailchimp och Campaign Monitor jobbar ständigt med att bli bättre. Följ med i deras processer. Tyvärr har jag alldeles för dålig koll på svenska alternativ som är i klass med dessa när det kommer till funktionalitet/prismodell.

Jag prövar just nu själv alla olika idéer jag kan på I’m With Friends utskick. Det är långt ifrån en fantastisk upplevelse, men sakta men säkert hoppas jag på skapa en bättre upplevelse för de som prenumererar. Vi skickar ungefär 1-2 nyhetsbrev i månaden.


Sammanfattning

  • Förutsättningarna förändras snabbt. Håll dig uppdaterad och alert.
  • Design hjälper till att göra information tillgänglig, även i email.
  • Ta ansvar för din kommunikation. Allt är marknadsföring.

Mer läsning


Om du har tankar, idéer eller kommentarer så pratar jag gärna med dig på Twitter. Där kan du även följa mig.@viktorbijlenga

Ikonerna i inlägget kommer från Entypo.

Nypremiär för SVT Play +

Det är lättare att se SVT Play i mobiler och surfplattor. Sidan anpassar sig automatiskt, knappar och kontroller är anpassade för mobilens pekskärm.

SVT Play blir bara bättre och bättre. De levererar en ytterst vass tjänst i toppklass. Jag är otroligt imponerad av deras utvecklingstakt. Att kunna se nästan allt som SVT sänder, utan att äga en tv är väldigt smidigt.

Responsiv webb är the shit! Men vi skiter i’t

Oscars Altkvist, i sitt inlägg Responsiv webb är the shit! Men vi skiter i’t!:

Det här är en sak som plågat mig ett tag. Webbyråer som påstår sig älska responsiv webb, mobilanpassning och allt vad det heter, men inte använder det på sin egen sajt. Ungefär som sociala medie-experter som inte finns på Facebook.

Att designa webbplatser är ingen lätt uppgift. Förutsättningarna som vi har när vi bygger webbplatser förändras ständigt. Det är en av anledningarna till att jag tycker att det är spännande att designa för webben. Ingenting är sig lika, utan allting förändras.

Andy Clarke skrev i februari 2011 några väldigt kloka rader om webbdesign:

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right. And that’s why I don’t care about Responsive Web Design.

I och med att webben är ett levande medium så sker det förändringar. Se till att häng med i utvecklingen, börja följ ett gäng bloggar, börja skriv själv och börja ta ställning i utvecklingen. Webbdesign är idag inte samma sak som det var igår. Det är faktiskt väldigt enkelt: saker förändras, och därmed behöver vår inställning till saker förändras.

Idag är det kanske responsiv web design, pixeltäthet eller vilket språk vi ska skriva våra stillmallar i som står högt upp på agendan. I morgon är det något helt annat.

Jag tar det en gång till: I morgon är det något helt annat. Alla som jobbar för att utveckla webben, bör vara intresserade av att utveckla webben med hjälp av nya idéer. Det är ingen hemlighet att det tar tid att förändra processer, men samtidigt lär det aldrig hända om ingen börjar.

Experimentera på era egna webbplatser, skriv vad ni tycker, läs varandras kod. Jag vill i alla fall att webben ska bli en mer inspirerande, mer kraftfull och mer fantastisk plattform att jobba med.

Till sist. Det är vår förbannande skyldighet att skapa vackra webbplatser som bygger på modern teknik. Allt annat är ett skämt.

Framtidens webb är anpassad

Brad Frost om Responsive Web Design

The fact is that many of these modern mobile browsers actually do a pretty good job at rendering “full” websites. So that brings us back to Alex’s point: why the fuss with responsive web design? Why bother? Here’s the point Whenever I talk or present on this subject, I usually lead off with these three images:
The point of creating adaptive sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts. It’s not because it’s “the right thing to do”. It’s not because it’s fun. It’s not because it’s trendy. It’s not so you can impress your boss by resizing a browser window.

Jag tycker Brads bildexempel är väldigt talande för vilken riktning webben är på väg mot. En webb där upplevelsen är mer betydelsefull, än tekniken.

***

Responsive Web Design är ett sätt att anpassa upplevelsen till många enheter snabbt. Ett sätt att bygga webbplatser som skapar bättre upplevelser. Men det räcker inte att bara ha en webbplats som skalar snyggt i olika storlekar. Det finns fler faktorer som väger in, när man bygger för webben.

Om det tar 20 sekunder att ladda en webbplats, har det ingen betydelse att den är 100% Responsive Web Design, byggd med fullständigt Mobile First tänk och massor av populära trender. Jag har redan slutat vänta, och söker vidare på något annat ställe.

Att det är snabbt är alltså viktigare än för mig. Snabbt går ofta hand i hand med snyggt, eftersom god design ofta leder till att relevant information presenteras för mig snabbt.

***

Jason Fried och David Heinemeier Hansson sammanfattar tanken jag försöker förklara bra i deras bok Rework.

Focus on what doesn’t change – The technology and software business seems to obsess with what is in flux and changing. Always new stuff. New languages and frameworks. Focus on what doesn’t change and think about the things that matter today and will matter 10 years from now. “Speed is a really important thing for our products. 10 years from now people will still want speed. We could make a Facebook app or we could just make things faster – so we make things faster.” Reinvest in the things that don’t change. Competitors will chase the next big thing. 10 things we’ve learned at 37signals

Min poäng är alltså följande; trots att webben ständigt förändras, finns det faktorer som är konstanta.

  • Användare använder webbplatser för att utföra något, underlätta för dina användare genom att fokusera på att upplevelsen är bra.
  • Se till att webbplatsen är snabb, så att man inte behöver vänta på att få saker gjort.

Som designers är det vårt jobb att förenkla, förklara och förbättra upplevelser, så att de anpassas efter rådande förutsättningar. Bra webbplatser skapar bättre affärsmöjligheter, och nöjdare kunder. Att göra en besökare till en kund, är syftet i en e-butik. Att låta besökarna ta del av innehåll, är tanken på en blogg. Se till att göra det förbannat enkelt.

Fokusera på att skapa bättre upplevelser, så blir framtidens webb bättre.


Följ Viktor på Twitter

Hitta breakpoints för Responsive Web Design +

Läsvärd artikel om hur man kan tänka som designer för att hitta naturliga breakpoints. Jag tycker detta tankesätt känns mer naturligt, eftersom det känns mer flytande.

Check it out on the largest screen you can get your hands on and make sure it looks great. Now drag the window and make it smaller until the design gets ugly. There’s your first breakpoint.

Responsive Web Design

Webben är i ständig utveckling. Under 2011 har jag lärt mig mer än någonsin. Från detta året kommer jag att ta med mig följande tankar. Se det som en reflektion kring en teknik som har förändrat min approach till hur man kan bygga en webbplats.

Det här är hur jag gör, du är fri att göra precis som du vill. Istället för att försöka omvända dig, får du mitt perspektiv. Hur du använder webbens magiska möjligheter är helt upp till dig. Jag tror på att vi tillsammans är med och skapar fantastiska webbplatser under de kommande åren, oavsett vilket tillväga gångsätt vi har.

Under 2010 introducerade Ethan Marcotte Responsive Web Design i en artikel på A List Apart. Senare kom även boken Responsive Web Design av samma man. Jag är lite seg i starten, så under det senaste året har jag pluggat in hur konceptet fungerar.

(more…)