Archief - Tips om te designen en coden voor mobile?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
-

-BVR-

Legacy Member
De titel spreekt voor zich. Heeft iemand enige tips om te coden voor mobile devices?

Ook, en voornamelijk, de vraag welke width ik moet gebruiken? Of best met een 100% werken? Aangezien alle devices zo wat verschillen hé :)

Alle tips welkom, ook ivm design!
k

krulle3

Legacy Member
Voor high-end smartphones is dit vaak 480x800 en coden, jah, hangt er vanaf welk systeem je wenst te gebruiken zeker?
U

UnD3RD0G

Legacy Member
Ik heb net een topnotch website moeten maken- ik mag hier jammer genoeg geen publieke credits voor opnemen - NDA :( - maar mobile is in eerste instantie logisch denken.

Knopen functioneel en operationeel houden, duidelijkheid brengen in je site structuur tov gebruiksmogeliijkheden, de gebruiker de meest nuttige en voor de hand liggende info het meest toegankelijk maken, alles zo 'licht' mogelijk houden - bandwidth = money & time - css3 waar mogelijk, en een mooi non css3 alternatief - ...

Er kan tevens op de pageload een test gedaan worden naar de screenres van het toestel, zo kan je bv onderscheid maken tussen de highend toestellen ( htc, iphone, androids,... met een wat groter scherm ) en de mid - low range internet-able phones - en hiervoor een alternatieve / aangepaste CSS opstellen.

Het width probleem is eentje waar geen antwoord op bestaat. Als je procentueel werkt, zal je zien dat je fluid layout zal veranderen aan de hand van de resoltutie ( bv. landscape view van iphone of ipad ) - ik heb geopteerd voor een mix van beide voor een optimaal resultaat.
C

Carrion

Legacy Member
En hoe zorg je dan dat de smartphone de correcte css gaat inladen?
Z

Zero Grav

Legacy Member
Carrion zei:
En hoe zorg je dan dat de smartphone de correcte css gaat inladen?
Klik om te vergroten...

Media Queries bij CSS bijgestaan door specifieke Meta tags die doorgeven hoe Mobile Browsers uw site moeten behandelen (als zijnde fullscreen ed).
'k Zal er binnenkort wel eens dieper op in gaan in de mate dat ik er zelf wat van af ken.
-

-BVR-

Legacy Member
Dx-Solutions zei:
Hier wat links met interessante informatie

Detect Mobile Browsers - Mobile User Agent Detection
Klik om te vergroten...

Bedankt, ik heb deze link gebruikt. Werkt perfect ;)

Ook: ik zou met css3 media queries of javascript werken voor de resolutietest (ik heb op de gewone site al een javascriptje hiervoor), maar als ik me vergis hebben maar weinig mobiele browsers (gewone gsm's) javascript support (wel opera mini enzo), noch css3?
S

Shaddix

Legacy Member
enkele maanden terug JQuery Mobile gebruikt voor een project
dat werkt nog voor geen meter, de performantie op de gemiddelde smartphone is superslecht
a

adrianhates

Legacy Member
DieselPower zei:
Modernizr
Klik om te vergroten...

modernizr is nog niet echt relevant for mobile development..
Javascript int algemeen op mobile browsers sucked nog al kunde ze er wel mee targetten.

Javascript achterwege laten tot ge uw mobile design al consequent hebt in de meest gangbare mobile browsers.
D

Dubbelpunt

Legacy Member
en zoek vooral of ze veel bezoekers krijgen via een iPhone etc. ik ken iemand die dit wou, en uiteindelijk waren hij en zijn vrouw de enige bezoekers :D

ik denk dat je ook 2 sites moet maken:
www.site.be
m.site.be
-

-BVR-

Legacy Member
@dubbelpunt: jep, zo gaat het ook. Op alle pagina's van de gewone site staat een php include van een scriptje dat controleert wat voor device het is en bij mobile devices redirect hij dan aytomatisch naar m.site.be :) (dat is de eerste link van Dx-Solutions en werkt heel goed :))
d

dJeez

Legacy Member
BramVroy zei:
@dubbelpunt: jep, zo gaat het ook. Op alle pagina's van de gewone site staat een php include van een scriptje dat controleert wat voor device het is en bij mobile devices redirect hij dan aytomatisch naar m.site.be :) (dat is de eerste link van Dx-Solutions en werkt heel goed :))
Klik om te vergroten...
Hmm, ik zie die automatische doorverwijzingen niet echt zitten. Soms is dat irritant, een (eenmalige - nu ja, op basis van cookie vb) redirect waar je erop wijst dat er een mobile versie van de site bestaat, met optie om gewoon door te gaan of de mobile site te bezoeken vind ik dan handiger (uiteraard enkel indien het om een mobiel device gaat dat je kan herkennen). Maar dat is uiteraard puur persoonlijke voorkeur hé.

BTW Op Stackoverflow is er ook net een relevant scriptje gepasseerd. Ik zou het niet echt aanraden, maar als eerste stap is 't misschien wel handig (voorzover PHP als module draait, anders moet je voor een andere optie kiezen - je kan er wel min op meer op voortbouwen) : php - MOBILE enable websites - Stack Overflow
D

DieselPower

Legacy Member
adrianhates zei:
modernizr is nog niet echt relevant for mobile development..
Javascript int algemeen op mobile browsers sucked nog al kunde ze er wel mee targetten.

Javascript achterwege laten tot ge uw mobile design al consequent hebt in de meest gangbare mobile browsers.
Klik om te vergroten...
Er is support voor Nokia en Blackberry browsers.
S

Shaddix

Legacy Member
hoe zit het nu eigenlijk met CSS3 suport op mobiele browsers? ik maakte gisteren een mockup met CSS3\HTML5, en wat in de stockbrowser van android prima uitzag, zag er in Opera Mini onopgemaakt uit (misschien geen suport voor de HTML5 manier van linken naar stylesheets ofzo)
D

DieselPower

Legacy Member
Ik zou zeggen gebruik Modernizer om dergelijke zaken te detecteren maar volgens Sam gaat dat niet werken. Wat mij wat vreemd lijkt want op iPhone en android zou het volgens mij sowieso moeten werken.

Check anders eens de link die dJeez gaf, daarmee kunt ge er een app van maken. :)
a

adrianhates

Legacy Member
DieselPower zei:
Ik zou zeggen gebruik Modernizer om dergelijke zaken te detecteren maar volgens Sam gaat dat niet werken. Wat mij wat vreemd lijkt want op iPhone en android zou het volgens mij sowieso moeten werken.

Check anders eens de link die dJeez gaf, daarmee kunt ge er een app van maken. :)
Klik om te vergroten...

Safari - Firefox - Opera mobile hebben naar mijn weten wel CSS3..

Ik zeg niet dat Modernizr niet werkt op Mobile? :p
Modernizr zou ik eerder gebruiken om browser functionaliteit zoals localstorage te targetten..

Voor CSS3: Wat gade doen als uw javascript wegvalt? Dan doe modernizr ook gene kloot :)
Maar ge hebt wel een punt: ik heb het anders wel nog nooit gebruikt om CSS3 te targetten.

Zoals gezegd , laat de javascript achterwege tot uw design ( iet of wa ) in orde is in alle browsers. Ik heb zelf al ondervonden dat dat al een serieuze merd is.
D

DieselPower

Legacy Member
Ik moet eerlijkheidshalve toegeven da'k een 8 jaar oude gsm heb, zelfs zonder camera :p
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan