Blogs van "Design" 9

ICTscripters maakt gebruik van cookies. Door het gebruiken en browsen naar onze site gaat je automatisch akkoord met het gebruik van cookies. Klik hier voor meer informatie

  • 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… [Lees meer]
  • 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… [Lees meer]
  • 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… [Lees meer]
  • 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… [Lees meer]
  • 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

    PHP Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">


    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.

    PHP Source Code

    1. <head>
    2. <title>
    [Lees meer]
  • 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

    PHP Source Code

    1. <meta http-equiv="X-UA-Compatible" content="IE=8" />

    Of vervang ze door:

    PHP Source Code

    1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    Om de laatste versie te verplichten.

    2) Nu dien je de bezoeker zijn browser te laten weten dat je site responsive is.

    PHP Source Code

      [Lees meer]
    1. 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… [Lees meer]
    2. 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:

      Source Code

      1. <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

      Of via Google:

      Source Code

      1. <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

      Daarna include je ook onze js (Javascript) file (in het voorbeeld staat ajax.js in de js map).

      Source Code

      1. <script
      [Lees meer]
    3. 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… [Lees meer]