Mobiele versie website zonder inzoom?

[kramer65]

Hallo,

Ik wil beginnen met het maken van een mobiele versie van mijn site en wilde mij goed voorbereiden. Ik heb op een telefoon eens zitten kijken hoe andere site's dat doen. Nou krijg je altijd een website te zien en daar moet je op zo'n telefoon dan op inzoomen (door dubbelklik oid). Inzoomen is nodig, zelfs als de site is geoptimaliseerd voor mobiel gebruik. Voorbeeld: mobiel.ns.nl

Het valt mij op dat google (m.google.com) het als enige voor elkaar heeft gekregen om een website te laten zien zonder dat je moet inzoomen. Je kan hem gewon meteen gebruiken. Ik heb zitten kijken naar de bron daarvan en ik kan niets ontdekken wat daarop duidt. Ik heb de bron even gedownload en op mijn eigen domein gezet omdat je vanaf je pc naar de normale google wordt ge-redirect; www.hkramer.nl/m.htm . De zip ervan is hier: www.hkramer.nl/m.htm.zip

Mijn vraag is dus; hoe krijgt google het voor elkaar dat als je op een telefoon naar hun site gaat, je niet hoeft in te zoomen om de boel te zien of gebruiken?


Alle tips/ideeën welkom!

[HuHu]

Wat dacht je van:

HTML:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

Bovenaan in de broncode van Google.

[Johnny]

Door de pagina's zo klein te maken dat ze helemaal op het scherm van je telefoon passen? Verder is dit gedrag nogal afhankelijk van de (mobiele) browser die je gebruikt. Welke browser heb je op je telefoon gebruikt?

[digital-IMEI]

Op welke telefoons heb je verschillende website bekeken als ik vragen mag? Of nog beter, welke browsers heb je gebruikt?

Van Opera/iPhone weet ik dat je moet inzoomen maar bij m`n eigen Nokia N95 hoef ik totaal niet in te zoomen.

Ik denk dat dit geheel meer te maken heeft hoe een browser een website standaard laat zien, Opera laat voor zover ik weet standaard de hele website zien op 320*240 (voorbeeld) Op m`n Nokia N95 krijg ik alleen maar de linker bovenhoek van de website te zien en moet ik dus zelf naar de "main content" navigeren...

Een voordeel van Google is natuurlijk ook dat ze maar heel weinig content weergeven standaard (zoekbalk, logo en nog wat "about Google" linkjes...) Heb je de mobiele Google versie ook geprobeerd met een zoekopdracht?

[kramer65]

@Johnny
Ik gebruik zelf opera (op mijn Samsung Omnia). Maar daarmee heb ik zowel mobiel.ns.nl en m.google.com getest.

@HuHu
Is dat echt de oplossing ja? Als dat zo simpel is, waarom gebruiken niet meer site's dat? Ik heb dit effect tot noch toe alleen maar bij google gezien namelijk..

@ Sjengcity
Ik heb idd ook zoekopdrachten op google geprobeerd en dat geeft ook perfect weer.. Ik dacht eerst nog dat het lag aan het feit dat ze hun content gewoon niet te breed maken. Maar de content van mobiel.ns.nl is ook heel small..
(ps. 'Sjengcity', bedoel je daarmee M'tricht?)

[ Voor 37% gewijzigd door kramer65 op 28-04-2009 10:50 ]

[HuHu]

Johnny schreef op dinsdag 28 april 2009 @ 10:43:
Door de pagina's zo klein te maken dat ze helemaal op het scherm van je telefoon passen? Verder is dit gedrag nogal afhankelijk van de (mobiele) browser die je gebruikt. Welke browser heb je op je telefoon gebruikt?

Dat geldt voor zowel mobiel.ns.nl als m.google.com. Beide pagina's zijn erg klein en passen makkelijk binnen één venster zonder dat je hoeft te zoomen.

Echter moet je bij de NS wel zoomen en bij Google niet, ondanks dat de pagina's qua lay-out weinig verschillen.

[HuHu]

kramer65 schreef op dinsdag 28 april 2009 @ 10:47:

@HuHu
Is dat echt de oplossing ja? Als dat zo simpel is, waarom gebruiken niet meer site's dat? Ik heb dit effect tot noch toe alleen maar bij google gezien namelijk..

Ik heb geen mobiel waarmee ik het kan testen, maar probeer het eens zou ik zeggen. Als ik de code zo lees moet het dat wel zijn.

Overigens kun je de mobiele versie van Google ook gewoon in je browser bekijken via http://google.com/m

[digital-IMEI]

kramer65 schreef op dinsdag 28 april 2009 @ 10:47:

@ Sjengcity
Ik heb idd ook zoekopdrachten op google geprobeerd en dat geeft ook perfect weer.. Ik dacht eerst nog dat het lag aan het feit dat ze hun content gewoon niet te breed maken. Maar de content van mobiel.ns.nl is ook heel small..

Misschien dat je hier wat mee kunt, Wikipedia: Mobile browser
Een aantal kun je downloaden en testen om Windows Mobile, dan kun je eens verschillende browsers met elkaar vergelijken.

(ps. 'Sjengcity', bedoel je daarmee M'tricht?)

[kramer65]

Top!

Ik heb het net even getest op hkramer.nl/mtest.html en die eerste tip van jou (HuHu) werkt idd als een tiet!

Dankjewel! Zo ben ik alweer een stapje verder naar een goede mobiele site. Nu moet ik aleen nog een php-redirect hebben als de screen 'klein' is..

[HuHu]

Kan niet. PHP is server-side en daamee kun je nooit de schermresolutie opvragen. Een client-side redirect met JavaScript is wel mogelijk.

[digital-IMEI]

kramer65 schreef op dinsdag 28 april 2009 @ 11:00:
Top!

Ik heb het net even getest op hkramer.nl/mtest.html en die eerste tip van jou (HuHu) werkt idd als een tiet!

Dankjewel! Zo ben ik alweer een stapje verder naar een goede mobiele site. Nu moet ik aleen nog een php-redirect hebben als de screen 'klein' is..

HuHu schreef op dinsdag 28 april 2009 @ 11:02:
Kan niet. PHP is server-side en daamee kun je nooit de schermresolutie opvragen. Een client-side redirect met JavaScript is wel mogelijk.

Wat je wel kunt doen is dmv javascript de schermresolutie controlleren bij het laden van de "desktop" versie en van daaruit bepalen of de bezoeker niet beter doorgestuurd kan worden naar website.mobi.

edit; zorg wel ervoor dat de bezoeker ook de mogelijkheid heeft om toch naar de desktopversie te gaan met zijn mobiel. Als ik ergens een hekel aan heb is als ik zonder te vragen op een mobiele versie gedropt wordt en daar net die functies mis die ik wilde gebruiken.
Al helemaal als je dan ook nog niet eens de kans hebt om terug te gaan naar de desktopversie.

[ Voor 18% gewijzigd door digital-IMEI op 28-04-2009 11:07 ]

[kramer65]

HuHu schreef op dinsdag 28 april 2009 @ 11:02:
Kan niet. PHP is server-side en daamee kun je nooit de schermresolutie opvragen. Een client-side redirect met JavaScript is wel mogelijk.

Oja natuurlijk. Had ik niet aan gedacht. Ik zit inmiddels echter flink rond te lezen en ik las hier dat mobiele browsers vaak hun javascript uit hebben staan..

Toch moet het op de een of andere manier mogelijk zijn toch? Dat wil zeggen, google kan het iig..

[RobIII]

Je zou de user-agent kunnen inspecteren (server side dus) en a.d.h.v die waarde redirecten/andere pagina serveren. 100% betrouwbaar is het niet maar 't is beter dan niets Daarbij zal bij mobiele gebruikers de user-agent vaak nog "wel in orde" zijn terwijl er op desktops nog wel eens mee geklooid wordt; hebben gebruikers dat gedaan en krijgen ze een mobiele versie voorgeschoteld op hun desktop dan is 't hun eigen schuld

[ Voor 46% gewijzigd door RobIII op 28-04-2009 11:11 ]

[digital-IMEI]

$_SERVER[‘HTTP_USER_AGENT’] is wat je zoekt

[ Voor 0% gewijzigd door digital-IMEI op 28-04-2009 11:13 . Reden: pfff spuit 11 ]

[Deef_K]

Misschien een leuk extraatje. Met de iphone kan je bladwijzers maken op je board maar dan maakt die automatisch een print screen van de website. Je kan ook zelf een icoon maken door een .png van 57x57 pixels te maken en die aan te roepen door bijvoorbeeld:

code:

<link rel="apple-touch-icon" href="/images/apple.png" />

De iphone maakt zelf het plaatje met ronde hoeken en zo'n glans effect er overheen.

[ Voor 11% gewijzigd door Deef_K op 28-04-2009 11:17 ]

[kramer65]

mmmmm dat is ook wel een idee.

Ik kwam net ook dit tegen: http://wurfl.sourceforge.net/
Het is een xml bibliotheek die de meeste mobiele apparaten schijnt te herkennen en daardoor ook hun kunnen op waarde kan schatten. Ik denk dat ik daar wel wat mee zou kunnen.

@ NeefDave
Ik begrijp niet helemaal wat je bedoelt. 'Bladwijzers op je board' maken? Wat voor 'board'? En wat is precies de functie van dat icoontje dan?

[edit] Ah ok! Nu begrijp ik waar je het over hebt! Dus een directe snelkoppeling naar mijn eigen site voor iPhone gebruikers. Dat is idd een fantastisch idee! Ik ga er eens wat meer over lezen!

[ Voor 41% gewijzigd door kramer65 op 28-04-2009 11:21 ]

[Wiethoofd]

Meer info over die webclip icon voor de iPhone/iPod Touch: [feat] Webclip icons Tweakers en GoT iPhone/iPod Touch

[kramer65]

Top! Ik denk dat ik al heel wat meer info heb voor mijn mobiele site. Ik ga er komende week eens mee aan de slag!

Heel erg bedankt voor alle hulp en tips!

(alle tips en trucks uiteraard nog steeds welkom!)