Hoe maak je een mobiele versie van uw Website te maken

het hebben van een mobiele versie van uw website is tegenwoordig een must en de enige veilige manier om uw webproject toegankelijk te maken vanaf mobiele apparaten. Dus, als je gelijk hebt op het punt om een website te lanceren, bent u gebonden aan deze kwestie rekening te houden om het een succes te maken. Heb je al een website en wil deze updaten om deze mobielvriendelijk te maken? De informatie hieronder zal van pas komen voor u ook.

er zijn verschillende manieren om vandaag een mobiele website te starten. De keuze van de meest geschikte oplossing hangt af van verschillende factoren zoals website type, leeftijd en kenmerken, uw eigen web design doelstellingen, vaardigheden en eisen. De meest voorkomende oplossingen zijn::

• responsieve ontwerp creatie, wanneer een gebruiker bezoekt dezelfde website (die anders wordt weergegeven met betrekking tot speciale CSS-gerelateerde regels) van desktop en mobiele apparaten;
• aparte mobiele website-Versie gebaseerd op de mobile-only-benadering, wanneer u twee interfaces hebt die consistent werken en zelfs op verschillende domeinen/subdomeinen kunnen worden gehost;
• volwaardige mobiele app, die ofwel een stand-alone product kan zijn met een vooraf ontworpen architectuur die is ontwikkeld voor een bepaald platform, ofwel een aparte preview-tool (zoals een webbrowser) die alleen op één website kan worden toegepast.

elk van deze opties werkt geweldig voor het maken van mobiele websites. Het is aan de eigenaar om alleen de meest geschikte oplossing te kiezen. Laten we eens een kijkje op de meest wijdverspreide (en de meest handige) manieren van mobiele projectontwikkeling nu.

Hoe maak je een mobiele versie van een Website (Website Builder)

als je nog geen website hebt, is het zinvol om een service te kiezen die wordt geleverd met responsive design support en/of een afzonderlijke geïntegreerde mobiele editor heeft. Een Website builder zal het beste werken voor dit doel als deze platforms zijn meestal gemaakt voor de ontwikkeling van mobiele-vriendelijke websites en, dus, ze in eerste instantie al hun blokken, widgets en interface-elementen responsief standaard. Als gevolg daarvan, projecten gebouwd met hen, display geweldig op desktop en mobiele schermen zonder de noodzaak om een aparte mobiele versie te maken. Laten we deze optie bekijken via het gebruik van Wix website builder.

Wix is de wereldwijd populaire all-in-one Saas-websitemaker die het mogelijk maakt om elk type webproject te starten/beheren, of het nu een blog, een portfolio, een bestemmingspagina, een zakelijke website of zelfs een webwinkel is. Alle sjablonen beschikbaar in de uitgebreide galerij (er zijn meer dan 550 van hen hier nu) evenals webpagina ‘ s die gebruikers maken vanaf nul worden automatisch aangepast voor mobiel browsen.

het is mogelijk om hier een desktop-en mobiele website-Versie afzonderlijk in te stellen, maar er is nog geen tabletvoorvertoning. Wat u hier kunt doen is het verbergen van de geselecteerde blokken en interface-elementen en wijzigen/instellen van unieke achtergronden hier. Bovendien heeft Wix specifieke mobiele functies, zoals:

• weergave van het Quick Launch Paneel (u kunt een telefoontoets toevoegen, links naar sociale netwerken/boodschappers enz. hier);
• de knop “omhoog”;
• Welcome screen (Een soort geanimeerd laadscherm dat het mogelijk maakt om emotionele begroetingen te tonen of een merk/handelsmerk te introduceren voordat u daadwerkelijk een website bezoekt);
• aangepast kleurenschema voor Chrome-browserpaneel;
• de Dienst van geautomatiseerde content en optimalisatie van de lay-out van webpagina ’s voor mobiele apparaten (Dit is een handige optie voor webpagina’ s die door onervaren ontwerpers zijn gemaakt).

Wix heeft ook een mobiele app waarmee u een website kunt beheren, als u een abonnement krijgt dat toegang biedt tot professionele bedrijfstools.

Hoe maak je een mobiele versie van CMS Website (WordPress)

net als elk ander CMS besteedt WordPress geen aandacht aan een apparaat dat wordt gebruikt om een website te bereiken. Het platform biedt alleen het ontwerp variant gespecificeerd in de standaardinstellingen.

het is nog steeds zinvol om hier de diensten van webontwikkelaars onder de aandacht te brengen, aangezien WordPress een van die CMS is, waarvan het ontwerp van het administratieve paneel zich kan aanpassen aan mobiele apparaten (Dit betekent dat een website niet alleen handig is voor bezoekers, maar ook voor de eigenaar, die de website kan bewerken, instellen en vullen met inhoud van een mobiel apparaat). Daarnaast zijn er applicaties voor smartphones die niet alleen van toepassing zijn op een klassiek CMS, maar ook op een cloud WordPress.com platform ook.

hierdoor blijkt een versie van een mobiele website in 99% van de gevallen een verdienste van een template zelf te zijn. De enige uitzondering zijn speciale plugins of scripts die gebruikers kunnen omleiden naar een afzonderlijk mobiel thema (op basis van schermresolutie of apparaatmodel, bijvoorbeeld).

Hoe maak je een Mobiele Website versie met WordPress vanaf nul

als je alleen van plan bent om een website te starten, dan is het probleem niet zo acuut – je hoeft alleen maar de juiste template te kiezen. Het assortiment responsieve thema ‘ s is meer dan genoeg, zelfs in de officiële CMS catalogus. U moet ervoor zorgen dat het geselecteerde ontwerp absoluut voldoet aan de opgegeven functies. Hetzelfde geldt voor alternatieve platforms zoals ThemeForest of TemplateMonster.

als de snelheid van het laden en de parameters voor hoge PageSpeed Insights echt belangrijk zijn voor u, dan zijn er speciale sjablonen die tot 100 punten garanderen in profieltesten zoals Bijvoorbeeld het Neve-thema. Echter, ontwerpen die zich niet kunnen aanpassen aan smartphoneschermen, zijn niet heel wijdverspreid deze dagen.

Hoe vervang je een WordPress Template door een responsieve template

als je al een lange tijd eigenaar bent van een website en het template is verouderd omdat het in eerste instantie is gemaakt om grote schermformaten aan te passen, dan zou je een mogelijkheid moeten overwegen om een oude website te vervangen door een nieuwe. Een dergelijke aanpak heeft verschillende voordelen, namelijk:

• Desktop en mobiele website Versie zal dezelfde stijl hebben;
• de noodzaak om twee interfacetypen te beheren zal worden geëlimineerd;
• u hoeft geen complexe functies en algoritmen te schrijven om de schermresolutie en het type apparaat te definiëren dat een gebruiker moet omleiden naar het afzonderlijke ontwerp;
• commerciële thema ‘ s komen vaak met technische ondersteuning en, dus, zult u in staat zijn om antwoorden op al uw vragen te krijgen en een nieuw thema op te zetten dat niet slechter is dan het vorige.

nadelen zijn hier ook beschikbaar. Sjablonen komen vaak met geschreven codes van analytics, tellers, advertentieblokken etc. Sommige van hen introduceren zelfs afzonderlijke materiaaltypen, waardoor de noodzaak ontstaat om al deze elementen over te dragen naar een nieuwe sjabloon. Alle mogelijke fouten kunnen een negatieve invloed hebben op de resultaten van de zoekmachine. Als u regelmatige gebruikers, ze kunnen niet van het idee en kan zelfs weigeren van het bezoeken van uw website. Dus, je nodig hebt om de aankomende ontwerp schakelaar grondig te analyseren om alle mogelijke nuances te overwegen.

hoe een verouderd sjabloon responsief te maken

het idee om een verouderd sjabloon responsief te maken is niet zo ingewikkeld als het aanvankelijk lijkt. Echter, het is niet echt zinvol om het te proberen, als je niche vaardigheden of op zijn minst Web design basics missen. Hoe dan ook, Er is altijd een mogelijkheid om het huren van een web designer om u te helpen met dat.

het belangrijkste idee is om css media queries toe te voegen, gebaseerd op welke cascading stijlen speciaal zullen worden toegevoegd voor de vereiste schermresoluties. Bekijk nu het voorbeeld:

@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...}

bijvoorbeeld, als je hoofdraster er zo uitzag:

het zal de volgende look hebben in 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>

stijlen voor deze kaders worden geplaatst in CSS template bestanden met de punt in het begin betekent dat dit de 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)}

als we de vaste of relatieve breedte vervangen door 100% voor de voorgestelde schermresolutie, ziet het raster er als volgt uit:

om een dergelijk resultaat te bereiken, volstaat het om de media query toe te voegen aan de typogrammen (het onderstaande voorbeeld is van toepassing op alle apparaten met een schermbreedte van 1024 pixels en lager):

@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)}}

Houd er rekening mee dat de opmerkingen tussen haakjes uitsluitend als een steekproef worden vermeld, ze kunnen niet worden overgedragen naar de werkelijke CSS-code.

welke valkuilen kunnen ontstaan bij een dergelijke responsieve realisatie van het ontwerp? Helaas zijn er veel van hen:

• de gehele webpagina lay-out kan worden geschonden als niet alleen belangrijke blokken beschikbaar op een pagina kan vaste breedte hebben. Dit kunnen ook afbeeldingen zijn, nieuwsblokken op een homepage / in een categorie, auteursbeschrijvingsblokken en andere elementen. Het is onmogelijk om ze allemaal tegelijk te identificeren. Elk van hen zal moeten worden bewerkt zodra het is geïdentificeerd.
• het volume van de webpagina verandert niet, wat een negatieve invloed zal hebben op de downloadsnelheid bij een trage internetverbinding (onder dergelijke omstandigheden is optimalisatie niet mogelijk).
• volgens de aanbevelingen van de zoekmachine moeten lettertypen op mobiele apparaten gemakkelijk leesbaar zijn zonder uit te zoomen. Dit zal leiden tot de noodzaak om alle lettergroottes te herdefiniëren voor koppen, body teksten, aanhalingstekens, lijsten (genummerd en ongenummerd) etc.
• een header en een complex menu moeten volledig opnieuw worden gemaakt. Het is zinvol om alleen een klein websitelogo, een zoekpictogram (als u deze optie hebt) en een profielpictogram (als een autorisatiesysteem wordt gebruikt) achter te laten. Een bureaublad menu moet beter worden verborgen en vervangen door een” sandwich ” icoon (menu icoon). In de meerderheid van de populaire responsieve sjablonen, dit wordt uitgevoerd door twee parallelle menu ‘ s: de eerste is bedoeld voor desktop-schermen en het wordt alleen weergegeven op de PC, terwijl de tweede is bedoeld voor mobiele apparaten alleen (het wordt weergegeven op basis van dezelfde Media queries op mobiele apparaten alleen).
• als de structuur van de hoofdvakken verschilt, bijvoorbeeld, wordt de zijbalk aan de linkerkant weergegeven, maar niet aan de rechterkant, terwijl alle widgets voor de hoofdinhoud worden weergegeven, hoewel het logischer is om ze lager te plaatsen.
• naast CSS-bestanden kunnen websitestijlen worden vervangen door JS-scripts, het zal moeilijker zijn om ze te vinden en te bewerken.

dit zijn slechts enkele van de potentiële valkuilen. Dus, is het zinvol om een web design expert in te huren om de taak te voltooien.

de voordelen van media queries maken het mogelijk om de onjuiste code op elk gewenst moment te verwijderen. Deze stijlen worden niet weergegeven op de belangrijkste website.

een responsieve Website-versie toevoegen met Plugins

sommige CMS gebruiken hun eigen extensiesets, terwijl anderen ze helemaal niet hebben. WordPress coed met de meest opmerkelijke plugins voor responsieve website Creatie, namelijk:

• Jetpack – de automatische mobiele versie creatie functie is stopgezet sinds maart 2020;
• WPtouch-is beschikbaar in gratis en betaalde versies, de extensie heeft zijn eigen plugins en thema ‘ s zoals aparte cache organisatie plugin, web app creatie plugin, image optimization plugin, amp creatie plugin etc. Het proces van het overschakelen van desktop naar mobiel thema met WPtouch is voltooid zonder het veranderen van webpagina-URL’ s, die veel zaken voor SEO;
• WP Mobile Menu-responsief menu voor mobiele apparaten (het is handig voor u, als u een omvangrijk en complex menu van de desktopwebsite – versie moet vervangen door een responsief en compact menu voor mobiele apparaten);
• WP Mobile Detect-de plugin definieert aanvankelijk dat een persoon een mobiel apparaat gebruikt en geeft het resultaat als een true/false waarde. Dit maakt het toepasbaar voor de implementatie van de template switch optie of voor de weergave van bepaalde interfaceblokken;
• WP Mobile Edition – de plugin kan WordPress websites omzetten in full-featured web apps. Gebruikers kunnen een website-pictogram Toevoegen aan hun smartphone/tablet – desktops om het te gebruiken in het volledige scherm formaat (zonder frames en browser tabbladen);
• Mobile Smart-een plugin identificeert dat het apparaat verwijst naar de mobiele klasse en schakelt vervolgens de thema ‘ s naar de alternatieve, die compatibel is met mobiele apparaten. Een Pro-versie wordt geleverd met geïntegreerde ondersteuning van mobiele menu ‘ s, speciale widgets, plugin management optie (een aparte set kan worden verstrekt voor mobiele apparaten), domeinschakelaar (voor de uitvoering van het juiste werk van twee onafhankelijke website versies) enz.

webontwikkelaars hebben ervoor gezorgd dat de extensies niet werden geclaimd omdat veel website-eigenaren hebben besloten om over te schakelen naar responsieve templateversies. Dus, de meerderheid van deze plugins zijn niet bijgewerkt voor een vrij lange periode van tijd, wat kan leiden tot de onverenigbaarheid met de huidige versie van het platform. De enige uitzondering is WPtouch.

werken met elke plugin zal zijn eigen eigenaardigheden hebben. Sommigen van hen bieden kant-en-klare mobiele sjablonen, terwijl anderen raden het downloaden van Extensies van derden of het maken van die van hun eigen.

als u de voorkeur geeft aan het werken met een mobiele website versie op het subdomein / alternatieve adres, dan zijn hier de nuances die u moet weten:

• dit zijn verschillende websites voor de zoekmachines en het is echt slecht dat hun inhoud is niet uniek;
• om de zoekmachines de URL te laten “lijmen” en te begrijpen dat dit dezelfde website is, moeten alle link attributen goed georganiseerd zijn:
• • attribuut link … rel= “alternate” href= “URL-mobile page – – voor desktopversies;
  • attribuut link … rel= “canonical” href= “URL-desktop web pages” – voor mobiele sjablonen.
• als de inhoud op verschillende versies van webpagina ‘ s verschilt, loopt u een risico op het krijgen van sancties voor camouflage (voor het vervangen van inhoud).

Hoe maak je een mobiele versie van HTML-Website

voor zover HTML-websites geen dynamische functies hebben, kunt u geen schermresolutie van een apparaat analyseren en op basis van het resultaat overschakelen van een desktopsjabloon naar het mobiele thema. Alles wat je nodig hebt is om de lay-out raster en stijlen van de problematische elementen volledig opnieuw te ontwerpen.

we hebben al besproken hoe dat te doen-dit wordt gedaan via media queries. De moeilijkst aan te passen lay-outs zijn die met vaste breedte en positie van de elementen.

niets zal werken zonder gespecialiseerde niche vaardigheden en css / HTML code onderdompeling. Het is zinvol om ofwel huren van een web design pro direct vanaf het begin of om het ontwerp te veranderen naar een andere die u kunt kopen of bestellen, of gewoon het ontwikkelen van een gloednieuwe webpagina vanaf nul, bijvoorbeeld, met behulp van Mobirise offline website builder, bijvoorbeeld. Tot slot, het kan hoog tijd zijn om te verhuizen naar de cloud-infrastructuur en om een van de online website bouwers te kiezen.

afzonderlijke Sites voor mobiel en Desktop of één Website: welke is beter?

zoals hierboven vermeld, is het hebben van een mobiele website een must voor elke ondernemer. Dit is een zekere manier om de kwaliteit zakelijke presentatie op het web te garanderen, het genereren van verkeer en garanderen de onovertroffen gebruikerservaring. De vraag is: heeft het zin om twee aparte website versies te maken voor mobiele en desktop schermen of om een responsieve website die geweldig zal worden weergegeven op beide soorten apparaten te bouwen?

in het algemeen is het starten van een responsieve website een effectievere en praktischere oplossing. Het elimineert de noodzaak om twee verschillende websites met diverse domeinen/subdomeinen, URL ‘ s en interne structuur te creëren. Dergelijke sites verwarren vaak bezoekers en ze kunnen problemen veroorzaken, als het gaat om SEO-optimalisatie, internet marketing en andere gerelateerde promotiemethoden. In plaats daarvan krijg je een project dat even goed zal worden weergegeven op desktop en mobiele schermen.

Hoeveel Kost Een mobiele versie van een Website?

de kosten van een mobiele versie van een website hangen over het algemeen af van een platform waarmee u het start. Als u kiest voor een online Website builder zoals Wix, het kan helemaal gratis zijn als het systeem kunt u websites die mobiel-klaar standaard. Free Wix plan laat u echter niet toe uw eigen domeinnaam te verbinden, waardoor het onmogelijk wordt om het meeste uit uw projectprestaties te halen.

voor zover Wix een nogal onderscheidend en veelzijdig prijsbeleid heeft, kunt u elk van zijn plannen kiezen om een website te lanceren. Overweeg gewoon uw web design doelstellingen, projecttype en specialisatie, evenals budget Bent u klaar om te investeren in het, terwijl het kiezen van de meest voorkeur abonnement. Elk Wix-abonnement heeft een breed scala aan speciale functies en voorwaarden die van invloed zijn op de uiteindelijke kosten. De goedkoopste Website abonnement kost je $ 13 / mo, terwijl de prijs van de meest betaalbare Business Basic plan begint vanaf $23/mo.

heeft u besloten om WordPress te gebruiken voor responsieve website Creatie? Dan is de kosten van het project zal uiteindelijk afhangen van de prijs van de plugins die u gaat voor. WordPress extensies zijn over het algemeen gepositioneerd als gratis degenen, maar een deel van hun functies nog steeds beschikbaar komt nadat u een upgrade naar de Pro-versie. Bijvoorbeeld, de kosten van WPtouch Pro zal variëren van $ 79 tot $ 359 per jaar. Dat is precies de reden waarom, het lijkt redelijk om over te schakelen naar een kant-en-klare responsieve template. Dergelijke thema ‘ s worden eenmaal gekocht, terwijl hun kosten rond $40-80. In het geval dat u nog steeds besluit om een professionele webontwikkelaar in te huren om een verouderd thema opnieuw te ontwerpen voor u zullen de kosten individueel worden besproken, afhankelijk van de complexiteit van het project.

Bottom Line

het is geen geheim dat elke website een mobiele versie moet hebben om in de vraag te blijven bij de doelgroep vandaag. Er zijn bijna op mensen die hun mobiele apparaten niet gebruiken om te surfen op het web, op zoek naar de diensten en producten die ze nodig hebben. Dus, het proces van uw website mobiele optimalisatie zal uiteindelijk afhangen van het geselecteerde platform.

als u alleen van plan bent om een website te lanceren, is het zinvol om de voorkeur te geven aan een van de meest populaire online websitebouwers. Wix werkt het beste voor dit doel. In het geval dat u al een website aangedreven door de CMS zoals WordPress, dan is het beter om het te vervangen door een responsieve thema. Plug-ins die mobiele ondersteuning bieden, kan echter vrij duur zijn, terwijl een volledig sjabloon herontwerp een echte uitdaging zal zijn, vooral als u van plan bent om zelfstandig met de taak om te gaan.

hoe dan ook, het heeft geen zin om een aparte mobiele versie van uw website te maken. U krijgt te maken met problemen in verband met projectontwikkeling en de verdere ondersteuning ervan. Een veel eenvoudiger en redelijke oplossing is om uw website mobiel te reageren vanaf het begin.