Statisch of responsive webdesign (Fixed & Fluid Width)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

Websites worden op verschillende schermformaten weergegeven.

Dat betekent dat de layout op de pagina zich automatisch moet gaan aanpassen aan het scherm.

Dat noemen we responsive layout.

De basis hiervoor is een ‘fluid’ website. Ga naar File > Site Properties.

Toen we begonnen in deze cursus hadden we bij het aanmaken van het webdocument.

De keuze voor een ‘Fluid Width’ of een ‘Fixed Width’.

Kies je voor ‘Fixed Width’ dan krijgen standaard alle pagina’s in je document een vast formaat.

Is het beeldscherm kleiner dan de pagina.

Dan zal een deel gewoon niet in beeld verschijnen.

Ik zal het verschil laten zien.

Ga naar de Plan Mode van de website.

Klik met de rechtermuisknop ingedrukt op een pagina.

Kies uit het contextuele menu voor Page Properties.

Want per pagina kun je namelijk ook bepalen of je deze 'Fluid' of 'Fixed' wilt.

Hij staat nu op ‘Fluid’. Want dat was de basis voor deze website.

Oke. Open de pagina en bekijk het resultaat in een browser.

Ga naar File > Preview Page in Browser.

De pagina ziet er prima uit.

Maak dan het scherm smaller.

Alle elementen op de pagina beginnen proportioneel en verhoudinggewijs te schalen.

Ziet dit er mooi uit? Nee, maar alle content probeert zich wel op de één of ander manier zo goed mogelijk...

...binnen het browservenster te tonen.

Teksten en afbeeldingen kunnen elkaar gaan overlappen.

Dus er is nog wel werk aan de winkel om deze pagina echt goed responsive te maken.

Iedereen begrijpt dat de vormgeving op een mobiel er heel anders uitziet dan op een tablet of computer.

Een drie-koloms opmaak is voor mobiel niet aan te raden.

Keren we weer terug naar de Plan Mode van onze website.

Klik met de rechtermuisknop ingedrukt wederom op de pagina.

Kies uit het menu voor de Page Properties en wijzig Fluid in Fixed. Klik op Oke.

Open de pagina en bekijk deze in de browser.

Maak opnieuw het venster smaller.

Wat gebeurt er met de inhoud? Helemaal niets.

Deze schaalt niet om maar binnen het smalle venster te passen.

Nee wat niet past verdwijnt gewoon uit beeld.

Alleen als je een webproductie maakt voor een specifiek schermformaat.

Dan zou je de optie ‘Fixed’ kunnen gebruiken.

Maar voor publieke webproducties, die kunnen worden bekeken op elk soort apparaat, is deze optie natuurlijk niet bruikbaar.

We keren weer terug naar ons project.

Zorg er dan voor dat je de pagina weer omzet in de 'Fluid Width'.

En in de komende video’s leer ik je hoe je sturing geeft aan Responsive Design in Adobe Muse.