Week 7

Deze week ben ik van start gegaan met het afronden van mijn eerste geslicete design. Enkele elementen waar ik nog vragen rond had kon ik met wat hulp in orde brengen waarna ik de bestanden heb doorgestuurd naar Stefan, Stijn en Bart ter evaluatie. In de tussentijd heb ik nog wat (voornamelijk semantische) correcties toegepast en enkele foutjes uit de code gehaald aan de hand van de W3C validator.

Feedback

Nadat Stefan en Stijn een blik hadden geworpen op mijn code heb ik even met hen kunnen samenzitten om deze te evalueren. Hierbij heb ik nog een lijstje van tips gekregen van gebruiken die momenteel toegepast worden binnen Inventis en de webwereld. Deze tips heb ik kunnen gebruiken om mijn huidige design te verbeteren en zal ik kunnen toepassen in toekomstig werk. Hierbij heb ik ook hier en daar wat nieuwe informatie kunnen oppikken betreft browserondersteuning en andere informatie waarmee mogelijk rekening gehouden moet worden, onder andere voor SEO-redenen.

Responsive slicing

Hierna werd het tijd om een stapje verder te gaan binnen het slicen: responsive design. Meteen een niveau moeilijker aangezien hierbij continu rekening moet worden gehouden met de volgorde van elementen en op welke manier dit zal veranderen bij een verschillende resolutie, oftewel: op verschillende devices inclusief de mobiele. Niet zo gemakkelijk om aan te beginnen aangezien dit de eerste keer was dat ik een responsive-versie in effectieve code moest verzorgen. Opnieuw heb ik geprobeerd om wat opzoekwerk te verrichten, wat me leerde dat het werken met percentages in plaats van vaste breedtes en het gebruik van media queries veelgebruikte technieken zijn om een responsive design aan te pakken.

Stefan heeft me aan het werk gezet en raadde me aan om te vertrekken vanaf de mobile-first-methode om zo makkelijker over te kunnen gaan naar de designs van een grotere resolutiebreedte. Op sommige momenten ging dit ietwat moeizaam aangezien het vaak echt puzzelwerk is. Soms kwam ik tot de conclusie dat mijn code op zo’n manier was opgebouwd dat een bepaalde positionering van elementen niet mogelijk was en hierdoor genoodzaakt was om bepaalde stukken te herbekijken en deze opnieuw uit te werken. Aangezien ik ook nog niet volledig thuis ben ik HTML & CSS op zich en al de mogelijkheden hierbinnen moet ik soms een tijdje zoeken naar de correcte oplossing voor een bepaald probleem dat zich voordoet. Daardoor heeft het proces van het slicen van deze responsive-versie tot nu toe vrij veel tijd gekost, maar dat hoort erbij en is nodig om bij te leren. Ik ben klaar voor de volgende week!

1 reactie

  • Stijn Janssen

    Responsive design maakt slicing met factor 10 complexer. Maar dat gaat voor jou geen enkel probleem vormen. Je neemt de tips die we geven goed op en past ze ook direct toe. Goed bezig!

Reactie plaatsen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

*