5 tips voor een duurzame responsive website

-

Toen ik 11 jaar geleden begon met werken bij een klein internetbureau maakte ik websites voor kleine bedrijven en actiematig werk dat een korte levensduur had. Schaalbaarheid was niet relevant en ook aan herbruikbaarheid werd weinig aandacht besteed. Allemaal prima, de focus lag op snelheid, en die snelheid werd bereikt! 5 jaar geleden ben ik bij Incentro gestart. Met corporates als klanten merkte ik al snel dat webdevelopment voor deze organisaties absoluut andere koek is.

Hoewel de smartphones zoals we die nu kennen al zo’n 8 jaar onderdeel zijn van ons dagelijks leven is nog lang niet elke corporate (volledig) voorzien van een moderne responsive website. Ik ken veel bedrijven waar het redesign van de website op dit moment in volle gang is. Het realiseren van zo’n responsive website kan op 100 verschillende manieren worden aangevlogen. Dat is op zich fijn, maar op welke manier lever je een duurzaam product op dat lang mee kan en beheerbaar blijft?

Eigenlijk is het geen rocket science maar toch zie ik dat het in veel gevallen nog mis gaat. Daarom heb ik 5 tips voor het bouwen van een duurzame responsive website.

  • Maak een prototype van je responsive website
  • Bouw je responsive website op met generieke componenten
  • Documenteer je codebase met een stijlgids
  • Maak duidelijke afspraken met het team
  • Bundel je best practices

Maak een prototype van je responsive website

Bij het uitwerken van een nieuwe responsive front-end is het van belang dat je eerst werkt aan een werkend prototype voordat je direct begint aan complexe integraties. Zorg dat je een statisch prototype hebt dat testbaar is en ga daarna pas aan de integratie beginnen. Dit kan uiteraard ook gefaseerd. Het zorgt ervoor dat je de ergste bugs al hebt opgelost voordat je het gaat implementeren, want daarna kan rework lastiger zijn of meer impact hebben.

Bouw je responsive website op met generieke componenten

Om ervoor te zorgen dat de codebase clean blijft en het materiaal herbruikbaar is het raadzaam om te werken met elementen en componenten. Je maakt in feite bouwstenen die op zichzelf kunnen functioneren, zowel visueel als functioneel. Deze bouwstenen moeten te combineren zijn met elkaar om zo verschillende pagina’s op te kunnen bouwen. Maak je componenten niet te groot of complex. Zorg dat het bouwstenen blijven voor applicaties en geen applicaties op zich, anders verlies je flexibiliteit. Het design principe van Atomic Design is hier een mooi voorbeeld van. In combinatie met BEM naming convention kan je een krachtige modulaire front-end bouwen.

Documenteer je codebase met een stijlgids

Een mooie set met componenten is natuurlijk fantastisch, maar het is wel handig als teamleden zoals ontwikkelaars en designers hier ook inzicht in hebben. Want anders bestaat de kans dat het wiel alsnog opnieuw wordt uitgevonden. Er zijn verschillende tools om een stijlgids mee te bouwen, zoals Patternlab of KSS.

Maak duidelijke afspraken met het team

Grote projecten zijn zelden een one-man-show. Zorg dus altijd dat in een team alle neuzen dezelfde kant op staan. Maak afspraken met elkaar over de aanpak en werkwijze. Het toepassen van een methodiek kan hier erg bij helpen.

Een mooi voorbeeld van zo’n methodiek is ITCSS (slides) die helpt om structuur en overzicht aan te brengen in je CSS (of eigenlijk SCSS) codebase. De inverted triangle geeft inzicht in het slim opdelen van CSS styling zodat je project schaalbaar blijft en je minder snel in de inheritance problemen komt. ITCSS is geen tool of boilerplate, maar het zijn een reeks afspraken die je als team met elkaar af kan spreken.

Bundel je best practices

Maak je regelmatig verschillende responsive websites en heb je het gevoel dat je regelmatig hetzelfde trucje doet? Zorg dan dat je een verzameling maakt van best practices die je regelmatig toepast. Bij Incentro werken we al een tijd met de onze eigen Frontend Incubator. Het is een basis project dat we gebruiken bij onze projecten om geen tijd te verliezen aan problemen die we al eerder hebben opgelost. Het is sinds kort open source op Github, dus doe er je voordeel mee!

Bron afbeelding: Vadim Sherbakov / Unsplash