Het beroep front-end developer is nog relatief nieuw. Het gaat hierbij om het bouwen van de ‘voorkant’ van een website, het zichtbare deel voor de bezoeker. De front-end developer werkt samen met designers en developers, dus op het raakvlak -of spanningsveld- tussen creativiteit en techniek.
Vaak werden en worden front-end taken zoals HTML, CSS en JavaScript erbij gedaan door een webmaster of back-end developer. Maar het vakgebied wordt steeds breder en ingewikkelder, en er zijn steeds meer ontwikkelingen om bij te houden. Niet alleen (puur) technisch, maar ook qua toegankelijkheid en gebruiksvriendelijkheid (usability). Steeds meer bedrijven hebben daarom front-end specialisten in dienst.
Een greep uit de aspecten waar je rekening mee moet houden:
– Het CMS: hoe moet je je templates opbouwen, wat voor front-end code wordt er door het CMS zelf gegenereerd, welke aanpassingen zijn er mogelijk?
– Doctype: XHTML, HTML4 of HTML5? Wat voor content en functionaliteit komt er op de site? Het nieuwste -HTML5- is niet altijd automatisch ook de beste keus.
– Mobiel: web-apps of native apps? Wat voor content wil je laten zien op een mobiele telefoon of tablet en wat op de desktop? Moet er wel onderscheid zijn voor de bezoeker? Wat kan al wel en niet met HTML5?
– Het gebruik van CSS(3) en beschikbare fallback voor oudere browsers: webfonts, css-animaties, mediaqueries voor een aanpasbare layout (responsive design) op verschillende devices.
– JavaScript animaties, SVG, canvas: waarvoor heb je nog plug-ins nodig zoals Flash en waarvoor niet? Wat zijn de voor -en nadelen van de nieuwe technieken qua ondersteuning, performance en toegankelijkheid?
– SEO: Hoe bouw je de HTML-structuur op? Wat doe je met je headings? Wat doe je met content in Flash of video? Is alles ook zonder JavaScript te zien voor de zoekmachine? Kunnen webredacteuren wel de gewenste meta-informatie meegeven aan hun artikelen? Is het handig er Microformats in te verwerken of is het toch beter in te zetten op het nieuwe Schema.org?
– Toegankelijkheid: Mooi, zo’n Googlemaps implementatie op je site, maar kun je het ook met een toetsenbord bedienen? En wat zie je zonder JavaScript of met alleen een tekstbrowser? Is de betekenis van de knoppen ook duidelijk zonder kleur en zonder afbeeldingen? Hebben links duidelijke beschrijvingen en niet alleen ‘meer info’?
– Zijn er extra kwaliteitseisen (Webrichtlijnen) bijvoorbeeld over onderhoudbaarheid of open specificaties? Hoe kun je hier aan voldoen?
– Performance issues: er kan steeds meer qua dynamische en generated content: slideshows, uitklappende artikelen, live updates, social media… Maar alles zomaar opstapelen is niet verstandig omdat de site dan een lange laadtijd kan krijgen -wat ook weer de resultaten in Google kan beïnvloeden. Hoe ga je hier mee om?
– Hoe leg je browserverschillen uit in de foutmeldingen van (HTML5) formulieren? Of hoe leg je uit dat alles hetzelfde eruit laten zien in zowel Safari als IE6 veel extra uren gaat kosten? (En misschien ook niet handig is voor de bezoeker die aan bepaald browsergedrag gewend is?)
In het kort: een goede front-ender zorgt ervoor dat de website, inclusief een strakke vormgeving met vele (dynamische) elementen en verschillende template-variaties, er goed uit ziet en goed werkt op vele mogelijke resoluties, devices en operating systems, met en zonder Flash en JavaScript, met ‘normale’ en met sterk ingezoomde tekst, met en zonder speciale fonts, met en zonder afbeeldingen, met laag en hoog kleurcontrast, in nieuwe en oudere browsers, en ook nog snel laadt en goed gevonden wordt door zoekmachines.
Een recente (2016) aanvulling op dit artikel is te lezen op de pagina front-end development.
Goede omschrijving van “ons vak”. Deze bookmark ik voor als ik weer iemand moet uitleggen wat ik nu eigenlijk doe 🙂