Mobile First Interactie 📱
Ik merkte al snel dat bij mobile-first werken, je snel problemen krijgt met de layout. Hierdoor heb ik de eerste pagina desktop-first gebouwd, en vervolgens responsive gemaakt tot een mobiel formaat. Dit was natuurlijk niet de bedoeling, maar niet getreurd! Ik moest toch nog een pagina maken!
Voor de 2e pagina heb ik mij wel goed aan mobile-first gehouden, alleen vond ik het niet erg prettig werken. Ik wil altijd graag alles mooi maken, en om dan gelijk te beginnen op een smal scherm gaf mij wederom problemen met de layout. Alleen deze keer heb ik mij hier doorheen geslagen! En met een aantal media-queries is het me toch gelukt om mobile-first een volledig responsive website te maken.
De conclusie die ik hieruit kan trekken, is dat ik liever niet mobile-first aan de slag ga.
Je ziet de knop "Luister live" in de navigatiebalk staan. Dit is feed-forward, het laat zien dat je live kunt gaan luisteren zodra je op de knop klikt. Als feedback komt er een mediaplayer in beeld te staan, waar je naar de live-radio van het BNR kunt luisteren.
Om deze interactie te realiseren heb ik gebruik gemaakt van zowel HTML, CSS als Javascript. In de HTML heb ik een aparte 'section' gemaakt die ik verberg onder de navigatiebalk. Deze bevat een aantal 'divs' om een 'grid' op te stellen, waardoor ik alle elementen simpel kan positioneren binnen de mediaplayer. Hierbij heb ik alle elementen hun eigen 'class' of 'id' gegeven om deze via CSS gemakkelijk aan te kunnen spreken.
Over CSS gesproken, voor de mediaplayer heb ik een aantal properties moeten geven aan de gebruikte 'section'. Denk hierbij aan een achtergrondkleur, wat padding, maar ook een z-index om de mediaplayer daadwerkelijk achter de navigatiebalk te verstoppen! Ook is in de onderstaande afbeelding te zien hoe ik de 'grid' heb opgezet. Verder heb ik ieder element wat algemene styling en een 'grid-area' gegeven, allemaal om tot dit eindresultaat te komen.
En dan als laatste, de Javascript. Hier kwam niet veel bij kijken. Ik maakte de constanten aan om de elementen een functie mee te kunnen geven, en daarbij vertelde ik de elementen dat zodra er op ze geklikt word, de audio moet gaan afspelen. Dit heb ik gedaan met een if/else statement, omdat hierbij ook het icoontje moet veranderen. Dus als de muziek aan het spelen is, moet er een pauzeknop zijn, en als de muziek op pauze staat, moet er een play knop zijn.
