Hoe ontwerp je een responsive website?...Een website-ontwerp moet altijd een favicon bevatten: het...

Hoe ontwerp je een responsive website?Handleiding voor de ontwerper

versie 1 - 16 oktober 2018

Handleiding voor de grafisch vormgever 3

Inhoud

1. Responsiveness 41.1 Zo ontwerp je responsive met Bootstrap 41.2 Tussenruimtes en hoogtes 61.3 Volgorde van elementen 7

2. Fonts 8

3. Interactieve elementen 103.1 Links 103.2 Mouse-over effecten 10

4. Menu 124.1 Sticky menu 124.2 Uitklap 124.3 Menu actieve pagina 134.4 Mobiele menu 134.5 Overige elementen 14

5. Share buttons en social media links 15

6. Iconen 166.1 Font Awesome 166.2 Andere iconenbibliotheken 16

7. Favicons 17

8. Aanleveren 18

9. Afbeeldingen 19

Over Go2People Websites 20

Deel dit e-book: https://go2people-websites.nl/ 4

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.

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 1140 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 contentbreedte is dus 1110 px.

Kolommen kunnen worden samengevoegd om bredere kolommen te creëren.


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 LinksHet 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 informatieKlik hier voor meer informatie

3.2 Mouse-over effectenEen 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. MenuEen website-ontwerp omvat ook het hoofdmenu dat bij een website bovenin beeld staat.

4.1 Sticky menuBepaal 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

4.2 UitklapHet 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

Uitklapmenu Machinist Grondverzet


4.3 Menu actieve paginaEen 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 menuVoor 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 elementenEen 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 alle soorten websites. Een opdrachtgever kan een voorkeur hebben voor een modern, een rustig of juist een dynamisch ontwerp. Het is dus zaak om goed te overleggen over het gebruik van interactieve elementen.

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 buttonsSocial 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 buttonsEen 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 AwesomeFont 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 iconenbibliotheekBij 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 FeijenAlgemeen directeur

+31(0)20 [email protected]

Hoe ontwerp je een responsive website?...Een website-ontwerp moet altijd een favicon bevatten: het...

Documents

Transcript of Hoe ontwerp je een responsive website?...Een website-ontwerp moet altijd een favicon bevatten: het...