Kategoriarkiv: Responsive Webbdesign

Responsiv webbdesign och hamburgermeny

Bygger du webbsidor och vet hur saker alltid har varit är det kanske dags att fundera på hur det fungerar på användarens sida.

Interaktionsdesign för användaren

Jag studerar interaktionsdesign och har börjat läsa flera böcker och artiklar som handlar just om interaktion från individen till datorn. Med hjälp av bra design och anpassning blir tekniken påverkbar utifrån användarperspektiv.

Jag har som gammal webbdesigner byggt menyer i olika format i parti och minut. Jag minns att vi använda vanliga href för att skapa länkar och dessa var menyer oavsett vart dom placerades. Det var trendigt under en period att bara använda formulärkodad select/option en massa år och det verkar vara trender på hur andra gör som gör att man följer efter. Det kanske är ett tecken på att man inte vill halka efter och likna de man tror leder utvecklingen. Sedan ca 15 år tillbaka har menyer varit kodade i ul-listor. Det absolut bästa sättet att skapa en navigation för responsiv design. Det bästa för att tydliggöra webbplatsens meny/navigation men även det absolut bästa sättet att påtala funktionen för sökmotorer vari strukturen för undersidorna finns.

Aanpassa design för olika verktyg

Tankar kring hur en webbplats fungerar i olika verktyg. Se på din iPhone eller iPad och jämför gärna din egna webbplats med de olika design du ser i exempelvis denna länken. Jag kan uteslutande lova att det flera webbolatser där det finns en rullgardinsmeny, det finns absolut flera olika sidor med drop-down eller någon typ av navigering som du aktivt tvingas interagera med för att få fram alternativen.

Den vanligaste idag sedan ett par år för webbplatser som har en responsiv design, eller mobilanpassad webbplats är att man lägger till tre horisontella streck längst uppe i menyraden när du använder en mobil enhet såsom smartphone eller surfplatta. Detta bedöms som den minst användbara i designkretsar men är tyvärr den vanligaste menyn för att navigera på en webbplats idag. Jag dömmer inte ut någon men vill gärna ha diskussion krig hur man ska lösa navigationsproblemet eller rättare sagt oignekänligheten eller tillgängligheten för att förstå att dessa tre streck är webbplatsen meny för att besökaren ska kunna a sig vidare.

Jag vill även påtala att det inte idag är vanligast att man landar på första sidan då mesta besöken till en webbplats bör vara genom att man sökt sig till webbplatsens artikel/sida för att man letat efter någonting specifikt.

Följsam webbdesign

Vi talar mycket om den webbdesign och designutveckling som anpassar webbsidor till mobila enheter men har tidigare benämnt det som responsive design. Nu har Datatermgruppen tagit fram ett ord som inte riktigt stå upp för vad det egentligen är, Alltså ”Följsam Webbdesign”.

I min mening vedertar vi det amerikanska ordet Responsive och lägger till Webbdesign bakom så det blir enkelt och direkt upplysande. Svenska språket har utvecklats mot trenden att använda engelska ord mer ofta, när vi nu inte hittar nåt bra ord på svenska kanske det är läge att använda det som finns, fungerar och är etablerat sedan flera år för just mobilanpassade webbsidor även på engelska.

Källa

Följsam design anpassar din webbplats till moderna besökare. Tekniken bakom är HTML och CSS som tillgängliggör och anpassar innehållet till de verktyg/enhet din besökare använder. Det rör sig ofta om smartphones eller surfplattor. Dessa finns i mängder men är vanligast hos Apple och Samsung för olika användare. Användarvänlighet och tillgänglighet går hand-i-hand för att tillgängliggöra information till de som söker den.

Föråldrad marknadsföring

marknadsföring förr hade för avsikt att attrahera alla möjliga besökare och man försökte attrahera med lockelser och varor man gav bort gratis. Allt för att sälja sina produkter till vem som helst. Idag ser marknaden helt annorlunda ut. Trenden att söka sig fram till det man vill veta mer om eller handla gör att traditionell marknadsföring får väldigt dåliga resultat och det blir även svårt att mäta.

Tv-reklam är ett sånt äldre koncept där den enda riktningen blir att den som ser på exempelvis ett matprogram kan tillgodogöra sig reklamen mellan avsnitten, där programkanalen kommer visa produkter eller relaterade varor till mat och matlagning. Svårtmät givet vis och man kan egentligen bara påvisa att man sålde mer eller mindre under den perioden visades. När man nu även kan se programmen på egen tid via play-kanalernas appar gör man även mätningar där för att förstå hur annonser och marknadsföring gör sig.

Mobilwebb kompletterar företags app-satsningar

Det känns riktigt skönt att arbeta med framtidens teknik och vara med och bygga framtiden med senaste tekniken, det som oroar mig är att kunder och företag inte hänger med i utvecklingen. jag brukar säga att utbildning är vägen till fler kunder och jag tror inte jag har fel!

Äntligen ser det ut som att företagen börjar inser att det finns något mer än en ”App” att erbjuda sina tjänster. Speciellt när vi kalkylerar att både mobilanvändandet och e-handel via mobil kommer explodera och redan 2013 gå förbi det traditionella datoranvändandet i Sverige.

Trenden att vi kommer använda plattan eller smartphone istället för datorn sprider sig fort och snart inser även företagen att de måste möta kunden där kunden väljer att finnas. Att inte redan ha tänkt mobilanpassning i företagens digitala strategier är oroväckande men när de små aktörerna som med mindre investeringar byter fil och teknikinriktning brukar de stora företagen följa efter. Man kan tro att det är tvärt om men det är det inte i dessa mindre investeringar.

Jag har frågat er innan och gör det igen…

  • Har ni en mobilanpassad webbsida?
  • Har ni funderat på hur en responsiv webbdesign fungerar?
  • Har ni en aning om kostnaden att anpassa dig till dina kunders behov?

Relaterad artikel Computer Sweden: Appen räcker inte för mobilsurfare

Mobilanpassad webb – Responsive Webbdesign

Webbdagarna i Göteborg gav insikt och information om hur man ligger till i utvecklingen och det ser ljust ut. Jag har tidigare skrivit om mobilwebb, responsive design och det fanns flera talare som endast berörde dessa digitala tegelstenar för utvecklingen av moderna webbprojekt. Att anpassa information till användarens enhet är bland det viktigaste man kan göra som digital publicist.

Mobilanpassad webb – Responsive Webbdesign

Alla har rätt att ta del av information som publiceras och det är synd att det tar lång tid att införa dessa förändringar i en vanlig webbsida. Dessutom innebär det att fler kan ta del av informationen om man optimerar användarvänligheten och tillgängligheten för mobila enheter. Jag talar om Mobila Smartphones, Ipads eller handdatorer generellt.

Det finns smarta och enkla åtgärder som underlättar användarvänligheten och tillgängligheten. Det gäller egentligen att upplysa och introducera tekniken för webbutvecklare med inriktning att vara så tillgängliga som möjligt.

”Responsive Webbdesign” har växt fram ur perspektivet att öka tillgängligheten och anpassa information för olika plattformar. Vem som helst kan förstå att det får plats mer information på en vanlig datorskärm i jämförelse med en mobil smartphone eller en platta.

För att blicka framåt fortsätter jag i allfall arbeta för ökad tillgänglighet och anpassning av information till olika enheter. ”Responsive Design” är här för att stanna och med fler webbutvecklare som vet vad det handlar om ju snabbare kommer vi utvecklas åt rätt håll.

Anpassa din webbsida mobilt

Responsive Design, igen kommer det nyheter om vad vi kan göra med webben och på vilka olika verktyg för att anpassa informationen till varje person och tekniska verktyg. Nu är det ju inte speciellt nytt utan har till en viss mån anpassats till tekniken men absolute ingenting nytt så det blir revolutionerande precis.

Det man kallar för responsive design idag har funnit förut men med alla nya mobila verktyg har behovet av anpassningen ändrats.

Med nya verktyg blir det genast roligare att anpassa informationen till användaren eller verktyget. Det handlar kanske mer om läsbarhet, tillgänglighet och användarvänlighet. Vänder du på din iPad och läser informationen horisontellt eller vertikalt kommer du även se skillnad på vad detta innebär. Varje verktyg har en specifik storlek och det är i stilmallen man skapar unika bredder för de ca 6 olika bredderna i verktygen. Se tabell nedan.

Slutligen ser man mycket stor skillnad på att tillämpa tekniken också för att man ytterligare kan utnyttja försäljning direkt via mobilen idag. Det är inte riktigt implementerat och det är svårt att se produkter i mindre mobila skärmar.

Modell/Tillverkare Bredd i pixlar
Old Android Phones 240px
iPhone 3/3G/4/4S 320px
Android Phones, HTC, LG, Older Droids, Samsung 480px
New Droids, New HTC 540px
Kindle Fire 600px
iPad, iPad 2 768px
Most Android Phones, HTC, LG, Older Droids, Samsung, Samsung Galaxy, Newer Android Tablets 800px
Desktop Standard, New Droids, New HTC 960px
iPad, Kindle Fire 1024px
Samsung Galaxy, Common Newer Android Tablets 1280px

HTML – lite historia om webbpublicering

HTML-kod är den kod man använder sig av som grundläggande struktur när man organiserar information för webbsidor. HTML-kod är egentligen inte ett som programmering eftersom det mest handlar om informationsarkitektur och strukturering av information. Den man som introducerade oss för iden att använda ett språk för just kodning av webbsidor heter Tim Berners-Lee och kom med iden redan 1989. 1991 kunde vi se ett kodspråk, där man använde de så kallade ”HTML Tags” för kodning av webbsidor. Kodspråket hade då ca 18 ”Tags” och kunde användas på samma sätt som idag.

Historia för HTML

November 1995 HTML 2.0
January 1997 HTML 3.2
December 1997 HTML 4.0
December 1999 HTML 4.01
May 2001 XHTML 1.1 strict
January 2008 HTML 5

Det viktigast som hänt med HTML-kod och produktion av webbsidor ligger ungefär 6-8 år tillbaka i tiden då många webbdesigners seriöst började stödja och arbeta mot de webbstandarder för digital publicering som arbetats fram av W3C. Under flera år ersattes HTML 4 med XHTML för att man ville se en förändring och man balanserade på ett försök att optimera mot en ny teknisk möjlighet. Skulle detta göra HTML till en gammal standard och XHTML skulle ta över? Nej, det klar gjordes att XHTML 2.0 inte skulle komma att vidareutvecklas utan ersättas av HTML 5 och det är där vi står idag.

Webbstandarder

Webbstandardiseringen kom som en våg tillsammans med sökmotoroptimering i mitten på 2000-talet. En period då många webbdesigners övergick till den alternativa webbstandarden XHTML, ”eXtensible Hyper Text Language Markup”, med fokus på att även integrera mer av CSS3 växte även ny kunskap fram och det tog skruv i W3C.

Semantisk kodning

I mitten på 2000-talet drevs intresset upp för att publicera HTML och webbstandarder av hörde kvalitet. Man började bygga webbsidor utan tabeller som informationsarkitektur och man kunde se en stor skillnad i möjligheterna hur man mer logiskt kunde strukturera information. Semantisk MarkUp betyder att man avser att använda den specifika koden för sitt ursprungsbruk. Detta innebär att man exempelvis använder tabeller endast för att innehålla data, precis som det var utvecklat för från början. Validering av koden blev viktigare och man följde regler som verifierats av W3C och det började bli lite ordning på internetpublicering. Det viktigaste steget i denna utveckling handlade om att man strukturerade informationen på ett organiserat sätt samt flyttade ut design och form i den tekniken man kallas CSS, Cascading Style Sheet.

Det viktiga med semantisk kodning kom av att man kunde separera information och design och optimera ändringar optimerades i varje projekt via en en da fil i projektet. Minsta lilla ändring kom globalt att ändra alla sidor med ett enda klick och man optimerade sidorna mycket snabbare. Detta kom senare även att vara av vikt för sökmotorerna som värderar snabbare sidor högre i sökmotorplaceringar idag. Ju bättre jobb du har gjort i webbstrukturen och optimeringen av alla detaljer desto bättre Sökmotoroptimering och placering når sidan.

Gamla webbläsare och nya webbstandarder

Det generella problemet med webbstandarder och den snabba utvecklingen som kom var att stora företag med interna policykrav stretade emot eftersom förståelsen för att hänga med trender i webbranschen inte alls gick hand i hand med deras kunskap eller intresse. Detta försenade mycket av hur man kunde använda senaste tekniken för webbpublicering och även börja integrera CSS3 tillsammans med HTML5.

Microsoft hade tidigare släppt en mycket dåligt förberedd webbläsare. Den ökända Internet Explorer 6, som under 10 års tid invecklat webbutvecklingen istället för att gå med strömmen, hittat på egna standarder som inte gick hand i hand med W3C webbstandarder. Detta satte käppar i hjulen för oss webbdesigners och webbdesign var ett tidsödande elände under många år. Vi som varit med från början när Netscape och Internet Explorer kom hade ett lättare läge då vi hade mer erfarenhet av hur krångligt det kunde bli med cross-browser utveckling.

Nya webbläsare och webbstandarder

Vi har idag ett antal nya webbläsare och roliga möjlihgeter att publicera information med ny teknik. Med HTML5 har vi nya utsikter och man kan redan idag använda sig av de flesta ”Taggar” för både Video och andra roliga sätt att integrera exempelvis Sociala Medier. VI har även kommit till ett steg i utvecklingen där vi även borde se till användarnas behov och tekniska utrustning. Jag talar om det som kallas för Responsive Design. Det är kul när teknik inte fastnar och man inte kommer någon vart. Idag har vi kommit en lång bit på väg för internetpublicering men vi kommer skratta gott om några år om hur vi idag arbetar.

Responsive Webbdesign – anpassa befintlig information

Nyaste tekniken är inte heller helt ny men det senaste i utvecklingen för webbdesign handlar om att man anpassar informationen till användarens verktyg. Mobil användande av internet har exploderat de senaste åren och det ser inte ut som det verkar lugna sig direkt snart. Dagens webbsidor har ingen anpassningsstandard men det är på gång att vi arbetar fram en teknik som baseras på den existerande informationen men anpassar den med CSS. Helt enkelt konverterar man utseendet och innehållet till varje användares verktyg och når på så sätt en helt ny publik med väldigt lite arbete. Detta går att lösa redan för något år sedan men det finns få webbsidor som har använt sig av Responsive Design ännu.

Webbprojekt och organisation

Samarbete webb / designbyrå

Det arbete och tid man lägger ner på ett webbprojekt, innan man hamnar i utvecklingsskedet, kan vara från flera månader till år beroende på projektets storlek och mål. Man arbetar generellt med att strukturera befintlig information eller nyproducerat material. Med tiden lär man sig arbetssätt där effektivitet eliminerar problem och tidskrävande arbeten kräver god planering. Ett nära samarbete mellan designbyrå och webbyrå är inte helt ovanligt för att hitta rätt även med företagsprofilering och design. En designbyrå arbetar med design och känslan i företagsprofileringen medans webbyrån tar fram tekniska lösningar för användarvänlighet och funktionalitet, tillgänglighet för målgruppen osv.

I olika läger ser man de som förespråkar estetisk medan andra litar på teknik och funktion. Med internet har vi sedan länge även sett tendenser att man styr efter den informationen man söker och det är mer ofta man bortser från design men det beror även på målgruppen och intresset. Det finns flera undersökningar som påvisar att informationen är viktigare än själva designen eller den estetiska intresset.

Man har ju ingen nytta av en Porsche utan motor, hur snygg den än är!

Användbarhet och tillgänglighet

Det är viktig att hitta det du söker och det är viktigt att som företagare hur man organiserar information på ett attraktiv sätt med rätt visualisering och kunskap om hur sökmotorerna, detta kan man inte bortse från idag. Viktiga ingredienser i en informationsportal när man tilltalar sin målgrupp, tillfredställer sina gamla kunder och hittar nya kunder med företagets sökmotorpositionering i konkurrensen i branschen.

Delmål – process – slutmål

Med blandad erfarenhet och kunskap sätts delmål upp och agerar tidsramar för delar av projektet. Det gör att man kommer en bra bit i processen från brainstorm till en specificerad idé på papper, för att kunden även ska känna att man arbetar med rätt processer för varje delmål. Det är ofta man arbetar baklänges i mpnga företag och det blir så otroligt mycket onödig tid för att organisationen inte utgår från ruta ett utan 123.

Arbetsprocessen – inga snabba publiceringar funkar

Det finns flera tillfällen där jag har omarbetat projekt från start eftersom kunden velat publicera mindre delar av projektet direkt online så fort som möjligt. Detta sätt att arbeta på fungerar nästan aldrig. Dessa projekt kan ta upp till 3 gånger längre tid och det enda säkra är att man förlorar tid, hoppas över strukturen och förstör planeringen för att fullfölja ett projekt utan felräkningar i tidplaneringen. Enda sättet att arbeta på är att ha en öppen kommunikation mellan frontend och backend -utvecklare, designbyrån och projektledaren.

Jag har haft möjligheten att arbeta i flera riktigt stora projekt genom åren. Inte bara i Sverige utan runt om i Europa och på flera olika språk. Många på Grekiska och Engelska. I regel handlar det om god organisation och struktur, att arbeta med specifikationer för att nå absolut bästa resultat. Det slutgiltiga målet är att synas på rätt sätt och för det mesta arbetar jag mot just SEO med fokusering på sökmotorresultat användarvänlighet och tillgänglighet. På senare tid finns det även stort intresse att arbeta mot ”Responsive Design” lösningar vilket är någonting jag arbetar med i projektform för att bli bättre på.

Ekonomi och effektivisering

ALl projektledning styrs av ekonomi och avtal med kunden som ska hållas. Om man inte räknar rätt eller planerar rätt från start kommer man inte kunna hålla varken plånboken eller leverans i slutändan. Det viktigaste här är att lyssna på projektledare och kommunicera, och säga till när det inte fungerar eller om man behöver mer tid. Det kan även innefatta att andra i projektet sitter arbetslösa för att någon är försenad. Då kommunicerar man detta och delar upp arbetat så långt det går för att effektivisera projektet.

Rätt mängd ingrediens i rätt ordning underlättar för slutresultatet

Responsive Webbdesign

Flexibla webbsidor som anpassar sig efter mobiltelefon, iPad,iPod eller den browser du använder har inte riktigt slagit igenom ännu men det är hetare än nånsin och kan ersätta appar i mobiltelefonen.

Det har nyligen blivit trendigt att anpassa webbdesign till just en flexibel webblösning. Anledningen är inte bara att det är en mer flexibel lösning utan den anpassas till användarens verktyg bara med Cascading Style Sheet utveckling.

responsive webbdesign

Inget helt nytt men verkligen hett och intressant och det ses positivt på möjligheten att publicera anpassade informationsplattformar som man enklare kan anpassa för sitt specifika verktyg.

Jag anpassade webbsidor till mobilanvändare redan 2007 men med iPhone och Apples nya produkter förenklas anpassningen mycket.

Webbprojektet jag tagit fram för detta hittar du på http://socialicius.se men har inte fullt ut anpassats till alla mobilmodeller utan bara anpassats för appleprodukter.