Archiv štítku: iOS

CSS rychle a efektivně

Taky pořád čtete, jak optimalizovat CSS tím, že je spojíte do jednoho velkého souboru, který načtete v hlavičce HTML stránky?

No, Google si teď uvědomil, že to není tak úplně nejlepší a snaží se Chrome (a tedy i Operu a Safari) přepsat tak, aby se – světe div se – choval stejně jako Internet Explorer. Vývojáři Microsoftu totiž do IE (ať už záměrně nebo nechtěně) zakomponovali mechanismus, který umožňuje načítat CSS efektivněji po částech.

Pokračování textu CSS rychle a efektivně

Favicon, aneb jedna ikona nestačí

Od roku 1999 umějí prohlížeče, počínaje tehdy vydaným IE5, zobrazovat ikonu webu, tzv. favicon.

Původně šlo o 16x16px obrázek uložený ve speciálním, Microsoftem vytvořeným, formátu obsahujícím BMP obrázek a masku průhlednosti (známý jako *.ICO). Od té doby se ale hodně změnilo a s malou ikonou si již nevystačíte.
Pokračování textu Favicon, aneb jedna ikona nestačí

Jak na průhlednost obrázků?

Pokud potřebujete na stránce udělat nějaký obrázek průhledný (ikonu, vodoznak, apod.) asi vás napadne použít GIF nebo PNG, které jsou nejčastěji používanými formáty pro průhledné obrázky.

Bohužel ale GIF podporuje jen 256 barev a PNG je zase bezztrátové, takže generuje hodně velké obrázky.

Existuje ale celá řada alternativ, pomocí kterých můžete ušetřit čas a traffic uživatelů při stahování stránky.

Pokračování textu Jak na průhlednost obrázků?

Proč má stránka žere baterie?

V dnešní době je responzivní web důležitou součástí každé firemní stránky. A dá se předpokládat, že takový responzivní web bude hlavně zobrazován na mobilních zařízeních jako jsou chytré telefony a tablety, které mají dost omezenou kapacitu baterie a při vydatném používání vydrží jen pár hodin.

A jistě žádného návštěvníka nepřesvědčí o kvalitách Vašich stránek nebo nabízených produktů to, že při jejich procházení se výdrž jeho baterie sníží na polovinu. Častým příznakem problémů je pomalé nebo trhané skrolování na slabších (starších) strojích a zařízeních.

Jak tedy zabránit tomu, aby Vaše stránky doslova sežrali uživatelům baterie jejich zařízení?

Pokračování textu Proč má stránka žere baterie?

HTML5 editor nefunguje na iPhone/iPad/Safari?

HTML5 nabízí jeden užitečný atribut, který vám umožňuje napsat si vlastní textový nebo WISIWIG editor jen pomocí HTML a JS. Je jím samozřejmě contenteditable a je podporovaný prakticky na všech moderních (2012+) prohlížečích.

Využívá ho celá řada editorů, např. TinyMCE nebo CKEditor a  různé blogovací weby, CMS a frameworky jako je WordPress.

Tak proč, když je tak rozšířený a všude funguje, nefunguje zrovna na vašem webu na iPhonu – zvlášť když je váš web na iPhone zaměřený?

Pokračování textu HTML5 editor nefunguje na iPhone/iPad/Safari?

Testování localhostu na mobilních zařízeních

Máte na svém vývojářském počítači (s Windows) zprovozněnou testovací verzi webu a potřebujete ji otestovat na (fyzickém) mobilním zařízení? Stačí správně vše nastavit a můžete testovat.

Námět článku převzat z: http://conceptdev.blogspot.cz/2009/01/monitoring-iphone-web-traffic-with.html

Pokračování textu Testování localhostu na mobilních zařízeních

Responzivní načítání obrázků

V moderním a mobilním webu často narážíme na problém s tím, jak velké načítat obrázky.

Sice máme HD (1080p) … a v roce 2014 i QHD (1440p) a od roku 2015 dokonce UHD (4K, což odpovídá 2160p, ale už se tak neuvádí) … displeje, které zvládnou zobrazit opravdu kvalitní obrázky, ale na druhou stranu jsou tyto displeje často malé (4″ – 5″ mobilní telefony) nebo se jsou sledovány z velké vzdálenosti (~50″ UHD/4K televize sledované z několika metrů), takže zobrazit v HD/4K např. graf nebo mindmapu může skončit nečitelnou pavučinou. Navíc velmi často se stává, že se s HD telefonem připojujete přes 3G nebo dokonce GPRS/EDGE a pak takové načtení HD obrázku trvá věčnost.

HTML5 specifikace na to myslí a přináší hned dvě tři možnosti, jak to vyřešit. A samozřejmě existují ještě 2 CSS3 možnosti. Pokračování textu Responzivní načítání obrázků

Rychlý test mobilů bez mobilu

Znáte to, potřebovali byste rychle zkouknout, jestli se vám stránka po malé změně nebo opravě úplně nerozbila na telefonech s malými displeji, ale zrovna nemáte žádný po ruce a nechce se vám čekat deset minut na start emulátor a tak se na to raději vykašlete a budete doufat, že to bude v pořádku… a ono dost často není.

Odpovídač

K těmto účelům slouží služba Responsinator. Po zadání URL do políčka se vám tato stránka načte v iframech, které simulují různá rozlišení na mobilních telefonech. Pokračování textu Rychlý test mobilů bez mobilu

Debugování webu na iPadu a iPhonu (na MacOS)

Pokud chcete debugovat své stránky na iPadu či iPhonu a máte k dispozici zmíněný iPad nebo iPhone a ještě k tomu libovolný počítač Mac (iMac, MacBook apod.), můžete si zprovoznit debugger v Safari.

Nejprve budete potřebovat iPad nebo iPhone updatovaný na iOS verze 6 (nebo ještě lépe 7). Pak také updatujte MacOS na poslední verzi včetně Safari (nejlépe Maverics).

Propojte iPad/iPhone a Mac pomocí USB kabelu a počkejte, až se zařízení navzájem propojí. Pokračování textu Debugování webu na iPadu a iPhonu (na MacOS)