menu

Custom Methode

“Opportunity is missed by most people because it is dressed in overalls and looks like work.”

– T. Edison

Soms weten klanten heel goed wat ze willen. De Bastards hebben verschillende partners in crime, waaronder ontwerpbureaus welke volledige designs onze kant op slingeren. Bij het omzetten van een statisch naar een functioneel design gelden andere regels dan wanneer er gewerkt wordt met templates, maar ook hier weten de Bastards raad. De Custom Methode is speciaal ontwikkeld om deze trajecten van het begin tot het eind te stroomlijnen.

De magische cocktail van de Custom Methode bestaat uit de volgende ingrediënten:

  1. Briefing
  2. Workflow
  3. Projectplanning
  4. Preview
  5. Trello

 


1. Briefing

 

Voorafgaand aan het versturen van een offerte hebben de Bastards informatie nodig over de website er uit moet gaan zien en moet functioneren. Deze informatie vergaren we in twee delen.

1.1      Het Ontwerp + Briefing

Uiteraard zien we graag het beoogde ontwerp, of de eerste mockups van het design. Daarnaast hebben we de DigiBastards vragenlijst als hulpmiddel om de wensen voor de website te inventariseren. Door alle vragen te doorlopen, goed na te denken over de antwoorden en deze zo uitgebreid mogelijk te beschrijven, wordt het omzetten van een statisch naar een functioneel design een proces zonder verassingen (of alleen positieve).

1.2      Het interview

Na het zien van de mockups/designs en de vragenlijst plannen we een gesprek in om alles samen door te nemen. Op deze manier vermijden we verkeerde interpretatie van de antwoorden, en kunnen eventuele vragen of onduidelijkheden samen besproken worden. Verder zullen de Bastards tijdens dit interview al wat eerste ideeën tegen het licht houden, wellicht zien we alweer allerlei te gekke mogelijkheden.

1.3      De offerte

Wanneer de vorige stappen zijn doorlopen kunnen de Bastards een offerte voor je uitbrengen. Deze offerte is niet alleen een prijsopgave, maar bevat ook de workflow (zie hieronder) en de Algemene Voorwaarden. Accepteer je de prijsopgave, dan accepteer je direct de manier waarop de samenwerking binnen het project ingericht wordt: duidelijk en gestructureerd.


2. Workflow

 

De offerte is ondertekent en de Bastards kunnen aan de slag. Het moment dat de workflow in werking treedt.

2.1      Aanleveren hosting gegevens

Het aanleveren van de hosting gegevens klinkt als een ingewikkelde klus, maar omvat niet meer dan het aanleveren van een inlognaam en een wachtwoord. Indien nodig kunnen de Bastards een handje helpen door contact op te nemen met de bestaande hosting partij, of advies en ondersteuning bieden wanneer het geen bestaand domein betreft.

2.2      Inrichten en vullen van projectarchief

Wanneer het ontwerp klaar is maken de Bastards een projectarchief aan. Dit archief is opgebouwd in Dropbox, en komt overeen met de gekozen opbouw van de website. Elke map correspondeert met een webpagina en is ingedeeld in afbeeldingen en tekstbestanden, zodat je precies weet wat we van je verwachten. Het complete design kan uiteraard ook als .AI bestand in dropbox worden gezet, dan zetten de Bastards het design om vanuit het bronbestand.

Zodra het projectarchief compleet is, gaan wij aan de slag.

2.3      Server inrichting

Het inrichten van de server is puur technisch en eigenlijk alleen van belang voor de Bastards. Bij de start van de ontwikkelfase maken wij een partitie op de DigiBastards server vrij voor je project, en installeren hierop een WordPress omgeving. De gehele bouw vindt plaats op onze server, en bij livegang migreren we de gehele website inclusief backend naar de gewenste server, waar we eerder al de gegevens van hebben ontvangen. Allemaal technisch geneuzel waar je als klant niks van merkt.

2.4      Omzetten Ontwerp naar HTML/CSS

De eerste stap in het proces van de custom methode is het omzetten van de bronbestanden naar een functionele HTML omgeving. De Bastards werken hierbij vanuit de aangeleverde ontwerpen in Adobe Illustrator of Adobe Photoshop. Deze worden vertaald naar elementen welke kunnen worden ingeladen door een webbrowser, en dus opgemaakt in HTML en CSS. Hiermee kan de pagina in essentie dus al in een browser worden weergegeven, alleen kan de pagina nog niet worden bijgehouden in een CMS systeem.

Voor het omzetten van de bronbestanden naar HTML/CSS gebruiken de Bastards een zogenaamd Bootstrap Framework. Dit is een frontend framework wat is opgezet in kolommen. Het enorme voordeel van dit framework is dat een responsive layout heeft, waardoor de website zich direct aanpast aan verschillende schermgootes (desktop, tablet, mobiel). Uiteraard dienen later nog maatwerk aanpassingen te worden gedaan, maar Bootstrap biedt al een enorm goede fundering voor de verdere bouw.

Soms komt het voor dat de Bastards een ontwerp voor mobiel krijgen wat erg afwijkt van het desktop ontwerp. In dit geval zullen we ook voor de mobiele versie een aparte HTML/CSS omgeving moeten maken en deze als aparte pagina omzetten in WordPress. Voor meer informatie over complexe ontwerpen met aparte designs voor mobiel, neem even contact met ons op.

2.4      Omzetten HTML/CSS naar Custom WordPress Theme

Om gemakkelijk content aan de website te kunnen toevoegen is het zaak dat de statische HTML/CSS bestanden worden omgezet naar een dynamisch WordPress Theme. In dit proces worden alle functionaliteiten toegevoegd waardoor er in de backend wijzigingen kunnen worden gemaakt welke aan de frontend zichtbaar zijn.

Voor het creeeren van een WordPress Theme bekijken de Bastards eerst hoeveel pagina templates er zijn. Verschillende pagina’s hebben vaak een verschillende opmaak, zo ziet het portfolio er bijvoorbeeld vaak totaal anders uit dan de homepage. Pagina’s met dezelfde lay-out maken gebruik van hetzelfde template in het thema (bijvoorbeeld nieuwsberichten). Hoe meer verschillende templates er binnen het thema bestaan, des te arbeidsintensiever de bouw van het thema is. Wanneer het thema is omgezet en alle functionele WordPress elementen zijn toegevoegd kan begonnen worden met het vullen van het thema met de content.

2.4      Opzetten Homepage

Nu begint het ook voor de klant zichtbaar te worden wat we toch allemaal aan het doen zijn. De Bastards gaan aan de slag met de aangeleverde teksten en afbeeldingen en creëren de homepage voor je. De homepage is natuurlijk de belangrijkste pagina want hier maak je de eerste indruk op je bezoekers.

2.5      Revisie Homepage

Nu mag jij aan de slag. Wanneer de Bastards de eerste versie van de homepage klaar hebben voor inspectie is het tijd voor de eerste revisie. Ondanks dat er sprake is van een ready made design ziet een functionele site er toch anders uit dan het ontwerp, alleen al omdat je natuurlijk maar een beperkt deel van de pagina in je scherm kan zien, in plaats van de pagina in z’n geheel. De eerste revisie ronde geeft je de kans om de homepage te bekijken en eventueel feedback te geven.

2.6      Opzetten sub-pagina’s

Ook bij het opzetten van de sub-pagina’s gaan de Bastards op basis van het projectarchief aan de slag. We beginnen hierbij met de hoofdnavigatie, waarna we verder werken naar eventuele pagina’s in de tweede laag van de navigatie.

2.7      Revisie Sub-pagina’s

Je begint de structuur te herkennen. De Bastards bouwen en wachten daarna op eventuele feedback. Zo ook voor de overige pagina’s.

2.8      Meta data & SEO

Een nieuwe website is fantastisch, maar als niemand deze ooit ziet ook een zinloze investering. Om dit te voorkomen optimaliseren de Bastards alle websites voor zoekmachines zoals Google. We kijken hierbij ook naar eventuele links naar de oude website, om ervoor te zorgen dat de posities binnen zoekmachines allesbehalve verslechteren. Verder zorgen we dat we clean programmeren en de pagina optimaliseren op snelheid. Dit zorgt voor een fijne bezoekersbeleving en betere indexering.

2.9      Finale revisie en Testen

De website kan bijna live, maar niet voordat deze nogmaals uitvoerig op alle functionaliteiten wordt getest. Ook is er nog eenmaal ruimte om feedback te geven over alle pagina’s binnen de website. De Bastards zorgen ervoor dat alles wat op het laatste moment esthetisch, functioneel of tekstueel nog niet naar wens is wordt aangepast.

2.10    Oplevering

Het prachtige moment is daar, het moment waar je al die tijd naar uit keek. Tranen biggelen over het gelaat, collega’s vallen elkaar in de armen, iedereen laat zijn werk vallen… het is tijd voor de oplevering van de website. Na alle revisies uit de laatste ronde te hebben doorgevoerd drukken de Bastards op de knop en staat de website live. Al die overwegingen, de twijfel, de aanpassingen en keuzes… het was het allemaal waard, want de website is zoals je hem in gedachten had. Compromisloos.


3.PROJECTPLANNING

 

Gedurende een proces als het bouwen van een website kan je als klant jezelf afvragen: Gaan we de deadline wel halen? Waren er nog dingen die ik moest aanleveren deze week? Waar zijn we op dit moment mee bezig?

Omdat deze vragen veelvuldig terugkwamen bij de Bastards, vonden we het belangrijk duidelijkheid te scheppen in het projectverloop. Daarom maken we voor elk project een duidelijke projectplanning.

De projectplanning is een samenvatting van alle stappen die doorlopen worden in het bouwproces. Bij elke stap vermelden we wat wij doen, of wat er van jou wordt verwacht. Is een stap afgerond, strepen we deze af en beginnen aan de volgende. Overzichtelijk, duidelijk en transparant.

4. Preview


 

Nieuwsgierigheid ligt in ieders aard, ook in dat van de Bastards. Daarom begrijpen we maar al te goed dat je als klant graag wil zien hoe je website eruitziet wanneer jou dit uitkomt. Dit is de reden dat de Bastards hebben besloten om live te bouwen, waardoor de voortang perfect te volgen is.

Elke website wordt gebouwd op een subdomein van de DigiBastards website, wat betekent dat je op elke moment kunt kijken hoe de bouw er voor staat. Dit kan er soms wat vreemd uitzien (er wordt tenslotte aan gewerkt) maar je blijft op de hoogte. Totale transparantie, dat is iets waar de Bastards voor staan.


5. Trello

Structuur geldt niet alleen voor de samenwerking tussen de klant en de Bastards, maar geldt ook binnen DigiBastards als een gemeen goed. Dat is de reden dat de Bastards werken met de projectmanagementtool van Trello. Hierin houden we precies bij waar we voor welke klant mee bezig zijn, welke to-do’s er zijn voor deze week, wat de afspraken zijn enz.

Aan de echt nieuwsgierige klant kunnen we toegang verlenen aan hun project binnen Trello. Op deze manier kan je nog beter kunt zien waar de Bastards mee bezig zijn, en wat de op microniveau de status is van bepaalde aspecten binnen het project. Ook dit valt binnen de totale transparantie die de Bastards bieden.