Mobil version af webstedet: hvordan man gør det? Adaptive design

I dag går de fleste online igennemmobile gadgets - tabletter, telefoner, i forbindelse med optimering af hjemmesiden som et nyt niveau. Hvis en bruger kommer og ser, at stedet ikke er optimeret til mobile enheder: Du kan ikke se billedet, trak en knap, små og ulæselige skrifttyper, design skæv - 99 i 100%, at han vil komme ud og vil begynde at kigge efter en anden mere praktisk. En crawler vil sætte en check, at ressourcen ikke er relevant, t. E. Matcher ikke søgestrengen. Derfor skal udformningen af ​​siden nødvendigvis tilpasses forskellige mobilenheder. Hvad er en mobil version af hjemmesiden, hvordan man gør det, og hvilken bedre måde at anvende? Læs mere i denne artikel.

Så der er fire vigtige måder at tilpasse webstedet til en mobil version.

Den første måde - adaptivt design

Adaptive skabeloner foreslår en ændringbilleder af webstedet afhængigt af skærmstørrelsen. Som regel er de sat til standard 1600, 1500, 1280, 1100, 1024 og 980 pixel. Brug CSS3 Media Queries til implementering. Webstedets design ændrer ikke på samme tid.

Fordelene ved denne metode er:

• Praktisk design, da strukturen selv tilpasser sig skærmparametrene, og enhver opdatering kræver ikke udvikling af design fra bunden, bare korrekte CSS og HTML;
• en webadresse - brugeren behøver ikke at huskeflere navne, der er ingen grund til at omdirigere (omdirigere fra en adresse til en anden), hvilket kan komplicere webmasterens arbejde, og søgemaskinen er nemmere at sortere og rangordne ressourcen med en enkelt adresse.

Selvfølgelig har adaptive skabeloner deres egenulemper, som forresten er mere end fordele. Ikke desto mindre følger mange udviklere sig til dette koncept, for eksempel selskabet Google, hvis mobile version af webstedet har et adaptivt design. Så ulemperne er:

• Adaptive design understøtter ikke de samme opgaver formobil enhed, som på pc'en. Hvis det for eksempel er en mobilversion af bankens hjemmeside, hvor brugeren har større sandsynlighed for at have oplysninger om valutakursen eller de nærmeste pengeautomater, så er dette design nok. Men hvis det er en kompleks struktureret ressource med mange sektioner og underafsnit, er det ikke sandsynligt, at adaptive layout vil appellere til besøgende.
• En langsom download gør dit yndlingssted til enhadede. Dette gælder især for ressourcer, hvor animation, videoklip, pop-ups og andre aktive elementer er rigelige. På grund af den store vægt, vil siden simpelthen "sænke", brugeren bliver vred og går væk, og sidens placeringer vil falde.
• Manglende evne til at deaktivere den mobile version - mereen væsentlig ulempe. Hvis noget element er gemt af et sådant layout, kan du ikke gøre noget for at åbne det, i modsætning til websteder, hvor det kan deaktiveres og gå til et almindeligt domæne.

Ikke desto mindre er en sådan mobil version af webstedet hurtig,uden særlige færdigheder og omkostninger kan du tilpasse ressourcen til enhver gadget. Men det er hensigtsmæssigt i lyset af de konstaterede mangler at få små, enkle ressourcer med et minimum af information og multimedie uden kompliceret navigation og animation. For et komplekst sted er to andre metoder egnede.

Den anden metode er en separat version af webstedet

Denne metode er meget almindelig og ofte med succesgør webstedet på den mobile enhed mere praktisk til opfattelse. Dens essens er at oprette en separat version af siden, tegnet for applikationen og placeret på en separat webadresse eller underdomæne, for eksempel m.vk.com. Samtidig er den vigtigste funktion bevaret, designen af ​​webstedet ser simpelthen anderledes ud. Fordelene ved denne metode er indlysende:

• brugervenlig grænseflade;
• Det er let at ændre og foretage ændringer, fordi versionen findes separat fra hovedressourcerne.
• På grund af den lave vægt af en separat version af webstedet er meget hurtigere end den adaptive skabelon;
• oftest er der mulighed for at gå til hovedversionen af ​​siden med en mobil.

Men her var der også mangler:

• Flere adresser - desktop og mobil versionwebsted. Hvordan får jeg brugeren til at huske to muligheder? Webmastere foreskriver ofte omdirigering (omdirigering) fra dextup-versionen til mobilen, men på samme tid, hvis denne side ikke findes i mobilversionen, modtager brugeren en fejl. Her er der vanskeligheder med søgemaskinerne, som er vanskelige at rangere 2 identiske ressourcer, og det har direkte indflydelse på fremskridtet.
• Mobilversion af webstedet fra computeren, hvis brugeren fejlagtigt går til den, vil se latterligt ud, hvilket også kan påvirke tilstedeværelsen.
• Denne version er ofte stærkt begrænset, desktop, så brugeren får meget begrænset funktionalitet. Men på samme tid, hvis der mangler noget, kan den besøgende gå til den fulde version af siden.

Generelt begrunder et separat mobilt websted sigog er den mest almindelige måde at tilpasse ressourcen til mobile enheder. Det er populært blandt store onlinebutikker, for eksempel Amazon.

Den tredje måde er RESS-design

Google-søgemaskinen støtter aktivt detteretning af mobil design. Dette er den mest komplekse, dyre, men effektive metode til at tilpasse webstedet til en telefon eller tablet. Det hedder RESS. Dette er en ressourcemålretning i en mobilapplikation, som kan downloades for hver enhed separat. Til android - med Google Play og til Apple - med iTunes.

Sådanne applikationer er hurtige, gratis, praktiske,har evnen til at rumme forskellige typer informationer, mens telefonens hukommelse og internettrafik ikke spises som den er, når man besøger et websted gennem browseren. De er nemme at komme ind, fordi linket altid vil være på skærmen ved hånden, og der er ikke behov for at indtaste et komplekst navn i browserens adresselinje.

Der er selvfølgelig her og deres mangler, som f.ekskompleksiteten i udviklingen, den høje arbejdskraft for et stort antal programmører, behovet for at lave flere varianter af layout. Nogle gange genkendes en mobil enhed 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 tilbudte på grund af sin produktive, glatte funktion.

Den billigste måde at lave et mobilt websted på

Alle ovenstående metoder antagerog ikke altid en lang og kompleks, men stadig betalt arbejde af webmaster. Hvis du ikke ser det presserende behov for en sådan udvikling, kan du bruge en simpel og gratis mobilversion af webstedet. Hvordan gør man det lettere?

Download specielle skabeloner (plugins) tiladaptivt design. For eksempel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile og andre. De hjælper med at vise webstedet korrekt i telefonen, samtidig med at du modtager flere tip, der skal rettes, så du kan tilpasse siden til mobilversionen.

Selvfølgelig er denne metode næppe egnet tilseriøse ressourcer. Denne gratis mulighed er snarere beregnet til små og enkle websteder, blogs, nyhedsfeeds. Glem ikke, at søgemaskinen Google, som Yandex, i dag stiller store krav til mobile versioner, så der er en stor chance for at sænke dine positioner ved hjælp af denne metode.

Med denne metode vil reklame- og pop-up-bannere sandsynligvis blive afskåret, men siden lastes hurtigt og uden "lags".

Principper for oprettelse af mobile versioner

Ligegyldigt er en mobil version af webstedet skabt gratiseller med hjælp fra webmasteren, er det gjort på RESS-systemet eller ved hjælp af en adaptiv skabelon. Det vigtigste er, at for det effektive arbejde er det nødvendigt at overholde flere meget vigtige principper. Så hvad skal mobilversionen af ​​webstedet være? Hvordan gøres det produktivt, effektivt og produktivt?

Vi fjerner alt unødvendigt

Minimalisme er noget, der burde stræbe efterudvikler af den mobile version af webstedet. Forestil dig hvor svært det er at opleve oplysninger, der er fulde af farver, knapper, bannere, og som du skal rulle uendeligt på jakt efter det rigtige materiale. Mobilt design skal være enkelt og rent. Vælg 2-3 farver for at adskille mellemrummet (f.eks. Mærket). Det er bedre, hvis en af ​​dem er hvid. Opdel rummet af en lille skærm i klare og læsbare zoner. Virtuelle nøgler skal være synlige, så brugeren klart ved, hvor man skal klikke på, og så - det er varerne, her er formularen til udfyldning af dataene, her er oplysningerne om levering og betaling.

Eventuelle ekstra muligheder, der ville være nyttigei desktop versionen og ville gøre livet lettere for brugeren, vil de kun medføre komplikationer. Forlad kun de vigtigste elementer. Animation, reklame bannere, multimedie, vil sandsynligvis kun sænke webstedet eller applikationen og distrahere fra det vigtigste.

tilpasning

Spørgsmålet om udligning er ikke mindre akut,da hvis du gør det forkert, vil brugeren kun modtage afslutninger af vigtige ord. Justering til venstre og lodret betragtes som almindelig. Forestil dig, hvordan du flip gennem nyhedslinjen i din telefon. Du gør dette fra toppen ned, men ikke til venstre eller højre side.

union

Når der ikke er nogen mulighed for en lang kæde af overgange,Prøv at kombinere flere trin i en. For eksempel, stedet skal indtaste data i flere etaper - .. Navnet, da den adresse, hvor i hver celle er separat hus, gade, lejlighed etc. For ikke at tvinge brugeren til at forsøge at få på det sæt af små celler, bede dem om at udfylde kun 2 - Navn og adresse.

Og frigørelse

Nogle gange skal du tværtimod afbryde forbindelsenen masse oplysninger. For eksempel i rullemenuen har du en liste over mere end 80 byer, hvor leveringen finder sted. Grupper dem efter region, så brugeren ikke behøver at rulle gennem denne enorme liste. Når han peger på det regionale center eller område, vil en anden liste over byer falde ud.

lister

Forresten, om listerne. De to er fastgjort i alfabetisk eller anden rækkefølge og med substitution. Valget af dem afhænger af, hvad der vil blive opført.

Fast er praktisk i tilfælde af atbrugeren ved præcis, hvad han leder efter. For eksempel, en by, et nummer eller en dato. Den anden mulighed er egnet til lange komplekse navne eller til tilfælde hvor der er mange variationer med samme navn, og hver rulleliste bringer brugeren tættere på målet. En variant med automatisk substitution anvendes hyppigere, når en besøgende har brug for hjælp. For eksempel tilbyder et websted til strikning at købe striknåle. Brugeren går ind i søgeforespørgslen "Metal strikkepinde", og i værktøjstipen ses "Spokes 5 mm", "Spokes 4,5 mm" mv.

Autofuldførelse

Dette afsnit er særligt relevant for websteder, hvor der er nogetsælger online, og du skal udfylde standard betalingsformer, levering osv. Hvis en person køber fra en telefon, har han højst sandsynligt ikke tid til at komme til computeren, hvilket betyder at købsprocessen skal foretages så hurtig og bekvemt som muligt.

For dette kan formularer indeholde allerede fyldtdata, kan du ty til de mest populære svar. For eksempel indsæt dagens dato, betalingsmåden i kontanter, byen, hvis du arbejder i en region. De kan ændres, men hvis du rammer målet, bliver brugerens tid gemt.

Alt er læst, alt er synligt

Når du opretter en mobilversion af et websted, skal du huskeat alle telefonerne er forskellige, og også synet. Måske bliver dit websted vist på en lille skærm, så skrifttyperne skal være enkle og læsbare, knapperne - store nok til at de kan klikkes og ikke komme til en anden side, og billeder skal åbnes separat, store, især når det kommer til internettet til butikken.

Nogle statistikker

Når man taler om tilpasningen af ​​webstedet til mobile enheder, kan man ikke ty til statistikker for at forstå, hvor vigtig denne proces er at fremme netværket.

Tallene er som følger. I dag bruges gadgets af 87% af befolkningen, tilsyneladende, undtagen de yngste børn og nogle ældre. Økonomer forudsiger væksten i mobilhandel 100 gange i de næste 5 år. Samtidig er kun 21% af webstederne tilpasset til at arbejde sammen med mobile enheder. Derfor er internettrafik og e-handelsmarkedet kun optaget af en lille femtedel.

Tænk over disse tal. Er det fornuftigt at tilpasse din ressource? Selvfølgelig ja. Desuden, så længe der er så meget ledig plads på dette marked, kan du tage dit eget segment på det.

Hvor er den mobile version nødvendig?

Brug den mobile version er passende tilenhver platform, der søger at få en høj rating. Dette har trods alt en direkte indflydelse på brugeren, hvilket skaber behagelige betingelser for opholdet på dit websted.

Uden en mobil version kan der ikke eksistere:

• nyhedsportaler, da det er de fleste af dem, der ser gennem telefonen på vej til arbejde eller studere;
• sociale netværk - af samme grund, plus der er en kommunikationsfaktor online, hvilket betyder at der skal skabes en bekvem og forståelig chat for dette;
• referencesteder, steder med navigation osv., hvor folk vender sig, når de er på udkig efter noget;
• online-butikker - en mulighed for at tiltrække købere, der ikke bruger tid på shoppingture, men køber alt via mobilt internet.

I stedet for at afslutte

I dag er mobilteknologier iaktiv vækst og udvikling, og derfor stræber efter lederskab på markedet, skal enhver virksomhed sikre, at dens internetressource opfylder kravene. På grund af stigende brugeranmodninger skal websteder løbende opgraderes og tilpasses forskellige enheder. Det er klart, at hvis en person er ubehagelig for at være på en bestemt ressource, kan han ikke få oplysninger om produktet eller prisen, bestille en ordre, lære om leveringen, han finder siden, hvor alt dette bliver muligt. Derfor er det vigtigt for at vinde konkurrencen at have en fleksibel, praktisk, funktionel og interessant ressource.

Lav denne mobile version af webstedetAndroid eller IOS. For at gøre dette, skal du vælge en af ​​ovenstående måder at redesigne - adaptive skabelon, skabe en ny site på et underdomæne og overgangen til det ved at omdirigere brugen af ​​gratis skabeloner eller oprette en mobil applikation, hvorigennem en bruger nemt kan komme ind og forblive på siden.

En sådan tilgang vil ikke blot hjælpe med at opretholde de eksisterende kunders loyalitet, men også give mulighed for at tiltrække nye besøgende.