Overslaan en naar de inhoud gaan

Redesign davidvandijk.nl 2012, hoe en waarom

Redesign davidvandijk.nl 2012, hoe en waarom

In mijn streven om de technische ontwikkelingen bij te blijven, update ik mijn website regelmatig. Zowel qua content als de techniek erachter. Als CMS gebruik ik Drupal omdat dit een solide basis geeft voor mijn site. Aangezien ik al een volledig draaiende en gevulde website had hoefde ik me alleen zorgen te maken om de theme.

Mijn vorige site gebruikte als basis de Zen theme, deze was nog HTML4 en redelijk standaard. Nu heb ik me gestort op Omega. Een theme die ik al een tijdje wil onderzoeken. Op het werk gebruik ik al een tijdje Adaptive Theme, een prima basis theme die een kleine leercurve heeft. De leercurve van Omega is iets groter maar je krijgt er iets meer controle voor terug. En daarbij is het nooit verkeerd om iets nieuws te proberen.

Hoe ben ik te werk gegaan

Ten eerste ben ik gaan bedenken wat ik wilde met mijn site. Ik wilde terug naar een simpel en duidelijke vormgeving. Geen zware grafische versieringen maar zoveel mogelijk oplossingen met CSS3. Ik begin daarna altijd met schetsen, gewoon met pen/potlood en papier. Een basis grid opstellen en globaal beslissen welke elementen ik waar wilde hebben. Omdat ik toch wel wat afbeeldingen wil laten zien koos ik ervoor om de afbeeldingen bij de nodes prominent in beeld te hebben naast de intro van de node. Onder de afbeeldingen staat metadata zoals de datum van inzending en wie het geschreven heeft. Naast de metadata staan de intro van de node zelf. Op de detailpagina vult de content de hele breedte van de content kolom. De afbeelding en metadata zijn verplaatst naar de rechterkolom. Dit omdat de waarde van deze data minder is geworden tenkoste van de node zelf. Dit was voor mij voldoende om te gaan beginnen met bouwen.

Designen in de browser

Ik doe bijna geen enkel ontwerp meer in beeldbewerkingssoftware. Het meeste ontwerpen doe ik in de browser. Dit geeft mij direct het resultaat en scheelt dubbel werk doen. Waarom zou ik eerst een mockup maken en daarna die mockup nog een keer maken in code en er dan achterkomen dat bepaalde onderdelen van de mockup op het scherm gewoon niet goed overkomen.Een website is geen statisch iets (en dan doel ik niet op HTML vs. PHP) maar een website reageerd op de browser waar het in bekeken wordt en de afmeting van het scherm. Dit alles kan zeer bepalend zijn voor hoe een gebruiker de site ervaart. Op een .jpg bestand of een A4-tje is dit gewoon niet over te brengen, niet!

Na het neerzetten van de basis Omega theme heb ik de default subtheme gekopieerd en aangepast naar mijn nieuwe ontwerp. Daarna ben ik de kolom breedtes gaan bepalen. Het totale oppervlak is verdeeld in 12 kolommen. De hoofdcontent beslaat er 8 en de zijkolom 4. De node intro is onderveelt als 2 om 6. Dit gaf mij een mooie breede zijkolom om voldoende data in kwijt te kunnen zonder dat het te druk wordt. Het voordeel van ontwerpen in de browser is dat ik geen rekening hoef te houden met absolute afmetingen. De site is volledig responsive. De kolomverhouding zal dus altijd hetzelfde onafhankelijk van de breedte van de site.

Daarna begon het leuke werk van het zoeken naar een mooi achtergrondpatroon en fonts die ik wilde hebben. Voor het font van de koppen ben ik gebleven bij LeagueGothic, een mooie duidelijk leesbaar font wat het ook zeer goed doet in all caps uitvoeringen. Het font van de slogan van de site is een handgeschreven-achtig font. Het overige font is Arial, standaard aanwezig op elke computer en goed leesbaar op computerschermen.

Daarna ben ik gaan developen, stapje voor stapje verschillende elementen van de site uitwerken beginnende bij de basis. Eerst de achtergrond en basis fonts definieren, evenals de kleuren van de links en de hovers van de links. Ik heb er ook voor gekozen om links weer standaard onderstreept te maken (uitgezonderd het menu) om de duidelijkheid te vergroten.

Gebruikte modules en themas

Themas

  • Omega als base theme
  • davidvandijk_2012 als subtheme

Modules

  • Views
  • Battlefield3Stats
  • te veel om op te noemen

Wat nu

Nadat ik tevreden was met een theme waarbij alle componenten van Drupal vormgegeven waren heb ik hem omgezet. Een aantal views, afbeeldingenformaten en blokken aanpassen en klaar is David. Klaar heeft hierbij een andere betekenis dan die in het woordenboek. Nu zal ik mijn site gaan gebruiken en langzaam uitbreiden met nieuwe functionaliteiten en eyecandy. Wordt vervolgt dus…