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.
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. 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.
15. Selecting a Size
Pixels & Aspect Ratio
iPhone 4
960 x 640
iPhone
480 x 320
iPhone 5
1136 x 640
16.
17. 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
18. 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
19. Android Xoom
1280 x 720
Selecting a Size
Pixels & Aspect Ratio
iPad 4th gen +
2048 x 1536
iPad
1024 x 768
61. 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