Lees dit artikel over hoe u websites voor mobiele apparaten en smartphones kunt maken.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

U kunt websites voor mobiele telefoons maken en ontwerpen met responsief webontwerp in Adobe Muse. Met een responsieve lay-out hebt u slechts één Muse-bestand nodig om websites voor alle apparaten, inclusief mobiele telefoons, te maken.

U moet eerst de volledige browserbreedte bepalen waarvoor u de site wilt ontwerpen. U kunt vervolgens verdergaan met het ontwerpen van uw site. Zie Responsieve sites maken voor meer informatie over het maken van sites voor mobiele telefoons met een responsieve lay-out.

Als u een alternatieve lay-out voor mobiele sites wilt ontwerpen, leest u het volgende artikel.

Websites voor alleen mobiele telefoons ontwerpen

Met Adobe Muse kunt u sitelay-outs maken voor webinhoud die op desktops, tablets of smartphones moet worden weergegeven. Met de mobiele ontwerpfuncties kunt u alternatieve lay-outs maken voor telefoons en tablets en voor desktops.

Adobe Muse bevat instellingen, zoals de schakelfunctie voor 100% breedte en de functie Vaste voettekst, om ervoor te zorgen dat uw ontwerp goed wordt weergegeven op alle verschillende schermen die tegenwoordig verkrijgbaar zijn. Met Adobe Muse kunt u vertrouwde workflows gebruiken om diepgaande ontwerpen te maken voor alle mogelijke schermgrootten.

Een alternatieve lay-out voor mobiele telefoons maken:

  1. Open Adobe Muse en klik op bestand > Nieuwe site.

    Selecteer Vaste Breedte om sites voor specifieke apparaten te maken.
    Selecteer Vaste breedte om websites voor mobiele telefoons te maken.

  2. Selecteer Vaste breedte en klik dan op Geavanceerde instellingen in hetzelfde dialoogvenster.

    Geavanceerde instellingen voor nieuwe site
    Geavanceerde instellingen voor het maken van een nieuwe site.

  3. Geef een waarde op bij Maximale paginabreedte, ofwel de maximumbreedte van de pagina.

    Definieer de juiste browserbreedte voor mobiele telefoons en geef de waarde op.

  4. Voer de waarden in voor Marges en Opvullen voor uw site voor mobiele telefoons. Voer de volgende gegevens in:

    • Paginabreedte en -hoogte: Hiermee kunt u de oorspronkelijke afmetingen van de pagina instellen. In Muse wordt de hoogte van de pagina automatisch vergroot wanneer u inhoud blijft toevoegen. Er wordt daarom geen maximumwaarde ingesteld voor de paginahoogte.
    • Kolommen en kolombreedte: Kolommen zorgen voor een evenredige, visuele scheiding op Muse-webpagina's, zodat u de ontwerpelementen nauwkeurig kunt uitlijnen. De Kolombreedte wordt automatisch ingesteld voor een bepaald aantal Kolommen- en Tussenruimte-waarden.
    • Marges en opvullen: De marges zijn de lege ruimten rond de webpagina, buiten het ontwerpgebied. Met opvulling kunt u een gebied binnen de ontwerpperimeter van de webpagina wissen.

    Klik op OK.

    U kunt nu de lay-outs voor de website voor mobiele telefoons gaan ontwerpen.

Een telefoonlay-out toevoegen aan een bestaande Adobe Muse-site

Wanneer u een nieuw project gaat maken, kunt u eerst een van de lay-outs ontwerpen en vervolgens de aanvullende lay-outs maken in hetzelfde .Muse-bestand.  Als u een site publiceert of exporteert, genereert Adobe Muse automatisch een bestand met de naam sitemap.xml dat een lijst bevat met alle pagina's voor alle lay-outs. Het bestand sitemap.xml wordt samen met de andere sitemiddelen geüpload. Het verbetert de optimalisatie voor zoekmachines van een site door zoekmachines te helpen de site te indexeren, zodat de pagina's op de juiste wijze worden gerangschikt in de zoekresultaten.

Als u een nieuwe mobiele lay-out voor een telefoon wilt maken, behoren het evalueren van de inhoud van een bestaande site en het beslissen welke items nodig zijn voor smartphonegebruikers tot de eerste dingen die u moet doen. Smartphonebezoekers zijn vaak onderweg en bekijken de inhoud op een kleiner scherm. Daarom is het belangrijk om het ontwerp te vereenvoudigen en alleen nuttige inhoud weer te geven die geschikt is voor eenvoudige interactie op een aanraakscherm.

  1. Open een bestaand .Muse-bestand waarvoor u een alternatieve telefoonlay-out wilt toevoegen.

  2. Open elke pagina in uw project en klik op Pagina > Alternatieve lay-out toevoegen > Telefoon.

    Opties voor toevoegen van telefoonlay-out
    Voeg een telefoonlay-out toe om sites voor mobiele telefoons te maken.

  3. U kunt dit menu gebruiken om een bestaande lay-out te selecteren en te kopiëren. In het kader van dit artikel kiest u Computer om de computerlay-out te kopiëren naar de telefoonlay-out.

    U kunt desgewenst ook het site-overzicht, de paginakenmerken en de browservulling kopiëren. Laat de standaardinstellingen ongewijzigd om de bestaande gegevens van de computersite te kopiëren naar de telefoonlay-out.

  4. Klik op OK om het dialoogvenster te sluiten en de telefoonlay-out toe te voegen.

    Muse maakt een site-overzicht voor de telefoonlay-out. De paginanamen, de structuur van de site en de kenmerken van de stramienpagina worden gekopieerd. Naast de lay-outknop Telefoon wordt geen plusteken (+) meer weergegeven, omdat de telefoonlay-out aan het Muse-project is toegevoegd.

    U zult zien dat de feitelijke pagina-inhoud niet aan de paginaminiatuur van de telefoonlay-out is toegevoegd. Dat is opzettelijk, zodat u alleen de gewenste inhoud naar elke pagina van de mobiele lay-out kunt kopiëren. Als u de gewenste inhoud aan elke nieuwe pagina toevoegt, kunt u het formaat van de inhoud aanpassen aan de kleinere afmetingen van het mobiele scherm.

    U kunt nieuwe pagina's toevoegen door te klikken op het plusteken rechts van de startpagina. Nadat u het site-overzicht hebt gemaakt, kunt u beginnen met het ontwerpen van de weergave voor mobiele telefoons.

    In de volgende sectie leest u hoe u de stramienpagina's voor de telefoonlay-out instelt.

    Maak het site-overzicht van de lay-out voor mobiele telefoons door nieuwe pagina's toe te voegen
    Maak het site-overzicht van de lay-out voor mobiele telefoons door nieuwe pagina's toe te voegen.

De stramienpagina instellen en veelgebruikte webpaginaelementen toevoegen

  1. Dubbelklik in de overzichtsweergave op de telefoonpagina A-stramien om deze in de ontwerpweergave te openen.

  2. Open de interface Vulling browser om een achtergrondafbeelding in te stellen.

  3. Klik op Afbeelding toevoegen in de sectie Afbeelding. Zoek het bestand dat u als achtergrondafbeelding wilt instellen en selecteer dit.

    Opties voor Afbeelding toevoegen
    Voeg een achtergrondafbeelding toe aan de stramienpagina voor de telefoon.

  4. Stel de optie Aanpassen in op Vulling en klik op de middelste positie.

  5. Klik op het grijze gebied buiten de pagina of ergens in het deelvenster Besturing om de interface Vulling browser te sluiten.

Hyperlinks toevoegen voor sitenavigatie

In Adobe Muse kunt u gemakkelijk koppelingen naar externe pagina's, downloadbare bestanden, secties in webpagina's en meer maken met Hyperlinks. Het is belangrijk dat u de juiste navigatie op uw site instelt om ervoor te zorgen dat een bezoeker gemakkelijk door de pagina's van uw website kan bladeren. Met een goed gevormde sitenavigatie kunt u uw website ook beter optimaliseren voor zoekmachines. Zie voor meer informatie Hyperlinks maken.

De vervolgkeuzelijst Hyperlinks bevat pagina's of ankerkoppelingen die aan uw siteoverzicht zijn toegevoegd. U kunt naar de juiste koppelingen zoeken, door de eerste letters van de naam van de pagina of het anker te typen. U hoeft alleen maar de eerste paar letters te typen. Het menu Hyperlinks filtert de resultaten en geeft deze weer in een vervolgkeuzelijst. Zo kunt u gemakkelijk de koppelingen openen die u snel wilt bijwerken.

Hyperlinkopties
Filter de lijst met koppelingen door de eerste paar letters te typen in het veld Hyperlinks.

Inhoud toevoegen aan de pagina's voor de telefoonlay-out

Ten eerste maakt u de pagina Home helemaal af.

  1. Klik op het tabblad Interior (Telefoon). Kopieer de hele groep met de vier genummerde knoppen.
  2. Gebruik de functie Ga naar pagina om naar de pagina Home (Telefoon) te springen en de groep te plakken. De koppelingen die u in de vorige sectie hebt toegevoegd, blijven behouden. De pagina Home en de stramienpagina Interior gebruiken dus dezelfde navigatie.
  3. Plaats de groep met de tool Selecteren midden op de pagina Home, bij de onderrand van de voettekst.
  4. Klik op het tabblad scratch (Computer) om terug te gaan naar de tijdelijke pagina. Kopieer het tekstkader in de pod helemaal links met de tekst ''There's more than one way to solve a problem''.
  5. Klik op het tabblad Home (Telefoon) en plak het tekstkader. Plaats het tekstkader met de tool Selecteren in het midden boven de groep knoppen.
Het ontwerpen van de startpagina is nu voltooid
Het ontwerpen van de pagina Home is nu voltooid.

Nu gaat u pagina-inhoud toevoegen voor de pagina Section 01.

  1. Klik op het tabblad scratch (Computer) om terug te gaan naar de tijdelijke pagina. Selecteer de witte afgeronde achtergrondrechthoek en drie tekstkaders in de tweede pod van links. De drie tekstkaders bevatten de cirkel 01, de tijdelijke tekst voor section 01 en de oranje knop Telefoon. Kopieer de geselecteerde items.
  2. Druk op Command+J (Mac) of Control+J (Windows) en typ de eerste paar letters van Section 01. Klik op de pijl-omlaag om de telefoonpagina Section 01 te selecteren en druk vervolgens op Enter/Return om deze te openen in de ontwerpweergave.
  3. Plak de elementen op de pagina Section 01 van de lay-out Telefoon. Centreer de elementen op de pagina met de tool Selecteren en met behulp van de tijdelijke hulplijnen.

Op de pagina Section 01 wordt een korte inleiding van het bedrijf gegeven en vanaf deze pagina kunnen mobiele bezoekers het bedrijf gemakkelijk bellen. Als u mobiele websites ontwerpt, kunt u een nieuw type koppeling toevoegen waarmee de bezoeker op het scherm van een smartphone kan tikken om een telefoonnummer te bellen. Dit is een groot voordeel van mobiele websites, omdat potentiële klanten zo heel gemakkelijk een bedrijf kunnen bellen.

Ga als volgt te werk om een koppeling waarmee een telefoonnummer kan worden gebeld aan een mobiele lay-out toe te voegen:

  1. Selecteer met de tool Selecteren de knop Telefoon.
  2. Typ tel:+1 gevolgd door een telefoonnummer in het veld Koppelingen, zoals bijvoorbeeld
    tel:+14155551234

Deze notatie wordt door mobiele browsers herkend als koppelingen naar telefoonnummers.

  1. Druk op Enter of Return om de koppeling op te slaan.

Opmerking: Als u liever een e-mailkoppeling wilt maken, typt u de volgende notatie in het veld van het menu Hyperlink:
mailto:designers@design-is-fun.com

Nu u de koppeling aan de knop Telefoon hebt toegevoegd, is het ontwerp van de pagina Section 01 voltooid.

  1. Klik op het tabblad scratch (Computer) om terug te gaan naar de tijdelijke pagina. Selecteer de witte afgeronde achtergrondrechthoek, de groene cirkel 02, het tekstkader Section 02, de ingesloten kaart en de groene knop Kaart. Kopieer de geselecteerde items.
  2. Druk op Command+J (Mac) of Control+J (Windows) en typ de eerste paar letters van Section 02. Klik op de pijl-omlaag om de telefoonpagina Section 02 te selecteren en druk vervolgens op Enter/Return om deze te openen in de ontwerpweergave.
  3. Plak de elementen die u in stap 1 hebt gekopieerd op de pagina Section 02 van de telefoonlay-out. Centreer de elementen op de pagina met de tool Selecteren en de uitlijningshulplijnen.

De pagina Section 02 bevat ingesloten HTML-code die op de Google Maps-website is gegenereerd om een interactieve kaart te maken.

Als u de zelfstudie Aan de slag met Muse volgt, hebt u de Google Map-broncode van de Google-website gekopieerd en de Muse-functie voor ingesloten HTML gebruikt om deze code op de pagina te plakken.

Gelukkig beschikt Google Map-code al over ondersteuning voor vingergebaren op aanraakschermen, zodat bezoekers met apparaten gemakkelijk met de kaart kunnen werken. Voor dit voorbeeldproject zijn de kaartafmetingen al aangepast.

Als u echter de afmetingen van ingesloten HTML-inhoud in uw projecten wilt vergroten of verkleinen, klikt u met de rechtermuisknop op de inhoud en kiest u HTML om de code weer te geven in het HTML-venster. U kunt de hoogte- en breedtewaarden in de code bewerken om de grootte van de kaart aan te passen aan een kleiner scherm.

De grootte wijzigen van ingesloten HTML-elementdimensies in de code
Als u het formaat van ingesloten HTML-elementen wilt aanpassen, kunt u de afmetingen in de code bijwerken.

Als u het dialoogvenster HTML bewerken hebt geopend, klikt u op OK om het te sluiten zonder wijzigingen aan te brengen.

  1. Selecteer de knop Kaart.

Nu gaat u een koppeling naar een externe website (Google Maps) toevoegen om het voor mobiele bezoekers gemakkelijk te maken om de volledige versie van de kaart te bekijken in een nieuw browservenster.

  1. Kopieer de koppeling hieronder en plak deze in het veld van het menu Hyperlinks:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Klik op het woord Hyperlinks links van het menu Hyperlinks. In het dialoogvenster dat wordt weergegeven, schakelt u het selectievakje De koppeling openen in een nieuw venster of op een nieuw tabblad in. Bovendien typt u in het veld Knopinfo de tekst Map to Adobe Fremont.
Hyperlinkopties
Stel de koppeling in om in een nieuw browservenster te openen en voeg knopinfo toe.

  1. Klik ergens buiten het dialoogvenster Hyperlinks om het te sluiten.

Nu gaat u pagina-inhoud toevoegen voor de pagina Section 03.

  1. Klik op het tabblad scratch (Computer) om terug te gaan naar de tijdelijke pagina. Selecteer de witte afgeronde achtergrondrechthoek, de paarse cirkel 03, het tekstkader Section 03, het contactformulier en de verzendknop. Kopieer de geselecteerde items.
  2. Druk op Command+J (Mac) of Control+J (Windows) en typ de eerste paar letters van Section 03. Klik op de pijl-omlaag om de telefoonpagina Section 03 te selecteren en druk vervolgens op Enter/Return om deze te openen in de ontwerpweergave.
  3. Plak de elementen die u in stap 1 hebt gekopieerd op de pagina Section 03 van de telefoonlay-out. Centreer de elementen op de pagina met de tool Selecteren en de uitlijningshulplijnen. De stijlen die op de bureaubladwidget Contactformulier zijn toegepast, blijven behouden wanneer deze naar de telefoonlay-out worden gekopieerd. De enige wijziging die u dient aan te brengen om het formulier klaar te maken voor een mobiele lay-out betreft het aanpassen van het formulier en de formulierelementen aan een kleiner scherm.

De pagina Section 03 bevat een Contactformulier-widget die scripts en een database op de Business Catalyst-server gebruikt om de ingediende formuliergegevens te verwerken. Wanneer u op Publiceren klikt en de sitebestanden uploadt van Muse, werken de formulierfuncties automatisch.

Opmerking: Het is mogelijk andere serviceproviders te gebruiken als host voor uw voltooide Muse-website, maar u dient aanvullende codering uit te voeren als contactformulieren niet worden gehost op de Business Catalyst-servers.

In dit voorbeeldproject is CAPTCHA niet ingeschakeld voor het contactformulier. CAPTCHA is een instelling in het menu Opties voor Contactformulier-widgets die u kunt toevoegen als u wilt bevestigen dat het formulier door een persoon is verzonden, en niet door een script of een ''spam bot''. In de CAPTCHA-interface wordt een afbeelding met een reeks tekens weergegeven. De bezoeker dient dezelfde reeks in te typen om het bericht via het formulier te kunnen verzenden. Spambot-verzendingen zijn vervelend, maar het is ook belangrijk rekening te houden met de bruikbaarheid van de site op een mobiele telefoon. Als het te moeilijk wordt om het formulier in te vullen, bestaat de kans dat bezoekers niet de moeite nemen hun bericht te verzenden.

De pagina Section 03 is nu voltooid. Het is niet nodig een koppeling toe te voegen naar de knop Verzenden, omdat deze knop al is ingesteld als onderdeel van de widget Contactformulier.

De laatste pagina van de telefoonlay-out, Section 04, bevat een presentatiewidget. Widgets zijn in Muse ontworpen en getest om te functioneren met alle moderne computerbrowsers en mobiele browsers. U hoeft dan ook niets te wijzigen om de presentatie te laten functioneren op een aanraakscherm.

Voer de volgende stappen uit om de inhoud van de tijdelijke pagina in de lay-out Computer te kopiëren naar de pagina Section 04 in de lay-out Telefoon:

  1. Klik op het tabblad scratch (Computer) om terug te gaan naar de tijdelijke pagina. Selecteer de lange witte achtergrondrechthoek, de rode cirkel 04, de presentatiewidget en het tekstkader Section 04. U kunt met de tool Selecteren klikken en over alle elementen slepen om deze in één keer te selecteren. Kopieer de geselecteerde items.
  2. Druk op Command+J (Mac) of Control+J (Windows) en typ de eerste paar letters van Section 04. Klik op de pijl-omlaag om de telefoonpagina Section 04 te selecteren en druk vervolgens op Enter/Return om deze te openen in de ontwerpweergave.
  3. Plak de elementen die u in stap 1 hebt gekopieerd op de pagina Section 03 van de telefoonlay-out. Centreer de elementen op de pagina met de tool Selecteren en de uitlijningshulplijnen. De stijlen die op de bureaubladwidget Contactformulier zijn toegepast, blijven behouden wanneer deze naar de telefoonlay-out worden gekopieerd. De enige wijziging die u dient aan te brengen om het formulier klaar te maken voor een mobiele lay-out betreft het aanpassen van het formulier en de formulierelementen aan een kleiner scherm. Wanneer u widgets met interactieve functies (zoals presentatiewidgets) toevoegt aan mobiele lay-outs die u in Muse maakt, bevat het deelvenster Opties ook de optie Vegen inschakelen. Deze instelling is standaard ingeschakeld, zodat alle widgets die u aan uw mobiele ontwerpen toevoegt automatisch worden ingesteld om bezoekers in staat te stellen te tikken en gebaren te gebruiken op aanraakschermen. De pagina Section 04 bevat een presentatiewidget die de desbetreffende afbeelding weergeeft als op een miniatuur wordt getikt. De presentatie is geconfigureerd voor een horizontale overgang tussen de afbeeldingen in de galerie. Dit voorbeeld vereist gebruikersinteractie om de foto's weer te geven, maar u kunt de presentatiewidget desgewenst ook instellen op Automatisch afspelen, zodat de afbeeldingen automatisch worden doorlopen als de pagina wordt geladen.

Opmerking: Als u de presentatiewidgets configureert op gebruik van de overgangen Vervagen, Horizontaal of Verticaal, schakelt Muse automatisch het gebaar Vegen inschakelen in om bezoekers toe te staan met veeggebaren op hun aanraakscherm door de presentatieafbeeldingen te bladeren.

In de volgende sectie Mobiele lay-outontwerpen maken in Muse leert u hoe u elementen gemakkelijk kunt bijwerken voor alle mobiele platformen en hoe u uw Muse-site publiceert voor elke mobiele lay-out.

Middelen bijwerken en optimaliseren voor uw mobiele website

Vergeleken met bureaubladcomputers hebben tablets en smartphones een veel beperktere processor, lagere verbindingssnelheden en een kleinere opslagcapaciteit. Daarom gelden speciale regels voor het ontwerpen en leveren van site-ontwerpen voor mobiele apparatuur.

Muse bevat eigenschappen voor optimalisatie van de afbeeldingen die in de mobiele lay-outs worden weergegeven, zodat de site snel wordt geladen en goed functioneert.

  1. Druk op Command/Control+7 om de computerlay-out weer te geven en dubbelklik vervolgens op het bureaubladbestand A-stramien om het in de ontwerpweergave te openen.
  2. Open het deelvenster Middelen door op het desbetreffende tabblad in het deelvenster te klikken om het actief te maken. Als het deelvenster is gesloten, kiest u Venster > Middelen.
  3. Selecteer de grote achtergrondafbeelding met de groene heuvels. Het middel wordt gemarkeerd in het deelvenster Middelen.
  4. Klik op de naam van het middel, background.jpg, om de lijst met op de site gebruikte instanties uit te vouwen. Het bestand voor de achtergrondafbeelding wordt drie keer vermeld met twee verschillende pictogrammen, ten teken dat het zowel in de lay-out Telefoon als in de lay-out Computer wordt gebruikt.
Deelvenster Middelen
Controleer de instanties van background.jpg in het deelvenster Middelen om te zien waar het middel op de site wordt gebruikt.

In deze kleine voorbeeldsite is de lijst met middelen vrij overzichtelijk, maar als u grotere sites maakt, kan de lijst met middelen langer worden en lastiger om mee te werken.

U kunt gemakkelijker navigeren door de lijst met middelen als u het eerste item voor elk middel selecteert en vervolgens op de pijl links ervan klikt om de set samen te vouwen. Klik nogmaals op deze pijl wanneer u de weergave wilt uitbreiden om de volledige lijst met instanties te zien waarin het middel in het siteproject wordt gebruikt.

Als u de middelen wilt zoeken die voor een specifieke lay-out worden gebruikt, klikt u boven aan de kolom met de pictogrammen Computer, Tablet en Telefoon uiterst rechts in het deelvenster Middelen. De lijst met middelen wordt dan zodanig gesorteerd dat de middelen voor elke lay-out in een geconsolideerde set worden weergegeven.

Deelvenster Middelen
Klik op de kopteksttitels van een kolom in het deelvenster Middelen om de lijst met middelen te sorteren op dat type.

Als u een wijziging in een afbeelding wilt aanbrengen zodat alle instanties van de afbeelding (in alle lay-outs) worden bijgewerkt, klikt u met de rechtermuisknop op de naam van een middel en kiest u Origineel bewerken in het getoonde menu.

Kies Origineel bewerken om het middel voor de hele site bij te werken
Kies Origineel bewerken om het middel op de hele site bij te werken.

Het oorspronkelijke bestand dat u hebt geplaatst, wordt geopend in Photoshop, Fireworks of het beeldbewerkingsprogramma waarin u het bestand hebt gemaakt, zodat u snel wijzigingen kunt aanbrengen.

Als u het gereviseerde, oorspronkelijke bestand opslaat en terugkeert naar Muse, wordt naast het item in het deelvenster Middelen het pictogram Niet gesynchroniseerd weergegeven om aan te geven dat de versie van de afbeelding op de site niet meer overeenkomt met het bronbestand. Klik nogmaals met de rechtermuisknop op het bestand en kies Middel bijwerken om alle versies van de afbeelding bij te werken naar de nieuwe versie.

Gebruik de functie Middel bijwerken om alle op de site gebruikte instanties van het middel aan te passen
Gebruik de functie Middel bijwerken om alle op de site gebruikte instanties van het middel aan te passen.

Een voorvertoning weergeven van mobiele lay-outs

U kunt op verschillende manieren een voorvertoning weergeven van de site-ontwerpen die u maakt:

Klik in de ontwerpweergave van de lay-out Computer op Voorvertoning om HTML, CSS en JavaScript te laten renderen door de ingebouwde, op Webkit gebaseerde emulator. Aan de hand van voorvertoningen kunt u zien hoe uw lay-outs eruitzien in een browser voordat een site wordt gepubliceerd en kunt u deze online controleren met een apparaat.

Klik in de ontwerpweergave van de lay-out Telefoon op Voorvertoning om de telefoonlay-out te zien. Selecteer in het menu Grootte voorvertoning de optie iPhone 4, iPhone 5, Samsung Galaxy S III of Nokia Lumia 920 om de lay-out bij verschillende schermgrootten te zien.

Voorvertoning weergeven van mobiele lay-out
Het menu Grootte voorvertoning wordt weergegeven wanneer u een voorvertoning weergeeft van de pagina's in de lay-out Telefoon of Tablet.

Klik op het pictogram rechts van het venster Grootte voorvertoning om te schakelen tussen het weergeven van de lay-out in de modus Staand of Liggend.

Grootte voorvertoning bevat vooraf gedefinieerde hoogte- en breedteverhoudingen voor de meest voorkomende formaten van mobiele-telefoonschermen.

Enkele smartphoneschermen zijn breder, zoals bijvoorbeeld die van de Motorola Droid. Wanneer een bezoeker een breder scherm heeft, schaalt de functie Viewport in Muse de breedte van de telefoonlay-out automatisch naar het beschikbare scherm.

U kunt in de voorvertoning op koppelingen klikken en door de site navigeren. U kunt bladeren om een vingergebaar te simuleren, maar u kunt de site alleen echt testen op het apparaat.

Als u op de i-knop naast het menu Grootte voorvertoning in de voorvertoningsmodus klikt, ziet u een notitie met een koppeling die het Adobe-programma Edge Inspect beschrijft. Met Edge Inspect kunt u een Chrome-browserextensie gebruiken om mobiele apparaten aan te sluiten op uw computer en deze vervolgens te synchroniseren met de inhoud die in uw Chrome-browser wordt weergegeven.

Met Edge Inspect kunt u Chrome en de optie Voorvertoning in browser van Adobe Muse gebruiken om een site op uw bureaublad te bekijken, terwijl dezelfde pagina automatisch ook wordt weergegeven op de gekoppelde apparaten. (Chrome moet zijn ingesteld als uw standaardbrowser).

Desgewenst kunt u ook Reflection kopen, een programma van een externe fabrikant. Hiermee kunt u op uw computerscherm een emulatie van uw apparaat zien (dat gebruikmaakt van dezelfde netwerkverbinding). Terwijl u door een site navigeert met uw smartphone of tablet, weerspiegelt de emulator het aanraakscherm van het apparaat.

Extra functies voor mobiele lay-outs

Vaste voetteksten

Zoals in eerdere versies van Muse, kunt u hulplijnen slepen om het gebied onder de pagina te definiëren en het voettekstgebied te bepalen. U kunt elk inhoudselement ook als een Voettekst-item instellen, zodat het onder de minimale paginahoogte die in de Site-eigenschappen is ingesteld of onder de bestaande pagina-inhoud wordt weergegeven, welke ook maar het langst is.

Het definiëren van voettekstinhoud is heel handig als een website pagina's van verschillende lengte heeft, omdat de plaatsing van de voettekst verticaal wordt aangepast, zodat deze consistent onder aan elke pagina wordt weergegeven zonder de pagina-inhoud te overlappen.

Standaard is de optie Vaste voettekst ingeschakeld. Deze functie is specifiek ontworpen voor bezoekers met grote beeldschermen. In de meeste gevallen laat u de optie Vaste voettekst ingeschakeld voor uw websites, omdat de voettekst dan op de gewenste locatie blijft staan, zelfs als het browservenster aanzienlijk groter is dan het webpaginaontwerp, zoals in een Apple-bioscoopscherm.

Als u wilt zien hoe dit werkt, kunt u een voorvertoning van een Muse-site weergeven in de browser en uitzoomen op de pagina. Wanneer u de pagina-inhoud te klein maakt in verhouding tot het browservenster, wordt het browservenster weergegeven in het gebied onder de voettekst, in plaats van de voettekst precies aan de onderrand weer te geven.

Wanneer u nieuwe sites maakt in Muse, ziet u dat de optie Vaste voettekst is ingeschakeld in het dialoogvenster Nieuwe site.

Opties voor nieuwe site
Het selectievakje Vaste voettekst wordt automatisch ingeschakeld wanneer u nieuwe sites maakt.

Over het algemeen is het verstandig de functie Vaste voettekst te gebruiken als u websites ontwerpt. Als u echter merkt dat de pagina's veel langer zijn dan u wilt (omdat een website weinig pagina-inhoud heeft en de pagina's vrij kort zijn), kunt u deze optie altijd uitschakelen in het dialoogvenster Pagina-eigenschappen.

Schakel Vaste voettekst uit via de Pagina-eigenschappen.
Nadat u een site hebt gemaakt, werkt u de Pagina-eigenschappen bij en schakelt u de optie Vaste voettekst uit.

Vastgezette elementen

De code die wordt gegenereerd door Muse wordt getest om ervoor te zorgen dat deze naar behoren functioneert en wordt weergegeven in alle moderne webbrowsers en op alle platformen.

Een van de webnormen waarin browsers voor computers verschillen van mobiele browsers, is ondersteuning voor vastgezette pagina-elementen. Wanneer u sites ontwerpt voor desktopbrowsers, kunt u een element selecteren en de optie in het venster Besturing gebruiken om deze vast te zetten in het browservenster. Vastzetten is handig met oog op consistente navigatie. Het is ook handig in gevallen waarin u een element op hetzelfde gedeelte van een lange pagina wilt behouden, ongeacht hoe ver de bezoeker naar beneden bladert.

Op het moment van schrijven, ondersteunen niet alle mobiele browsers vastgezette objecten. U dient daarom alternatieve strategieën te bedenken voor vastgezette objecten wanneer u sites ontwerpt voor telefoons en tablets.

Bij het ontwerpen van de lay-outs Telefoon of Tablet zult u merken dat de opties voor Vastzetten grijs en niet beschikbaar zijn.

Opties voor vastgezette elementen
De interface Vastzetten in het deelvenster Besturing is niet beschikbaar als u mobiele lay-outs ontwerpt.

Een site met mobiele lay-outs publiceren

U kunt sites met meerdere lay-outs op dezelfde manier publiceren in Muse als waarop u doorgaans computersites publiceert. Het is handig om proefsites te publiceren en vervolgens mobiele apparaten te gebruiken om de live versie te bekijken om de ontwerpen te testen op kleinere schermen.

Klik op Publiceren of kies Bestand > Uploaden naar FTP-host om de sitebestanden te uploaden naar de hostserver.

Wanneer u een Muse-site met meerdere lay-outs publiceert, gaat deze live met één URL. U hoeft dus maar één domeinnaam te registeren, zoals:

http://www.mijn-site.nl

Wanneer u een site met twee of drie verschillende lay-outs publiceert, wordt voor de site code gegenereerd met detectiescripts die vaststellen welk type computer of apparaat en welk type browser de bezoeker gebruikt om de pagina te bezoeken.

Deze detectiecode bepaalt de platform- en browserversie en geeft vervolgens automatisch de juiste indeling weer. U hoeft niets doen om ervoor te zorgen dat bezoekers die een tablet gebruiken ook daadwerkelijk het tabletontwerp te zien krijgen en dat bezoekers met smartphones het telefoonontwerp te zien krijgen. Dat gebeurt allemaal achter de schermen.

Met de nieuwe functies voor mobiele lay-outs in Muse kunt u uw mobiele lay-outs optimaliseren, zodat apparaatgebruikers niet onnodig grote bestanden hoeven te downloaden. De functie voor verschillende lay-outs produceert alleen de kleinere afbeeldingsbestanden, zodat de site op alle platformen en in alle browsers naar behoren functioneert.

Bekijk de artikelen en zelfstudies op de pagina Help bij Adobe Muse voor meer informatie over het werken met Muse.

Ga naar pagina gebruiken om site-inhoud naar een andere lay-out te kopiëren

Klik op het tabblad Stramien (Computer) om de stramienpagina voor computers actief te maken in de ontwerpweergave.

U kunt in Muse gemakkelijk schakelen tussen lay-outs met het meegeleverde navigatiehulpmiddel Ga naar pagina. Deze knop wordt weergegeven in de ontwerpweergave van elk project met meerdere lay-outs.

  1. Klik op de knop Ga naar pagina.
Knop Ga naar pagina
De knop Ga naar pagina lijkt op een pijl die naar een pagina wijst.

Als u met meerdere lay-outs werkt, is het handig om snel tussen twee of meer pagina's te kunnen springen, zodat u gemakkelijk inhoud kunt kopiëren en plakken.

Opmerking: u kunt op de knop Ga naar pagina klikken, maar u kunt ook de sneltoetsen Command+J (Mac) of Control+J (Windows) gebruiken.

Het dialoogvenster Ga naar pagina wordt weergegeven. Dit venster bevat een tekstveld waarin u de eerste paar letters van een paginanaam op de site kunt typen, zodat u gemakkelijk naar die pagina kunt springen zonder steeds terug te moeten gaan naar de overzichtsweergave.

  1. Typ de eerste drie letters van de paginanaam die u wilt zoeken. Typ in dit voorbeeld de eerste drie letters van het woord Stramien, dus ''str''.

Het veld scant de site op overeenkomende paginanamen en geeft deze in de onderstaande lijst weer.

  1. Druk twee keer op de pijl-omlaag om de pagina A-stramien (Telefoon) te selecteren en druk vervolgens op Return/Enter om deze pagina te openen.

De pagina Stramien (Telefoon) wordt geopend in de ontwerpweergave, klaar om te worden bewerkt.

U kunt ook de nieuwe sneltoetsen gebruiken om tussen de verschillende lay-outs van een website te navigeren:

  • Met Command/Control+7 wordt de lay-out Computer weergegeven
  • Met Command/Control+8 wordt de lay-out Tablet weergegeven
  • Met Command/Control+9 wordt de lay-out Telefoon weergegeven

Deze sneltoetsen zijn alleen actief als u een site bewerkt die over de bijbehorende lay-out beschikt. Experimenteer met het gebruik van deze nieuwe sneltoetsen om te ontdekken op welke manier u het liefst schakelt tussen lay-outs en specifieke pagina's.

U gaat nu een tweede stramienpagina maken voor de lay-out Telefoon en de ontwerpelementen toevoegen.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid