Etikettarkiv: följsam webbdesign

Fixa en mobilanpassad meny på din sajt

En utmaning med att skapa sajter för mindre skärmar är att ta fram en meny. Här presenterar vi två olika lösningar, en horisontell och en vertikal. Vilken lösning som passar din sajt bäst beror självklart på sajtens innehåll och hur dina besökare enklast navigerar i den typen av innehåll.

Horisontell mobilanpassad meny.1. Ge dina besökare en försmak av innehållet med en horisontell meny

Med en horisontell meny sveper du över menyn med fingret för att scrolla till höger och vänster. Det går även bra att trycka på pilknapparna till höger och vänster om menyn för att skrolla om din enhet inte har stöd för “swipe”. En fördel med den här typen av meny är att besökare till din sajt får en försmak av vad menyn innehåller utan att den för den delen tar upp speciellt mycket skärmyta.

Inspireras av projektetet iScroll för att bygga en horisontell meny till din sajt.

En så kallad hamburgermeny.2. Spara på utrymmet med en hamburgermeny

Ett annat populärt sätt för att göra menyer på mobila sajter och i appar är att använda en så kallad “hamburgermeny”, dvs en vertikal meny som visas när besökaren klickar på en avsedd knapp. Den främsta fördelen med hamburgermenyn är att den sparar utrymme på höjden jämfört med lösningen ovan, dock är besökaren tvungen att öppna menyn för att se vad den innehåller.

Vill du implementera ”hamburgermenyn” finns det många färdiga lösningar att använda, bl a jPanelMenu.

Det finns självklart många andra sätt att lösa menyfrågan för mobila enheter. Vilken är din favorit? Tipsa gärna och berätta om hur du resonerar i kommentarerna nedan.

Skapa en egen mobilanpassad hemsida

Med hjälp av något av alla de hemsidesverktyg vi erbjuder kan du med enkla medel skapa en egen mobilanpassad hemsida från grunden. Läs mer om de hemsidesverktyg vi erbjuder, och missa inte övriga inlägg om mobilanpassad webbdesign på vår blogg.

Dela: Facebooktwittergoogle_pluslinkedinmail

Två sätt att göra responsiva tabeller på din sajt

Att bygga en sajt som automatiskt anpassar sig efter mobil, surfplatta eller fullstor datorskärm innebär en del utmaningar. En av dem är tabeller. Här beskriver vi dels hur vi har löst det, men visar också en alternativ lösning om du har ännu bredare tabeller än vad vi har på Loopia.se. (Lär mer responsive web design här för att få koll på grunderna i hur du skapar responsiva tabeller).

Första steget är självklart att sätta bredden på tabellen och cellerna till ett procentvärde istället för ett fast värde. Men i väldigt många fall räcker inte detta om tabellen har många kolumner.

The Loopia-way

Om du besöker vår sajt via mobilen eller drar ned storleken på ditt webbläsarfönster så ser du att vi har valt att släcka den första kolumnen (med radrubriker), och istället visa rubrikerna ovanför varje cells innehåll som du kan se på bilden nedan. Vi har också minskat storleken på texten något.

Se exempel på detta på loopia.se/webbhotell.Bild som visar en av Loopias responsiva tabeller.

Om du har ännu större tabeller

Lösningen ovan fungerar bra för oss eftersom vi inte har några riktiga mastodont-tabeller. Vi har dock hittat en ganska trevlig lösning för dig som har tabeller med riktigt många kolumner. Här behålls istället kolumnen med radrubriker och låses, medan resten av kolumnerna går att skrolla mellan i sidled.

En del av översikten går tyvärr förlorad på mindre skärmar med den här lösningen, men det känns som en rimlig kompromiss.

Se exempel på denna lösning och hur du själv kan använda det på dina sajter.

responsive_table_alt2

Har du någon annan bra lösning för hur man hanterar tabeller med responsiv design? Tipsa gärna i kommentarerna.

Vill du skapa en mobilanpassad hemsida?

Med relativt enkla medel kan du skapa en egen mobilanpassad sajt, genom något av de hemsidesverktyg vi erbjuder. Läs mer om hemsidesverktygen, och missa inte övriga inlägg om mobilanpassad webbdesign på vår blogg.

Dela: Facebooktwittergoogle_pluslinkedinmail

Beställ domännamn eller webbhotell i mobilen eller på surfplattan

Nu är det lika smidigt att beställa domännamn eller webbhotell via mobilen eller surfplattan som med datorn. 

För en tid sedan lanserade vi nya responsiva Loopia.se. Att sidan är responsiv innebär att sajten automatiskt anpassar sig efter storleken på den skärm du besöker den med. Vi ser en tydlig trend bland våra besökare att surfandet via mobiler och surfplattor ökar drastiskt (se statistik). Självklart ville vi ge alla dessa besökare en lika bra upplevelse som de som använder datorn har.

responsive_loopia_se_2

Förutom att själva sidan anpassar sig efter skärmstorleken har vi lagt in små finurligheter som anpassade “fälttyper”, vilket gör att tangentbordet på din mobil anpassar sig efter det fält du ska fylla i. Det underlättar rejält med ett numeriskt tangentbord när du ska fylla i ditt kortnummer vid betalning till exempel (läs om hur du själv kan fixa anpassade fälttyper på din sajt).

falttyper-keyboards

Gör din sajt responsiv

Vi rekommenderar alla att se över möjligheten att bygga om sina sidor med responsive web design. Läs gärna våra bloggartiklar om “responsive web design” och vad du bör tänka på när du anpassar sajten för olika enheter:

Använder du WordPress har du mycket gratis då dess två senaste standardteman, Twenty Eleven och Twenty Twelve, är responsiva. Självklart finns det dessutom gott om ytterligare responsiva teman till WordPress. Du vet väl också att du installerar WordPress på Loopia med bara några klick med vår enkla steg-för-steg-guide i Loopia Kundzon?

…och du, vi arbetar just nu med att även göra Loopia Kundzon och Loopia ÅF-zon responsiva. Håll utkik här på bloggen, Facebook, Twitter eller Google+ så får du veta mer framöver.

Dela: Facebooktwittergoogle_pluslinkedinmail

Fixa en hemsida med WordPress standardtema TwentyTwelve

En vanlig fråga vi får är om man kan göra en enkel hemsida med WordPress. Jag brukar svara “ja och nej”. Du kan relativt enkelt skapa en hemsida med WordPress men det är du som sajtägare som sätter gränsen för hur långt du väljer att fördjupa dig i verktyget, och ibland kan du behöva peta lite i koden för temat för att nå det resultat du önskar.

Som webbhotellskund hos Loopia har du idag tillgång till WordPress via vår enkla steg-för-steg-guide i Loopia Kundzon.
steg-for-steg

Standardtemat TwentyTwelve anpassar sig efter mobilen, surfplattan och datorn

De senaste åren har WordPress årligen presenterat ett nytt standardtema, TwentyTen (2010) och därefter TwentyEleven (2011). Att det senaste standardtemat heter TwentyTwelve kommer därför knappast som en överraskning.

Precis som TwentyEleven är TwentyTwelve skapad med så kallad responsiv design, vilket innebär att formen anpassar sig efter storleken på den enhet du surfar med.

Enkelhet

Designteamet från WordPress har i och med TwentyTwelve tagit fasta på enkelhet. Det är ett avskalat tema och du får exempelvis välja att lägga till en egen bild i sidhuvudet om detta är något du önskar (det finns ingen bild där som standard vilket har varit fallet med tidigare teman).

Hemsida istället för blogg

När du skapar en sida i den administrativa delen av WordPress så har du möjligheten att välja en mall för temat. I TwentyTwelve kan du välja “Front Page Template” för att ge din sida ett mer “hemsideliknande” intryck vilket underlättar avsevärt för alla de som önskar skapa den där lite enklare hemsidan, istället för en klassisk WordPress-blogg.

Ett tips är att under “Inställningar” > “Läsa” välja att startsidan skall visa en statisk sida istället för bloggflödet. Här väljer du den sida du har skapat med “Front Page Template” för att få resultatet du ser i bilden nedanför.
twentytwelve-01

Menyn är mobilanpassad

En annan nyhet i “TwentyTwelve” är att toppmenyn fälls ihop om du besöker din sida med en liten skärm. I TwentyEleven kunde menyn lätt bli rörig på en mobil enhet om du hade många menyval.

twentytwelve-02

I bilderna ovanför visas sidan vid ett besök med en mobil enhet.

TwentyTwelve är ett enkelt, lättarbetat tema som är snyggt oavsett om du besöker den med en dator, surfplatta eller mobil. Är du i behov av en enkel hemsida så är WordPress med standardtemat TwentyTwelve en riktigt smidig lösning som du dessutom kan växa i ju högre krav du ställer på din sajt.

Är du ute efter ett ännu enklare sätt att skapa en hemsida kan du kolla in Loopia Sitebuilder som ingår i alla våra webbhotellspaket.

Dela: Facebooktwittergoogle_pluslinkedinmail

Beta-testa nya Loopia.se med responsive web design

Arbetet med att göra hela Loopia.se responsive (alltså att den anpassar sig efter den enhet/skärmstorlek du använder) pågår för fullt, och du kan nu provköra delar av nya Loopia.se på adressen responsive.loopia.se.

Gå gärna in och kika med din dator, smartphone och surfplatta och meddela oss på feedback@loopia.se om vad du tycker eller om du hittar några konstigheter (gärna med detaljer om vilket operativsystem, vilken webbläsare och enhet du använder så att det blir lättare för oss att justera det du hittat).

De delar som inte är responsive än är bloggen, kunskapsdatabasen samt kundzonen och åf-zonen. Dessa är byggda på andra system än övriga Loopia.se och vi håller på för fullt med att bygga om dem också. Håll utkik här på bloggen, och på Facebook, Twitter eller Google+ framöver så får du aktuell information om hur det arbetet fortgår, samt tips och funderingar kring hur vi löser olika delar.

Läs gärna våra blogginlägg med tips om hur du kan göra din sajt responsive och på andra sätt anpassa den för den ökande skaran mobilbesökare:

Dela: Facebooktwittergoogle_pluslinkedinmail

Tänk på mobilbesökaren först

Bild på en mobil som lyfts fram och påvisar vikten av att använda tankesättet Mobile first.Antalet besökare via mobila enheter ökar drastiskt på Loopia.se för varje månad som passerar, men detta är självklart inget unikt för våra sajter. Du har säkert sett samma trend på din besöksstatistik? Som vi tidigare berättat har vi snickrat om alla våra sajter med responsive web design för att de ska fungera lika bra oavsett vilken enhet du använder.

Du kanske har hört om begreppet “Mobile first”? Mobile first är ett tankesätt som innebär att du utgår från den mobila besökaren i första hand när du utformar din sajt. Även om besökarantalet från traditionella datorer kommer att vara betydande lång tid framöver så finns det stora poänger med det tankesättet. Det tvingar dig till exempel att prioritera vilka delar och vilken information som är viktigast och som ska framhävas först. Läs mer

Dela: Facebooktwittergoogle_pluslinkedinmail

Bygg din sajt med Responsive web design så den funkar bra i alla enheter – det gör vi!

Att bygga mobila webbsidor blev högaktuellt i och med att Iphone lanserades år 2007 och för första gången gjorde det riktigt smidigt att surfa med mobilen (eftersom den saknade 3G var det outhärdligt att surfa där man inte hade w-lan, men ändå). Sedan dess har det mobila surfandet fullkomligt exploderat och trenden pekar på att det inte är långt borta innan mer webbtrafik sker via mobila enheter än via datorer.

Många skyndade ivrigt att ta fram mobila versioner av sina sajter för att möta den växande mobila målgruppen. 2010 vände dock webbdesignern Ethan Marcotte upp och ner på allt när han myntade begreppet “Responsive web design” (RWD) i en artikel på A list a Apart. “Följsam webbdesign” som man fritt skulle kunna översätta begreppet till använder använder CSS Media Queries och andra befintliga webbtekniker för att göra så att din sajt automatiskt anpassar sig efter storleken på webbläsarfönstret på den enhet besökaren använder.

Inget mer frenetiskt zoomande eller begränsade mobilsajter

Fler och fler använder mobilen eller surfplattan som huvudsaklig surfenhet vid fler och fler tillfällen, dessa besökare accepterar inte en nedbantad mobilversion av din sajt, eller en desktop-version där de konstant måste zooma in och ut. De vill kunna göra ALLT och de vill kunna göra det smidigt – utan att plocka fram datorn.

Använder du dig av RWD laddas samma html- och css-filer oavsett vilken enhet besökaren av din sajt har. Besökaren får alltid samma innehåll (såvida du inte väljer att dölja det) och du slipper att ta fram olika versioner av din sajt för olika skärmstorlekar på mobiltelefoner, surfplattor, laptops och gigantiska desktop-skärmar.

Våra sajter blir responsive

Som vi har nämnt tidigare håller vi på att bygga om Loopia.se samt vår kundzon och åf-zon med RWD, och vi kommer snacka mycket mer om vårt arbete med det här på bloggen, Facebook, Twitter och Google+ framöver. Vi kommer även att skriva mer om begrepp som “mobile first” och “content first” som hänger tajt samman med en bra upplevelse på mindre skärmar (men egentligen är lika viktigt på stora skärmar).

Ethan Marcotte's bok om Responsive web design.Då det är ett omfattande projekt att se till att våra sajter efterföljer dessa riktlinjer kommer inte allt ske på en gång, och vi kommer under tiden att dela med oss av vårt arbete för att ni ska kunna ta del av våra erfarenheter och för att få er input.

Grunderna i Responsive web design är dock enkla, och vill du själv komma igång kan jag varmt rekommendera Ethan Marcottes bok “Responsive Web Design”. Vill du ha inspiration från hur andra har gjort kan du hitta ett stort antal RWD-sajter på mediaqueri.es.

Läs även gärna följande relaterade artiklar:

…du vet väl förresten att det två senaste grundmallarna i WordPress, TwentyEleven och TwentyTwelve, är responsiva?

Dela: Facebooktwittergoogle_pluslinkedinmail

25% mobila besökare på responsiva Webbkomet.se

Du har väl inte missat att Webbkomet.se funkar lika bra i mobilen eller surfplattan som på datorn? Anledningen är att sajten är byggd med så kallad “responsive web design” som automatiskt anpassar sajten efter storleken på webbläsaren (prova att ändra fönsterstorleken på sajten så ser du vad som händer).

Vi surfar mer och mer på både mindre och större enheter än en “vanlig” dator (t ex kommer 25% av besökarna på Webbkomet.se från mobila enheter). Självklart vill vi då inte zooma in och ut tills fingrarna blöder, eller mötas av en begränsad mobilsajt och tvingas växla över till “desktop-läge” för att göra det vi kom för. Med responsive web design kan du som sajtägare se till att dina besökare får en bra upplevelse oavsett vilken enhet de använder.

Bara början på Loopias responsive-satsning

Webbkomet.se lanserades i slutet av sommaren, och självklart är detta bara starten på Loopias responsive-satsning. Bakom kulisserna påbörjade vi för en tid sedan arbetet med att göra om alla våra sajter. Det är ett omfattande arbete som kräver stora förändringar av framför allt kundzonen för att fungera oavsett skärmstorlek. Räkna dock mer att vi kommer snacka betydligt mer om “responsive web design” här på bloggen framöver :).

Dela: Facebooktwittergoogle_pluslinkedinmail