De Netlash website bouwen
Deze post is leesbaar in de feed, maar wegens technische limitaties staat de inhoud in foute volgorde. Gelieve deze post op de website te bekijken ;).
De nieuwe Netlash website staat na een hoop hard werk eindelijk online. En ik moet zeggen: ik ben er best trots op. Aangezien deze blog over webdesign gaat is dit het ideale platform om een beetje achtergrond mee te geven. Verwacht je aan een uitleg over het ontwerp, het achterliggende systeem en de filosofie achter bepaalde beslissingen.
De nieuwe site op netlash.com.
Ontwerp
Voor het ontwerp waren we over één ding zeker: “no bullshit”. Het oude logo werd ontdaan van alle franjes en ronde hoekjes en staat nu strak gepositioneerd in een vlak. De typografen onder jullie herkennen een lichtjes gewijzigde versie van DIN 1451 Engschrift. De Netlashkleuren wit, zwart en rood zijn prominent aanwezig op de website. Met uitzondering van de gedeeltes met een donkere achtergrond wou ik het paradigma “rood = aanklikbaar” zoveel mogelijk behouden.
De site werd netjes op een grid gezet met aandacht voor de leeslengte van kolommen, mogelijke inhoud (bvb. YouTube en Slideshare embeds) en uitbreidbaarheid. We hebben ervoor gekozen de site links uit te lijnen. Persoonlijk vind ik dat het links uitlijnen in combinatie met de border rechts een duidelijke scheiding zet waar de site begint en eindigt. Voeg daar nog eens de grid aan toe en het resultaat is een rigide structuur die makkelijk op te nemen valt.
Grafiek
Voor de pagina’s onder filosofie maakten we een grafische voorstelling van de inhoud. Mijn eerste grafieken werden afgeschoten wegens te “wolfr style” – dat wil zeggen: in de filosofie van Tufte, het onnodige weghalen en een grote ink/data-ratio. Naar mijn bescheiden mening klopten die grafieken volledig met de layout. Na enkele iteraties werd gekozen voor de huidige stijl. Je kan niet alles hebben natuurlijk.
Fotografie
Als ons bedrijf jobtitels had, dan was Dirk ongetwijfeld de art director. Met een Nikon D200 in de hand was hij fotograaf van dienst voor het beeld op de homepage, dat geïnspireerd is op deze fijne foto van het Last.fm-team. Onderaan dit artikel een kleine video hierover. Bekijk zeker ook de portretten op de teampagina.
Backend
De Netlash website draait op ons zelf gebouwde CMS, Fork. Fork CMS is modulair opgebouwd. Er zijn een aantal basismodules die je sowieso nodig hebt om Fork te draaien – onder andere gebruikers en pagina’s – daarnaast kan je andere modules die je nodig hebt “inpluggen”. De Netlash website gebruikt onder andere de contactmodule en de blogmodule. Daarnaast werden een aantal modules op maat van de website gebouwd, waaronder de zoekmodule en de portfoliomodule.
Inhoud
Een website is natuurlijk niets zonder inhoud. De teksten op de site werden proper verzorgd door de stem van Netlash, Netlash himself, ook gekend als Bart. Ik ben vooral fan van de pagina wat we niet doen. Minstens even belangrijk als wat we wél kunnen doen. Focus moet er zijn.
In één opzicht is het belangrijk dat alle teksten een consistente toon en stijl aanhouden. Anderzijds spelen we met het idee om ook de rest van het team af en toe op vrijwillige basis te laten schrijven. Eén van de voor de hand liggende problemen is dan ook het inhoudsaspect. De onderwerpen waar Bart over schrijft zijn toegankelijk voor een breed publiek.
Collega’s Tijs en Davy hebben ongetwijfeld veel boeiende te dingen te vertellen over PHP; ik heb het graag over interfaces en webdesign (en in bredere zin ontwerp). Maar of dit gaat bijdragen aan de stem van de site is dan de vraag. Misschien is het zinniger Netlash Designers en Netlash developers terug een duwtje in de rug te geven. Ik ben er nog niet uit.
Javascript
We zijn bij Netlash grote fans van het jQuery framework. Dit framework gebruiken we bij elk project waar er javascript nodig is om een aantal redenen: het is snel, vlot om mee te werken en het wordt regelmatig geupdate. Ook is de documentatie goed (als ze niet down is) en community betrekkelijk groot.
Het gebruik van javascript valt mee in de filosofie van enhancement. We gebruiken javascript om het de bezoeker makkelijker te maken de website te gebruiken, en om op strategische momenten iets leuks en verrassends te doen.
Voor de portfolio slideshow op de homepage werd jQuery color gebruikt. Bij het schrijven van een reactie op de blog, en bij het contactformulier, gebruiken we autogrow.
Voorbereiding fotoshoot door Netlash op Vimeo
Conclusie
Als ik de reacties lees kan ik met een gerust hart zeggen dat we erin geslaagd zijn een mooie en functionele website te bouwen die weerspiegelt wat Netlash heden ten dage is. De mooiste reactie vond ik persoonlijk die van Xavez: Oh en heb ik al gezegd dat ik vind dat de site op zijn zachtst gezegd “morgen” uitademt?
. Waarvoor dank.
Beter in de modernere browser
In artikels over webdesign wordt vaak gejongleerd met de termen progressive enhancement en graceful degradation. Dit komt neer op moderne browsers een iets betere versie te geven van een element van de website, maar de site toch volledig functioneel te houden in oudere browsers. Klassieke voorbeelden zijn ronde hoekjes, die in oudere browsers vierkant worden. Of een transparante achtergrond die in een oudere browser een solide vlak is.
-
Afgeronde hoeken
Op de Netlash website hebben we een aantal moderne CSS-properties gebruikt. Zo gebruiken we
-webkit-border-radiusen-moz-border-radiusom Safari en Firefox op bepaalde buttons en boxjes ronde hoeken mee te geven. -
Transparantie
De pijltjes bij het portfolio op de homepage moeten er op elke achtergrond goed uitzien en daarvoor wordt een PNG gebruikt. IE6 krijgt een gekartelde GIF-versie, die evengoed een pijltje aanduid, maar er minder mooi uiziet. De header gebruikt op het eerste zicht ook transparantie, maar het gaat hier om fake transparantie (bvb. deze image).
-
CSS sprites
Op strategische plaatsen maken we gebruik van CSS sprites, een inmiddels oude maar nog altijd nuttige techniek. De blog heeft een aantal icoontjes die we in 1 image steken. Door middel van background positioning wordt het juiste deel van de image getoond.
-
Type=”search” en validatie
De website van Netlash valideert niet volledig. Sommige mensen vinden dat een pagina die niet valideert fouten bevat. De schuldige was in dit geval het zoekformulier bovenaan, volgens David een zware fout.
Het input type “search” staat inderdaad niet in de XHTML spec. Het is een type dat enkel werkt in Apple’s browser Safari. Als we spreken over progressive enhancement gaat het meestal over Firefox, Opera en Safari mooimakerij X meegeven, en dat niet te doen in IE6 en/of IE7. Wel, op de Netlashwebsite heeft Safari 2 “progressive enhancements” voor op de rest van de browsers: de ondertussen beruchte type=”search” en de animatie op het menu door middel van CSS transitions.
Browsers gaan in de meeste gevallen correct om met onbekende code en zorgen ervoor dat die netjes afgehandeld worden (meteen ook de reden waarom je vandaag al de structurele HTML5 tags kan gebruiken). In elke andere browser dan worden onbekende input types automatisch omgezet naar
input type="text". Onbekende properties (zoals in dit voorbeeld autosave=”” en results=”“) worden genegeerd. Het resultaat is dat het zoekformulier correct werkt in elke browser; het valideert enkel niet tegen een bijna 9 jaar oude specificatie. Als er één manier is om het web vooruit te helpen is het om te stoppen met klachten over validatie en het experiment aan te gaan.Een
<div>die niet gesloten is, is een fout, dit niet.
9 reacties op “De Netlash website bouwen”
Reacties gesloten
Het is niet meer mogelijk om reacties te geven op dit bericht. Na plaatsing is het gedurende 2 weken mogelijk om te reageren. Dit om de kwaliteit van de uiteindelijke post hoog te houden en spam tegen te gaan. Mocht je toch nog (persoonlijk) willen reageren, zie de contactpagina.
Aangaande type=”search” … standaard het attribuut op text laten, en via JS in de onload wijzigen … how’s that for progressive enhancement? ;-)
Ik hoopte al een beetje op zo’n artikel! Wouw! Uitermate informatief! En de mogelijkheden van de css komt erg goed naar voren in deze post.
@Bramus klopt, dat hebben we geprobeerd. Die methode heeft echter ook zijn nadelen: de “opbouw” van je pagina tijdens het laden is minder mooi (als in: eerst zie je iets, dan on DOM ready iets anders), en je voert onnodige javascript uit.
Een beetje jammer (zowel voor mijn ego als voor de lezers) dat er niets werd vermeld over de toch wel uitgekiende informatie-architectuur waarop dit ontwerp steunt.
Of is dit een zeer sluwe manier om mij te verplichten om ook weer te gaan bloggen?
Heel mooi artikel. Duidelijk geschreven door iemand met passie voor zijn job :)
Beauty without depth is just decoration.
Thanks for sharing.
@Bram je hebt me volledig door; ik wacht op een nieuw artikel op je blog.
Daarnaast heb ik over de deeltaken waar ik niet of in zeer beperkte mate bij betrokken was (zijnde IA en development) minder zinnige zaken te vertellen. Deze post gaat over de Netlashsite bouwen vanuit mijn perspectief.
Ik wacht vol spanning op je schrijfels ;).
Heel interessant voor in mijn lessen webdesign. Mooi voorbeeld van hoe men het grafisch ontwerp/beschrijving lay-out van een website kan weergeven.
Haha, bedankt voor de vermelding :). De analyse die je hierboven maakt is ook wel de reden voor die comment in feite. Ontdaan van alle franjes zonder saai te worden. Technisch sterk, marketinggewijs verantwoord en een perfecte behelzing van de sfeer die Netlash ook opzoekt in haar projecten. Nice work Wolf :). Ook leuk om nog wat bij te leren over die input type=”search”. And spot on concerning validation once again, maar daar ben ik het al langer mee eens: validation is a means, not a goal!
Ik ben van mening dat de stem van de designers en de developers evenzeer bijdraagt aan de stem van Netlash, en dus ook aan die van de site.
Bij deze dus een +1 om developers, designers en ia’s mee te laten bloggen op de Netlash website :)