Tag: css3

Het vak van de webbouwer en online marketeer wordt steeds leuker en uitdagender!

“Het vak van de webbouwer en online marketeer wordt in ieder geval steeds leuker en uitdagender!” dat schreef @qtag_qrcode in een reactie op het artikel    Responsive design, development en content in één flexibele aanpak. Inderdaad refereert hij daarbij terecht aan: 60% van internetverkeer is mobiel (zie het CBS persbericht van 23 oktober). Voor webbouwers is dit inderdaad een uitdaging. Of het ook leuker en uitdagender wordt, browsers, schermresoluties ondersteunen doen we al sinds we websites bouwen.

De benadering van content first is wel nieuw en interessant. En ik zou zeggen uiteraard kunnen we daarbij niet meer zonder de ‘responsive gedachte’. De meeste webbouwers denken bij responsive toch steeds aan de CSS3 media queries. Wat mij betreft zou het (weer) meer de breedte in mogen.

Uitgaande van CSS3 media queries geeft @nielsvanmidden ook als reactie op het bovengenoemde artikel een mooi overzicht van breekpunten. Een breekpunt is een minimale of maximale schermbreedte waarop je de weergave van je site aanpast. Je kunt dat heel strict toepassen, waarbij je je aandacht vooral richt op het device; bijvoorbeeld … pixels breed is een tablet in landscape mode. Een meer flexibelere aanpak wordt voorgesteld in Responsive Design: Why You’re Doing It Wrong. In dat artikel wordt voorgesteld je breekpunten te bepalen op wat je ziet in de browser(s) naarmate je het window verkleint of vergroot. Daarbij wordt dan ook meteen weer aandacht gevraagd voor de ondersteuning voor verschillende browsers. Microsoft ondersteunt media queries bijvoorbeeld pas vanaf IE9.

Hoe je uiteindelijk je breekpunten ook samenstelt in beide benaderingen kun je werken van klein naar groot of andersom. Per breekpunt kan ook de content aangepast worden. Verschillende breekpunten zullen vragen om het weglaten, toevoegen of herpositioneren van content. De contentkeuze wordt moeilijker bij een responsive benadering vanuit schermbreedte i.p.v. het soort device. Want zoals in 11 Reasons Why Responsive Design Isn’t That Cool! (punt 10) wordt aangegeven is het soort apparaat vaak bepalend in de behoefte van de gebruiker. De andere 10 genoemde redenen mogen ook niet onderschat worden. Schalen van plaatjes, elementen verbergen op basis van media queries optimaliseren de laadtijd van de website niet. De laadtijd, juist ook voor de mobiele gebruiker zo belangrijk, wordt overbodig lang doordat onnodige en onnodig grote bestanden geladen worden.

Voor een goede gebruikerservaring lijkt de inzet van media queries op termijn dan ook niet toereikend. Alternatief om toch weer aan de serverkant aan de slag te gaan. Mensen die met WordPress werken zouden bijvoorbeeld eens naar de wp_is_mobile()  functie kunnen kijken. Daarmee is het mogelijk om aan de serverkant vast content te schalen, tonen of juist niet tonen. Ook dit past prima in een content en / of mobile first benadering. Het combineren van client- en serveroplossingen vormt mogelijk een goed compromis tussen een losstaande mobiele website en een volledig op media queries gebaseerde responsive website.

Ook Jamedo Websites bouwt nu, mede op mijn advies, responsive designs op basis van media queries. Dat was reden genoeg om deze benadering nog eens kritsich te bekijken. En hoe ziet jouw website er eigenlijk uit op een mobiele telefoon of tablet? Via Responsinator.com kun je hiervan snel een goede indruk krijgen.

 

Standaardisering van WordPress theme ontwikkeling

Jamedo Websites ontwikkelt voor haar klanten websites in WordPress. Ook biedt Jamedo Websites webdesigners de mogelijkheid om hun ontwerpen, white labelled te laten uitvoeren en beheren. WordPress wordt hier ingezet als content management systeem. Voor de opmaak van een website met WordPress wordt gebruik gemaakt van een zgn. theme. Een theme is gescheiden van de rest van de code. Er is echter geen stricte scheiding tussen code en design. Ook in een theme kan PHP worden gebruikt. Qua beveiliging vormt dit laatste een extra risico.

De gekozen opzet van WordPress maakt het mogelijk themes onafhankelijk te ontwikkelen. Binnen een bestaande WordPress installatie kan zonder verdere wijziging van content of functionaliteit een andere theme worden gebruikt. In de praktijk ondersteunen niet alle themes dezelfde functies en kunnen bij het wisselen toch functionaliteiten verloren gaan.

Voor haar klanten ontwikkelt Jamedo Websites op basis van het gewenst ontwerp dus ook steeds een uniek theme. Om een theme te ontwikkelen worden steeds een aantal stappen doorlopen. Deze stappen zijn steeds hetzelfde. De verschillende stappen kunnen door verschillende mensen worden uitgevoerd. Door het proces te standaardiseren, kunnen designers, slicers en programmeurs beter samenwerken. Tevens wordt de gebruikte code van de theme herbruikbaar, wat in de eerste plaats de kosten drukt en in de tweede plaats zorgt dat het werk makkelijker over te dragen is.

Aan mij de opdracht om een voorstel te doen voor deze standaardisering

Het proces

De meeste websites beginnen met een interaction design. Op basis van het interaction design levert een ontwerper een ontwerp voor de website. Ontwerpen worden in 90% van de gevallen aangeleverd in Photoshop (.psd) bestanden. De volgende stap is basing / slicing. In deze stap wordt het ontwerp omgezet naar geldige html-code. Jamedo Websites levert al haar projecten responsive op. Dit wil zeggen dat de website werkt op een PC, tablet en mobiele telefoon, zonder verlies van functionaliteit. Vanwege de responsiviteit wordt de html-code opgeleverd in html5 met css3. Op basis van de geleverde html-code wordt vervolgens een WordPress theme gemaakt. Deze stappen worden uitgevoerd door verschillende mensen. Per stap kan nu gekeken worden volgens welke standaards gewerkt kan worden en hoe deze stappen het beste op elkaar kunnen worden aangesloten.

Basiselementen
Voor de eerste twee stappen, het interactie design en het websiteontwerp heb ik in kaart gebracht welke onderdelen voor elke website ontworpen moeten worden. Dat zijn de volgende onderdelen:

  • voorpagina
    • twitterfeed
  • subpagina met tekst (full)
    • social media buttons
  • pagina met twee kolommen
  • pagina met drie kolommen
  • contactformulier
  • reactieformulier / reacties
  • form elementen; textarea, radio buttons, checkboxes, select boxes, buttons
  • tekst elementen; h1 t/m h9 headers, strong, emphasized, paragraaf, quote, code

Uiteraard hebben alle pagina’s een header, footer en een content deel. Naast de basiselementen levert de designer ook een klantspecifiek ontwerp op, wat per definitie niet alle basiselementen hoeft te bevatten.

Standaardisering van de html- en css-code

Ook voor responsive design zijn er inmiddels diverse frameworks die direct kunnen worden ingezet als basis. Enkele voorbeelden zijn Gumby Framework en Yaml. De laatste tijd is op dit gebied ook de Twitter Bootstrap CSS framework sterk in opkomst. De keuze voor een vast framework en grid, zal ook de interactie- en webdesigner helpen. Het Grid vormt dan immers ook de basis voor het ontwerp.

Het ontwikkelen van het theme

De juiste manier om themes te ontwikkelen is het creëren van een zgn. child theme op basis van je basis of parent theme. Dit stelt je in staat de basisfuncties te updaten zonder dat je eigen code overschreven wordt. Zoals ik eerder al aangaf, heeft het opnemen van PHP code in de themes risico’s. Een goed opgezet theme structuur zorgt ervoor dat je code uptodate blijft en eventuele security problemen doeltreffend kunnen worden opgelost. Lees ook: Blogging Pitfalls: Why You Should Update Your Themes (and Use Child Themes)

Eindconclusie

Mijn advies aan Jamedo Websites is een css framework te kiezen en op basis daarvan een parent theme te ontwikkelen. In plaats daarvan zou eventueel ook een bestaand parent theme gekozen kunnen worden. Goede kandidaten lijken dan XXtreme theme (op basis van yaml) of WordPress Bootstrap (op basis van Twitter Bootstrap). De juiste keuze wordt gemaakt in overleg met de verschillende ontwikkelaars en designers. Mijn persoonlijke voorkeur gaat uit naar de Twitter Bootstrap. WordPress Bootstrap is op zijn beurt weer afhankelijk van het Bones theme framework. Om een te grote afhankelijkheid te voorkomen lijkt het daarom tevens verstandig het basis theme zelf te ontwikkelen en onderhouden.

Bij een keuze voor Twitter Bootstrap kan nog gekeken worden naar WordPress Twitter Bootstrap CSS. Deze plugin kan helpen reeds ontwikkelde projecten sneller naar de standaard te brengen.

Ondanks de standaardisering blijft het belangrijk hierin flexibel te blijven. Het gehele proces dient continu geëvalueerd en verbeterd te worden. Zo is het belangrijk bijvoorbeeld de eerder genoemde basislijst van elementen, actueel te houden. Blijkt achteraf voor een klant iets te missen, kijk dan of het niet bij de basiselementen hoort en andersom wordt er nooit een twitterfeed gevraagd schrap deze dan.