Hoe ontwerp je een responsive website?
Handleiding voor de ontwerper
versie 11 - 8 september 2020
Hoe ontwerp je een responsive website?
Handleiding voor de ontwerper
versie 11 - 8 september 2020
Inhoud
1. Responsiveness 4
1.1 Zo ontwerp je responsive met Bootstrap 4
1.2 Tussenruimtes en hoogtes 6
1.3 Volgorde van elementen 7
2. Fonts 8
3. Interactieve elementen 10
3.1 Links 10
3.2 Mouse-over effecten 10
4. Menu 12
4.1 Sticky menu 12
4.2 Uitklap 12
4.3 Menu actieve pagina 13
4.4 Mobiele menu 13
4.5 Overige elementen 14
5. Share buttons en social media links 15
6. Iconen 16
6.1 Font Awesome 16
6.2 Andere iconenbibliotheken 16
7. Favicons 17
8. Aanleveren 18
9. Afbeeldingen 19
Over Go2People Websites 20
1. Responsiveness
Een moderne website is responsive, zodat hij zich automatisch aanpast aan het beeldscherm van de bezoeker. Dus iemand op een mobiele telefoon of tablet krijgt een passende weergave speciaal afgestemd op zijn scherm.
Om responsive te ontwerpen, dien je gebruik te maken van een grid. Bij Go2People Websites werken wij met Bootstrap http://getbootstrap.com/css/#grid-options. Een ontwerp dat binnen het grid is ontworpen kunnen wij pixelperfect omzetten naar een responsive website.
Wanneer een ontwerp (deels) buiten het grid wordt ontworpen, kan de uiteindelijke website afwijken van het ontwerp. Download hier het grid in Photoshop of Sketch formaat.
1.1 Zo ontwerp je responsive met Bootstrap
1. Download hier https://hackerthemes.com/bootstrap-4-grid-psd/ het Bootstrap-grid voor Adobe Photoshop.
2. Het design dient op 1410 px breedte te worden ontworpen, in 12 kolommen. Elke kolom heeft aan beide zijden 15 px ruimte; de marge tussen twee kolommen is daarom 30px. De maximale zichtbare breedte is dus 1440 px.
3. Het is niet de bedoeling dat er content buiten de container (op de grijze zones) wordt geplaatst, met uitzondering van achtergrondkleuren. Achtergronden kunnen zowel in de kolom als buiten de kolom worden gebruikt. Binnen een kolom kan extra marge worden gecreëerd.
4. Bootstrap heeft ook een optie om de container de volledige browserbreedte mee te geven. De algemene kolom-marges blijven dan wel behouden.
Een voorbeeld als je twee kolommen browserbreed (“fluid”) wilt plaatsen: dan is iedere kolom
1980/2 (helft van volledige breedte, bij een resolutie van 1980 breed) minus 15x2 (marges links en rechts)
= 610px Hoe het wel moet
Hoe het niet moet
Volledige browserbreedte
1.2 Tussenruimtes en hoogtes
Houd rekening met ruimtes. Er dient genoeg ruimte te zitten tussen verschillende elementen, zodat de gebruiksvriendelijkheid van het ontwerp op alle soorten (mobiele) schermen gewaarborgd blijft.
Zorg ook voor genoeg ruimte wanneer teksten of elementen variabel zijn en dus langer kunnen worden. Teksten dienen dus niet in elementen met een maximale hoogte “gepropt”
te worden.
Omdat de plek van teksten en afbeeldingen variabel is, moet je ontwerp niet gebaseerd zijn op vaste hoogtes.
Variabele hoogtes Vaste hoogtes
1.3 Volgorde van elementen
Op kleine schermen (zoals op mobiele telefoons) komen elementen onder elkaar te staan in plaats van naast elkaar:
Als je wil, kun je aangeven in welke volgorde je de verschillende elementen (breakpoints) wil tonen als ze in de mobiele versie onder elkaar komen te staan. De developer kan dit dan instellen in Bootstrap.
Desktopversie Mobiele versie
Breakpoints in custom volgorde
2. Fonts
De webbouwer moet alle teksten in het ontwerp kunnen bewerken, zodat hij het font, de font-size en de interlinie kan zien. Gebruik dus alleen bewerkbare teksten.
Fonts op het web werken met hele pixels, dus gebruik geen halve pixels in je ontwerp.
Houd er rekening mee dat niet alle fonts zonder meer gebruikt mogen worden zonder licentie. Daarbij is er een verschil tussen licenties voor gebruik op een computer en webfont- licenties. Gebruik voor je ontwerp bij voorkeur een font dat beschikbaar is via Google Fonts http://www.google.com/fonts, dat kan altijd licentievrij op een website worden geïmplementeerd. Gebruik je een ander font, zorg dan dat je over de juiste licentie beschikt en lever het font aan als webfont.
Hele pixels Halve pixels
Hoe gaat dat in zijn werk?
3. Interactieve elementen
3.1 Links
Het is belangrijk om een link goed en duidelijk aan te geven in het ontwerp. Dit kan bijvoorbeeld door middel van een kleur of door de link te onderstrepen of bold te maken.
Voorbeelden:
Klik hier voor meer informatie Klik hier voor meer informatie Klik hier voor meer informatie
3.2 Mouse-over effecten
Een goed ontwerp bevat ook de mouse-over effecten die op de website te zien zullen zijn.
Wat doen buttons als de muis erboven hangt? En welke kleur krijgen links als je je muis erop houdt? Veranderen afbeeldingen van kleur bij een mouse-over (bijvoorbeeld van zwart-wit naar full color)? Een verandering van de font weight van tekst bij een mouse-over (bijvoorbeeld van normal naar bold) is niet aan te raden, want dat zorgt met name op mobiel voor verspringingen.
Voorbeelden:
Voor hover Na hover
Voor hover Na hover
Voor hover Na hover
Voor hover Na hover
4. Menu
Een website-ontwerp omvat ook het hoofdmenu dat bij een website bovenin beeld staat.
4.1 Sticky menu
Bepaal in je ontwerp of het menu al dan niet “sticky” is: bij een sticky menu blijft het menu altijd boven in beeld staan, ook als de gebruiker naar beneden scrolt op de website. Een sticky menu zorgt ervoor dat de gebruiker altijd makkelijk kan navigeren, maar het kan een sta-in-de-weg zijn als het te groot is. Een oplossing hiervoor is om het menu in een verkleinde versie te laten staan als iemand naar beneden scrolt, zoals op de eigen website van Go2People: https://go2people-websites.nl/ . Neem in zo’n geval ook de verkleinde versie van het menu op in je ontwerp.
Voorbeeld St Josephs
Uitklap 4.2
Het is belangrijk om alle lagen van submenu’s of dropdown-menu’s in je ontwerp op te nemen; dus niet alleen het hoogste niveau maar ook de uitklap.
Voor scrollen Na scrollen
4.3 Menu actieve pagina
Een gebruiker moet in een menu kunnen zien wat de actieve pagina is waar hij zich op dat moment bevindt. Dit kun je doen met bijvoorbeeld een onderstreping of een highlightkleur.
4.4 Mobiele menu
Voor mobiele menu’s gebruiken wij bij Go2People Websites een standaard off-canvas mobiele opzet, waarbij het menu het hele scherm beslaat. Dit werkt ook op grotere mobiele schermen en tablets. Hier hoef je geen apart ontwerp voor aan te leveren.
Onderstreping
Highlightkleur
Voor uitklap Na uitklap
4.5 Overige elementen
Een ontwerp kan diverse soorten interactieve elementen bevatten. Denk aan het inzoomen op afbeeldingen, bewegende omkaderingen, elementen die schuin gedraaid worden,
stuiterende onderdelen, elementen die met een fade in of fade out verschijnen en verdwijnen of inschuiven vanaf de zijkant.
Voorbeelden:
The Cool Club verkoopt kaartspellen. Op hun website zie de kaarten bij een mouse over uit het pakketje komen.
Als je inlogt op de site van Readme (een platform voor interactieve documentatie), zie je een uiltje dat zijn ogen bedekt als je je wachtwoord invoert.
Overleg in zulke gevallen wel altijd met je webbouwer om te controleren of wat je wil ook technisch mogelijk is. Een overzicht van basis-effecten die sowieso technisch mogelijk zijn, is te vinden op animate.css https://daneden.github.io/animate.css/.
Houd ook rekening met de wensen van je klant: opvallende effecten zijn niet geschikt voor Voor Na
Voor Na
5. Share buttons en social media links
Veel websites bevatten buttons waarmee naar verschillende soorten social media wordt gelinkt. Houd hierbij rekening met het volgende onderscheid:
Social share buttons
Social share buttons stellen een bezoeker in staat om content van de website te delen via zijn eigen social media accounts. Als de bezoeker op een social share button klikt van bijvoorbeeld Facebook, dan opent zijn eigen Facebook-account en krijgt hij een automatisch gegenereerd bericht met daarin de link naar de betreffende pagina op de website, dat hij vervolgens zelf kan posten. Social share buttons zijn op dit moment beschikbaar voor de volgende media: Facebook, LinkedIn, Twitter, Pinterest en WhatsApp. Instagram biedt momenteel helaas nog geen API voor social share buttons.
Volg ons buttons
Een volg ons button verwijst naar een social media pagina van de opdrachtgever. Als een bezoeker op een volg ons button klikt van bijvoorbeeld Facebook, dan wordt hij
doorverwezen naar de Facebookpagina van het bedrijf waar de website van is. Zulke buttons kunnen bijvoorbeeld ook naar het Youtube-kanaal of het Instagram-account van een bedrijf verwijzen.
6. Iconen
6.1 Font Awesome
Font Awesome http://fontawesome.io/icons/ biedt een uitgebreide verzameling iconen die perfect op websites geïmplementeerd kunnen worden. Je doet de webbouwer er een groot plezier mee als je Font Awesome gebruikt voor je iconen. Die zijn namelijk:
• Vector-based
• Retina ready
• Zelf stijlbaar
• Voor alles te gebruiken (social media, navigatie, vergrootglas)
6.2 Andere iconenbibliotheek
Bij Go2People hebben wij een voorkeur voor FontAwesome, maar er zijn ook andere iconenbibliotheken, zoals Fontello en Typicons.
7. Favicons
Een website-ontwerp moet altijd een favicon bevatten: het icoontje dat je in je browser op het tabje van de betreffende website ziet. Dit kan het bedrijfslogo zijn of een speciaal logo voor de website. Bij apps wordt dit icoon ook gebruikt als logo in de App Store.
Een favicon dient 2048 x 2048 pixels te zijn en dient los te worden aangeleverd als .png- bestand.
8. Aanleveren
Om het ontwerp pixelperfect te kunnen vertalen naar een website, is een pdf-versie van een ontwerp niet geschikt. Lever daarom altijd de oorspronkelijke ontwerpbestanden aan.
De volgende bestandsformaten zijn geschikt voor webbouwers:
Sketch (.sketch) Adobe XD (.xd)
Adobe Photoshop (.psd)
Speciale objecten in het ontwerp, zoals logo’s, kunnen het beste los als vectorbestand worden aangeleverd in Illustrator (.ai of .eps).
9. Afbeeldingen
Voor de website-bouwer is het fijn als je alle afbeeldingen die in het ontwerp voorkomen, los aanlevert. Zorg daarbij dat je alleen afbeeldingen gebruikt die rechtenvrij zijn (of waar de klant de juiste rechten voor heeft). Vervang afbeeldingen waar je geen rechten voor hebt door een dummy-afbeelding. In geval van inbreuk op auteursrecht kan de schadevergoeding hoog oplopen.
Lever de afbeeldingen aan in een resolutie van ten minste 72 dpi.
Met Google Image Search kun je bij geavanceerd zoeken bij ‘gebruiksrechten’ instellen dat je alleen wilt zoeken op afbeeldingen die onbeperkt te gebruiken en delen zijn voor commercieel gebruik.
Ook kun je Stockphotos gebruiken waar jij zelf (of de klant) de rechten van hebt aangekocht voor commercieel gebruik.
Over Go2People Websites
Wij zijn een strategisch internetbureau voor webdesign & webdevelopment. Ons kantoor is gevestigd in het centrum van Amsterdam, aan de Nieuwe Herengracht. Wij helpen bedrijven en non-profitorganisaties om online een goede eerste indruk te maken. Dit doen wij door het ontwerpen, bouwen, beheren en hosten van professionele websites. Websites die toegankelijk en persoonlijk zijn, vertrouwen uitstralen en uitnodigen tot contact. Door middel van een systeem als WordPress kun je de website zelf gemakkelijk onderhouden.
Heb je naar aanleiding van het lezen van dit e-book nog vragen, of miste je iets? We horen het graag, want we willen het e-book graag verder verbeteren.
Ben je op zoek naar ondersteuning in het ontwerp of de bouw van een website? Bel ons gerust, we helpen je met veel plezier.
Hartelijke groeten,
Wim Feijen
Algemeen directeur +31(0)20 7370378 wim@go2people.nl
