Naar
boven

Bouw je nieuwe website met een framework

Het kost veel tijd (en daarmee geld) om bij iedere website weer vanaf nul te beginnen met bouwen. Een groot gedeelte van de tijd ben je namelijk bezig met zaken die voor elke website hetzelfde zijn.

Natuurlijk, elk project is anders. Maar de basistaken aan het begin zijn meestal hetzelfde (en saai). Vooral bij bedrijven die aan de lopende band websites produceren is het niet zo effectief en efficiënt om steeds vanaf nul te beginnen. De ‘onvrede’ hierover heeft ervoor gezorgd dat webbouwers zijn gaan nadenken of het niet beter kon.

De oplossing is gekomen in de vorm van frameworks. Je kunt een framework omschrijven als een verzameling van conventies, lay-out standaarden, best practises, tools, veel gebruikte functies en meer. Je kunt een framework zien als een verzameling legoblokken waarmee je kunt bouwen wat je maar wilt, terwijl het ontwerp van de legoblokken zelf wel al vast staat. Vooral de laatste jaren zijn ze erg populair geworden. Ik heb het niet bijgehouden, maar ik denk dat er nu wel meer dan honderd zijn.

Een framework maken is alleen handig als je uit bent op schaalvoordelen. Alleen de bedrijven die meerdere websites maken of aan een hele grote website met meerdere thema’s werken, hebben er echt profijt van. Als je slechts een enkele website maakt kun je je afvragen of het zin heeft om al die moeite te doen.

Dat neemt niet weg dat je, als je een nieuwe website bouwt, je een van de frameworks kunt gebruiken die anderen hebben gemaakt. Dan heb je profijt van de voordelen van een framework!

Persoonlijk denk ik dat het bij veel websites zonde is dat er geen framework is gebruikt. Er worden veel crappy websites gebouwd. Niet omdat de bouwer nu zo slecht is, maar omdat er met een minimaal budget zo snel mogelijk iets in elkaar geflanst moet worden, omdat de klant het zo goedkoop mogelijk wil. Dat werkt gewoon niet. Die websites hadden zoveel beter kunnen zijn als de bouwer had kunnen werken met een framework!

Nu hoef je natuurlijk niet zelf in het framework te duiken als je hier geen verstand van hebt. Vraag het aan je webbouwer!

Wat zit er dan zoal in een framework?

Gaandeweg zijn bouwers steeds meer en meer aan frameworks gaan toevoegen:

Een basislay-out voor alle elementen

Er is meestal een basislay-out bepaald voor alle html elementen. Denk hierbij bijvoorbeeld aan formulieren en tabellen. Maar ook aan zaken die meestal vergeten worden: een lijst met definities, adresinformatie, citaten en dergelijke.

Een lay-out die zich aanpast

Veel frameworks maken gebruik van een ‘adaptive lay-out’. De lay-out past zich hierbij aan aan de grootte van het scherm en aan het apparaat waarop de website bekeken wordt. De tekst zoomt in en uit, de afbeeldingen schalen netjes mee en kolommen en dergelijke worden netjes herschikt. De website zier er overal goed uit: op een pc, mac, mobiel, tablets, notebooks, een koelkast, etc.

Bron: http://www.alistapart.com/articles/switchymclayout

Een lay-out die standaard werkt in elke browser zonder bugs

Er gaat geen tijd meer zitten in het vinden en oplossen van bugs en onregelmatigheden tussen browsers. Je kunt er namelijk van op aan dat het goed zit.

Typografie

Vaak wordt er uitgebreid aandacht besteed aan de typografie. Alle principes die hierbij van belang zijn (juiste verhoudingen, contrast) zijn hierbij meegenomen.

Een lay-out voor print, toegankelijkheid en dergelijke.

In frameworks zitten zaken waar je zelf waarschijnlijk niet over nadenkt. Zo is er meestal rekening gehouden met het uitprinten van de pagina’s (waarbij het er mooi uitziet, niet te veel inkt gebruikt wordt, verwijzingen vermeld worden), wordt de toegankelijkheid van de site meegenomen (een lay-out die schaalt als de bezoeker de tekstgrootte aanpast, hulp biedt voor spraakbrowsers), en meer.

Een grid

Een grid is een onzichtbare ‘basis’ om visuele samenhang te bereiken. Het bestaat uit denkbeeldige lijnen (een raster) waar de inhoud (tekst, koppen, afbeeldingen) op uitgelijnd worden. De site krijgt daarmee een professioneel uiterlijk en zorgt voor een ‘esthetisch’ gevoel.

Plugins

Veel frameworks hebben extra’s gedefinieerd voor veel voorkomende zaken. Denk hierbij aan menu’s, buttons, boxes en bijvoorbeeld breadcrumbs.

Templates

Vaak worden bij een framework templates geleverd. Deze kun je aan de ontwerper geven, die op basis van de template een goed ontwerp kan maken.

Html 5, CSS3 en meer

Je kunt nu al beginnen met het gebruik van de nieuwste technieken (zoals html 5 video), waarbij zelfs aan bezoekers die oudere browsers gebruiken een goede ervaring geboden wordt.

Welk framework moet ik gebruiken?

Er zijn tientallen frameworks. Er is niet 1 de beste: elk frame heeft zijn voor- en nadelen. Een goed framework hangt af van waar jij naar op zoek bent. Zoek er 1 die bij jouw persoonlijke voorkeur past. Hieronder volgen 5 frameworks die ik goed vind:

1. 1140 CSS Grid System

2. Inuit.css

3. The semantic grid system

4. Less Framework 4

5. BlueTrip

Onze Expertise Nodig?

Vul het onderstaande formulier in of bekijk onze online marketing cursussen en online marketing diensten.


Over de auteur:

Dit artikel is geschreven door .

Daan Walraven
Daan werkt bij Bikkelhart.
12 reacties op "Bouw je nieuwe website met een framework"
  • Sam zegt:
    21 Okt, 2011 om 09:19

    Is het 960 grid wat passé? Het 1140px grid lijkt me heel interessant en zal ik misschien gebruiken in websites.

    Anders, leuk artikel, al zie ik wel niet echt hoe je een website zou kunnen baseren op jouw framework.

    Reageren
  • Daan Walraven zegt:
    21 Okt, 2011 om 10:03

    De pagina die je ziet is een testpagina. Op deze pagina laat je zien wat er mogelijk is. Zie bijvoorbeeld deze testpagina van Blueprint:
    http://blueprintcss.org/tests/parts/grid.html
    Uiteindelijk moet er meer toegevoegd gaan worden. Tabellen, formulieren etc.

    Reageren
  • Marcel zegt:
    21 Okt, 2011 om 16:56

    Heb voor mijzelf een standaard website ontwikkeld waar ik alle componenten in heb, standaard thema met daarin een sub thema wat ik per website dan weer aanpas.

    Als ik een nieuwe site maak, kopieer ik de standaard website, maak een kopie van de database (van diezelfde standaard website). Hoef dan alleen de grafische elementen aan te passen.

    Reageren
  • Louis Deconinck zegt:
    22 Okt, 2011 om 16:32

    Ik doe net hetzelfde als Marcel. Ik heb ook een standaard website, met daarin de basiscode. Als ik dan van plan ben om een nieuwe website te maken, kopieer ik de code gewoon en dan hoef je alleen nog maar de grafische elementen aan te passen.

    Reageren
  • Tom Broekhoven | Estate zegt:
    24 Okt, 2011 om 09:10

    Ook handig wanneer je gebruik maakt van programma’s zoals Axure, waarmee je tal van legoblokken kunt verwerken in een master. Scheelt verder veel tijd in het telkens opnieuw opstellen van de documentatie.

    Reageren
  • BezichtigNu zegt:
    27 Okt, 2011 om 10:42

    Het nadeel van het gebruik van een raamwerk zoals dat hier geschetst wordt, dat je veel code hebt (ook in de HTML / CSS-uitvoer) die niet bepaald geoptimaliseerd is voor de specifieke website in kwestie en dus de zoekmachineoptimalisatie in de weg staat.

    Reageren
  • Matthijs zegt:
    27 Okt, 2011 om 15:17

    Sorry, ik vind de titel een beetje misleidend.

    Zou het niet beter zo iets zijn:
    “Design je eigen website met een grid” ?

    Bij Framwork denk ik eerder aan Zend Framework voor PHP. En met PHP “bouw” je uiteindelijk je website, en niet met CSS. CSS geeft vorm.

    Verder wel top dat je er een artikel over geschreven hebt! Laat dat duidelijk zijn.

    Voorafgaand aan deze kennis zou ik iedereen adviseren kennis te nemen van CSS Boilerplate. Zodat je website er in elke browser hetzelfde uit ziet. DAN pas dit soort stof behandelen.

    Reageren
    • janis zegt:
      28 Okt, 2011 om 11:04

      A web application framework is a software framework that is designed to support the development of dynamic websites, web applications and web services. The framework aims to alleviate the overhead associated with common activities performed in Web development. For example, many frameworks provide libraries for database access, templating frameworks and session management, and they often promote code reuse.[1]

      of tewel een set of tools die je herbruikt..

    • Matthijs zegt:
      05 Nov, 2011 om 14:25

      Ok, mee eens. Oftewel, klopt. Maar in combinatie met ‘bouwen’ vind ik de titel een beetje misplaatst, meer niet!

  • Remco zegt:
    28 Okt, 2011 om 10:25

    Goed artikel waar ik de volgende opmerking aan toe wil voegen.

    Wellicht dat het werken met een CMS (zoals Joomla/Drupal/WordPress etc.) meer aansluit bij de meeste website bouwers.

    Je zou kunnen stellen dat een CMS een kant en klare applicatie is, specifiek gericht op het gemakkelijk opzetten van websites met veel van bovengenoemde voordelen.

    Een framework daarentegen is het pakket met programmer tools en functies (classes, methodes etc.) om je eigen applicaties mee te maken.

    Dat zal voor veel mensen toch een brug te ver zijn want je moet dan wel weten wat object georiënteerd programmeren is. Ook moet je het Domain Object Model leren kennen.

    Met geavanceerde CMS’en zoals Joomla etc kun je tegenwoordig ook schalen. Ze zijn veelal al SEO vriendelijk.
    Daarbij is er een breed scala aan gratis en commerciëlel ‘modulen’ te verkrijgen die de functionalitiet van je webiste uitbreiden.

    Voor verreweg de meeste website zal (het standaard werk zeg maar) zal daarom een CMS voldoen.

    De drempel is ook relatief laag vergeleken bij een framework.

    Al met al is een CMS dan een sneller (veelal ook goedkopere) oplossing.

    Reageren
    • janis zegt:
      28 Okt, 2011 om 11:13

      cms is leuk en aardig maar je moet verstand van zaken hebben..

      als ik zie dat op hszuyd maastricht multimedia en communicatie, mensen webpagina’s maken zonder enige vorm van validatie en het box model niet begrijpen een 8 krijgen.

      vraag ik me erg af wat er goedkoop aan is? als iedere student op deze opleiding denkt zo een webpagina te maken en vervolgens moet ik alles opnieuw maken, omdat seo/validatie en beveiliging nog nooit van gehoord hebben..

      kort om opensource cms maakt een deur open voor kleuters..

    • Remco zegt:
      28 Okt, 2011 om 11:29

      Het hangt van je perspectief af denk ik. Johan zei het al ‘ieder foordeel hep se nadeel’.

      Als we website bouwen alleen overlaten aan de professionals dan wordt het ook meteen lastiger om je te onderscheiden van de grote groep.

      Voor de goede orde; als de door jou beschreven website bouwers niet van validatie en beveiliging afweten/implementeren dan zijn dat in mijn ogen geen professionals.

      Het leuke vind ik nou juist dat een CMS inderdaad het bouwen van website toegankelijker maakt. Dat is dé kracht van een CMS.
      Je maakt eigenlijk gebruik van vooraf gefabriceerde (soms zeer professionele) functionaliteit.

      Dat veel mensen nog niet veel met SEO doen en daar weinig kennis van hebben…. ach wat zou het? Het is leuk dat ze een website kunnen maken. Het is een mooi opstapje voor een websitebouwer.

      Het is aan een ieder om te bepalen hoe ver ze daar in willen gaan, je bent nooit uitgeleerd nietwaar? Ik leer nog steeds, iedere dag weer.

      SEO en beveiliging zijn technische aspecten. Er zijn ook nog veel psychologische aspecten waar ook maar een klein percentage van de website bouwers van weet.

      En uiteindelijk heeft dat wel alles met conversie te maken. Om nou te eisen dat website bouwers ook psychologen moeten zijn gaat wat ver.

      Het is maar net hoe ver je wilt gaan. En dat is waar de professionals zich kunnen onderscheiden van de amateurs.

      Frameworks zijn geweldig maar ik zie ze meer als de gereedschapskist voor bouwers die eigen applicaties willen ontwikkelen.

Reageren