Probleem Muse phone-layout

Status
Niet open voor verdere reacties.

willema

Gebruiker
Lid geworden
26 aug 2005
Berichten
308
Dag allemaal,

ik ben vertrouwd met Adobe software zoals Premiere Pro, After Effects, Photoshop en Illustrator.
Dreamweaver ken ik niet. En daarom probeer ik met Muse een eenvoudige site op te stellen.
Opmaak lukt goed vanwege mijn kennis van Illustrator (want met Indesign heb ik ook nog niet gewerkt)
Maar met de lay-out voor phone loopt het fout.

Ziet iemand wat er fout loopt in onderstaand eenvoudig testje ?

muse design tab.png
Bovenste helft een paarse rechthoek. Onderste helft nog eens in twee gedeeld met links een groene en rechts een rode rechthoek. Footer is blanco. Daarboven een tekst over de volledige breedte in het grootste lettertype (Arial Bold 140).
Heb de Page Properties er bij gezet in de screengrab, waarop je ziet dat de phone-layout op Fixed Width staat.

muse preview tab.png
In Muse Preview ziet het er OK uit.

Maar wanneer ik het upload naar mijn webplek en open op verschillende telefoons ziet het er zo uit.
phone.png

Ziet iemand wat ik fout doe ?
 
.... waarop je ziet dat de phone-layout op Fixed Width staat
Op een smartphone is het gebruikelijk om de breedte op "fluid 100%" te zetten. Stel dat je de breedte op "fixed 320 px" voor smartphone zou zetten (niet groter) dan werkt het niet op de kleine tablets. De min-height moet op 0 of 100% want je weet niet hoe hoog het scherm van de smartphone is (verschillende smartphones hebben verschillende hoogtes). Gebruik op de buitenste box geen margin! Een padding mag alleen als je deze corrigeert in de box die direct binnen de buitenste box zit (pff, ik hoop dat dit laatste duidelijk is, lastig uitleggen).
 
Laatst bewerkt:
Dankjewel bron, maar sorry: Ik begrijp het niet. Van percentages is geen sprake in het Page Properties menu. Kan het alleen veranderen in Fluid Width. Maar dat verandert niets na upload.

Kan je een screengrab posten van de instellingen ? Of is er ergens een Muse-project te downloaden waar alles correct staat ingesteld voor die phone-instellingen?
Ik ben er van overtuigd dat het wellicht niet zo moeilijk is, maar ik zie momenteel het licht aan de andere kant van de tunnel nog niet.
Maar dat had ik ook toen ik After Effects en alle andere Adobe-soft onder de knie wilde krijgen. Heeft ook lang geduurd vooraleer ik alles klaar zag :)
 
Als je een website pagina goed wilt weergeven op smartphone maar ook op tablet en pc, dan is het belangrijk dat er met percentages wordt gewerkt. Je weet immers niet welke resolutie het scherm heeft waarmee iemand jouw pagina bekijkt. Eén ding is wel zeker, als je met % in de breedte werkt dan maakt de resolutie van een scherm niet uit.
Geen idee hoe oud de Muse versie is die je gebruikt of wat de mogelijkheden ervan zijn maar het heeft duidelijk beperkingen. Overigens ken ik Muse niet omdat ik pagina's hoofdzakelijk in Notepad++ schrijf. In de bjjlage vind je een werkend concept die je misschien in Muse kan openen en bewerken. Laat maar weten als je een vraag over dit concept hebt.

Tip: google eens op: adobe muse responsive
(want een responsive pagina past zich automatisch aan de schermresolutie aan van een smartphone, tablet en pc)
 

Bijlagen

  • html-css.zip
    1,1 KB · Weergaven: 26
Laatst bewerkt:
Dankjewel bron, ondertussen door tientallen testen te doen en telkens te uploaden en te bekijken zelf de ideale afmetingen voor mijn phone lay-out gevonden.
 
ondertussen door tientallen testen te doen en telkens te uploaden en te bekijken zelf de ideale afmetingen voor mijn phone lay-out gevonden.
Dan wordt de pagina wel op jouw smartphone (en misschien nog een paar) goed weergegeven maar zeker niet op alle merken en modellen die in omloop zijn. Dit was een groot probleem voor website bouwers omdat het niet lukt een pagina op alle apparaten en alle browsers en alle versies te testen. Dit probleem is opgelost door een webpagina responsive te maken, dan hoef je hier niet meer over na te denken. Een tweede voordeel is dat de pagina dan ook op alle tablets, laptops, monitoren, tv's, printers en beamers goed wordt weergegeven. Een voorbeeld van een responsive webpagina vind je in het bestand wat ik je heb gegeven. Het werkt gewoon op elk apparaat!

Tip: uploaden om te testen hoeft niet. Open het bestand in de browser op je pc en maak de browser smal, dan zie je hoe het op je smartphone komt te staan.

browser-desktop.jpg browser-smartphone.jpg

Het is gebruikelijk dat op een smartphone de kolommen stapelen i.v.m. leesbaarheid, tenzij er een echte reden is om dit niet te doen, bijvoorbeeld 2 thumb plaatjes naast elkaar.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan