Lees dit artikel om aan de slag te gaan met responsief ontwerp in Adobe Muse. Leer hoe u responsieve sites voor elk apparaat kunt maken.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Wanneer u een responsieve site maakt, is het toevoegen van breekpunten voor een bepaald apparaat, besturingssysteem of productmerk mogelijk niet altijd nuttig. Het definiëren van breekpunten op basis van deze factoren kan veel onderhoud vragen. In plaats daarvan zou de lay-out en de inhoud van uw website moeten bepalen hoe en waar u breekpunten toevoegt.

Lees verder voor de aanbevolen ontwerpaanpak voor het maken van een responsieve site met Adobe Muse.

1

Maak een site. Kies Vrije breedte in het dialoogvenster Nieuwe site.

Stel de afmetingen van de pagina in om witruimte en andere ontwerpproblemen te voorkomen. Klik op Geavanceerde instellingen en stel de waarden voor Minimale paginabreedte, Maximale paginabreedte en Minimale hoogte van uw site in.


Selecteer Vrije breedte in het dialoogvenster Nieuwe site.
Selecteer Vrije breedte in het dialoogvenster Nieuwe site.

 

 

 

2

Open een stramienpagina of een afzonderlijke pagina. U ziet dat het standaardbreekpunt bij 960 pixels ligt.


U ziet dat het standaardbreekpunt bij 960 pixels ligt.
U ziet dat het standaardbreekpunt bij 960 pixels ligt.

 

 

 

3

Begin bij dit breekpunt met het opstellen van uw pagina-elementen, zoals tekst, afbeeldingen, presentaties en widgets.


Deel uw webpagina in.
Deel uw webpagina in.

 

 

 

4

Gebruik de scrubber om verschillende browserbreedten te simuleren. Kijk hoe uw site wordt weergegeven bij verschillende browserbreedten.


Gebruik de scrubber om de lay-out van uw pagina in verschillende browserbreedten weer te geven.
Gebruik de scrubber om de lay-out van uw pagina in verschillende browserbreedten weer te geven.

 

 

 

5

Voeg een breekpunt toe op de plekken waar uw ontwerp afbreekt. Zie bijvoorbeeld in de vorige afbeelding hoe het tekstvak de breedte overschrijdt wanneer de scrubber wordt versleept. Voeg een breekpunt toe op de breedte waarop het ontwerp afbreekt.


Voeg een breekpunt toe op de plaats waar u wilt dat het ontwerp afbreekt.
Voeg een breekpunt toe op de plaats waar u wilt dat het ontwerp afbreekt.

 

 

 

6

Pas de lay-out aan op het nieuwe breekpunt zodat uw site goed wordt weergegeven.


Pas de lay-out aan op het breekpunt
Pas de lay-out aan op het breekpunt

 

 

 

7

Ga verder met het testen van uw site tot u de minimumbreedte hebt bereikt. Voeg breekpunten toe en pas uw lay-out zo nodig aan.


Met deze ontwerpaanpak zal uw site er goed uitzien bij elke browserbreedte en op elk apparaat. Uw ontwerp is niet afhankelijk van een bepaalde apparaat- of schermgrootte.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid