Mobilversjon av nettstedet: hvordan gjør jeg det? Adaptiv design

Innholdsfortegnelse:

Mobilversjon av nettstedet: hvordan gjør jeg det? Adaptiv design
Mobilversjon av nettstedet: hvordan gjør jeg det? Adaptiv design
Anonim

I dag går de fleste på nett via mobile gadgets – nettbrett, telefoner, i denne forbindelse når nettstedoptimalisering også et nytt nivå. Hvis en bruker kommer inn og ser at siden ikke er optimalisert for mobile enheter: bildet kan ikke vises, knappene har flyttet ut, skriftene er små og uleselige, designet er skjevt - 99 av 100 % at han vil avslutte og begynn å se etter en annen mer praktisk. Og søkeroboten vil merke av for at ressursen er irrelevant, det vil si at den ikke samsvarer med søket. Derfor må designet på siden tilpasses ulike mobile enheter. Hva er en mobilversjon av nettstedet, hvordan lages det, og hva er den beste måten å bruke det på? Les mer i denne artikkelen.

Så det er fire viktige måter å gjøre nettstedet ditt mobilvennlig på.

hvordan lage en mobilversjon av nettstedet
hvordan lage en mobilversjon av nettstedet

Method One – Responsive Design

Responsive maler endrer nettstedets bilde avhengig av skjermstørrelsen. Som regel er de satt til standard 1600, 1500, 1280, 1100, 1024 og 980 piksler. For implementering brukes CSS3 Media Queries. Selve nettstedets design endres ikke.

Fordelene med denne metoden inkluderer:

  • praktisk utvikling,siden strukturen i seg selv tilpasser seg skjermparameterne, og enhver oppdatering ikke krever designutvikling fra bunnen av, er det nok å justere CSS og HTML;
  • one URL – brukeren trenger ikke å huske flere navn, det er ikke behov for en omdirigering (omdirigere fra en adresse til en annen), noe som kan komplisere arbeidet til en webmaster, og det er lettere for et søk motor for å sortere og rangere en ressurs med én enkelt adresse.

Selvfølgelig har adaptive maler sine ulemper, som for øvrig er mer enn fordeler. Ikke desto mindre følger mange utviklere dette konseptet, for eksempel Google Corporation, hvis mobilversjon av nettstedet har en adaptiv design. Så, ulemper:

  • Responsiv design støtter ikke de samme oppgavene på mobil som på PC. Hvis dette for eksempel er en mobilversjon av en banks nettside, hvor informasjon om valutakurs eller nærmeste minibank er mer sannsynlig å være viktig for brukeren, så er dette designet nok. Men hvis dette er en kompleks strukturert ressurs med mange seksjoner og underseksjoner, vil besøkende neppe like adaptiv layout.
  • Langsom lasting gjør et favorittnettsted til et hatefullt nettsted. Dette gjelder spesielt for ressurser der animasjoner, videoer, popup-vinduer og andre aktive elementer er i overflod. På grunn av den høye vekten vil siden ganske enkelt "sakne farten", brukeren blir sint og går, og nettstedets søkeposisjoner vil falle.
  • Manglende evne til å slå av mobilversjonen er en annen betydelig ulempe. Hvis et element er skjult av en slik layout, vil dudet er ingenting du kan gjøre for å åpne det, i motsetning til nettsteder der du kan slå det av og bytte til et vanlig domene.

Men en slik mobilversjon av siden raskt, uten spesielle ferdigheter og kostnader, lar deg tilpasse ressursen til alle dingser. Men i lys av de oppførte manglene, vil den passe små, enkle ressurser med et minimum av informasjon og multimedia, uten kompleks navigasjon og animasjon. For et komplekst nettsted er 2 andre metoder egnet.

nettsteddesign
nettsteddesign

Andre metode - en egen versjon av nettstedet

Denne metoden er veldig vanlig og lykkes ofte i å gjøre nettstedet mer lesbart på en mobil enhet. Essensen er å lage en egen versjon av siden, tegnet for applikasjonen og plassert på en egen URL eller underdomene, for eksempel m.vk.com. Samtidig er hovedfunksjonaliteten bevart, utformingen av nettstedet ser bare annerledes ut. Fordelene med denne metoden er åpenbare:

  • brukervennlig grensesnitt;
  • lett å endre og redigere ettersom versjonen eksisterer separat fra hovedressursen;
  • på grunn av den lave vekten fungerer en egen versjon av nettstedet mye raskere enn en adaptiv mal;
  • oftest er det mulig å gå til hovedversjonen av siden fra mobilen.

Men det var noen ulemper her også:

  • Flere adresser - desktop og mobilversjon av nettstedet. Hvordan få brukeren til å huske to alternativer? Webmastere foreskriver ofte en omdirigering (viderekobling) fra desktopversjonen til mobilversjonen, men samtidig hvis denne siden er i mobilenversjonen ikke eksisterer, vil brukeren motta en feilmelding. Her oppstår det vanskeligheter med søkemotorer, som synes det er vanskelig å rangere 2 identiske ressurser, og dette påvirker markedsføringen direkte.
  • Mobilversjonen av nettstedet fra en datamaskin, hvis brukeren besøker det ved en feil, vil se latterlig ut, noe som også kan påvirke trafikken.
  • Denne versjonen er ofte sterkt begrenset, stasjonær, slik at brukeren vil få svært begrenset funksjonalitet. Men samtidig, hvis noe mangler, kan den besøkende gå til fullversjonen av siden.

Generelt sett rettferdiggjør en egen mobilside seg selv og er den vanligste måten å tilpasse en ressurs for mobile enheter. Den er populær blant store nettbutikker som Amazon.

adaptive maler
adaptive maler

Tredje vei – RESS-design

Googles søkemotor støtter aktivt denne retningen for mobildesign. Dette er den mest komplekse, kostbare, men effektive metoden for å tilpasse nettstedet til en telefon eller et nettbrett. Det heter RESS. Dette målretter en ressurs inn i en mobilapplikasjon som kan lastes ned for hver enhet separat. For Android - med GooglePlay, og for Apple - med iTunes.

Slike applikasjoner er raske, gratis, praktiske, har muligheten til å romme ulike typer informasjon, mens telefonens minne og Internett-trafikk ikke spises opp som når du besøker et nettsted gjennom en nettleser. De er enkle å få tilgang til, siden lenken alltid vil være på skjermen for hånden, og det er ikke nødvendig å angi et komplekst navn i nettleserens adresselinje.

Det er selvfølgelig her ogdens mangler, for eksempel kompleksitet i utviklingen, de høye arbeidskostnadene til et stort antall programmerere, behovet for å lage flere layout alternativer. Noen ganger gjenkjennes ikke mobilenheten av applikasjonen. Regelmessig teknisk støtte, korrigering av mangler er nødvendig. Likevel regnes dette alternativet som det beste av de tre foreslåtte på grunn av dets produktive, uavbrutt drift.

google mobilnettsted
google mobilnettsted

Den billigste måten å lage et mobilnettsted

Alle metodene ovenfor innebærer, om enn ikke alltid lang og vanskelig, men fortsatt bet alt arbeid av en webmaster. Hvis du ikke ser et presserende behov for slik utvikling, vil en enkel og gratis mobilversjon av siden passe deg. Hva er den enkleste måten å lage det på?

Last ned spesielle maler (plugins) for responsiv design. For eksempel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile og andre. De vil bidra til å vise siden mer korrekt på telefonen, samtidig som du får noen tips om hva som bør rettes for bedre å tilpasse siden til mobilversjonen.

Selvfølgelig er denne metoden neppe egnet for seriøse ressurser. Snarere er denne gratisfunksjonen beregnet på små og enkle nettsteder, blogger, nyhetsfeeds. Ikke glem at Googles søkemotor, så vel som Yandex, i dag stiller alvorlige krav til mobilversjoner, så det er en stor sjanse for å senke posisjonene dine ved å bruke denne metoden.

Med denne metoden vil mest sannsynlig annonser og popup-vinduer bli kuttet avbannere, men siden lastes raskt og uten "lags".

mobilversjon av nettstedet android
mobilversjon av nettstedet android

Prinsipp for å lage mobilversjoner

Det spiller ingen rolle om mobilversjonen av nettstedet ble opprettet gratis eller ved hjelp av en stab av webansvarlige, den ble laget på RESS-systemet eller ved hjelp av en adaptiv mal. Viktigst, for effektiv drift, er det nødvendig å følge flere ekstremt viktige prinsipper. Så, hva skal være mobilversjonen av nettstedet? Hvordan gjøre det produktivt, effektivt og produktivt?

mobilversjon av nettstedet fra en datamaskin
mobilversjon av nettstedet fra en datamaskin

Fjern alt som er unødvendig

Minimalisme er det utvikleren av mobilversjonen av siden bør strebe etter. Tenk deg hvor vanskelig det er å oppfatte informasjon som er fylt med farger, knapper, bannere, og som du i det uendelige må bla gjennom på leting etter det rette materialet. Mobildesign skal være enkelt og rent. Velg 2-3 farger for å dele opp rommet (for eksempel merkevare). Bedre hvis en av dem er hvit. Del plassen til en liten skjerm inn i forståelige og lesbare soner. Virtuelle nøkler skal være synlige slik at brukeren tydelig vet hvor han skal trykke og ser - her er produktet, her er skjemaet for utfylling av data, her er informasjonen om levering og betaling.

Alle tilleggs alternativer som vil være nyttige i desktopversjonen og gjøre livet enklere for brukeren, vil bare føre til vanskeligheter her. La bare de viktigste elementene være igjen. Animasjon, reklamebannere, multimedia vil mest sannsynlig bare redusere arbeidet med nettstedet eller applikasjonen og distrahere framain.

Alignment

Spørsmålet om justering er ikke mindre akutt, fordi hvis det gjøres feil, vil brukeren bare få endelsene til viktige ord. Venstrejustert og vertikal justering er generelt akseptert. Se for deg at du blar gjennom nyhetsstrømmen på telefonen din. Du gjør det fra topp til bunn, ikke til venstre eller høyre.

Unification

Når det ikke er mulighet for en lang kjede av overganger, prøv å kombinere flere trinn til ett. For eksempel krever siden datainntasting i flere stadier - et navn, deretter en adresse, hvor det i hver enkelt celle er et eget hus, gate, leilighet osv. For ikke å tvinge brukeren til å prøve å treffe mange små celler, be ham om å fylle inn bare 2 - navn og adresse.

Og frakobling

Noen ganger er det tvert imot påkrevd å skille for mye informasjon. For eksempel har du i rullegardinmenyen en liste over mer enn 80 byer hvor levering utføres. Grupper dem etter region slik at brukeren ikke trenger å bla gjennom denne enorme listen. Når han holder markøren over det regionale senteret eller regionen, faller en annen liste over byer ut.

Listings

Forresten, om listene. Det er to av dem - fast i alfabetisk eller annen rekkefølge og med substitusjon. Valget deres avhenger av hva som vil bli oppført.

Fixed er nyttig hvis brukeren vet nøyaktig hva de leter etter. For eksempel by, nummer eller dato. Det andre alternativet passer for lange komplekse navn eller for tilfeller der det er mange varianter av ett og sammesamme navn, og hver nedtrekksliste bringer brukeren ett skritt nærmere målet. Alternativet for automatisk erstatning brukes oftere når en besøkende trenger hjelp. For eksempel tilbyr en strikkeside å kjøpe strikkepinner. Brukeren skriver inn søkeordet «Metal strikkepinner», og i verktøytipset ser han «Strikkepinner 5 mm», «Strikkepinner 4,5 mm» osv.

Autofyll

Denne varen er spesielt relevant for nettsteder som selger noe på nettet, og du må fylle ut standardskjemaer for betaling, levering osv. Hvis en person kjøper fra en telefon, har han mest sannsynlig ikke tid å komme til en datamaskin, noe som betyr at kjøpsprosessen bør gjøres så rask og praktisk som mulig.

For dette kan skjemaene inneholde allerede utfylte data, du kan ty til de mest populære svarene. Sett for eksempel inn dagens dato, kontantbetalingsmåte, by hvis du jobber i samme region. De kan endres, men hvis du treffer målet, vil brukerens tid bli lagret.

Alt er lest, alt blir sett

Når du designer mobilversjonen av nettstedet, husk at alles telefoner er forskjellige, og det samme er synet. Kanskje nettstedet ditt vil bli sett fra en liten skjerm, så skriftene bør være enkle og lesbare, knappene bør være store nok til at de kan klikkes uten å bli tatt til en annen side, og bildene bør åpnes separat, store, spesielt når den kommer til Internett. store.

Noen statistikk

Når vi snakker om tilpasningen av nettstedet til mobile enheter, kan man ikke unngå å ty til statistikk for å forstå hvor viktig denne prosessen er fornettkampanje.

Tallene er som følger. I dag brukes dingser av 87% av befolkningen, tilsynelatende, bortsett fra de minste barna og noen eldre. Økonomer spår mobilhandel vil vokse 100 ganger i løpet av de neste 5 årene. Samtidig er bare 21 % av nettstedene tilpasset for å fungere med mobile enheter. Dette betyr at bare en liten 5. del av Internett-trafikken og e-handelsmarkedet er okkupert.

Tenk på disse tallene. Er det fornuftig å tilpasse ressursen din? Selvfølgelig ja. Dessuten, mens det er så mye plass i dette markedet, kan du lage ditt eget segment i det.

mobilversjon av nettstedet gratis
mobilversjon av nettstedet gratis

Hvor du trenger en mobilversjon

Å bruke mobilversjonen er fornuftig for enhver plattform som har som mål å få en høy rangering. Tross alt er dette en direkte innvirkning på brukeren, og skaper komfortable forhold for ham å bli på nettstedet ditt.

Kan ikke eksistere uten mobilversjon:

  • nyhetsportaler, fordi de fleste av dem sees fra telefonen på vei til jobb eller skole;
  • sosiale nettverk - av samme grunn, pluss at det er en online kommunikasjonsfaktor, som betyr at det bør opprettes en praktisk, forståelig chat for dette;
  • referanse, navigasjonsnettsteder osv., hvor folk går når de leter etter noe;
  • nettbutikker - en mulighet til å tiltrekke seg kunder som ikke kaster bort tiden på shopping, men kjøper alt via mobilt internett.

I stedet for en konklusjon

I dag er mobilteknologi i verdenaktiv vekst og utvikling, derfor, og streber etter lederskap i markedet, må ethvert selskap sørge for at Internett-ressursen oppfyller kravene. På grunn av de økende kravene fra brukeren, må nettsteder hele tiden oppgraderes og tilpasses forskjellige enheter. Det er klart at hvis en person er upraktisk å være på en bestemt ressurs, kan han ikke få informasjon om et produkt eller pris der, legge inn en bestilling, finne ut om levering, så vil han finne nettstedet der alt dette vil bli mulig. Derfor, for å vinne konkurransen, er det viktig å ha en fleksibel, praktisk, funksjonell og interessant ressurs.

Mobilversjonen av Android- eller Ios-nettstedet vil hjelpe til med dette. For å gjøre dette, må du velge en av de ovennevnte redesignmetodene - en adaptiv mal, lage et nytt nettsted på et underdomene og omdirigere til det, bruke gratis maler, eller lage en mobilapplikasjon som vil gjøre det enklere for brukeren å gå inn og være på siden.

Denne tilnærmingen vil ikke bare bidra til å opprettholde lojaliteten til eksisterende kunder, men vil også gi en mulighet til å tiltrekke seg nye besøkende.

Anbefalt: