Responsive mobile layout

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 antwoord

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.

Dan gaan we nu het laatste schermformaat vormgeven namelijk voor de mobiele telefoon.

Klik op het +icoon om dit gebied te definiëren.

Er vallen direct twee dingen op.

Het hamburgermenu bedekt nu grotendeels de header.

En dit breekpunt gebied heeft een -koloms stramien.

Terwijl de andere breekpunt gebieden een -koloms layout hebben met een horizontaal menu.

Dit komt omdat we deze aanpassingen hebben gemaakt op de A-Master Page waarop deze pagina gebaseerd is.

Ga naar de Plan Mode. Activeer de A-Master Page.

En klap het hamburgermenu hier in.

Klik hiervoor op het hamburger icoon.

Als je nu terugkeert naar de homepagina is ook daar het menu ingeklapt.

Per pagina kun je bepaalde instellingen die je hebt aangegeven aan de A-Master page ook weer overschrijven.

Activeer de Breakpoint Properties en voer een andere waarde in bij ‘Columns’. Deze zet ik op . Zo!

Ik maak voor deze mobiele versie een -koloms opmaak.

Door de -koloms hulplijnen kan ik makkelijker het midden van de pagina herkennen.

Ik wijzig op de achtergrond alvast grote delen van de opmaak.

Er zijn veel verschillende mobieltjes met allemaal aparte schermformaten.

Ook voor de smartphone spreek ik van staand en liggend formaat.

Pixels vertegenwoordigt het staande formaat en het liggende formaat.

Dus het gebied van tot pixels gebruik ik om de layout vorm te geven voor smartphones.

De smartphone wordt het meest in staand formaat vastgehouden en gebruikt.

Dus vooral de smalle versie moet je eigenlijk als standaard aanhouden voor het bedenken en bepalen van de layout.

Niet altijd is alle informatie op de webpagina noodzakelijk om op de mobiele versie getoond te worden.

Gelukkig biedt Muse hier ook uitkomst in.

Bijvoorbeeld de grafische elementen Blok en Blok zitten in de mobiele versie eigenlijk in de weg.

Ik wil deze in dit breekpunt gebied gaan verbergen.

Selecteer dan de objecten.

Klik in de selectie met de rechtermuisknop ingedrukt en kies uit het contextuele menu ‘Hide in Breakpoint’.

Met de opdracht ‘Hide in Other Breakpoints’ kun je juist in een breekpunt gebied iets plaatsen.

Wat in de andere gebieden weer niet onzichtbaar moet worden. Super handige functie dus.

Je zult alle elementen op de pagina ook weer moeten verbinden aan de Resize- en de Pin opdracht.

Voor mijn layout maak ik nu eigenlijk alleen gebruik van het gecentreerd vastpinnen op de pagina.

En het automatisch schalen op ‘Responsive Width’.

Sommige elementen, als de titels, die over de gehele breedte lopen.

Worden al automatisch op ‘Stretch to Browser Width’ gezet.

Op het moment dat je deze op de paginaranden gaat uitlijnen.

De portretfoto's heb ik op 'None' staan omdat ik niet wil dat deze gaan schalen.

Er is ruimte genoeg voor de afbeeldingen.

Echter deze afbeeldingen staan op 'responsive Width and height'.

Zodat deze proportioneel gaan meeschalen.

Het is altijd het beste om de website op het betreffende apparaat te testen

Maar daarvoor moet je de website online gaan zetten.

Dat leer je in het volgende hoofdstuk.

jij kunt nu alle pagina's van de website responsive gaan maken.

jij kunt nu alle pagina's van de website responsive gaan maken.