I sidste måned udgav Adobe en opdatering til Adobe Muse CC , et populært visuelt webdesignværktøj, der giver dig mulighed for at oprette websteder uden kode. Dette nye kraftfulde værktøj er inkluderet i Creative Cloud.

Som en traditionel grafisk designer åbner Adobe Muse nye døre, der giver dig mulighed for at arbejde i et velkendt interface, a la Adobe InDesign, til oprettelse af websteder. En begrænsning af ansøgningen forud for denne opdatering blev låst i layout med fast bredde. Muse har støttet et adaptivt design i nogen tid og tilføjet en tekstsynkroniseringsfunktion til lettere styring på tværs af alternative layouter, men manglede den kritiske komponent i lydhørt design. Nu har du et valg - du kan bestemme hvilken tilgang ( lydhør eller adaptivt design ) er bedst til dit specifikke projekt.

Hvordan det virker

Når du opretter et nyt websted, er indstillingen forreste og center. Adobe redesignede dialogboksen Ny site , der giver dig muligheden for at oprette et fast breddelayout eller et væskebreddelayout.

fig01

Det indlysende valg til lydhør design er væskebredde. Intet har ændret sig i Plan Mode , men en gang i Design Mode er der en ny grænseflade funktion, der er specifik for responsivt design: breakpoint bar. Denne arbejdsgang svarer til, hvad Adobe tilbød i Edge Reflow og nyere Dreamweaver med sine Bootstrap-funktioner.

fig02

Tilføjelse af breakpoints

Tilføjelse af breakpoints i Muse er enkelt og intuitivt. På højre side vil du se en skrubber, der giver dig mulighed for at ændre størrelsen på sidens bredde, hvilket simulerer en ændring af browseren.

fig03

Ideen er at tilføje breakpoints, når dit design "går i stykker", hvilket kan være elementer, der overlapper hinanden, bliver for små, eller hvad som helst. Ideelt set vil du adskille ideen om at tilføje breakpoints til specifikke enheder, og fokusere strengt på hvad designet kræver. Det er virkelig en balancehandling; Hovedstøtten til responsivt design er at rumme en bred vifte af skærmstørrelser på grund af spredning af mobile enheder. Det er her at være tankevækkende, og det kan være langt at lave en lille smule planlægning. Du kan tilføje så mange breakpoints som nødvendigt. Bare vær opmærksom på, at jo mere du har, desto mere skal du klare.

For at tilføje et pause punkt kan du klikke på det lille plustegn, der vises på pause-punktlinjen.

fig04

Når du har tilføjet breakpointet, bliver breakpointlinjen farvekodet. Du kan styre breakpoint-egenskaber ved at højreklikke på breakpointlinjen og vælge indstillingen for breakpoint-egenskaber.

fig05

Dette åbner dialogboksen for breakpoint-egenskaber. Her kan du styre specifikke egenskaber, fra farven og / eller positionen af ​​breakpointet til tilføjelse af kolonnestyringer, der vises for det pågældende punkt. Alt i denne dialogboks er specifikt for det aktuelle breakpoint og har ingen indflydelse på andre breakpoints inden for siden.

fig06

Du kan hurtigt navigere mellem breakpoints ved at klikke på forskellige sektioner i den. På hvert brudpunkt kan du begynde at reformatere indholdet for bedre at kunne bruge browsernes bredde.

Master sider

Master sider har deres egne breakpoints, som reagerer uafhængigt af de sider, de anvendes på. Dette giver dig specifik kontrol over indholdet på hovedsiden, typisk en header og et fodfelt.

fig07

Disse breakpoints vises på breakpoint bar som små trekanter, for at angive, hvor breakpoints er i master. Du kan klikke på trekanterne for hurtigt at placere skrubberen på den pågældende placering.

Formatering af indhold ved breakpoints

Når du tilføjer et breakpoint, kan du reflowere indholdet, som du vil. Ofte tager du en tilgang, hvor du lægger indhold, eller ændrer indholdet, så det er større, hvilket gør det nemmere at se på mindre skærme. Det er ikke ualmindeligt at vise mindre indhold. Da skærmen bliver mindre, skal indholdet blive mere specifikt. I eksemplet nedenfor vil du bemærke, at jeg gik fra et tre-kolonne layout til det større breakpoint til et to-kolonne layout for et mindre breakpoint. Billederne og teksten bliver større, hvilket gør det nemmere at se på en mindre skærm.

fig08

Der er et par vigtige ting at huske på. For det første, hvis du vil have mindre indhold vist, skal du ikke slette det uønskede indhold på det mindre breakpoint. Du skal huske, at dette er en side; det refloows at ændre sit layout til forskellige skærmstørrelser, men det er stadig et HTML-dokument. Så sletter du det på et givet brudpunkt, sletter det fra siden. I stedet kan du skjule lagene for indholdet på et bestemt brudpunkt, eller højreklik på elementet og vælge Hide on Breakpoint . Dette vil gøre indholdet usynligt ved det valgte breakpoint, men uændret på andre.

Det er også vigtigt at forstå, hvordan indholdsforstørrelser i Muse, når du arbejder med dette responsive featuresæt. Som standard vil elementer, du opretter i Muse, skalere i bredde. Elementer, der er placeret i dokumentet, som f.eks. Et billede, skalere bredden og højden proportionalt. Du kan styre disse indstillinger i kontrollinjen, når et element er valgt.

fig09

En adfærd, du måske støder på, er objekter "flydende" lidt, når browservinduet bliver ændret. For disse omstændigheder har Adobe tilføjet en ny mulighed, kaldet Page Pinning. Dette må ikke forveksles med indstillingerne for browsertilpasning , der er tilgængelige i tidligere versioner, hvilket "pin" et element til browseren; Hvis brugeren rullede ned på siden, ville det spærrede element forblive låst i position, mens indholdet rullede under det. Side fastgøring er lidt anderledes. Elementet, der er fastgjort ved hjælp af denne indstilling, vil stadig rulle med browseren, men hvis elementet er placeret i midten af ​​siden, uanset hvad browserbredden er, forbliver elementet låst til midten af ​​siden, om end stadig skalering i størrelse, når størrelsesegenskaberne er indstillet som sådan.

Migrere et websted til lydhør

Hvis du tidligere har arbejdet med Muse, og har et websted med fast bredde, er det muligt at overføre det til et responsivt layout. Hvad der er vigtigt, er at ændre dine egenskaber. For at gøre dette skal du vælge Filer> Webstedegenskaber for at åbne dialogboksen Webstedegenskaber . Her kan du ændre layoutet fra fast bredde til væskebredde.

Derefter skal du ændre attributter af de elementer, du vil være flydende. Du kan gøre dette ved at fjerne eventuelle tidligere etablerede pins. Du skal derefter højreklikke på objektet og vælge resize. Dette giver dig forskellige modtagelige muligheder for at vælge fra.

fig10

Konklusion

Der er få ting, der ikke er klar til "responsive primetime" i Muse. Scrolleffekter understøttes ikke endnu. Hvilket betyder, at hvis du skal bruge disse typer af effekter, vil du sidde fast med en adaptiv løsning for tiden. Også ikke alle widgets er lydhøre heller, selv om folkene på Adobe arbejder på det, og jeg forventer, at begge disse begrænsninger fjernes med fremtidige opdateringer.

Den nye responsive funktion i Adobe Muse CC er en velkommen tilføjelse til et allerede kraftfuldt visuelt webdesignværktøj. Det giver designere mulighed for at skabe responsivt indhold visuelt og i et miljø, der er intuitivt og velkendt.