Plassere objekter i responsive områder i Adobe Muse

I et flytende design kan det hende at en enkel layout av objekter og tekst ikke passer til alle skjermstørrelser. Det kan hende at bilder, tekst, kontrollprogrammer og skjemaer blir omplassert ved ulike avbruddspunkter. Rammene kan havne utenfor sidebredden, objekter kan overlappe med hverandre eller klarheten til teksten kan bli redusert. Bilder, tekst, kontrollprogrammer og skjemaer må omplasseres på ulike avbruddspunkter. Derfor er det viktig å tenke nøye gjennom hvordan du plasserer objekter og formaterer tekst, slik at layouten vises godt i forskjellige skjermstørrelser. 

Når du har designet siden din, kan du bruke markøren til å forhåndsvise layouten i forskjellige skjermstørrelser. Hvis du ser behovet for å legge ut objektene annerledes på bestemte leserbredder, kan du legge til avbruddspunkter her.

Les videre for å finne ut mer om avbruddspunkter og hvordan du kan utforme layouten effektivt med responsiv layout i Adobe Muse.

Avbruddspunkt i en responsiv layout representerer de ulike leserbreddene i bildepunkter. Med avbruddspunkter kan du visualisere designen i ulike leserbredder og teste hvordan objektene på en side responderer når du endrer leserbredden.

Et nytt område i Adobe Muse inneholder som standard et avbruddspunkt for datamaskiner (960 bildepunkters bredde). Du kan begynne med å designe layouten din for denne bredden. Når du fullfører designen, kan du forhåndsvise layouten i ulike bredder ved hjelp av markøren. Når du gjør dette, kan du se og notere deg hvilken bredde designen bryter på. Dette kan du for eksempel se ved at en tekstlinje deles i to, eller ved at bilder som var plassert i en rad, blir stablet vertikalt. I slike tilfeller trenger bredden flere avbruddspunkter. Når du har lagt til de påkrevde avbruddspunktene, kan du finjustere designen slik at objektene vises på en måte du er fornøyd med.

På slutten legger Adobe Muse til en tilsvarende mediespørring-erklæring for webområdet ditt for hvert avbruddspunkt. Mediespørringer er en CSS3-modul som lar innhold gjengis for å tilpasses ulike skjermstørrelser. De fleste moderne nettlesere kan tolke mediespørringene som hører til disse avbruddspunktene. Når brukere viser webområdet ditt på ulike enheter, velger nettleseren den mest passende mediespørringen og den tilhørende designlayouten.

Du kan legge til avbruddspunkter ti både malsider og individuelle sider. Når du legger til avbruddspunkter for en individuell side, brukes avbruddspunktverdiene bare for den bestemte siden.

Når du legger til avbruddspunkter på en malside, kan du velge å bruke ethvert avbruddspunkt du trenger på de enkelte sidene. Avbruddspunktene fra malsider vises som små trekanter på de enkelte sidene. Du trenger bare å klikke plusstegnet (+) for å aktivere disse avbruddspunktene på de individuelle sidene.

Se for deg dette scenariet. Når du lager layout for webområdet, kan det hende du vil legge til bestemte avbruddspunkter for telefoner. Du kan legge til passende avbruddspunkter på malsiden, slik at de er tilgjengelige på de enkelte sidene. Når du designer de enkelte sidene videre, kan du plassere avbruddspunktene på disse sidene med et enkelt klikk.

Fra gjeldende avbruddspunkt kan du skifte til neste eller forrige avbruddspunkt. Slik går du til forrige eller neste avbruddspunkt:

• Windows-brukere:
  • Forrige avbruddspunkt – trykk Ctrl + Skift + 5
    
  • Neste avbruddspunkt – trykk Ctrl + Skift + 6
• MAC-brukere:
  
  • Forrige avbruddspunkt – trykk Cmnd + Skift + 5
    
  • Neste avbruddspunkt – trykk Cmnd + Skift + 6
    

Du kan bruke følgende alternativer for å sikre at layouten ser bra ut på alle avbruddspunkter:

• Vise/skjule objekter: Du kan også skjule et objekt i et avbruddspunkt mens du velger å vise det i et annet. Hvis du vil ha mer informasjon, kan du se Vise eller skjule objekter.
• Plassere objekter forskjellig i ulike avbruddspunkter: Du kan plassere ett enkelt objekt forskjellig i ulike avbruddspunkter. Hvis du vil ha mer informasjon, kan du se Plassere objekter i responsive webdesign.
  
• Bruke responsiv festing: Du kan bestemme hvilke av objektene som skal være statiske, og hvilke som skal være flytende. Du kan feste de statiske objektene slik at de forblir i samme posisjon i alle avbruddspunkter. Hvis du vil ha mer informasjon, kan du se Responsiv festing.
  
• Endre størrelse på objekter: Du kan gi et objekt ulik størrelse i hvert enkelt avbruddspunkt. Du kan også angi at størrelsen på et objekt automatisk justeres etter bredden på siden. Hvis du vil ha mer informasjon om å endre størrelsen på objekter, kan du se Endre størrelse på objekter.
  
• Formatere tekst for ulike avbruddspunkter: Du kan formatere tekst på forskjellig måte i forskjellige avbruddspunkter for å øke klarheten og lesbarheten til teksten i forskjellige leserbredder. Hvis du vil ha mer informasjon, kan du se Formatere tekst i responsiv layout.

Forestill deg følgende: Du har satt inn en tradisjonell meny for datamaskiner. Denne menyen opptar imidlertid altfor mye plass på skjermene til nettbrett. En lagdelt meny eller et trekkspill fungerer bedre for nettbrett.

Det er enkelt å håndtere slike tilfeller under design av responsive webområder i Adobe Muse. Du kan velge å vise en tradisjonell meny for skrivebordsvisningen og en lagdelt meny for nettbrett, som vist i følgende bilder.

Slik viser eller skjuler du objekter i Adobe Muse-prosjektet:

Du kan plassere objekter på forskjellige måter i forskjellige avbruddspunktvisninger. Du kan for eksempel plassere bilder horisontalt i skrivebordsvisningen, mens du kan plassere bilder vertikalt i mobilvisningen.

Adobe Muse husker posisjonen til objektene og viser det tilsvarende når skjermstørrelsen endres.

Hvis du vil flytte objektene dine på tvers av avbruddspunkter, gjør du følgende:

Du kan flytte en gruppe av objekter sammen i en responsiv layout. Når du vil flytte en gruppe vertikalt justerte objekter, trenger du kun å markere det øverste objektet. Du vil se at det vertikale håndtaket vises i venstre marg i Adobe Muse.

Når du klikker håndtaket og flytter det opp eller ned, vil du legge merke til at det markerte objektet og alle objektene under det flytter seg som en gruppe.

Plassere objekter med avbruddspunkter

Du kan legge til et sett med avbruddspunkter ved å plassere et bibliotekelement med avbruddspunkter i designvisningen. Åpne Bibliotek-panelet (Vinduer > Bibliotek). Velg elementet som du vil legge til på siden. Klikk plusstegnet ved siden av elementet, og dra elementet til designvisningen.

Legg merke til at det automatisk legges til et sett med avbruddspunkter på siden. Hvis du allerede har lagt til avbruddspunkter på siden, og hvis du legger til et bibliotekelement med avbruddspunkter, blir alle avbruddspunktene på siden aktivert.

Du kan bruke bibliotekelementer med avbruddspunkter til raskt å kopiere avbruddspunkter mellom ulike sider og til og med mellom ulike .muse-filer.

Hvis du ønsker å gjøre visse objekter i Adobe Muse statiske, kan du bruke festing. Du kan feste et objektet til enten en side eller en webleser:

• Feste objekter til en webleser: Du kan feste et objekt til webleseren hvis du ønsker at objektet skal være fast selv når du bruker rullelinjen i webleseren. For eksempel en menylinje som er fast selv om du ruller opp eller ned. Hvis du vil vite mer om å feste objekter til webleseren, kan du se denne koblingen.
  
• Feste objekter til side: Du kan feste et objekt til en side hvis du ønsker at objektet skal forbli fast på webområdet. For eksempel en firmalogo som alltid vises i øvre høyre hjørne på webområdet.

Les videre for å lære hvordan du fester et objekt til en side i responsiv design.

Hvis du vil kopiere størrelsen og plasseringen til et objekt på tvers av forskjellige avbruddspunkter, følger du følgende trinn:

I responsiv design er det viktig å håndtere tekst for ulike leserbredder slik at den er klar og lesbar. Tekst som er plassert i en i avbruddspunktvisning vil kanskje brytes brått i en annen avbruddspunktvisning. Uønskede linjeskift vil kanskje også vises når du bytter avbruddspunkt.

Adobe Muse lar deg formatere tekst forskjellig for ulike avbruddspunkt. Du kan for eksempel velge å bruke skriftstørrelse 20 punkter for nettbrett og 15 punkter for mobile enheter.

Hvis du vil formatere tekst i responsiv design, tilbyr Adobe Muse et Tekstformatering-ikon i panelet der du også finner beskjærings- og markeringsverktøy. Det finnes to alternativer i dette ikonet, og du kan velge ett av dem for å formatere teksten din.

Du kan velge alternativet Formater tekst på tvers av avbruddspunktene for å formatere tekst på tvers av alle avbruddspunktene på en side. Når du velger dette alternativet, trenger du bare å formatere teksten i en avbruddspunktvisning. Teksten blir automatisk formatert på tvers av de andre avbruddspunktene.

Hvis du derimot trenger å formatere tekst for et bestemt avbruddspunkt, kan du velge alternativet Formater tekst på det gjeldende avbruddspunktet. Du kan for eksempel velge å øke tekststørrelsen til 24 når du skal plassere tekst for mobiler.

Tekstformateringen blir husket og brukt når webområdet vises i forskjellige leserbredder.

Hvis du vil kopiere størrelsen og plasseringen til teksten på tvers av forskjellige avbruddspunkter eller leserbredder, følger du følgende trinn:

Du kan legge til rulleeffekter i en responsiv layout. Rulleeffekter støttes kun med faste avbruddspunkter. Faste avbruddspunkter angir at layouten er låst til den aktuelle sidebredden. Legg til et fast avbruddspunkt, marker objektet du vil bruke rulleeffekter på, og konfigurer deretter innstillingene for rulleeffekter.