Week 7: slicing
Deze werkweek ben ik non-stop bezig geweest met het slicen van de homepage. Met vallen en opstaan weliswaar, want niet alles ging van een leien dakje! De basis werd behoorlijk snel opgemaakt in html en css, doordat het meeste (design)werk pas binnen de rijen en kolommen gedaan wordt. Maar zover zijn we dus nog niet…
We starten het slicen, rij per rij, bovenaan de pagina in het allerkleinste schermformaat. (Mobile first!) Daar komen we al meteen de lichtblauwe overgang tegen op de achtergrond en vanaf de ipad schermresolutie komt er ook een subtiel blauw lijntje bij, net zoals de Inventis website dat heeft. Wat dit betreft heb ik van Tom weer wat extra CSS3-info mogen verschaffen.
Vervolgens komen we aan de navigatie toe; iets waar ik met het werken in Bootstrap al achterkwam hoe ingewikkeld een (correct) horizontaal gecentreerde menu wel niet kan zijn. Bij de opmaak hiervan heeft Tom me ook met pseudo-elementen leren werken. Daarmee kan je een grafisch element aan desbetreffende selector(s) toevoegen. Eens dit op punt stond diende zich terug wat opruimwerk in de code op. Enkel voor de navigatie had ik al tal van elementen benoemd en omschreven die dan na bewerking niet verwijderd werden, waardoor de lijnen code zich serieus opstapelden. LESS maakt het net interessant om met behulp van Mixins en Variabelen je code overzichtelijk, kort en bondig neer te schrijven… Dus ook dit werd optimaal benut en de lijnen met code werden aanzienlijk ingekort!
Volgende week gaan we verder met de volgende rij in het ontwerp, wat de ‘projecten’-balk zal zijn. Stijn heeft me al getoond hoe ze hier bij Inventis omgaan met het gebruik van responsive images, want dit wordt op diverse manieren toegepast, maar ik was erg benieuwd aan wat ze hier intern de voorkeur aan gaven en waarom. Aangezien de laadtijden van de pagina erg belangrijk zijn, voornamelijk voor mobile, moeten de afbeeldingen geoptimaliseerd zijn voor desbetreffende schermresoluties. Maar volgende week meer hierover, als we ons pas écht verdiept hebben in deze materie!