Categorieën
Leven

Transcending CSS

In Brighton kocht ik mezelf Transcending CSS: The fine art of web design van Andy Clarke. Een heel mooie uitgave van ietwat omvang met fantastische foto’s en vooral heel veel plaatjes van websites en web design.

Tegenwoordig neem ik het boek mee op de trein. Als ik geen behoefte heb aan een dutje, dan neem ik het wel ter hand. Intrigerend geschreven en vooral heel leuk om in te kijken.

Blijkbaar intrigeert het enorm, want van tijd betrap ik mijn medereizigers op steelse – soms een tikje jaloerse -blikken over mijn schouder. En dan ben ik toch maar wat blij dat ik in een business zit waar creativiteit troef is en elke dag nieuwe schatten van grafisch ontwerp of ingenuiteit brengt. Daarvoor doen we het toch.

Categorieën
Asides

CSS is dood

Aldus Mark want hij stopt met Gigadesign. Beetje jammer. Toch bedankt voor de fijne CSS tips en inspiratie gedurende al die jaren!

Categorieën
Techtalk

Klara in ’t nieuw

Kijkt! ’t Was op televisie: Klara heeft een nieuwe website! Ik vind het alvast een knap stukje design.

Wat mij op het eerste zicht opvalt:

  • Een in duidelijke boxen opgedeelde gridstructuur. En geen box met content te veel.
  • Zoeken en een markant, relevant artikel op een zichtbare plaats.
  • Ze werken met ‘tags’ en al om hun artikels vindbaar te maken! En je kan filteren in het zoekresultaat op mediatype! Zouden ze ook full text search doen?
  • Een helder menu met zes categorieën. De categorie ‘nog’ vind ik wat ongelukkig gekozen. ‘Algemeen’ categorieën durven al eens inhoudelijke vuilbakjes te worden. En tijdelijke categorieën zoals ‘Expo’, daar ben ik ook niet helemaal voor.
  • Een rustig, eenvoudig zwart/wit kleurenpalet.
  • Propere jpg clipjes zonder lelijke artefacten. (Hoewel, die ‘nieuwsbrief’ clip…)
  • Een super leesbare combinatie van lettertypes
  • Knoppen om de lettergroottes te veranderen
  • Een Atom feed! Per categorie! En zelfs voor het zoekresultaat!
  • Videogalore. In hoge kwaliteit nog wel!
  • Lelijke URL’s. Het zou nog mooier zijn met pretty urls om te verwijzen naar de items!
  • Propere HTML code
  • En nog véééél meer interessante inhoudelijke dingen om úúúúren mee zoet te zijn!

Zet de ploeg die de Klara site gemaakt heeft nu eens op deredactie.be en ik denk dat het ook daar wel goed zal komen. Uiteindelijk.

Categorieën
Asides

Stylish comments

Hm. Ik bedenk mij net dat ik eigenlijk eens werk van mijn comment forms zou kunnen maken. Soort van tinyMCE of iets lightweight en al erin gooien. Suggesties?

Categorieën
Internet Techtalk

red-actie

Hm. Met het nieuwe jaar gaf de VRT zijn duidingsmagazines en Het Journaal een grondige facelift. Nieuwe gezichten, nieuw decor, nieuwe programma’s,… en een nieuwe website. En wat voor één: De Redactie!

Ik waarschuw wel meteen: klikken op de link kan wel nefaste gevolgen hebben. Braakneigingen om er maar eentje op te noemen. Overdrijf ik nu? De eerlijkheid gebied mij te zeggen dat de nieuwe website niet meteen de eerste prijs in een schoonheidswedstrijd zou wegkapen. Wel integendeel. Volgens mij zijn er een aantal zaken grondig fout aan het nieuwe design.

  • Drukke layout. Of hoe prop ik zoveel mogelijk visuele informatie in zo weinig mogelijk ruimte. Het gevolg is dat hoofdzaken maar moeilijk van bijzaken te onderscheiden zijn. Alles schreeuwt om aandacht.
  • Wanorde. Ik stel mij vragen bij het nut van de drie gesplitste menu’s (twee boven de header, en eentje rechtsonder in de viewport). Of bijvoorbeeld de aanwezigheid van het menu-item ‘Weer’ terwijl er verder op de site een Weerwidget is die linkt naar dezelfde pagina. Of nog: in het menu rechtsonder zitten inhoudelijke categorieën (sport), geografische categoriën (West-Vlaanderen) en beperkt relevante thema’s (Verkiezingen VS) los door mekaar. Niet erg consequent. Hetzelfde vind ik van andere elementen zoals de poll, de mediatheek, de wanordelijke plaatsing van de nieuwsitems zelf,… De lay-out van een website is bij voorkeur gemaakt dat de plaats van de verschillend elementen vanzelf logisch lijkt. Hier is dat duidelijk niet het geval.
  • Inhoudelijke irrelevantie. Waarom krijgt Louis Van Dievel’s blog zoveel linklove? En waarom zou ik geïnteresseerd zijn in generieken van 50 jaar geleden?
  • Kleuren en beeldjes. ’t Is natuurlijk van smaken, maar ik denk dat iedereen het over eens is dat de overheersende rode kleur op de hoofdpagina absoluut vloekt met het fluoblauw van de nieuwsticker, de zwarte gradient in de header, de grijze foto’s,… Nog fouter is dat men het niet op één kleur houdt. Neen, op elke pagina een andere arbitrair gekozen hoofdkleur. Het opvallendste, meest foute element zijn natuurlijk de koppen van de redactieleden in de header zelf. Op zich heeft een rotating banner met gezichten van mensen best wel potentieel. Alleen gaat het hier om ongeïnspireerde portretten die fout zijn gefotoshopped. Bovendien heeft de ganse banner te lijden onder JPEG artefacting. Noteer ik ook het totaal fout geplaatste zoekformulier waarvan men de moeite niet heeft genomen het enigszins te stylen. Een leuke touch zijn de afwisselende portretten van de redactieleden in de footer. Maar dat komt enigszins overbodig over aangezien ze al in de header aanwezig zijn. Verder ben ik ook niet wild van de typografie.
  • Multimedia. De nieuwe site focust natuurlijk vooral op multimedia. Nu is het mogelijk om fragmenten, interviews, reportages direct op te vragen. Dat de banner of strip prominent in beeld komt spreekt voor zich. Alleen zijn de bewegende beeldjes in de thumbs voornamelijk irritant en afleidend. De strip zelf kan ook maar naar één kant scrollen. De videofragmenten zelf kan je in verschillende formaten bekijken: als popup, semi full screen, etc. YouTube, GarageTV en anderen hebben echter allang bewezen dat een one size fits all het beste werkt. Verder is er de – eerder overbodige – mediatheek met willekeurige reportages onderaan de pagina. En je kan ook niet enkel en alleen maar zoeken door de filmpjes naar een specifieke reportage. Het is alles of niets. Fout dus.
  • Interactiviteit? Buiten de weblogs en de eerder zielige poll op de voorpagina is er nauwelijks mogelijkheid om commentaar achter te laten bij de nieuwsitems. De site biedt ook de mogelijkheid om in te schrijven op een nieuwsbrief. Een mooie hulp voor mensen die het concept RSS en feeds niet kennen. Alleen vind ik het jammer dat men dan niet de mogelijkheid te baat neemt om meteen RSS goed te promoten en het niet enkel voor de nieuwsticker te gebruiken.

Ik zou nog even door kunnen gaan. In ieder geval komt de site op dit moment vooral zeer amateuristisch en nauwelijks gebruiksvriendelijk over. Nu moet ik wel toegeven dat ze cross browser compatibel is, maar daarmee is meteen ook alles gezegd.

Hoe moet het dan wel? De VRT had beter een voorbeeld genomen aan een site zoals die van de BBC. Toegegeven, het is meer een portaal en de meeste inhoud zit al wat dieper in de site, maar ze is een stuk aangenamer en overzichtelijker om te bezoeken. Zelfs de website van CNN ziet er een oase van rust uit in vergelijking met de wanorde op de nieuwe VRT nieuwssite.

Het spreekt voor zich dat twitterend en webdesignend Vlaanderen niet erg hoog op heeft met de nieuwe website. Het gevoel heerst zelfs een beetje dat de VRT redactie dolende is en best uit zijn lijden wordt verlost. Daarom is er nu de-red-actie. Sommigen gaan immers zelfs zo ver in hun plaatsvervangende schaamte om te overwegen quasi gratis hun diensten aan te bieden op de Reyerslaan.

Tjah.

Categorieën
Techtalk

Schermen met schermen

Lad en Bjorn wezen mij er onlangs nog op dat ze wat probleempjes hebben met het nieuwe design: de grijze leegte die in de linkerfalanx van hun gigamonitors verschijnt waardoor ze letterlijk hun bureaustoel naar rechts moeten verschuiven om goed en wel de teksten te kunnen lezen.

Eigenlijk is dit zo’n typisch probleem van schermresoluties en de herschaalbaarheid van websites. Schermafmetingen komen immers in alle soorten en maten en als webontwerper betekent dat veel geknoei om het er overal proper te laten uitzien. Alleen, tot nu toe ging het er om mensen met een lage schermresolutie, zoals 800 x 600, niet uit de boot te laten vallen. Tegenwoordig is het echter zo dat slechts een absolute minderheid nog zo’n lage resolutie hanteert. Dus kan je perfect een website ontwerpen zonder daar nog écht rekening mee te moeten houden. De meeste webbouwers laten hun ontwerpen dan ook terugschalen tot een minimum van 1024 bij 768 pixels.

Helaas heeft de technische vooruitgang weer een nieuw probleem gecreëerd: gigamonitors van 22 inch en meer. Breedbeeld-multimediagevallen die de verbeelding tarten en de gebruiker met grafisch geweld overdonderen. Ideaal voor video en games in resoluties van 1600 pixels en zoveel meer. Maar als je dan full screen een website bekijkt die geprogrammeerd werd met een fixed width van 960 pixels, kom je in de knoei. Dan krijg je zeeën van witruimtes dat het niet meer mooi is. Als webontwerper kan je de breedte van je website wel laten schalen aan de gebruikte resolutie, maar bij een schermbreedte van 1600 pixels worden – bijvoorbeeld – paragrafen tekst uitgerokken tot enkele regels die enorm lang zijn. Onleesbaar en niet echt gebruiksvriendelijk.

Hoe moet je daar nu mee om gaan? In de regel probeer je als webontwikkelaar ervoor te zorgen dat je website in zoveel mogelijk situaties correct wordt weergegeven. Kameraad Toine gaf mij dit weekend interessant argument om dat in dit geval niet te doen. Waarom zou je op je knoert van een megascherm in de eerste plaats je browservenster willen maximaliseren en full screen surfen? Oké, een grote viewport is een voordeel, maar op superresoluties valt dat duidelijk tegen. Anderzijds kan je als webbouwer wel de ruimte gebruiken om die nog verder op te vullen met allerlei inhoud, banners en what-nots. Maar dat gaat dan weer ten koste van overzichtelijkheid. Eigenlijk wordt het nu een discussie van usability en interfaces.

Het clevere aan een venstersysteem is dat je vensters van applicaties op mekaar kan stapelen waarbij het actieve venster waarmee je werkt bovenaan ligt. Bovendien kan je het venster maximaliseren zodat je je volledige bureaublad benut. Da’s zeker interessant wanneer je met lage tot gemiddelde resoluties aan de slag gaat. Via de taakbalk kan je altijd een ander venster naar boven halen. Zo zullen de meeste mensen het actieve venster maximaliseren.

Helaas kent het systeem ook zijn zwaktes: stel dat je aan het chatten bent en tegelijk full screen surft, dan zal je steeds tussen vensters moeten switchen. Of je wordt geconfronteerd met vervelende popups van je messenger als iemand iets tegen je zegt.

Met een knoert van een scherm kan je dat probleem gemakkelijk tackelen. Meer zelfs, je hoeft je vensters niet meer volledig te maximaliseren om aangenaam te kunnen werken of surfen. Het is interessanter om ze gewoon naast elkaar te openen. Bijvoorbeeld je browser en een paar messengervensters. Immers: je bureaublad is immers een zee van ruimte die je nuttiger kan gebruiken dan te verspillen aan witruimtes en marges van websites die niet op jouw schermresolutie zijn berekend.

Ik ben mij er van bewust dat niet iedereen dat doet. Maximaliseren van vensters om documenten, websites, foto’s,… toch goed op een “klein” of “normaal” scherm te tonen is immers niets meer dan een gewoonte. De mogelijkheden die zo’n gigascherm biedt, betekent ook dat je op een andere manier venstersystemen (windows, OSX, XFree,…) zal benaderen. Tenslotte maak ik mij de bedenking dat er qua standaardresoluties en schermgroottes duidelijk een grens is die bepaalt hoe wij beelden percipiëren en benaderen. Nu we die grens meer en meer overschrijden lijkt het me logisch dat ook venstersystemen in de nabije toekomst mee zullen evolueren. De 3D tafel van Microsoft en allerhande andere fancy conceptinterfaces die we het laatst jaar zien verschijnen zijn daar een voorbode van.

Spannende tijden dus!