Beste SD-leden,

Van één van mijn collega's heb ik een PSD gekregen voor een mobiele website. Deze website is ontworpen met een breedte van 640 pixels. Er gebeurd echter iets raars met het slicen van dit ontwerp.

Wanneer ik de afbeeldingen slice (bijv 270px breed) en deze bekijk in de website (op de mobiel) zijn deze afbeeldingen bijna helemaal scherm vullend (maar de resolutie is 640px breed, huh?). Ik gebruik deze viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=yes" />

Verder doe ik niks met de afbeelding. Hij heeft de ware grootte, geen padding, geen margin etc. Kan dit liggen dat het verkeerd ontworpen is in de PSD? Of ligt het aan de code?

Grappig is dat wanneer ik initial-scale=1 verander naar initial-scale=0.5 de afbeelding wel goed is, maar dat lijkt mij niet helemaal de bedoeling. De tekst wordt namelijk daardoor verkleind.

Ik ben op zoek naar oplossingen en/of aanbevelingen?

Met vriendelijke groet,

Jeroen Burgers

Ik kan je weinig informatie geven, maar dat het aan de PSD ligt kan natuurlijk niet :) Als je responsive aan het basen bent dien je er voor te zorgen dat de website ook op andere resoluties goed weergegeven wordt en is het niet de bedoeling dat je maar 1 maat hebt.

Mobieltjes heb je met meerdere resoluties, 640 pixels breed is geen foolproof oplossing voor alle toestellen.

Hi Joshua,

Het klopt wat je zegt. Het framework dat is opgezet zorgt er ook voor dat alles schaalbaar is. Waar ik nu mee zit is de afbeelding die door de gebruiker ingeladen kan worden middels het CMS. De afbeelding is 270px breed, wanneer ik deze bekijk op mijn iPhone is dit bijna scherm vullend, maar ik ben niet ingezoomd.

Doordat initial-scale=1 lijkt mijn resolutie voor de iPhone niet op 640px breed staat, maar op de 320 pixel breed. Wanneer ik dit initial-scale=1 aanpas naar initial-scale=0.5 is de resolutie wel goed. Alleen alle teksten zijn dan super klein. Het is voor het eerst dat ik hiermee zo loop te stoeien.

Met vriendelijke groet,

Jeroen Burgers

Origineel gepost door Joshua de Gier

Ik kan je weinig informatie geven, maar dat het aan de PSD ligt kan natuurlijk niet :) Als je responsive aan het basen bent dien je er voor te zorgen dat de website ook op andere resoluties goed weergegeven wordt en is het niet de bedoeling dat je maar 1 maat hebt.

Mobieltjes heb je met meerdere resoluties, 640 pixels breed is geen foolproof oplossing voor alle toestellen.

Zoomt een mobiele-browser (instelbaar wellicht) niet altijd in op het grootste onderdeel en laat die fullscreen zien? In dit geval je afbeelding van 270px, dat is het grootste element en dan zoomt hij zover in dat die fullscreen is.
Probeer er eens een lijntje (wit/transparant) boven te zetten van 640px X 1px

Wat betreft de afbeelding moet je volgens mij bij een responsive design altijd ervoor zorgen dat je een high-res plaatje in het design zet, zodat deze in kleinere resoluties omlaag geschaald wordt (= betere kwaliteit dan omhoog schalen).

Volgensmij is het retina scherm waar je rekening mee houd, maar waar je de webapp niet mee bekijkt. De eerste hit die ik via Google krijg citeert dit "The iPhone is 320×480, the iPhone 4 is 640×960.", Waarschijnlijk bekijk je de pagina op een oudere iphone waardoor de afbeelding (bijna) schermvullend is, met CSS is dit aan te passen.

Kijk maar even hier:
http://forums.chrilith.com/viewtopic.php?id=487

Edit:
Dit verklaart ook gelijk waarom initial-scale=0.5 wel de juiste grootte weergeeft, een retina scherm heeft namelijk een resolutie die 2 keer zo groot is en 0.5 * 2 = 1 ;)

Dank voor de reacties. Zelf kwam ik hierachter:

The iPhone 4 display has four times the number of pixels as that of the original iPhone. To prevent mobile sites from looking tiny, it magnifies them by 200%. That works great on text and vector images like SVG. But its not so hot on bitmap images (or even the HTML5 canvas so it would seem). To avoid pixelation, you need to insert alternative high resolution images for the iPhone 4.
Designers should create their Photoshop documents with a width of 640 pixels. Developers should export the images at full res for iPhone 4 and 50% res for everything else.

• http://labs.thesedays.com/blog/2010/...bile-websites/
• http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
• http://www.webpagefx.com/design-buil...-web-site.html