Als webontwerpers en -ontwikkelaars leven we nu een paar jaar in het mobiele tijdperk. In deze zelfstudie gaan we zeven plug-ins beoordelen die helpen om uw website er goed uit te laten zien en goed te presteren voor mobiele bezoekers.
Mobiele bezoekers verwijzen meestal naar diegenen die de site bezoeken via tablet of smartphones. Uiteraard moeten we websites bouwen die reageren op en aanpassen aan mobiele apparaten, of we bereiken niet veel van degenen die onze sites bezoeken en / of onze applicaties.
Maar hoe pakken we het in? Door onze websites mobiel te maken, natuurlijk. In deze zelfstudie gaan we zeven plug-ins beoordelen om u te helpen uw website er goed uit te laten zien en goed te laten presteren voor mobiele gebruikers.
Het is onwaarschijnlijk dat u de afgelopen twee jaar nog nooit hebt gehoord van de termen 'responsief webontwerp' of 'aangepast webontwerp'. Het doel van deze benadering in webdesign is om webpagina's passend te maken binnen de beperkingen van de schermen van mobiele apparaten.
De vier onderstaande WordPress-plug-ins kunnen u helpen bij het presenteren van pagina's die geschikt zijn voor mobiel in uw website.
Hammy is een handige plug-in die de grootte van de afbeeldingen in uw website voor mobiele apparaten aanpast. Het vervangt de tags met
tags en maakt gebruik van WordPress 3.5 afbeeldingscode om het formaat van de afbeeldingen te wijzigen.
Als u de plug-in wilt gebruiken, moet u een aantal onderbrekingspunten instellen en een HTML-container-element kiezen. Met de onderbrekingspunten die u opgeeft, kan de plug-in het formaat van de afbeeldingen wijzigen wanneer de schermbreedte een onderbrekingspunt bereikt. U kunt ook enkele klassenamen instellen om te voorkomen dat bepaalde afbeeldingen worden genegeerd.
Responsive Widgets is een plug-in die nieuwe WordPress tekst / HTML-widgets introduceert die alleen verschijnen in bepaalde apparaten zoals iPads, Nooks, PlayStation Vitas en andere generieke apparaten zoals tablets of smartphones.
Om de plug-in te gebruiken, hebt u alleen een basiskennis van WordPress-widgets nodig. Open de Widgets-pagina en je ziet veel nieuwe widgets voor de volgende apparaten en schermtypen:
Veel van de widgets hebben selectievakjes waarmee u uitzonderingen kunt maken. Als u bijvoorbeeld een widget wilt weergeven op tablets maar niet op iPads, kunt u een selectievakje aanvinken en kunt u verder gaan.
WP Lightbox 2 is een zeer populaire "lightbox" -plug-in waarmee u in-page pop-upafbeeldingen en -galerijen met overlay-effecten kunt gebruiken. Het is geen plug-in om u te helpen met responsief webontwerp als zodanig, maar het is direct responsive zodat u het kunt gebruiken met uw websites..
Om de plug-in te gebruiken, hoeft u niets anders te doen dan de plug-in te activeren. Het heeft een aantal opties zoals het inschakelen van Lightbox in de commentarensectie of het wijzigen van de animatieduur, maar het werkt in principe bij activering zonder extra configuratie.
Verantwoordelijk is een zeer nuttige WordPress-plug-in om je responsieve ontwerpen direct in je browser te testen. Het gebruikt de Bookmarkport Resizer Bookmarklet om een vaste balk boven aan uw pagina te plaatsen, waar u de grootte van de pagina kunt aanpassen aan specifieke dimensies zoals smartphones, tablets of desktop-schermen, en aangepaste dimensies die u kunt instellen.
Om de plug-in te gebruiken, activeert u deze en bezoekt u een van uw pagina's. De balk wordt op elke pagina weergegeven, zodat u uw ontwerpen volledig probleemloos kunt testen.
Deze plug-ins werken op een meer gespecialiseerde manier: ze helpen u een ander WordPress-thema weer te geven als de gebruiker met uw mobiele apparaat verbinding maakt met uw website. Dit is vooral handig als u een thema heeft dat niet mobiel is. Als u niet de tijd of de energie heeft om uw thema mobielklaar te maken, kunt u van deze fantastische plug-ins genieten om het werk te doen.
Met meer dan vijf millon downloads en een rating van 3,9 van de 5 sterren, is WPTouch vandaag de meest populaire plug-in voor mobiele thema's. Het biedt een van de gemakkelijkste manieren om een mobiele versie van uw website te maken, volledig uit de doos.
Om de plug-in te gebruiken, hoeft u alleen de plug-in te installeren en te activeren. Hoewel de standaardinstellingen voor veel gebruikers voldoende zijn, kunt u een heleboel instellingen aanpassen op de configuratiepagina's.
Een waarschuwing echter: met grote kracht komt grote verantwoordelijkheid, en met meer dan vijf miljoen downloads komt nog meer. In juli 2014 is aangekondigd dat WPTouch 3.x-versies een dodelijke kwetsbaarheid hadden die onmiddellijk werd verholpen, maar mogelijk enorme problemen heeft veroorzaakt voor gebruikers van de plug-in. Het is altijd een goed idee om op updates te letten en dit geldt voor de kern en al uw plug-ins en thema's.
WordPress Mobile Pack is een andere grote speler die mobiele thema's aanbiedt voor WordPress-websites. Voor nu heeft het meer dan 600.000 downloads en een waardering van 3,8 van de 5 sterren. WordPress Mobile Pack biedt een zeer uniek mobiel thema voor u en uw bezoekers - een mobiele app-achtige interface in plaats van een klassiek mobiel ontwerp.
Net als WPTouch is WordPress Mobile Pack klaar voor gebruik terwijl u de plug-in installeert en activeert. Als u wilt, kunt u wat aanpassingen aanbrengen op de configuratiepagina.
Jetpack is niet alleen een van de populairste WordPress-plug-ins ooit, maar het wordt ook ondersteund en onderhouden door WordPress.com en Automattic. En deze grote plug-in heeft ook een "Mobile Theme" -functie waarvan we kunnen profiteren.
Om de functie "Mobiel thema" te gebruiken, moet u naar de Jetpack "Instellingen configuratiepagina nadat u Jetpack hebt geïnstalleerd en geactiveerd. Zoek in de lijst met Jetpack-modules "Mobile Theme" en activeer het. Het is niet echt veel, maar het biedt een snel en schoon ontwerp voor mobiele apparaten. Een opmerking uit persoonlijke ervaring: het speelt niet goed met de officiële Disqus-plug-in.
In het web is het altijd belangrijk om op de hoogte te blijven van de trends en gebruikers te bieden wat ze willen, vooral als je er iets voor terugkrijgt (of het nu geld of lof is). In onze tijd wordt "mobile ready" steeds standaard en het zou dom zijn om uw gebruikers uit te stellen met een website die niet goed vertaalt naar mobiele apparaten.
Kent u andere goede plug-ins die websites mobieler toegankelijk maken? Deel uw mening en kennis met ons door hieronder te reageren. En als je dit artikel leuk vond, vergeet dan niet om het met je vrienden te delen!