SlideShare une entreprise Scribd logo
1  sur  50
Télécharger pour lire hors ligne
Responsive design szemlélet
Hogyan legyünk jelen minden eszközön?
Tilly Gergely
User 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 tudunk
megjelenni ennyi
   kijelzőn?
Több fegyver közül
vá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-800
Monitor kijelző (esetleg desktop és laptop), benne
Swarzi




           A legkevesebb, amit tehetünk:
           tegyük „érintésbaráttá”!
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-X




A 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-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
má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.
Responsive design / T-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
más kivágással, de ugyanaz a kép




 Nagyon jól alkalmazkodik a környezetéhez…
Responsive design / T-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
más kivágással, de ugyanaz a kép




    …elbánik a flexibilis rácsszerkezettel…
Responsive design / T-1000
Mobil, tablet, desktop, benne T1000, mindegyikben
más kivágással, de ugyanaz a kép




    …és akár csempékben is tud gondolkodni.
Melyik megoldást
válasszam a rengeteg
  lehetőség közül?
“It is not the strongest of the
species that survives, nor the
most intelligent, but the one
most responsive to change.”
                   — CHARLES DARWIN
Responsive design
szemlélet
Flexibilis rácsszerkezet
Flexibilis képek és videók
Media Queries
Akkor csak egy kis
 CSS/HTML munka, és
már kész is az új design?
Inspiráció: Abraham Maslow, Kristofer Layon és Brad Frost
Minden tartalom legyen
elé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

                                     Off Canvas



  Layout Shifter
Kevesebb frusztráló dolog
van 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étezik
A. “Do Nothing” Approach

B. The Toggle

C. Select Menu

D. Footer Only

E. Footer Anchor
                           @brad_frost
F. Left Nav Flyout

G. “Hide and Cry”
A felhasználók mobilon is
gyorsan 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
                        480 x 260 pixel
     1000 x 600 pixel
„Kikapcsolt” tartalmak




   Forrás: Twitter Bootstrap – http://twitter.github.com/bootstrap/scaffolding.html
Ha eddig mindent jól
csiná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 oldalunkat


2. Kezdjünk el responsive design szemlélettel
felépíteni egy mobil verziót
Építkezzünk lépésenként!
1. Tegyük „érintőképernyő-baráttá” meglévő
desktop oldalunkat


2. Kezdjünk el responsive design szemlélettel
felépíteni egy mobil verziót


3. Dobjuk ki a desktop oldalról, amiről az
előző lépés során kiderült, hogy felesleges
Köszönöm a figyelmet!

         gergely.tilly@kirowskiisobar.com


         @GergelyTilly



         Tilly Gergely
Responsive design szemlélet @ App!2012 konferencia

Contenu connexe

En vedette

Expectations and realities of Information Technology
Expectations and realities of Information TechnologyExpectations and realities of Information Technology
Expectations and realities of Information TechnologyVirginia Garcya
 
3.trasnformation of the social environment
3.trasnformation of the social environment3.trasnformation of the social environment
3.trasnformation of the social environmentVirginia Garcya
 
English 303 Final Slidecast
English 303 Final SlidecastEnglish 303 Final Slidecast
English 303 Final Slidecastxincijiang
 
MVP = Más Valaki Problémája? @ App!mobile 2013 konferencia
MVP = Más Valaki Problémája? @ App!mobile 2013 konferenciaMVP = Más Valaki Problémája? @ App!mobile 2013 konferencia
MVP = Más Valaki Problémája? @ App!mobile 2013 konferenciaGergely Tilly
 
English 303 Project
English 303 ProjectEnglish 303 Project
English 303 Projectxincijiang
 
The qfd process sutton f03
The qfd process sutton f03The qfd process sutton f03
The qfd process sutton f03Surya Ratheesh
 
Java memory presentation
Java memory presentationJava memory presentation
Java memory presentationYury Bubnov
 

En vedette (9)

Virginiatools
VirginiatoolsVirginiatools
Virginiatools
 
Expectations and realities of Information Technology
Expectations and realities of Information TechnologyExpectations and realities of Information Technology
Expectations and realities of Information Technology
 
3.trasnformation of the social environment
3.trasnformation of the social environment3.trasnformation of the social environment
3.trasnformation of the social environment
 
English 303 Final Slidecast
English 303 Final SlidecastEnglish 303 Final Slidecast
English 303 Final Slidecast
 
MVP = Más Valaki Problémája? @ App!mobile 2013 konferencia
MVP = Más Valaki Problémája? @ App!mobile 2013 konferenciaMVP = Más Valaki Problémája? @ App!mobile 2013 konferencia
MVP = Más Valaki Problémája? @ App!mobile 2013 konferencia
 
English 303 Project
English 303 ProjectEnglish 303 Project
English 303 Project
 
Immunodefisiency
ImmunodefisiencyImmunodefisiency
Immunodefisiency
 
The qfd process sutton f03
The qfd process sutton f03The qfd process sutton f03
The qfd process sutton f03
 
Java memory presentation
Java memory presentationJava memory presentation
Java memory presentation
 

Similaire à Responsive design szemlélet @ App!2012 konferencia

Csík Gyula - A grafikus, az ügyfél és a responsive webdesign
Csík Gyula - A grafikus, az  ügyfél és a responsive webdesignCsík Gyula - A grafikus, az  ügyfél és a responsive webdesign
Csík Gyula - A grafikus, az ügyfél és a responsive webdesignFrontend Meetup
 
Finnováció 2012 - Multiscreen experience
Finnováció 2012 - Multiscreen experienceFinnováció 2012 - Multiscreen experience
Finnováció 2012 - Multiscreen experienceIsobar Budapest
 
Vállalati mobilfejlesztés projektek, App!mobil 2013
Vállalati mobilfejlesztés projektek, App!mobil 2013Vállalati mobilfejlesztés projektek, App!mobil 2013
Vállalati mobilfejlesztés projektek, App!mobil 2013Édua Dobos
 
Digitalis Design - Mobile App Design (hun)
Digitalis Design - Mobile App Design (hun)Digitalis Design - Mobile App Design (hun)
Digitalis Design - Mobile App Design (hun)Milan Korsos
 
Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...
Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...
Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...Robert Pinter
 
Mobile Developers Day 2012 - Webtől a mobilig
Mobile Developers Day 2012 - Webtől a mobiligMobile Developers Day 2012 - Webtől a mobilig
Mobile Developers Day 2012 - Webtől a mobiligPéter Lukács
 
Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Hajas Tamás
 
Szantai Eva - HTML5 - IAB Maksz
Szantai Eva - HTML5 - IAB MakszSzantai Eva - HTML5 - IAB Maksz
Szantai Eva - HTML5 - IAB MakszEva Szantai
 
Csonka enikő alkalmazási élmény bemutatása
Csonka enikő alkalmazási élmény bemutatásaCsonka enikő alkalmazási élmény bemutatása
Csonka enikő alkalmazási élmény bemutatásaPOLYGON Informatikai Kft.
 
Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?
Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?
Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?Isobar Budapest
 
Andréka Áron web 2.0
Andréka Áron web 2.0Andréka Áron web 2.0
Andréka Áron web 2.0Aaron9102
 
SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...
SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...
SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...Norbert Madarasz
 
A Windows Phone világa
A Windows Phone világaA Windows Phone világa
A Windows Phone világaOpen Academy
 
Mobile First | Hogyan tervezzünk mobilra?
Mobile First | Hogyan tervezzünk mobilra?Mobile First | Hogyan tervezzünk mobilra?
Mobile First | Hogyan tervezzünk mobilra?Dániel Góré
 
Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"
Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"
Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"FinTechAkademia
 

Similaire à Responsive design szemlélet @ App!2012 konferencia (18)

Csík Gyula - A grafikus, az ügyfél és a responsive webdesign
Csík Gyula - A grafikus, az  ügyfél és a responsive webdesignCsík Gyula - A grafikus, az  ügyfél és a responsive webdesign
Csík Gyula - A grafikus, az ügyfél és a responsive webdesign
 
Finnováció 2012 - Multiscreen experience
Finnováció 2012 - Multiscreen experienceFinnováció 2012 - Multiscreen experience
Finnováció 2012 - Multiscreen experience
 
Vállalati mobilfejlesztés projektek, App!mobil 2013
Vállalati mobilfejlesztés projektek, App!mobil 2013Vállalati mobilfejlesztés projektek, App!mobil 2013
Vállalati mobilfejlesztés projektek, App!mobil 2013
 
Digitalis Design - Mobile App Design (hun)
Digitalis Design - Mobile App Design (hun)Digitalis Design - Mobile App Design (hun)
Digitalis Design - Mobile App Design (hun)
 
Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...
Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...
Digitális Világ Gazdaságtana 11-12: Kutatási adatok keresése, rendszerezése, ...
 
Teleplace
TeleplaceTeleplace
Teleplace
 
Mobile Developers Day 2012 - Webtől a mobilig
Mobile Developers Day 2012 - Webtől a mobiligMobile Developers Day 2012 - Webtől a mobilig
Mobile Developers Day 2012 - Webtől a mobilig
 
Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Responsive Webdesign Drupallal
Responsive Webdesign Drupallal
 
Young Enterprise Day 2014 – Open Touch a gyakorlatban
Young Enterprise Day 2014 – Open Touch a gyakorlatbanYoung Enterprise Day 2014 – Open Touch a gyakorlatban
Young Enterprise Day 2014 – Open Touch a gyakorlatban
 
Szantai Eva - HTML5 - IAB Maksz
Szantai Eva - HTML5 - IAB MakszSzantai Eva - HTML5 - IAB Maksz
Szantai Eva - HTML5 - IAB Maksz
 
Csonka enikő alkalmazási élmény bemutatása
Csonka enikő alkalmazási élmény bemutatásaCsonka enikő alkalmazási élmény bemutatása
Csonka enikő alkalmazási élmény bemutatása
 
Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?
Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?
Hogyan másszuk meg a márkaépítés mobil Maslow-piramisát?
 
Andréka Áron web 2.0
Andréka Áron web 2.0Andréka Áron web 2.0
Andréka Áron web 2.0
 
SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...
SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...
SAP megoldáshoz kapcsolódó mobil alkalmazás fejlesztése Sybase Unwired Platfo...
 
A Windows Phone világa
A Windows Phone világaA Windows Phone világa
A Windows Phone világa
 
Mobile First | Hogyan tervezzünk mobilra?
Mobile First | Hogyan tervezzünk mobilra?Mobile First | Hogyan tervezzünk mobilra?
Mobile First | Hogyan tervezzünk mobilra?
 
Kh Web2 Pres
Kh Web2 PresKh Web2 Pres
Kh Web2 Pres
 
Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"
Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"
Pop András - "...mert A Kicsi Szép, a UX meg fontos! UX nélkül nincs FinTech!"
 

Responsive design szemlélet @ App!2012 konferencia