Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Responsive design szemléletHogyan legyünk jelen minden eszközön?
Tilly GergelyUser experience designer
Új kihívások
Sok platform létezik
Több eszközt használunk                    , Ipsos, Sterling Brands
Eltérő méretű kijelzők      Forrás: Google Analytics, saját mérés (2012.10.14 – 2012.11.14.)
2048  különbözőképernyő felbontás        #madness
Hogyan tudunkmegjelenni ennyi   kijelzőn?
Több fegyver közülválaszthatunk
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ó…
Desktop site / T-800Monitor kijelző (esetleg desktop és laptop), benneSwarzi           A legkevesebb, amit tehetünk:      ...
Mobil verzió / T-1  Kézenfekvő megoldásnak tűnik egy  mobilra optimalizált site elkészítése, de…
Mobil verzió / T-1 Wall-E    …ha nem csináljuk elég jól, könnyen      nevetségessé is válhatunk.
Natív alkalmazás / T-XA natív alkalmazásokban számtalan lehetőség rejlik,      de nagyon sok az eltérő platform…
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.
Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmás kivágással, de ugyanaz a kép   A responsive...
Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmás kivágással, de ugyanaz a kép Nagyon jól alk...
Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmás kivágással, de ugyanaz a kép    …elbánik a ...
Responsive design / T-1000Mobil, tablet, desktop, benne T1000, mindegyikbenmás kivágással, de ugyanaz a kép    …és akár cs...
Melyik megoldástválasszam a rengeteg  lehetőség közül?
“It is not the strongest of thespecies that survives, nor themost intelligent, but the onemost responsive to change.”     ...
Responsive designszemlélet
Flexibilis rácsszerkezet
Flexibilis képek és videók
Media Queries
Akkor csak egy kis CSS/HTML munka, ésmár kész is az új design?
Inspiráció: Abraham Maslow, Kristofer Layon és Brad Frost
Minden tartalom legyenelérhető minden eszközön!
Kezdjük a tartalommal Forrás: W3C – http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Már tudjuk, hogy mit szeretnék megjeleníteni,a kérdés csak az: hogyan?
Eszközfüggő elrendezések  Mostly Fluid              Column Drop                   @lukew                                  ...
Kevesebb frusztráló dologvan annál, mint amikor nem  tudjuk elérni a célunkat.
Navigáció       Forrás: Sony USA – http://www.sony.com
Számos megoldás létezikA. “Do Nothing” ApproachB. The ToggleC. Select MenuD. Footer OnlyE. Footer Anchor                  ...
A felhasználók mobilon isgyorsan szeretnék elérni a  digitális tartalmakat.
Kisebb méretű képek     160Kb              60Kb     1400 x 800 pixel   760 x 440 pixel     100Kb              30Kb        ...
„Kikapcsolt” tartalmak   Forrás: Twitter Bootstrap – http://twitter.github.com/bootstrap/scaffolding.html
Ha eddig mindent jólcsináltunk, akkor már csak  egy kis odafigyelés kell.
Eszköz-specifikus funkciók
Akkor most alapjairól  kell újraépítenem   a weblapomat?
Építkezzünk lépésenként!1. Tegyük „érintőképernyő-baráttá” meglévődesktop oldalunkat
É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...
É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...
Köszönöm a figyelmet!         gergely.tilly@kirowskiisobar.com         @GergelyTilly         Tilly Gergely
Responsive design szemlélet @ App!2012 konferencia
Responsive design szemlélet @ App!2012 konferencia
Responsive design szemlélet @ App!2012 konferencia
Responsive design szemlélet @ App!2012 konferencia
Responsive design szemlélet @ App!2012 konferencia
Responsive design szemlélet @ App!2012 konferencia
Prochain SlideShare
Chargement dans…5
×

Responsive design szemlélet @ App!2012 konferencia

437 vues

Publié le

Publié dans : Design
  • Soyez le premier à commenter

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

×