Stikkordarkiv: responsivt design

To måter å sette opp responsive tabeller for nettsiden din

Det kan være krevende å sette opp en nettside som automatisk tilpasser mobil, nettbrett, eller desktop. Tabeller er definitivt en av disse. I denne artikkelen skal vi forklare deg to løsninger for dette.

Første steget er å definere bredden på tabellen og cellene, til en prosentverdi i stedet for et fast størrelse. I mange tilfeller rekker ikke dette om tabellen har mange kolonner. 

 

The Loopia-way

Besøker du nettsiden vår med mobilen din, eller reduserer størrelsen på nettleseren din, ser du følgende:

  • Den første kolonnen er fjernet, men tekstene fungerer heller som overskrift til hver enkelt celle.
  • Størrelsen på fontene er redusert.

Se eksempel på dette i www.loopia.no/webhotell/

 

Har du enda større tabeller

Med denne løsningen lar du kolonnene rulle fra side til side. Dessverre mister du noen av oversikten med små skjermer.

Se eksempel på denne løsningen, og hvordan du selv kan anvende dette til nettsiden din.

 

Har du flere tips om hvordan man forbedrer brukeropplevelsen, skriv i kommentarfeltet.

 

Ønsker du å skape din egen mobiltilpassede nettside?

Forsøk dette med noen av Loopias nettsideverktøy, og les mer om mobiltilpasning i bloggen vår.

Del dette innlegget:

Mobiltilpassede felttyper

Tastaturet på en mobiltelefon har både fordeler og ulemper. Sannsynligvis skriver du raskere på et vanlig tastatur, men i virtuelt tastatur endres funksjonen avhengig av bruksområdet.

Dette er noe du kan dra nytte av til din mobiltilpassede nettside.

 

Har du et felt for kortbetalinger er det kjekt at det numeriske tastaturet dukker opp automatisk i det kunden din skal fylle ut feltet. Dette gjør du ved å angi type=”number” i input-taggen:

<input type=»number» name=»cardnr» />

 

Det numeriske tastaturet er ulike på en iPhone og Android. Personlig foretrekker vi å anvende type=”tel” isteden, fordi dette fungerer bedre for iPhone-brukere.

Numerisk tastatur for iPhone til venstre, og Android til høyre.

 

Noen av felttypene du kan angi:

  • Number – numerisk tastatur.
  • Tel – en variant av de numeriske tastaturet for telefonnummer. Dette fungerer faktisk bedre enn “number” på en iPhone, om du kun trenger tall.
  • Url – viser tastaturet med knapper som “.”,”/” og “.com”.
  • Email – viser blant annet “.” og “@”.
  • Date – viser en datovelger.

Kompatibilitet

De fleste weblesere har støtte for mange felttyper, og om de ikke har det så vil de automatisk bruke type=”text”.

Ønsker du å se hvilke nettlesere som støtter de ulike funksjonen, kan du sjekke Can I use.

 

Slå av autokorrigering

For ytterligere å forbedre brukeropplevelsen med iOS (iPhone(iPad), kan du slå av autokorrigering og automatisk stor bokstav i de felt du ønsker. Et eksempel kan være å slå av stor bokstav i feltet hvor man taster inn brukernavn.

<input type=»text» name=»username» autocorrect=»off» autocapitalize=»off» />

 

Har du flere tips om hvordan man forbedrer brukeropplevelsen, skriv i kommentarfeltet.

Ønsker du å skape din egen mobiltilpassede nettside?

Forsøk dette med noen av Loopias nettsideverktøy, og les mer om mobiltilpasning i bloggen vår.

Del dette innlegget:

Design en mobiltilpasset meny for nettsiden din

En utfordring er å designe gode menyer tilpasset mobil. Vi gir deg to løsninger for dette, en horisontal og en vertikal. 

1. Horisontal meny

Med denne løsningen sveiper du over menyen med fingrene i steden for å skrolle til høyre eller venstre. Du kan også trykke på piltastene til høyre og venstre i menyen for å rulle hvis enheten ikke støtter «dra».

En fordel med denne menyen er at besøkende til nettstedet ditt få en innsikt i hva menyen inneholder, uten at det tar opp veldig mye skjermen.

Denne løsningen er inspirert av Circle prosjektet iScroll.

2. Vertikal meny

En annen populær løsning er å gjøre menyene i en såkalt “hamburger” løsning. Dette er en vertikal meny som vises når brukeren klikker på en knapp. Den største fordelen med hamburger menyen er at det sparer plass i høyden. I forhold til ovennevnte løsning må imidlertid den besøkende åpne menyen for å se hva den inneholder.

Ønsker du implementere “hamburger” menyen, kan du bruke for eksempel iPanelMenu.

 

Har du flere tips om hvordan man forbedrer brukeropplevelsen, skriv i kommentarfeltet.

Ønsker du å skape din egen mobiltilpassede nettside?

Forsøk dette med noen av Loopias nettsideverktøy, og les mer om mobiltilpasning i bloggen vår.

Del dette innlegget:

85% mobilsurfer daglig – her er fem tips til deg som vil mobiltilpasse nettsiden din

Å mobiltilpasse nettsiden gir høyere rangering i søkemotoren til Google

Andelen nordmenn som bruker mobilen til å surfe på nettet øker stadig. I følge Statistisk Sentralbyrå mobilsurfer 85% av den norske befolkningen daglig. Dette setter krav til deg som driver virksomhet.

Målgruppen din forventer å kunne gjøre akkurat det samme med mobilen som med pc’en. Google forventer akkurat det samme. De gir virksomheten din dårligere rangering i søkemotoren om du ikke har mobiltilpassset nettsiden. Noen av kravene Google stiller deg er:

  • Nettsiden laster ned innholdet raskt
  • Navigasjonen er brukervennlig
  • Unngå zooming for å se hele innholdet
  • Leservennlig skrift på liten skjerm
  • Unngå tredjepart programmer som ikke fungerer på mobil

Det hjelper lite om du har jobbet grundig med SEO-optimalisering for nettsiden din tidligere. Konkurrentene dine som har mobiltilpasset nettsiden vil uansett få høyere rangering enn deg. Hvilken konsekvens får det for deg? Svaret er kundeflukt.

Selv om du ikke har mobiltilpasset nettsiden ennå skal du ikke fortvile. Loopia har løsningen med produktet sitt Loopia Sitebuilder der du enkelt mobiltilpasser nettsiden din. Vi gir deg gode råd i denne artikkelen for hva som skal til for mobiltilpasse nettsiden.

1. Mobiltilpassede felttyper – slik gjør du

Det virtuelle tastaturet på mobiltelefoner kan tilpasses i ulike former. Driver du nettbutikk kan du aktivere funksjonen hvor tastaturet forstørres når kunden din skal taste inn kortinfo. Kjekt ikke sant? Sjekk linken for hvordan du får dette til.

» Slik skaper du mobiltilpassede felttyper 

2. Responsive tabeller – her er to varianter

En utfordring med mobiltilpassede nettsider er å skape leservennlige tabeller. Utfordringen er å designe en tabell som fungerer på ulike mobiler og nettlesere. Vi har løsningen for hvordan få til dette.

» To brukervennlige responsive tabeller 

3. Mobiltilpasset meny – slik får du til dette

Ikke nok med at tabeller er en utfordring, men en mobiltilpasset meny er også krevende å få til. Mange mobiltelefoner har små skjermer som gjør det vanskelig for brukeren å navigere på nettsider som ikke er mobiltilpasset. Ofte må man zoome inn på skjermen eller vende mobilen til siden for å bruke menyen. Dette bør brukeren din slippe å oppleve. Vi har to løsninger for å skape bedre brukeropplevelser med menyer:

  • En vertikal løsning, populært kalt “hamburgermeny”, som anvendes på nesten alle nettsider.
  • En horisontal løsning.

» Slik setter du opp en mobiltilpasset meny 

4. Loopia Sitebuilder – kjapp og enkel mobiltilpasset design

Som et av Nordens største webhotell har Loopia lang erfaring med utvikling av webløsninger. Vårt populære nettsideverktøy Loopia Sitebuilder er utviklet for at du uten forkunnskaper skal kjapt og enkelt designe nettside. Verktøyet inneholder flere responsive designmaler som tilpasser nettsiden din automatisk etter hvilken enhet som brukes. Synes du dette virker interessant tilbyr vi deg å teste Loopia Sitebuilder gratis i en periode.

Prøv Loopia Sitebuilder gratis og kom i gang med responsiv nettside

5. Design en hjemmeside med verdens største publiseringsverktøy – WordPress

Det er ikke uten grunn at WordPress har mange millioner brukere verden over. De fleste WordPress-temaene er responsive og tilpasser seg etter enhetene som brukes. For å skape en mobiltilpasset nettside i WordPress trenger du å installere verktøyet. Velge et responsivt design og fylle deretter på med tekst, bilder og mediafiler.

WordPress er faktisk lettere enn du tror. Trenger du allikevel gode råd har Loopia sin egen populære WordPress-skole der du finner masse gode tips.

Kom i gang med WordPress hos Loopia

Trenger du hjelp med å mobiltilpasse nettsiden din?

Loopia har over 3000 partnere. Mange av disse er webbyråer som kan hjelpe deg med å mobiltilpasse nettsiden din. Send en e-post til forhandler@loopia.no så hjelper vi deg med å finne rett webbyrå.

Les mer om Loopias partneravtale

Del dette innlegget: