Responsief ontwerp: hoe u het de eerste keer goed doet

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


In zijn memoires uit 1939, Wind, zand en sterren, De Franse auteur en aristocraat Antoine de Saint-Exupery meende: “Een ontwerper weet dat hij perfectie heeft bereikt, niet als er niets meer toe te voegen is, maar als er niets meer is om mee te nemen.” De beroemde vlieger en Little Prince-auteur hebben het informatietijdperk niet meegemaakt, maar zijn woorden blijven desalniettemin resoneren in een wereld waar cyberspace de hemel heeft vervangen als de grens van innovatie.

Sterker nog, nu de aandacht zich uitstrekt, zelfs als de rijkdom aan beschikbare inhoud exponentieel toeneemt, is de ‘less is more’-benadering van Saint-Exupery relevanter dan ooit. Bedrijven hebben niet langer de luxe om rond de spreekwoordelijke bush te kloppen wanneer het gemiddelde venster om een ​​mobiele bezoeker naar hun website te lokken minder dan vijf seconden bedraagt. Aangezien er nu meer dan vijf cent van elke dollar online wordt uitgegeven, moet u elk van die seconden tellen.

Het gaat om veel meer dan alleen het vinden van een gerenommeerde hostingprovider en het uploaden van een eenvoudige website. U moet een site maken die beantwoordt aan de behoeften van alle bezoekers. (Als je hulp nodig hebt om te begrijpen hoe websites en webhosting werken, raadpleeg dan onze geïllustreerde gids voor hosting).

De sleutel om de aandacht van een bezoeker te trekken en dat raam wijd open te houden (en naar uw pagina te wijzen) ligt erin reagerend ontwerp. De markt wordt snel een zeer belangrijk onderdeel van een post-pc-wereld en naarmate meer gebruikers hun nieuws ontvangen, genieten van entertainment en aankopen doen met tablets en smartphones, zorgt u ervoor dat uw website is ontworpen om te voldoen aan hun steeds veranderende behoeften. kritiek. Het draait allemaal om het behouden van de functies die bezoekers willen, en geen van de dingen die ze niet willen.

Er is geen ruimte voor onhandige grafische afbeeldingen, verwarrende navigatie of pagina’s die zijn vergrendeld in resoluties voor alleen desktop. Mobiele gebruikers willen dat hun internet slank, schoon en op maat is voor hun scherm, dus zorg ervoor dat u een host (en platform) kiest die echt responsief ontwerp ondersteunt.

De potentiële beloningen om meer uit minder te halen zijn aanzienlijk. Met meer dan 2,1 miljard mobiele breedbandabonnees als potentiële klanten, zijn zuinigheid en maximale interactiviteit van het grootste belang; het beste ontwerp is misschien wel het ontwerp met de grootste interactiviteit en de minste ‘designer-accenten’.

Winnend ontwerp

Responsive Design: het goed doen

In de innovatieve omgeving van vandaag blijft het aantal apparaten dat wordt gebruikt om op internet te surfen, groeien zonder tekenen van vertraging. Responsief ontwerp creëert een optimale gebruikerservaring op alle apparaten, van een desktop tot een smartphone, waardoor het voor consumenten gemakkelijker wordt om snelle en weloverwogen aankoopbeslissingen te nemen.

Waarom is responsief ontwerp zo belangrijk??

Er zijn 2,1 miljard abonnementen voor mobiel breedband.

87% van de Amerikaanse volwassenen heeft een mobiele telefoon.

55% gebruikt zijn mobiele telefoon om online te gaan, waarvan 31% online gaat, meestal met zijn telefoon in plaats van een computer of ander apparaat.

45% van de Amerikaanse volwassenen heeft een smartphone, 90% gebruikt zijn telefoon om online te gaan.

Amerikaanse consumenten besteden gemiddeld 1,4 uur per dag aan het surfen op internet op een mobiel apparaat.

37% van de bezitters van mobiele telefoons en 64% van de bezitters van smartphones gebruiken hun telefoon om nieuws online te krijgen.

60% van de tabletgebruikers leest liever nieuws op mobiel internet dan via een app.

79% van de smartphonegebruikers gebruikt hun telefoon om te helpen met winkelen.

71% van de gebruikers verwacht dat mobiele sites net zo snel laden, zo niet sneller dan desktopsites.

74% van de mobiele bezoekers verlaat een site als het downloaden langer dan 5 seconden duurt.

De anatomie van een responsieve site

In de ontwikkelingsfase zijn er 3 technische ingrediënten voor responsief websiteontwerp:

  1. Vloeibare roosters – Een procentueel ontwerp dat zich aanpast aan de schermgrootte.
  2. Flexibele afbeeldingen – Afbeeldingen in relatieve eenheden om te voorkomen dat ze buiten hun bevattende element worden weergegeven.
  3. Mediaquery’s – Een manier om CSS-regels op de pagina toe te passen op basis van de grootte van de weergegeven browser.

5 belangrijke ontwerpelementen van een responsieve e-commerce zorgen voor de best mogelijke gebruikerservaring.

De Masthead

Koptekst

Moet klein en eenvoudig zijn om de focus op de kerninhoud te houden, maar gemakkelijk te zien.

Probeer een lineaire CSS-gradiënt te gebruiken in plaats van een achtergrondafbeelding om meer ontwerpflexibiliteit te geven en HTTP-verzoeken te verminderen.

Het logo

Moet groter zijn en verkleind tot de uiteindelijke afmetingen.

Primaire navigatie

Of het hoofdmenu kan lastig zijn bij het werken in responsief ontwerp vanwege de beperkte ruimte die wordt geboden door kleine telefoonschermen.

Er zijn veel opties om dit te verhelpen, afhankelijk van het aantal menu-opties dat de voorkeur heeft, waaronder:

  • Een eenvoudig menu-anker in de koptekst dat de hoofdnavigatie op kleine schermen schakelt.
  • Een koptekstanker dat gebruikers naar de navigatie springt die in de voettekst is geplaatst.
  • Een linkerdia-navigatie (zoals die van Facebook) die toegankelijk is via een menupictogram, dat een lade onthult die van links naar binnen schuift en de hoofdinhoud naar rechts verplaatst.
  • Een navigatie die de hoofdinhoud van de pagina overlapt.

Zoekvak

Met een zoekvak kunnen bezoekers direct springen naar wat ze zoeken.

De afbeeldingengalerij

Beeldnavigatie

In plaats van op tekst gebaseerde afbeeldingsnavigatie, laat u een voorbeeld zien van verschillende productweergaven.

Afbeeldingen moeten linken naar hun grotere tegenhangers.

product afbeelding

Maak van uw productafbeelding het brandpunt van de pagina.

Probeer het lichtgewicht script genaamd Swipe.js om een ​​aanraakvriendelijke afbeeldingscarrousel te maken, zodat gebruikers op een aanraakvriendelijke manier tussen productfoto’s kunnen vegen.

De productbeschrijving

Productoverzicht

Moet boven de afbeelding verschijnen (in de opmaak voor de afbeeldingscontainer), waarbij de bezoeker de productnaam, prijs en populariteit of beoordeling krijgt.

Op deze manier kunnen ze bepalen of dit het product is waarnaar ze op zoek zijn, zonder dat ze hoeven te wachten totdat de rest van de pagina is geladen.

Beoordeling tellen

Het aantal beoordelingen springt naar de beoordelingen onder de productdetails.

Dit kleine detail kan zeer waardevol zijn voor de 79% van de smartphoneconsumenten die hun telefoon gebruiken om te helpen met winkelen, en misschien zelfs een verkoop doen of breken.

Hoeveelheidsveld, vervolgkeuzemenu en knop Toevoegen aan winkelwagentje

Share-knop

Het delen van inhoud en producten op sociale netwerken kan een geweldige manier zijn om de bekendheid te vergroten. Houd het simpel met één knop.

De voettekst

Voettekstnavigatie

Toegang geven tot de navigatie op de hoofdsite is een goede manier voor de gebruiker om naar een andere sectie te springen en te voorkomen dat deze op een dood spoor blijft.

Klantenservice nummer en e-mail

Vergeet niet dat telefoons bellen! De bezoeker heeft mogelijk een vraag over het product en de mogelijkheid om snel contact op te nemen met een klantenservice kan precies zijn wat ze nodig hebben om een ​​aankoopbeslissing te nemen.

Terug naar boven Link

Nogmaals, het draait allemaal om gebruikerservaring en gemak!

Bronnen

  • Factsheet over mobiele technologie – pewinternet.org
  • Mobiel internetgebruik en trends in gebruikersgedrag – madmobilenews.com
  • MobiForge – mobithinking.com
  • Waarom 2013 het jaar is van responsive webdesign – mashable.com
  • Anatomie van een mobiel-eerste responsief webontwerp – bradfrostweb.com
  • Hoe Fluid Grids werken in responsive webdesign – 1stwebdesigner.com
  • Beyond Media Queries: Anatomy of a Adaptive Web Design – slideshare.net
  • Wat is responsive webdesign eigenlijk? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map