O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Responsive design szemlélet @ App!2012 konferencia

436 visualizações

Publicada em

Publicada em: Design
  • Seja o primeiro a comentar

Responsive design szemlélet @ App!2012 konferencia

  1. 1. Responsive design szemléletHogyan legyünk jelen minden eszközön?
  2. 2. Tilly GergelyUser experience designer
  3. 3. Új kihívások
  4. 4. Sok platform létezik
  5. 5. Több eszközt használunk , Ipsos, Sterling Brands
  6. 6. Eltérő méretű kijelzők Forrás: Google Analytics, saját mérés (2012.10.14 – 2012.11.14.)
  7. 7. 2048 különbözőképernyő felbontás #madness
  8. 8. Hogyan tudunkmegjelenni ennyi kijelzőn?
  9. 9. Több fegyver közülválaszthatunk
  10. 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. 11. Desktop site / T-800Monitor kijelző (esetleg desktop és laptop), benneSwarzi A legkevesebb, amit tehetünk: tegyük „érintésbaráttá”!
  12. 12. Mobil verzió / T-1 Kézenfekvő megoldásnak tűnik egy mobilra optimalizált site elkészítése, de…
  13. 13. Mobil verzió / T-1 Wall-E …ha nem csináljuk elég jól, könnyen nevetségessé is válhatunk.
  14. 14. Natív alkalmazás / T-XA natív alkalmazásokban számtalan lehetőség rejlik, de nagyon sok az eltérő platform…
  15. 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. 16. Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmá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. 17. Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmás kivágással, de ugyanaz a kép Nagyon jól alkalmazkodik a környezetéhez…
  18. 18. Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmás kivágással, de ugyanaz a kép …elbánik a flexibilis rácsszerkezettel…
  19. 19. Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmás kivágással, de ugyanaz a kép …és akár csempékben is tud gondolkodni.
  20. 20. Melyik megoldástválasszam a rengeteg lehetőség közül?
  21. 21. “It is not the strongest of thespecies that survives, nor themost intelligent, but the onemost responsive to change.” — CHARLES DARWIN
  22. 22. Responsive designszemlélet
  23. 23. Flexibilis rácsszerkezet
  24. 24. Flexibilis képek és videók
  25. 25. Media Queries
  26. 26. Akkor csak egy kis CSS/HTML munka, ésmár kész is az új design?
  27. 27. Inspiráció: Abraham Maslow, Kristofer Layon és Brad Frost
  28. 28. Minden tartalom legyenelérhető minden eszközön!
  29. 29. Kezdjük a tartalommal Forrás: W3C – http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  30. 30. Már tudjuk, hogy mit szeretnék megjeleníteni,a kérdés csak az: hogyan?
  31. 31. Eszközfüggő elrendezések Mostly Fluid Column Drop @lukew Off Canvas Layout Shifter
  32. 32. Kevesebb frusztráló dologvan annál, mint amikor nem tudjuk elérni a célunkat.
  33. 33. Navigáció Forrás: Sony USA – http://www.sony.com
  34. 34. Számos megoldás létezikA. “Do Nothing” ApproachB. The ToggleC. Select MenuD. Footer OnlyE. Footer Anchor @brad_frostF. Left Nav FlyoutG. “Hide and Cry”
  35. 35. A felhasználók mobilon isgyorsan szeretnék elérni a digitális tartalmakat.
  36. 36. 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
  37. 37. „Kikapcsolt” tartalmak Forrás: Twitter Bootstrap – http://twitter.github.com/bootstrap/scaffolding.html
  38. 38. Ha eddig mindent jólcsináltunk, akkor már csak egy kis odafigyelés kell.
  39. 39. Eszköz-specifikus funkciók
  40. 40. Akkor most alapjairól kell újraépítenem a weblapomat?
  41. 41. Építkezzünk lépésenként!1. Tegyük „érintőképernyő-baráttá” meglévődesktop oldalunkat
  42. 42. Építkezzünk lépésenként!1. Tegyük „érintőképernyő-baráttá” meglévődesktop oldalunkat2. Kezdjünk el responsive design szemlélettelfelépíteni egy mobil verziót
  43. 43. Építkezzünk lépésenként!1. Tegyük „érintőképernyő-baráttá” meglévődesktop oldalunkat2. Kezdjünk el responsive design szemlélettelfelépíteni egy mobil verziót3. Dobjuk ki a desktop oldalról, amiről azelőző lépés során kiderült, hogy felesleges
  44. 44. Köszönöm a figyelmet! gergely.tilly@kirowskiisobar.com @GergelyTilly Tilly Gergely

×