Responsive tablet 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

Volgende video: Responsive mobile layout

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.

Dan gaan we nu naar de staande tablet-versie toe.

Klik op de breakpoint van en activeer het gebied door op het +icoon te drukken.

Ook nu zet ik eerst alle elementen opnieuw op de juiste positie.

En controleer ik de layout en de vormgeving.

De paginabrede afbeelding maak ik minder hoog.

Want anders neemt deze teveel ruimte van het startscherm in.

Het Titelblok er vlak onder moet ik dan ook gaan verplaatsen.

Deze sluit ik opnieuw weer keurig aan bij de afbeelding.

Het kleurvlak mag nu van paginarand tot paginarand gaan lopen.

Let goed op wat er gebeurt bij Resize als je een element uitstrekt tot aan de paginaranden.

Deze wijzigt dan automatisch in ‘Stretch to Browser Width’.

In dit geval mag dat.

Want vanaf dit gebied tot smaller is dit juist wat ik wil.

De tekstkaders van de titel en de subtitel lijn ik ook uit op de paginaranden.

En om te voorkomen dat tekst en illustratie elkaar gaan bedekken.

Is het beter om de illustratie te verkleinen.

Controleer regelmatig tussendoor hoe de layout zich in dit breakpoint gebied gedraagt.

Baseer daar dan de aanpassingen op.

En in dit geval moet ik ervoor zorgen dat de illustratie niet achter de titel en de subtitel komt te staan.

Dus deze verplaats ik boven de tekst van de titel.

Ik wijzig ook de layout van de sprekers.

In plaats dat ik deze in een vier koloms naast elkaar houd.

Zet ik deze, in dit breekpunt gebied, in een tweekoloms naast en onder elkaar.

Hierdoor kan de overgang naar het mobiel schermformaat beter en soepeler plaatsvinden.

Ik let ook weer op de lengte van de tekstkaders.

Is er ruimte genoeg voor het regelverloop.

Want anders wordt de onderliggende layout weer weggeduwd.

En dat kan dan ook weer zorgen voor overlappende teksten en afbeeldingen.

En dat willen we zoveel mogelijk voorkomen.

De layout van het blok Sessies ga ik ook aanpassen.

Om te voorkomen dat de tekstkaders te smal worden.

Creëer ik ruimte door de grafische elementen van blok en juist smaller te maken.

Maar dan past de tekst niet meer.

Nu moet je gaan opletten. Welke tekstoptie staat actief in het gereedschaps-venster.

Selecteer het tekstgereedschap en kijk onderin de gereedschappenbalk.

Heb je de tekstoptie ‘Format text across all breakpoints’ actief staan.

Dan wijzig je niet alleen de tekst voor deze breakpoint maar voor alle breakpoints op deze pagina.

Ik wil deze wijziging alleen hier uitvoeren.

Dus activeer ik de optie ‘Format text on current breakpoint’.

Alleen het woord ‘blok’ wijzig ik in pixels.

Voor de getallen is ruimte zat dus die mogen zo blijven.

Hoef ik enkel de tekstkaders nog smaller te maken.

Zodat deze precies in het vlak van het blok past.

Alle overige kaders op deze pagina, zet ik ook weer netjes op het kolomstramien.

Dus loop rustig de hele pagina door en perfectioneer waar nodig de formaten en de positie van kaders.

Zodra je dit gedaan hebt, kun je het resultaat gaan bekijken met behulp van de schuif.

Ik zet de schuif vlak voor het volgende breekpunt. Dus voor het gebied van de .

En bekijk de pagina.

De bovenste portretfoto’s moet ik wat beter verdelen zodat deze gecentreerd boven de tekstkaders blijven staan.

De teksten ‘blok’ moet toch nog iets kleiner want die past nu niet meer op één regel.

En dan kijk ik nog verder naar beneden.

De buttons helemaal onderaan de pagina staan niet vastgepind op gecentreerd.

Die verbeteringen zal ik dan nog moeten aanbrengen.

Het goed responsive maken van één pagina is best nog een hele klus zoals je ziet.

Je maakt aanpassingen in de layout. Controleer dan hoe de pagina zich aanpast bij een smaller scherm.

Vaak moet je dan weer aanpassingen maken.

En zo ben je dan wel even in de weer.

Maar het resultaat is vaak wel een prachtige responsive pagina waar je trots op mag zijn.

Volgens mij is de layout voor dit breekpunt nu ook goed.

Dus ik ga nog één keer kijken en ik maak het scherm smaller. Vlak voor de .

En bekijk het nog één keer het eindresultaat.

De teksten 'blok' passen nu weer.

En zijn de buttons onderin gecentreerd? Ja!

In de volgende video bepalen we de vormgeving en layout van de laatste querie, het formaat voor de mobiel.