Archief - Frontend development en het belang van standaarden

Ik wil eerst volgende zaken duidelijk maken:
- gedurende 2 jaar ben ik professioneel frontend developer (en vanzelfsprekend al langer bezig dan 2 jaar met het web)
- ik vind mezelf allesbehalve een guru of betweter

Dit gezegd zijnde wil ik eens polsen hoe andere webdevelopers kijken naar de hedendaagse markt.

De laatste tijd erger ik me meer en meer aan de doe-het-zelver of de student-professional-in-wording die hun brouwsels ten grabbel werpen op het wereldwijde web en géén rekening houden met afspraken, regels, standaarden what-so-ever. Al te vaak worden argumenten als:
- ik kan dat niet weten ik ben student
- ik heb geen blinde / slechtziende bezoekers
- mijn maten / docenten / whatever vonden het goed
- toon anders eens wat werk van jezelf in plaats van kritiek te geven

Mijns inziens valt een website (puur frontend dan) uitéén in een paar grote brokken zijnde:

Layout
Het doet er niet toe hoe slick je layout is en hoezeer je je photoshop skills tentoon spreidt in je layout, bovenal moet een website doen wat hij moet doen en dat is inhoud op een gebruiksvriendelijke manier weergeven aan je bezoeker. Om nog maar niet te spreken van usability en user experience. De layout mag mijns inziens nog zo gelikt zijn als het maar kan, als de uiteindelijke doelgroep zijn weg niet terugvindt dan haken ze af en zoeken ze hun informatie wel ergens elders.

Content
Hier rond draait alles, je website staat of valt met de inhoud die je je bezoekers voorschotelt. Het web is geen boek van 300 bladzijden, de bezoeker heeft geen zin in uren leesplezier, hij wil lezen wat hij wil weten, kortom, een beknopte opsomming van zijn probleem. Een vlot lezend geheel met de nodige links om de bezoeker zijn nieuwsgierigheid verder aan te wakkeren, hem uitnodigen om door te klikken op je webpagina. Het liefst van al nog volledig semantisch en xhtml valide gepresenteerd. Het hoe en het waarom kun je op genoeg pagina's lezen, maar om ze even op te sommen:
1. voor blinden en slechtzienden
2. zoekmachines
3. Tim Berner Lee's visie

Behaviour
Javascript features zijn bijkomend en mogen op géén enkele manier je content gaan wijzigen. Het dient enkel als enhancement. Ajax is geen überhippe technologie die frames vervangt. Ajax is niet voor content, ajax is voor acties.

Dit is een zeer beknopte opsomming van hoe ik het web ervaar in mijn werkervaring, met de nadruk op BEKNOPT, er is nog véél meer, typografie, Information architecture, ...

Kortom, waar ik op aanstuur zijn volgende zaken:
voor de professionals, hoe ervaren jullie dit in jullie dagdagelijkse job? Zouden er wetten moeten komen omtrent usability en semantisch web? Denken we maar aan de UK, Nederland (waar er trouwens een gilde der frontenders is)...
Inzake het onderwijs denk ik ook dat er hier tekortgeschoten wordt. Al te vaak wordt er enkel xhtml aangeleerd met 10.000 divjes en wordt semantiek gewoon over het hoofd gezien. Net als frontend development wat op zich een redelijke brok is die ofwel door een designer gedaan wordt (waarmee ik niet zeg dat designers geen semantische pagina's kunnen bouwen) of door backend developers (zie designers, ook hier zeg ik niet dat backenders geen semantische pagina's kunnen bouwen).

Ikzelf (en mijn collega's) heb een 'holistische visie' op webdesign.
Design, technologie en usability zijn drie poten onder dezelfde stoel. Haal 1 van die poten weg, en de stoel zakt ineen.
Zie ook onze filosofie: Usability - Netlash Webdesign

Als het over webstandaarden gaat... Uiteraard is propere, onderhoudbare code van belang (als het bijvoorbeeld over SEO of accessibility gaat). Maar valideren is een middel, het is nooit een doel op zich.

Eerst en vooral. Mooi.
Dit is echt een behoorlijke goede tekst. Bij de meeste dingen ga ik volledig akkoord.
En ben zeker akkoord dat er eindelijk een uitlaatklep is

Ik ben ver van professional maar ik probeer steeds ook meer rekening te houden met de semantiek binnen de website.
Alleen is dat niet echt makkelijk als non-webstudent om het zo te zeggen. Je neemt nogal snel aan dat dat geen excuus is maar ik vind net eerder van wel. Als niemand je leert praten en het uit jezelf moet doen loopt alles niet zo vlot.
Je kan niet gaan verwachten dat iemand van 0 naar pro gaat in een nacht.
Maar waar je wel mee rekening moet houden is idd dat je dan ook de kritiek moet kunnen verdragen.
Zo herinner ik nog zeer goed mijn eerste check.. Achteraf MOET je gewoon zeggen dat deze mensen er meer van weten. Ze hebben meestal ook echt gelijk. Soms is dat moeilijk omdat je daar echt hard aan werkt, echt iets wil laten zien.
Je denkt dan iets net te hebben en dan wordt het 'afgebroken'. Al vind ik dat nog steeds de beste manier, hard en rechtuit. Het wordt je kwalijk genomen maar het is zo.

Waar ik het ook niet volledig eens mee ben. Je design doet er wel degelijk toe.
Als je 2x zelfde content hebt op 1 een mooi design en op 2 een minder, gaat het voor de blinde idd niet veel uitdoen maar voor het over grote deel juist wel. Daarom blijf ik design een heel grote peiler vinden.

Over het valid zijn of niet. Ik heb er me de laatste tijd ook heel druk in gemaakt.
Iedereen die zijn site een keer gaat checken wil onmiddelijk die afbeeldingetjes op zijn site gaan zetten.
Who cares of die afbeeldingetjes daar staan. En zeker als hij uiteindelijk niet meer valid is!!
Ik vind dat eerder een teken van onprofessionaliteit. Er wordt verwacht dat je foutloos kan schrijven.

Binnenkort laat ik ook een nieuwe site checken (als hij klaar is). Ik hoop alleen dat iemand me zo een uitgebreide comment geeft waar ik echt mee voort kan. Dit is iemand helpen naar een beter niveau te geraken en daar moet enkel respect en dankbaarheid van uitgaan.

Ik heb net het netlash artikel gelezen. Vooral de presentatie is goed.
Ze geeft duidelijk weer wat moet geweten zijn. Vooral voor beginnende mensen is dit een mooie richtlijn. Gevorderden zouden dit moeten zien als parate kennis.

Makkelijkste manier om te kijken of een site semantisch in orde is is gewoon de css-file even afzetten. Als de inhoud vervolgens logisch opgedeeld is en duidelijk weergeeft welke functie elk woord heeft is het al een zeer grote stap in de goede richting.

Ik heb een paar jaar terug multimedia gestudeerd en dus ook wel een portie frontend webdesign en -development achter de rug. Maar eerlijk gezegd ben ik er al een tijdje niet zo hardcore meer bezig. Het enige webgerelateerde waar ik zelf nog aan knutsel is mijn eigen blog. Ik zie mezelf dus zeker niet als professional meer.

Desalnietemin volg ik je wel in je standpunten. Gebruiksvriendelijkheid en overzicht draag ik ook hoog in het vaandel. Zowel in design als layout. Ik haat sites met duizenden linkjes verspreid over 3+ kolommen en talloze menubalken. Als ik een site opbouw probeer ik echt alle info in maximaal 3 klikken beschikbaar te maken. Een goede zoekfunctie vind ik vandaag de dag ook steeds meer een must voor een goede site.

Qua semantiek en validatie ben ik echter geen expert. Waarschijnlijk gewoon te wijten aan een gebrek aan kennis erin. Maar de ambitie is er wel om er iets aan te doen, want het is gewoon voor iedereen een goede zaak. Developer, bezoeker, SE's ... allemaal hebben ze er baat bij.

Maar je hebt dus zeker wel gelijk, het kan soms echt ergerlijk zijn om te zien hoe sommigen hun werk de hemel in prijzen maar in realiteit zo wankel is als een Jenga-toren. De uitdrukking "beter goed gejat dan slecht bedacht" is er eentje die in webdevelopment zeker niet misstaat naar mijn mening.

Off-topic: Smoerf, kan da zijn da gij regelmatig in Ice-Mountain te vinden zijt? De cécémel-muts oa doet mij vermoeden

netlash zei:

Ikzelf (en mijn collega's) heb een 'holistische visie' op webdesign.
Design, technologie en usability zijn drie poten onder dezelfde stoel. Haal 1 van die poten weg, en de stoel zakt ineen.
Zie ook onze filosofie: Usability - Netlash Webdesign

Als het over webstandaarden gaat... Uiteraard is propere, onderhoudbare code van belang (als het bijvoorbeeld over SEO of accessibility gaat). Maar valideren is een middel, het is nooit een doel op zich.

Klik om te vergroten...

ik ga hier grotendeels mee akkoord, vooral de laatste zin is heel mooi.
Soms is het niet meer mogenlijk om validatie te garanderen, en ik denk nu bv aan projecten in gigantische CMS'en of SharePoint etc, waar je van in het begin al bijna je programma moet wurgen om hem in StandardCompliance mode te krijgen, waar die standaard in quircks staat ( in anno 2008 ... gg Microsoft )

het een streefdoel om ten alletijde optimale code af te leveren, niet alleen ben je an ook zekerder van je resultaat op verschillende platformen, alsook naar updates / aanpassingen is dit veel handiger

In princiepe ga ik ook akkoord met wat TS hier allemaal neerschrijft maar praktijk leert me soms ook anders...
Ik ben meer een webapplication developer dan een webdeveloper. Momenteel zit ik in een multinational waar ik het intranet moet aanpassen enzo (niet qua inhoud maar features). Alhoewel ik de regeltjes enzo allemaal ken, kan en mag ik ze niet toepassen zoals ik het wil.

Het intranet is hier ontwikkeld met Oracle Portal. Het CMS van Oracle dus. Het biedt een aantal mooie features en het laat het toe om op een gemakkelijke manier eigen portlets te gaan schrijven. Wat is nu het probleem... De architectuur van het systeem laat me weinig vrijheid toe. Als ik een stijl nodig heb die niet gedefinieerd is in de standaard css dan moet ik zelf mijn <style>.. gaan schrijven en zo heb ik ook een eigen bib. Alleen... wanneer die opgeroepen wordt is 3/4de van de pagina al geladen en daar kan ik weinig aan doen...
Je krijgt dan zo iets in de code:
<table....>
<style>
...
</style>
rest van tabel

Allesbehalve proper maar ik kan niet ander. Als ik het goed wil doen en de style.css aanpassen dan moet ik eerst elvendertig workorders aanmaken, zevenveertig approvals krijgen omdat het een cruciale file is en we daar zeer voorzichtig mee moeten zijn voor we het naar productie moeten zetten...

De templates worden opgebouwd door het systeem zelf. We definieren een aantal regions maar de rest doet het CMS zelf. Het feit dat we enkel tables hebben en geen divs kunnen we hier dus ook niet aanpassen.

dan is er ook nog iets als een hierarchie... De mensen van de business die de beslissingen moeten maken hebben er hun eigen idee op. Als wij als developers samen met designers zeggen dat het geen goed idee is om belangrijke content in een rechterkolom te zetten dan luisteren ze er niet naar want zij vinden het "mooi".

In theorie is het allemaal wel leuk die regeltjes en richtlijnen en in kleine KMO's waar de meerderheid "correct" denkt, maar in een multinational waar de mensen die beslissingen nemen niet luisteren naar de mensen die er verstand van hebben dan ben je er niet veel mee...

idd, groot verschil met een kleine KMO

Ikzelf doe zelden zelf de echte frontend (ben barslechte layouter). Als ik al op development meehelp is het doorgaans backend. Maar ik 'ontwerp' bij bijna elke site waar ik aan meewerk bijna altijd de interface (dus hoe de gebruikersinteractie verloopt).

Smoerf zei:

Ik wil eerst volgende zaken duidelijk maken:
- gedurende 2 jaar ben ik professioneel frontend developer (en vanzelfsprekend al langer bezig dan 2 jaar met het web)
- ik vind mezelf allesbehalve een guru of betweter

Dit gezegd zijnde wil ik eens polsen hoe andere webdevelopers kijken naar de hedendaagse markt.

De laatste tijd erger ik me meer en meer aan de doe-het-zelver of de student-professional-in-wording die hun brouwsels ten grabbel werpen op het wereldwijde web en géén rekening houden met afspraken, regels, standaarden what-so-ever. Al te vaak worden argumenten als:
- ik kan dat niet weten ik ben student
- ik heb geen blinde / slechtziende bezoekers
- mijn maten / docenten / whatever vonden het goed
- toon anders eens wat werk van jezelf in plaats van kritiek te geven

Klik om te vergroten...

Ten eerste: guru's zijn er niet in deze markt, de hele wereld van webdevelopment verandert nog steeds om de x-aantal jaar. Iemand die 5-jaar geleden websites ontwierp is een complete leek nu. Onderschat uw 'korte termijn'-kennis echt niet.

Ikzelf focus me ook bijna nooit op blinde/slechtziende bezoekers. N/o, ma de moeite weegt niet op tegen de winst, de sites waar ik tot nu toe heb aan meegewerkt hebben een publiek waar slechtzienden/blinden vaak veel minder dan een promille bedragen. Als je dan geen tijd teveel hebt ga je je tijd in optimalisatie van andere zaken steken. Dat is cru gezegd pure business. Colruyt gaat ook zijn winkels niet hyperfancy maken om de kakmadammen aan te trekken, das gewoon geen belangerijke doelgroep.

Natuurlijk kan gebruiksvriendelijkheid voor deze mindervaliden doelgroep direct volgen uit semantiek, maar daarover later meer.

Smoerf zei:

Mijns inziens valt een website (puur frontend dan) uitéén in een paar grote brokken zijnde:

Layout
Het doet er niet toe hoe slick je layout is en hoezeer je je photoshop skills tentoon spreidt in je layout, bovenal moet een website doen wat hij moet doen en dat is inhoud op een gebruiksvriendelijke manier weergeven aan je bezoeker. Om nog maar niet te spreken van usability en user experience. De layout mag mijns inziens nog zo gelikt zijn als het maar kan, als de uiteindelijke doelgroep zijn weg niet terugvindt dan haken ze af en zoeken ze hun informatie wel ergens elders.

Klik om te vergroten...

Kan ik mij volledig in vinden, ik haat informatieve websites die er immens fancy uitzien maar waar ik 100x moet klikken voor ik men info heb. In die gevallen pak ik meestal een echt minimalistische aanpak en houd ik me zoveel mogelijk aan de 3-clicks regel.

Smoerf zei:

Content
Hier rond draait alles, je website staat of valt met de inhoud die je je bezoekers voorschotelt. Het web is geen boek van 300 bladzijden, de bezoeker heeft geen zin in uren leesplezier, hij wil lezen wat hij wil weten, kortom, een beknopte opsomming van zijn probleem. Een vlot lezend geheel met de nodige links om de bezoeker zijn nieuwsgierigheid verder aan te wakkeren, hem uitnodigen om door te klikken op je webpagina. Het liefst van al nog volledig semantisch en xhtml valide gepresenteerd. Het hoe en het waarom kun je op genoeg pagina's lezen, maar om ze even op te sommen:
1. voor blinden en slechtzienden
2. zoekmachines
3. Tim Berner Lee's visie

Klik om te vergroten...

Ik vind dat dit heel afhankelijk is van het type website dat je wilt maken. Uw content zal in véél gevallen immers al vastliggen (bv. informatieve websites voor bestaande organisaties). Daar moet je niet altijd pakken: maak het interessant om door te klikken, je kan ook kiezen om de belangerijkste informatie (bv. menu bij een restaurant) op de voorpagina te zetten. De info die 90% van uw bezoekers nodig hebben. Ik ben niet van mening dat uw aantal personen die doorklikken de kwaliteit van uw website bepalen, maar het aantal personen dat terugkeert naar de website. Als 80% van de mensen nooit doorklikt van de home-page maar wel bijna allemaal terugkeren naar uw site dan zijde imho het beste van al, want uw belangerijkste info is zeer snel te vinden. Maar zoals gezegd: dit is heel afhankelijk van type website & niet zomaar te veralgemenen.

Valid code is belangerijk, maar browser-compabiliteit nog belangerijker. Dat de site goed werkt voor 99.99% van je bezoekers is echt stukken belangerijker dan dat xhtml-valid icoontje ofzo. Natuurlijk hangt valid code en werkende code vaak samen, uw site moet grotendeels valid zijn, anders kom je simpelweg veel te snel in de problemen om het cross-browser in orde te maken.

Nu, 'semantiek', hét buzz-woordje van het laatste half jaar ofzo. Semantiek is belangerijk, maar ik ben niet meer mee in welke zin men het tegenwoordig nog gebruikt. De originele zin van semantiek is duiding geven (bv. metadata bij multimedia geeft een vorm van semantiek).

Als we naar semantiek op zich kijken binnen de webwereld dan is er imho maar 1 belangerijk punt en dat is uw site optimaal te maken zodat een machine uw site correct kan interpreteren. Dus de plain old betekenis van: duiding geven aan uw content. Als er ergens een lap tekst staat dat het duidelijk is dat dit een recentie is, een blogpost is, een welkom-tekst is, ... .

In die context vinden we als belangerijkste zaken: search-engines en translation apps. Translation apps in alle vormen dus, die uw website beter maken voor slechtzienden/blinden, maar ook die uw website automatisch kunnen converteren naar mini-versies voor bv. mobiele telefoons.

Imho is zoiets heel belangerijk, maar er is nog te weinig eenduidigheid. Er heerst momenteel veel te veel een soort van 'algemene consensus' wat betreft semantiek en veel te weinig een echte standaard (zoals metadata).

Binnen html zelf kan je imho maar op een paar manieren met semantiek omgaan. Dit is het gebruik van correcte structuren (divs, tables, headers, ...), wat al een immense meerwaarde kan leveren aan browsers en dergelijke en hoe deze structuren onderling geordend staan. Als standaard test bekijk ik mijn sites eens in links of links2 (tekst-based browsers). Als ze daarin 'werkbaar' zijn kan je ervan uitgaan dat je onderlinge structuur al vrij proper is (dat wilt nog niet zeggen dat je de correcte elementen gebruikt, maar ook daarin kan tekst-based browsen je helpen).

Het is echt schrijnend trouwens hoe weinig sites deftig worden weergegeven in links .

Smoerf zei:

Behaviour
Javascript features zijn bijkomend en mogen op géén enkele manier je content gaan wijzigen. Het dient enkel als enhancement. Ajax is geen überhippe technologie die frames vervangt. Ajax is niet voor content, ajax is voor acties.

Klik om te vergroten...

Dat is hetgene waaraan ik mij sinds de web2 hype het meest van al geërgerd heb. Nu vind ik de enkel-als-enhancement wat overroepen (soms kan het zijn dat ajax echt je interactiviteit definieert - kijk naar google calendar).

Een ander aspect dat hier niet besproken wordt is uniformheid. Ik vind het persoonlijk vrij dwaas dat vele sites voor gelijkaardige data-structuren die echter tot een semantisch ander onderdel behoren totaal verschillende layouts hebben (ik zeg maar iets: detail pagina van een nieuwspost en een recensie). Dat is imho immens ongebruiksvriendelijk.

Ik vind dat per type content een consistente layout moet gebruikt worden op je site. Dus geen 10 vormen om lists weer te geven, geen 5 vormen om een lap tekst weer te geven, ...

@killgore, consistente layout Check anders eens dit artikel:

Designing Web Interfaces: 12 Standard Screen Patterns