Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Responsive & Adaptive Design @mLearnCon15 Nick Floro

2.889 Aufrufe

Veröffentlicht am

Responsive and adaptive designs are extremely popular in the world of mobile learning, but they are also very commonly misunderstood concepts. Today’s mobile learning professionals need to understand what responsive and adaptive designs really are in order to plan and implement them effectively with HTML5-based solutions.

Veröffentlicht in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Responsive & Adaptive Design @mLearnCon15 Nick Floro

  1. 1. Responsive vs. Adaptive Design How to Choose Nick Floro Nick@sealworks.com
  2. 2. fixed width design. 900 to 1,100 pixels
  3. 3. SEMANTICS CSS3 3D, GRAPHICS 
 & EFFECTS DEVICE ACCESS PERFORMANCE & INTEGRATION MULTIMEDIA OFFLINE & STORAGECONNECTIVITY
  4. 4. Internet Explorer 9 BETA Web Browser Based Delivery Chrome Safari Firefox Opera Edge
  5. 5. screen size, platform and orientation
  6. 6. desktoptabletphone
  7. 7. desktoptabletphone phablet
  8. 8. desktoptabletphone Content Strategy phone tablet
  9. 9. Responsive web design is that it will fluidly change and respond to fit any screen or device size. CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation.
  10. 10. Adaptive Web Design uses a predefined set of layout sizes based on device screen size along with CSS and JavaScript, the AWD approach adapts to the detected device. The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.
  11. 11. desktoptabletphone Think Mobile First Progressive Enhancement
  12. 12. Content Strategy
  13. 13. Performance Browser Support Content Current technology or solution in place? Time Device Orientation Things to Consider
  14. 14. Specifications
  15. 15. Selecting a Size Pixels & Aspect Ratio iPhone 4 960 x 640 iPhone 480 x 320 iPhone 5 1136 x 640
  16. 16. Android Xoom 1280 x 720 HTC Incredible 800 x 480 Selecting a Size Pixels & Aspect Ratio iPad 1024 x 768 iPhone 4 960 x 640iPhone 480 x 320 iPhone 5 1136-by-640 Galaxy 1280 x 720 Galaxy S4 1920 x1080
  17. 17. Android Xoom 1280 x 720Galaxy SIII 1280 x 720 Selecting a Size Pixels & Aspect Ratio Droid 960 x 540 Kindle Fire 7 1024 x 600 Galaxy Note 2 1280 x 720
  18. 18. Android Xoom 1280 x 720 Selecting a Size Pixels & Aspect Ratio iPad 4th gen + 2048 x 1536 iPad 1024 x 768
  19. 19. Amazon A Quick Look
  20. 20. Amazon Windowshop
  21. 21. Discover Look & Play
  22. 22. User Interface | UI
  23. 23. Web Design in 2015
  24. 24. Responsive Design Desktop Tablet Phone
  25. 25. getskeleton.com
  26. 26. GetBootStrap.com
  27. 27. GetBootStrap.com
  28. 28. GetBootStrap.com
  29. 29. GetBootStrap.com
  30. 30. GetBootStrap.com
  31. 31. foundation.zurb.com
  32. 32. Samples A Quick Look
  33. 33. Design for Flexibility
  34. 34. Define a Process
  35. 35. 3 Key Factors 1. Audience 2. Technology 3. User Stories
  36. 36. Mobile Factors
  37. 37. Form Factors
  38. 38. Bandwidth
  39. 39. Bandwidth
  40. 40. Input Mechanism
  41. 41. Context
  42. 42. Sketchingwhere ideas begin
  43. 43. Visual Thinking
  44. 44. Adobe IdeasEvernote Skitch
  45. 45. Tools
  46. 46. Chrome Developer Tools
  47. 47. initializr.com
  48. 48. Testing
  49. 49. Test on Mobile − iOS 7.x - 8.x − Android 4.x - 5.x − Windows 8 − Tablet vs Phablet vs Phone − Portrait vs Landscape Test on Windows 8, 7, Vista, XP - Internet Explorer 9, 10, Spartan - Firefox 28 + - Chrome 35 +
 Test on OS X − Safari 7, 8+ − Firefox 28 + − Chrome 335 + 
 Testing Code
  50. 50. BrowserStack.com
  51. 51. creative.adobe.com/products/reflow
  52. 52. tv.adobe.com/show/adobe-edge-reflow/
  53. 53. Experiment experiment Adobe Edge Reflow creative.adobe.com/ products/reflow GetBootStrap.com Play / Test HTML Content Chrome Browser View / Developer/Developer Tools CanIUse.com Quick Browser Compatibility initializr.com Setup of Template / HTML / JS
  54. 54. ResourcesTo help you grow. I never look back, it only distracts from the now ~ The Incredibles
  55. 55. CodeSchool.com
  56. 56. CodeSchool.com
  57. 57. w3schools.com/bootstrap/
  58. 58. html5rocks.com
  59. 59. lynda.com
  60. 60. CaniUse.com
  61. 61. CaniUse.com
  62. 62. Sencha.com
  63. 63. POP - Prototyping on Paper | iOS App for Rapid Prototypes
  64. 64. RESPONSIVE WEB DESIGN by ETHAN MARCOTTE
  65. 65. smashingmagazine.com
  66. 66. Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro

×