Pojďme dnes našemu desktopovému webu vyrobit mobilní variantu. Nebude to moc těžké. Ale tipněte si — dokážeme vynaložit energii přiměřenou velikosti naší mobilní cílové skupiny? A víte, co je „kodérská mobilní verze”?
Jestli jste někdy řešili nasazování aplikace, asi víte, že všechno odladit může být celkem zdlouhavá záležitost. Dokážete si představit, že na to máte jen týden? Že je to nemožné? Není! Jde to a ani to nemusí být příliš složité.
Reportáž z virtuální konference FOSDEM. Minule jsem popsali Go room, dnes se věnujeme monitoringu a observability.
Mikrofrontendy jsou zajímavá adaptace konceptu microservices pro potřeby frontendového vývoje. Podívejte se, co to v praxi obnáší a proč jsme se v Seznam.cz rozhodli vyvinout náš vlastní microfrontend framework, Merkur.
Blbost – media query
<link rel=“stylesheet“ href=“/css/mobile.css“ media=“screen and (max-width: 767px)“>
<link rel=“stylesheet“ href=“/css/desktop.css“ media=“screen and (min-width: 768px)“>
Pěkná blbost. Je podle vás Galaxy S III (720 * 10280) talbet, že mu chcete posílat layout tabletu? Celkem hodně blbě blbé řešení. Jednak jsou telefony, co mají DPI 120 a taky telefony s DPI 340… PS: Ještě jedna věc. Nevím, jestli ej to chyba mobilní verze WebKitu nebo se to týká jen Androidího WebKit prohlížeče, ale max-width je max(viewport-height, viewport-width)…
Re: Blbost – media query
Je podle vás Galaxy S III (720 * 1280) talbet, že mu chcete posílat layout tabletu?
Nerozumím, podmínkou s dotazem na šířku zařízení by prošel i kdyby neměl poměr CSS pixelů k hardwarovým 1:2. A ten si myslím, že má, ale bohužel jen odvozuji od podobných zařízení Samsungu.
Nevím, jestli ej to chyba mobilní verze WebKitu nebo se to týká jen Androidího WebKit prohlížeče, ale max-width je max(viewport-height, viewport-width)
Nemám ponětí, nepřidal byste nějaký odkaz?
Re: Blbost – media query
No, odkaz nemám. Ale můžete si to vyzkoušet sám. Momentálně vytvářím aplikaci pro Android přes PhoneGap. A pokud přidám css media query device-width i device-height, tak se chovají stejně. (A width je stejné jak device-width.) Vždycky se na tu podmínku aplikuje ten rozměr (šířka nebo výška), který je větší. Toto je podstat toho problému.
Re: Blbost – media query
Tak jsem pohledal a našel jsem to.
http://code.google.com/p/chromium/issues/detail?id=84776
Je to samozřejmě bug. Androidí prohlížeč a Android vůbec jsou strašně zabugovaný, bohužel. Ale tak naštěstí css má % a s těmi se to dá uhrát. :-)
Nejen Explorer do verze 8
Vyjma norského předskokana vesměs všechny prohlížeče starší jak tři roky
@medias pokročilejšími podmínkami nepochopí a uvidí zcela nenastylovanou verzi.Mnohem rozumnější mi přijde mít základní stylopis pro desktop a v mobilním povypínat/vyrušit vše, co má být jinak. Zamezí se tím též špatnému zobrazení u dodatečně přidávaných věcí, u kterých by mohl někdo zapomenout, že je musí nastylovat dvojmo.
Re: Nejen Explorer do verze 8
To je sice pravda, ale na rozdíl od IE se u všech ostatních prohlížečů nedá rozumně pracovat s neaktuální (tedy 3 roky starou verzí). Za určitých podmínek to jde, ale člověk to musí apriori z nějakého důvodu chtít a umět udělat. Tedy BFU to neudělá a automatické aktualizace ho navedou na aktuální verzi. Pro IE to ale bohužel neplatí, protože na Windows XP nic lepšího nejde nainstalovat. Takže zatímco starší verze FF či Chrome není potřeba řešit, IE8 si ještě pár let svou pozici udrží.
Re: Nejen Explorer do verze 8
Až tak moc narůžovo bych si to nelakoval. Firefox před třemi roky agresivní automatické aktualizace neměl a lidí, kteří nepřešli na čtyřku, je docela dost. Podle mých statistik má jen 70 % českých brouzdalů s Geckem Firefox 12 nebo 13. U WebKitů má nejnovější dvě verze 82 % lidí (počítám-li Chrome, Safari a androidí prohlížeč).
„člověk to musí apriori z nějakého důvodu chtít a umět udělat“
Což neznamená, že se na něj vybodnu. Respektuji uživatelovu volbu.
Re: Nejen Explorer do verze 8
Já myslím, že si to trefil na hlavičku. Prostě každý web je trochu jiný – co se týká skladby lidí, kteří na něj chodí, nebo budou chodit. Já mám třeba tahle čísla na projektech jiná – těch lidí s FF či Chrome v poslední nebo předposlední verzi je více než 90% (z těch co ho mají). IE samotné je jen kolem 28% celkové návštěvnosti – a z toho prakticky polovina je pak IE8.
Ale jako už mnohokrát, je hodně přístupů k návrhu SW a žádný není 100% správná a jediná cesta. Weby z toho nejsou žádná výjimka :)
Re: Nejen Explorer do verze 8
Mnohem rozumnější mi přijde mít základní stylopis pro desktop a v mobilním povypínat/vyrušit vše, co má být jinak.
Zkoušel jsem. Kóderské uvažování k tomu svádí, ale jde to jen u velmi specifických příkladů kdy se vzhled jednotlivých elementů na desktopu a na mobilu liší velmi málo nebo vzhled desktopu je velmi jednoduchý.
Například u navigace Snowkidz bych musel v mobilním stylopise poměrně hodně předefinovávat původní desktopový vzhled a myslet na to, že každá úprava desktopové navigace se nějak může promítnout na mobilu.
Jak „mobilní stylopis jako nádstavba desktopového“ tak „extra stylopis pro mobily“ mi v tomhle případě připadají stejně špatné.
„Mobilní stylopis jako nádstavba desktopového“ je pro mě principielně špatná v tom, že jednodušší vytváří ze složitějšího. Proto jsem ji tady nepoužil. Správnější se mi zdá cesta postupného vrstvení od nejhoršího zařízení k nejlepšímu. Tzv. technologické mobile first. Hezký postup včetně ošetření starších MSIE je vidět například tady: http://jakearchibald.github.com/sass-ie/. Ani to ale nikdy nebude univerzální řešení.
Re: Nejen Explorer do verze 8
„Například u navigace Snowkidz bych musel v mobilním stylopise poměrně hodně předefinovávat původní desktopový vzhled“
Skutečně hodně? Mně připadá, že ho jde u té první navigace přebít takhle:
#nav { border-radius: 0; position: static; box-shadow: none; height: auto; line-height: auto; font-size: 100% } #nav .item.home { width: auto; height: auto; padding: 12px 10px; text-indent: 0; background: rgba(65, 145, 209, 0.3) } #nav .item, #nav li { float: none; }+ posílit selektor na barvu aktivního odkazu. Druhé menu jde zkrotit podobně. Šlo by to udělat úsporněji a obecněji, kdybych to nepsal jako improvizovaný přílepek.
„myslet na to, že každá úprava desktopové navigace se nějak může promítnout na mobilu“
Pravděpodobnost, že se zasáhne do stylů menu, je vyšší, než pravděpodobnost, že bude potřeba dostylovat něco v obsahu?
„principielně špatná v tom, že jednodušší vytváří ze složitějšího“
Podle stejného principu bys měl tvořit úplně zvlášť i tiskový stylopis, protože ten bývá také jednodušší. Proč ne „print first“?
„Hezký postup včetně ošetření starších MSIE je vidět například tady“
V důsledku podobný, jako ten zmíněný v článku, ne? Jak ošetřuje jiné starší/neznámé prohlížeče?
Re: Nejen Explorer do verze 8
Snažíš se zpochybnit variantu „extra stylopis pro mobily“ ve prospěch varianty „mobilní stylopis jako nádstavba desktopového“? Pokud tě chápu správně, nezformuloval bys argumenty proč by ti v tomhle případě připadá varianta „mobilní stylopis jako nádstavba desktopového“ lepší? Je to jen kvůli starším/neznámým prohlížečům?
mobilní web
pěkně jsou výhody mobilního webu shrnuté na stránkách http://www.mobilniweb.com