Startsidan är död. Leve startsidan. Eller mer korrekt, leve alla sidor, för idag måste varje sida kunna vara en startsida. Ju tidigare du inser att besökarna kommer in från alla möjliga håll och kanter, till olika sidor, desto tidigare kan du anpassa dig till situationen.

Hälften av min trafik kommer från sökmotorer eller länkar. Jag tänker mig en webbplats som ett flöde, där besökare passerar på sitt unika sätt. Alla sidor ska hjälpa besökaren att hitta mer information, om det som kan intressera dem. Mitt jobb som designer är att se till att flödet känns naturligt.

Läs vidare om tänket i  TDHs blogginlägg ”Startsidan är död”. Om du har några tankar kring detta som du vill prata om, hör av dig.

★ Startsidan är död, designa för flöden

Alfred hjälper mig numera med följande:

• Ett knapptryck tar mig till mina nyhetskällor på nätet, perfekt varje morgon/kväll.
• Att sätta skärmen i viloläge via tangentbordet.
• Koppla upp mig mot iMacen via VNC när jag jobbar från något annat ställe.
• Öppna program med ett knapptryck, t.ex Safari.
• Historisk på mitt ”Clipboard”.

Ett litet program som gör sitt jobb ordentligt, och låter mig spara massor av tid.

★ Alfred

Being a Web designer & not considering speed/performance is like being a print designer & not considering how your colors will print.

Jag instämmer. Vi behöver ställa olika frågeställningar, när vi designar för olika medium och mottagare. Vi behöver ställa rätt fråga, vid rätt tillfälle.

★ Design handlar om att ställa rätt fråga, vid rätt tillfälle

Du hittar det under ”Search Tools” på Safari Extensions (tyvärr finns ingen permalänk, kasst Apple), eller som en SIMBL plugin.

Safari Extensions

—

Bonus: Om du inte vill installera något, kan du trycka ”Command-Option-F” för att skriva i Safaris sökfält.

★ Sök i adressfältet med Safari Omnibar

Den som läser kommer garanterat överge din text om den är 1) ointressant, 2) krånglig eller 3) både ointressant och krånglig. Förmedla ett intressant innehåll på ett sätt som gör det lätt att läsa. Det kan verka självklart, men redan här kör många skribenter i diket. Skriv så att folk förstår. Då är chansen större att de också köper.

9 skrivråd som gör din text lätt att läsa

—

Telia Smartare vardag går igenom enkelt och tydligt, vad en podcast är och hur man lyssnar på sin mobil. Jag rekommenderar Instacast till iOS, och iTunes till datorn.

Podsändning eller podradio som det också kallas är en metod för att publicera ljud- och videofiler via nätet. För att sprida dessa ljud- eller videofiler använder man sig av RSS och på det sättet kan man enkelt prenumerera på en podcast. Detta innebär att vem som helst egentligen kan skapa en radiokanal och sprida kostnadsfritt över nätet.

Vad är en podcast?

—

Lost Type är en resurs för dig som gillar typsnitt. Du kan betala hur mycket du vill, eller inget, för typsnitten hos dem. Alla pengar går oavkortat till designern bakom typsnittet. Dessutom är deras webbplats ursnygg.

Losttype.com

—

Shawn Blanc briljerar med några ytterst tänkvärda rader om vad som är viktigt i livet.

So yes, you can tell a lot about me by the things I own. But they are just that — things. They can be stolen, broken, taken, and lost.They should never become distractions to the things that matter most, nor should I ever allow them to define my character, my relationships, and my beliefs.

It’s Just Stuff

★ Länktips från veckan

Äntligen kunde jag motivera mig till att köpa en enhet, som jag inte alls visste vad jag skulle använda till. Jag visste att jag ville ha en iPad med kamera, därför köpte jag inte första versionen. Jag minns även att jag motiverade köpet med att det är viktigt att kunna pröva webbplatser, på riktigt, inte bara i en emulator.

Jag visste även att jag ville ha en iPad med 3G. Något som jag idag verkligen står fast vid. I vilket fall. Jag satt i Spanien, och kände att detta var stort. Frågan som ekade i mitt huvud var följande:

Vad kan iPaden erbjuda mig?

Strax därpå köpte jag en iPad 2 efter en hel del köande. Till en början använde jag den mest till för att att bygga webbplatser, där man kunde trycka på knappar, svepa med fingret, eller vrida på enheten för att få en annan upplevelse. En större variant av iPhone som fungerade bättre för att skapa mer inovativa webbplatser.

Att pusha gränsen för mig som webbutvecklare, är spännande. Hur kan jag skapa innehåll, som är bättre anpassat för hur jag faktiskt vill använda webben på en bärbar enhet?

Vad används iPad till?

Att surfa via iPad, är en enklare upplevelse. Det krävs inte att jag ska starta en dator, det är bara att plocka upp ”paddan” och skriva in en adress. Det går så fruktansvärt fort att kolla upp ett recept, läsa rubrikerna på DN, eller att bara läsa ett blogginlägg. Jag har även märkt att jag inte multitaskar i lika stor utsträckning, när jag surfar via iPad.

Jag använder även min iPad till att svara på många av de mail jag får. Att svara på mail på iPaden, får mig att fokusera, vilket leder till att jag snabbt betar av de flesta mailen jag behöver svara på direkt. Dessutom hjälper det mig att hålla svaren korta och konkreta. Sparrow på Mac, är en favorit när det kommer till att hantera mail på Macen, eftersom det får mig att uppleva samma sak som på iPaden.

Jag gillar att läsa länktips från mitt twitterflöde på iPaden, eftersom det är mer behagligt för mig att läsa på en större skärm. Jag twittrar allt mer sällan från datorn, så iPaden har blivit ett bra komplement för sociala kontakter.

iPad + Trådlösa högtalare

Tillsammans med ett gäng Bluetooth högtalare, lyssnar jag i stort sett varje dag på Podcasts. Något jag aldrig upptäckt utan min iPad på samma sätt. Podcasts fungerar toppen som underhållning eller som läromedel för mig. Jag har hittat en skön mix, som jag gillar att lyssna på för att hålla mig uppdaterad. Instacast HD levererar en fantastiskt bra upplevelse, ljudet strömmas trådlöst till där jag befinner mig via Bluetooth. Detta är säkerligen en av de bidragande anledningarna till att jag idag har en egen podcast, Anna & Viktors Podcast.

Jag diskar, lagar mat eller gör något annat som är lätt att kombinera med just lyssnande. Denna kombination är svårslagen. En form av passiv konsumtion som passar mig utmärkt. Att göra samma sak med sin dator, är inte alls lika smidigt enligt mitt tycke.

iPad + Bluetooth tangentbord

Att skriva på iPad är något jag verkligen gillar, jag skriver nästan allt som du läser på den här bloggen, i appen iA Writer direkt på iPaden. Dropbox/iCloud synkroniserar texterna, så att det går enkelt att lägga upp direkt på bloggen. Jag tycker att det är smidigare att hantera länkar och bilder från datorn, så oftast skriver jag texterna som markdown, och sen lägger till länkar och bilder i efterhand.

Att koppla ett trådlöst tangentbord till iPad, gör det lättare skriva längre texter. Jag har svårt för att skriva längre stycken på iPadens touchtangentbord. Ett fysiskt tangentbord underlättar skrivandet. Att inse detta för mig tog lång tid, jag försökte säkert i 3-4 månader med att lära mig att skriva fort på iPaden. Tillslut gav jag upp, eftersom jag aldrig riktigt fick någon bra kläm på det.

Topp 10 iPad appar, som jag gillar

Antalet appar på min iPad är faktiskt ganska få. Jag använder oftast Safari, Twitter, Mail, Instacast HD, Reeder, Instapaper, iA Writer , AirVideo, GTA3 (mitt enda spel), Dropbox, Skype, Facetime och Spotify (iPhone). 10 appar om man räknar bort de inbyggda, varav 4 är gratis.

Istället för hundratals appar, har jag bokmärken direkt på hemskärmen till olika webbplatser. Ibland hinner man inte med att kolla vad som skrivs, därför sköter Reeder mina RSS-prenumerationer, och sen skickar jag det jag vill läsa ikapp till Instapaper.

Slutsats

iPad ersätter inte en dators funktion för mig, utan fungerar som en förlängd arm. Jag gillar att den är såpass bärbar, att surfa på iPad är trevligare eftersom jag läser en hel del på nätet. Att lyssna på podcasts är något jag idag uppskattar väldigt mycket. Jag känner att surfplattan är här för att stanna. Upplevelsen kommer bara bli bättre.

★ iPad: Ett års användning av en ny enhet. Vad använder jag den till? Vad har jag upptäckt? Vad gillar jag?

Tidigare har det korrekta varit att göra följande, om både rubrik och brödtext skulle länka till samma sida:

<h1><a href="/exempel">Exempel</a></h1>
<p><a href="/exempel">Det här ett exempel.</a></p>

För att länka olika element till samma sida, användes alltså en <a> tagg/element. HTML5 uppdaterar beskrivningen om hur <a> taggen fungerar.

Vad är skillnaden i HTML5?

HTML5 låter oss använda <a> taggen på flera element samtidigt.

<a href="/exempel">
<h1>Exempel</h1>
<p>Det här är ett exempel.</p>
</a>

Att göra som i exemplet ovan, är kanske ingen nyhet för de flesta utvecklare. Det har varit möjligt att göra så ganska länge i och med att många webbläsare stödjer det.

Varför är detta intressant?

Att de nya riktlinjerna för hur man kan skriva HTML, dokumenterar vad många webbläsare och utvecklare redan gör, känns som ett steg i rätt riktning. Det driver tekniken framåt, vilket skapar lösningar på problem som inte fanns igår, men som finns idag, och imorgon.

Vill du läsa mer om vad HTML5 innebär i praktiken, rekommenderar jag att du köper HTML5 For Web Designers av Jeremy Keith. Inspiration till att skriva den här texten, kommer från den boken.

HTML5 lästips och resurser

• Artiklar om HTML5 på A List Apart
• HTML5 Doctor
• HTML5 Boilerplate
• HTML5-mall för WordPress på svenska
• HTML 5 Cheat Sheet (PDF)
• Dive into HTML5 (PDF) via @rickard2

Har du länktips, åsikter eller kanske bara ett hej, skicka en tweet till @viktorbijlenga.

★ Länkstruktur i HTML5

Tre bra grundtips:

• Skapa bra innehåll. Om du inte har något att säga som är relevant, kommer inte folk att se dig som relevant. Acceptera det, eller gör något annat. Internet är demokratiskt. Om jag gillar din webbplats, så länkar jag till den. Så enkelt är det.

• Keep it simple. Att krångla till saker leder inte till bättre resultat. Fokusera på det som är viktigt. Om det inte finns något som är viktigt, skapa ett behov, som blir viktigt för dina besökare. Om tanken med din blogg är att folk ska läsa, men ingen står ut med att läsa innehållet, gör du fel. Det är väldigt enkelt.

• Skriv tydliga rubriker. Ännu en gång, att hjälpa sina besökare att hitta innehåll som är relevant, handlar om att hjälpa dem att hitta innehållet. Tydliga rubriker behöver inte vara tråkiga eller stela, utan kan vara hur kreativa som helst, bara det ger mig som läsare en hint om vad jag kan förvänta mig att få ta del av.

Bra innehåll håller i längden, och bygger förtroende hos dina läsare. Bra innehåll, skapar bra SEO på ett naturligt sätt. Det tar längre tid att bygga upp något som bygger på kvalitet, än bara kvantitet. En webbplats som följer webbstandarder, har bra länkstruktur och är genomtänkt är så klart också en fördel, men i grund och botten är det ditt innehåll som skapar värdet för mig som besökare.

Allting kan sammanfattas med en enkel regel:

Skapa innehåll kontinuerligt som är unikt och relevant.

★ SEO handlar om bra innehåll

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.

Vad är Responsive Web Design?

Responsive Web Design innebär i korta drag att man med hjälp av CSS skalar en webbplats så att den fungerar på olika skärmstorlekar. Responsive Web Design innehåller även en flexibla kolumner istället för fasta.

Enligt Ethan Marcotte är definitionen av Responsive Web Design följande: Fluid grids, Flexible images och Media Queries.

Mobile First – Utveckla för mobilen först

Till ca 2015 är det beräknat att 40% av världens befolkning har tillgång till internet. En stor andel av dem kommer naturligtvis främst eller enbart vara mobilanvändare (källa). Att ha denna framtidsanalys i bakhuvudet när man bygger webbprojekt kan vara klokt.

En intressant tanke lyfts även fram av Joni Korpi.

This site was designed Mobile First. The styles that make up the mobile version of its layout, which I’ll call the Narrow Layout from now on, are not inside a media query, while the styles that make up the wider versions are. As a result, browsers with no support for media queries will only see the Narrow Layout. This is a good thing.
- Joni Korpi

Istället för att skala ner en webbplats med hjälp av media queries, kan man använda dem för att skala innehållet för större skärmar. Konceptet kan kännas lite bakvänt, att bygga den mobila webbplatsen först, för att sen anpassa den till enheter med större skärmyta.

En bonus som uppstår när man använder media queries för att skala upp en sida, är att man slipper ta hänsyn till äldre versioner av Internet Explorer i lika stor utsträckning. Eftersom inte äldre versioner av Internet Explorer stödjer media queries ser de helt enkelt den mobila webbplatsen. Några småfix krävs fortfarande för att det inte ska se helt tokigt ut i Internet Explorer.

Plötsligt öppnar sig en värld av funktioner i moderna webbläsare som man tidigare kunnat använda sig av i begränsad utsträckning, eftersom man har varit tvungen att tänka på äldre webbläsare. Nu kan man använda dessa i princip fullt ut. Här är några exempel:

• Många CSS3 selectors
• :before och :after
• opacity, box-shadow, och text-shadow
• min/max-width och min/max-height
• rgba() och hsla()!

En annan fördel med att bygga för mobilen först är faktiskt, att det hjälper mig att fokusera på det som är viktigt. Jag håller med om det Luke Wroblewski skriver fullständigt. Fokusera på det som är viktigt. Då blir det bättre.

Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.
- Luke Wroblewski

Några kloka tankar jag har börjat tänka, varje gång jag bygger en webbplats:

• Vad är webbplatsens syfte?
• Vilka är dina besökare?
• Vilken typ av information letar dina besökare efter?

Fluid grids

Att lära sig att förstå konceptet med fluid grids var för mig inte helt lätt. Jag fick helt pröva väldigt många gånger innan jag riktigt förstod storheten. Övning ger färdighet. Ett tips kan vara att kolla in Golden Grid System, som är ett Responsive Web Design framwork byggt av Joni Korpi. Jag lärde mig många intressanta tankar genom att studera hans kod.

Flexible images

Flexibla bilder är en helt egen historia, som jag inte riktigt har kommit underfund med vilken lösning som passar mig bäst. Det finns så många olika lösningar.

Just nu håller jag på och exprimenterar med Adaptive Images for Responsive Designs tekniken som Matt Wilcox skrev om på julkalendern 24ways.org

Media Queries

Öva, öva och åter öva. Att ha tillgång till olika enheter såsom iPhone, iPad och någon Android lur/surfplatta gör det enklare och roligare. Att se hur saker ser ut för användare är en viktig del av processen. Projektet 320 and up har varit en riktigt bra resurs. Ett annat tips är att kolla på Mediaqueri.es och se hur andra har gjort.

Avslutningsvis

Följande citat kommer jag ta med mig som vägledning under 2012.

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.
- Steve Lorek

Resurser/Verktyg

Responsivepx – Utvecklingsverktyg för att testa olika skärmstorlekar
Fittextjs -  Javascript som erbjuder en smart finess för rubriksättning.
Fitvidsjs - Javascript som anpassar videoklipp till rätt storlek.
Golden Grid System – Ett Responsive Web Design framwork byggt av Joni Korpi
320 and up – Ett framework för att bygga Mobile first.
Mediaqueri.es – Inspirationskälla.

Intressanta länkar

Responsive Web Design av Ethan Marcotte
Responsive Web Design Book av Ethan Marcotte
Adaptive Web Design av Aaron Gustafson
Mobile First av Luke Wroblewski
Responsive Web Design: What It Is and How To Use It av Kayla Knight
Responsive Web Design and WordPress av Sarah Cannon
Artiklar om responsive web design och flytande grids av Henrik Tornberg
I don’t care about Responsive Web Design av Steve Lorek
Först mobilt, enbart mobilt av Erik Larsson
Några tankar om Responsiv Design av Thord Daniel Hedengren
Responsive Web Design, med Johan Edlund av Per Axbom

Fler tips eller kanske några tankar? Hör av dig till mig på @viktorbijlenga

★ Responsive Web Design

3D transforms are awesome, but they’re even cooler with lighting effects!

3D rendering av en iPad med ljusreflektioner. Riktigt läckert.

Matrix Code in CSS

A CSS experiment using transitions, 3D transforms and animations. No JavaScript is required.

Om du är svag för Matrix och CSS-kod har du hittat rätt.

CSS3 Dodecahedron

Snyggt interaktivt expriment, som tydligt bevisar att CSS-fantasin inte behöver ha några begränsningar.

—

Har du fler bra exempel? Skicka en tweet till mig på @viktorbijlenga

★ CSS3 Labs