Responsiveness

Een vraag als "hoe zorg ik dat mijn website er mooi uitziet op zowel een smartphone als laptop?" Is na een vragen over systemen voor webshops (b.v. Magento CMS) denk ik wel de meest gestelde vraag. Het is voor veel mensen een belangrijk onderdeel van een goede website. Toch gaan er in de praktijk nog vaak dingen mee mis.

Nou moet er gezegd worden, goede design is ook niet makkelijk om te maken. Ten eerste is er op het scherm van een mobieltje minder ruimte dan op het scherm van een pc, hetgeen de kwestie er niet makkelijker op maakt. Ten tweede zijn veel mensen die de technische kennis wel hebben om het goed te kunnen maken vaak back-end developers en die zijn veelal sterker in programmeren dan in design.

Praktijk
In de praktijk komt het er vaak op neer, dat een designer dan vaak een ontwerp maakt in bijvoorbeeld photoshop en dat de developer dit nabouwt in HTML en CSS voor een website, omdat de overgrote meerderheid van front-end developers het zelf niet kan maken. In heel veel gevallen komt dat door een gebrek aan (voldoende) kennis van CSS. En natuurlijk er zijn andere manieren, maar CSS is toch wel de makkelijkste.

In sommige gelukkig meer zeldzame gevallen is de kennis van designer/front-end developers zelfs zo beperkt, dat men in het design niet eens goed rekening houdt met de verschillende schermgroottes, met uiteraard geklaag van de developer als gevolg. Vaak komt dat laatste door een dermate gebrekkige kennis van de designer over hoe groot zo'n scherm nou werkelijk is. Die hoogte en breedte wordt namelijk in pixels gemeten en niet iedere designer weet hoeveel pixels breed of hoog een resolutie van een mobiel is, laat staan die van een laptop. Om het verhaal nog ingewikkelder te maken, die hoogte en breedte wisselt namelijk nogal.

Efficiency

Al met al is dat een inefficiënte manier van werken! Immers twee mensen zijn bezig met hetzelfde ding.

Mensen die dus aanleg hebben voor beide takken, dus zowel front-end design en back-end development zijn daarom ook erg gewild, omdat zij degene zijn, die deze kloof weten te overbruggen. In de praktijk zie je vaak dat dit developers zijn die de kloof overbruggen, immers ze hebben de kennis al in huis en als je ook maar iets van aanleg hebben voor design, zijn zij degene die de klus tot een goed einde brengen zonder dat daar veel overleg voor nodig is, want beide talenten zijn in huis in een persoon. Even heel bot en generaliserend gezegd zijn dit de mensen met de dominante linkerhersenhelft (die houden van rekenen, plannen en beredeneren), die toevallig ook nog wat creatief zijn, welke dus dan het design op zich nemen. Andersom, namelijk bij mensen met de dominante rechterhersenhelft (die houden van beleven, kleur en verbeelding), zie je veel minder vaak dat zij de front-end development dus het echte werk met CSS op zich nemen. Even heel bot en simpel gezegd, ze doen alleen het design in photoshop en meer niet, want meer kunnen ze niet.

De mensen die goed zijn in beide takken van sport, dus noch dominant links, noch dominant rechts, zijn vaak erg intelligente mensen en die zijn zeldzaam. Het zijn dus die zeldzame mensen, die zich bezighouden met in hun perceptie triviale taken, die eigenlijk voor hun zelf weinig uitdaging kennen. CSS is namelijk voor veel programmeurs nou niet de taal die een hoge moeilijkheidsgraad kent vergeleken met bijvoorbeeld de C talen. Daarom is het eigenlijk zonde, dat in de praktijk vaak de beste mensen gezet worden op iets, wat eigenlijk helemaal niet zo moeilijk hoeft te zijn.

Waarom gebeurd dat eigenlijk in de praktijk dan? Mijn vermoeden is dat dit helaas toch te maken heeft met primair voorkeursdenken van iemand met een dominante rechterhersenhelft. Deze zijn dan wel heel creatief, maar missen helaas nou net even die discipline om net dat ene, in hun perceptie, moeilijk dingetje aan te leren. Want tja ook al is CSS relatief makkelijk, het is nog steeds code leren en dus in de ogen van die designer moeilijk, want tja kost veel tijd om te leren.

CSS en Reponsiveness
Ik ken desondanks in de praktijk wel mensen die goed in design zijn en ook een beetje CSS kennen om zich met design van een website voor de makkelijke dingen zichzelf te kunnen redden. Waar het helaas dan toch nog vaak mis gaat is het stukje responsiveness.

Een manier om dat in de CSS voor elkaar te krijgen is door middel van media screen regel, in het vakjargon ook wel een breakpoint genoemd.

Voorbeeld
Stel ik wil voor een bepaald HTML element de styling anders hebben voor scherm breedtes lager dan bijvoorbeeld 800 pixels dan is dat met de media screen rule simpel op te lossen als volgt:

@media screen and (max-width: 800px) {}

hetgeen tussen de {} is dan waar de styling van dat element geplaatst wordt in de CSS file.

Het is dus maar een regeltje code waar het dus misgaat wat betreft kennis. Kan het echt zo simpel zijn? Nou er is helaas nog meer wat moeilijk voor de designers is en dat gaat over het koppelen van kennis met de HTML. Dus nog een voorbeeld: