Přednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu.
✎ http://www.vzhurudolu.cz/prirucka/mobile-first
http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
State of the art responzivních technikálií (Devel.cz)Martin Michálek
— Responzivní webdesign jak jej definoval Marcotte je přežitý
— První problém je v rychlosti načítání: naštěstí tu máme Picturefill, lazy loading, compressive images a back-end
— Dalším problémem je pracovní postupy: Mobile Up namísto Desktop Down, hodně breakpointů, hodně verzí kódu a kód orientovaný na stránky namísto UI komponent
— Třetí problém: uživateli dáváme daleko víc než potřebuje: téma je AjaxInclude a podmíněné načítání assetů pomocí Modernizru
Procházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
State of the art responzivních technikálií (Devel.cz)Martin Michálek
— Responzivní webdesign jak jej definoval Marcotte je přežitý
— První problém je v rychlosti načítání: naštěstí tu máme Picturefill, lazy loading, compressive images a back-end
— Dalším problémem je pracovní postupy: Mobile Up namísto Desktop Down, hodně breakpointů, hodně verzí kódu a kód orientovaný na stránky namísto UI komponent
— Třetí problém: uživateli dáváme daleko víc než potřebuje: téma je AjaxInclude a podmíněné načítání assetů pomocí Modernizru
Procházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
http://www.vzhurudolu.cz
3 kroky za klasickým responzivním webdesignem:
— Různé verze médií
— Rychlost načítání
— Efektivita práce: mikrobreakpointy a mobile up
Myslíte, že není ještě potřeba mít mobilní web? Statistiky vás vyvedou z omylu.
Specifika mobilních zařízení – mobilní musí znamenat rychlý.
Přístupy k mobilnímu designu a rozdíly oproti návrhu klasického webu.
Prioritizace informací.
Prvky (ne)žádoucí pro mobilní rozhraní – mobilní neznamená informačně osekaný.
Jak na dotyková rozhraní a jejich specifikace.
Technology as a Cultural Practice - UX AustraliaRachel Hinman
How do you design a mobile money service for people in rural Uganda who’ve never had a bank account? How do you test the usability of a mobile phone’s address book for users in rural India who’ve never had an address… yet alone an analog address book?
As cheap PCs and inexpensive mobile phones flood the global market, usability and user experience professionals will encounter more and more questions like these – questions that challenge not only our research tools and methodologies, but our fundamental assumptions about how people engage with technology. In this talk, Rachel will share insights she’s gained through creating experiences that must scale across vastly different cultures. She’ll share her thoughts on the challenges and opportunities designing for global markets will present to the user experience industry in the years to come.
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
ČT má nový designový tým, který postupně redesignuje weby a aplikace. "Děláme UX". Máchat kolem sebe buzzwordy umí každý. Já vám zcela bez buzzwordů ukážu, jaké metody používáme a jak z minima vytěžit maximum.
http://www.vzhurudolu.cz
3 kroky za klasickým responzivním webdesignem:
— Různé verze médií
— Rychlost načítání
— Efektivita práce: mikrobreakpointy a mobile up
Myslíte, že není ještě potřeba mít mobilní web? Statistiky vás vyvedou z omylu.
Specifika mobilních zařízení – mobilní musí znamenat rychlý.
Přístupy k mobilnímu designu a rozdíly oproti návrhu klasického webu.
Prioritizace informací.
Prvky (ne)žádoucí pro mobilní rozhraní – mobilní neznamená informačně osekaný.
Jak na dotyková rozhraní a jejich specifikace.
Technology as a Cultural Practice - UX AustraliaRachel Hinman
How do you design a mobile money service for people in rural Uganda who’ve never had a bank account? How do you test the usability of a mobile phone’s address book for users in rural India who’ve never had an address… yet alone an analog address book?
As cheap PCs and inexpensive mobile phones flood the global market, usability and user experience professionals will encounter more and more questions like these – questions that challenge not only our research tools and methodologies, but our fundamental assumptions about how people engage with technology. In this talk, Rachel will share insights she’s gained through creating experiences that must scale across vastly different cultures. She’ll share her thoughts on the challenges and opportunities designing for global markets will present to the user experience industry in the years to come.
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
ČT má nový designový tým, který postupně redesignuje weby a aplikace. "Děláme UX". Máchat kolem sebe buzzwordy umí každý. Já vám zcela bez buzzwordů ukážu, jaké metody používáme a jak z minima vytěžit maximum.
Mobile user experience is a new frontier. Untethered from a keyboard and mouse, this rich design space is lush with opportunity to invent new and more human ways for people to interact with information. Invention requires casting off many anchors and conventions inherited from the last 50 years of computer science and traditional design and jumping head first into a new and unfamiliar design space.
In this talk, Rachel will provide:
Insight into how designers and UX professionals can navigate the unfamiliar and fast-changing mobile landscape with grace and solid thinking.
In-depth information on advanced mobile design topics UX professionals will spend the next 10+ years pioneering
Tools and frameworks necessary to begin tackling mobile UX problems in this rapidly changing design space.
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
Proč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
V poslední době se prodává více smartphonů než počítačů, ale většina webů není na tento trend připravena a jsou téměř nepoužitelné z mobilních zařízení.
Na přednášce si popovídáme o důvodech k použití responsivního web designu (RWD), projdeme si základy tvorby RWD a jeho klady a zápory. K přednášce nejsou nutné pokročilé znalosti, stačí základní znalosti HTML+CSS.
Slajdy k mé prezentaci Přístupné weby knihoven, kterou jsem přednesl na Knihovnickém workshopu ve Svitavách v pondělí 14. května 2012.
Cílem prezentace bylo seznámit účastníky s výhodami přístupného webu, testováním přístupnosti v soutěži Biblioweb a asistivními technologiemi pro uživatele se zrakovým handicapem.
Testování přístupnosti v soutěží Zlatý erb 2015Radek Pavlíček
Prezentace hodnocení přístupnosti v soutěži Zlatý erb 2015 na Setkání vítězů soutěží Zlatý erb CZ a Zlatý erb SK.
ISSS 2015, kongresové centrum Aldis, 13. a 14. dubna 2015.
Mobile apps need interactions driven by user, not by timeline. Think iPhone scrolling vs. press the button, wait for the page flipping animation to play.
Mobilegeddon - Armageddon pro nemobilní weby nebo zbytečné obavy?Pavel Ungr
21. dubna 2015 Google vypustil aktualizaci zaměřenou na posílení mobilních webů v mobilním hledání. Co to pro vaše weby znamená? Kdo ztratil a kdo posílil? Jaká jsou čísla pro Českou republiku a jaká v zahraničí? Je se čeho bát?
SEO a UX: Rivalové, nebo parťáci? Rozsekneme to! | SEORestart | 16. 6. 2017Jan Kvasnička
Při tvorbě nebo optimalizaci webu spolu tyto dvě role velice často soupeří. Kdo má pravdu? A kdy? Jsou to opravdu rivalové, nebo parťáci? V praktických příkladech se podíváme na nejproblémovější místa a ukážeme si, jak je pro UXáka nutný přesah do SEO a naopak.
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek
V přednášce se podíváme na zajímavé novinky, které vám usnadní dělat rychlejší weby. Je zde spousta nových technologií, které můžeme v prohlížečích používat už nyní, ale mezi vývojáři nemají takovou popularitu. A to nemluvíme o nových nástrojích pro ladění rychlosti, které jsou po ruce a šetří nám čas.
CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
My slides from WebExpo 2022 keynote for Frontendisti.cz stage.
The world is changing, the frontend is changing, and we have to change with it. What makes 2022 special? Take a look at it through the eyes of a representative of the Frontendisti.cz community.
https://www.webexpo.net/prague2022/talk/frontend-keynote
„To my ne, to oni!“ – komponenty třetích stran a rychlost webuMartin Michálek
Third-parties nám zpomalují weby. To víme. Ale skutečně jsme jako vývojáři proti nim tak bezbranní, jak si občas myslíme? V přednášce si ukážeme jak identifikovat problematické komponenty třetích stran a jak minimalizovat jejich dopady na rychlost webu.
V posledním roce jsem spolupracoval na optimalizaci zhruba dvacítky webů, většinou e-shopů. Před přednáškou jsem se zamyslel, které technické úpravy obvykle pomohou rychlost nějak popostrčit k lepšímu. Vznikl tak seznam o 17 bodech. V Ostravě si je všechny jeden po druhém projdeme.
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Martin Michálek
Přednáška z Czech Online Summit 2019. Praktická rychlost webu pro eshopaře, marketéry a UXáky. Jak ji měřit a jak raději ne. Co můžete vylepšit sami a jak? Jak zaúkolovat vývojáře a ohlídat alespoň základní věci bez znalostí technických detailů?
Lidé se často zaměřují na chybné ukazatele. Na co se dívat a na co naopak ne? Co o reálné rychlosti načítání říkají Google Analytics, co datová velikost stránky a co nástroj Lighthouse?
Přednáška a workshop pro "SEO jako Brno".
jaký je význam rychlosti webu
na které metriky se dívat a jak je chápat
jaké nástroje pro posuzování rychlosti webů používat
jaké jsou základní technické (obsahové) prostředky ke zvýšení rychlosti webů
jaké jsou pokročilejší možnosti pro zrychlení
Projdeme si agrumenty, proč je důležité lpět na rychlosti načítání webu. Ukážeme si několik častých chyb a jak je možné webařské týmy kontrolovat. No a samozřejmě – jakou roli v tom celém hraje nová technologie AMP od Google. Máte ji nasadit?
Vývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
Přednáška pro SEOloger naživo.
Google svou technologii AMP letos přímo amplifikuje, silně ji tlačí do světa. AMP Stories se jako konkurence Instagram Stories možná daly očekávat. Posilování pozice AMPu v e-commerce taky. Málokdo ale čekal, že tahle technologie poslouží jako podklad pro revoluci v tvorbě e-mailů. Jaké novinky Google v oblasti AMP tlačí a jak budou užitečné pro různé typy vašich klientů?
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryMartin Michálek
Přístupnost nemusí bolet. Podíváme se na časté chyby, které kodéři a designéři sekají jako slepý Baťa cvičky. Pak si ukážeme pár jednoduchých tipů, jak bez velké námahy pomoci nevidomým uživatelům vašich webů. A hlavně se podíváme na několik správně nakódovaných návrhových vzorů. Víte jak navrhout například přístupný našeptávač?
Martin Michálek je frontend designér na volné noze s takřka dvacetiletou praxí. Píše blog Vzhůru dolů, spoluzaložil a vede spolek Frontendisti.cz. Hlavně ale pomáhá s návrhem a implementací webových uživatelských rozhraní. V poslední době pracuje pro klienty jako jsou VašeČočky.cz, Svobodná Evropa nebo Česká televize.
Aktuální stav českého trhu co se mobilních prohlížečů týká. Pseudobrowser. Podpora HTML5. Čas strávený v prohlížečích klesá, ale třeba Facebook app je taky browser.
4. 0 %
5 %
10 %
15 %
20 %
6/2012 6/2013 6/2014 6/2015 6/2016*
Podíl mobilních prohlížečů na celkovém
počtu zobrazení stránek
Zdroj: velké české weby měřené Gemius SA, gemiusTraffic, Rankings.cz.
www.vzhurudolu.cz
Podíly mobilních prohlížečů rostou. Důležitější než současný stav je ale trend. V mnoha
vyspělých zemích je podíl mobilních zařízení na webu nadpoloviční.
6. Native × web
V kontextu Mobile First je jedno zda mluvíme o aplikaci, responzivním webu nebo jiném
typu média. Neexistuje obecně dobrá volba mezi nativní, hybridní nebo webovou aplikací.
7. „m tečka web“ × responzivní web
Zato dilema mezi zvláštním mobilním a responzivním webem je možné vyřešit snadno.
Z pohledu efektivity vývoje je dlouhodobě udržitelný jen ten responzivní.
8. Adaptivní × responzivní
Je dobré si také uvědomit, že responzivní design je svými prostředky jen menší částí širší
skupiny technik adaptivního designu. Například serverová detekce není responzivní.
10. Luke Wroblewski
Navrhujte nejprve pro mobilní zařízení, protože:
1) Mají větší budoucnost než desktop
2) Díky omezením nás nutí redukovat
3) Rozšiřují naše možnosti
11. Proč s Mobile First nečekat?
1. Významná návštěvnost už dnes.
2. Dlouhodobě výhodná investice.
3. Netriviální adaptace výrobních postupů.
12. Mobile First = Upřednostni mobil?
Ne. Prostě jen mysli na
všechna zařízení. Dělej
„Multidevice Design“.
Mobile First by nemělo být dogma. Ve své době bylo reakcí na neudržitelné „Desktop First”
myšlení. Dnes je samozřejmě nutné návrh dopředu promýšlet pro všechna zařízení.
13. Alza je příkladem „Desktop First“ přístupu. Odvozená mobilní verze má složitější navigaci
a celkový uživatelský prožitek trpí nekonzistencí.
14. „Moje” Lentiamo, navržené Mobile First postupem je na všech zařízeních maximálně
jednoduché a konzistentní.
15. Přežijí Mobile First?
Zamysleme se teď nad dnes běžnými komponentami rozhraní. Třeba tooltipy nebo záložky.
V desktopové éře byly samozřejmostí. Jsou ale tyhle komponenty výhodné i na mobilech?
16. Přežijí Mobile First?
Podobně uvažujme i o dalších – karusely, lightboxy, modální okna. Nebo složité navigace,
komplexní formuláře… Ano, jejich užití v Mobile First světě musíme přehodnotit.
18. Progressive Enhancement – postupné vylepšování
Začneme nejnižším společným jmenovatelem, realizovaným nejjednodušší technologií. Pro
lepší zařízení pak postupně přidáváme UX. To je postupné vylepšování.
19. Progressive Enhancement – postupné vylepšování
// javascript pro staré křápy
if ('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// javascript pro moderní prohlížeče
}
Můžeme tak třeba rozdělit Javascriptový kód na dvě části – pro moderní
a pro zastaralé prohlížeče.
21. Navigace: „Mobile First”
(žádný kód)
@media only screen
and (min-width: 600px) {
.nav {
display: flex;
}
.nav-item {
flex: 1;
}
}
Když píšeme nejprve pro jednodušší zařízení, kód se zjednodušuje.
22. <video loop poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
</video>
Takto se ale video začne na mobilech stahovat, i když tam je k ničemu. Mobily neumí
automatické přehrávání videa. Celý postup zde.
25. Bootstrap mřížka
<div class="col-sm-6 col-md-4 col-lg-3">
…
</div>
Také layoutová mřížka Bootstrapu je Mobile First. Zjednodušuje to psaní HTML kódu.
27. Problém #1: Chybí vhodné nástroje pro návrh
Když už nástroje umožňují návrh pro více zařízení, bez přítomnosti kodéra často vznikne
rozhraní, které nelze realizovat se společným kódem jako plnohodnotně responzivní.
28. Problém #2: Poctivý Mobile First proces je náročnější
Pokud chceme hodně testovat přímo v prohlížečích, je to samozřejmě zdlouhavé a drahé.
Nicméně třeba pro vývoj vlastního produktu je to nedocenitelné.
29. Problém #3: Buzzwordy se stávají ideologiemi
Už při návrhu prostě
myslete na všechna
relevantí zařízení.
Občas se hold najde někdo, kdo filozofii Mobile First vykládá jako „dej přednost mobilům”.
Takhle by to být nemělo. Chtějte kvalitní uživatelský prožitek na všech zařízeních.