reszponzív design integrálása
TRANSCRIPT
Reszponzív design integrálása
Fejlesztői, grafikai és UX szempontból
Zoltán Borsos Software Engineer @ Habostorta
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
Előnyök
oEgy kódbázis – egy tartalom
oEgyforma bővíthetőség
oMobil SEO
oKöltséghatékony
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
Tervezési fázis
Mobile first – egy lépésben
Kecses romlás
- Helyett
Progresszív javítás
Töréspontok
480Px < 768Px < 992Px < 1200Px
Telefonok Táblák Közepesképernyők
Nagyképernyők
Kialakítás
oMinden alapja…
…A grid alapú tervezés
oMedia-Query-k használata
oSzabadabb design lehetőségek
Kialakítás II.
oFluid-responsive oldalak
oTöbb megkötést követel
oKevésbé időigényes
A Flat design előnyei
oLetisztult felületek
oMinimális méret
oFont, vagy SVG alapú ikonok használata
UX szempontok
oInput típusok (Email, Tel, Number, URL…)
oLegalább két navigáció
oGesztusvezérlés
oMegváltozott vezérlési szerkezetek
Munkafolyamat meggyorsítása
oHasználjunk valamilyen keretrendszert? Igen!
oJavaslat? Bootstrap 3?
oFoundation 5?
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
oGombok, lapozó, navigáció sáv, inputok, eseményjelzők
oHatalmas közösségi támogatás, javascript könyvtár
Bootstrap 3 - Hátrányok
oFejlesztői kvalifikáció
oKötöttebb formák
oViszonylag nagy méret
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
Kérdések, kérések?Mit adhatok?
