Etikettarkiv: webbutveckling

IVT Center i Borås

En responsiv webbplats till IVT Center 7h

IVT Center Sjuhärad efterfrågade ett ansiktslyft för sin webbplats med kravet att den även skulle fungera i mobiltelefoner. Efter en inledande workshop stod det klart att en responsiv webbplats i WordPress var det alternativ som skulle fungera allra bäst för Morgan på IVT 7h.

Webbplatsen på mobil

Webbplatsen på mobil

United States of Tikka tog fram en designskiss och byggde därefter upp mallar. I bakgrunden ligger de senaste responsiva mallarna från WordPress (twentytwelve) vilket innebär att siten tryggt kan uppdateras utan risk att design och funktion förändras avsevärt vid uppdateringen.

Tanken har varit att hålla webbplatsen ren i sin design och enkel att navigera samtidigt som den förmedlar en mjukare sida med stora bilder centralt i designen. Sidan uppdateras enkelt med nyheter som presenteras på startsidan utifrån kategori. Det har varit viktigt från början att underlätta för såväl besökare som för Morgan som ska uppdatera sidan. Erbjudanden, produkter och kundberättelser läggs upp som inlägg och ligger kvar i webbplatsens arkiv för framtida referens. För Morgan innebär det att han kan fokusera på att uppdatera nyheterna istället för att hålla koll på vilka sidor som behöver redigeras.

  • Workshop för att få fram syftet
  • Webbdesign
  • Webbutveckling i WordPress

HTML5 – så här börjar du

För en tid sedan började jag läsa igenom Mark Pilgrims bok om HTML5 för att sätta mig in i vilka skillnader det rent konkret innebär vid webbutveckling. Som jag tidigare konstaterat så finns det anledning att grotta ner sig i HTML5 ifall man är intresserad av webbutveckling – och det behöver inte vara så svårt. Första steget för att konvertera till 5:an är nämligen bara att byta doctype. Med denna enkla handling är du igång. Oroa dig inte för komplikationer, resten av sidan kommer fortfarande att renderas korrekt eftersom HTML5 är en förlåtande uppdatering som är bakåtkompatibel (hoppas Pilgrim har rätt). Så här ser doctypen för HTML5 ut:

<!doctype html>

Borta är de långa doctypes som var omöjliga att minnas och ständigt copy/pastades in på sidorna. Et voíla! Du är nu igång med HTML5 och har tillgång till nya element som:

<nav>, <section>, <header>, och <footer>

För dig som har kodat blockdesign med hjälp av CSS är det här egentligen inget nytt. Istället för att använda span class eller id så har du färdiga element att använda dig av. Du sparar in några tecken och förbättrar samtidigt webben. Hur kan användandet av färdiga element göra anspråk på att förbättra webben? Jo, genom tydligare struktur på våra sidor blir det lättare för olika webbläsare att hantera innehållet. Framförallt kan det underlätta tillgängligheten för grupper som av olika skäl vill kunna hoppa över delar eller lätt kunna hoppa mellan rubriker, som exempelvis användare av talsyntes.

Behovet av de nya elementen hänger samman med att vi idag ofta bygger sidor med hjälp av mallar. Ett blogginlägg kan utgöra en fullvärdig sida i ett sammanhang för att i nästa utgöra en sidkomponent. Det är därför viktigt att vår markup kan anpassa sig efter detta. Alla webbutvecklare med aktning vet t.ex. att man bara får använda en gång per sida, men detta är numera inte längre helt sant. Genom att lägga under en egen sektion som t.ex. så kommer den tolkas som en del av en sidkomponent och automatiskt skapa en korrekt outline/hierarki för läsaren. Borta är en stor del av det komplicerade nästlandet med -, där man var tvungen att försöka hålla koll på vilken nivå en rubrik skulle sättas.

Men hur är det med alla kreativa möjligheter som man har hört talas om? Jo HTML5 erbjuder också element som:

, och nya formulärelement som <input type=”search”>

Dessutom finns en rad nya funktioner som möjliggör geolocation, offline funktion och HTML5 lagring hos användaren. Funktioner som jag ser fram emot att bekanta mig med. Framförallt ser jag fram emot att sätta mig in i hur detta kan användas för att förhöja upplevelsen för användaren och på så vis underlätta vardagen för oss alla.

Vilka är dina favoritfunktioner med HTML5? Vad bör jag fördjupa mig i?

En första bekantskap med HTML5

Det är väldigt lätt att stagnera trots att man lovat sig själv dyrt och heligt att man ska följa med i alla svängar. Igår läste jag tre kapitel ur boken HTML5: Up & Running av Mark Pilgrim. Det var helt enkelt dags att konkret sätta sig in i vad HTML5 är för något istället för att slänga sig med luddiga termer.

Första gången jag provade på HTML-kodning var på gymnasiet år 2000, vi fick skriva Hello World, göra en tabell och byta färg på bakgrunden. Jag förstod ingenting. Vad ska jag med det här till? 2003 läste jag Webbredaktör, design och publicering på Högskolan i Borås. Jag tror att jag sökte utbildningen för ordet design stod i kursnamnet. Vi fick lära oss att tabelldesign var på väg ut, frames var praktiskt taget olagligt och det nya var CSS och block/lager-design. Vi jobbade i notepad med ren kod. Jacob Nilsen var vår webbguru och vi gjorde vårt bästa för att undvika onödiga bilder och grafiska element. Jag flyttade därefter till Örebro 2005 för att läsa Digital mediedesign. Nu var det XHTML som gällde. Små förändringar men ändå en känsla av att börja om. Alla pratade om Flash och vi drömde alla om att bli duktiga animatörer men fick mest sitta med Dreamweaver och bygga strukturer.

Idag är jag glad att vi fick lära oss strukturer och grunderna i kodning men jag inser också att jag sedan 2007 inte riktigt har tagit mig tid att lära mig nytt. Det har pratats om Web2.0, den sociala revolutionen och HTML5 och visst har jag hängt med på principerna. Men vad innebär då HTML5 rent konkret?

Boken jag har börjat läsa ges ut av O’Reilly, som är närmast legendariskt när det gäller böcker om informationsteknologi. Det fina är att boken går att finna i sin helhet online som Dive into HTML5 . Den har ett par år på nacken nu men för någon som är ny spelar det knappt någon roll. Jag tycker att Pilgrim gör ett fantastiskt jobb med att göra historien om Internet mer levande. Han förklarar helt enkelt varför koden vi knackar ser ut som den gör och hur HTML5 har kommit att förändrat detta. Det här är perfekt för människor som mig som inte är tillräckligt inbitna utvecklare för att hoppa rakt på godsakerna utan helst vill förstå varför vi gör något först.

Den korta varianten för trötta läsare är att ingen egentligen behöver bry sig om HTML5. Det är ingen fara på taket om du inte har hängt med. Alla våra gamla sidor kommer att fortsätta fungera som de ska eftersom 5:an är av det förlåtande slaget. 5:ans markup har förenklats för att underlätta och minimera risken för misstag men för den som är bekväm i sina gamla spår går det bra att fortsätta som förut. Naturligtvis tillkommer på det en del nya finesser som vi webbutvecklare kan och bör använda oss av. Enda parentesen är att alla funktioner ännu inte stöds av alla webbläsare. Det gäller med andra ord att som vanligt inte förlita sig på att den valda funktionen alltid fungerar.

Vilka är då finesserna? Jo, med HTML5 kommer en rad nya element som möjliggör en tydligare struktur på våra webbsidor. Borta är nästlandet med – för att skapa sidhierarkier. Istället arbetar vi med olika sektioner som , , , och där kan användas inom sektionen trots att den redan förekommer på andra håll på sidan. Detta innebär en klar förbättring för de användare som har behov av tillgänglighetsdesign och för webbutvecklaren själv. Sen finns elementen

Visst finns det anledning att lära känna HTML5 något mer. Jag kommer härnäst läsa klart boken och fördjupa mig i det jag finner intressant. Vilka är dina favoritfunktioner med HTML5?

K

4 frågor vid uppdatering av hemsida för småföretagaren

Förra veckan hade jag ett möte med Morgan Larsson på IVT center 7h (Sjuhärad) om företagets webbplats. Det är nu sex år sedan jag designade deras hemsida med hjälp av XHTML, CSS och PHP. Då var företaget ett sidoprojekt till en större satsning inom energieffektivisering. Idag står företaget helt på egna ben med fokus på värmepumpsteknik och service.

När hemsidan byggdes var syftet att ha en närvaro på webben. Viktigast var att informera om adress, öppettider och hur man kunde komma i kontakt med Morgan. Idag har hemsidan en betydligt större betydelse för verksamheten och det är därför dags att ta sig en titt på hur vi på bästa sätt kan få den att leverera utifrån de nya förutsättningarna.

När det kommer till att utveckla en hemsida för ett mindre företag eller en enskild näringsidkare så finns det ett antal punkter som jag anser vara viktiga att tänka på.

Hur ofta är det troligt att företaget uppdaterar sin hemsida?

Om svaret är minst en gång i månaden så kan det vara värt att integrera en blogg i webbplatsen. En blogg med regelbundna uppdateringar kan förbättra sökmotorsoptimeringen och erbjuda besökare värdefull information. Det är värt sin investering i tid. Om svaret är ett par gånger om året kan det ändå vara värt att överväga en bloggintegrering men att minska förväntningarna på uppdateringar genom att döpa om sidan till Resurser, Tips & Råd, Erfarenheter eller Rådgivning. Om det är mer sällan så kan det vara bäst att utelämna bloggen tills vidare för att minska den totala kostnaden.

Vilken närvaro har företaget i sociala medier?

För en del företag faller det sig naturligt att dela med sig av händelser i sociala medier. Facebook, Twitter, Instagram eller Pinterest är med i den dagliga verksamheten och det finns en naturlig dialog med såväl kunder som branschexperter. I de fallen kan det vara en god idé att integrera innehållet från sociala medier även på webbplatsen. Webbplatsen blir levande och besökare kan lära känna företaget genom uppdateringarna. De allra flesta småföretagare har inte den typen av närvaro dock och då är det viktigt som webbutvecklare att kunna hålla igen sin egen entusiasm över vad man kan göra. Om det finns en företagssida på Facebook så kanske det räcker med en ikon som länkar till sidan hellre än statusflöden som uppdateras sällan.

Vilken webberfarenhet har företaget?

Idag kan man med enkla och billiga medel, till och med gratis, föra över en hemsida till en bloggplatform eller content management system (CMS). Dessa system gör det möjligt för någon som saknar webbkompetens att uppdatera sina sidor med nytt innehåll. Det kan handla om regelbundna blogginlägg men också om att exempelvis byta ut erbjudandet på erbjudandesidan. För en egenföretagare är det guld värt att kunna göra detta utan fördröjning och extra kostnader. Ibland möter du dock någon som själv har grundläggande kunskaper i HTML och i de fallen är de verkligen viktigt att tänka över hur ofta webbplatsen kommer att uppdateras. Om uppdateringar sker mer sällan och personen enkelt själv kan ändra text och bild, kan det vara helt överflödigt att förflytta webbplatsen till en plattform.

Vad vill företaget uppnå med webbuppdateringen?

Den allra viktigaste frågan är vad de vill uppnå med förändringen? Många gånger vet företagarna inte själva, de har bara en känsla av att det är dags för en modernisering. Det är väldigt lätt att dras med i känslan av att man måste förnya sig, särskilt när webbutvecklare ringer och poängterar nödvändigheten av detta. I dessa fall är det viktigt att gå tillbaka till kärnan och fråga vilka behov som finns. Ett ansiktslyft är relativt enkelt och kostnadseffektivt att göra. Nya bilder, nya färger och ny grafik ordnas enkelt med CSS och bildredigering. En bloggintegrering tar lite mer tid. Att bygga en helt ny webbplats från grunden kan vara nödvändigt då den befintliga har stora brister i struktur och innehåll men är många gånger helt överflödig. Ibland har den befintliga sidan en hög sökmotorsrankning och då kan det vara värt att behålla grunden för att inte gå miste om den indexering som sökrobotarna redan har gjort.

IVT center 7h

Efter onsdagens möte med Morgan stod det klart att det inte nödvändigtvis är funktionaliteten som behöver en uppdatering utan snarare känslan. Det är med andra ord dags för ett ansiktslyft.

Precis som för många andra småföretagare så handlar den stora utmaningen för Morgan om att få tiden att räcka till. Många moderna hemsidor inkluderar idag en blogg och uppdateringar från de största sociala medierna. Det börjar närma sig praxis att en modern hemsida ska erbjuda dessa funktioner. Tyvärr kan denna typ av integrering stjälpa mer än hjälpa i de fall då företagets facebook-sida uppdateras en gång i halvåret och senaste blogginlägget är två år gammalt. Det är därför av största vikt att tänka igenom de förutsättningar som råder och anpassa därefter. Vad som därtill är viktigt att tänka igenom är vilka framtida behov som kan komma att finnas. Däribland kan den senaste tidens explosion av smart-phones och surfplattor räknas in. En investering i en webbplats som fungerar i olika format kan därför vara väl värt pengarna på längre sikt när allt fler använder andra verktyg än datorer för att söka upp information.

Vilka är dina bästa tips för mindre företag som funderar på en webbplats-uppdatering?