Viewport meta tag

Met de viewport meta tag kun je de breedte en schaal van je website instellen voor mobiele apparaten. Dit is essentieel, je geeft namelijk weer wat 100% is. Doe je dit niet dan zal je website op een mobiel apparaat als gewone website getoond worden.… Meer...

Werken met procenten

Werken in percentages

Er zijn tegenwoordig meer mobiele telefoon met internet verbinding dan computers. Nog even en er zullen ook meer page views zijn vanaf een mobiele telefoon dan vanaf een gewone computer. Tijd dus om te leren hoe je je site voor mobiel geschikt… Meer...

Child selectoren

Descendent selectoren

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id of class) binnen een andere tag (of id of class) zit, bijvoorbeeld “ul li”. Maar je kunt veel nauwkeuriger stijlen… Meer...

Tabellen

Regelmatig moet er op een website informatie worden geordend. Denk maar aan een site met een overzicht van producten, hierin staan afbeeldingen netjes onder elkaar met tekst er naast bijvoorbeeld. Meestal zijn dit websites die hun content… Meer...

Mediaqueries

Mediaqueries

Een mediaquery stelt je in staat om binnen je stylesheet stijlen aan te geven die gelden onder een bepaalde voorwaarde. Dit kan zijn schermbreedte, scherm orientatie (portrait of landscape). Een mediaquery is een stukje code ter uitbereiding… Meer...

One page parallax

One page designs zijn veel gezien tegenwoordig. Ze zijn bijzonder handig wanneer je niet heel veel content aan te bieden hebt en je bezoeker niet al te veel wilt laten klikken. Ik vind het zelf ook goed werken voor mobiel gebruikt aangezien een… Meer...

SVG files

Een SVG file is een schaalbare vector file. Deze maak je in Illustrator en exporteer je vervolgens naar een stukje script wat je kunt insluiten op je pagina. Het grote voordeel van SVG files is dat ze hun scherpte behouden wanneer de pagina… Meer...

Featured image bij een post over Google map toevoegen aan je site

Google map toevoegen

Een gewone kaart insluiten is vrij eenvoudig. Echter, je kunt redenen hebben om de kaart qua kleurenpalet aan te passen aan je eigen website. In deze post vind je een aantal links naar sites die hier op in gaan. Eerst het insluiten van een gewone… Meer...

Featured image bij een post over pictogrammen

Pictogrammen

Pictogrammen (of ikoontjes) kennen we allemaal. We komen ze immers in het dagelijks leven vaak tegen: denk maar aan de wasmerkjes in je kleding, de aanduidingen naar de toiletten of het pictogram wat ons duidelijk maakt dat er een pinautomaat… Meer...

SEO

Hoe SEO te integreren in je website?

SEO is de afkorting voor Search Engine Optimalisation oftewel Zoek Machine Optimalisatie. Meestal hebben mensen het dan over Google. Aangezien Google natuurlijk het overgrote deel van de markt in handen… Meer...

Wireframes

Wireframes van de key pagina’s van je website en de bijbehorende functionaliteit op die pagina’s. De focus ligt op het menu, de submenu’s en de templates die je voor je site nodig hebt. Een serie wireframes van uw hele website geeft iedereen… Meer...

Content inventarisatie

Nadat u een opsomming van zaken hebt kunt u aan de slag met een content inventarisatie. Hierbij gaat het erom dat u per pagina kijkt wat er nodig is.

De inventarisatie van de content brengt een hoop werk met zich mee. Alle content (dus ook formulieren,

Meer...

Styleboards

In een styleboard moet veel besloten worden:

  1. Kleuren van je ontwerp
  2. Lijnvoering:
    • Wel of niet lijnen?
    • Hoe dik zijn deze?
    • Welke vorm hebben deze?
      • Recht en ononderbroken
      • Gestippeld
      • Hand getekend
      • Een afbeelding (bloemenrandje bijvoorbeeld)
Meer...

Kleur

In de reader vindt u van pagina 26 t/m 35 een vrij goed overzicht van kleuren op websites en hoe u met kleur om kunt gaan. De afbeeldingen uit de reader komen van het bekende blog Smashing Magazine en is een zeer beknopte samenvatting van een serie… Meer...

Persuasive design

Wat is persuasive design?

Frankwatching.com omschrijft persuasive design als volgt: Bij persuasive design gaat het om het ontwerpen en toepassen van designprincipes die het beslis- en koopgedrag van potentiële klanten beïnvloeden.… Meer...

Gestaltprincipes in webdesign

Wat is gestaltpsychologie?

In de gestaltpsychologie wordt uit gegaan van het principe dat de mens de wereld om hem heen waar neemt in gehelen en patronen. De gestaltpsychologie was voornamelijk gericht op visuele perceptie en ging er vanuit… Meer...

Boxmodel

Zoals je inmiddels weet kun je met behulp van een div element een lege box maken in HTML welke je vervolgens “vult” met afbeeldingen, tekst, video etc om zo je ontwerp op te zetten. Meestal maak je div’s in div’s om een… Meer...

Float

Om elementen in je HTML pagina naast elkaar te positioneren kun je de eigenschap float gebruiken. In aansluiting hier op kun je het een en ander lezen over wireframes (je beeldscherm indeling).

Video’tje kijken?

POLS

Mp>Op POLS … Meer...

Schaalbare achtergrond afbeelding

Het maken van een schaalbare achtergrond is tegenwoordig meer standaard dan uitzondering. Echter, een achtergrond afbeelding kan netjes schaalbaar zijn maar helaas toch uit verhouding. In deze post ga ik je niet vertellen hoe je je achtergrondafbeelding… Meer...

Positioning (absolute, relative en fixed)

In les 1 van HTM22 ga je verder met het positioneren van je elementen (je div’s op een plek zetten).

Video’tje kijken?

Links

Bij Codecademy kun je een stap-voor-stap tutorial volgen over positionering: http://www.codecademy.com/courses/advanced-css-positioning/0/1Meer...

1 2 3