Etikettarkiv: hemsida

Omslaget på gratisboken "Webbpublicering med Wordpress".

Bästa guiden för att komma i gång med WordPress

Jag har i flera år rekommenderat och delat ut Internetstiftelsens eminenta guide: ”Skapa en webbplats med WordPress”. Den är riktigt bra men börjar bli lite daterad eftersom den visar WordPress 3.0 och de senaste versionerna skiljer sig en hel del utseendemässigt i admingränssnittet.

Så nu är mitt förstahandsval Thord Daniel Hedengren pdf-bok: ”Webbpublicering med WordPress”. För mig dök den upp på radarn under wordpresskonferensen WordCamp Sthlm, i anslutning till Internetdagarna 2012.

Boken innehåller det viktigaste för att komma förstå och komma igång med en wordpressajt. Kapitelindelningen följer ett naturligt flöde.

Webbpublicering med WordPress  finns för nedladdning från Thord Daniel Hedengrens webbplats.

Sa jag att den är på svenska? Bara det…

Boken är sponsrad av en rad svenska webbhotell.

Thord Daniel Hedengren har skrivit flera böcker om WordPress. Jag har inte läst någon annan.

Sökmotoroptimering för webbredaktörer

Den här presentationen kommer från en inspirationsföreläsning för Friskis&Svettis.

Vi började med att prova att söka efter gym i södertälje i Google, en sökfras som verkar rimlig av personer i Friskis&Svettis målgrupp.

Skärmbild: Sökning efter gym i södertälje i Google.

Träfflista från Google när vi söker efter gym i södertälje. Klicka för att se i större format

Vi resonerar lite kring:

  • Friskis&Svettis syns inte i träfflistan som vi hoppats.
  • Högst upp och längst ned ser vi betalt annonsutrymme.
  • Diskussionsforuminlägg placerar sig bra. Uppfattas som relevanta. Tyvärr står det inget om Friskis&Svettis i inläggen, bara lokala konkurrenter. Här skulle vi ha svarat.
  • Kartbilden och de geografiska träffarna tar mycket plats. Här finns vi inte med heller.
  • Konsumentsajterna Reco och Rejta finns med.
  • Några gymportaler finns med och en av dem nämner faktiskt Friskis&Svettis så att det syns i träfflistan. Bra!
  • I början av andra träffsidan finns F&S Södertäljes facebooksida. Långt ned på sidan finns F&S Södertäljes hemsida.

Den nuvarande lösningen är verkligen inte bra. Att flytta till egen domän och använda WordPress kommer i sig förbättra utgångsläget att synas i Google och andra sökmotorer.

Hur ska vi då tänka när vi bygger upp våra nya sidor? Ett första steg är att skriva tydligt och förstå vad sökmotorerna uppfattar och vad de inte ser. Men om det i presentationen…

Post-it-lappar i olika färger för att bygga navigatiosmeny.

En metod för att bygga navigationsmeny

Nu ska vi bygga en navigationsmeny för din webbplats. Om vi ska göra det optimalt bra så har vet vi mycket om webbplatsens användare, vad de använder webbplatsen till, deras förväntningar och språkbruk. I nödfall kan vi ta genvägar men vi ska alltid testa av menyn på riktiga människor som inte varit med i arbetet.

Skriv ned syftet på webbplatsen på en postit-lapp. Vad vill du att besökarna ska göra. Skriv på en annan postitlapp ned vad dina användare vill göra när de kommer till webbplatsen.

Om du jobbar med persona, en sorts detaljerade schablonbilder av några typiska användare så tejpar du upp dem också.

Gör en snabb undersökning av liknande webbplatser. Är det några alternativ i menyerna som ofta eller alltid finns med? Vi ser nästan alltid något för att komma till startsidan ”HEM”, ”START” eller liknande. Och något val för att komma till kontaktinformation, hitta till oss, karta eller liknande. Skriv ned dessa kandidater på postitlappar också. Vi kan bryta mot branschpraxis men då ska vi göra det medvetet.

Nu går vi igenom vårt innehåll av sidor och skriver ned titel och kanske en kort beskrivning av varje sida på en postitlapp. Om du har många sidor som har liknande innehåll, en uppsjö av liknande produkter, flera mötesprotokoll eller liknande, så kan du sammanfatta dem med en postitlapp.

Nu grupperar vi ihop sidor som hör ihop, som har liknande innehåll. Vi tillåter att en del grupper är stora och en del är små. Flytta grupperna med liknande innehåll så att de ligger nära varandra.

Post-it-lappar i olika färger för att bygga navigatiosmeny.

Bygg upp navigationsmenyn för din webb steg för steg med postit-lappar.

Skriv en lapp med avvikande färg med ett eller några sammanfattande ord för varje grupp. Kan vi använda någon av lapparna som vi redan skrivit ned branschstandarden på vad som finns i andra webbplatsers menyer? Flytta in sidorna under lappen med sammanfattningen. Förstår vi vad som döljer sig under?

Om du är osäker på vad som funkar, kolla på postitlapparna vi satte upp först: webbplatsen syfte, vad du vill att besökarna ska göra, vad besökarna vill göra och eventuella personas som beskriver användarna.

Hur många sammanfattande lappar – som är kandidater till att bli menyalternativ har du kvar nu? För många för att få plats i navigationsmenyn? Då får vi antingen slå ihop några grupper eller bygga menyn i flera nivåer.

Hur vet jag om det är för många alternativ i menyn? Ett traditionellt synsätt baserat på hur många saker som vi kan hålla i huvudet är 5-9 alternativ. Jag tycker att det framförallt gäller att menyn ska synas bra och att det ska gå att hitta i den. Det finns så många olika sätt att bygga upp navigationsmenyn att det är svårt att ge konkreta råd. Oftast hamnar vi i en utrymmesbegränsning, en horisontell meny på sidan kan inte vara bredare än vad designen tillåter.

Bästa sättet är att prova sig fram. Gör något du är nöjd med. Be sedan någon som inte varit med i arbetet att leta reda på sidan som handlar om kundreklamationer, vänstergängade skruvar eller liknande och observera hur det går. Och observera är det samma som att titta på, inte att fråga ”vad tycker du?”.

Om du bygger menyn i flera nivåer så tar du gruppen av postitlappar med bara sammanfattningarna synliga, grupperar dem och sammanfattar dem i en postitlapp med ett eller få ord på. Alltså precis som i steget innan.

Så där fortsätter du att pussla. Backa och gör om när det behövs, hoppa tillfälligt över svårigheter och återkom.

Om ni är flera kan ni göra en postitlappbaserad meny tillsammans eller så kan ni göra varsin som ni presenterar för varandra. Då kan ni plocka det bästa från de olika menyerna.

Några tips:

  • Ett menyalternativ för att komma till sidans startsida.
  • Lägg aldrig in länkar i navigationsmenyn till dokument eller bilder. Det är inte vad användare förväntar sig att hitta där.
  • Använd inte navigationsmenyn för att länka bort från webbplatsen (till annan webbplats i organisationen). Om du har det behovet, lös det på något annat sätt. Vänj användarna att navigationsmenyn används för att navigera på och inom den egna webbplatsen.
  • Överväg ett alternativ för att hitta till sidor på annat språk. Även om du inte har en komplett sajt på till exempel engelska är det ofta bra att ha en sammanfattande sida som förklarar var jag hamnat, vad du erbjuder och om jag kan få hjälp på något annat sätt än via webbsidor på ett språk jag inte förstår.

Nu har vi en meny som vi är rätt nöjda med. Nu bjuder vi in en kollega eller någon annan som inte varit med i arbetet. Visa upp de sammanfattande postitlapparna. Fråga: Vad förväntar du dig finns under respektive lapp? Lyft på sammanfattningen och visa vad som står på dessa lappar och fråga: Var det här vad du förväntade dig? Skulle du sammanfatta med ett annat ord?

Lyssna och lär. Ställ gärna frågor för att förstå men gå inte in i någon argumentation. Personen som testar har alltid rätt, hon är expert på hur hon resonerar.

Använd några stycken personer för att testa. Ofta får vi bygga om lite. Testa igen, gärna med personer ur den riktiga målgruppen.

Skärmbild av Friskis&Svettis hemsida baserad på Wordpress

Friskis&Svettis Nackas wordpresstema

Inlägget är en del av en wordpressutbildning för Friskis&Svettis-föreningar i stockholmstrakten.

Vi utgår från ett wordpresstema som Friskis&Svettis i Nacka låtit utveckla med hjälp av Kommunikationsbyrån Tills och utvecklaren/formgivaren Klas Ehnemark.

Skärmbild av Friskis&Svettis hemsida baserad på WordPress

Friskis&Svettis i Nacka använder ett eget tema till sin wordpresswebb.

Temat styr skribenterna hur sidorna ska se ut och fungera för att skapa en bra helhet. Temat följer Friskis&Svettis centrala grafiska designregler.

WordPresstemat använder inte alls inlägg, bara sidor. Det är inte gjort för att blogga.

På startsidan och några andra ställen används bildspel eller ”rullande bilder” för att visa en uppsättning bilder.

På startsidan och andra sidor används puffar för att med bild och korta texter locka besökaren till andra sidor.

Startsidan visar upp schemat i dag och i morgon för Friskis&Svettis Nackas två anläggningar.

På en sida visas ett komplett schema där det är möjligt att boka ett pass. All schemainformation kommer från det schema- och inpasseringssystem som föreningen använder, BRP.

Anläggningarnas öppettider skrivs in på ett enda ställe och visas på flera.

Navigationsmenyn är i en nivå.

Föreningens senaste tweet på Twitter visas i sidhuvudet och där finns också länk till föreningens sida på Facebook.

Rundade hörn på bilder

Det är möjligt att få rundade hörn på bilder utan att bearbeta dem i Photoshop eller liknande verktyg. Rundningen ansluter till designen med ett rundat hörn i sidhuvudet.

Skärmbild som visar hur vi rundar hörnen på en bild i WordPress.

Vi rundar hörnen på en bild i WordPress redigeringsläge

Vi omsluter bilden med shortcoden

[roundcorners] och [/roundcorners]

Resultatet blir:

Skärmbild som visar en bild med rundade hörn i WordPress.

Resultatet i WordPress med rundande hörn på en bild.

Inramning ”redbox”

Vi kan rama in med en röd inramning som knyter an till den grafiska profilen. Inramningen skapas med en ”shortcode” som du skriver i redigeringsfältet. För att kunna tolka koden måste den vara skriven exakt rätt, med raka klamrar.

Skärmbild med exempel på inramning i F&S wordpresstema

Inramning med "redbox" i F&S wordpresstema.

Inramningen som visas i bilden skapas med följande kod:

[redbox title = ”Rubrik för inramningen”]

Lite innehåll. En tabell kunde ha varit bättre exempel.

[/redbox]

 

WordPresskurs för Friskis&Svettis

Det här är materialet från en kurs för sju Friskis&Svettis-föreningar i stockholmstrakten. Föreningarna flyttar från ett osupportat webbpubliceringsverktyg som är under nedläggning till WordPress.

Projektet är uppbyggt så att föreningarna själva bygger upp sina nya webbplatser samtidigt som de lär sig WordPress. Ett wordpresstema specialutvecklat för Friskis&Svettis Nacka av utvecklaren Klas Ehnemark på uppdrag av kommunikationsbyrån Tills används som utgångspunkt för arbetet.

Syfte med projektet är att föreningarna ska:

  • Flytta sitt redaktionella innehåll från tankbarlösningen till varsin wordpresswebb på en gemensam installation.
  • Kunna sköta om sin egen webb.

Målet med utbildningen är att lära sig så mycket om WordPress att du på egen hand kan lägga upp vanliga sidor på er egen webb.

Som en bieffekt försöker vi förbättra webbplatserna när det är möjligt utan att konkurrera med tidplanen.

Innehåll i wordpressutbildningen

Bra att veta:

  • Tillägget Redirection används för att skapa länkar av typen http://sodertalje.friskissvettis.se/facebook och http://sodertalje.friskissvettis.se/twitter som skickar  användaren vidare till er facebook- eller twittersida. Jag gillar den här typen av länkar vid tryckt marknadsföring. Om du vill ändra/lägga till som admin: Admin-panelen > Verktyg > Redirection.
  • Backup tas av databasen en gång per vecka (vet inte hur dags) med tilläget WP-DB-Backup. Backupen mejlas till respektive sajts administrativa mejladress @gmail.com. Det gör att det går att återskapa innehållet även om webbhotellet skulle sprängas i bitar (men Googles datahallar finns kvar). Backuperna är inte så stora att mejlen behöver raderas. Om backupen behöver användas för att bygga upp en webbplats helt från början behöver WordPress, tema och tillägg installeras och konfigureras.

Några inställningar och tillägg som inte är standard:

  • Rita tabeller med hjälp av utökning av redigeringsfönstret med tilläget TinyMCE Advanced.
  • Tidsstyrd avpublicering av sidor med tillägget Simple Expires.
  • Omdirigering med tillägget Redirection.
  • Sökmotoroptimering med tillägget FV Simpler SEO.
  • Kontroll att länkar funkar med tillägget Broken Link Checker.
  • Sortera bort spamkommentarer med Akismet.
  • Sajtkarta (sitemap.xml) för att sökmotorer ska hitta alla sidor.
  • Tracker till Google Analytics för att samla användningsstatistik.