Mobile development, media queries of aparte site?

[Beatboxx]

Ik ben nu bezig met het ontwerpen van een website voor een klant, die graag ook mobiele support wilt hebben. De volledige website is zo'n 900KB inclusief plaatjes e.d. De klant stelt als eis dat de site goed werkt op smartphones. Ik heb denk ik nu twee opties; ofwel mbv media queries de site zich automagisch laten aanpassen aan het device, ofwel bijvoorbeeld android en iOS redirecten naar een andere site.
Voordeel van de laatste is dat bijvoorbeeld plaatjes niet op full-size moeten worden geladen, maar nadeel is dat als iemand een link sharet, die link naar de mobiele website wijst.

Mijn vraag dus, wat doen jullie/zouden jullie doen; gebruiken jullie media-queries om je site van 1900*1200 tot iPhone resolutie zichzelf aan te laten passen, of maken jullie een aparte mobiele website met in het achterhoofd gehouden dat dat veel sneller laadt op onze brakke 3G netwerken?

[Barryvdh]

Vorige maand ook al een discussie over; Mobiele site: redirect vs alternative view
Hangt er dus vanaf wat je wil bereiken met je site en wat voor content je hebt, maar over het algemeen prefereer ik mediaqueries. Eventueel kan je ook met javascript/css kleinere plaatjes laden (of grafische elementen weglaten)

[Bosmonster]

Vergeet ook niet dat afbeeldingen die je niet toont, ook niet geladen worden. Je hebt met Media queries dus best wel wat controle over de load ook.

Zelf ben ik geen voorstander van Responsive design overigens, maar dat komt omdat het in de praktijk meestal neerkomt op het serieus downgraden van je site voor mobiel (lees: veel weglaten en alles onder elkaar knikkeren), zonder de mogelijkheid de desktop-versie nog te bekijken, terwijl je telefoon daar 100% geschikt voor is.

Het is in mijn ogen raar dat smartphones steeds geavanceerder worden, terwijl wij de sites steeds beperkter gaan maken onder de noemer "optimalisatie voor mobiel". Apple denkt daar klaarblijkelijk hetzelfde over als je hun site bekijkt op mobiel (en terecht, zij stoppen bijvoorbeeld ook heel veel moeite in een goede telefoon en browser).

Wat dat betreft is er dus ook altijd nog de Apple.com-optie: Gewoon de normale site tonen op mobiel en gebruik maken van de mogelijkheden die moderne smartphones bieden, zoals tap-to-zoom en pinch.

[ Voor 18% gewijzigd door Bosmonster op 21-08-2012 11:16 ]

[OkkE]

Bosmonster schreef op dinsdag 21 augustus 2012 @ 11:15:
Vergeet ook niet dat afbeeldingen die je niet toont, ook niet geladen worden. Je hebt met Media queries dus best wel wat controle over de load ook.

Hier een redelijk uitgebreide test over Media Queries en laden van media (images):
http://timkadlec.com/2012...sset-downloading-results/

Zelf ben ik geen voorstander van Responsive design overigens, maar dat komt omdat het in de praktijk meestal neerkomt op het serieus downgraden van je site voor mobiel (lees: veel weglaten en alles onder elkaar knikkeren), zonder de mogelijkheid de desktop-versie nog te bekijken, terwijl je telefoon daar 100% geschikt voor is.

Responsive Design is (imho) ook meer dan "downgraden voor mobiel"; ik vind het de website/app aanpassen aan het device. Wat moet een telefoon (via 3g) met een sfeer-afbeelding van 1200x500? Zelf een product foto kan kleiner. Elementen tonen bij :hover{} is ook niet altijd handig op een touch device, maar een slideshow kunnen bedienen met een swipe-actie is weer wel erg fijn.

---

Ik ben vooral een voorstander van Luke Wroblewski zijn filosofie; Mobile First. Komt er vrij simpel gezegd op neer, op mobile devices heb je beperkingen. Door daar rekening mee te houden, wordt je website ook op "desktop" beter.

[ Voor 17% gewijzigd door OkkE op 21-08-2012 11:47 ]

[Bosmonster]

OkkE schreef op dinsdag 21 augustus 2012 @ 11:46:
[...]

Responsive Design is (imho) ook meer dan "downgraden voor mobiel"; ik vind het de website/app aanpassen aan het device. Wat moet een telefoon (via 3g) met een sfeer-afbeelding van 1200x500? Zelf een product foto kan kleiner. Elementen tonen bij :hover{} is ook niet altijd handig op een touch device, maar een slideshow kunnen bedienen met een swipe-actie is weer wel erg fijn.

Dan vergeet je denk ik dat die 1200x500 in de praktijk op retina maar 600x250 is en dus eigenlijk een redelijk standaard resolutie is

Afbeeldingen voor Mobile zijn in veel gevallen zelfs groter dan voor de desktop (ok, iig tot Retina op desktop meer gemeengoed wordt).

Dat responsive meer is dan downgraden beaam ik, maar je weet zelf denk ik ook dat in de praktijk, bij het ontwerpen voor klein scherm, het meestal hierop neerkomt. Als je echt een compleet andere experience wilt, dan zijn media queries weer niet afdoende en maak je uiteindelijk toch een compleet andere site voor mobiel.

[ Voor 16% gewijzigd door Bosmonster op 21-08-2012 12:00 ]

[OkkE]

Bosmonster schreef op dinsdag 21 augustus 2012 @ 11:56:
Dan vergeet je denk ik dat die 1200x500 in de praktijk op retina maar 600x250 is en dus eigenlijk een redelijk standaard resolutie is

Afbeeldingen voor Mobile zijn in veel gevallen zelfs groter dan voor de desktop (ok, iig tot Retina op desktop meer gemeengoed wordt).

Dat was ik niet vergeten. Maar je hebt wel gelijk dat Retina het resolutie-argument minder belangrijk maakt. Waar het mij om ging, wat misschien niet duidelijk was in mijn vorige post, is dat ik op mijn iPhone met 3g liever geen 1200x500 (±200kb) sfeerfoto wil downloaden, ik wil de producten zien of de informatie lezen.

Dat responsive meer is dan downgraden beaam ik, maar je weet zelf denk ik ook dat in de praktijk, bij het ontwerpen voor klein scherm, het meestal hierop neerkomt. Als je echt een compleet andere experience wilt, dan zijn media queries weer niet afdoende en maak je uiteindelijk toch een compleet andere site voor mobiel.

Klopt. Denk dat we het wat Responsive Design ook met elkaar eens zijn. In praktijk is het vaak, helaas, niet meer dan "alles onder elkaar". Maar als je het goed doet en er tijd in steekt (het liefst ook als eerste, voor je met groot scherm bezig ben), dan kan je met alleen Media Queries al een heel eind komen.

Ik heb het gevoel dat veel mensen dat nog wel eens vergeten. Of je met alleen Media Queries ver genoeg kunt komen, dat hangt dan weer vooral af van je doelgroep, soort website, je goal, etc. natuurlijk. Maar dat is eigenlijk allemaal al wel besproken in het vorige topic, denk ik.

[Bosmonster]

Mobile first zou een mooi startpunt zijn idd, maar is er nogal lastig in te krijgen bij klanten (en intern ook overigens). Daarnaast zit je nog met wat compatibility issues natuurlijk met IE7/8.

De ideale oplossing lijkt er gewoon nog niet echt te zijn momenteel, dus we moeten roeien met de riemen die we hebben

[Beatboxx]

Mn klant wil dat de website zowel op mobiel als desktop gewoon goed werkt, niet een ondergeschikt aan de andere. Natuurlijk moet de inhoud van beiden worden afgestemd op het (verwachte) gebruik en de doelgroep. Voor media queries op IE 5-8 zijn een paar goede scripts te vinden die ervoor zorgen dat media-queries wel werken, dus dat komt wel goed.

[Barryvdh]

Nog geen tijd gehad om het zelf te lezen, maar mogelijk relevant; http://mobile.smashingmag...e-presidential-smackdown/