16. phonecount.com
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
17. phonecount.com
★ There are 7 Billion People in the world now
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
18. phonecount.com
★ There are 7 Billion People in the world now
★ 6 Billion connected phones in the world
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
19. phonecount.com
★ There are 7 Billion People in the world now
★ 6 Billion connected phones in the world
★ 1.7 Billion phone with internet connection
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
20. phonecount.com
★ There are 7 Billion People in the world now
★ 6 Billion connected phones in the world
★ 1.7 Billion phone with internet connection
★ 2.1 Billion internet users on PC and phones
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
21. The total number of
people using the web on
mobile devices is set to
surpass desktops by 2015
http://www.idc.com/getdoc.jsp?containerId=prUS23028711
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
22. how can we deliver a
great experience to
these billion of people?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
23. Create mobile apps?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
24. Create mobile apps?
★ Yeah Iphone Apps!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
25. Create mobile apps?
★ Yeah Iphone Apps!
★ Oh, Android too!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
26. Create mobile apps?
★ Yeah Iphone Apps!
★ Oh, Android too!
★ Eh, Wait, Windows phone also!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
27. Create mobile apps?
★ Yeah Iphone Apps!
★ Oh, Android too!
★ Eh, Wait, Windows phone also!
★ err ... don’t forget blackberry phone
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
28. Make a mobile version of website
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
29. Make a mobile version of website
★ Good for web application.
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
30. Make a mobile version of website
★ Good for web application.
★ too serious for blog, company profile, portfolio
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
31. Make a mobile version of website
★ Good for web application.
★ too serious for blog, company profile, portfolio
★ It’s still have two version.
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
32. Make a mobile version of website
★ Good for web application.
★ too serious for blog, company profile, portfolio
★ It’s still have two version.
★ more time ( and money ) to develop other version
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
33. So ?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
35. It was started by
Ethan Marcotte on
alistapart..
alistapart.com/articles/responsive-web-design/
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
36. Ah .. i don’t need
responsive web design..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
38. Responsive Web Design
“A flexible grid (with flexible images)
that incorporates media queries to
create a responsive, adaptive layout.”
- Ethan Marcotte
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
39. The Recipe
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
40. The Recipe
★ A flexible, grid-based Layout
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
41. The Recipe
★ A flexible, grid-based Layout
★ Flexible images and media
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
42. The Recipe
★ A flexible, grid-based Layout
★ Flexible images and media
★ Media queries - a module from CSS3
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
43. Flexible grid
★ Sizing in proportion
★ % rather than px, creates the fluid layout
★ flexible image { max-width : 100% }
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
44. CSS3 Media Queries
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
45. CSS3 Media Queries
★ Conditional Styling
★ Allow you to target specific device size , screen
size, screen orientation, and much more
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
46. Demo ...
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
52. let’s see ..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
53. let’s try ..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
54. nice .. so,
What’s Next ?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
55. Get the design
on real devices!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
56. The common step
★ Enter the URL on each devices
★ Click or refresh one by one on devices to move
on other page / getting the latest result after
changing the design
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
57. The Problem
★ It’s not nice if we have 5 devices to be tested.
★ No DOM inspector / inspect element / firebug on
smartphone/tablet browser for debugging the
design
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
58. i c .. any solution ?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
60. Adobe Shadow
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
61. Adobe Shadow
it can be easier, and we can debug it remotely
on each devices!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
62. Let’s see !
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
63. Bad Point of RWD
★ No mobile only, users will download all the page
★ force the user to stop zooming and pinch on
screen ..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
64. Resources
The article that started it all, by Ethan Marcotte:
http://www.alistapart.com/articles/responsive-web-design/
Fluid Images by Ethan Marcotte:
http://unstoppablerobotninja.com/entry/fluid-images
IE8 and below Media Queries fix:
http://code.google.com/p/css3-mediaqueries-js/
IE6 min/max-width hack:
http://www.cameronmoll.com/archives/000892.html
Fluid Grids by Ethan Marcotte:
http://www.alistapart.com/articles/fluidgrids/
Media Queries reference, list of Media Query selectors available:
http://www.w3.org/TR/css3-mediaqueries/
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
