2014 oten online learning support: responsive design
DESCRIPTION
This powerpoint supports a range of workshops with examples of responsive design layouts and styles.TRANSCRIPT
![Page 1: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/1.jpg)
Responsive content designMaking our teaching and learning content accessible in all devices: mobiles, tablets, computers
Image source: Microsoft Clipart
Image source: Microsoft Clipart
![Page 2: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/2.jpg)
![Page 3: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/3.jpg)
![Page 4: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/4.jpg)
![Page 5: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/5.jpg)
![Page 6: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/6.jpg)
![Page 7: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/7.jpg)
Mobile view: tables are stacked
![Page 8: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/8.jpg)
Mobile view: promo box is repositioned
![Page 9: 2014 OTEN Online Learning Support: Responsive design](https://reader033.vdocuments.us/reader033/viewer/2022061206/54776ec5b4af9f29558b45ea/html5/thumbnails/9.jpg)
So, how to check your content is responsive?
Resize your browser to 1/3.
Content responds? Excellent!
Image source: Microsoft Clipart