Bloggen

Mobilvennlig layout

Veldig få butikkeiere har innsett viktigheten av å kunne tilby netthandel på mobile enheter, slik som iPhone, Android og Windows Mobile. Noen av våre kunder opplever at opptil 23-25% av alle besøkende bruker iPad eller mobiltelefonen når de besøker nettbutikken. iPad er fortsatt mest brukt med ca 3/5, mobile enheter utgjør ca. 2/5 av de 23-25% av det totale antall besøk i nettbutikken.

iPad er det ikke sikkert at man trenger å gjøre all verdens for å få siden til å tilpasse seg skjermstørrelsen, det være seg portrett (768px) eller landskap (1024px). Kanskje holder det å justere bildevisningen ved hjelp av css for å få nettbutikken til å fremstå som man ønsker på en iPad.

Hover-effekt støttes ikke på en iPad bl.a, så her må man være forsiktig med bruken. På sykkelsport.no har vi lagt inn en megameny i toppen. Denne menyen baserer seg på hover-effect ved hjelp av css. På en iPad må man der klikke på toppkategoriene for å få frem underkategoriene, mens på vanlig pc vil få opp underkategoriene ved kun å bevege musepilen over menypunktene. Slideshowet er responsivt, det er lagt inn en max-width, ved mindre skjermer tilpasser det seg størrelsen på enheten, slik at det kan brukes på mobiltelefoner også.

Til iPhone og Android bruker vi jQuery Mobile til å sette opp en layout som er ganske annerledes til den vanlige nettbutikken, men som på en mobiltelefon vil være perfekt i forhold til skjermstørrelsen. På en mobil bruker man bare en kolonne, slik at alt som er «unødvendig» fjernes, og man beholder kun det viktigste i nettbutikken, nemlig produktene.

Hvis man besøker birksport.no ved hjelp av en iPhone eller Android mobiltelefon, så vil du se at layouten er helt annerledes enn i nettbutikken du kommer til hvis du besøker dem via pc.

DIBS har også lansert et responsivt betalingsvindu, slik at man enkelt kan gjennomføre en handel, helt fra å legge produkt i kurven, til å betale med kredittkort, enkelt via mobiltelefonen.

Produktside på iPhone

Produktside på iPhone

Kategoriliste på iPhone

Kategoriliste på iPhone

Kategoriside

Kategoriside

Logg inn

Logg inn

Handlekurv

Handlekurv

Betalingsvindu

Betalingsvindu

LiveZilla Live Help