How To Build A Mobile Website (in 4 Easy Steps)
in oktober 2016 overtrof het aantal mobiele en tablet internetgebruikers voor het eerst het aantal desktopcomputergebruikers. Deze paradigmaverschuiving diende als een oproep tot actie voor ontwikkelaars om hun hele industrie te heroverwegen. Sindsdien, mobiel gebruik is blijven groeien en nog vaker voor te komen en er zijn vele elegante website ontwikkeling oplossingen worden gebruikt vandaag om deze gebruikers te dienen.
deze oplossingen zijn in staat gebruikers een vergelijkbare ervaring te bieden die ze op een desktop zouden krijgen zonder de inhoud of functie van uw website in gevaar te brengen. Terwijl het bouwen van een site die in staat is om het creëren van deze ervaring lijkt ontmoedigend, het is veel gemakkelijker dan je denkt.
het is in feite zo eenvoudig dat we een eenvoudig te volgen 4-staps handleiding hebben samengesteld om een mobiele Website te maken om u op weg te helpen.
Kies uw Webdesignbenadering
er zijn verschillende oplossingen die u kunt gebruiken om een mobielvriendelijke website te maken. Terwijl elke web design aanpak heeft zijn eigen aanhangers die u zal vertellen het is de beste, moet u bepalen welke past bij uw behoeften op basis van uw eigen overweging van de informatie.
Responsive Web Design
Responsive web design (RWD) maakt gebruik van aanpasbare lay-outs die mogelijk worden gemaakt door het gebruik van proportionele media, extensies en backend-rasters. Dit betekent dat als een browservenster wordt uitgebreid of gecontracteerd, de inhoud het zal volgen en zo nodig zal aanpassen. Het resultaat is een website die lijkt op zowel desktop als mobiel.
deze kunststof gebruikersinterface wordt vaak vergeleken met water. U kunt een kopje water in een glas, een pot of een kan gieten en het watervolume blijft hetzelfde, ondanks de verandering van vat.
adaptief Webdesign
in tegenstelling tot RWD is adaptief webdesign (AWD) niet afhankelijk van één veranderende lay-out. In plaats daarvan maakt het gebruik van verschillende lay-outs voor verschillende apparaten en schermformaten. Dit betekent dat wanneer u zich aanmeldt op een website, u de pagina wordt aangeboden die het beste voldoet aan de behoeften van het apparaat dat u momenteel gebruikt.
als voorbeeld kunnen sommigen ervoor kiezen om drie websites te maken: één voor smartphones, één voor tablets en één voor desktops. Dit zou drie verschillende ontwerpen vereisen, die “stand-by” zouden blijven totdat elke bezoeker een beroep doet op. In plaats van een one-size-fits-all website, een AWD fungeert als een aangepaste gateway voor alle gebruikers.
de aanpak die u kiest voor het maken van uw mobiele website is slechts het begin van het ontwerpproces.
gebruik een Website Builder of een CMS
zodra u bepaalt hoe u wilt dat uw website op verschillende apparaten werkt, bent u klaar om te beginnen met bouwen! Het platform waarop u uw site maakt, is essentieel voor het gebruik van uw mobiele ontwerpplan. Voor basisgebruikers zijn er twee opties om te overwegen.
websitebouwers
websitebouwers haal al het giswerk uit het webdesign en laat u in slechts enkele minuten een volledig aanpasbare en veelzijdige website maken. Ze bereiken dit zodat gebruikers om een thema of sjabloon te kiezen en gewoon slepen-en-neerzetten functies die ze willen op hun webpagina ‘ s en gemakkelijk te verwijderen degenen die ze niet doen.
de meeste websitebouwers, waaronder de gold standard Wix, stellen gebruikers in staat om eenvoudig te bepalen hoe hun sites zullen reageren op mobiel. Het Wix-platform vertrouwt meestal op adaptieve websites, terwijl andere diensten zoals Weebly meestal vertrouwen op responsive design. Afhankelijk van het soort aanpak die u voor ogen had voor uw site, kunt u besluiten om te gaan met een website builder die aan uw behoeften kan voldoen.
Content Management Systems
een content management systeem (CMS) is uw beste alternatief voor een speciale Website builder. CMS ‘ s zoals WordPress vertrouwen op iets meer computer en internet kennis,maar ze kunnen meer functies dan website bouwers. Daarnaast biedt een CMS zowel RWD-als AWD-ontwerpen.
net als websitebouwers kan een CMS gebruik maken van beide mobiele ontwerpbenaderingen door ze te integreren in de veelheid aan thema ‘ s die voor gebruikers beschikbaar zijn. Deze thema ‘ s kunnen gewoon een rijk als die gevonden op website bouwers, maar ze beter dienen degenen die het niet erg om hun handen een beetje vies en het leren van een beetje over webdesign.
als u besluit om een CMS te gebruiken, kunt u eenvoudig een mobiel thema downloaden, gratis of tegen betaling, en het gebruiken om uw website te maken. De meeste van deze thema ‘ s worden geleverd met volledige ondersteuning en regelmatige updates, zodat u zich geen zorgen hoeft te maken over het onderhouden en beheren van uw website.
ontwerp een mobiele Website
wanneer u bepaalt op welk platform u uw website wilt bouwen, bent u klaar om uw website te ontwerpen en te maken. Of u nu het creëren van een blog, een portfolio, een business site, of zelfs een e-commerce winkel, U kunt gaan over het met behulp van de standaard principes die nodig zijn voor een site ontwerp. Zodra u uw ontwerp hebt voltooid, moet u ofwel gewoon uw site testen om te zien of het correct reageert (RWD) of een ander ontwerp voor mobiel (AWD) maken.
het ontwerpen van een mobiele website is bijna net zo eenvoudig als het ontwerpen van een desktop site, maar er zijn een paar dingen die u in gedachten wilt houden.
a. Mobiele gebruikers hebben over het algemeen een beperkte bandbreedte
Houd er altijd rekening mee dat de meeste mobiele bezoekers gebruik maken van mobiele netwerken die hun bandbreedte beperken. Als gevolg daarvan, is het cruciaal om uw mobiele site licht en vrij van te veel inhoud die weg kan eten op die cruciale bytes te houden.
b. Mobiele gebruikers willen snel relevante informatie
vaak bezoeken mobiele gebruikers een site om relevante informatie te krijgen over de locaties die ze bezoeken, zoals winkeluren of telefoonnummers. Indien deze relevante informatie niet snel en duidelijk beschikbaar is, kan dit leiden tot verlies van een klant. Zorg ervoor dat uw mobiele website snelle links heeft naar contactgegevens en andere relevante gegevens.
C. mobiele apparaten zijn minder krachtig
Desktop-en laptopcomputers zijn gebouwd met grafische kaarten en processors die een zware belasting kunnen verwerken. Terwijl mobiele apparaten zijn zeer krachtig, ze zijn niet gebouwd op dezelfde manier. In plaats daarvan verliezen ze functie voor vorm en als gevolg daarvan, ze kunnen niet omgaan met processor-zware inhoud op dezelfde manier als een computer kan.
als uw desktop site dit soort resource-toewijding vereist, wilt u misschien twee keer nadenken over het bedienen van een mobiel publiek van hetzelfde soort site.
organiseer inhoud
bij het maken van een mobiele site is het belangrijk om ervoor te zorgen dat uw gebruikers toegang hebben tot alles op uw desktop site, terwijl ze de mogelijkheid behouden om op een kleiner scherm te werken. Er zijn verschillende overwegingen die u in gedachten moet houden bij het organiseren van uw inhoud.
a. Mobile First
Mobile First is een van de nieuwste bewegingen in de designwereld. Het bepaalt dat u eerst uw mobiele site moet ontwerpen voordat u zich uitbreidt naar pagina ‘ s voor desktops en tablets. De inhoud die u maakt voor uw mobiele site kan ook worden geladen op de desktop-versie.
deze aanpak is daarom nuttig voor dynamische en responsieve websites waar de inhoud op uw mobiele versie identiek is aan die op uw desktop site.
b. Mobiele tweede
Als u al een desktop website hebt, kan het organiseren van de inhoud wat moeilijker zijn, hoewel niet helemaal onmogelijk. Eerste, erachter te komen van de elementen van uw desktop site die u nodig hebt om te laten zien op de mobiele versie.
Verzamel gebruikersgegevens via de standaard analysetools die u gebruikt en ontdek:
- de inhoud die het belangrijkst is voor uw bezoekers.Wat mobiele gebruikers hebben de neiging om te negeren.Het pad dat uw bezoekers meestal nemen.
gebruik de inzichten die u verzamelt om te weten wat er wel en niet op de mobiele site moet staan. Dit zal u helpen uw desktop site schoon te maken. Dan, kaart uit de inhoud pad dat uw bezoekers zullen nemen.
nadat u een goed idee hebt van de visuele stroom van uw site, kunt u eenvoudig het eerste ontwerp voor mobiele schermen opmaken en direct in de ontwikkeling van mobiele website gaan.
c. navigatie
mobiele telefoonschermen zijn klein. Dit betekent dat u de mobiele navigatie-opties moet minimaliseren. Overweeg het gebruik van een vergrootglas of de drie lijn (hamburger) menu navicon. Zodra u klaar bent, test uw website op de populaire apparaten die worden gebruikt door maximaal 90% van uw mobiele bezoekers.
D. Design for Touch
omdat het onmogelijk is om met de rechtermuisknop te klikken of met uw vingers te zweven op een mobiel apparaat, moet u links op uw mobiele website plaatsen om ervoor te zorgen dat uw gebruikers niet per ongeluk op de verkeerde links klikken. Doe dit door:
- feedback te geven wanneer het scherm wordt aangeraakt.Met behulp van knoppen om te bepalen waar gebruikers wel en niet kunnen klikken.Herontwerp uw drop-down menu ‘ s.Het minimaliseren van tekstinvoer.
en daar heb je het! Gebruik deze informatie de volgende keer dat u uw desktop website volledig opnieuw moet ontwerpen voor het bekijken op mobiele apparaten, of wanneer u een nieuwe mobiele site vanaf nul maakt.