Mobilversion af webstedet: hvordan gør man det? Adaptivt design

Indholdsfortegnelse:

Mobilversion af webstedet: hvordan gør man det? Adaptivt design
Mobilversion af webstedet: hvordan gør man det? Adaptivt design
Anonim

I dag går de fleste mennesker online gennem mobile gadgets - tablets, telefoner, i denne henseende er webstedsoptimering også ved at nå et nyt niveau. Hvis en bruger kommer ind og ser, at siden ikke er optimeret til mobile enheder: billedet kan ikke ses, knapperne er flyttet ud, skrifttyperne er små og ulæselige, designet er skævt - 99 ud af 100 % at han vil afslutte og begynde at lede efter en anden mere praktisk. Og søgerobotten markerer afkrydsningsfeltet, at ressourcen er irrelevant, det vil sige, at den ikke matcher søgeforespørgslen. Derfor skal sidens design tilpasses forskellige mobile enheder. Hvad er en mobilversion af webstedet, hvordan laver man det, og hvad er den bedste måde at anvende det på? Læs mere i denne artikel.

Så der er fire vigtige måder at gøre dit websted mobilvenligt på.

hvordan man laver en mobilversion af siden
hvordan man laver en mobilversion af siden

Method One - Responsive Design

Responsive skabeloner ændrer webstedsbilledet afhængigt af skærmstørrelsen. Som regel er de sat til standard 1600, 1500, 1280, 1100, 1024 og 980 pixels. Til implementering bruges CSS3 Media Queries. Selve webstedets design ændres ikke.

Fordelene ved denne metode omfatter:

  • bekvem udvikling,da strukturen i sig selv tilpasser sig skærmparametrene, og enhver opdatering ikke kræver designudvikling fra bunden, er det nok at justere CSS og HTML;
  • én URL – brugeren behøver ikke at huske flere navne, der er ikke behov for en omdirigering (omdirigering fra en adresse til en anden), hvilket kan komplicere arbejdet for en webmaster, og det er lettere for en søgning motor til at sortere og rangere en ressource med en enkelt adresse.

Selvfølgelig har adaptive skabeloner deres ulemper, som i øvrigt er mere end fordele. Ikke desto mindre holder mange udviklere sig til dette koncept, for eksempel Google Corporation, hvis mobilversion af webstedet har et adaptivt design. Så, ulemper:

  • Responsivt design understøtter ikke de samme opgaver på mobil, som det gør på pc. Hvis der for eksempel er tale om en mobilversion af en banks hjemmeside, hvor der er større sandsynlighed for, at oplysninger om valutakursen eller de nærmeste pengeautomater er vigtige for brugeren, så er dette design nok. Men hvis dette er en kompleks struktureret ressource med mange sektioner og undersektioner, vil besøgende næppe kunne lide adaptivt layout.
  • Langsom indlæsning forvandler et yndlingssted til et hadefuldt. Dette gælder især for ressourcer, hvor animationer, videoer, pop-ups og andre aktive elementer er i overflod. På grund af den høje vægt vil siden simpelthen "sænke farten", brugeren bliver vred og går, og sidens søgepositioner vil falde.
  • Den manglende evne til at slukke for mobilversionen er en anden væsentlig ulempe. Hvis et element er skjult af et sådant layout, vil duder er intet, du kan gøre for at åbne det, i modsætning til websteder, hvor du kan slå det fra og skifte til et almindeligt domæne.

Men sådan en mobil version af webstedet giver dig hurtigt, uden særlige færdigheder og omkostninger, dig mulighed for at tilpasse ressourcen til enhver gadget. Men i lyset af de anførte mangler vil det passe til små, enkle ressourcer med et minimum af information og multimedier uden kompleks navigation og animation. Til et komplekst websted er 2 andre metoder egnede.

webstedsdesign
webstedsdesign

Anden metode - en separat version af webstedet

Denne metode er meget almindelig og har ofte succes med at gøre webstedet mere læsbart på en mobilenhed. Dens essens er at oprette en separat version af siden, tegnet til applikationen og placeret på en separat URL eller underdomæne, for eksempel m.vk.com. Samtidig er hovedfunktionaliteten bevaret, sidens design ser bare anderledes ud. Fordelene ved denne metode er indlysende:

  • brugervenlig grænseflade;
  • let at ændre og redigere, da versionen eksisterer separat fra hovedressourcen;
  • på grund af den lave vægt fungerer en separat version af webstedet meget hurtigere end en adaptiv skabelon;
  • oftest er det muligt at gå til hovedversionen af siden fra mobilen.

Men der var også nogle ulemper her:

  • Flere adresser - desktop- og mobilversion af webstedet. Hvordan får man brugeren til at huske to muligheder? Webmastere foreskriver ofte en omdirigering (omdirigering) fra desktopversionen til mobilversionen, men samtidig, hvis denne side er i mobilenversion ikke eksisterer, vil brugeren modtage en fejl. Her opstår der vanskeligheder med søgemaskiner, som har svært ved at rangere 2 identiske ressourcer, og det påvirker direkte promoveringen.
  • Mobilversionen af webstedet fra en computer, hvis brugeren besøger det ved en fejl, vil se latterligt ud, hvilket også kan påvirke trafikken.
  • Denne version er ofte stærkt indskrænket, desktop, så brugeren vil få meget begrænset funktionalitet. Men på samme tid, hvis der mangler noget, kan den besøgende gå til den fulde version af siden.

Generelt retfærdiggør et separat mobilwebsted sig selv og er den mest almindelige måde at tilpasse en ressource til mobile enheder. Det er populært blandt store onlinebutikker såsom Amazon.

adaptive skabeloner
adaptive skabeloner

Tredje vej - RESS-design

Google-søgemaskinen understøtter aktivt denne retning af mobildesign. Dette er den mest komplekse, dyre, men effektive metode til at tilpasse webstedet til en telefon eller tablet. Det hedder RESS. Dette målretter en ressource ind i en mobilapplikation, der kan downloades for hver enhed separat. Til Android - med GooglePlay og til Apple - med iTunes.

Sådanne applikationer er hurtige, gratis, praktiske, har evnen til at rumme forskellige typer information, mens telefonens hukommelse og internettrafik ikke bliver spist op, som når man besøger et websted via en browser. De er nemme at få adgang til, da linket altid vil være på skærmen ved hånden, og der er ingen grund til at indtaste et komplekst navn i browserens adresselinje.

Der er selvfølgelig her ogdens mangler, såsom kompleksitet i udviklingen, de høje arbejdsomkostninger for et stort antal programmører, behovet for at lave flere layoutmuligheder. Nogle gange genkendes mobilenheden ikke af applikationen. Regelmæssig teknisk support, korrektion af mangler er nødvendig. Ikke desto mindre anses denne mulighed for at være den bedste af de tre foreslåede på grund af dens produktive, uafbrudte drift.

google mobil hjemmeside
google mobil hjemmeside

Den billigste måde at lave et mobilwebsted

Alle ovenstående metoder involverer, omend ikke altid langt og vanskeligt, men stadig bet alt arbejde af en webmaster. Hvis du ikke ser et presserende behov for en sådan udvikling, vil en enkel og gratis mobilversion af siden passe til dig. Hvad er den nemmeste måde at lave det på?

Download specielle skabeloner (plugins) til responsivt design. For eksempel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile og andre. De vil hjælpe med at vise siden mere korrekt på telefonen, mens du får et par tips til, hvad der bør rettes for bedre at tilpasse siden til mobilversionen.

Selvfølgelig er denne metode næppe egnet til seriøse ressourcer. Denne gratis funktion er snarere beregnet til små og enkle websteder, blogs, nyhedsfeeds. Glem ikke, at Googles søgemaskine, såvel som Yandex, i dag stiller seriøse krav til mobilversioner, så der er en enorm chance for at sænke dine positioner ved hjælp af denne metode.

Med denne metode vil annoncer og pop op-vinduer højst sandsynligt blive afskåretbannere, men siden indlæses hurtigt og uden "lags".

mobil version af webstedet android
mobil version af webstedet android

Principper for oprettelse af mobilversioner

Det er ligegyldigt, om mobilversionen af siden blev oprettet gratis eller med hjælp fra en stab af webmastere, den blev lavet på RESS-systemet eller ved hjælp af en adaptiv skabelon. Vigtigst af alt, for dens effektive drift, er det nødvendigt at overholde flere ekstremt vigtige principper. Så hvad skal mobilversionen af webstedet være? Hvordan gør man det produktivt, effektivt og produktivt?

mobilversion af webstedet fra en computer
mobilversion af webstedet fra en computer

Fjern alt unødvendigt

Minimalisme er, hvad udvikleren af den mobile version af webstedet bør stræbe efter. Forestil dig, hvor svært det er at opfatte information, der er fyldt med farver, knapper, bannere, og som du uendeligt skal scrolle igennem på jagt efter det rigtige materiale. Mobildesign skal være enkelt og rent. Vælg 2-3 farver for at opdele rummet (f.eks. mærkevarer). Bedre hvis en af dem er hvid. Opdel rummet på en lille skærm i forståelige og læsbare zoner. Virtuelle nøgler skal være synlige, så brugeren tydeligt ved, hvor han skal trykke og se - her er produktet, her er formularen til udfyldning af data, her er information om levering og betaling.

Alle yderligere muligheder, der ville være nyttige i desktopversionen og gøre livet lettere for brugeren, vil kun bringe vanskeligheder her. Efterlad kun de vigtigste elementer. Animation, reklamebannere, multimedie vil højst sandsynligt kun bremse arbejdet på webstedet eller applikationen og distrahere framain.

Alignment

Spørgsmålet om tilpasning er ikke mindre akut, for hvis det gøres forkert, vil brugeren kun få slutningerne på vigtige ord. Venstrejusteret og lodret justering er generelt accepteret. Forestil dig, at du scroller gennem nyhedsstrømmen på din telefon. Du gør det fra top til bund, ikke til venstre eller højre.

Unification

Når der ikke er mulighed for en lang kæde af overgange, så prøv at kombinere flere trin i ét. For eksempel kræver siden indtastning af data i flere trin - et navn, derefter en adresse, hvor der i hver enkelt celle er et separat hus, gade, lejlighed osv. For ikke at tvinge brugeren til at forsøge at ramme mange små celler, bed ham om kun at udfylde 2 - navn og adresse.

Og afbrydelse

Nogle gange er det tværtimod påkrævet at adskille for meget information. For eksempel har du i rullemenuen en liste over mere end 80 byer, hvor leveringen udføres. Gruppér dem efter region, så brugeren ikke behøver at rulle gennem denne enorme liste. Når han holder markøren over det regionale center eller regionen, vil en anden liste over byer falde ud.

Listings

Forresten, om listerne. Der er to af dem - fast i alfabetisk eller anden rækkefølge og med substitution. Deres valg afhænger af, hvad der vil blive opført.

Fixed er nyttigt, hvis brugeren ved præcis, hvad de leder efter. For eksempel by, nummer eller dato. Den anden mulighed er velegnet til lange komplekse navne eller til tilfælde, hvor der er mange variationer af en og sammesamme navn, og hver rulleliste bringer brugeren et skridt tættere på målet. Muligheden for automatisk erstatning bruges oftere, når en besøgende har brug for hjælp. For eksempel tilbyder en strikkeside at købe strikkepinde. Brugeren indtaster søgeordet "Metal strikkepinde", og i værktøjstippet ser han "Strikkepinde 5 mm", "Strikkepinde 4,5 mm" osv.

Autofyld

Denne vare er især relevant for websteder, der sælger noget online, og du skal udfylde standardformularer for betaling, levering osv. Hvis en person foretager et køb fra en telefon, har han højst sandsynligt ikke tid at komme til en computer, hvilket betyder, at købsprocessen skal gøres så hurtig og bekvem som muligt.

For dette kan formularerne indeholde allerede udfyldte data, du kan ty til de mest populære svar. Indsæt f.eks. dags dato, kontant betalingsmetode, by, hvis du arbejder i samme region. De kan ændres, men hvis du rammer målet, vil brugerens tid blive gemt.

Alt er læst, alt bliver set

Når du designer mobilversionen af webstedet, skal du huske, at alles telefoner er forskellige, og det samme er deres syn. Måske vil dit websted blive set fra en lille skærm, så skrifttyperne skal være enkle og læselige, knapperne skal være store nok til at de kan klikkes uden at blive taget til en anden side, og billederne skal åbne separat, store, især når det kommer til internettet. butik.

Nogle statistik

Når man taler om tilpasningen af webstedet til mobile enheder, kan man ikke undgå at ty til statistik for at forstå, hvor vigtig denne proces er foronline kampagne.

Tallene er som følger. I dag bruges gadgets tilsyneladende af 87% af befolkningen, bortset fra de mindste børn og nogle ældre mennesker. Økonomer forudser, at mobilhandel vil vokse 100 gange i løbet af de næste 5 år. Samtidig er kun 21 % af webstederne tilpasset til at arbejde med mobile enheder. Det betyder, at kun en lille 5. del af internettrafikken og e-handelsmarkedet er optaget.

Tænk over disse tal. Giver det mening at tilpasse din ressource? Selvfølgelig ja. Desuden, mens der er så meget plads på dette marked, kan du udskille dit eget segment i det.

mobil version af webstedet gratis
mobil version af webstedet gratis

Hvor du har brug for en mobilversion

At bruge mobilversionen giver mening for enhver platform, der sigter mod at få en høj placering. Når alt kommer til alt, er dette en direkte indvirkning på brugeren, hvilket skaber behagelige forhold for ham til at blive på dit websted.

Kan ikke eksistere uden mobilversion:

  • nyhedsportaler, fordi de fleste af dem ses fra telefonen på vej til arbejde eller skole;
  • sociale netværk - af samme grund, plus der er en online kommunikationsfaktor, hvilket betyder, at der bør oprettes en bekvem, forståelig chat til dette;
  • reference, navigationswebsteder osv., hvor folk går hen, når de leder efter noget;
  • onlinebutikker - en mulighed for at tiltrække kunder, der ikke spilder tid på at shoppe, men køber alt via det mobile internet.

I stedet for en konklusion

I dag er mobilteknologier iaktiv vækst og udvikling, derfor skal enhver virksomhed i stræben efter lederskab på markedet sikre, at dens internetressource opfylder kravene. På grund af brugerens voksende krav skal websteder konstant opgraderes og tilpasses til forskellige enheder. Det er klart, at hvis en person er ubelejligt at være på en bestemt ressource, kan han ikke få information om et produkt eller pris der, afgive en ordre, finde ud af om levering, så vil han finde stedet, hvor alt dette bliver muligt. For at vinde konkurrencen er det derfor vigtigt at have en fleksibel, bekvem, funktionel og interessant ressource.

Mobilversionen af Android- eller Ios-webstedet hjælper med at gøre dette. For at gøre dette skal du vælge en af ovenstående redesignmetoder - en adaptiv skabelon, oprettelse af et nyt websted på et underdomæne og omdirigere til det, ved hjælp af gratis skabeloner eller oprettelse af en mobilapplikation, der gør det lettere for brugeren at komme ind og vær på siden.

Denne tilgang vil ikke kun hjælpe med at bevare loyaliteten hos eksisterende kunder, men vil også give mulighed for at tiltrække nye besøgende.

Anbefalede: