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.

Responsief ontwerp wordt ondersteund in de versie van Adobe Muse van februari 2016 en later. Als u websites in versies vóór de release van februari 2016 hebt gemaakt, kunt u uw sites omzetten in een responsief ontwerp.

Waarom is het verstandig te migreren naar een responsieve lay-out?

Als u een bestaand Adobe Muse-project met alternatieve lay-out hebt, dan kunt u uw project migreren naar een responsieve lay-out. Maar u kunt ook gewoon blijven werken met alternatieve lay-outs.  

Responsieve sites bevatten doorgaans veel code en complexe sjablonen. Voor het eerst biedt Adobe Muse u nu de mogelijkheid om responsieve websites te maken zonder dat u code hoeft te schrijven of rasters of sjablonen moet gebruiken. Bovendien kunt u één bestand gebruiken om volledig responsieve sites te maken die er op elk apparaat, ongeacht de schermgrootte, goed uitzien. Verschillende schermlay-outs behoren tot het verleden!

Dankzij responsief ontwerpen is het in Adobe Muse ook heel gemakkelijk om tekst en afbeeldingen bij te werken. U hoeft geen uren te besteden aan het aanbrengen van dezelfde wijziging in elke lay-out. Bovendien biedt In-Browser Editing, een toepassing voor het bewerken van uw site-inhoud in een browser, ook ondersteuning voor responsieve lay-outs.

Adobe Muse biedt u ook veel flexibiliteit bij het ontwerpen van uw site. U kunt kiezen of u specifieke objecten in specifieke breekpunten wilt tonen of verbergen. U kunt bijvoorbeeld kiezen of u aanraakvriendelijke menuopties wilt tonen wanneer uw site op mobiele apparaten wordt weergegeven. U kunt objecten ook vastzetten op een locatie of objecten verplaatsen naar specifieke breekpunten.

Lees verder om te leren hoe u uw bestaande Adobe Muse-sites kunt migreren naar een responsieve lay-out. Migreer uw site naar een responsief ontwerp en maak uw websites klaar voor de toekomst.

Hoe kan ik alternatieve lay-outs migreren naar responsieve lay-outs?

Voordat u uw website naar een responsieve lay-out migreert, is het misschien handig om eerst het overzicht van een responsief webontwerp in Adobe Muse te bekijken.

Ga als volgt te werk om uw website naar een responsieve lay-out te migreren:

  1. Open uw bestaande website.

  2. Open elke pagina op uw website en klik op Pagina > Pagina-eigenschappen.

    Klik op Pagina-eigenschappen
  3. Wijzig op het tabblad Lay-out de optie Vaste breedte in Vrije breedte. In dit venster kunt ook de Minimale paginabreedte, Maximale paginabreedte, Marges en Opvulling instellen.

    Klik op OK.

    Wijzig Vaste Breedte in Vrije breedte
    Wijzig Vaste breedte in Vrije breedte in het venster Pagina-eigenschappen.

  4. Als u wilt dat nieuw toegevoegde pagina's ook dynamisch zijn, klikt u op Bestand > Site-eigenschappen. Wijzig Vaste breedte in Vrije breedte in dit venster.

  5. Kies de maximum- en minimumbreedte voor de pagina en de minimumhoogte voor de lay-out.

  6. Klik op OK.

  7. Ga naar de stramienpagina en de afzonderlijke pagina's om uw pagina's te openen in Vrije breedte.

    Voor een doeltreffend gebruik van responsief ontwerpen schakelt u scrolleffecten uit. Als u scrolleffecten voor specifieke pagina's wilt behouden, gaat u voor deze pagina's door met Vaste breedte.

    Wanneer u de pagina's opent in Vrije breedte, hebben de objecten op de pagina standaard de instellingen voor Vaste breedte. De objecten zijn ook vastgezet aan de linkerkant.

  8. Maak de objecten dynamisch zodat hun grootte automatisch wordt aangepast aan de browserbreedte. Klik met de rechtermuisknop op elk object dat vrij moet zijn en kies de optie Responsief.

    Verwijder het vastzetten als u wilt dat de objecten vrij zijn. Als u het vastzetten wilt verwijderen, klikt u met de rechtermuisknop op het object en selecteert u Vastzetten op pagina > Vrij.

  9. Gebruik de scrubber om de lay-out van uw pagina te bekijken in verschillende browserbreedten.

    U zult zien dat bepaalde widgets niet dynamisch zijn. Voeg breekpunten toe bij de paginabreedtes waarop deze widgets het ontwerp breken. U kunt vervolgens de grootte van de widget voor dat breekpunt wijzigen of de widget voor het breekpunt verbergen.

    Standaard is de breekpuntbalk niet zichtbaar wanneer u met een website werkt die in eerdere versies is gemaakt. Als u breekpunten wilt weergeven, klikt u op Weergave > Breekpunten weergeven.

    Breekpunten weergeven via het menu Weergave
    Klik op Weergave > Breekpunten weergeven.

    Opmerking:

    Wanneer u uw lay-out plant in responsief ontwerpen, moet u de pagina's eerst opmaken voor de grootste paginabreedte. Vervolgens gebruikt u de scrubber om de pagina's weer te geven bij verschillende browserbreedten. Als uw ontwerp wordt verbroken, voegt u voor deze breedten breekpunten toe. Pas vervolgens de lay-out bij deze breekpunten aan.

    Als vuistregel geldt dat u breekpunten toevoegt op basis van de lay-out van uw site en niet op basis van de schermgrootte van de apparaten van gebruikers.

  10. Pas de grootte en de positie van objecten aan en maak tekst zo op dat deze goed wordt weergegeven bij alle browserbreedten. Zie Objecten plaatsen in een responsief webontwerp voor informatie over het opmaken van objecten in een responsieve lay-out.

    Opmerking:

    Wanneer u objecten opmaakt, controleer dan de afstand tussen de objecten en de afstand tussen het object en de rand van een browser. U moet de objectposities mogelijk aanpassen of meer breekpunten toevoegen om ontwerpproblemen die tussen breekpunten kunnen optreden, op te lossen.

  11. Controleer de uitlijning en de leesbaarheid van de tekst op alle breekpunten. Zie Tekst opmaken in responsieve lay-outs als u de uitlijning van het tekstvak wilt wijzigen of de tekst voor bepaalde paginabreedtes wilt opmaken.

  12. Bekijk een voorvertoning van de wijzigingen door de scrubber te slepen naar specifieke breekpunten of de wijzigingen weer te geven in een webbrowser.

  13. Verwijder alternatieve lay-outs van uw website die u mogelijk voor andere apparaten hebt gemaakt. Met responsieve webontwerpen kunt u uw site voor alle apparaten naar één canvas migreren en daar onderhouden.

Uw responsieve website is nu klaar om te worden gepubliceerd!

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