Hoe ontwerp je een responsive website? Handleiding voor de ontwerper

Transcriptie

1 Hoe ontwerp je een responsive website? Handleiding voor de ontwerper versie 1-16 oktober 2018

2 Hoe ontwerp je een responsive website? Handleiding voor de ontwerper versie 1-16 oktober 2018

3 Inhoud 1. Responsiveness Zo ontwerp je responsive met Bootstrap Tussenruimtes en hoogtes Volgorde van elementen 7 2. Fonts 8 3. Interactieve elementen Links Mouse-over effecten Menu Sticky menu Uitklap Menu actieve pagina Mobiele menu Overige elementen Share buttons en social media links Iconen Font Awesome Andere iconenbibliotheken Favicons Aanleveren Afbeeldingen 19 Over Go2People Websites 20 Handleiding voor de grafisch vormgever 3

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 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 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. Deel dit e-book: 4

5 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. Hoe het wel moet Hoe het niet moet 4. Bootstrap heeft ook een optie om de container de volledige browserbreedte mee te geven. De algemene kolom-marges blijven dan wel behouden. Volledige browserbreedte 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 Handleiding voor de grafisch vormgever 5

6 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 Deel dit e-book: 6

7 1.3 Volgorde van elementen Op kleine schermen (zoals op mobiele telefoons) komen elementen onder elkaar te staan in plaats van naast elkaar: Desktopversie Mobiele versie 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. Breakpoints in custom volgorde Handleiding voor de grafisch vormgever 7

8 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. Hele pixels Halve pixels 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 webfontlicenties. Gebruik voor je ontwerp bij voorkeur een font dat beschikbaar is via Google 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. Deel dit e-book: 8

9 Hoe gaat dat in zijn werk? Handleiding voor de grafisch vormgever 9

10 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 Deel dit e-book: 10

11 Voor hover Na hover Voor hover Na hover Voor hover Na hover Handleiding voor de grafisch vormgever 11

12 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: Neem in zo n geval ook de verkleinde versie van het menu op in je ontwerp. Voorbeeld St Josephs Voor scrollen Na scrollen 4.2 Uitklap 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. Uitklapmenu Machinist Grondverzet Deel dit e-book: 12

13 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. Onderstreping 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. Voor uitklap Na uitklap Handleiding voor de grafisch vormgever 13

14 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. Voor Na 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. Voor Na 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 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. Deel dit e-book: 14

15 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. Handleiding voor de grafisch vormgever 15

16 6. Iconen 6.1 Font Awesome Font Awesome 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. Deel dit e-book: 16

17 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.pngbestand. Handleiding voor de grafisch vormgever 17

18 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). Deel dit e-book: 18

19 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. Handleiding voor de grafisch vormgever 19

20 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) Deel dit e-book: 20