Webdesign tips
door Aart Jan Bergshoeff – update 2015
Tip 1: doorzoek deze pagina met Control-F (Command-F op de Mac).
Hippe video background, fullscreen HTML5, Hero image
Zie deze full screen video background. Of deze hero met full screen hoogte. Resize het scherm!
Lazy Load
Als je pagina heel veel beeld bevat, bijvoorbeeld bij een lange one-pager, kan je site traag worden. Met een Lazy Load script kun je de plaatjes pas laden tijdens het scrollen.
Contactformulier
Kijk hier voor voorbeelden van alle HTML die je in een formulier kan gebruiken. Bekijk de code daarvan voor extra uitleg (in de comments).
Een formulier kan je versturen met een script (bijvoorbeeld een PHP-script). Dat script moet je ook uploaden naar je server, want een script werkt niet lokaal (vanaf je eigen computer) maar alleen vanaf de server.
Een voorbeeld van zo'n PHP-script is dit contactformulier.
Of dit uitgebreidere PHP-script, die de ingevulde velden ook checkt.
Of deze met Captcha erbij. Lees hier meer info over PHP-scripts bij contactformulieren.
Je kan ook een online service gebruiken, bijvoorbeeld Formspree. In jouw formulier wijzig je dan alleen de action. Dit is ideaal als je website al een compleet formulier bevat, maar geen script erbij heeft. En dat is vaak het geval.
Social media buttons
Social media integreren op je site kan op verschillende manieren. Sharing buttons maken het voor de bezoeker makkelijk om je pagina snel te delen. Je kan die toevoegen met online services zoals Addthis of Sharethis.
Als je al eigen ikonen hebt (of ze staan al perfect vormgegeven in je site), dan kun je ook de links aanpassen door de sharing-code toe te voegen. Je hebt dan geen Addthis of Sharethis nodig. Van je Facebook-ikoon maak je bijvoorbeeld met deze code een link (verander alleen jouwsite):
<a href="http://www.facebook.com/sharer.php?u=http://jouwsite.nl" >
Hier jouw ikoon</a>
Elk social media systeem heeft zijn eigen code voor sharing, zie hier uitleg met alle voorbeelden. Twitter, Linkedin, Google+ en Email gaan bijvoorbeeld als volgt (verander jouwsite, je tekst en jouwtag):
<!-- Twitter --> <a href="http://twitter.com/share?url=http://jouwsite.nl&text=Je tekst&hashtags=jouwtag"> Hier jouw ikoon</a> <!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://jouwsite.nl"> Hier jouw ikoon</a>
<!-- Google+ --> <a href="https://plus.google.com/share?url=http://jouwsite.nl"> Hier jouw ikoon</a> <!-- Email --> <a href="mailto:?Subject=Je tekst&Body=Je tekst"> Hier jouw ikoon</a>
Het grote voordeel van deze methode is dat er geen scripts nodig zijn, dat je de vormgeving volledig in de hand hebt, dat het supersnel is, en dat het niet afhankelijk van externe services.
Een Twitter-feed op je website toevoegen kan met Twitter Widgets. In deze feed kan je bijvoorbeeld je laatste tweets afbeelden, of tweets over een bepaald onderwerp. Je hoeft alleen wat HTML-code in te plakken. Op een vergelijkbare manier kun je ook een Facebook Activity feed op je website zetten.
Web fonts, Google fonts
Het lijstje met web safe fonts is maar kort: dat zijn fonts die iedereen heeft. Als je andere fonts in je website wil gebruiken dan is de beste en makkelijkste manier Google fonts. Bekijk daar ook de handleiding. Hier ook wat inspirerende voorbeelden.
Wil je fonts gebruiken die niet bij Google fonts te vinden zijn, dan kan je fonts omzetten naar webfonts, bijvoorbeeld met deze web font generator of die op FontSquirrel. Die zet de fonts dan om in o.a. woff-, eot-, ttf- en svg-formaat, zodat het in alle browsers werkt.
Op aartjan.nl/fonts staat een voorbeeld van een eenvoudige manier om fonts te laten zien, of te testen, met een input type=text of textarea.
Ikonen als webfonts
Ikonen in HTML5-templates zijn vaak fonts, dus geen png-plaatjes maar schaalbare vector-bestanden. Op Font-Awesome of op icomoon.io meer info daarover, daar kun je ook je eigen ikonen uploaden en converteren naar een webfont via de icomoon App. En hier een lijst met meer van dat spul.
Tooltips met CSS en/of javascript
Je kan tooltips (de pop-ups die verschijnen als je ergens overheen hovert) met javascript verrijken. Het kan ook met alleen maar css.
Plaatjes in een pop-up (Lightbox)
Fancybox en Lightbox2 worden veel gebruikt voor galeries en portfolio's. Je kan dan op plaatjes klikken voor een vergroting, in een pop-up.
Maak een map hr en zet daarin de grote plaatjes. Die zijn bijv 1200px, via Photoshop > Save for Web (⌘-Alt-Shift-S). In een map lr zet je de kleine plaatjes. Die zijn bijv 200 x 200 px, via Photoshop > Crop (links-bovenaan in de Options Bar afstellen). Dan weer Save for Web. En dan:
1. Zet de Lightbox-CSS in de <head> vlak boven je eigen CSS
<link href="http://gameschool.nl/css/lightbox.css" rel="stylesheet">
2. Zet deze 2 scripts onderaan, vlak voor </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://gameschool.nl/js/lightbox.min.js"></script>
3. Zet een link om het plaatje met een data-lightbox en data-title
<a href="hr/1.jpg" data-lightbox="groep1" data-title="Hier je tekst"> <img src="lr/1.jpg" width="200" height="200" alt=""/></a>
In een groep plaatjes (waar je met de pijltjestoetsen doorheen kan) gebruik je telkens dezelfde waarde bij data-lightbox. Bijschriften kan je per plaatje doen met data-title.
Onder het script kun je nog opties toevoegen zoals:
<script>
lightbox.option({
'resizeDuration': 400,
'showImageNumberLabel': true,
'fadeDuration':400,
})
</script>
Bonus-tip: extra styling, + animatie op de hover
.gal img {border-radius:10px; transition:all 0.5s}
.gal img:hover {transform: scale(1.2) rotate(10deg);}
Zie hier een voorbeeld, en zie meer uitleg op de website van Lightbox2. Er zijn ook nog andere lightbox-scripts. Fancybox heeft ook video, Poptrox is ook een goede, Fresco is responsive (maar zonder swipe), en dan is er Photoswipe, die kan ook fullscreen swipen. Die kun je ook op andere manieren gebruiken, zie bijvoorbeeld bodarglas.nl waar het een achtergrondslider op de homepage is, of aartjan.nl/mag waar het een standalone App wordt, ofwel een eenvoudige ePub of iPad-magazine. Extra info en opties.
Sliders
Probeer eerst deze Flexslider of deze Slippry. Op menucool.com staan nog meer sliders. Nivo slider is eenvoudig en goed en mooi, en ook nog eens gratis, zonder watermerk. De populaire Wow-slider heeft veel opties en een bijbehorende programma, voor Mac & PC. De gratis versie heeft een watermerk. De Rhinoslider heeft een handige generator waarmee je jouw instellingen online kan afstellen, en vervolgens de gegenereerde code kan downloaden.
Niet gratis, maar wel supercompleet met alles-erop-en-eraan (alleen keyboard control ontbreekt nog) is de Master Slider. Hier vind je nog een aantal sliders.
Tegenwoordig wordt het overigens afgeraden om een slider op je website te zetten. Of je moet het heel simpel en helder houden.
Responsive design,
Web App, media query, Retina, meta viewport
Een responsive website ziet er op mobiel en tablet ook goed uit, dankzij een aangepast design voor verschillende schermformaten. Bekijk je site op een mobiel, eventueel via een online service als mobiletest.me of quirktools.com/screenfly. Bekijk ook deze pagina en versmal het scherm. Ga naar aartjan.nl/responsive voor alle verdere informatie. Klik daar in het menu op Responsive en vergelijk dat met Adaptief (een schalend ontwerp). Kijk ook op ajsites.nl/responsive.
Hamburger menu
Op mobiel zie je tegenwoordig vaak een hamburger menu, ook wel off-screen menu genaamd. Die kan je met pure CSS maken, of met Javascript. Hier nog een. Meer uitleg in het Nederlands.
Google maps en panorama's
Je kan Google Maps tonen in je website, net als een Youtube-filmpje, door de HTML-code in te plakken. In het Menu bij Google Maps kies je dan voor Kaart insluiten. Je kan zo ook Streetview direct tonen in je website: sleep het gele poppetje op een straat, en kies in het uitklapmenu met de 3 puntjes voor "Insluiten".
Het is zelfs mogelijk om met de Google Maps API klikbare links of objecten in je map toe te voegen, maar dit is niet eenvoudig.
Panorama's kun je met behulp van Apps ook interactief tonen in je website, zoals met Panorama-360 van Teliport of met Sphere.
Er is nu ook 360 video, waar je interactief of met een VR-bril om je heen kan kijken. Deze 360 graden video's doen het voorlopig alleen in Chrome.
Multiple background-images in css
In de css van een background kan je meerdere waardes zetten, gescheiden met een komma, zodat je meerdere backgrounds in 1 div kan zetten.
De eerste waarde is voor het eerste plaatje.
Als er maar 1 waarde staat, geldt die waarde voor beide plaatjes.
Het eerste plaatje komt bovenop de tweede, qua z-index.
background-image:url(bg2.png), url(bg.jpg); background-size:5px 5px, cover; background-attachment:fixed;
Parallax scroll
Zie github.com/Prinzhorn/skrollr. Onderaan in de html is het Skrollr-script toegevoegd en gestart:
<script type="text/javascript" src="../js/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init({forceHeight: false});
</script>
En bij de div zelf zijn er nog 2 data-attributen toegevoegd:
<div id="header" data-0="background-position:0px -80px;" data-100000="background-position:0px -60000px;">
CSS Box model
De width van een element is exclusief borders en padding. Dat maakt het berekenen van de breedte lastig en soms onmogelijk: je kan % en pixels bijvoorbeeld niet bij elkaar optellen. Als je box-sizing toevoegt, dan is de width weer INCLUSIEF borders en padding:
box-sizing:border-box;
Zie de a:link in het menu: die zijn per stuk 25% breed, tesamen 100%. Maar ze hebben wel padding en borders in pixels! Zonder box-sizing kon dat niet.
Een div horizontaal centreren
Met text-align:center kun je alles wat daar binnen staat centreren. Een div of ander block-element kan je centreren met margin: 0 auto. De horizontale marge wordt dan automatisch aan beide kanten (left en right) hetzelfde.
#menu { width:800px;
margin:0 auto; }
As de div een abolute of fixed position heeft moet het anders:
#menu { position:fixed;
top:0;
left:50%;
width:800px;
margin-left:-400px; }
Een div verticaal centreren
Dit is iets ingewikkelder, maar het kan op veel manieren.
Of bekijk deze demo met display:table.
Er is ook nog een eenvoudige nieuwe manier met display:flex, zie
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS transition animatie
De eenvoudigste animatie is een transition, bijvoorbeeld bij een hover. Voeg dit toe aan de css van het element (bijvoorbeeld de a:link):
transition: all 0.5s;
Alle eigenschapen zoals die in de hover staan, worden nu in 0.5 sec geanimeerd, tijdens die mouse over. Zie als voorbeeld de knoppen in het menu hierboven (met alleen wat extra padding-bottom) of het plaatje hieronder. Je kan ook per eigenschap een transition aangeven, en er zijn veel opties. Meer info op W3-schools.
De HTML en CSS van bovenstaand voorbeeld is (de CSS is hier inline gebruikt):
<style>
.vergroot {transition: all 0.5s; }
.vergroot:hover {transform:rotate(-5deg) scale(1.8);} </style> <img src="smartchainguard7.jpg" class="vergroot" />
In de css wordt css transform gebruikt, met zowel een rotate als een scale. Wil je het als zoom effect (zie voorbeeld hieronder, het zogeheten Ken Burns effect) dan hoef je er alleen maar een extra div met vaste afmeting en met overflow:hidden omheen te zetten.
<style>
.zoom { overflow:hidden; width:100px; height:75px; }
</style>
<div class=zoom>
<img src="smartchainguard7.jpg" class="vergroot" />
</div>
CSS animation en @keyframes
Een andere manier van CSS-animatie is met keyframes. Die kan meteen worden uitgevoerd, zonder een hover te gebuiken, bij het laden van de pagina. Je voegt animation: toe aan de css van het element, je geeft het een naam (in dit voorbeeld myfirst) en een snelheid (in dit voorbeeld 2 seconden):
animation:myfirst 2s;Dan geef je met @keyframes aan wat de verschillende stappen (keyframes) zijn, met from en to of met percentages.
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
Er zijn veel opties en mogelijkheden, je kan bijvoorbeeld een delay aangeven door een tweede tijd te vermelden achter de eerste. Zie de betreffende pagina op W3-schools. Hier nog een voorbeeld van een fade in met opacity:
body {animation: fadein 2s;}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
Ditzelfde voorbeeld, maar dan nu voor alle browsers, met alle vendor prefixes:
body {
-webkit-animation: fadein 1s; /* Safari etc*/
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}
/* Firefox < 16 */
@-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: .1; }
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
Functies toevoegen met Javascript
Animaties kunnen worden uitgevoerd bij het laden van de pagina of bij een hover, maar als je iets wil animeren bij een klik op een ander item, of de animatie pas wil uitvoeren als je er naartoe scrollt, dan heb je Javascript nodig. Op justinaguilar.com wordt dat perfect uitgelegd en kan je het css-framework en de scripts downloaden. In die bestanden zitten al allerlei soorten animaties, zodat je ze alleen nog maar hoeft aan te roepen.
Scroll animatie: jQuery scrollto, Parallax
Een vorm van animatie is een scrollto-script. Bijvoorbeeld in één lange pagina, waar je via het menu met een animatie naar een plek scrollt. Bekijk ScrollMagic waar allerlei scroll- en parallax-effecten inzitten. Scroll animatie kan ook met pure CSS, maar voorlopig helaas alleen in Firefox.
Als jQuery al geladen (zie hieronder) kan je onderstaand script ONDERAAN je code inplakken en aanpassen. Als je dan op .hero klikt, scroll je naar #wrapper. Meer info hierover.
<script>
$(".hero").click(function() {
$('html,body').animate({
scrollTop: $("#wrapper").offset().top},
'slow');
});
</script>
jQuery laden vanaf Google server
jQuery is een bibliotheek met Javascript-functies. Je kan deze jQuery library op je server neerzetten en aanroepen, of je kan die van Google gebruiken door dit in de <head> te zetten:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Css-filters: o.a. kleur, zwart-wit, blur
Je kan css filters gebruiken om een plaatje te filteren, bijvoorbeeld in zwartwit of met een blur tonen (hier geanimeerd met een transition). In dit voorbeeld wordt het plaatje pas in kleur bij een hover:
.zw { filter: grayscale(1); }
.zw:hover { filter: grayscale(0); }
Noot: ipv (1) of (0.5) of (.5) kun je ook % gebruiken (100%) of (50%)
Noot 2: in dit voorbeeld zit er ook nog een opacity:0.4 filter bij
Noot 3: vendor prefixes zoals -webkit- zijn nog steeds nodig
In de HTML is er bij de img het attribuut class="zw" toegevoegd. Je kan ook ALLE images in een bepaalde div het filter meegeven:
#divnaam img { filter: grayscale(100%); }
Het tweede voorbeeld met de blur is vergelijkbaar
(hier even met -webkit-prefix):
.blur { -webkit-filter: blur(0); transition: all .5s; }
.blur:hover { -webkit-filter: blur(5px);}
Google Webdesigner
Google heeft het gratis programma Webdesigner gemaakt om eenvoudig en snel animaties te maken in HTML5 en CSS3.
Gratis HTML5 Responsive templates
Een responsive website ziet er op mobiel en tablet ook goed uit, dankzij een aangepast design voor kleine schermen. Er zijn veel responsive templates beschikbaar, zelfs gratis, en ook voor Wordpress. Zoek op "free HTML5 responsive templates" of kijk op html5up.net. Je kan elke website ook gewoon downloaden, bijvoorbeeld met "Bewaar als" in Safari. Zo'n Webarchive kun je uitpakken met Webarchive Extractor. Die bestanden kun je openen en bewerken in een editor als Dreamweaver.
Templates bewerken met Webinfo-venster
Als je templates gaat gebruiken is het handig om in Chrome of Safari het Ontwikkelmenu of wel Webinfovenster te gebruiken: Rechtsklik > Inspecteer element. Of Cmd-Alt-I. In Safari moet het wel aanstaan bij Voorkeuren > Geavanceerd > Toon Ontwikkel-menu.
Templates bewerken met Dreamweaver
Open de HTML (index.html) in Dreamweaver. De HTML-code kun je gewoon wijzigen. Zet het Window > CSS Designer aan, danx kun je de CSS opzoeken en wijzigen. Je klikt een element aan in de Design-preview, en het CSS Designer paneel toont van dat element alle CSS. Je kan daar alles wijzigen, of met Rechtsklik > Go to code naar de betreffende plek in de CSS-code gaan.
Masonry, filtered galleries
Als je een uitgebreide galerie of portfolio op 1 pagina wil tonen, dan is het handig om te kunnen filteren, op genre of op thema. Dat kan met Javascript (of jQuery, een Javascript library). Je kunt zo'n script hier vinden. Dat script doet ook Masonry (metselwerk): als de items verschillen in grootte wordt het passend in elkaar gemetseld, live on the fly. Een heel uitgebreid maar betaald script is de Cube Portfolio.
Open een nieuw venster (pop-up) met javascript
<a href="#" onclick="window.open('film1.html', 'Filmpje',
'width=600, height=338, left=200, top=200');"> Klik hier </a>
De link in dit voorbeeld opent, als een pop-up, een pagina, namelijk film1.html. In die pagina staat een filmpje. Op Chrome krijg je een address bar, die kan je niet meer uitzetten helaas. Het stukje achter onclick is javascript. Meer info.
De link in dit voorbeeld doet datzelfde maar dan gecentreerd op het scherm. Voor het centreren is een javascript gebruikt, dat in in de <head> is gezet:
<script>
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'width='+w+',
height='+h+', top='+top+', left='+left);
}
</script>
De HTML-code van die link was:
<a onclick="PopupCenter('film1.html','Filmpje',600,338);" href="#">
Breed scroll-venster met klikbare plaatjes
Elk plaatje is klikbaar naar een aparte pagina. De links staan om de plaatjes heen, en staan als geheel in een 1600 pixels brede div. Die div staat weer in een smallere div (100%) zodat de inhoud nu moet scrollen.
<div id=pano> <div style="width:1600px">
De style van de 2e div is hier inline neergezet (in de HTML), omdat je dan makkelijk de breedte kan aanpassen. De css van de eerste, smallere div is als volgt, en staat wel in de externe css:
#pano {width:100%; height:120px; overflow-y:hidden;}
Scrollbar permanent tonen in webkit
Op Mac OS X Lion en hoger kan je scrollbars uitzetten. Dan is helaas niet meer duidelijk dat je hier kan scrollen. Gelukkig kan je scrollbars permanent aanzetten en stylen voor webkit, ook alleen voor een specifieke div:
#pano::-webkit-scrollbar {
-webkit-appearance: none;
height: 7px;
background: rgba(0,0,0,.1);
}
#pano::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Coverflow javascript
Vroeger, in iTunes, had je Coverflow. Hier een voorbeeld van een javascript coverflow. Het script is gratis en eenvoudig te gebruiken en behoorlijk aanpasbaar, zie als voorbeeld aartjan.nl/recent.html.
Een geavanceerder, moderner script, met Wordpress-plugin en meer responsive, is de 3D Coverflow. Niet gratis, maar ook niet duur. Een andere is de Master Slider, die is nog uitgebreider en kun je ook als slider gebruiken, maar die heeft (nog) geen keyboard-besturing.
3D in HTML
http://www.makeuseof.com/tag/the-future-is-here-sketchfab-puts-3d-models-right-in-your-browser/
https://www.youtube.com/watch?v=h3U21aoea9I#t=56&channel=GrindingMoon
http://www.solidsmack.com/design/a-free-web-based-3d-model-viewer-no-plugins-required/
https://code.google.com/p/jsc3d/
http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/