71
Mobile First+ Letni skola KISKu Jan Martinek @endlife

Mobile first (Letní škola KISKu)

Embed Size (px)

Citation preview

Page 1: Mobile first (Letní škola KISKu)

MobileFirst+Letni skola KISKuJan Martinek@endlife

Page 2: Mobile first (Letní škola KISKu)

Velikost displejů se za posledních 20 let fakt změnila.

Page 3: Mobile first (Letní škola KISKu)

K cemu?

Page 4: Mobile first (Letní škola KISKu)

Na začátku 90. let bylypočítače jen na hraní Wolfenstein 3D, protože nebyl internet.

Page 5: Mobile first (Letní škola KISKu)

Na konci už existoval Amazon v poněkud stísněné verzi.

Page 6: Mobile first (Letní škola KISKu)

A dneska, když nez-menšíte okno, rozteče se vám ta webovka nepěkně po displeji.

Page 7: Mobile first (Letní škola KISKu)

A pak si v Applu vymysleli tuhle blbost!

Page 8: Mobile first (Letní škola KISKu)

A tímhle to úplně nenapravili. 768 pixelů na šířku? Srsly?

Page 9: Mobile first (Letní škola KISKu)

A lidi to kupujou.

Page 10: Mobile first (Letní škola KISKu)

A lidi to kupujou.A používají!

Page 11: Mobile first (Letní škola KISKu)
Page 12: Mobile first (Letní škola KISKu)
Page 13: Mobile first (Letní škola KISKu)

Ty obrazovky jsou skutečně jiné.

Page 14: Mobile first (Letní škola KISKu)

A nevejde se tam toho tolik.

Page 15: Mobile first (Letní škola KISKu)

OBRAZOVKA

Page 16: Mobile first (Letní škola KISKu)

!Nedulezite!!!

Ale tohle je nedůležité!

Page 17: Mobile first (Letní škola KISKu)

To leda takpro ajťáky!

Page 18: Mobile first (Letní škola KISKu)

Nebogra(ky.

Page 19: Mobile first (Letní škola KISKu)

Ale ne pro mladé a perspektivní KISKaře.

Page 20: Mobile first (Letní škola KISKu)

Co je dulezite?

Page 21: Mobile first (Letní škola KISKu)

Počítače se změnily.

Page 22: Mobile first (Letní škola KISKu)

Uživatel počítače vypadá docela OK v kanclu.

Page 23: Mobile first (Letní škola KISKu)

Nebo vknihovně.

Page 24: Mobile first (Letní škola KISKu)

V supermarketuuž míň.

Page 25: Mobile first (Letní škola KISKu)

V metruještě míň.

Page 26: Mobile first (Letní škola KISKu)

A v lese užvůbec.

Page 27: Mobile first (Letní škola KISKu)

KONTEXTKontext užívánímobilního webuje důležitý tak,jak to na note-booku nikdymožné nebylo.

Page 28: Mobile first (Letní škola KISKu)
Page 29: Mobile first (Letní škola KISKu)
Page 30: Mobile first (Letní škola KISKu)
Page 31: Mobile first (Letní škola KISKu)

MíSTO

Zároveň je možné,že uživatel rychlemění polohu.

Page 32: Mobile first (Letní škola KISKu)

A dělá při používánívašeho webu všelicos.

Page 33: Mobile first (Letní škola KISKu)

A dělá při používánívašeho webu všelicos.

Přece byste nechtěliohrozit špičkový výkončeského olympionikajen tím, že odbydetedesign vámi dělanéwebovky, na kterou kouká při výkonu.

Page 34: Mobile first (Letní škola KISKu)

Texting Zombies: The Scourge of Text Messaging in Public

Page 35: Mobile first (Letní škola KISKu)

Texting Zombies: The Scourge of Text Messaging in Public

Aplikace příliš vytě-žující pozornost dělají z uživatelů zombie.

Page 36: Mobile first (Letní škola KISKu)

POZORNOST

Page 37: Mobile first (Letní škola KISKu)

TO BY STACILO.

Page 38: Mobile first (Letní škola KISKu)

CO S TIM?

Page 39: Mobile first (Letní škola KISKu)

Bek tu bejziks

<--

Page 40: Mobile first (Letní škola KISKu)

Bek tu bejziks

<--

+

Klíčové je přemýšleto tom, co přede mnou říkal Honza Řezáč – tj. myslet na základní principy webdesignu a důkladně je uplatňovat.

Page 41: Mobile first (Letní škola KISKu)

SOUSTREDIT SE

Page 42: Mobile first (Letní škola KISKu)

SOUSTREDIT SE

Je třeba se soustředitna uživatele webu.

Page 43: Mobile first (Letní škola KISKu)

SOUSTREDIT SE

Prohlédnout si ho ze všech stran.

Page 44: Mobile first (Letní škola KISKu)

Klasický web může vypadat takto.

Page 45: Mobile first (Letní škola KISKu)

Mobilní verze ale musívlézt na maličký displej.

Page 46: Mobile first (Letní škola KISKu)

Ale především musí nabídnout přesně to, co uživatel potřebuje, když mobil vytáhne z kapsy.

Page 47: Mobile first (Letní škola KISKu)
Page 48: Mobile first (Letní škola KISKu)

Na mobilu může spousta věcí, které na desktopu příliš nemění uživatelův zážitek (např. reklamy, nadbytečné boxy apod.), zcela zničit užitnou hodnotu webu.

Page 49: Mobile first (Letní škola KISKu)

Na mobilu může spousta věcí, které na desktopu příliš nemění uživatelův zážitek (např. reklamy, nadbytečné boxy apod.), zcela zničit užitnou hodnotu webu.

Zároveň je možné obohatit zážitek zcela novými prvky.

Page 50: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

Page 51: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

1:1Navíc jsou mobily osobnízáležitost. Nikdo svůj mobil nepustí z ruky.

Page 52: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

1:1Navíc jsou mobily osobnízáležitost. Nikdo svůj mobil nepustí z ruky. GPS

Page 53: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

1:1Navíc jsou mobily osobnízáležitost. Nikdo svůj mobil nepustí z ruky. GPS

Page 54: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

1:1Navíc jsou mobily osobnízáležitost. Nikdo svůj mobil nepustí z ruky. GPS

Mobily mají zcela nové možnosti vstupu, jako je například foťák. Dá se použít například pro překládání nápisů na ulici.

Page 55: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

1:1Navíc jsou mobily osobnízáležitost. Nikdo svůj mobil nepustí z ruky. GPS

Mobily mají zcela nové možnosti vstupu, jako je například foťák. Dá se použít například pro překládání nápisů na ulici.

Page 56: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

1:1Navíc jsou mobily osobnízáležitost. Nikdo svůj mobil nepustí z ruky. GPS

GYRO

Mobily mají zcela nové možnosti vstupu, jako je například foťák. Dá se použít například pro překládání nápisů na ulici.

Page 57: Mobile first (Letní škola KISKu)

MEGACOOLMobil nabízí spoustunových možností, které se dají využít. A lidé si na ně zvykají, takže to začíná být nutné.

1:1Navíc jsou mobily osobnízáležitost. Nikdo svůj mobil nepustí z ruky. GPS

GYRO

Mobily mají zcela nové možnosti vstupu, jako je například foťák. Dá se použít například pro překládání nápisů na ulici.

NFC

Page 58: Mobile first (Letní škola KISKu)

12345

12345

12345

Obsah je rozhrani

Dotekové ovládáníumožňuje vytváření rozhraní, která nevyžadují tlačítka.

Page 59: Mobile first (Letní škola KISKu)

Obsah je rozhrani

1

2345

Uživatelé se mohou dotknout přímo obsahu stránky a manipulovat s ním.

Page 60: Mobile first (Letní škola KISKu)

Obsah je rozhrani

12

345

Page 61: Mobile first (Letní škola KISKu)

Obsah je rozhrani

12

345

Page 62: Mobile first (Letní škola KISKu)

12

345

Na tomto principu funguje mnoho objevujících se aplikací a platforem.

Obsah je rozhrani

Page 63: Mobile first (Letní škola KISKu)

12

345

Na tomto principu funguje mnoho objevujících se aplikací a platforem.

Obsah je rozhrani

Page 64: Mobile first (Letní škola KISKu)

12

345

Na tomto principu funguje mnoho objevujících se aplikací a platforem.

Obsah je rozhrani

Page 65: Mobile first (Letní škola KISKu)

12

345

Na tomto principu funguje mnoho objevujících se aplikací a platforem.

Obsah je rozhrani

Page 66: Mobile first (Letní škola KISKu)

TOZ CO?

Page 67: Mobile first (Letní škola KISKu)

Ja a Luke Wroblewski rikame:

Page 68: Mobile first (Letní škola KISKu)

Ja a Luke Wroblewski rikame:

# Rust = prilezitost

Page 69: Mobile first (Letní škola KISKu)

Ja a Luke Wroblewski rikame:

# Rust = prilezitost

# Omezeni -> soustredeni

Page 70: Mobile first (Letní škola KISKu)

Ja a Luke Wroblewski rikame:

# Rust = prilezitost

# Omezeni -> soustredeni

# Moznosti -> inovace

Page 71: Mobile first (Letní škola KISKu)

MobileFirst+Letni skola KISKuJan Martinek@endlife