Websites met hoge resolutie maken in Adobe Muse

Verbeteringen in Adobe Muse CC 2014.3 | februari 2015

Adobe Muse ondersteunt nu HiDPI-schermen die worden uitgevoerd met Windows. Als u HiDPI-hardware van Windows gebruikt, zal het u opvallen dat de interface van Adobe Muse nu aanzienlijk scherper is.

HiDPI staat voor High Dots Per Inch en is een term die wordt gegeven aan schermen met een hoge pixeldichtheid of gewoon een hoge resolutie. Dankzij een hogere pixeldichtheid kunnen op HiDPI-schermen tekst en afbeeldingen worden weergegeven met meer details dan op een standaardscherm. Op bijvoorbeeld het Retina-scherm van Apple waarmee onder andere de iPhone, iPad, sommige Windows-apparaten en iPod Touch zijn uitgerust, kunnen tekst en afbeeldingen met hoge resolutie worden weergegeven.

De webontwerpen die worden gemaakt in Adobe Muse profiteren optimaal van de weergavekwaliteit die mogelijk is met schermen met hoge resolutie (HiDPI-schermen), zoals Retina-schermen van Apple.

U kunt gemakkelijk profiteren van HiDPI in Muse:

• Wijzig de resolutie-instelling voor de site in HiDPI
• Maak afbeeldingen die minstens twee keer (2x) zo groot zijn als de grootte die ze op de site hebben

Wanneer u een HiDPI-site uit Muse uploadt of exporteert, bevat de gegenereerde code zowel standaard- als 2x-afbeeldingen en wordt automatisch vastgesteld welke afbeeldingen moeten worden gebruikt wanneer de site op een HiDPI-scherm of een scherm met een standaardresolutie wordt weergegeven.

HiDPI inschakelen in Adobe Muse

In het resolutiemenu in het nieuwe sitedialoogvenster kunt u kiezen uit Standaard en HiDPI (2x).

U kunt de resolutie-instelling wijzigen nadat u een site hebt gemaakt door Bestand > Site-eigenschappen te kiezen.

Middelen maken met 2x-afbeeldingsgegevens

Als u optimaal wilt profiteren van HiDPI-schermen, moeten uw middelen een hogere resolutie hebben om met een hogere kwaliteit te kunnen worden weergegeven. De grootte van een middel moet minimaal het dubbele zijn van de grootte waarmee het middel op uw site wordt weergegeven.

U kunt in een handomdraai 2x-afbeeldingen maken. Een 2x-middel moet minstens twee keer de visuele grootte hebben ten opzichte van de grootte waarmee het op het scherm wordt weergegeven. Bijvoorbeeld:

Wanneer u een HiDPI-middel op het webpaginacanvas plaatst, optimaliseert Adobe Muse de afbeelding door de grootte terug te brengen tot 50%. De reductie in visuele grootte wordt toegepast om een vloeiendere en efficiënte ontwerpervaring mogelijk te maken. Dergelijke afbeeldingen hebben de vermelding "2x“ in het deelvenster Middelen. In Adobe Muse blijven de gegevens van het oorspronkelijke middel behouden ten behoeve van een hogere pixeldichtheid wanneer het middel op een HiDPI-scherm wordt weergegeven. Tekst die is omgezet in pixels evenals effecten die worden uitgevoerd als afbeeldingen, worden in Adobe Muse bij het publiceren of exporteren automatisch gegenereerd als 2x-afbeeldingen en afbeeldingen met standaardgrootte.

U kunt in het deelvenster Middelen (Venster > Middelen) nagaan of uw middelen 2x-middelen zijn en dus voldoende gegevens bevatten voor weergave in een hogere kwaliteit. Wanneer een middel voldoende gegevens bevat, wordt het 2x-pictogram naast het middel weergegeven. Als het 2x-pictogram niet naast het middel wordt weergegeven, bevat het middel niet voldoende gegevens voor weergave in de hoogste kwaliteit en wordt het weergegeven met de standaardresolutie.

HiDPI-afbeeldingen exporteren

Er zijn speciale gevallen waarin Adobe Muse geen afbeelding met hoge resolutie (ofwel een afbeelding met 2x-gegevens) exporteert. Wanneer afbeeldingen zijn geschaald om ze in containers te laten passen (bijvoorbeeld bij pagina's met achtergrondafbeeldingen en diapresentaties op een volledig scherm), exporteert Adobe Muse bij het publiceren geen HiDPI-versie van de afbeelding. Met name in de volgende gevallen wordt alleen de standaardversie van de afbeelding geëxporteerd:

• 100% breedte: Aanpassen aan pagina/Aanpassen aan vulling
• Diapresentatie voor volledig scherm: Aanpassen aan pagina/Aanpassen aan vulling
• Achtergrond browser/pagina: Aanpassen aan pagina/Aanpassen aan vulling

Houd er bovendien rekening mee dat naast elkaar geplaatste achtergrondafbeeldingen anders worden verwerkt dan achtergrondafbeeldingen die zijn ingesteld op Aanpassen aan pagina/Aanpassen aan vulling. Bij naast elkaar geplaatste afbeeldingen levert Adobe Muse zowel standaardafbeeldingen als afbeeldingen met hoge resolutie voor standaard- en HiDPI-schermen bij het exporteren van de website.   Als u in Adobe Muse een afbeelding met hoge resolutie met 2x-gegevens herhaalt door deze naast de andere te zetten, wordt de afbeelding behandeld als elke andere afbeelding en op het webpaginacanvas geplaatst met een grootte die de helft is van de oorspronkelijke grootte. Bij het exporteren wordt de afbeelding met de halve grootte (50%) geëxporteerd als de afbeelding met standaardresolutie en de native afbeelding als de afbeelding met hoge resolutie en 2x-gegevens.

Rekening houden met bezoekers van uw site

HiDPI-beeldschermen stellen sitebezoekers in staat webinhoud te bekijken met de hoogst mogelijke visuele kwaliteit omdat meer afbeeldingsgegevens worden gebruikt. 2x-afbeeldingsgroottes resulteren in afbeeldingsbestanden die vier keer zo groot zijn als afbeeldingen met een standaardresolutie. Sitebezoekers moeten dus vier keer zoveel gegevens laden om HiDPI-afbeeldingen te kunnen weergeven. Om inhoud sneller weer te geven op HiDPI-sites, exporteert Muse HiDPI-middelen en middelen met standaardresolutie. De middelen met een standaardresolutie worden het eerst geladen, terwijl de HiDPI-middelen progressief over de standaardversies heen worden geladen.

De widget HiDPI-knop (aan/uit)

Hoewel de oplossing voor progressief laden voor veel sitebezoekers geschikt is, kan deze voor problemen zorgen bij bezoekers met een abonnement met een beperkte hoeveelheid gegevens of een andere verbinding met beperkte of dure downloadquota. Voor dergelijke sitebezoekers kunt u overwegen de widget HiDPI-knop (aan/uit) toe te voegen. Wanneer de HiDPI-knop (aan/uit) op een pagina wordt geplaatst, wordt die pagina aanvankelijk alleen met de standaardresolutie geladen en wordt de HiDPI-knop weergegeven als uitgeschakeld. Als de sitebezoeker de HiDPI-knop vervolgens inschakelt, worden vanaf dat moment op alle pagina's die de HiDPI-knop (aan/uit) bevatten HiDPI-afbeeldingen geladen totdat de sitebezoeker HiDPI uitschakelt, de browser afsluit of cookies wist. Op pagina's zonder de HiDPI-knop (aan/uit) worden altijd HiDPI-afbeeldingen geladen wanneer deze worden weergegeven op een HiDPI- of Retina-scherm. Als de site niet wordt weergegeven op een HiDPI- of Retina-scherm, heeft de knop de niet-beschikbare staat en worden alleen afbeeldingen met standaardresolutie geladen.