Designing Webfor various devices    ADOBE CAMP INDONESIA 2012
Harry Saputra            Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Harry Saputra★   Front-End Developer & UX Designer @ JomSocial                         Adobe Camp 2012 Indonesia - Al Azha...
Harry Saputra★   Front-End Developer & UX Designer @ JomSocial★   Chief Creative Officer @ Tandif                         ...
Harry Saputra★   Front-End Developer & UX Designer @ JomSocial★   Chief Creative Officer @ Tandif★   harry@tandif.com, me@...
Let’s Start!       Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Screens and devices           Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Various Screen                 Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Various Smartphone                     Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
They are ubiquitous..             Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
EverywhereAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta
EveryoneAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta
EverytimeAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Lifestyle has changed now             Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
phonecount.com           Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
phonecount.com★   There are 7 Billion People in the world now                           Adobe Camp 2012 Indonesia - Al Azh...
phonecount.com★   There are 7 Billion People in the world now★   6 Billion connected phones in the world                  ...
phonecount.com★   There are 7 Billion People in the world now★   6 Billion connected phones in the world★   1.7 Billion ph...
phonecount.com★   There are 7 Billion People in the world now★   6 Billion connected phones in the world★   1.7 Billion ph...
The total number ofpeople using the web onmobile devices is set tosurpass desktops by 2015http://www.idc.com/getdoc.jsp?co...
how can we deliver agreat experience tothese billion of people?            Adobe Camp 2012 Indonesia - Al Azhar University...
Create mobile apps?            Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Create mobile apps?★   Yeah Iphone Apps!                        Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Create mobile apps?★   Yeah Iphone Apps!★   Oh, Android too!                        Adobe Camp 2012 Indonesia - Al Azhar U...
Create mobile apps?★   Yeah Iphone Apps!★   Oh, Android too!★   Eh, Wait, Windows phone also!                          Ado...
Create mobile apps?★   Yeah Iphone Apps!★   Oh, Android too!★   Eh, Wait, Windows phone also!★   err ... don’t forget blac...
Make a mobile version of website                 Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Make a mobile version of website★   Good for web application.                          Adobe Camp 2012 Indonesia - Al Azha...
Make a mobile version of website★   Good for web application.★   too serious for blog, company profile, portfolio         ...
Make a mobile version of website★   Good for web application.★   too serious for blog, company profile, portfolio★   It’s ...
Make a mobile version of website★   Good for web application.★   too serious for blog, company profile, portfolio★   It’s ...
So ?  Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
ResponsiveWeb Design!     Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
It was started byEthan Marcotte onalistapart..alistapart.com/articles/responsive-web-design/                          Adob...
Ah .. i don’t needresponsive web design..             Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Responsive Web Design“A flexible grid (with flexible images)that incorporates media queries tocreate a responsive, adaptiv...
The Recipe             Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The Recipe★   A flexible, grid-based Layout                           Adobe Camp 2012 Indonesia - Al Azhar University, Jak...
The Recipe★   A flexible, grid-based Layout★   Flexible images and media                           Adobe Camp 2012 Indones...
The Recipe★   A flexible, grid-based Layout★   Flexible images and media★   Media queries - a module from CSS3            ...
Flexible grid★   Sizing in proportion★   % rather than px, creates the fluid layout★   flexible image { max-width : 100% }...
CSS3 Media Queries            Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
CSS3 Media Queries★   Conditional Styling★   Allow you to target specific device size , screen    size, screen orientation...
Demo ...           Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The Algorithm ...             Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The Algorithm ...Skip it for today :)             Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
We have AdobeDreamweaver!       Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
let’s see ..               Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
let’s try ..               Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
nice .. so,What’s Next ?        Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Get the designon real devices!          Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The common step★   Enter the URL on each devices★   Click or refresh one by one on devices to move    on other page / gett...
The Problem★   It’s not nice if we have 5 devices to be tested.★   No DOM inspector / inspect element / firebug on    smar...
i c .. any solution ?           Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Shadow       Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Shadowit can be easier, and we can debug it remotelyon each devices!                            Adobe Camp 2012 Indo...
Let’s see !              Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Bad Point of RWD★   No mobile only, users will download all the page★   force the user to stop zooming and pinch on    scr...
ResourcesThe article that started it all, by Ethan Marcotte:http://www.alistapart.com/articles/responsive-web-design/Fluid...
Adobe’s Resourceshttp://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.htmlhttp://tv.adobe.com/watch/...
Thank you for attention :)              Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Designing Web For Various Devices
Upcoming SlideShare
Loading in...5
×

Designing Web For Various Devices

511

Published on

Published in: Technology, Design, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
511
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing Web For Various Devices

  1. 1. Designing Webfor various devices ADOBE CAMP INDONESIA 2012
  2. 2. Harry Saputra Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  3. 3. Harry Saputra★ Front-End Developer & UX Designer @ JomSocial Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  4. 4. Harry Saputra★ Front-End Developer & UX Designer @ JomSocial★ Chief Creative Officer @ Tandif Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  5. 5. Harry Saputra★ Front-End Developer & UX Designer @ JomSocial★ Chief Creative Officer @ Tandif★ harry@tandif.com, me@harrysaputra.com Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  6. 6. Let’s Start! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  7. 7. Screens and devices Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  8. 8. Various Screen Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  9. 9. Various Smartphone Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  10. 10. They are ubiquitous.. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  11. 11. EverywhereAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  12. 12. EveryoneAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  13. 13. EverytimeAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  14. 14. Lifestyle has changed now Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  15. 15. phonecount.com Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  16. 16. phonecount.com★ There are 7 Billion People in the world now Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  17. 17. 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
  18. 18. 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
  19. 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★ 2.1 Billion internet users on PC and phones Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  20. 20. The total number ofpeople using the web onmobile devices is set tosurpass desktops by 2015http://www.idc.com/getdoc.jsp?containerId=prUS23028711 Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  21. 21. how can we deliver agreat experience tothese billion of people? Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  22. 22. Create mobile apps? Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  23. 23. Create mobile apps?★ Yeah Iphone Apps! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  24. 24. Create mobile apps?★ Yeah Iphone Apps!★ Oh, Android too! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  25. 25. Create mobile apps?★ Yeah Iphone Apps!★ Oh, Android too!★ Eh, Wait, Windows phone also! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  26. 26. 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
  27. 27. Make a mobile version of website Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  28. 28. Make a mobile version of website★ Good for web application. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. So ? Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  33. 33. ResponsiveWeb Design! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  34. 34. It was started byEthan Marcotte onalistapart..alistapart.com/articles/responsive-web-design/ Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  35. 35. Ah .. i don’t needresponsive web design.. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  36. 36. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  37. 37. Responsive Web Design“A flexible grid (with flexible images)that incorporates media queries tocreate a responsive, adaptive layout.” - Ethan Marcotte Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  38. 38. The Recipe Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  39. 39. The Recipe★ A flexible, grid-based Layout Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  40. 40. The Recipe★ A flexible, grid-based Layout★ Flexible images and media Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  41. 41. 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
  42. 42. 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
  43. 43. CSS3 Media Queries Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  44. 44. 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
  45. 45. Demo ... Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  46. 46. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  47. 47. The Algorithm ... Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  48. 48. The Algorithm ...Skip it for today :) Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  49. 49. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  50. 50. We have AdobeDreamweaver! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  51. 51. let’s see .. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  52. 52. let’s try .. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  53. 53. nice .. so,What’s Next ? Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  54. 54. Get the designon real devices! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  55. 55. 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
  56. 56. 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
  57. 57. i c .. any solution ? Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  58. 58. Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  59. 59. Adobe Shadow Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  60. 60. Adobe Shadowit can be easier, and we can debug it remotelyon each devices! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  61. 61. Let’s see ! Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  62. 62. 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
  63. 63. ResourcesThe 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-imagesIE8 and below Media Queries fix:http://code.google.com/p/css3-mediaqueries-js/IE6 min/max-width hack:http://www.cameronmoll.com/archives/000892.htmlFluid 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
  64. 64. Adobe’s Resourceshttp://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.htmlhttp://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/http://tv.adobe.com/watch/adc-presents/introducing-adobe-shadow/ Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  65. 65. Thank you for attention :) Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×