Sådan laver du en mobil Version af din hjemmeside

at have en mobilversion af din hjemmeside er et must i dag og den eneste sikre måde at gøre dit internetprojekt tilgængeligt fra mobile enheder. Så hvis du har ret ved at lancere en hjemmeside, er du forpligtet til at tage dette problem i betragtning for at gøre det til en succes. Har du allerede en hjemmeside og ønsker at opdatere den for at gøre den mobilvenlig? Oplysningerne nedenfor vil også være nyttige for dig.

der er flere måder at starte en mobil hjemmeside i dag. Valget af den bedst egnede løsning afhænger af flere faktorer såsom hjemmesidetype, alder og egenskaber, dine egne mål for design, færdigheder og krav. De mest udbredte løsninger er som følger:

• Responsive design creation, når en bruger besøger den samme hjemmeside (som viser forskelligt med hensyn til særlige CSS-relaterede regler) fra stationære og mobile enheder;
• separat version af den mobile hjemmeside baseret på den mobile tilgang, når du har to grænseflader, der fungerer konsekvent og endda kan hostes på forskellige domæner/underdomæner;
• fuldgyldig mobilapp, som enten kan være et enkeltstående produkt med en foruddesignet arkitektur udviklet til en bestemt platform eller et separat forhåndsvisningsværktøj (som f.eks.

enhver af disse muligheder fungerer fint til mobil hjemmeside skabelse. Det er kun op til ejeren at vælge den mest egnede løsning. Lad os se på de mest udbredte (og de mest bekvemme) måder til mobil projektudvikling nu.

Sådan laver du en mobilversion af en hjemmeside (hjemmesidebygger)

hvis du ikke har en hjemmeside endnu, er det fornuftigt at vælge en tjeneste, der leveres med responsiv designsupport og/eller har en separat integreret mobileditor. En hjemmesidebygger fungerer bedst til dette formål, da disse platforme for det meste er skabt til udvikling af mobilvenlige hjemmesider, og dermed gør de oprindeligt alle deres blokke, kontroller og grænsefladeelementer responsive som standard. Som et resultat viser projekter, der er bygget med dem, godt på stationære og mobile skærme uden behov for at oprette en separat mobilversion. Lad os gennemgå denne mulighed ved brug af hjemmeside builder.

vi er verdens populære alt-i-en SaaS hjemmesidebygger, der gør det muligt at starte/styre enhver form for internetprojekt, det være sig en blog, en portefølje, en destinationsside, en virksomheds hjemmeside eller endda en internetbutik. Alle skabeloner, der er tilgængelige i dets omfattende galleri (der er over 550 af dem her nu) samt hjemmesider, som brugere opretter fra bunden, tilpasses automatisk til mobilsøgning.

det er muligt separat at oprette en desktop og mobil hjemmeside version her, men der er ingen tablet forhåndsvisning mulighed endnu. Hvad du kan gøre her er at skjule de valgte blokke og grænsefladeelementer og ændre/oprette unikke baggrunde her. Hvad mere er, vi har specifikke mobilrelaterede funktioner, såsom:

• visning af Hurtigstartpanelet (du kan tilføje en telefonopkaldsknap, links til sociale netværk/budbringere osv. her);
• Knappen” op”;
• velkomstskærm (en slags animeret indlæsningsskærm, der gør det muligt at vise følelsesmæssige hilsner eller introducere et mærke/varemærke, før du faktisk får adgang til en hjemmeside);
• brugerdefineret farveskema til Chrome-panel;
• tjenesten til automatiseret indhold og optimering af hjemmesidens layout til mobile enheder (Dette er en ganske praktisk mulighed for hjemmesider oprettet af uerfarne designere).

vi har også en mobilapp, der giver dig mulighed for at administrere en hjemmeside, hvis du får et abonnement, der inkluderer adgang til professionelle forretningsværktøjer.

Sådan laver du en mobil Version af CMS hjemmeside

som enhver anden CMS, er CMS ikke opmærksom på en enhed, der bruges til at nå en hjemmeside. Platformen giver bare den designvariant, der er angivet i standardindstillingerne.

det er stadig fornuftigt at fremhæve tjenester fra internetudviklere her, da ordtryk er et af disse CMS, hvis design af det administrative panel kan tilpasse sig mobile enheder (det betyder, at en hjemmeside vil være praktisk ikke kun for besøgende, men også for dens ejer, der vil være i stand til at redigere, konfigurere og udfylde det med indhold fra en mobilenhed). Derudover er der applikationer til smartphones, der ikke kun gælder for et klassisk CMS, men for en sky WordPress.com platform også.

som følge heraf viser en mobil hjemmeside version sig at være en fortjeneste af en skabelon selv i 99% af tilfældene. Den eneste undtagelse er specielle plugins eller scripts, der kan omdirigere brugere til et separat mobilt tema (f.eks.

Sådan opretter du en mobil hjemmeside Version med ordtryk fra bunden

hvis du bare planlægger at starte en hjemmeside, så er problemet ikke så akut – du skal bare vælge den rigtige skabelon. Sortimentet af responsive temaer er mere end nok selv i det officielle CMS-katalog. Du skal sørge for, at det valgte design absolut overholder de deklarerede funktioner. Det samme handler om alternative platforme som ThemeForest eller TemplateMonster.

hvis hastigheden af indlæsning og høj PageSpeed Insights parametre virkelig betyder noget for dig, så er der specielle skabeloner, der garanterer op til 100 point i profiltest som f.eks. Imidlertid er design, der ikke kan tilpasse sig smartphone-skærme, ikke helt udbredt i disse dage.

Sådan udskiftes en skabelon med en responsiv

hvis du allerede ejer en hjemmeside i ganske lang tid, og dens skabelon er forældet, der oprindeligt blev oprettet for at matche store skærmformater, bør du overveje en mulighed for at erstatte et gammelt hjemmesidedesign med et nyt. En sådan tilgang har flere fordele, nemlig:

• Desktop og mobil hjemmeside version vil have den samme stil;
• behovet for at styre to interfacetyper vil blive elimineret;
• du behøver ikke at skrive komplekse funktioner og algoritmer for at definere skærmopløsningen og typen af enhed, som en bruger skal omdirigere ham/hende til det separate design;
• Kommercielle temaer leveres ofte med teknisk support, og dermed vil du være i stand til at få svar på alle dine spørgsmål og oprette et nyt tema, der ikke er værre end det foregående.

ulemper er også tilgængelige her. Skabeloner leveres ofte med skriftlige analysekoder, tællere, annonceblokke osv. Nogle af dem introducerer endda separate materialetyper, hvilket udløser behovet for at overføre alle disse elementer til en ny skabelon. Alle de potentielle fejl kan have negativ indvirkning på søgemaskinens resultater. Hvis du har regelmæssige brugere, kan de ikke lide ideen og kan endda nægte at besøge din hjemmeside. Således skal du grundigt analysere den kommende designkontakt for at overveje alle mulige nuancer.

Sådan laver du en forældet skabelon responsiv

ideen om at lave en forældet skabelon responsiv er ikke så kompliceret, som det oprindeligt kan synes. Det giver dog ikke rigtig mening at prøve det, hvis du mangler nichefærdigheder eller i det mindste grundlæggende design. Alligevel er der altid en mulighed for at ansætte en internetdesigner til at hjælpe dig med det.

hovedideen er at tilføje CSS-medieforespørgsler, baseret på hvilke cascading-stilarter der tilføjes specielt til de krævede skærmopløsninger. Tag et kig på eksemplet nu:

@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}

For eksempel, hvis dit hovednet så sådan ud:

det vil have følgende udseende i HTML:

<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>

Styles for disse bokse er placeret i CSS skabelon filer med prikken stående i begyndelsen betyder, at dette er CSS klasse:

.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}

hvis vi erstatter den faste eller relative bredde med 100% for den foreslåede skærmopløsning, vil gitteret se ud som følger:

for at nå et sådant resultat er det nok at tilføje medieforespørgslen til stilarkene (eksemplet nedenfor gælder for alle enheder med skærmbredden på 1024 billedpunkter og derunder):

@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}

Husk, at kommentarerne i parentes udelukkende nævnes som en prøve, de kan ikke overføres til den faktiske CSS-kode.

hvilke faldgruber kan dukke op med en sådan lydhør designrealisering? Desværre er der mange af dem:

• hele sidens layout kan blive krænket, da ikke kun nøgleblokke, der er tilgængelige på en side, kan have en fast bredde. Disse kan også være billeder, nyhedsblokke på en hjemmeside/i en kategori, forfatterens beskrivelsesblokke og andre elementer. Det er umuligt at identificere dem alle på en gang. Hver af dem skal redigeres, så snart den er identificeret.
• sidevolumen ændres ikke, hvilket vil have negativ indvirkning på overførselshastigheden med langsom internetforbindelse (ingen optimering vil være mulig under sådanne forhold).
• i henhold til søgemaskinens anbefalinger skal skrifttyper på mobile enheder være let læsbare uden at gå ud. Dette vil udløse behovet for at omdefinere alle skriftstørrelser for overskrifter, kropstekster, citater, lister (nummereret og unummereret) osv.
• en overskrift og en kompleks menu bør være helt genskabt. Det giver mening kun at efterlade et lille hjemmeside-logo, et søgeikon (hvis du har denne mulighed) og et profilikon (hvis der bruges et autorisationssystem). En skrivebordsmenu skal bedre skjules og erstattes med et “smørrebrød” – ikon (menuikon). I de fleste populære responsive skabeloner implementeres dette af to parallelle menuer: den første er beregnet til desktopskærme, og den vises kun på PC, mens den anden kun er beregnet til mobile enheder (den vises på baggrund af de samme medieforespørgsler på kun mobile enheder).
• hvis strukturen i hovedboksene adskiller sig, vises sidebjælken til venstre, men ikke til højre, mens alle kontroller vises foran hovedindholdet, selvom det er mere logisk at placere dem lavere.
• bortset fra CSS-filer, kan hjemmeside stilarter erstattes med JS scripts det vil være sværere at finde og redigere dem.

dette er kun nogle af de potentielle faldgruber. Det giver derfor mening at hyre en internetdesignekspert til at fuldføre opgaven.

fordelene ved medieforespørgsler gør det muligt at slette den forkerte kode til enhver tid. Disse stilarter vises ikke på den officielle hjemmeside.

Sådan tilføjes en responsiv hjemmeside Version med Plugins

nogle CMS bruger deres egne udvidelsessæt, mens andre slet ikke har dem. Med de mest bemærkelsesværdige plugins til lydhør hjemmeside skabelse, nemlig:

• Jetpack – funktionen til automatisk oprettelse af mobilversion er ophørt siden marts 2020;
• Vptouch – er tilgængelig i gratis og betalte versioner, udvidelsen har sine egne plugins og temaer som separat cache-organisationsplugin, plugin til oprettelse af internetapp, plugin til billedoptimering, plugin til oprettelse af AMP osv. Processen med at skifte fra desktop til mobilt tema er afsluttet uden at ændre URL ‘ er på hjemmesiden, hvilket betyder meget for SEO;
• Mobile Mobile Menu – responsive menu til mobile enheder (det vil være nyttigt for dig, hvis du har brug for at erstatte en voluminøs og kompleks menu på desktop – hjemmesideversionen med en lydhør og kompakt menu til mobile enheder);
• Mobile Detect-plugin definerer oprindeligt, at en person bruger en mobilenhed og giver resultatet som en sand/falsk værdi. Dette gør det anvendeligt til implementering af skabelonomskifterindstillingen eller til visning af visse grænsefladeblokke;
• Mobile Edition – plugin ‘ et kan konvertere hjemmesider til fuldt udstyrede apps. Brugere kan tilføje et hjemmesideikon til deres smartphone/tablet – desktops for at bruge det i fuldskærmsformat (uden rammer og bro.serfaner);
• Mobile Smart-et plugin identificerer, at enheden henviser til mobilklassen og derefter skifter temaerne til den alternative, som er kompatibel med mobile enheder. En Pro-version leveres med integreret understøttelse af mobile menuer, specielle kontroller, plugin-styringsmulighed (et separat sæt kan leveres til mobile enheder), domænekontakt (til implementering af korrekt arbejde i to uafhængige hjemmesideversioner) osv.

internetudviklere har sørget for, at udvidelserne forblev uanmeldte, da mange hjemmesideejere har besluttet at skifte til responsive skabelonversioner. Således er størstedelen af disse plugins ikke blevet opdateret i ganske lang tid, hvilket kan resultere i uforenelighed med den aktuelle version af platformen. Den eneste undtagelse er Vptouch.

arbejde med hvert plugin vil have sine egne særegenheder. Nogle af dem tilbyder færdige mobilskabeloner, mens andre anbefaler at hente tredjepartsudvidelser eller oprette deres egne.

hvis du foretrækker at arbejde med en mobil hjemmeside version på underdomænet / alternativ adresse, så er her de nuancer, du bør være opmærksom på:

• disse er forskellige hjemmesider for søgemaskinerne, og det er virkelig dårligt, at deres indhold ikke er unikt;
• for at gøre søgemaskinerne ” lim ” URL ‘en og forstå, at dette er den samme hjemmeside, skal alle linkattributterne være ordentligt organiseret:
• • attribut link … rel= “alternativ”href=” URL-mobil side” – til desktop versioner;
  • attribut link … rel=” canonical”href=” URL-desktop hjemmesider ” – til mobile skabeloner.
• hvis indholdet på forskellige hjemmesideversioner er forskelligt, risikerer du at få sanktioner for tilsløring (for udskiftning af indhold).

Sådan laver mobil Version af HTML hjemmeside

så vidt HTML hjemmesider ikke har dynamiske funktioner, vil du ikke være i stand til at analysere en skærmopløsning af en enhed og til at skifte fra en desktop skabelon til den mobile tema baseret på resultatet. Alt hvad du behøver er at redesigne layoutgitteret og stilarterne for de problematiske elementer fuldstændigt.

vi har allerede gennemgået, hvordan man gør det – dette gøres via medieforespørgsler. De sværeste at tilpasse layouts er dem med fast bredde og placering af elementer.

intet fungerer uden specialiserede nichefærdigheder og nedsænkning af CSS/HTML-kode. Det giver mening at enten hyre en online design pro lige fra starten eller at ændre designet til en anden, du kan købe eller bestille, eller blot udvikle en helt ny hjemmeside fra bunden, for eksempel ved hjælp af Mobirise offline hjemmesidebygger, for eksempel. Endelig kan det være på høje tid at flytte til skyinfrastrukturen og vælge en af online hjemmesidebyggere.

Separate sider til mobil og Desktop eller en hjemmeside: hvilken er bedre?

som nævnt ovenfor, at have en mobil hjemmeside er et must for enhver virksomhedsejer. Dette er en sikker måde at sikre kvalitetspræsentation på nettet, generere trafik og garantere den uovertruffen brugeroplevelse. Spørgsmålet er: er det fornuftigt at oprette to separate hjemmeside versioner til mobile og stationære skærme eller at opbygge en lydhør hjemmeside, der vil vise stor på begge typer af enheder?

generelt er det en mere effektiv og praktisk løsning at starte en responsiv hjemmeside. Det eliminerer behovet for at oprette to forskellige hjemmesider med forskellige domæner/underdomæner, URL ‘ er og intern struktur. Sådanne sider forvirrer ofte besøgende, og de kan udløse problemer, når det kommer til SEO-optimering, internetmarkedsføring og andre relaterede promoveringsmetoder. I stedet får du et projekt, der vises lige så godt på stationære og mobile skærme.

hvor meget koster en hjemmeside mobil Version?

omkostningerne ved en hjemmeside mobilversion afhænger generelt af en platform, du starter den med. Hvis du vælger en online hjemmesidebygger, kan det være helt gratis, da systemet giver dig mulighed for at oprette hjemmesider, der er mobilklare som standard. Du kan dog ikke forbinde dit eget domænenavn, hvilket gør det umuligt at få mest muligt ud af din projektydelse.

så vidt vi har en ganske karakteristisk og alsidig prispolitik, kan du vælge nogen af sine planer om at lancere en hjemmeside. Bare overvej dine designmål, projekttype og specialisering samt budget, du er klar til at investere i det, mens du vælger det mest foretrukne abonnement. Hver plan leveres med en bred vifte af specielle funktioner og vilkår, der påvirker de endelige omkostninger. Den billigste hjemmeside abonnement vil koste dig $13/mo, mens prisen på den mest overkommelige Business Basic plan starter fra $23 / mo.

har du besluttet dig for at bruge hjemmesiden? Derefter vil omkostningerne ved projektet i sidste ende afhænge af prisen på plugins, du vil gå til. Udvidelser er generelt placeret som gratis, men en del af deres funktioner bliver stadig tilgængelige, når du opgraderer til Pro-versionen. For eksempel vil prisen på Vptouch Pro variere fra $79 op til $359 om året. Det er netop derfor, det forekommer rimeligt at skifte til en færdiglavet responsiv skabelon. Sådanne temaer købes en gang, mens deres omkostninger udgør omkring $40-80. Hvis du stadig beslutter at ansætte en professionel udvikler til at redesigne et forældet tema for dig, vil omkostningerne blive diskuteret individuelt afhængigt af projektets kompleksitet.

Bottom Line

det er ingen hemmelighed, at enhver hjemmeside skal have en mobilversion for at forblive efterspurgt hos målgruppen i dag. Der er næsten på folk, der ikke bruger deres mobile enheder til at surfe på nettet, på udkig efter de tjenester og produkter, de har brug for. Således vil processen med din hjemmeside mobil optimering i sidste ende afhænge af den valgte platform.

hvis du bare planlægger at starte en hjemmeside, er det fornuftigt at give præference til en af de mest populære online hjemmesidebyggere. Vi vil fungere bedst til dette formål. Hvis du allerede kører en hjemmeside, der drives af CMS, er det bedre at erstatte det med et responsivt tema. Plugins, der tilbyder mobil support, kan dog være ret dyre, mens en komplet skabelon redesign vil være en reel udfordring, især hvis du agter at klare opgaven uafhængigt.

alligevel giver det ingen mening at oprette en separat mobilversion af din hjemmeside. Du vil stå over for problemer i forbindelse med projektudvikling og dens yderligere støtte. En langt enklere og fornuftig løsning er at gøre din hjemmeside mobil-responsiv fra starten.