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.

Reszponzív design integrálása

339 visualizações

Publicada em

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Reszponzív design integrálása

  1. 1. Reszponzív design integrálása Fejlesztői, grafikai és UX szempontból Zoltán Borsos Software Engineer @ Habostorta
  2. 2. Miért van rá szükségünk? oGyorsan növekvő mobilforgalom oA nemzetközi trendek még nagyobb növekedést mutatnak oEgyre nagyobb igény az egységes megjelenésre oA mobil web 8X növekedést mutat a desktophoz képest
  3. 3. Előnyök oEgy kódbázis – egy tartalom oEgyforma bővíthetőség oMobil SEO oKöltséghatékony
  4. 4. Hátrányok? oIgen ilyenek is vannak… oÁltalánosan nagyobb méret (Flat design eljövetele) oKompromisszumos tervezés oErősen kvalifikált fejlesztők oEszközszükséglet
  5. 5. Tervezési fázis Mobile first – egy lépésben Kecses romlás - Helyett Progresszív javítás
  6. 6. Töréspontok 480Px < 768Px < 992Px < 1200Px Telefonok Táblák Közepes képernyők Nagy képernyők
  7. 7. Kialakítás oMinden alapja… …A grid alapú tervezés oMedia-Query-k használata oSzabadabb design lehetőségek
  8. 8. Kialakítás II. oFluid-responsive oldalak oTöbb megkötést követel oKevésbé időigényes
  9. 9. A Flat design előnyei oLetisztult felületek oMinimális méret oFont, vagy SVG alapú ikonok használata
  10. 10. UX szempontok oInput típusok (Email, Tel, Number, URL…) oLegalább két navigáció oGesztusvezérlés oMegváltozott vezérlési szerkezetek
  11. 11. Munkafolyamat meggyorsítása oHasználjunk valamilyen keretrendszert? Igen! oJavaslat? Bootstrap 3? oFoundation 5?
  12. 12. Bootstrap 3 - Előnyök oMobile first felépítés oTeljesen reszponzív grid a legáltalánosabb töréspontokkal oElőre elkészített stílusok sok általános elemre o Gombok, lapozó, navigáció sáv, inputok, eseményjelzők o Hatalmas közösségi támogatás, javascript könyvtár
  13. 13. Bootstrap 3 - Hátrányok oFejlesztői kvalifikáció oKötöttebb formák oViszonylag nagy méret
  14. 14. Felületek tesztelése oBöngészők fejlesztői eszközei (Chrome dev tools) oAdobe Edge Inspect oSemmi sem pótolhatja a tesztelést… …Valós eszközökkel
  15. 15. Kérdések, kérések? Mit adhatok? 
  16. 16. Köszönöm a figyelmet! Kérdésetek van? Keressetek bátran: Email: zolli07@gmail.com

×