wordpress in higher ed - designing a multi-device wordpress course site: a case study
DESCRIPTION
Regardless of the device ― smartphone, desktop, tablet ―today’s networked learners deserve a great user experience. Based on his first-hand experience of creating multi-device course companions for both his university and continuing studies courses, Paul will guide you through some of his key learner experience design insights and approaches. During the session he will also provide a guided tour of a multi-device WordPress 3.6 implementation for his university course on user interface design at Simon Fraser University, publicly available at http://cmpt-363-133.hibbittsdesign.com/TRANSCRIPT
![Page 1: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/1.jpg)
Designing a Multi-device WordPress Course Site
Paul D Hibbitts @hibbittsdesign
A case study, presented for WordPress in Higher Ed
![Page 2: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/2.jpg)
How many mobile devices do you use daily?
![Page 3: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/3.jpg)
Why use WordPress for multi-device learning?
![Page 4: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/4.jpg)
Strengths of WordPress (to me) ! Learning – Discussions (Commenting and add-on Forums) – Networked learning (Blogs + RSS, Twitter, etc.) – Collaborative (Ratings, User Levels, etc.) – Mix of public and private (via log-in and shortcodes)
! Platform/UI – Huge, and welcoming, community – Support for a wide range of plug-ins – Embedding of third-party objects, via HTML – The easy “hackability”of PHP
![Page 5: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/5.jpg)
Options for multi-device delivery of WordPress (course) sites
![Page 6: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/6.jpg)
![Page 7: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/7.jpg)
![Page 8: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/8.jpg)
Responsive Web Design (RWD)
http://www.paulolyslager.com/responsive-design-hype-solution/
![Page 9: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/9.jpg)
Responsive Web Design ! Content/interface universal for all devices ! One source of content, presented differently ! Key elements – CSS media queries – Fluid grid layouts – Flexible images and media
![Page 10: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/10.jpg)
![Page 11: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/11.jpg)
![Page 12: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/12.jpg)
My Favorite Framework for WordPress – (Twitter) Bootstrap
! Grid-based layout ! Support for responsive design ! Interface components (e.g. tabs) ! Javascript snippets (e.g. dialog boxes)
![Page 13: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/13.jpg)
Are you currently supporting multi-device friendly WordPress course sites? If so, how?
![Page 14: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/14.jpg)
Multi-device delivery is now (pretty) easy, but doing it well is not
![Page 15: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/15.jpg)
Multi-device Course Site Challenges/Opportunities
! In-context learning ! Design process ! Student expectations
![Page 16: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/16.jpg)
How Might “Mobile Learning” be Re-defined in a Multi-device World?
! Ubiquitous ! Situational ! Connected ! Personal
![Page 17: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/17.jpg)
Multi-device Experience Goals ! Conceptual and visual consistency ! Content and functionality parity ! Seamless task transferability ! Think ecosystem, not isolated devices ! Optimize physical interactions on every device
![Page 18: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/18.jpg)
Multi-device Learner Experience Goals
! Engaging ! Organized ! Relevant ! Appealing
![Page 19: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/19.jpg)
Time for Questions or Comments
! What we’ve covered so far – Why use WordPress for multi-device learning? – Multi-device support is now easy,
but doing it well is not – Multi-device course site challenges/opportunities – “Mobile Learning” in a multi-device world – Multi-device experience goals – Multi-device learner experience goals
! Coming up – A guided tour of a multi-device WordPress site
![Page 20: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/20.jpg)
A guided tour of a multi-device WordPress course site...
http://cmpt-363-133.hibbittsdesign.com/ (built with WordPress 3.6)
![Page 21: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/21.jpg)
![Page 22: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/22.jpg)
![Page 23: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/23.jpg)
![Page 24: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/24.jpg)
![Page 25: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/25.jpg)
![Page 26: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/26.jpg)
![Page 27: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/27.jpg)
![Page 28: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/28.jpg)
![Page 29: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/29.jpg)
![Page 30: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/30.jpg)
![Page 31: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/31.jpg)
![Page 32: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/32.jpg)
![Page 33: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/33.jpg)
![Page 34: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/34.jpg)
![Page 35: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/35.jpg)
![Page 36: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/36.jpg)
![Page 37: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/37.jpg)
![Page 38: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/38.jpg)
Next Steps ! Try out a free responsive WordPress theme – github.com/olefredrik/foundationpress – 320press.com/wpbs/
! Learn more about the Bootstrap Framework – getbootstrap.com/2.3.2/ (version 2.x) – getbootstrap.com/ (version 3.x)
! Learn more about multi-device design – lukew.com/presos/preso.asp?28 – blog.teamtreehouse.com/beginners-guide-to-
responsive-web-design
![Page 39: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/39.jpg)
Plug-ins That Might be Helpful ! Broken Link Checker ! Browser Specific CSS ! Category - RSS widget
menu ! Countdown Timer ! Dave's WordPress Live
Search ! Floating Menu ! Hide Admin Bar From
Non-admins
! Logged in User Shortcode
! Multi Rating ! My Calendar ! Remove Dashboard
Access ! Sidebar Login ! Simple:Press ! User Specific Content
![Page 40: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/40.jpg)
Thank you! Any questions? ! Contact Info – Web: paulhibbitts.com – Email: [email protected] – Twitter: @hibbittsdesign – LinkedIn: linkedin.com/in/paulhibbitts
! CMPT-363-133 Course Companion – cmpt-363-133.hibbittsdesign.com – Google Chrome web app: bit.ly/cmpt363chrome
![Page 41: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/41.jpg)
![Page 42: WordPress in Higher Ed - Designing a Multi-device WordPress Course Site: A Case Study](https://reader033.vdocuments.us/reader033/viewer/2022060110/555eb4b8d8b42a902e8b58b9/html5/thumbnails/42.jpg)
Chrome App Launcher
http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html