Wat je zelf doet doe je daarom niet beter

Tot voor kort bood ik mijn klanten een eigen handgemaakt contentmanagementsysteem (cms) aan. Het was meer dan degelijke software, ontwikkeld in PHP, die de webmaster op een intuïtieve manier toeliet de website van zijn organisatie te onderhouden met teksten, foto’s en andere multimedia.

De keuze om, anno 2003, te beginnen met de ontwikkeling van een eigen cms was vrij snel gemaakt. Er was in die tijd nu eenmaal geen software op de markt die voldeed aan mijn (ik dacht nochtans vrij voor de hand liggende) eisen. Ik wilde een cms dat:

• gebruiksvriendelijk was voor mijn klanten
• krachtig genoeg was om ook voor grotere bedrijven oplossingen te bieden
• me websites liet ontwerpen in alle vrijheid

“Wat niet bestaat, maak ik dan maar zelf”, was mijn redenering, gestuwd door de groeiende vraag van klanten naar onderhoudbare websites. Maar een cms programmeren is één ding, het constant up-to-date brengen met features die de klant de mogelijkheid geven z’n website een moderne uitstraling te doen geven is iets anders.

Door de jaren heen stak ik meer en meer tijd in het aanpassen van het cms, iets wat voor een freelancer als mezelf natuurlijk geen sinecure is: er valt altijd wel zoveel te doen, te leren en te onderhouden. En een cms ontwikkelen was nu niet bepaald het perspectief dat ik voor ogen had toen ik de stap in de freelancewereld zette.

Zelfreflectie

En dan komt er plots een moment waarop je beseft dat je eigenlijk veel betere software achternaholt. Want ondertussen was het internetlandschap natuurlijk al grondig veranderd. Waar een cms in 2003 een luxe was, is het nu een noodzaak geworden voor elke website. Het resultaat is dat er vandaag de dag tientallen uitstekende contentmanagementsystemen op de vrije markt zijn, die wél voldoen aan mijn bovenstaande eisen. Systemen waar soms veel geld en mankracht achter zit, gemaakt door firma’s of community’s die van een cms hun core business hebben gemaakt.

Tijd voor de volgende stap

En de volgende stap kan je al raden: met wat misplaatste melancholie besliste ik enkele maanden geleden om mijn eigengebreide cms vaarwel te zeggen en over te stappen op één van de vele verkrijgbare alternatieven. Het vergde wat tijd om me het cms eigen te maken, maar het was één van de beste beslissingen die ik tot nu toe genomen heb:

• De tijd die ik uitspaar met het ontwikkelen van features voor mijn eigen cms kan ik investeren in nieuwe, meer uitdagende projecten.
• Ik kan mijn klanten een cms aanbieden dat voldoet aan eerder vermelde eisen: gebruiksvriendelijk, krachtig, flexibel.
• Ik kan mijn klanten de zekerheid bieden van een cms dat op grote schaal getest en gebruikt wordt.
• Een team ontwikkelaars concentreert zich nine-to-five op nieuwe features voor het cms zodat ik met vertrouwen aan mijn klanten kan vertellen dat hun software altijd up-to-date zal zijn.
• ...

Sommige beslissingen liggen zo voor de hand dat je jezelf de vraag stelt waarom je ze niet vroeger hebt genomen. Over een win-win situatie gesproken.

Categorieën: ExpressionEngine, Opinies,

2 reacties

Een staaltje van goed ontwerp

Tijdens het ontwerpen en ontwikkelen van websites staat één begrip altijd centraal: gebruiksvriendelijkheid. Op een ideale website weet zowel de grootste internaut als de onwetendste digibeet altijd wat hem te doen staat. De gebruiker moet in een oogopslag weten waar hij de voor hem relevante informatie kan terugvinden.

In die zin kan het als webontwikkelaar gevaarlijk zijn om nieuwe technologieën te implementeren op een website. Wat niet gekend is, zorgt snel voor verwarring. Tenzij het zó intuïtief werkt natuurlijk, dat je meteen snapt wat je te doen staat.

Sinds enige tijd heeft Apple interessante functionaliteit aan de zoekfunctie van zijn website toegevoegd. Wanneer je de eerste letters van een zoekterm ingeeft, verschijnt vrijwel meteen een overzichtelijk menu met zoekresultaten. Allemaal in een heel mooie vormgeving die het gebruiksgemak ondersteunt.

De kracht van het systeem zit vooral in de kleine dingen. Zo werkt de zoekfunctie ook nog op de oude manier. Dat is belangrijk, want stel dat je als gebruiker niet echt snapt wat daar aan de hand is, dan kan je de nieuwe functionaliteit gewoon negeren. Je typt net als vroeger je zoekterm in en drukt op enter om doorverwezen te worden naar een zoekresultatenpagina.

De gebruiker die de analogie met de alombekende html-keuzelijst doorziet, zal ook aangenaam verrast zijn: je kan het nieuwe zoekmenu op dezelfde manier besturen als een html-keuzelijst, met je muis of via de pijltjestoetsen van je klavier.

Een staaltje van goed interfaceontwerp dus: de gebruiker snapt zonder bijkomende uitleg meteen wat van hem verwacht wordt. Trouwens, goede vormgeving krijgt altijd navolging: sinds enkele dagen is dezelfde zoekfunctionaliteit toegevoegd aan de website van Adobe, weliswaar voorlopig nog alleen op de Engelstalige versie.

Ere wie ere toekomt

Als ik het goed voorheb, dan was Google Suggest een van de eerste webpagina’s waarop de live keuzelijst in het zoekveldje geïntegreerd was. Typ een zoekterm en je kan het nog altijd in werking zien. Googles versie is een stukje primitiever, maar was in die tijd (2006 dacht ik) heel vernieuwend en ophefmakend.

Na Google zag je hier en daar al een zogenaamde ‘ajax livesearch’ (vergeef me het jargon) opduiken, maar geen enkele was in mijn ogen zo goed uitgewerkt als die van Apple.

Categorieën: Ontwerp, Opinies, Webomgeving,

2 reacties

OptiPNG: ook de smalbandsurfer telt

Tijdens het ontwerpen van TheHotSeat.be werd al snel duidelijk dat het een website zou worden die veel afbeeldingen bevat. Niet meteen afbeeldingen in de zin van echte foto’s, maar veeleer grafische elementen die het ontwerp een meerwaarde geven. Denk maar aan het subtiele motiefje dat in de bovenste donkere balk te zien is, de schaduw in het groene vlak hierboven of de lijntjes achter deze tekst.

Het nadeel van afbeeldingen

Afbeeldingen kunnen een webpagina een stuk aantrekkelijker maken, maar ze moeten natuurlijk wel telkens gedownload worden door de bezoeker zodat die ze op zijn scherm kan zien. En daar wringt het schoentje een beetje: de bestandsgrootte van afbeeldingen is doorgaans een stuk groter dan die van gewone html-tekst. Dat zorgt voor langere downloadtijden voor de bezoeker.

Een breedbandsurfer zal daar waarschijnlijk niets van merken, maar bij hen die via tragere verbindingen het web doorkruisen, kan zo’n afbeeldingsintensieve site nogal wat frustratie teweegbrengen. Stel je maar eens voor dat je telkens 15 seconden moet wachten vooraleer je een pagina op je favoriete website te zien krijgt…

Afbeeldingen optimaliseren met Photoshop

Afbeeldingen optimaliseren is dus de boodschap: hierbij ga ik op zoek naar de beste verhouding tussen een kleine bestandsgrootte en een hoge afbeeldingskwaliteit. Door de afbeeldingen te comprimeren via diverse compressiemethodes kan je vaak de bestandsgrootte van een beeldje serieus verminderen, zonder dat dat de kwaliteit van de afbeelding erbarmelijk hoeft te maken.

Het dialoogvenster ‘Opslaan voor web & apparaten’ (Eng: ‘Save for web & devices’) in Photoshop helpt je hierbij grandioos: je kan verschillende bestandstypes overlopen (jpg, gif of png) en meteen zien welk type de beste verhouding oplevert tussen bestandsgrootte en afbeeldingskwaliteit. Maar als je kiest voor png-24 als bestandstype, dan zijn er weinig extra opties die je zelf kan instellen om tot een nog kleiner beeldje te komen. Photoshop maakt heel gewoon een png-bestand van je afbeelding en dat is te nemen of te laten.

Verwelkom OptiPNG

Omdat op het web elke byte telt, ben ik op zoek gegaan naar een manier om de door Photoshop gegenereerde png-bestanden nog verder te comprimeren. En daarbij stootte ik op het fantastische OptiPNG. Het is een open-source command line programma, beschikbaar voor Mac én PC, dat automatisch tientallen png-compressiemethodes uittest op je beeldje en dan uiteindelijk de methode die het kleinste aantal bytes oplevert zal toepassen.

De resultaten met de png-afbeeldingen voor deze website waren verbazingwekkend. In de meeste gevallen genereerde OptiPNG een nieuw png-beeldje dat gemiddeld zo’n 10% kleiner was in bestandsgrootte. En de compressie is ‘lossless’, wat wil zeggen dat er geen zichtbaar kwaliteitsverlies optreedt. Nu lijkt 10% misschien niet zoveel, maar als er 20 afbeeldingen op één webpagina voorkomen, dan scheelt dat natuurlijk wél een slok op een borrel.

De smalbandsurfer zal je er dankbaar voor zijn. En daar draait het natuurlijk om, want een goede website moet altijd toegankelijk, duidelijk en prettig zijn voor zoveel mogelijk gebruikers.

Hoe je OptiPNG kan installeren en gebruiken, komt aan bod in een volgende blogpost.  Heb je zelf ervaring met OptiPNG of ander png-optimalisatiegereedschap? Laat dan zeker iets weten in een reactie op deze blogpost.

Categorieën: Ontwerp, Opinies, Photoshop,

0 reacties