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

Dit is het moment waarop je alle kennis die je hebt opgedaan in de praktijk kan gaan brengen.

Want het is tijd om alle webpagina’s te gaan optimaliseren voor de queries.

Dus responsive te maken voor elk schermformaat.

We zullen hier heel veel aanpassingen moeten gaan maken.

Ik doe het voor met de startpagina.

Het beste kun je eerst alle items op de pagina gaan controleren.

Hoe zijn deze ingesteld bij Resize en Pin?

Kloppen deze instellingen met wat je wilt als het scherm smaller wordt?

Als ik wil dat deze titel en subtitel gecentreerd blijven?

Zorg dan dat deze op de juiste positie staan, de juiste breedte hebben.

Uitlijnen op het kolomstramien.

Zet de Pin gecentreerd ten opzichte van het document.

En de Resize staat nu op 'Responsive Width'.

En dat betekent dat de kaders, waarin de titels staan, meeschalen als het scherm smaller wordt.

Deze illustratie, die mag niet van formaat veranderen. Dus de resize moet op 'None' komen te staan.

En hij moet aan de linkerkant van het document vast blijven staan, dus zet ik de Pin op 'Left'.

Je kunt ook meerdere elementen tegelijkertijd selecteren en instellen.

De portretfoto’s bieden nog ruimte om op ware grootte te kunnen blijven

Dus zet ik de Resize op ‘None’.

De bijbehorende tekstkaders, die mogen wel meeschalen.

Dus zorg ik dat de Resize op 'Responsive Width' staat.

Tekst wordt automatisch naar volgende regels geplaatst als de tekstkaders smaller worden.

Tekst wordt automatisch naar volgende regels geplaatst als de tekstkaders smaller worden.

Hierdoor worden de tekstkaders dan langer.

En gevolg is dat onderliggende elementen naar beneden geduwd kunnen worden.

Kijk maar naar het kader van Blok .

Ik hoe hier alvast rekening mee door alvast extra ruimte te reserveren bij de tekstkaders.

Ik maak de tekstkaders dus langer dan nu nodig is.

Maar hierdoor heb ik ruimte om het regelverloop op te vangen.

En hoeft de layout eronder niet meer op te schuiven.

En blijft blok netjes op zijn plek staan.

Als je al ervaring hebt met tekstopmaak voor print- en drukwerk.

Dan zul je waarschijnlijk de neiging om juist tekstkaders in te kaderen.

Voor Responsive layout moet je dit juist niet doen.

Al deze items staan op ‘Responsive Width’ en dat is prima.

Kijk ik verder naar beneden.

Deze afbeeldingen, die staan op 'Responsive Width and Height’.

Dit zorgt ervoor dat deze proportioneel gaan schalen.

En de tekstkaders staan weer op 'Responsive Width'. Prima!

Dan kijk ik naar de laatste elementen.

Deze button staat op Responsive Width. Net als deze en de afbeelding.

Ik wil niet dat deze gaan schalen want er is ruimte genoeg. Dus zet ik deze op 'None'.

En dan kan ik nu gaan kijken en controleren...

...hoe de elementen zich gedragen op het moment dat ik de pagina smaller ga maken.

Je ziet dat ik her en der aanpassingen zal moeten maken om te zorgen dat alles goed gaat lopen.

Want her en der schuiven elementen toch enigszins over elkaar heen.

Dit ga ik aanpassen. Ik klik op het +icoon bij de querie van pixels om dit gebied te activeren.

Klik dan met de rechtermuisknop ingedrukt in de gekleurde balk.

En kies voor Breakpoint Properties.

Ik zet de Margins Left en Right op pixels.

Vanwege de gewijzigde marges.

Zal ik alle items op de pagina opnieuw moeten gaan positioneren.

Dit is best veel werk.

Je begrijpt dat je het responsive maken het beste, direct vanaf het begin, zo goed mogelijk moet gaan sturen.

Maar het maken van alle gewenste aanpassingen per pagina voor elk breekpunt gebied.

Is iets wat je het liefst helemaal op het einde doet.

In ieder geval als de website grotendeels gevuld en vormgegeven is zoals je dit wilt.

Elke wijziging en aanpassing die je achteraf maakt.

Kan namelijk weer consequenties hebben voor de hele layout en vormgeving van de pagina’s.

Dus neem er even de tijd voor om alle elementen op het nieuwe kolomstramien goed uit te lijnen.

Zorg dat de tekstkaders lang genoeg zijn om het natuurlijke regelverloop te kunnen opvangen.

Als het scherm weer smaller wordt.

Zodra je de hele pagina hebt aangepast.

Kunnen we het gedrag van de pagina van het gebied tussen de naar de gaan bekijken.

Klik eenmaal in het gebied om dit schermformaat te activeren.

Maak met de schuif het voorvertonings gebied smaller en controleer hoe de layout van de pagina hierop reageert.

En ik zal moeten scrollen.

Om naar alle elementen te kunnen kijken en de posities hiervan te controleren.

En eventueel moet je soms toch nog een aanpassing maken.

Deze tekstkaders bijvoorbeeld ga ik nog langer maken.

Zodat de tekst er niet te krap in komt te staan.

De rest ziet er op zich prima uit.

En de illustratie van de webaward.

Die zou ik ook wat willen gaan verplaatsen omdat deze op een gegeven achter de tekst gaat schuiven.

Klik eenmaal opnieuw op het gebied.

En maak dan de benodigde aanpassingen.

De illustratie verplaats ik iets meer naar links en naar boven.

En ik mak de tekstkaders onder de 'Locatie' iets langer.

Dus ik reserveer daarvoor meer ruimte.

ik zet de teksten wat dichter boven bij de afbeeldingen.

Daarna selecteer ik de onderliggende balk 'Registreren'. Ik zorg dat ik iets meer ruimte heb.

Maak ik al deze tekstkaders wat langer.

Als het goed is moeten deze teksten dan wat meer de ruimte krijgen.

En passend blijven in het gebied totdat ik aan de zit.

Zelfde kan ik controleren voor de illustratie.

Zie dat deze nu niet meer achter de tekst wegloopt.

Dus ook deze staat nu op een betere positie.