Poděkoval bych za pochvalu, ale je to tu na Lupě takové nějaké anonymní. Můj blog sleduj, to je jistota! :-)
V rámci komentáře asi dostatečně neodpovím.
K otázkám – rozeznat smartphone vs. desktop/tablet jde technicky docela dobře pomocí user-agent stringu. Výjimečně se může hodit.
Rozeznávání dotykáče/myši – to bych nedělal. Technicky to lze (např. Modernizr), ale chceš dělat dvojí rozhraní jedné aplikaci na tak elementární úrovni jako jsou konkrétní aktivní plochy? Hrrrrozně moc práce. Vymyslel bych jednotně.
Nejlepší je dělat weby co nejjednodušší, tak jako se dělaly někdy v roce 1997. Pak je to automaticky optimalizované na jakékoli rozlišení, nerozsype se to nikde a nevadí, pokud si člověk v browseru nastaví zvětšení písma při současném nezvětšení ničeho jiného. Nevytěžuje to procesor javascriptem, je všechno dostupné ve všech verzích atd., žádné vopruzy s mobilní verzí. Pokud takhle celý web napsat nejde, protože tam je třeba prohlížeč šachové partie nebo video nebo prezentace výsledků mistrovství světa v javascriptu, css, flashi a HTML5, tak je dobré tím primitním stylem napsat celý zbytek toho webu. Navíc je pak ten web i hezčí. Myslím to vážně, nedělám si srandu.
Proto hostuju svoje webowky na webnode.
Mobilní verzi stranek automaticky vygenerují automaticky i jejich šablony jsou optimalizované pro malé dotykové displeje.
Z hlediska navstevnika vypadají obe verze velmi podobne, prepinani mají udelane trivialne podle DPI zobrazovače.Pod 800 na sirku se automaticky nahraje mobilní web.Da se to v kódu stranky samozrejme prenastavit
Původně ale byla řeč o rozměrech zadaných relativně oproti rodičovskému prvku. Takže šířka DIVu by byla zadaná ne vůči „prohlížeči“, ale např. vůči stránce. Velikost stránky se může změnit spolu se zvětšením. DIV by tedy sice měl pořád 50 %, ale měnil by se základ, z čeho se těch 50 % počítá.
Pokud byste měl velikost DIVu zadanou opravdu relativně vůči záběru (viewport, vy jste napsal nepřesně prohlížeč), tedy jednotky vw nebo vh, pak by měl obrázek opravdu zůstat stejně velký bez ohledu na zvětšení stránky.
Tak jo, našel jsem problém. Jakmile člověk jedinkrát klikne na "Přepnout na plnou verzi", pak už do konce života dostává plnou verzi webu. Přepnutí na mobilní verzi webu nepomůže, nezmění to výchozí režim stránky. Ozkoušeno na Firefoxu (jednoduše se to dá vyzkoušet pomocí anonymního režimu) i na Chrome. Jednoduše tu cookie nastavujete jen jedním směrem, ale druhým směrem už ne.
Jelikož v mobilním Firefoxu se nedají vymazat cookies konkrétní stránky, ale jen všechny globálně, tak se mi to teď moc nechce "opravovat". Ale pokud ten bug neopravíte na vaší straně, tak asi budu muset :) A pak už nikdy neklikat na "přepnout na plnou verzi".
http://lab.xhtml-css.cz/zoom/zoom.jpg Stačí to? Připadá vám že ten obrázek má vždy 400px? Mluvím o tom co bylo kdysi, kdy změna velikosti v prohlížeči ovlivňovala jen text. Dnes to funguje tak že se mění velikost celé stránky. Takže ano měli by zůstat poměry (těch vašich 50%) ale jak můžete vidět ten obrázek se zvětšuje/zmenšuje a nemá vždy 400px.
Je možné nějak spolehlivě rozeznat mobilní zařízení, nebo to děláte pouze podle rozlišení displeje, případně User Agent? Moto G má rozlišení 720 x 1280, možná to proto považujete za přístup z desktopu?
Povedlo se mi na mobilu kliknout dole na "Přepnout na mobilní verzi", přeplo to správně, ale po příštím spuštění Firefoxu jsem opět na desktopové verzi, takže si to bohužel nepamatuje. Nemám žádný anonymní režim ani paranoidní promazávání cookies, takže u mě by to snad být nemělo. Jak říkám, váš příbuzný root.cz funguje správně (vaše mobilní vzhledy mi přijdou podobné, takže předpokládám, že je sdílíte). Někde tam musí být rozdíl.
Teď jsem zkusil ještě Chrome, a stejný problém, taky si nepamatuje přepnutí na mobilní verzi. Poprvé mi to teda najelo jako mobilní, ale jakmile jsem přepnul na plnou verzi, a pak jsem chtěl zpět na mobilní, tak teď už po každém startu dostanu plnou verzi.
V každém případě díky za každou snahu o vyřešení problému, na lupu chodím často.
Proc se vyjadřujete k nečemu, o čem nemáte ani páru? Pokud mate ve strance prvek DIV, ktery je siroky dejme tomu 50% šířky prohlížeče a v nem mate obrazek s nastavenym width: 100%;, pak tento obrazek bude vždy široký 50 % a nějaký zoom v prohlížeži s ním absolutně nic neuděla. Nezvětší, nezmenší...
Hezky jsi to shrnul, v dnešní době je definitivně potřeba s mobilními zařízení při návrhu UX počítat.
Na druhou stranu, objevují se i weby které zase úplně zapomínají, že ještě existuje desktop, ani tento extrém není vhodný....
Možná by stálo za to do budoucna podrobněji rozebrat, jak vlastně takové mobilní zařízení a desktop rozeznat....
Někde to řeší podle šířky okna, což mi nepřijde dobré, když si chci jen zúžit okno na desktopu abych viděl třeba jen sloupec s textem.
Někde to řeší podle prohlížeče, což ale také není 100%.
Dá se třeba nějak rozumně na úrovni HTML/JS rozeznat, jestli uživatel používá dotykový display nebo myš? I když to by taky mohlo být zavádějící u dnešních 2 v 1 noťasů...
Každopádně dík za článek, tvůj blog asi začnu sledovat ;)
Ovšem i low-end telefony v mnoha případech mají wi-fi. A pak vám tahle cílovka najednou začně brouzdat po netu někde během cesty vlakem nebo autobusem.
Neřešme aplikace, ty tahle skupina nejspíš skutečně kupovat nebude, ale vstoupit do e-shopu a objednat na dobírku zboží v akční slevě nepochybně dokáže.
"Teď ta otázka, chtějí uživatelé responsivní/mobilní podobu nebo si dokáží poradit pomocí prohlížeče?"
Prohlížeč jim moc nepomůže, musí autor webu. Viz aktuální čísla z Megapixelu: http://www.slideshare.net/peckadesign/jak-se-megapixelu-vyplatil-responzivn-design
"Udělat plně responsivní stránky které by se zavděčili všem je skoro nemožné + řešit věci jako obrázky (retina) je dobrej bolehlav."
Vše se dá řešit, dneska už docela elegantně. Jen se k výrobě webů musí přizpůsobovat dost jinak. Responzivní = revoluční.
"Taky se tu řeší datová náročnost, která může být s responsivním přístupem paradoxně vyšší"
Špatně udělaný web se bude načítat pomalu. Špatně udělaný responzivní web se bude načítat také pomalu. Dobře udělaný…
"Nejhorší je že budoucnost je nejistá, standardy se mění a nemáme představu jaká zařízení příjdou (prohlížeč v TV, autě, ledničce..)."
Ano, máte pravdu. To, že se mění prostředí a měnit ještě hodně bude, je prostě osud webařů. Člověk prostě musí akceptovat podmínky nebo jít jinam.
Pod 1200px zobrazovacího rozlišení mají prakticky všechny tablety nebo smartphony.
Dobré vědět, že HW pixely jsou v tomhle dost špatný údaj: http://www.vzhurudolu.cz/prirucka/css-pixel
Pisete ze je 12% uzivatelu z mobilnich zarizeni. Proc se vse podrizuje minorite nechapu. Az to bude naopak, budiz.
Právě, že na to až nechce nikdo čekat. Až bude podíl dva nebo třikrát tak vysoký, budou weby jež začaly dříve daleko lépe připravené. Těm ostatním naopak vlak ujíždí.
Viz třeba trendy z USA: http://gs.statcounter.com/#all-comparison-US-yearly-2008-2014
nemoznost tahem dvouma prstama od sebe zvetsit si ji
To je samozřejmě chyba webdesignérů, bohužel relativně častá.
Jde o to, kolik % z tech 12% ma jeste rozliseni mensi jak cca 1200. Deti s lowendama stejne nepristupuji nikam jinam nez na fejs a max idos. Kdyz dostanou nahodou neco za ukol tak resp. ci rozl. neresej. Duchodci listujou akorat ve slevach. Zpravy a napr tech. info v praci, na mobilu cist nebudu.
Bomba je koukat na ,,mobilni" video 100x30 px to uz jsem taky nekde videl.
Tohle je fakt palčivé téma. Ono v dnešní době ty mobilní prohlížeče velmi kvalitně pracují s plnohodnotným obsahem (pokud neberem nějaký flash nebo silně přejavascriptované RIA). Vzpomínám si jak se před pár lety muselo řešit přetejkání obsahu pokud si uživatel změnil v prohlížeči velikost písma (zoom). Dneska už to všechny prohlížeče řeší tak že mění velikost všeho a zvětšují/zmenšují celou stránku. Teď ta otázka, chtějí uživatelé responsivní/mobilní podobu nebo si dokáží poradit pomocí prohlížeče? Udělat plně responsivní stránky které by se zavděčili všem je skoro nemožné + řešit věci jako obrázky (retina) je dobrej bolehlav. A tyhle úpravy nejsou zadarmo, a je tu otázka od zadavatele jestli se mu to vyplatí. Taky se tu řeší datová náročnost, která může být s responsivním přístupem paradoxně vyšší. Jsem z toho všeho rozčarován a to v tom dělám. Nejhorší je že budoucnost je nejistá, standardy se mění a nemáme představu jaká zařízení příjdou (prohlížeč v TV, autě, ledničce..).
Nemůžete to posuzovat podle svého vybavení, stále se ještě prodávají levné mobily s minimálním rozlišením. Ano, vy byste si mobil s rozlišením 320x480 px nekoupil, já bych si ho taky nekoupil, ale když se podíváte do obchodů, tak tam podobných přístrojů za minimální ceny najdete dost. "Mámo, v hypermarketu mají v akci mobil za 1500, koupíme si každej jeden a budeme mít smartfouny." Výsledkem je, že se skupina uživatelů mobilů s mizerným rozlišením příliš nezmenšuje - sice z ní odcházejí ti, kdo upgradují na lepší modely, ale průběžně ji doplňují ti, co si koupí mobil sice mizerný, ale zato za pár korun.
A s touto cílovkou, která si web v desktopové verzi nezobrazí, bohužel taky musíte počítat, i když si o ní můžete myslet svoje.
Odkaz "Přepnout na mobilní verzi" je bohužel skrytý za reklamou na českou spořitelnu (proužek přes celou šířku stránky, vždy na spodní hraně), které má naprosto titěrné tlačítko zavřít, na které se na 7" tabletu vážně nestrefím. Editovat adresu teda můžu, akorát vždycky přicházím z RSS čtečky, takže je dost nepříjemné dělat to pro každý článek.
Na mobilu by to ale mohlo detekovat a přepnout automaticky, aspoň to by bylo fajn.
Když už tu máme tento článek, tak by mě zajímalo, proč Lupa zrušila svůj mobilní vzhled. Ještě před nějakým měsícem dvěma to fungovalo. Pak najednou přestalo. Ani na Moto G ani na Nexus 7 nevidím mobilní vzhled, ale plný desktopový vzhled. Přitom na spřáteleném root.cz mi to funguje (pouze teda na Moto G, ale na tabletu se už ten plný vzhled dá, i když to není ideální).
Přesně tak. I na mobilu v drtivé většině případů vyžaduji desktopové zobrazení. Zaprvé jsem na rozložení stránky zvyklej z PC (a nejsem línej stránku zvětšit a zmenšit) a za druhé mnoho stránek do mobilní verze nezahrnuje všechny možnosti desktopového zobrazení (např. videa,rozšířené filtrování dle parametrů apod...) jenom proto, protože si někdo myslel, že je to pro mobil/tablet zbytečné...
Další věc, o které psal pán nademnou, je ta "zobrazit klasicky". To je tak složité udělat cookies nebo tak, aby si to stránka pamatovala i příště? Teď už to myslím funguje, ale ještě nedávno jsem si musel na mobilu seznam.cz ukládat s proměnnou seznam.cz/NoResponsive nebo tak nějak... A to kolikrát nepomáhá ani nastavení v prohlížečí, že se má vydávat za desktopovej prohlížeč.
Responzivita je pro me spanelska vesnice a jako uzivatel (ctenar) pristupujici z tabletu i desktopu si myslim ze to nepochopim nikdy. Chapu ze asi neni jednoduche najit vhodne reseni pro vsechny ale nechapu jednu tak trivialni vec, proc ty stranky kdyz uz jsou pro obe verze, tak me smeruji na mobilni verzi ackoliv o to nestojim a jak debil musim hledat tlacitko, ,,zobrazit klasicky" Dalsi vec ktera me dovede k nepricetnosti u nekterych mobilnich verzi je nemoznost tahem dvouma prstama od sebe zvetsit si ji. Pisete ze je 12% uzivatelu z mobilnich zarizeni. Proc se vse podrizuje minorite nechapu. Az to bude naopak, budiz. Na mobilnim zarizeni lze casto puvodni desktove prizpusobeni stranek, konzumovat daleko lepe nez casto na zprznene mobilni verzi.