Pixels

Status
Niet open voor verdere reacties.
T

Thomasje

Gebruiker
Lid geworden
12 mei 2007
Berichten
337
Bij het bouwen van een mobiele website heb ik gemerkt dat een plaatje van 770px breed precies de breedte van het beeldscherm van mijn Samsung Galaxy telefoon vult. Maar: het beeld van mijn Galaxy is maar 320 pixels breed. Hoe moet dit worden verklaard?
 
Ik begrijp nu wat je bedoelt, dat het plaatje wordt uitgezoomd. Maar ik kan mij niet voorstellen dat het een wordt ingezoomd en het ander uitgezoomd terwijl ik dat in de html-code niet heb meegegeven.
 
Dat is toch wel zo ;)

Elke website doet dat (dat doet je android OS) niet je html
 
Ik heb wat proefjes genomen en gemerkt dat een Samsung Galaxy, iPhone en iPad niet helemaal eender omgaan met een webpagina. Ik maak mijn mobiele website's voortaan met een pixel-breedte (de titel-plaat) iets minder dan het scherm van de iPhone. En dan pas ik de font-grootte zo aan dat het goed te lezen is op de Samsung en ook op de iPhone.
 
Laatst bewerkt:
En waarom?

Als ik dus een kleiner scherm heb dan de iphone bijv. dan mag ik maar je site niet goed zien?
Je limiteerd zo nogal het bereik van je website.

Als jij je website goed schrijft en de goede foto's ervoor neemt dan werkt het prima op vrijwel IEDERE telefoon.
Tuurlijk op iedere telefoon ziet het er anders uit, maar is dat erg? Nogmaals als je hem goed schrijft dan krijg je een goede nette representatie van de website.


PS: als je verder vragen hebt over het schrijven van betere mobiele sites dan heb je altijd het helpmij html/css forum ;)
 
Ik neem aan dat op een kleiner scherm dan wat de Samsung Galaxy heeft (320x480) de website nog wat meer uitgezoomd wordt.
 
Laatst bewerkt:
Thomasje zei:
Ik neem aan dat op een kleiner scherm dan wat de Samsung Galaxy heeft (320x480) de website nog wat meer uitgezoomd wordt.
Klik om te vergroten...

Alleen als je je website NIET optimaliseerd voor mobieltjes.
De reden dat hij nu uitzoomed is omdat JIJ (als developer) er niet voor zorgt dat er een nette (wel passende) versie van je website bestaat.


Wat je moet doen is hetvolgende:

  1. Maak je website voor op de pc
  2. Gebruik media query's om je website te laten werken op een mobieltje.

Meer info over mediaquery's: http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
 
Wat je voorstelt is mij veel te ingewikkeld en voor mij niet praktisch. Ik ben tevreden over het huidige resultaat.
 
Met zo'n mindset leer je het natuurlijk nooit :confused:

Maar als het je bevalt dan wens ik je verder nog succes.


PS: zet je de vraag even op opgelost?
 
Dank voor je hulp. Ik ben inderdaad tevreden met het resultaat, en ook met wat ik geleerd heb.
 
Je kan ook een aparte site bouwen voor de mobiele platformen met bijvoorbeeld:

http://jquerymobile.com/

En het is beter dat je wel optimaliseerd voor de mobiele platformen volgens mij is zo'n 20-25% van het verkeer op jouw website van smartphones/tablets.
 
lord4163 zei:
Je kan ook een aparte site bouwen voor de mobiele platformen met bijvoorbeeld:

http://jquerymobile.com/

En het is beter dat je wel optimaliseerd voor de mobiele platformen volgens mij is zo'n 20-25% van het verkeer op jouw website van smartphones/tablets.
Klik om te vergroten...

Die website had ik al gevonden.

Iets anders: waarom komt deze mobiele website van mij:
mobiel.verbodengeschriften.nl
WEL passend in het scherm op mijn Samsung Galay en mijn andere website:
mobile.gospelofthomas.org
NIET?
 
Laatst bewerkt:
Ze doen het bij mij allembei niet.

Je kan het zelf testen met mobiletest.me



PS: kijk eens naar de word-wrap feature van css, dat helpt al enorm veel.
Ook is het veranderen van de header image op de eerste site naarmate van de schermgroote een slim idee (iets wat nu dus niet gebeurd)
 
Laatst bewerkt:
Ik heb in de loop der jaren de mobiele websites die ik bouwde vaak getest, ook met behulp van diverse emulators. Maar het bleek het beste om in de praktijk te testen. Daarom heb ik onlangs een iPad, een Samsung Galaxy en een iPhone gekocht. Ook met de breedte van het kopplaatje heb ik de afgelopen dagen uitgebreid geexperimenteerd. Een plaatje met een pixel-breedte van 900 bleek het beste te bevallen. Ik maak het liever niet smaller, anders wordt het op de iPnone te klein. Ik heb er de afgelopen dagen, en vooral gisteren, zoveel tijd en energie in gestopt dat ik het nu even kalm aan doe - het is ook zulk mooi weer ;-) Later zal ik nog eens kijken of er iets te bereiken is met word-wrap.
 
Laatst bewerkt:
Het is zeker mooi weer.


Wat ik bedoel met het header plaatje is het volgende:

Op een scherm van groter dan 900 pixels pak je het plaatje van 900 pixels
Op een scherm tussen 720 -900 pak je een plaatje van 720
Daaronder pak je een plaatje van bijv 360.


Je kan er zoveel pakken als je wilt.

Nu heb je op de mobiel namelijk een plaatje doorlopen naast het scherm.
 
Je gebruikt dan sowiets:

HTML: 
@media screen and (max-width: 1000px) {
    .img_header {
        background: url(/images/900px.jpg);
        width: 900px;
        height: 200px;
    }
}

@media screen and (max-width: 720px) {
    .img_header {
        background: url(../images/720px.jpg);
        width: 900px;
        height 200px;
    }
}

img_header is dan uiteraard de div waar de foto in staat (mag een lege div zijn aangezien je de grote in css bepaald).

Als je dit gecombineerd met wordwrap doet dan komen beide sites al een stuk dichter bij een nette mobiele site :)


ps: op registrar.mi-soft.nl kan je een voorbeeld zien, als je de browser kleiner maakt positioneerd het logo zich anders en de kolom "Doneren" zal verdwijnen.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan