Adobe Muse CC reageert nu

Vorige maand bracht Adobe een update uit voor Adobe Muse CC, een populaire visuele webontwerptool waarmee je websites kunt maken zonder code. Deze nieuwe, krachtige tool is inbegrepen bij de Creative Cloud.

Als traditioneel grafisch ontwerper opent Adobe Muse nieuwe deuren om u met te laten werken in een vertrouwde interface, à la Adobe InDesign, voor het maken van websites. Een beperking van de toepassing voorafgaand aan deze update werd vergrendeld in lay-outs met een vaste breedte. Muse ondersteunt adaptief ontwerp al enige tijd en heeft een tekstsynchronisatiefunctie toegevoegd voor eenvoudiger beheer van alternatieve lay-outs, maar miste de cruciale component van responsief ontwerp. Nu heb je een keuze – je kunt beslissen welke aanpak (responsief of adaptief ontwerp) het beste is voor jouw specifieke project.

Hoe het werkt

Bij het maken van een nieuwe site staat de optie centraal. Adobe heeft het dialoogvenster Nieuwe site opnieuw ontworpen, waardoor u de mogelijkheid hebt om een ​​lay-out met een vaste breedte of een lay-out met vloeiende breedte te maken.

De voor de hand liggende keuze voor responsief ontwerp is de vloeiende breedte. Er is niets veranderd in de Planmodus , maar eenmaal in de Ontwerpmodus is er een nieuwe interface-functie die specifiek is voor responsief ontwerp: de breekpuntbalk. Deze workflow is vergelijkbaar met wat Adobe aanbood in Edge Reflow en recenter Dreamweaver met zijn Bootstrap-functies.

Breekpunten toevoegen

Onderbrekingspunten toevoegen in Muse is eenvoudig en intuïtief. Aan de rechterkant ziet u een scrubber waarmee u de breedte van de pagina kunt wijzigen, waardoor u de grootte van een browser kunt simuleren.

Het idee is om breekpunten toe te voegen wanneer uw ontwerp “breekt”, wat elementen kunnen zijn die elkaar overlappen, te klein worden of wat dan ook. Idealiter zou je het idee van het toevoegen van breekpunten voor specifieke apparaten scheiden en je strikt concentreren op wat het ontwerp vereist. Het is echt een evenwichtsoefening; De belangrijkste ondersteuning voor responsief ontwerp is om een ​​breed scala aan schermformaten mogelijk te maken vanwege de snelle toename van mobiele apparaten. Dit is waar attent zijn en een beetje plannen kan een lange weg gaan. U kunt zoveel breekpunten toevoegen als nodig is. Houd er wel rekening mee dat hoe meer u heeft, hoe meer u moet beheren.

Om een ​​breekpunt toe te voegen, kunt u op het kleine plusteken klikken dat op de breekpuntbalk verschijnt.

Zodra u het breekpunt hebt toegevoegd, krijgt de breekpuntbalk een kleurcode. U kunt de breekpunteigenschappen beheren door met de rechtermuisknop op de breekpuntbalk te klikken en de optie breekpunteigenschappen te kiezen.

Hierdoor wordt het dialoogvenster met breekpunteigenschappen geopend. Hier kunt u specifieke eigenschappen beheren, van de kleur en / of positie van het breekpunt tot het toevoegen van kolomhulplijnen die voor dat breekpunt verschijnen. Alles in dit dialoogvenster is specifiek voor het huidige breekpunt en heeft geen invloed op andere breekpunten op de pagina.

U kunt snel tussen breekpunten navigeren door op verschillende secties erin te klikken. Op elk breekpunt kunt u beginnen met het opnieuw formatteren van de inhoud om beter gebruik te maken van de browserbreedte.

Hoofdpagina’s

Stramienpagina’s hebben hun eigen breekpunten, die onafhankelijk reageren van de pagina’s waarop ze zijn toegepast. Dit geeft u specifieke controle over de inhoud van de hoofdpagina, meestal een kop- en voettekst.

Deze breekpunten verschijnen op de breekpuntbalk als kleine driehoeken om aan te geven waar de breekpunten zich in de master bevinden. U kunt op de driehoeken klikken om de scrubber snel op die locatie te plaatsen.

Inhoud opmaken op breekpunten

Wanneer u een breekpunt toevoegt, kunt u de inhoud op elke gewenste manier opnieuw plaatsen. Vaak kiest u voor een benadering waarbij u inhoud stapelt of het formaat van de inhoud aanpast zodat deze groter is, zodat deze gemakkelijker op kleinere schermen kan worden bekeken. Het is niet ongebruikelijk om minder inhoud weer te geven. Naarmate het scherm kleiner wordt, zou de inhoud specifieker moeten worden. In het onderstaande voorbeeld zult u zien dat ik van een indeling met drie kolommen voor het grotere breekpunt naar een indeling met twee kolommen voor een kleiner breekpunt ging. De afbeeldingen en tekst worden groter, waardoor ze gemakkelijker op een kleiner scherm kunnen worden bekeken.

Er zijn een aantal belangrijke dingen om in gedachten te houden. Ten eerste, als u wilt dat er minder inhoud wordt weergegeven, moet u de ongewenste inhoud niet op het kleinere breekpunt verwijderen. U moet onthouden dat dit één pagina is; het wordt opnieuw geplaatst om de lay-out voor verschillende schermformaten te wijzigen, maar het is nog steeds één HTML-document. Dus als u het op een bepaald breekpunt verwijdert, wordt het van de pagina verwijderd. In plaats daarvan kunt u de lagen voor de inhoud op een specifiek breekpunt verbergen, of met de rechtermuisknop op het element klikken en Verbergen op breekpunt kiezen. Hierdoor wordt dat stukje inhoud onzichtbaar op het geselecteerde breekpunt, maar ongewijzigd op anderen.

Het is ook belangrijk om te begrijpen hoe de grootte van inhoud in Muse verandert wanneer u met deze responsieve functieset werkt. Standaard worden elementen die u in Muse maakt in de breedte geschaald. Elementen die in het document worden geplaatst, zoals een afbeelding, zullen de breedte en hoogte proportioneel schalen. U kunt deze instellingen beheren in de controlebalk wanneer een element is geselecteerd.

Een gedrag dat u kunt tegenkomen, is dat objecten een beetje ‘zweven’ wanneer het formaat van het browservenster wordt gewijzigd. Voor deze omstandigheden heeft Adobe een nieuwe optie toegevoegd met de naam Page Pinning. Dit moet niet worden verward met de opties voor Browser Pinning die in eerdere versies beschikbaar waren, waardoor een element naar de browser; als de gebruiker naar beneden scrolde op de pagina, zou het vastgezette element op zijn plaats blijven en de inhoud eronder scrollen. Pagina vastzetten is een beetje anders. Het element dat met deze optie is vastgezet, scrolt nog steeds met de browser, maar als het element zich in het midden van de pagina bevindt, ongeacht de browserbreedte, blijft het element vergrendeld in het midden van de pagina, hoewel het nog steeds wordt geschaald in grootte wanneer de eigenschappen voor de grootte als zodanig zijn ingesteld.

Migreren van een site naar responsive

Als u in het verleden met Muse heeft gewerkt en een site met een vaste breedte heeft, is het mogelijk om deze naar een responsieve lay-out te migreren. Wat belangrijk is, is het wijzigen van uw site-eigenschappen. Om dit te doen, selecteert u Bestand & gt; Site-eigenschappen om het dialoogvenster Site-eigenschappen te openen. Hier kunt u de indeling wijzigen van Vaste breedte naar Vloeiende breedte.

Vervolgens moet u de kenmerken van de elementen wijzigen die u vloeiend wilt maken. U kunt dit doen door eerder vastgestelde pinnen te verwijderen. Klik vervolgens met de rechtermuisknop op het object en selecteer formaat wijzigen. Dit geeft je verschillende responsieve opties om uit te kiezen.

Conclusie

Er zijn een paar dingen die nog niet klaar zijn voor “responsive primetime” in Muse. Scrolleffecten worden nog niet ondersteund. Wat betekent dat als je dit soort effecten moet gebruiken, je voorlopig met een adaptieve oplossing zit. Ook zijn niet alle widgets responsief, hoewel de mensen bij Adobe eraan werken en ik verwacht dat beide beperkingen met toekomstige updates worden verwijderd.

De nieuwe responsieve functieset in Adobe Muse CC is een welkome aanvulling op een al krachtige visuele webontwerptool. Het biedt ontwerpers de mogelijkheid om responsieve inhoud visueel en in een omgeving te creëren die intuïtief en vertrouwd is.

Oorspronkelijk gepubliceerd op www.webdesignerdepot.com.