Adobe Muse brengt responsive design

De verleiding voor vormgevers om zonder hulp van een programmeur professionele websites te bouwen wordt steeds groter nu Muse verrijkt is met responsive design. Deze week kwam Adobe met nieuwe versies voor o.a. Bridge, Animate CC en natuurlijk Muse. De mogelijkheid om websites te bouwen voor zowel smartphones, tablets als desktop browsers bestond al wel in Muse in de vorm van adaptive design, maar met responsive design zijn state-of-the-art websites binnen handbereik.

Adaptive versus responsive design

Het verschil tussen adaptive (of multi-layout) en responsive design is voor hardcore drukwerk vormgevers wellicht oninteressant. Maar voor wie als vormgever plannen heeft om eens een moderne website te bouwen, is een nadere uitleg wel zinvol. Je kon met Muse al drie verschillende webversies (adaptive layouts) maken voor respectievelijk smartphones, tablets en destop/laptops. Je kunt dit vergelijken met de alternatieve layouts die InDesign biedt. Dat levert prima resultaten op maar heeft ook enkele nadelen. Wie het niet handig aanpakte, was driemaal zoveel tijd kwijt en bovendien heeft de ene smartphone een andere hoogte-breedte verhouding dan de andere, om maar te zwijgen over de verschillende resoluties. Dat geldt evenzeer voor tablets en desktops. Het is dus in de praktijk toch lastig om met adaptive design op alle apparaten een volledig optimale opmaak te krijgen.

Responsive design heeft de bovengenoemde nadelen niet: met behulp van zogenaamde ‘breekpunten’ ontwerp je net zoveel layouts als je wenst. Ook kun je eenvoudig de zichtbaarheid van elementen bepalen voor ieder breekpunt. Bijvoorbeeld minder tekstblokken en schermbrede navigatie voor smartphones. Bovendien zijn in iedere layout de elementen ook nog ‘fluid’, dat wil zeggen: de vormgever bepaalt welke elementen van positie en grootte veranderen als het browservenster iets groter of kleiner wordt gemaakt.

Met de nieuwe versie CC 2015.1 kan dit allemaal relatief eenvoudig worden verwezenlijkt. Natuurlijk zul je als vormgever eerst een cursus of boek over Muse moeten raadplegen, maar Muse is niet voor niets het (niet meer zo kleine) zusje van InDesign. Veel onderdelen komen overeen. En ik kan je garanderen dat het ontwerpen van een responsive website met Muse ontzettend spannend is!

Opmaak in drukwerk of voor het (mobiele) web?

Nu de mobiele markt zo belangrijk is geworden, wordt het ontwerpen voor mobiele apparaten in veel gevallen zelfs de standaard: dat heet ‘Mobile first’. Ook voor het ontwerpen van bijvoorbeeld cursusmateriaal, waar je tot nu toe toch alleen aan InDesign dacht, is Muse een interessant alternatief. Als voorbeeld een cursus die vooral door jonge gebruikers graag op hun smartphone of tablet wordt gevolgd. De cursus is met de laatste beta-versie van het vernieuwde Muse opgemaakt en online op alle apparaten goed te lezen vanwege de responsive mogelijkheden.

responsive design, Muse

responsive design in Muse. Optimale webpagina’s voor smartphones, tablets en desktops

Natuurlijk kunnen veel typografische hoofstandjes die InDesign biedt, nog niet door Muse worden gehaald maar daar staan wel de vele interactieve mogelijkheden tegenover. Daarin is Muse haar oudere zusje zonder twijfel de baas.
Die typografische verschillen worden veroorzaakt door de exportmogelijkheden van beide pakketten: InDesign kan via PDF nog steeds fraaiere designs leveren dan Muse, dat het moet hebben van de webstandaarden HTML5, CSS3 en javascript. Maar die standaarden bieden steeds meer mogelijkheden, ook in typografisch opzicht. Overigens is hier een spannende strijd gaande want InDesign exporteert ook naar ePub FXL (fixed layout), dat eveneens gebaseerd is op HTML5, CSS3 en javascript. Ook de nieuwe functie ‘Publish Online’ van InDesign schrijft weg naar deze standaarden. Wees daarom niet verbaasd als over 15 jaar PDF van het podium is verdwenen en de webstandaarden ook drukstandaarden blijken te zijn!

Andere vernieuwingen in Muse

Naast responsive design biedt de nieuwste versie van Muse ook transities, bijvoorbeeld voor knoppen: dus geen abrupte overgangen meer in kleur of grootte, maar zachte, geleidelijke overgangen. Ook worden afbeeldingen in het SVG-formaat nu nog beter ondersteund (snellere laadtijden) en kun je via de CC-bibliotheek rechtstreeks vanuit Muse Adobe Stock foto’s aanschaffen. Al met al een major upgrade van dit programma en een uitgelezen kans voor vormgevers om de stap naar webontwerp zonder kennis van enige code eindelijk te zetten.

About Angelo Spiler
Ik ben passioneel over en daarom ook docent in InDesign, Muse, Photoshop en Keynote. Mijn nieuwsgierigheid naar de nieuwste interactieve mogelijkheden van ePub, DPS en bij het geven van presentaties, kent geen grens. Al vanaf 1994 werk ik als zelfstandig vormgever/ opmaker, voornamelijk van tijdschriften en websites. Specialisaties: technische vakbladen en redactionele automatisering. De behoefte om mijn passie te delen en kennis over te dragen, heeft me bij Competence Factory gebracht, waar ik hoop de ideale mix van passie, creativiteit en effectiviteit aan de cursisten over te dragen.

{lang: 'nl'}

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

De volgende HTML-tags en -attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>