Tilly Gergely UX designer előadása az App! 2012 konferencián a változatos eszközökre történő reszponzív design tervezésről és fejlesztésről.

1. Responsive design szemlélet
Hogyan legyünk jelen minden eszközön?

2. Tilly Gergely
User experience designer

3. Új kihívások

4. Sok platform létezik

5. Több eszközt használunk
, Ipsos, Sterling Brands

6. Eltérő méretű kijelzők
Forrás: Google Analytics, saját mérés (2012.10.14 – 2012.11.14.)

7. 2048 különböző
képernyő felbontás
#madness

8. Hogyan tudunk
megjelenni ennyi
kijelzőn?

9. Több fegyver közül
választhatunk

10. Desktop site / T-800
Ma még a legtöbb igényt képes kiszolgálni,
jól tervezhető, de sajnos nem elég időtálló…

11. Desktop site / T-800
Monitor kijelző (esetleg desktop és laptop), benne
Swarzi
A legkevesebb, amit tehetünk:
tegyük „érintésbaráttá”!

12. Mobil verzió / T-1
Kézenfekvő megoldásnak tűnik egy
mobilra optimalizált site elkészítése, de…

13. Mobil verzió / T-1 Wall-E
…ha nem csináljuk elég jól, könnyen
nevetségessé is válhatunk.

14. Natív alkalmazás / T-X
A natív alkalmazásokban számtalan lehetőség rejlik,
de nagyon sok az eltérő platform…

15. Natív alkalmazás / T-X
…ezért bár az appok nagyon trendik (és szexik), igen
magasak lehetnek a kivitelezés költségei.

16. Responsive design / T-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
más kivágással, de ugyanaz a kép
A responsive design valahol félúton van a
desktop site és a natív alkalmazás között.

17. Responsive design / T-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
más kivágással, de ugyanaz a kép
Nagyon jól alkalmazkodik a környezetéhez…

18. Responsive design / T-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
más kivágással, de ugyanaz a kép
…elbánik a flexibilis rácsszerkezettel…

19. Responsive design / T-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
más kivágással, de ugyanaz a kép
…és akár csempékben is tud gondolkodni.

20. Melyik megoldást
válasszam a rengeteg
lehetőség közül?

21. “It is not the strongest of the
species that survives, nor the
most intelligent, but the one
most responsive to change.”
— CHARLES DARWIN

22. Responsive design
szemlélet

23. Flexibilis rácsszerkezet

24. Flexibilis képek és videók

25. Media Queries

26. Akkor csak egy kis
CSS/HTML munka, és
már kész is az új design?

27. Inspiráció: Abraham Maslow, Kristofer Layon és Brad Frost

29. Minden tartalom legyen
elérhető minden eszközön!

30. Kezdjük a tartalommal
Forrás: W3C – http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

32. Már tudjuk, hogy mit
szeretnék megjeleníteni,
a kérdés csak az: hogyan?

33. Eszközfüggő elrendezések
Mostly Fluid Column Drop
@lukew
Off Canvas
Layout Shifter

35. Kevesebb frusztráló dolog
van annál, mint amikor nem
tudjuk elérni a célunkat.

36. Navigáció
Forrás: Sony USA – http://www.sony.com

37. Számos megoldás létezik
A. “Do Nothing” Approach
B. The Toggle
C. Select Menu
D. Footer Only
E. Footer Anchor
@brad_frost
F. Left Nav Flyout
G. “Hide and Cry”

39. A felhasználók mobilon is
gyorsan szeretnék elérni a
digitális tartalmakat.

40. Kisebb méretű képek
160Kb 60Kb
1400 x 800 pixel 760 x 440 pixel
100Kb 30Kb
480 x 260 pixel
1000 x 600 pixel

41. „Kikapcsolt” tartalmak
Forrás: Twitter Bootstrap – http://twitter.github.com/bootstrap/scaffolding.html

43. Ha eddig mindent jól
csináltunk, akkor már csak
egy kis odafigyelés kell.

44. Eszköz-specifikus funkciók

45. Akkor most alapjairól
kell újraépítenem
a weblapomat?

46. Építkezzünk lépésenként!
1. Tegyük „érintőképernyő-baráttá” meglévő
desktop oldalunkat

47. Építkezzünk lépésenként!
1. Tegyük „érintőképernyő-baráttá” meglévő
desktop oldalunkat
2. Kezdjünk el responsive design szemlélettel
felépíteni egy mobil verziót

48. Építkezzünk lépésenként!
1. Tegyük „érintőképernyő-baráttá” meglévő
desktop oldalunkat
2. Kezdjünk el responsive design szemlélettel
felépíteni egy mobil verziót
3. Dobjuk ki a desktop oldalról, amiről az
előző lépés során kiderült, hogy felesleges

49. Köszönöm a figyelmet!
gergely.tilly@kirowskiisobar.com
@GergelyTilly
Tilly Gergely