Responsiv design i Muse. Merete Jåsund, IGM AS. making. d e s i

Transkript

1 Resposiv desi i Muse Merete Jåsud, IGM AS maki d e s i

2 maki maki Resposiv desi i Muse OPPRETTE EN RESPONSIV SITE For å opprette e resposiv ettside, se kapittelet «Opprette e y site» på side 10. Opprett e side med med Fluid Width i øsket bredde. Side ka du lee i flere breakpoits, for forskjellie skjermstørrelser, o bestemme hvorda layoute skal justeres for de ulike størrelsee. Det er å muli å desie resposive sider i Muse. E resposiv side er e ettside som ka vises på alle skjermstørrelser. Elemetee på side vil automatisk strekkes, krympes eller flyttes for å tilpasses de tiljeelie skjermplasse på et bredt utval av eheter. Parallakse sider ka ikke være resposive i Muse. På e resposiv side vil ikke ødvedivis de samme layoute passe for alle skjermstørrelser. Bilder, tekst, skjemaer o widets må plasseres ulikt på forskjellie skjermstørrelser o retier. Etter at du har desiet side i e størrelse, ka du bruke skrubbere til å forhådsvise hvorda layoute vil se ut på ulike skjermstørrelser. Objektee på side ka ete være fullt resposive, delvis resposive eller ha fast størrelse o plasseri. Du må ai oppførsele for hvert ekelt objekt. Hvis et objekt er fullt resposivt vil det skaleres med edrier i skjermstørrelse. Hvis det er delvis resposivt, må du ai hvor det skal plasseres ved hvert ekelt breakpoit. Du ka lae resposive ettsider ved å ta utaspukt i e av de resposive starter templates (maler) som er tiljeeli via start up-skjermbildet til Muse, ved å opprette e y site, eller ved å kovertere e eksisterede site med fast bredde til resposiv. BREAKPOINTS Breakpoits i resposiv desi represeterer de ulike skjermstørrelsee i piksler. Breakpoits lar de visualisere desiet i forskjellie størrelser, o teste hvorda objektee på side oppfører se år du edrer skjermes bredde. Som stadardistilli vil e y site du oppretter i Muse, ha et breakpoit for desktop, satt til 960 pikslers bredde. Hvis du tar dee som utaspukt for å desie ettside, ka du seere bruke skrubbere til å forhådsvise hvorda layoute vil edres ved forskjellie størrelser. Du ka se år e tittel edres fra e lie, til å deles i to, eller år det blir for tett mellom kappee i meye, slik at de leer se oppå hveradre. Her vil du kue lee i ye breakpoits, for så å edre desiet, slik at det passer best til de ye størrelse. Du ka ha ulike breakpoits på e Masterpae o lokalt på sidee. Når du leer til breakpoits på e idividuell side, vil det bare jelde for de side. Lee til breakpoits Trekk skrubbere las Breakpoit Bar o se hva som skjer. Stopp der du ser at du treer et breakpoit. Klikk på pluss-teet for å lee til et ytt breakpoit. Du ser at bredde for det ye breakpoitet vises ved side av det. Du ka bevee de mellom de ulike skjermstørrelsee ved å klikke på det korrespoderede breakpoitet. 2 MakiDesi 2016

3 maki maki Rediere breakpoits Du ka rediere et breakpoit ved å dra skrubbere til det øskede breakpoit o høyreklikke på det o vele Breakpoit Properties eller dobbeltklikke på det. skjule o vel Hide i Breakpoits. Hvis du heller vil skjule det i alle adre breakpoits, veler du Hide i Other Breakpoits. Du ka seere vele å vise eller skjule det oså fra Layers-paelet. De svarte prikke uder øyesymbolet til laet, viser at oe er syli ved dette breakpoitet, mes de objektee som ikke har e svart prikk, er skjult her. Du ser at de ulike breakpoits markeres med forskjelli farer. Du ka edre fare om ødvedi. Du ka oså edre plasserie av breakpoitet, sides høyde, spalter o maree. Slette et breakpoit Du ka slette et breakpoit ved å klikke i X på vestre side av det aktive breakpoitet, eller ved å høyreklikke i Breakpoit Bar o vele Delete Breakpoit. Når du sletter et breakpoit vil layoute som hører til det oså forsvie. Vise o skjule objekter Det er ikke sikkert at de samme desiløsiee o objektee passer på alle skjermstørrelser. Det ka feks. hede at e tradisjoell horisotal mey som passer fit for desktop-løsie, ikke er optimalt for mobilversjoe. I et såt tilfelle ka du vele om objekter skal vises eller skjules ved de ulike breakpoits. For å vele om objekter skal skjules eller vises, plasserer du ie alle objektee du vil vise (oså de som skal skjules ved spesikfikke breakpoits). Deretter trekker du skrubbere til det breakpoitet du vil skjule oe. Høyreklikk på objektet du vil Edre plasserie av objekter Du ka edre plasserie av objektee forskjelli ved ulike breakpoits. F.eks ka bildee lie horisotalt på desktopversjoe mes de plasseres vertikalt på mobilutave. For å edre plasserie, markerer du bare breakpoitet der du vil edre layoute, o trekker objektee dit du vil plassere dem. PINNE OBJEKTER I Muse ka du «pie» objektee for at de skal beholde e bestemt plasseri på side, eller i ettlesere. Pi objects to browser Du ka pie objektee til ettlesere hvis du vil at objektee skal forbli uedret, år du ruller edover side. Dette bruker du f.eks år du vil at e mey eller adre objekter skal bli ståede øverst på side, år lesere skroller se edover. Ved pii til ettlesere ka du bestemme om et objekt skal være festet fast til vestre, i midte eller til høyre - øverst eller ederst i ettleserviduet. Hvis du leer e mey som er piet fast øverst på side i et la øverst i stablerekkeføle, ka du få effekte av at side skroller oppover o forsvier i uder meye. 3 MakiDesi 2016 Resposiv desi i Muse

4 maki maki Pi objects to pae Du ka pie et objekt til e side hvis du vil at det skal oppføre se likt uavhei av sides størrelse, f.eks. hvis du vil at firmalooe alltid skal stå med samme avstad fra høyre hjøre, ete ma ser side på desktop, ettbrett eller mobil. Pii til side brukes ofte ved resposiv desi. For å bestemme om du vil pie et objekt eller ikke, ka du bruke skrubbere o se side ved forskjellie skjermstørrelser. Hvis du vil pie det, jør du som føler: Pi til vestre hvis du vil feste et objekt til vestrekate av side. Avstade fra kate av ettlesere til vestre kat av objektet, forblir lik ved ulike sidestørrelser. Pi til midte, hvis du vil feste et objekt til midte. Avstade mellom de vestrekate o toppkate av objektet til kate av ettlesere forblir kotstat. Pi til høyre, hvis du vil feste et objekt til høyrekate av side. Avstade fra kate av ettlesere til høyre kat av objektet, forblir lik ved ulike sidestørrelser. Å formatere tekst i resposiv layout Muse lar de formatere tekste forskjelli for ulike breakpoits om ødvedi. Du ka f.eks. vele å bruke ulik fotsstørrelse for ettbrett o mobil. I verktøypaelet har Muse har to val for å formatere tekste, Format Text Across Breakpoits o Format Text O Curret Breakpoit. Format Text Across Breakpoits lar de formatere tekste likt ved alle breakpoits på side. Når du bruker dette valet treer du bare å formatere tekste ved ett breakpoit, o de vil automatisk formateres likt ved alle breakpoits. Dette jelder bestillier for utseedet, så vel som tekstedrier. Format Text O Curret Breakpoit derimot, lar de formatere tekste for ett breakpoit, med adre bestillier e de har ved adre breakpoits. Kopiere tekstformatteri til flere breakpoits Du ka kopiere tekstformateri mellom ulike breakpoits, ved å markere tekstramme, høyreklikke o vele ete Copy Textformatti to «aitt breakpoit» eller Copy Textformatti to All Breakpoits. Edre størrelse på objektee Etter som side edrer størrelse fordi ettleservidet edres, eller side sees på ulike skjermstørrelser, ka du påvirke hvorvidt o hvorda objektee edrer størrelse. Hvilke val som er tiljeelie fra Resize-meye, vil variere i forhold til hva slas objekt det er. Du ka f.eks. edre la et bilde edre størrelse horisotalt o vertikalt, mes e tekstboks bare vil være muli å edre bredde på. Objekter som ikke er «fluid», vil det ikke være muli å edre størrelse på. 4 MakiDesi 2016 Resposiv desi i Muse

5 maki d e s i IGM AS IGM Brysveie Oslo