Två WordPress-installationer på samma server för att skapa webbplats och webbshop

Nordisk Viltrehabilitering jobbar mot ett stort och viktigt mål; att skapa ett sjukhus för småvilt. Xponent tog uppdraget att hjälpa dem att förbättra sin webbnärvaro med en webbplats och en webbshop. Webbshopen för Nordisk Viltrehabilitering använder en plugin vi arbetat med flera gånger tidigare, eShop som bl.a. har en färdig koppling mot den svenska betalningslösningen Payson. Detta ger Nordisk Viltrehabilitering möjlighet att ta betalt genom de fyra stora svenska banker, samt VISA och MasterCard. Uppdraget har vi utfört Pro Bono och i samarbete med Julieta Spoerer på Caligraph.

Prime Agenturer

Diesel Absorber är en uppfinning från Prime Agenturer som stoppar kladdet på dieselpumpshandtagen åt landets bensinstationer. Webbplatsen byggde vi för mer än ett år sedan, men nu tyckte Prime Agenturer att det var dags att designa om den. Man önskade en svart webbplats med enkel typografering. Huvudsyftet med webbplatsen är att underlätta för bensinstationsföreståndarna att beställa nya absorbtionsfilter och manschetter till sina pumphandtag.

Galateas nya webbplats

För Galatea har vi redan under hösten producerat webbplatsen för St Eriks bryggeri, vad vi jobbat med åt dem sedan dess är deras egen webbplats – www.galatea.se. Upplägget för Galatea.se är för en besökare strukturmässigt ganska likt det vi skapat för StEriksbryggeri.se, anledningen är enkel: vi har byggt webbplatserna med samma byggstenar – Genesis och Lexicon. Denna gång har vi dock arbetat om Lexicon till oigenkännlighet och skapat en mycket modernare form. Själva designen står vår partner in crime för, Christer Leivo. Xponent har sedan arbetat om Lexicons form, försett den med en footer och framförallt bestyckat WordPress med en uppsättning insticksprogram för att förse webbplatsen med rätt funktionalitet. Christer har sedan arbetat med det redaktionella innehållet och lagt in information om mer än 400 drycker i både text och bild.

Xponent lägger alltid stor vikt vid typograferingen av webbplatsen. Denna gång har vi valt att arbeta med Monotypes webbtypograferingslösning, Webfonts. Monotype kunde erbjuda Trade Gothic, vilket är Galateas hustypsnitt, och detta använder vi genomgående i några olika skärningar.

Funktionaliteten behövs för att härbärgera mer än 400 drycker, pumpa ut nyheter och nyhetsbrev, presentera Galatea-akademin och mycket mer. En så pass omfattande webbplats som denna kräver att man tar stora hänsyn till besökarna, vi har därför lagt stor vikt vid navigationen. Tydliga menyer, snabbmenyer i footern och högerspalt, informationen i högerspalten ändras beroende på var på webbplatsen man befinner sig, vi använder också taggar för att underlätta sökningen och givetvis så har vi sökning med tydliga träfflistor. En engelsk underavdelning galatea.se/eng, med information som vänder sig till nya och gamla leverantörer och presenterar Galatea som företag.

Arbetet med galatea.se pågår fortfarande och vi kommer att utveckla webbplatsen vidare. Om du är det minsta intresserad av öl, vin och sprit bör du ta en titt genast.

Den senaste tiden har vi fått flera uppdrag där syftet varit att få ordning på en WordPress-installation som aldrig blivit klar eller som behövt göras om. Nätverket mot Cancer hade en WordPress-installation på sin webbplats som var svår att använda och som hade olika speciallösningar som inte gick inte att uppdatera. De ville även förbättra utseendet och lägga till nya funktioner vartefter verksamheten växte.

Xponent fick uppdraget att designa om webbplatsen för att göra den mer användarvänlig för de som skulle jobba med den och anpassa den till Nätverkets växande verksamhet. Vi tyckte att det vore på sin plats att telefonanpassa webbplatsen och vade därför ett tema som heter Skeleton. Vi har använt temat förr och tycker att det för en webbplats som i första hand skall vara informativ är ett utmärkt val. Webbplatsen typograferades med DIN Condensed från ParaType och Meta från FontFont, allt levererat av Typekit. Själva formgivningarbetet blev relativt enkelt då Skeletons form är mycket avskalad. En detalj som Nätverket mot Cancer ville behålla från sin gamla webb var en bakgrundsbild, den valde vi att tona ner för att inte störa texterna.

Webbplatsen finns på www.natverketmotcancer.se

Den gamla och den nya designen

CMH Nordic fick ett nytt designprogram under hösten. CMH Nordic säljer och marknadsför heliski-resor i Brittish Columbia i Kanada och har sedan många år tillbaka en WordPress-sajt som Xponent producerat. För att manifestera det nya designprogrammet beslöt vi att designa om webbplatsen. Beskrivningen nedan handlar om hur Xponent tillsammans med Mathias Hinds från CMH Nordic genomförde redesignen.

Det fanns sedan tidigare ett beslut att hitta en lösning för att på startsidan presentera de olika paketlösningar som CMH Nordic marknadsför. Tillsammans tog vi därför fram följande förutsättningar för den nya designen…

• Formgivningen skulle spegla det nya designprogrammet
• Vi ville få fram ett just och luftigt intryck
• Att åstadkomma en snygg och tydlig typografering var mycket högt prioriterat
• Vi ville ha möjlighet att presentera flera olika paketlösningar på startsidan

Det nya designprogrammet utstrålar en modern och nutida form, därför ville vi skapa en form som kändes ren och avskalad utan en massa skuggor och grafiska designelement. Vi utgick från de olika färgerna som ingår logotypen, en orange och två blåa nyanser, och lät dessa tillsammans med svart och vitt utgöra de enda tillåtna färgerna. Redan från start hade vi också diskuterat typograferingens betydelse för hur upplevelsen och ganska snart fastnat för kvalitéerna hos Meta. Vi beslöt därför att prova oss fram formmässigt med Meta och våra färger innan vi tittade på hur vi skulle lösa paketpresentationerna. Arbetet med skisserna gjordes i MAMP Pro, där en komplett WordPress-installation med vårt egenutvecklade Genesis-baserade tema XpoLite rullade. På detta sätta kunde vi ta fram skisser och testa med skarpt material. Diskussionerna fördes via email med skärmdumpar av MAMP-sajten som diskussionsunderlag. Ganska snabbt hade vi på detta sätt hittat den nya formen för webbplatsen.

Nu gällde det att hitta en slider, ett bildspel eller något annat sätt att presentera paketlösningarna utan att behöva ge avkall på vår formgivning.  Skall sanningen fram var detta den kanske trögaste delen av projektet. Vi provade både gamla och nya lösningar, men ingen kändes riktigt bra till dess att vi bestämde att prova SlideDeck. Det som gjorde att vi föll för SlideDeck var att det precis som WordPress använder mallar för att formgivningen, det blev därför enkelt att hitta en grunddesign som vi modifierade till vårt eget utseende. SlideDeck använder precis som många konkurrerande lösningar jQuery som ”motor” och har ett mycket WordPress-liknande redaktionellt gränssnitt, detta gör att det går snabbt att lära sig att lägga upp nya eller redigera gamla ”slides”.

Genesis Framework är ett av många smarta sätt att skapa ny design för WordPress. XpoLite är egentligen en stilmall som använder funktionaliteten i Genesis. För att koppla på SlideDeck och footern har vi använt Simple Hooks Plugin, en plugin utvecklad för Genesis. Då Genesis uppdateras regelbundet är det en enkel match att uppdatera både WordPress och Genesis på CMH Nordics webbplats, då det enda som är egenutvecklat är en stilmall och några grafiska element.

I arbetet arbetade vi också fram en ny form för CMH Nordics nyhetsbrev som korresponderar med webbplatsens utseende. När allt var klart i god tid före jul, bestämde vi att lanseringen skulle göras på nyåret, så häromdagen var premiären och vi bytte design på webbplatsen.

Summerat, detta använde vi i för att skapa formgivningen

• Genesis Framework
• XpoLite child theme
• SlideDeck
• Simple Hooks Plugin
• Typekit – Meta

Nyfiken? Ta då en titt på www.cmhnordic.com

Gonsteadkliniken går att besöka med dator, iPad och mobil

Gonsteadkliniken i Stockholm, en kiropraktorklinik, hade en webbplats som inte var särskilt enkel att hitta via sökmotorer. Bygget bestod av en WordPress-lösning, några insticksprogram och ett lite udda WordPress-tema. Webbplatsen hade ”All in One SEO Pack” installerat (ett insticksprogram för sökmotoroptimering av WordPress-installationer), men det fungerade inte som det skulle. Xponent fick uppdraget att titta till installationen för att se om det fanns något som kunde förbättras.

Vi bestämde oss för att ominstallera WordPress och att byta tema. Uppdraget hade ingen stor budget, så vi bestämde att lägga några timmar på städning av servern, samt att byta till ett Open Source-tema för att komma billigt undan. Vi hittade ett relativt nytt tema som bygger på responsive design, vilket i klartext betyder att det anpassar sig till den storlek på bildskärm som besökaren har. Temat har ett för en kiropraktor mycket passande namn, Skeleton, och finns att hämta från github.

När hela operationen var klar fick Gonsteadkliniken tillbaka sin webbplats urstädad, försedd med Google Analytics, anmäld till sökmotorerna, ny XML sitemap, All in One SEO Pack riggat enligt regelboken, kontaktsidor med webbformulär och Google Maps. Hela operationen syftar till att se till att webbplatsen syns bättre på sökmotorer och att därmed Gonsteadkliniken får en konkurrensfördel mot sina konkurrener. På köpet fick man en webbplats för både liten och stor bildskärm.

Ta en titt själv » www.gonsteadkliniken.se

SME Academys nya webbplats

SME Academy behövde en webbplats snabbt, mycket snabbt. Man skulle nämligen arrangera Småföretagarexportdagen 2011 och det man hade sedan tidigare dög inte. Vi snodde snabbt ihop en WordPress-lösning med responsive design för att allt skulle synas även ner i små mobiltelefonskärmar. Vi använde också webfonts från Google för att det skulle se lite snygare ut och för att vi ville göra det hela extra läsbart på mindre skärmar.

Vi försa oss vid något tillfälle, det där som man inte riktigt får göra, men vi tyckte faktiskt att logotypen var ful. Den var nygjord men var helt enkelt inte särskilt snygg. Eftersom den inte var lanserad fick vi ett uppdrag till; att skapa en ny logotyp.

Ta en titt själv » www.smeacademy.se

Jacob Gilbreath has done the best kinetic typography video I’ve seen so far…

And there’s a few out there…

• Escape in Millenium Falcon
• Estelle
• The Big Lebowski
• ㄱㅅㅇㅁ
• …and the original and classic, Sign O the Time.

He had grown tired of doing it by hand and implemented a automatic Baskervillification of all ampersands into the function.php and style.css. Excellent idea, I implemented mr Withcrofts tweak myself. Not that Minion Pro’s ampersand is that different, but Baskerville is a bit nicer and this tweak forces the italic version to show up everywhere.

His tweak was really simple to follow and usable for any WordPress-site that doesn’t use Baskerville italic for bread.