we horen dit woord “responsive” tegenwoordig veel in het webdesign domein. Mensen raden en gaan ga-ga over het belang van het gebruik van responsive design. Maar beginners op het gebied van professioneel bloggen en webmasteren nemen vaak een beetje tijd om greep te krijgen van al deze buzz over wat is een responsieve website en hoe te ontwikkelen.
mensen maken vaak thema ‘ s op hun website op basis van een imagebestand (bijvoorbeeld PSD). Terwijl alle website ontwerpen beginnen als een beeld, moet men heel voorzichtig zijn dat hun ontwerp voldoen aan de principes van responsiviteit en zijn mobiel-vriendelijk. Laten we een duik nemen in het onderwerp en ontdek alles over deze kwestie.
de responsiviteit van een website verwijst naar de mogelijkheid om de weergave aan te passen aan het apparaat waarop de website wordt gezien. Voorbij zijn de dagen dat de meeste van de mensen gebruikt om desktop –pc ‘ s te gebruiken-nu zijn er allerlei apparaten die er zijn. Desktop, laptops, netbooks, tablets, mini-tablets, e-book readers, smartphones en niet-zo-smartphones! Phew! Te veel om je geen zorgen over te maken!
al deze apparaten hebben hun eigen specifieke schermformaten en-resoluties. Een “rigide” website kan zich niet aanpassen aan (of laten we zeggen reageren op) de verschillende schermformaten. Verschijning van horizontale schuifbalk in browser is een van de meest opvallende teken dat de website niet reageert.
daarentegen kan een website met een responsief thema zich aanpassen en ervoor zorgen dat de inhoud van elke schermgrootte gemakkelijk leesbaar is.
niet echt. Een responsieve thema zal display aan te passen met het primaire doel dat de inhoud van de website kan worden gebruikt door de bezoeker. Om dit doel te bereiken, kan de website een aantal van zijn accessoire componenten (zoals zijbalk) te verbergen en de grootte van andere componenten (bijvoorbeeld afbeeldingen, lettertypen enz.)
het is vrij eenvoudig om te weten hoe responsief het thema van uw website is. Open het gewoon op verschillende formaten van computermonitoren en mobiele telefoonschermen. Als u uw website goed ziet en alle inhoud leesbaar is, is uw website responsief. Als u niet beschikt over verschillende soorten apparaten voor het testen van uw website, kunt u ook gebruik maken van online test voor responsiviteit.
het algemene antwoord is dat het zeer belangrijk is. Maar voordat u een beslissing om een make –over van uw website te doen om het te transformeren in een responsieve een-je moet kijken naar uw web traffic data. Probeer uit deze gegevens te vinden hoeveel verkeer uw website ontvangt van mobiele apparaten. Meestal websites zijn ontworpen om te worden gebruikt op desktop / laptop –maar als je krijgt aanzienlijk verkeer van apparaten zoals tablets / mobiele telefoons –je moet zien hoe uw website op zoek is op dergelijke apparaten.
op dit moment ontvangen Aziatische websites gemiddeld 27% van hun verkeer van mobiele apparaten. Dit percentage zou veel hoger zijn voor websites in gebieden als Europa en Amerika, omdat er mobiele apparaten relatief veel populairder zijn.
het zal u verbazen dat responsiviteit eenvoudig kan worden bereikt met alleen CSS. Met de huidige CSS-normen kunt u uw website stylizen voor verschillende schermtypen. Dit betekent dat u afzonderlijke CSS-regels kunt hebben voor verschillende schermformaten. Bijvoorbeeld:
@media screen en (max-width:320px) {
.primaire zijbalk { weergave: none } / / Verberg zijbalk wanneer de schermgrootte 320px of minder is
}
@media scherm en (min-width:1024px) {
body { font-size: 12px } / / stel de lettergrootte in voor schermgroottes groter dan 1024px
}
dergelijke aangepaste CSS regels zal het uiterlijk van uw website te controleren, afhankelijk van de beschikbare ruimte op het scherm.
als u kiest voor responsive design voor uw website of blog, kunt u de volgende voordelen verwachten::
- het verkeer op uw website zal toenemen omdat gebruikers van mobiele apparaten deze kunnen gebruiken en kunnen besluiten om terug te keren voor nieuwe informatie. Als mobiele gebruikers de inhoud van een website niet kunnen gebruiken –ze zullen niet terugkomen!
- als u advertenties op uw website gebruikt om online geld te verdienen, kan uw omzet stijgen omdat een responsieve website ook advertenties op mobiele apparaten mooi kan weergeven.
- u hoeft geen verschillende versies van uw website of blog te ontwikkelen voor verschillende platforms. Dit bespaart ook tijd op onderhoud, omdat meer versies meer onderhoudstijd vereisen.
- als u meer dan één versie voor verschillende typen apparaten ontwikkelt, loopt u het gevaar dat Google dubbele URL ‘ s indexeert. Verschillende URL ’s die naar dezelfde inhoud verwijzen worden Dubbele URL’ s genoemd. Google zet een zware straf op dubbele URL ‘ s geloven dat de inhoud ook is duplicaat. Responsive website design beschermt u tegen een dergelijke straf.
- u hoeft zich geen zorgen te maken over de juiste agent detectie omdat dezelfde website zal werken voor alle browser agents.
- het delen van URL ‘ s op sociale media websites wordt gemakkelijker omdat elke pagina op uw website slechts één URL heeft.
er zijn geen significante nadelen van responsive design, behalve dat de extra CSS-regels de grootte van het CSS-bestand kunnen verhogen en als gevolg daarvan de downloadtijd zal toenemen. Maar met sneller internet steeds beschikbaar over de hele wereld –Ik denk niet dat dit vormt een echt probleem.
in responsive design worden geen verschillende afbeeldingen gebruikt voor verschillende schermformaten. In plaats daarvan, dezelfde afbeelding wordt aangepast door middel van CSS te passen op het scherm van het apparaat. Zo, mobiele apparaten zullen ook dezelfde hoge resolutie beelden die worden geserveerd op desktop verbindingen te downloaden.
nu weten we dat het responsieve ontwerp een beetje extra belasting kan leggen op mobiele internetverbinding, is het belangrijk dat u kunt testen hoe snel uw huidige (responsieve of niet-responsieve) ontwerp werkt. De beste online tool om dit uit te testen is PageSpeed van Google. Deze tool kan uw website scoren, zowel op desktop en mobiele apparaten.
de meeste websites van Google reageren nu. Chromebook website maakt bijvoorbeeld gebruik van responsive design. Maar de Google is een baanbrekend bedrijf van alles wat met Internet te maken heeft. Naarmate meer en meer andere bedrijven erkennen het belang van responsive design, websites verschuiven naar dit nieuwe paradigma. Kijk op de websites van Wendy ‘ s restaurantketen, inbound marketing bedrijf HubSpot en krant Boston Globe om wat inspiratie te krijgen.
Ja, Er zijn veel belangrijke websites die responsive design nog niet hebben omarmd. Voorbeelden hiervan zijn CNN en BBC. Dit zijn enorme websites en een volledig herontwerp om responsiviteit op te nemen kan aanzienlijke investeringen vereisen. Dat zou de reden kunnen zijn waarom deze mediahuizen nog niet reageren.
Nee, Het is niet echt duur. Als u eigenaar bent van een website/blog op basis van WordPress, zijn er veel responsieve thema ‘ s beschikbaar. De standaard thema van WordPress (dwz TwentyThirteen) is ook ontworpen om responsief te zijn. De meeste gratis thema ‘ s aangeboden door WordPress en Blogger zijn responsief. Maar als u gebruik maakt van een third party thema-je nodig hebt om de responsiviteit te controleren.