Laatst zag ik een interessant artikel over het het scrollen van je bezoekers op je website. Steeds vaker zien we dat mensen op zijn / haar website een mooie grote afbeeldingen heeft als je de pagina opent, daaronder staat een pijl met 'Scroll naar beneden'. Alsof wij, als internetgebruikers, niet snappen dat er beneden meer is.

Onderzoekers van Huge hebben onderzocht hoe gebruikers omgaan met dit soort pijlen / buttons. Dit hebben ze gedurende 3 dagen gedaan met 48 testers.

Ze hebben gebruik gemaakt van vier ontwerpen:

• Alleen een schermvullende afbeelding
  
• Schermvullende afbeelding met scroll button / arrow
  
• Een kleine full width afbeelding
  
• Een geanimeerde full width afbeelding
  

Hieronder ziet u een afbeelding met de resultaten.


De conclusie die je hieruit kan trekken is dat iedereen, no matter what, scroll'd naar beneden.

Zelf dacht ik altijd dat een button gebruiken, of een hint geven dat ze naar beneden moesten veel duidelijker was. Maar het tegendeel is bewezen.

Wat vinden jullie… [Read More]

Wil je een hogere score in de zoekmachines? Dan zul je in de meeste gevallen moeten beginnen met het optimaliseren van je website. Je rankings hangen namelijk grotendeels hier vanaf. Wat kun je precies doen om je website te optimaliseren?

1. Navigatiestructuur verbeteren

Niet alleen fijn voor je bezoekers, ook zoekmachines zijn hier blij mee: een duidelijke navigatiestructuur op je website. Zorg ervoor dat je een helder hoofdmenu heb en maak gebruik van interne links. Soms kan het ook handig zijn om breadcrumbs op je website te plaatsen.

2. Teksten optimaliseren

SEO teksten bevatten op zijn minst één relevante zoekterm die op de juiste plaatsen in de tekst is geplaatst. Hierbij kun je denken aan de titel, de headings en de eerste en laatste alinea. Gebruik de zoekterm(en) echter niet te vaak, want dit kan door zoekmachines worden gezien als keyword spam.

3.Gebruikmaken van alt teksten

Alt teksten zijn de omschrijvingen van afbeeldingen waaruit zoekmachines opmaken waar de… [Read More]

Ik werk na al bijna een jaar met Sass en het lijkt met leuk om mijn kennis te delen en hier een Tutorial over te schrijven. In deze tutorial wil ik de grond beginselen van Sass bespreken, zoals het installeren van Sass.

Wat is Sass?
Sass wil bereiken dat er minder CSS geschreven hoeft te worden, CSS leesbaarder word en CSS onderhoudbaarder te krijgen. Sass schrijft een .sass of .scss file om naar leesbare CSS voor browsers.

Waarom Sass?

• Sneller en daardoor ook lekker werken.
  
• Variabelen gebruiken.
  
• Je code nesten.
  
• Programmeren: functies schrijven.
  
• Loopen.
  
• If, else statements.
  
• Herbruikbare stukken code schrijven.
  
• Files includen/importen.
  

Kortom voor iedere Front-Ender is Sass vrijwel een must have! Sass word al helemaal handig als je het gebruikt met Compass. Compass is een librarie van functie's die het heel handig maken om voor alle verschillende browser code te schrijven.

We komen in het volgende hoofdstuk terug op Compass. Omdat ik dit hoofdstuk meer wil besteden aan het installeren van… [Read More]

Hallo allemaal,

Enige tijd terug heb ik twee voorgaande blogs / tutorials geschreven over het slicen. Mocht je deze nog niet hebben gelezen, bekijk dan deel 1 en deel 2 eerst!


Deel 1: [TUT] Slicen
Deel 2: [TUT] Slicen #2

In deel 2 heb je de broncode geschreven voor je index pagina. In dit deel zal er gekeken worden naar de CSS, oftewel de Cascading StyleSheet.

De mogelijkheden van CSS zijn zo gigantisch, dat het bijna onmogelijk is om alles in één bericht te zetten. Daarom zal ik niet alles behandelen, maar enkel de standaarden en hetgene wat nodig is voor het voorgaande deel. Let op: Het is nog steeds een hele lange tutorial, dus ik hoop dat hij de moeite waard is!

Waar moet je op letten met CSS?
Het is van belang dat je weet dat elke browser de css anders behandeld. Dit houdt in dat het soms een hele taak kan zijn om je css zo te coderen dat het er in elke browser er hetzelfde uitziet. Ik zal hier straks verder op in gaan.

Margin
De margin is de ruimte die je meegeeft aan… [Read More]

Er zijn op het net en op het forum veel vragen omtrent XHTML valid website maken.

Ik ga hieronder uitleggen en laten zien hoe je een xhtml valid website kan maken. En deel hierbij dus mijn ervaring voor mensen die nog helemaal of weinig ervaring met html en css hebben.
Om te beginnen als je begint met het maken van een html bestand moet je de DOCTYPE + de link wat aangeeft of het xhtml is bovenaan zetten


vervolgens gaan we verder met het maken van ons html bestand, nu gaan we de belangrijke data maken en deze zetten we tussen de <head></head> tags neer
De title, de metatags en eventueel je stylesheet / javascripts includen.
… [Read More]

Recentelijk heb ik ictscripters.com omgezet naar een responsive design.
Op zich dacht ik dat dit moeilijk zou zijn, maar het viel heel goed mee.
Op een weekendje tijd was de site omgezet.

Heel belangrijk is om eerst te weten wat je wilt gaan verbergen in het geval van responsive design.
Je hebt maar een klein scherm en je kan niet alles tonen.
Een klein design levert sowieso ook een beperkt aantal dingen op dat je nog maar kan tonen.

Hoe ga je te werk?
1) zorg er zeker voor dat je website niet in comptabiliteitsmodus draait.
Verwijder dus code zoals

Of vervang ze door:

Om de laatste versie te verplichten.

2) Nu dien je de bezoeker zijn browser te laten weten dat je site responsive is.
… [Read More]

Hallo allemaal,

Naar aanleiding van vele vragen had ik een tutorial geschreven over hoe je moest slicen. Heb je deze nog niet doorgenomen? Lees dan eerst deel 1!

Let op: Goed en netjes slicen leer je niet in een paar uur of een paar dagen. Ik heb er zo'n 3 jaar overgedaan om alle ins- en outs te weten van HTML en CSS. Dus houdt er rekening mee!

Stap 1: De images


Je hebt nu, als je deel 1 hebt gemaakt, het photoshop document omgezet naar 4 images in het .png formaat. Je moet er altijd voor zorgen dat je je images een goede en duidelijke naam geeft, zodat je jezelf later bij het coderen niet kan vergissen. Zo heb ik de volgende namen aan de images gegeven.

Voor de header -> header.png
Voor het menu -> menu-bg.png
Voor de content -> content-bg.png
Voor de footer -> footer-bg.png

Hier staat bg voor background, de rest spreekt voor zich.

Nu is het bij het coderen ook van belang dat je weet hoe breed en hoog de images zijn. Dit heb je namelijk nodig voor de CSS, oftewel de cascading… [Read More]

Inleiding
In deze blog wil ik jullie graag leren om makkelijk een Ajax form te maken met mooie effecten. Ook komen er een paar tips&trucks in voor. Ik neem wel aan dat u verstand van HTML(5) hebt met een beetje verstand van jQuery en uw eigen HTML form kan maken.

De Ajax
U kunt pure Ajax gebruiken maar dit is te omslachtig, jQuery heeft een veel overzichtelijker en makkelijkere vorm. Daarom moeten we eerst jQuery 'includen' in onze HTML(5) pagina. Dit doe je op de volgende manier:

Of via Google:

Daarna include je ook onze js (Javascript) file (in het voorbeeld staat ajax.js in de js map).
… [Read More]

Hallo allemaal,

Ik kreeg van meerdere mensen de vraag: "Hoe moet ik nou eigenlijk slicen?". Ook werd mij gevraagd om hier een tutorial over te schrijven, dus bij deze

Inleiding
Wat is slicen nou eigenlijk? En wat is, zoals op sitedeals en andere websites staat vermeld, basen?

Hier kan ik eigenlijk heel kort en simpel over zijn:
Slicen: Is eigenlijk simpel weg een .psd (PhotoShop Document) in stukjes snijden, zodat je van één geheel meerdere kleine plaatjes genereert.
Basen: Dit is een naam verzonnen op sitedeals. Het houdt in dat een document wordt omgezet naar (x)HTML(5) en CSS(3). Dit houdt in dat er zowel gesliced als gecodeerd wordt.

Waar begin ik mee en wat moet ik weten?
Elk begin is moeilijk! Ik heb er ongeveer 2 jaar over gedaan om alle ins en outs van HTML en css te leren. Het is namelijk zo dat html en css een zeer makkelijke taal om te leren is, maar vanwege de vele browsers het weer een stukje moeilijk wordt. Je moet er namelijk altijd rekening mee houden dat elke… [Read More]