Houd het simpel met responsive webdesign

Openbaarmaking: Uw steun helpt de site draaiende te houden! We verdienen een verwijzingsvergoeding voor sommige van de services die we op deze pagina aanbevelen.


Houd het simpel met responsive webdesign

Responsive webdesign – het creëren van webcontent die werkt op verschillende platforms en formaten, waaronder smartphones, tablets en pc’s – is de laatste tijd een modewoord geworden op internet, en terecht: het mobiele web wordt een onmisbaar goed.

Eenennegentig procent van alle Amerikanen (vanaf 2013) heeft een mobiele telefoon; 55% heeft een smartphone; en drieënzestig procent gebruikt elke dag een mobiel apparaat om toegang te krijgen tot internet. Het totale aantal mobiele apparaten was in 2013 talrijker dan mensen op de hele planeet, en de experts van Cisco voorspellen dat er in 2017 1,4 apparaten per persoon zullen zijn, die tegen 2018 bijna zestien exabytes aan verkeer zullen genereren per maand.

Het onderliggende concept dat responsive design aanstuurt, staat bekend als progressive enhancement. Een zin bedacht door internetondernemer Steve Champeon in 2003, progressieve verbetering (of PE, zoals het algemeen wordt genoemd) is gebaseerd op het idee dat ontwerpen vanaf de grond moeten worden gebouwd om plaats te bieden aan het minst capabele platform waarop ze zullen zijn gezien of gebruikt, en vervolgens herzien en verfijnd om te voldoen aan de behoeften van krachtigere platforms.

PE schrijft voor dat het eerste en primaire ontwerp voor uw site moet worden geoptimaliseerd voor mobiele gebruikers; alle toeters en bellen die de site meeslepender maken voor bezoekers op een pc, worden later aangepakt. Dit bespaart niet alleen tijd en moeite voor de ontwerpers, site-eigenaren en gebruikers, maar maakt ook optimaal gebruik van de mobiele explosie en het enorme potentieel voor conversie.

Responsive design onderdeel maken van uw site is waarschijnlijk gemakkelijker dan u denkt. Kleine veranderingen in het ontwerp van uw site opnemen (of kleine wijzigingen aanbrengen in uw bestaande) kan een lange weg gaan. Bijvoorbeeld, in vergelijking met hun traditionele tegenhangers, maken vloeiende rasters en flexibele afbeeldingen het mogelijk om de grootte van inhoud on-the-fly echt te wijzigen – ongeacht de schermgrootte of het platform – door te schalen op basis van verhoudingen in plaats van absolute afmetingen.

Aangezien 96% van de consumenten een run-ins heeft gehad met sites die mobielonvriendelijk zijn, en 75% zegt de voorkeur te geven aan een site die is ontworpen voor mobiele toegang, kan het beter reageren op uw site een van de beste manieren zijn om ervoor te zorgen dat de bezoekers van vandaag de klanten van morgen worden.

Responsief webdesign

Responsive webdesign vereenvoudigd

75% van de consumenten geeft de voorkeur aan een mobielvriendelijke site, dus waarom zou u ze niet geven wat ze willen? Responsive webdesign is een geweldige optie om uw gebruikers een meeslepende en mobielvriendelijke site te bieden.

Wat is responsive webdesign?

Het doel van een responsieve website is om de schermgrootte en oriëntatie van de gebruiker te detecteren, of het nu een desktop, mobiele telefoon, tablet of ander apparaat is.

  • Sites met responsief ontwerp worden hetzelfde bekeken, ongeacht welk apparaat u gebruikt.
  • Met responsief ontwerp kunnen webpagina’s zich aanpassen aan het scherm waarop ze staan ​​zonder de functionaliteit en esthetiek in gevaar te brengen.
  • Responsieve sites reageren op elke beweging die u maakt.
    • De inhoud blijft op het scherm en de gebruiker hoeft niet naar links en rechts te scrollen om de informatie op de pagina te laten passen.

Waar is een responsieve site van gemaakt??

Vloeibare roosters

  • Met vloeiende rasters kunnen de elementen van de lay-out worden aangepast op basis van de grootte van het scherm van de gebruiker.
  • Ontworpen in termen van verhoudingen in plaats van een traditionele lay-out die de meeste gebruikers misschien gewend zijn.
    • Of de webpagina nu op een desktop, tablet of mobiele telefoon staat, de verhoudingen van het vloeiende raster helpen allemaal om de breedte van de pagina te vergroten, zodat alle informatie goed op het scherm past.

Mediaquery’s

  • Mediaquery’s zijn het coderingsgedeelte van de website waarmee de webdesigner de visuele look kan creëren op basis van breedte, hoogte, oriëntatie, kleur, enz..
  • Gegevens (zoals het apparaat dat wordt gebruikt) worden verzameld over de persoon die uw site bezoekt en vervolgens gebruikt om CSS-stijlen toe te passen.
    • CSS staat voor Cascading Style Sheets. Het wordt gebruikt om de inhoud op een webpagina of document te scheiden van de daadwerkelijke presentatie in de vorm van lay-out, kleuren en lettertypen.
      • AKA het verschil met hoe het eruit ziet wanneer het wordt gecodeerd door een ontwerper en hoe een gebruiker het eindproduct ziet.

Flexibele afbeeldingen

  • Dit zijn afbeeldingen op een website die op elk scherm of apparaat kunnen worden bekeken. Hun afmetingen zijn “flexibel”, zodat ze op de juiste manier kunnen worden aangepast.
  • Om ervoor te zorgen dat de verhoudingen correct werken in de vloeiende rasters en vervolgens in de mediaquery’s, moeten afbeeldingen op de webpagina worden aangepast in flexibele eenheden zodat ze niet buiten het speciale weergavegebied komen.

Mobiele versus responsieve sites

Mobiel

  • De inhoud en het uiterlijk van een mobiele site zijn anders dan de desktopversie.
    • Het biedt een fractie van de volledige website en de inhoud ervan.
  • Is toegankelijk via een andere URL dan de hoofdwebsite.
  • Goed voor websites met een overvloed aan pagina’s – kan de beschikbare informatie vereenvoudigen.
  • Laadtijden zijn sneller omdat er minder toegang tot informatie is en u weet welk apparaat ze gebruiken.

Snel reagerend

  • Slechts één URL voor zowel mobiel als desktop, dus er hoeft niets van de ene naar de andere te worden gewijzigd.
  • HTML-code kan gemakkelijk opnieuw worden gebruikt.
  • Krijg toegang tot analyses vanaf één plaats in plaats van meerdere, aangezien de site over de hele linie hetzelfde is.
  • Niet zo goed voor grotere websites, omdat de gebruiker te lang moet scrollen om de inhoud te vinden waarnaar hij op zoek is.
    • Bijvoorbeeld: nytimes.com
      • Door de hoeveelheid informatie op de desktopversie zouden gebruikers extreem lang kunnen scrollen om informatie te zoeken.
      • Ze bieden een mobiele versie van hun site die de hoeveelheid gedeelde informatie vermindert, zodat de laadtijd niet wordt vertraagd.

Voordelen voor gebruikerservaringen

Gebruikers houden van het uiterlijk en de esthetiek van een responsieve site. Ze komen vaker terug wanneer ze de site leuk vinden en gebruiken deze op hun beurt efficiënter en effectiever.

  • Website inhoud
    • Snelle laadtijd zolang er geen honderden pagina’s met inhoud zijn.
    • Informatie is hetzelfde van het ene apparaat naar het andere.
  • Schaalvermogen
    • De afmetingen passen op elke desktop, tablet of mobiel apparaat, dus de dagen dat informatie wordt bekeken op een iPhone maar niet op een Android zijn verdwenen.
  • zoek machine optimalisatie
    • Voor de mensen die de website onderhouden, is het voor Google gemakkelijker om één website te crawlen en te indexeren in plaats van twee verschillende URL’s (zoals de mobiele / traditionele combinatie).
    • 1 website = 1 SEO-campagne
      • Het hebben van zowel een mobiele site als een standaard desktop-site vereist twee SEO-campagnes, waardoor er meer informatie wordt bijgehouden.

Bronnen

  • Beginnersgids voor responsief webdesign – treehouse.com
  • Responsief ontwerp – alistapart.com
  • Responsive webdesign versus mobiele websites – ontargetinteractive.com
  • Afzonderlijke mobiele smashingmagazine.com
  • Responsive Design – techtarget.com
  • 3 redenen waarom responsive webdesign de beste optie is voor uw mobiele SEO-strategie – searchenginewatch.coms
  • De SEO van responsive webdesign – moz.com
  • 69% van de tabletbezitters doet elke maand een aankoop op hun apparaat – ecconsultancy.com
  • Vijf responsieve valkuilen voor webdesign om te vermijden – bradfrost.com
  • Hoe Fluid Grids werken in responsive webdesign – 1stwebdesigner.com
  • Responsieve webdesignlay-outs en mediaquery’s – onextrapixel.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me