Responsive webdesign

Een website moet bijdragen aan bedrijfsdoelen.

hampshire-hotels-nieuwe-responsive-websiteHet design van uw website kan in grote mate bijdragen aan het succes daarvan.

Belangrijke factoren hierbij zijn:

  • Gedegen, planmatige aanpak
  • De vorm staat in dienst van de functie
  • Lay-out en kleur sturen op actie bezoeker
  • Consequent kleur- en vormgebruik

Internet heeft een zodanig sterke positie ingenomen in onze maatschappij dat vrijwel elk bedrijf een website kan inzetten om bij te dragen aan het halen van bedrijfsdoelen. Bezoekers van de site zoeken bevestiging, doen aankopen of een aanvraag of reservering.
DUS: u wilt dat bezoekers converteren naar bijvoorbeeld boekers, aanvragers, lezers, of inschrijvers.

Werkwijze

New Fountain werkt volgens een duidelijk omschreven stappenplan bij het ontwikkelen van een webdesign. Dit stappenplan waarborgt de kwaliteit van het design en het halen van de gestelde deadline. U als klant wordt nauw betrokken in het proces zodat u vooraf zeker weet dat u aan het eind van de rit een webdesign heeft dat voldoet aan al uw eisen en wensen.

Siteplan

Afhankelijk van uw wensen en de omvang/complexiteit van uw website of webshop, kunnen deze conversiedoelen ook door New Fountain samen met u worden vastgesteld. In een siteplan worden, na een kritische analyse, uw belangrijkste conversiedoelstellingen vastgesteld en onderbouwd. Het plan geeft een heldere inzage in de functionaliteit en uitstraling van het te ontwikkelen webdesign.

Wireframes

Nadat duidelijk is wat uw website moet gaan toevoegen aan het communicatie- en verkoopproces, stellen we allereerst een wireframe op. Dat is een schets waarin de layout van uw website wordt vastgesteld. Deze wireframes geven u een volledig beeld van alle functie en content die op de website zal worden gaan aangeboden. Een wireframe is, in tegenstelling tot een design, snel en eenvoudig aan te passen.

Webdesign

Na uw akkoord op de wireframes, gaan we over tot de designfase. Hierin wordt vorm, beeld en kleur toegevoegd aan het wireframe; een en ander uiteraard binnen uw bedrijfshuisstijl. De kleuren, foto’s en vormen worden zodanig toegepast dat het oog van de bezoekers zoveel mogelijk naar de juiste plaats wordt geleid.

Responsive webdesign

Het aantal smartphones, operating systems en schermresoluties neemt in snel tempo toe. Het is niet efficiënt om voor elk van deze combinaties een aparte versie van de website te ontwikkelen. Het is verstandiger de website “responsive” te maken. Dit houdt in dat de website, afhankelijk van het apparaat dat de site toont, zich automatisch aanpast aan de schermgrootte. Naast veranderingen in lay-out kunnen ook lettertypes, afbeeldingformaten, functionaliteiten en contentblokken anders gerangschikt of aangepast worden. Doel van deze aanpak is voor bezoekers op alle apparaten een optimale sitebeleving aan te bieden en daarmee de kans op conversie te vergroten.

New Fountain levert al haar designs en websites responsive op.

Denken vanuit de content/context en niet vanuit het formaat

Ondanks dat de formaten in 3 groepen zijn ingedeeld, dienen we uit te gaan van de contentbehoefte van de gebruiker bij het inrichten van de verschillende schermviews en niet vanuit de beperkingen die het apparaat ons oplegt. Wat is belangrijk voor een smartphone bezoeker? En wat voor een desktop bezoeker? Als leidraad hanteren we de conversiedoelen en de contentbehoefte zoals gedefinieerd in de briefingsfase.

Om het design op de 3 genoemde formaten goed weer te geven zullen er 4 dingen gebeuren:

  1. Verschuiven
    Per element wordt gekeken welke prioriteit dit heeft. Op basis van de contentbehoefte en sitedoelen wordt besloten welk element welke positie gaat innemen op een kleiner scherm.
  2. Verbergen
    Per element wordt gekeken welke prioriteit dit heeft. Op basis van de contentbehoefte en sitedoelen wordt besloten welk element wordt verborgen op een kleiner scherm. Deze content wordt ontsloten na een klik van de gebruiker.
  3. Verwijderen
    Per element wordt gekeken welke prioriteit dit heeft. Op basis van de contentbehoefte en sitedoelen wordt besloten welk element wordt verwijderd op een kleiner scherm.
  4. Toevoegen
    Specifieke mobiele functionaliteit (zoek een hotel in de buurt o.b.v. GPS functie of klik hier om te bellen op een smartphone) kan worden toegevoegd aan het design.

Uitgangspunten bij responsive webdesign voor mobiele apparaten

Om een succesvol mobiel design te maken zal New Fountain zoveel mogelijk rekening houden met onderstaande uitgangspunten:

  1. Korte laadtijd
    Overbodige scripts en te grote afbeeldingen kunnen zorgen voor een lange laadtijd via een mobiele verbinding. Scripts worden uitgeschakeld waar mogelijk in de mobiele versie en afbeeldingen verkleind naar het juiste formaat.
  2. Vaste navigatie
    Op elke pagina is een houvast voor de bezoeker vindbaar die hij kan gebruiken als navigatie. Op smartphones wordt deze navigatie waarschijnlijk verborgen achter een knop als “bekijk hier…” o.i.d. om ruimte te besparen.
  3. Telefoonnummer
    Op elke pagina van de website wordt idealiter een telefoonnummer getoond. De mobiele bezoeker die niet verder wil surfen kan hiermee met 1 druk op het nummer iemand aan de lijn krijgen die hem verder helpt. Alle telefoonnummers zijn altijd clickable teneinde direct te kunnen bellen.
  4. Snelle route naar boeking of aankoop
    Als u een webshop of boekingssite heeft, is op de mobiele versie van uw website is het genereren van boekingen of aankopen ook het primaire doel. Op een tablet kan de bezoeker worden geïnspireerd met grotere foto’s en acties, op een smartphone zullen we ons nog meer richten op het zo gebruiksvriendelijk mogelijk aanbieden van het aankoop- of boekingsproces voor de bezoeker met een concrete behoefte.
  5. Grote knoppen
    Mobiele bezoekers gebruiken daadwerkelijk hun duimen om te navigeren. De aangeboden knoppen zijn groot genoeg om deze makkelijk te kunnen aanklikken en links worden ver uit elkaar gezet zodat men niet per ongeluk de verkeerde link aanklikt en met een onverwacht resultaat wordt geconfronteerd.
  6. Mobile theme off
    Op elke pagina wordt een link aangeboden naar de desktopversie van de website. Sommige gebruikers hebben de desktopversie eerder gezien en weten in de mobiele versie bepaalde content niet te vinden. Via deze functie kunnen ze dan de hen reeds bekende route terugvinden en gebruiken.

Enkele van onze meest recente webdesigns zijn: