Jag skrev en tidigare post om hur jag hamnade högst upp hos Google. Här tipsar jag vidare om de råd Google själva ger för att man ska göra sina sidor sökmotorvänliga.

De har nämligen gett ut Grundhandbok om sökmotoroptimering. I den kan man få många handfasta råd. I förordet kommer det viktigaste: “Glöm inte att dina slutgiltiga användare är besökarna på din webbplats, inte sökmotorerna.” Det handlar helt enkelt om att skriva för de användare man vill ska komma till webbsidan. Användaren i fokus är det mantra som ligger bakom alla lyckade webbplatser!

Här följer några av de viktigare punkter man lyfter fram:

• Skapa unika, relevanta titlar för sidorna – i titel-taggen.
• Sökord som använts i sökningen markeras feta i titeln på för sidan (som är vad Google visar som sin träffrubrik).

• Använd metataggen “description” – skriv en koncentrerad sammanfattning.
• Google kan använda denna för att sammanfatta din sida, om man inte hittar något lämpligt i texten på sidan.

• Förbättra webbadressens struktur
• Skapa en enkel katalogstruktur
• Använd relevanta ord i adressen
• Undvik konstiga sökvägar, som mängder av siffror och “obegripligheter”.
• Gör webbplatsen lättnavigerad
• Gör det möjligt att ta bort en del av webbadressen.
  Om man ser tydliga ord i en adress, kanske man hellre vill komma till en sida som ligger lite högre upp. Se då till att den är tillgänglig.
• Skapa en webbplatskarta

• Erbjud bra innehåll och tjänster
• Skriv lättläst text
• Håll ordning på ämnena
• Skapa nytt, unikt innehåll

• Skriv bättre ankartext
• När du gör länkar är det viktigt hur du formulerar själva texten som utgör länken.

• Optimera bildanvändning
• Använd attributet alt=” ” till dina bilder, speciellt om de är länkar.

• Använd rubrikerna på rätt sätt
• Betona det viktiga med rubriker, dvs. html-elementen för rubriknivåer: h1 – h6

• Använd robot.txt effektivt
• Lär dig använda filen som vägleder robotar, robot.txt
• Tänk på rel=”nowfollow” för länkar

• Om webbplatsen har mycket skräpkommentarer kan det påverka rankingen hos Google. Ett sätt är att använda värdet “nofollow” på rätt sätt i ex. kommentarer på en blogg.

• Marknadsför din webbplats på rätt sätt
• Antalet länkar till en webbplats påverkar hur Google värderar den
• Använda kostnadsfria verktyg för webbansvariga
• Google har verktyg för att hjälpa till, t.ex. Google Analytics.

Allt detta väl förklarat och dessutom lite om Mobilsajter hittar du i Grundhandbok om sökmotoroptimering.

Hur hamnar jag högst upp på en  Googlesökning? Den frågan vill många ha svar på. Problemet är att det inte finns något enkelt svar. Google söker genom den urskog av webbsidor som finns och rankar dem efter speciella kriterier. Det finns en hel bransch som lever på sökmotoroptimering, SEO (Search Engine Optimization). Deras dröm är givetvis att veta exakt hur Googles rankningsalgoritmer ser ut!

Hur kommer man då högst upp? Faktum är att jag borde veta, för  idag sökte jag på en av de bloggposter som haft flest träffar på på denna blogg.  Med sökorden “storlek foto körkort” visade det sig att jag låg på första plats hos Google! Det visste jag inte ens själv. Bara att många använt sidan.

Varför har den hamnat högst upp? Det kanske kan vara en lärdom för många av oss. Jag skulle nämligen ta ett foto som sonen skulle använda till nytt körkort. Jag visste att det skulle vara vissa mått på det, men det var synnerligen krångligt att hitta en webbplats som talade tydligt om var dessa mått fanns. Därför bestämde jag mig för att skriva ner det jag hittat i en bloggpost, mest för att ha tillgång till det själv om jag behövde göra om det.

Det har visat sig att många använt det jag skrivit. Kanske inte minst för att jag både angett kraven  för fotot och presenterat den viktigaste informationen på ett enkelt sätt, men också länkat till källan.

Läxan för mig och oss blir:

• unikt innehåll
• tydligt presenterat

Detta är  troligen det allra viktigaste för att hamna högst hos Google.

Faktum är att Google ger råd om hur man ska handskas med problematiken att bli hittad. Tydliga råd. Man har gett ut en Grundhandbok om sökmotoroptimering.

Jag återkommer till den i ett nytt inlägg.

När man vill veta vilket typsnitt som används på en webbsida får man kika i CSS. Ett nytt plugin till chrome fokuserar på just detta. WhatFont skapar helt enkelt en lite ruta som talar om vilket typsnitt som valts. Smidigt.

Exempel från denna sida:

Får givetvis inte glömma att 24ways.org återigen presenterar en kalender för alla oss som sysslar med webben. Det är 7:e året!

Se om du hittar något som passar dig.

Har just lagt ut länkar för mina elever till en demoserie jag gjort tidigare. De behöver se hur man kan använda en mall i Dreamweaver (CS4) och anpassa den på ett enkelt sätt, genom att ge sig in i CSS-filen och justera.

Här introduceras bland annat:

• DEL 1 – Använd mallar i Dreamweaver och spara CSS och HTML-fil
• DEL 2 – Hitta i Dreamweaver, HTML-kod, CSS-regler. Lägg in bakgrundsbild och sidfot.
• DEL 3 – bakgrundsbilder och -egenskaper i Dreamweaver, bl.a background-repeat.
• DEL 4 – kort introduktion till hur man använder Firebug för att arbeta med en sida, bl.a. att läsa CSS-regler och box-modellen i pixlar.
  Hur man arbetar med CSS-regler, framför allt boxmodellen, bl.a. marfgin och padding  i Dreamweaver

Den är i fyra delar och börjar med en tom mall och slutar med bilden du ser ovan.

Om du behöver papper för att skissa layout på webbplats finns det en uppsjö på nätet. Jag hittade en variant jag inte sett tidigare. Det är en pdf med några olika versioner på kolumner (grid). 3, 4, 5, 10, 12 och 16 kolumner.

Det är ett smidigt sätt att arbeta och få tydlig struktur på sina skisser.

Mina elever har i uppgift att använda ett verktyg på webben för att göra en färgpalett. I samband med det letade jag fram några tjänster som finns att använda.

Många av verktygen gör i princip samma saker. Man väljer en färg, kan få en färgpalett med olika färgschema, till exempel analoga färger, komplementfärger, triadfärger m.m. Man får ut färgvärden och kan kopiera en palett. Det som skiljer dem åt är gränssnittet och sättet att jobba.

När jag gjorde min översikt, kom jag på att jag kan ställa samman den så andra kan få glädje av den. Den  finns som pdf (med länkar). Den är gjord snabbt, bara för att få en ungefärlig översikt. Vill någon göra det grundligare, varsågod: här är exceldokumentet.

Några kommentarer till översikten:

• Färgschema – monokrom, analog, komplement med flera
• Skapa färgpalett – anger om man skapar den färg för färg (egen) eller får ett färdigt förslag utifrån vald färg
• Variation av palett – anger att verktyget ger förslag på olika variationer av den valda paletten, till exempel ljusare, mörkare, pastellig…
• Liknande färger – en förteckning över färger som ligger nära på något sätt
• Färg från foto – ladda upp ett foto och hämta färger från det
• Spara palett – återvänd och arbeta vidare med paletten
• Publicera palett – någon form av community att publicera i
• Exportera palett – spara ner till datorn i t.ex. Adobes format
• Kontrastanalys – jämföra med WCAGs rekommendationer (det finns en enkel separat tjänst att testa kontrast och läsbarhet)
• Simulera synproblem – välj olika synnedsättningar för att se hur paletten ter sig (här finns begrepp som jag inte har en aning om vad de står för)
• Färgmodeller – till exempel hex, rgb, lab…

Här följer en mycket kort resumé över de olika tjänsterna. Klicka på bilderna för förstoring:

Copaso

Copaso är ett mycket kompetent verktyg från colorlovers med lite plottrigt gränssnitt. Det är en hel del jag inte tycker är riktigt intuitivt. Men de konstaterar även att de har ett enklare verktyg,  om man tycker detta är lite för innehållsrikt. De har även en tjänst för att hämta färger från bilder.

Colorwizard

Color wizard är ett av verktygen från colorsontheweb. Detta är egentligen en hel webbplats som fokuserar på färg, med ett antal resurser.

Verktyget för att skapa palett  är lite enklare, om man nu tycker att dra i reglage för rött grönt och blått är enklare. Tydliga paletter med varianter i nyans, mättnad och ljushet. Lätt att växla mellan olika färgkombinationer som analog, komplementär och triadisk.

Colorexplorer

ColorExplorer är en samling verktyg för färgarbete. Man kan samla paletter, bygga upp paletter genom att plocka färger, en efter en. Man kan titta på en del färgbibliotek, som webbsäkra färger, plus en del jag aldrig hört talas om. Under colormatching kan man skapa färgpaletter som analoga, komplementfärger med flera. Vill man utnyttja funktionerna mycket blir det en betaltjänst. Utan betalning kan man “bara” spara 25 paletter.

Toucan

Toucan är ett verktyg från aviary (som har andra tjänster att prova). Det är ett kompetent verktyg, som kan skapa en palett med valfritt antal färger. Det är oerhört enkelt att justera och prova sig fram. Här finns massor av resurser. Färgvärden visas parallellt i HSV, RGB, CMYK och HSL. Jag tycker bättre om det ju längre jag provar.  Det är ett flashverktyg som öppnas i separat fönster.

Color Scheme Designer

Color Sheme Designer har varit min favorit ett tag. Mycket tydligt hur man växlar mellan olika färgschema. Paletten består hela tiden av fyra färger, men man kan få en färglista med fem variationer av de fyra huvudfärgerna i paletten, dvs 20 nyanser.

Dessutom kan man få en liten översikt på två skissartade webbsidor. En med ljusare och en med mörkare färgskala. Det ger en förhandskänsla hur det skulle kunna se ut. Rekommenderas!

Kuler

Ett verktyg från Adobe, känt för bland annat Photoshop.  Kuler är mycket kompetent och ganska lättarbetat. Det ger fin översikt och färgvärden i många enheter. Jag vet inte varför, men det har tagit emot att använda Kuler på senare tid. Det finns andra jag tycker bättre om. Det visar att det är mycket personligt vilka verktyg man väljer. Det beror nog ofta på vad man får för känsla för ett verktyg, inte bara vad det kan.

Fler verktyg

Vill du leta igenom fler verktyg kan du t.ex. läsa en artikel från Web design ledger eller en från Web Design Booth. Båda artiklarna har några år på nacken, men de flesta verktygen verkar finnas kvar.

Arbetsflöde är ett samlande begrepp för alla steg som används för att göra en webbplats. Från första början till färdig sajt. Hur arbetsflödet ser ut beror till stor del på i vilket sammanhang man gör webbplatsen. Till ett stort företag eller organisation? En liten privat webbplats? Det är stor skillnad.

Jag jobbar som lärare och ”lär folk göra webbplatser” på ungefär samma sätt som andra lärare ”lär folk läsa”. Därför handlar min vardag om de absoluta grunderna i att bygga webbplatser. Här vänder jag mig till dej som kanske fått i uppgift att göra en webbplats som en del av en nybörjarkurs i webbdesign eller kanske har kommit så långt att du vill pröva på att göra ett tema till WordPress på egen hand. Vi ska vrida lite på begreppet wireframe, se vad det innebär och vad du kan ha för nytta av det. Vi landar i en enkel ”metod” och på köpet får du referenser till bra fördjupningsmaterial.

Det arbetsflöde vi talar om kan delas in i följande steg. Bakgrunden sammanfattar vi i begreppet research: Vad handlar projektet om? Vilket sammanhang, vilka användare, speciella krav och begränsningar gäller?

I nästa steg gäller att generera, vrida och vända på idéer. Därefter blir det ofta någon form av prototyp, som följs av designarbete. Så gäller det att ”göra sidan”, dvs. den fas vi kan kalla utveckling. Till sist ser vi till att vi har ett korrekt innehåll och testar allt så det fungerar. Äntligen kan vi gå online. (Sen är det ”bara” underhåll och uppdatering kvar, det kanske viktigaste av allt!)

I denna process har begreppet wireframe en central roll. Ett okänt begrepp? Låt oss reda ut det.

Vad är en wireframe?

Vi konstaterar att en wireframe hör hemma i idéfasen i första hand. Huvudtanken är att ta fram en skiss innan den slutliga designen görs. En mer exakt definition gör Mário Andrade:

En webbplats wireframe visar dess grundläggande struktur. Den innehåller ingen funktionalitet eller design, det är den grundläggande strukturen för layout och fungerar som en guide för designern.
En wireframe ska omfatta all viktig information och behålla sidstrukturen ren och tillgänglig.

Mário ger oss följande exempel.

Han beskriver en wireframe med bilden av ett skelett. Det kan inte göra något i sig självt, inte ens hålla sig upprätt. Det behöver muskler. Här kommer designen in. Den håller samman sidan. Men det räcker inte. En kropp får inget liv med enbart muskler och skelett, den behöver hjärta och hjärna också. Inom webbutvecklingen motsvaras det av både front end och back end.

Jag gillar Will Evans sätt att beskriva wireframing: Ett tankeverktyg för att lösa ett givet problem. Han betonar vikten av en wireframe för att kommunicera med andra:

Medan jag undersöker problemet skulle jag tämligen enkelt kunna ha de olika designmodellerna i huvudet, men jag skulle misslyckas i min viktigaste uppgift, att skapa förutsättning för samtal mellan uppdragsgivarna, de tänkta besökarna och mig själv.

Will beskriver i sin artikel sitt eget sätt att arbeta. Den kom till som ett bakgrundsmaterial för ett kapitel i boken, A Project Guide to UX Design. Han konstaterar att en wireframe för honom lika mycket handlar om att få grepp om det (design)problem som ska lösas som själva lösningen av problemet. Därför börjar han alltid med kontexten. Vad är sammanhanget?

Wireframe på olika nivåer

Will avslutar sin artikel med en relativt detaljerad wireframe. Den är ett exempel på hur han under en process med många skisser tidigare definierat fram en wireframe utan plats för så mycket ändringar.

Janko Jovanovic skriver om ”Sketching, Wireframing & Prototyping” i boken The Smashing Book #2. Han inleder det med ett tänkvärt citat om arbetsflödet: ”Den steniga stigen från en dunkel idé till finputsat slutresultat är lika viktig som idén i sig – om inte viktigare, eftersom en idé utan ett korrekt genomförande bara blir en abstrakt tanke”.

Ha lyfter fram ett engelskt begrepp ”ideation”. Det motsvaras ungefärligt av vår idéstadium, men med fokus på att man faktiskt jobbar med idéerna. Inte att de ligger och slumrar någonstans. Bilden han använder sätter in begreppet wireframe i sitt sammanhang.

Här ser vi hur det är mera skissartat i början för att följas av mer detaljerade wireframes ju längre processen fortgår. Samtidigt sållas alternativa skissar bort efter hand.

Beroende på i vilket sammanhang och vilken roll man befinner sig i ett webbprojekt är behovet av detaljer i en wireframe väldigt olika.

Janko använder begreppet lo-fidelity wireframes, när de bara innehåller huvuddelarna, till vänster på bilden ovan. Här är det lätt att lägga till och dra ifrån saker på sidan. Det är fortfarande ett slags skisstadium. High-fidelity wireframes är mycket detaljerade, där de flesta avgörande designbeslut redan tagits.

Vad bör finnas med på en wireframe? Janko sammanfattar:

• Sidstruktur, som visar hur informationen organiserats på sidan, vad användarna ser och kan göra.
• Navigering, som visar hur användarna kan förflytta sig på sajten, var de befinner sig och vart de kan ta vägen.
• Interaktionsdetaljer, som visar vad som händer när användaren gör något, följderna av deras handlande och och nästa steg för att nå målet.

Vissa sammanhang kräver detaljerade wireframes, men det finns olika sätt att arbeta och det handlar om att hitta ett sätt man själv tycker är bra, och som funkar i det sammanhang man finns. Ibland behöver man förfinade wireframes, andra gånger kanske det räcker med en skiss på en servett!

En vardagsmetod – grå boxar

Låt oss kika på en ”vardagsmetod” för oss som inte jobbar i större sammanhang. Vi har inte behov av att göra lika detaljerade skisser. Efter lite arbete med innehållet, där vi tagit fram de olika delar som ska finnas med på sidan, handlar det om att prova sig fram till olika alternativ att utforma sidan. I detta läge sparar vi de kreativa designidéerna och -detaljerna. Vi provar helt enkelt vilka olika sätt det finns att presentera innehållet på sidan/sidorna (man kan få göra flera wireframes om man behöver helt olika sidor, t.ex. en unik startsida).

Låt en wireframe fokusera på innehållet och gör den enkel. Det finns en teknik som använder ”grå rutor”. Jason Santamaria visar exempel på detta med sin ”Grey Box methodology” i en artikel från 2004. Han beskriver hur han skissar strukturen på sitt innehåll med att fylla en wireframe med grå boxar.

På detta sätt fokuserar man på hur innehållet ska placeras på sidan/sidorna och lägger designen åt sidan. Om man öppnar Photoshop och börja skissa på en detaljerad design direkt är det oerhört lätt att fastna i detaljer, exempelvis i fråga om val av färger och typsnitt. Man riskerar att missa alternativa layouter för helheten. Andy Clark har anammat denna teknik i sin bok Transcending CSS och slår ett slag för metoden.

Om vi tittar på ett exempel från Janson Santamaria ser vi de grå boxarna i funktion.

Det är innehåll eller funktioner på sidan som ska placeras i de grå boxarna. Hur kan man ”lägga ut” de olika delarna? När man inte lägger till specifika designelement är det mycket lättare att hålla fokus på att prova olika alternativa sätt att placera innehållet. Det innebär inte alls att man saknar idéer för hur det ska se ut. Det innebär bara att man väntar med att fokusera på dessa idéer tills struktureringen av innehållet är klart. Det visar Jason i de olika skisser han hade med sig när han jobbade med wireframen ovan.

Jason ger själv ett tydligt exempel på användning av wireframe i ett testprojekt. Han visar tre varianter på förslag till wireframe och sen den färdiga designen.

Papper och penna

Några ord om själva tekniken. Använd gärna papper och penna. Framför allt i inledningsfasen. Av flera anledningar:

• Papper och penna är lättillgängligt.
• Du kan komma igång direkt.
• Det är billigt. Kräver inga program.
• Det hjälper till att fokusera på de viktigaste delarna, inte detaljerna. Har du bara en tjock filtpenna blir det ännu tydligare. Du får bara med huvuddelar.
• Det är lätt att kassera! Fångar man en idé så här blir det ingen prestige om man ratar den, vare sig för den som gör den eller den som kommer med kritik. Bara att knyckla ihop och kasta i papperskorgen.
• Den skissartade metoden uppmuntrar till att jobba snabbt och göra många utkast. Det är viktigt eftersom det inte handlar om att komma på en lösning utan hitta så många alternativ som möjligt.

Dessutom är det viktigt att notera: Man behöver inte kunna teckna för att göra wireframes! Det handlar inte om konstverk, utan om att förmedla idéer.

När man gjort sina skisser på papper kan man gå över till valfritt program och göra dem mer detaljerade. För enkla sajter kan det räcka gott med handskisser.

Avslutande exempel

Låt oss avsluta med ytterligare några exempel på wireframes. I boken ”Build Your Own Wicked WordPress Themes” går Brandon R Jones igenom hur man bör planera för att skapa ett eget tema. I slutet av arbetet med innehåll gör man en eller flera wireframes. Så här:

Han betonar vikten av att förbereda sajten för sidor med olika innehåll. Det enklaste sättet är då att göra en wireframe för varje innehållstyp. Här ser vi hur han ger ett exempel med en startsida, en sida där man listar poster, en sida för enbart en post och en för en enstaka sida (till skillnad från en post).

Elliot Jay Stocks ger följande exempel i boken ”Sexy Web Design”. De talar tydligt utan kommentarer:

Elliot säger för övrigt så här om vårt ämne:

När vi skapar en wireframe  tänker vi helt enkelt kring hur de olika delarna fungerar bäst på sidan. Vi överväger vilka element som ska lyftas fram och hur de bäst hänger samman.

Fler exempel

För exempel på wireframes kan du bege dig till I love wireframes, en plats där Ivana Jurcic samlar på olika exempel.

Hoppas denna översikt ger dig inspiration att testa wireframes, om du inte redan gör det.

PS.

Det finns många program för att göra wireframe. Det finns även tjänster på nätet.

Från Alex Walker på Design Festival kommer ett tips: gör sömlösa bakgrundsbilder utan att lämna webbläsaren (varken Photoshop eller något annat). Han tipsar om flera bra resurser.

Lost and Taken är Caleb Kimbroughs blogg. Här publicerar han bakgrundsbilder och mönster. De är gratis och fria att använda. Det finns mycket att bli inspirerad av. Han konstaterar i sin presentation att han faktisk kan leva av att skapa mönster och bilder på detta sätt.

En av dessa använder Alex när han går igenom några bildhanteringsverktyg från Aviary. Det finns bland annat ett tillägg till Firefox, Talon (Aviary Screen Capture and Quick Launch). Om man dessutom använder Aviarys Image Editor och Effect Editor, tjänster på webben, kan man göra sömlösa bakgrundsbilder för webben.

Alex går igenom stegen i en bloggpost. Jag testade verktygen – och en bild från Lost and Taken. Exempelsidan med sömlös bakgrundsbild finns här.

Känner du till Operas kursplan om webbstandarder? Nu finns där bortåt 80 artiklar som spänner från olika översikter om att utveckla webbsidor enligt standard, via CSS, HTML, JavaScript till sidor om HTML5, mikroformat m.m. Som vanligt: materialet är på engelska.

Eftersom jag inte kräver att mina elever ska läsa engelska har jag översatt ett par av dessa inför slutuppgifter de ska göra i kursen i webbdesign. Det är ett par artiklar. Det är informativ och nyttig läsning för den som vill fördjupa sin kunskap om hur man bygger en webbplats med bra innehåll och god funktionalitet.

 I den första artikeln, Informationsarkitektur – att planera en webbplats, handlar det om vad man ska tänka på när man planerar innehållet till en webbplats. Författaren tar ett exempel med ett låtsasband och går igenom allt från träff med dem till en färdig struktur för sajten.

Den andra, Vad behöver en bra webbsida?, handlar om vad det faktiskt är som gör en webbsida bra. Vad ska man tänka på? Här tar författaren upp begrepp som navigering, kontext, användbarhet och tilgänglighet.

Om någon är intresserad finns de att läsa eller använda. Just nu är de länkade i “tomma intet”, dvs. på en domän där jag enbart lagt upp material utan gränssnitt. Det är m.a. o. inget större idé att leta efter mer material där, även om det finns en hel del dolt. Jag ska åtgärda det, när jag får tid… och lust…

Här är artiklarna:

• Information Architecture—planning out a web site
  min översättning: Informationsarkitektur – att planera en webbplats
• What does a good web page need?
  min översättning: Vad behöver en bra webbsida?