Onlangs heb ik dit blog voorzien van een verbeterde layout. De oude layout was eigenlijk een experiment met een donkere achtergrond, juist omdat websites met een donkere achtergrond weinig voorkomen. Het experiment vond ik slechts deels geslaagd; ik vond de layout niet leesbaar genoeg en en er moest meer aansluiting bij de rest van het internet komen. Dus om in de tijdgeest te blijven en met de woorden van Obama te spreken, het was tijd voor ‘change‘: Frontaal.net versie 2.0.
Oud versus nieuw in beeld
Frontaal.net layout 2006
Frontaal.net layout 2009
Leesbaarheid
- De grootste verandering is dat de kleurstelling is veranderd van een donkere achtergrond naar een lichte achtergrond. Dat maakte voor de leesbaarheid van de artikelteksten weinig uit, maar het was erg moeilijk om alle onderdelen van de website zo leesbaar te houden, zoals de codevoorbeelden (het zou betekenen dat ik het kleurgebruik in de code-highlighting compleet moet veranderen).
- Verder is er qua layout weinig veranderd wanneer je een relatief klein scherm hebt, de opbouw is hetzelfde gebleven. In dat geval krijg je de oude tweekolomslayout, in een nieuw jasje.
- Wanneer je een schermresolutie van 900 pixels breed of meer hebt, zul je zien dat er veel
meer ruimte is gekomen voor de artikelteksten. Dat maakt de artikelen overzichtelijker. Daarnaast is nu een driekolomslayout, zodat je naast de links in de artikelen ook in de zijbalk nuttige links kunt vinden.
Connecting people
Hoewel in de artikelen op deze site talloze links naar andere sites staan, kan het natuurlijk nog beter. Wat volgens mij ontbrak, was een stukje actualiteit en meer verband met gerelateerde blogs. In de zijbalken is daarom ruimte ingeruimd voor links naar de meest actuele artikelen voor front-end webdevelopers, te vinden op de betere blogs.
- Het stuk ‘Meer webdevelopment’ haalt de nieuwste artikeltitels via webfeed binnen.
- Wanneer in de blogosfeer of nieuwsland iets voorbij komt wat een belangrijke ontwikkeling lijkt, schrijf ik er kort over in de nieuwe rubriek ‘Marginaal’.
- Tot slot vind je sindskort ook de nieuwste vacatures voor front-end webdevelopers in de zijbalk.
Aangezien dit blog zich richt op mensen die nog niet zo lang bezig zijn met onderwerpen als tabelloze layouts, CSS, toegankelijkheid, hoop ik op deze manier dat bezoekers spelenderwijs andere goede blogs ontdekken. En de gevorderde sitebouwer komt zo wellicht op ideeën voor een carrièrestap.
Technische aspecten
Ik heb ervoor gekozen het grootste deel van de HTML en een stuk van mijn CSS niet zelf te schrijven, maar gebruik te maken van enkele frameworks, “een aantal standaardinstellingen (…) die voor iedere website opnieuw handig kunnen zijn” (uit: Naar Voren – CSS Frameworks).
-
HTML en CSS: Sandbox
Sandbox is een thema voor WordPress dat niet meer is dan kale, goed opgebouwde (semantische) XHTML en wat CSS waarmee je een één-, twee- of driekolomslayout kunt produceren. Hoewel het wat overbodige elementen en classes bevat, vond ik het van doorslaggevender betekenis dat het thema is voorbereid op diverse ingebouwde mogelijkheden van WordPress. En van de XHTML maak ik server-side gewoon HTML.
-
Meer CSS: Blueprint
De zelfgeschreven CSS bevat een gedeelte dat afkomstig is van het Blueprint CSS-framework. Blueprint bestaat uit HTML- en CSS-templates bedoeld om snel een website op te zetten volgens het grid-principe: mooie layouts zijn altijd gebaseerd op een evenwichtige vlakverdeling in rijen en kolommen. Voor deze layout heb ik eigenlijk slechts de CSS-reset en de typografie gebruikt. Het grid-principe heb ik zonder het framework toegepast, om layoutgebaseerde classes in mijn template te voorkomen.
Feedback?
Bij de wijzigingen ben ik louter uitgegaan van wat ik zelf gebrekkig vond. Als je als bezoeker iets geweldig onhandig vindt, of vindt dat er misschien iets ontbreekt dat geweldig handig zou zijn, hoor ik graag van je via een reactie of een mailtje. Alvast bedankt!
2 reacties
Ziet er goed uit!
Dankjewel, Edwin! En verbazingwekkend hoe snel je overal bij bent…!