Bemærk:

Adobe Muse tilføjer ikke længere nye funktioner og slutter med at tilbyde support 26. marts 2020. Find flere oplysninger og hjælp på Adobe Muses side om ophør af tjeneste.

Responsivt design understøttes i Adobe Muse Februar 2016-udgaven eller nyere. Hvis du har oprettet websites i versioner før Februar 2016-udgaven, kan du konvertere dem til et responsivt design.

Hvorfor skal jeg overføre til et responsivt layout?

Hvis du har et eksisterende Adobe Muse-projekt med et alternativt layout, kan du overføre projektet til et responsivt layout. Men hvis du vil fortsætte med at arbejde med alternative layouts, kan du også gøre det.  

Responsive websites indebærer som regel masser af kodning og komplekse skabeloner. For første gang giver Adobe Muse dig mulighed for at oprette responsive websites uden brug af kodning og uden gitre eller skabeloner. Du kan desuden bruge en enkelt fil til at skabe fuldt responsive websites, der ser overskuelige ud på alle enheder og forskellige skærmstørrelser. Separate layout hører nu hjemme i fortiden!

Opdatering af tekst og billeder er også meget nemt med responsivt Adobe Muse-design. Du behøver ikke bruge flere timer på at opdatere hvert layout med den samme ændring. Derudover understøtter In-Browser Editing, et program, der giver dig mulighed for at redigere indhold på websites i browsere, også responsivt layout.

Adobe Muse tilbyder også større fleksibilitet, når du designer dit website. Du kan vælge at vise eller skjule bestemte objekter i bestemte brudpunkter. Du kan f.eks. vælge at vise berøringsvenlige menupunkter, når dit website ses på en mobil enhed. Du kan også fastgøre objekter til en position eller flytte objekter i bestemte brudpunkter.

Læs videre for at få at vide, hvordan du overfører dine eksisterende Adobe Muse-websites til responsivt layout. Overfør dit website til et responsivt design, og gør dine websites klar til fremtiden.

Hvordan overflytter jeg skiftende layouts til et responsivt layout?

Før du flytter dit websted til et responsivt layout, kan det være en god idé at se en oversigt over responsivt webdesign i Adobe Muse.

Sådan starter du flytningen af dit website til et responsivt layout:

  1. Åbn dit eksisterende website.

  2. Åbn hver side på websitet, og klik på Side > Sideegenskaber.

    Klik på sideegenskaber
  3. På fanen Layout skal du ændre Fast bredde til Flydende bredde. Du kan også indstille Minimal og Maksimal Sidebredde, Margen og Indre margen fra dette vindue.

    Klik på OK.

    Ændring af fast bredde til flydende bredde
    Ændr Fast bredde til Flydende bredde i vinduet Sideegenskaber.

  4. For at sikre, at eventuelle nye sider, du tilføjer, også er flydende, skal du klikke på Filer > Egenskaber for website. Rediger Fast bredde til Flydende bredde i dette vindue.

  5. Vælg den maksimale sidebredde, minimumsbredden og minimumshøjden for layoutet.

  6. Klik på OK.

  7. Gå til mastersiden og de individuelle sider for at åbne siderne i Flydende bredde.

    For at kunne bruge responsivt design effektivt skal du deaktivere rulleeffekter. Hvis du ønsker at bevare rulleeffekter på bestemte sider, skal du fortsætte med Fast bredde for disse sider.

    Når du åbner siderne i Flydende bredde, har objekterne på siden indstillingen Fast bredde som standard. Objekterne er også fastgjort til venstre.

  8. Gør objekterne flydende, så objekternes størrelse tilpasses i forhold til browserbredden. Højreklik på hvert af de objekter, der skal være flydende, og vælg indstillingen Responsivt.

    Fjern fastgørelsen, hvis du ønsker, at objekterne skal være flydende. Hvis du vil fjerne fastgørelsen, skal du højreklikke på objektet og vælge Fastgør til side > Flydende.

  9. Brug skrubben, og få vist sidelayoutet i forskellige browserbredder.

    Du kan se, at nogle af disse widgets ikke er flydende. Uanset hvor disse widgets bryder designet, skal du tilføje brudpunkter på disse sidebredder. Du kan derefter enten ændre størrelsen på widgeten for det pågældende brudpunkt eller skjule widgeten for det pågældende brudpunkt.

    Som standard er brudpunktbjælken ikke synlig, når du arbejder med et website, der er oprettet i tidligere versioner. Klik på Vis > Vis brudpunkter, hvis du vil have dem vist.

    Vis brudpunkter via menuen Vis
    Klik på Vis > Vis brudpunkter.

    Bemærk:

    Når du planlægger dit layout i et responsivt design, skal du layoute dine sider til den største sidebredde først. Derefter kan du få vist siderne med forskellige browserbredder ved hjælp af skrubben. Hvis dit design brydes, kan du tilføje brudpunkter ved disse bredder. Tilpas derefter dit layout ved disse brudpunkter.

    Som en tommelfingerregel skal du tilføje brudpunkter baseret på layoutet på dit website og ikke baseret på skærmstørrelsen på brugerens enheder.

  10. Juster størrelsen og placeringen af objekter, og formatér tekst, så disse elementer vises overskueligt i alle browserstørrelserne. Du kan få mere at vide om at arrangere objekter i responsive layout ved at se Placering af objekter i responsivt webdesign.

    Bemærk:

    Når du arrangerer objekter, skal du kontrollere afstanden mellem objekterne og afstanden mellem objektet og kanten af browseren. Du er muligvis nødt til at justere objektplaceringen eller tilføje flere brudpunkter for at undgå de designproblemer, der opstår mellem brudpunkter.

  11. Kontrollér justeringen og læsbarheden af teksten ved alle brudpunkter. Hvis du vil justere tekstfeltet eller formatere teksten til bestemte sidebredder, skal du se Formatering af tekst i responsive layouts.

  12. Se en forhåndsvisning af ændringerne ved at trække skrubben til bestemte brudpunkter, eller se en forhåndsvisning af ændringerne i en webbrowser.

  13. Slet eventuelle alternative layouts for dit website, du måtte have oprettet til andre enheder. Responsivt webdesign gør det muligt at flytte og vedligeholde dit websted for alle enheder på et enkelt lærred.

Dit responsive websted er nu klar til at blive udgivet!

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online