App! 2012 konferencia - Responsive design szemlélet

  • 1,174 views
Uploaded on

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.

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,174
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
20
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Responsive design szemléletHogyan legyünk jelen minden eszközön?
  • 2. Tilly GergelyUser 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 tudunkmegjelenni ennyi kijelzőn?
  • 9. Több fegyver közülvá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-800Monitor kijelző (esetleg desktop és laptop), benneSwarzi 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-XA 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-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. 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. 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. 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. Melyik megoldástválasszam a rengeteg lehetőség közül?
  • 21. “It is not the strongest of thespecies that survives, nor themost intelligent, but the onemost responsive to change.” — CHARLES DARWIN
  • 22. Responsive designszemlélet
  • 23. Flexibilis rácsszerkezet
  • 24. Flexibilis képek és videók
  • 25. Media Queries
  • 26. Akkor csak egy kis CSS/HTML munka, ésmár kész is az új design?
  • 27. Inspiráció: Abraham Maslow, Kristofer Layon és Brad Frost
  • 28. Minden tartalom legyenelérhető minden eszközön!
  • 29. Kezdjük a tartalommal Forrás: W3C – http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  • 30. Már tudjuk, hogy mit szeretnék megjeleníteni,a kérdés csak az: hogyan?
  • 31. Eszközfüggő elrendezések Mostly Fluid Column Drop @lukew Off Canvas Layout Shifter
  • 32. Kevesebb frusztráló dologvan annál, mint amikor nem tudjuk elérni a célunkat.
  • 33. Navigáció Forrás: Sony USA – http://www.sony.com
  • 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. A felhasználók mobilon isgyorsan szeretnék elérni a digitális tartalmakat.
  • 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. „Kikapcsolt” tartalmak Forrás: Twitter Bootstrap – http://twitter.github.com/bootstrap/scaffolding.html
  • 38. Ha eddig mindent jólcsináltunk, akkor már csak egy kis odafigyelés kell.
  • 39. Eszköz-specifikus funkciók
  • 40. Akkor most alapjairól kell újraépítenem a weblapomat?
  • 41. Építkezzünk lépésenként!1. Tegyük „érintőképernyő-baráttá” meglévődesktop oldalunkat
  • 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. É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. Köszönöm a figyelmet! gergely.tilly@kirowskiisobar.com @GergelyTilly Tilly Gergely