1. Reszponzív design
integrálása
Fejlesztői, grafikai és UX szempontból
Zoltán Borsos Software Engineer @ Habostorta

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. Előnyök
oEgy kódbázis – egy tartalom
oEgyforma bővíthetőség
oMobil SEO
oKöltséghatékony

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. Tervezési fázis
Mobile first – egy lépésben
Kecses romlás
- Helyett
Progresszív javítás

6. Töréspontok
480Px < 768Px < 992Px < 1200Px
Telefonok
Táblák
Közepes
képernyők
Nagy
képernyők

7. Kialakítás
oMinden alapja…
…A grid alapú tervezés
oMedia-Query-k használata
oSzabadabb design lehetőségek

8. Kialakítás II.
oFluid-responsive oldalak
oTöbb megkötést követel
oKevésbé időigényes

9. A Flat design előnyei
oLetisztult felületek
oMinimális méret
oFont, vagy SVG alapú ikonok használata

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. Munkafolyamat meggyorsítása
oHasználjunk valamilyen keretrendszert? Igen!
oJavaslat? Bootstrap 3?
oFoundation 5?

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. Bootstrap 3 - Hátrányok
oFejlesztői kvalifikáció
oKötöttebb formák
oViszonylag nagy méret

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. Kérdések, kérések?
Mit adhatok? 

16. Köszönöm a figyelmet!
Kérdésetek van? Keressetek bátran:
Email: zolli07@gmail.com