Week 4

Image

En we zitten al in de helft van de stageperiode! Afgelopen week was een korte week met veel variatie in de opdrachten. Ik heb mijn tijd besteed aan drie hoofdopdrachten:
• variaties op boekhoudkantoor logo
• projectleiding website verder responsive maken
• redesign van de website ‘Le clos du papoune’

Welke problemen heb ik ondervonden en hoe heb ik die problemen opgelost?

• Responsive: hoofdmenu overkill
Het hoofdmenu responsive krijgen op elke resolutie wilde maar niet lukken. Ik had de html-code te complex geschreven met absolute en relative positioning gemixed en een overdosis geneste <divs>.

• Responsive: data tables
Ook de data tables werden niet juist getoond op mobile view.

• Display none vs. mobile first
Een ander probleem waar mijn collega en ik op botste was het gebruik rond ‘display: none’ in een responsive webomgeving. De bedoeling was om het onderdeel met de grote background-image te verbergen in de media querie voor de mobile viewport. Dit hebben we getest met Mobitest, een handige performance tool te vinden op deze link. Hier konden we uit afleiden dat elementen die worden verborgen aan de hand van deze methode toch geladen zullen worden ondanks de visuele afwezigheid in de browser.

Wat heb ik deze week geleerd?

• Wanneer een probleem niet opgelost geraakt:
Afstand kunnen nemen van een probleem en verder werken aan een andere opdracht. Ondertussen kan een collega het probleem bekijken en mogelijk wel een oplossing vinden.

• Keep it simple:
Het aantal geneste <div> niveaus beperken tot het minimum.

• Don’t waste time:
Css media queries direct schrijven per onderdeel (hoofdmenu, midden, footer) en niet eerst heel de website coderen voor desktop.

• Responsive data tables:
Een mogelijke oplossing voor responsive tables heb ik op deze link gevonden

• Rekening houden met de toegankelijkheid van responsive websites:
Om de methode van ‘display: none’ te vermijden (gewoonweg omdat deze niet deugd), is het geen slecht idee om bij de volgende website de mockups eerst te coderen voor de kleinste device (mobile) en vervolgens de content uit te breiden met css media queries voor viewports die daarop volgen (van klein naar groot). Meer over mobile first vs. display:none vindt u op deze link en deze link.

Drie kernwoorden van deze week:
• media queries
• mobile first
• redesign

Logboek:

logboek_week_4