Gezien het toenemende gebruik van mobiele apparaten heeft Google sinds eind april 2015 websites bestraft waarvan de pagina's niet mobiel gereed zijn. Gevolg, voor uw SEO, moet u ervoor zorgen dat uw website goed wordt weergegeven op zowel grote als kleine schermen.
In dit artikel laat ik je zien hoe je je website op de pagina kunt zetten met behulp van de regel @media van CSS3.
Het is belangrijk op te merken dat de termen "responsief" en "mobiel-compatibel" vaak door elkaar worden gebruikt ondanks het verschil in hun werkelijke betekenis. Begrijpen wat elk betekent, is belangrijk om ervoor te zorgen dat uw website voldoet aan de nodige criteria voor alle schermformaten.
Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
Laten we dan teruggaan naar waarom we hier zijn.
Responsief en mobiel compatibel
Websites die dat niet zijn niet responsief of mobiel compatibel, worden op alle schermen identiek weergegeven, d.w.z. de versie voor grote schermen wordt overal weergegeven. Op kleinere schermen moet je horizontaal door de pagina scrollen om al hun inhoud te zien. Ze zijn moeilijk te navigeren op deze schermen.
Ontdek ook deze 8 WordPress plug-ins om het uiterlijk van uw website aan te passen
Een website is Mobile compatibele wanneer het alleen voldoet aan het strikte minimum om op mobiel gezien te worden, wat het nog geen responsive website maakt. Een website kan bijvoorbeeld als mobiel compatibel worden beschouwd als u niet horizontaal hoeft te navigeren. Hierdoor worden de elementen ervan klein en niet te onderscheiden. U moet dan inzoomen om de inhoud ervan te lezen.
Aan hun kant de websites responsive passen zich perfect aan verschillende schermformaten aan. Ze herdefiniëren hun elementen zodat ze gemakkelijk kunnen worden gezien en gebruikt op kleinere schermen. Dit is het type ontwerp dat u voor uw website wilt.
Zie ook onze 10 WordPress plug-ins om een boekingsformulier te maken op uw website
Je kent nu het verschil tussen responsief en compatibel-mobiel. We zullen nu de regel zien @media van CSS3 waarmee u uw website kunt bijwerken voor responsief of vrij eenvoudig kunt maken WordPress-thema's met responsieve inhoud.
De regel @media van CSS3
Om je thema responsief te maken, heb je de regel nodig @media van CSS3. Kortom, het laat je de stijlen definiëren die je wilt gebruiken voor een bepaald type (grootte) scherm. Je gebruikt het als een andere CSS-regel (met accolades), behalve dat het andere CSS-regels nest.
@media mediatype (expressie) {css-test-selector {eigenschap1: waarde1; eigenschap2: waarde2; }}
In deze structuur de elementen binnen de regel @ media functie alleen wanneer de soort-van-media opgegeven om succesvol te zijn gedetecteerd. Met het gekozen mediumtype kunt u de kenmerken opgeven in termen van afmetingen.
Ontdek Interface en gebruikerservaring toepassen op WordPress
De regel @media detecteert voor u het type scherm waarmee uw website wordt bezocht en kiest de regels die het beste bij dit type scherm passen. Alle grote browsers hebben de regel al geïntegreerd @media.
Hier is de lijst ter informatie: Chrome , Safari, Firefox, IE, Opera et rand.
Definieer de doelschermen
Als u een wilt wijzigen WordPress theme bestaande, maak dan een back-up van de CSS van deze laatste om indien nodig terug te kunnen gaan.
Lees ook ons artikel over Hoe geleidelijk Facebook- en Disqus-reacties te laden
Zoals we in de structuur hebben gezien, moet u doorsturen om het type scherm te definiëren @media het beoogde type scherm. Hier is de lijst met de verschillende soorten schermen:
- allen : voor alle soorten schermen of voor de afmetingen gespecificeerd in uitdrukking
- scherm : voor alle schermen, mobiel, tablet, laptop of desktop
- print : voor printers, als u specifieke stijlen wilt voor de pagina's die kunnen worden afgedrukt
- toespraak : voor schermlezers, als u stijlen voor blinden en slechtzienden wilt.
Er zijn ook operators die u voor het schermtype kunt plaatsen; net zo niet om stijlen weer te geven voor schermen die van een ander type zijn dan degene die is opgegeven of Slechts om stijlen alleen toe te passen op gespecificeerde schermen. U kunt dus beschikken over:
@media scherm alleen
Definieer stijlen voor schermafmetingen
U kunt gebruiken uitdrukking om meer details te geven over de kenmerken van het scherm. Na @media invoeren en gevolgd door de uitdrukking. Als u meer dan één uitdrukking gebruikt, moeten ze allemaal worden gescheiden door en. Hier is een voorbeeld van de structuur:
Scherm met alleen @media en (max-width: 640px) {selector-css-example {/ * Je gebruikelijke CSS hier * /}}
In dit voorbeeld gebruik ik max-width met een waarde van 640px. Dit is om een maximale schermbreedte in te stellen ter grootte van een iPhone of een kleine Android-smartphone. Met dit soort structuur heeft u controle over hoe uw website eruitziet op verschillende apparaten. Hier is een lijst met eigenschappen met betrekking tot afmetingen waarin u kunt gebruiken uitdrukking :
Ontdek ook onze 8 SEO WordPress plugins om de SEO van uw website te optimaliseren
- min breedte et max-width : respectievelijk de minimum en maximum breedte vereist voor de weergave van stijlen in de regel @media. Nog een pixel en stijlen worden niet weergegeven.
- min hoogte et max-height : respectievelijk de minimum en maximum hoogte vereist voor het weergeven van de stijlen in de regel @media. Omdat de meeste schermen zijn ontworpen om pagina's verticaal af te rollen, eigenschappen min-height et max-height worden weinig gebruikt.
Hier is een lijst met schermformaten voor sommige terminals:
- IPhone: 640px
- IPad: 1024px
- Tabletten: 1366px
- Android-smartphone: 640px, 720px, 854px, 960px
- Android extra groot: 1024px, 1066px
- Windows-telefoon: 480
- Windows Phone groot: 768 px
- jong en oud: 320px
- Ultrabook / laptops: 1366 px
- Desktops en tv's: 1920px
Er zijn veel andere eigenschappen die u kunt gebruiken uitdrukking. Als u zich bijvoorbeeld richt op desktops of televisieschermen die afbeeldingen met een beeldverhouding van 16: 9 kunnen weergeven, kunt u een structuur als deze gebruiken:
Alleen @media-scherm en (min-breedte: 1920px) en (device-aspect-ratio: 16/9) {selector-css-example {/ * Je gebruikelijke CSS hier * /}}
Raadpleeg voor meer complete lijsten en voorbeelden w3schools et Mozilla-ontwikkelaars.
Test de responsieve functionaliteit van uw website
Terwijl u uw . aanpast of bouwt WordPress theme of aan het einde, als je van verrassingen houdt, moet je het resultaat testen om te zien of het eindelijk reageert. Houd er rekening mee dat Google let op websites die niet responsief zijn.
Zie ook deze 10 WordPress plug-ins om tabbladen op uw blog te maken
Als u niet alle mobiele apparaten heeft waarop u zich richt, zijn er (gelukkig voor onze beurzen) een groot aantal tools om te zien hoe uw website zich aanpast aan verschillende schermen.
Direct in de browser van uw computer kunt u gebruiken Windows Resizer Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Hieronder ziet u een afbeelding van BlogPasCher in de responsieve ontwerpweergave die standaard bij Firefox wordt geleverd.
Er zijn ook websites gewijd aan de taak:
Het bijzondere van deze website is dat u zelf de schermafmetingen kunt kiezen. Houd er rekening mee dat deze website de jouwe in een frame laadt. Dus als uw WordPress theme is ontworpen om niet in een frame te worden weergegeven, dus het is heel goed mogelijk dat het hier niet wordt weergegeven.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Deze website is handig om uw website te testen op de nieuwste Apple-, iPad- en iPhone-apparaten. Voer gewoon uw url in. Merk op dat het onderhevig is aan hetzelfde frameprobleem als responsivepx.
Op deze website kunt u de uwe testen op kleine schermen en op oudere modellen telefoons die u aan de rechterkant van het scherm selecteert. U kunt ook enkele schermeigenschappen configureren.
Dit is een van de belangrijkste tests, zo niet de belangrijkste. Voer gewoon uw adres in de balk in en klik op Analyseren om de test te starten. Na de test toont de tool een rapport en een score. Als de test positief is, des te beter, wordt u niet bestraft door Google.
Als je geen ontwikkelaar bent, adviseer ik je een lijst met responsieve WordPress-thema's te beginnen.
Aanbevolen bronnen
Ontdek ook andere aanbevolen bronnen die u zullen helpen om uw partners en abonnees beter aan te trekken, maar ook om de beveiliging van uw website te verbeteren.
- Hoe maak je aangepaste links op WordPress
- 5 WordPress plug-ins om klantrecensies toe te voegen aan uw blog
- Hoe maak je een rad van fortuin voor kortingsbonnen op WooCommerce
- Ontdek de beste aanbiedingen en coupons voor uw blog
Conclusie
Alstublieft ! u weet alles wat er te weten valt over hoe u uw website of WordPress-thema responsive kunt maken met behulp van de regel @media van CSS3. Als we een WordPress-thema hebben gemist dat u na aan het hart ligt of waaraan u de voorkeur geeft, laat dan een link achter in de sectie commentaires hieronder.
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Wij nodigen u ook uit om delen op uw verschillende sociale netwerken.
...
