Presentation from Web Teaching Day 2014 - Sharing some of the new and upcoming changes to teaching front-end web development at Manchester Metropolitan University. Part of the #webteachingday hosted at MMU. A 'self-help' group for those teaching aspects of web design/development.

2. Checklist
• Health & safety
• Wifi
• Programme
• #webteachingday
• Welcome

3. Agency Ready & other things

4. About
• Teaching standards based, accessible, usable web design since
1996 in partnership with Jonathan Willson
• Originally in Library School
• Now, technology in Humanities
• BSc Web Development (plus other routes inc. new MMJ)
• 2016 hoping Digital Marketing & Web Development

5. Things done/doing
• Level 4
– HTML5 – semantic elements?
– Free Treehouse
– Single column layout
• Level 5
– Agile sprints for group work
– Responsive / frameworks
– Single/multiple column template
• Level 6
– UXD Unit
– Agency Ready for 2014/15?

6. Level 4 - HTML5 – semantic elements?
Q. Do we introduce HTML5 semantic elements in the 12 weeks
basics?
A. At the moment, no.

7. Level 4 - Single column layout
Q. What on earth is the correct CSS for a basic, single column
layout?
A. What?
 Font size?
 Classes / IDs?
 Responsive images?
 Responsive containers? Max width?
 Rems?

8. Level 4 - Free Treehouse
• Free access for L4
• Lynda.com - MMU site licence starting soon

9. Level 5 - Agile sprints for group work
• Client brief to site launch
• Working in groups
• Weekly sprint meetings with tutors
– What did you achieve last week?
– What do you intend to achieve this week?
– While you are with us, AOB?

10. Level 5 – Responsive / frameworks
• Guest speaker – Liam Richardson of Sigma
• Foundation Framework exercise
• 5000 plus lines of code
• Ban frameworks at Level 5?
• Ban CSS resets?

11. Level 5 – Single/multiple column template
• Responsive framework from ground up
• http://www.adamkaplan.me/grid/
• Plus normalize
• Plus mobile first
• Plus L4 single column goodies

12. Level 6 – Agency Ready
• Chance for the student 'to get agency ready'
• Build a professional portfolio
• Ever changing content – SASS, Versioning, Responsive, HTML
emails, Frameworks, SEO, Advanced HTML5 etc.
• Industry advice, clients, billing, working in an agency
• Finale - Portfolio show with employers

13. Level 6 - UXD
• Shared by three degree routes
– BSc (Hons) Web Development
– BSc (Hons) Digital Media and Communications
– BA (Hons) Digital Media / Marketing
• Not all students want to be UX pro’s

14. UXD in the curriculum
• UX taught as part of web design from year 1
• Concepts and practice of web accessibility and usability
introduced in year 1
• User journeys, user tasks, card sorting, personas, prototyping,
scripted usability testing session all introduced in year 2

15. Approach to UXD
• A new approach to teaching UX
• Very much 'hands on'
• Very much based on current industry practices
• What do you guys actually do?
– We asked people (including @lizziedyson)
– We gathered a list of key tasks
– We gathered a list of common methods and practices

16. The programme – 12 weeks
• Expert review, heuristics, ethnographic techniques
• Successful surveys
• Planning and conducting usability testing
• Usability Lab testing
• Guerrilla Testing
• Eye Tracking in usability testing
• Remote testing
• Using Analytics for UXD
• Pitching and presenting your findings

17. Our guests
• Planning and conducting usability testing – Chris Collingridge
@ccollingridge, Sage
• Guerrilla Testing - Chris Bush @suthen, Sigma (last minute – Barry Briggs
@quiffboy, Amaze)
• Eye Tracking in usability testing - Guy Redwood @eyetracking,
SimpleUsability
• Remote testing – Userzoom - Lee Cooper @UserZoom and WhatUsersdo –
Lee Duddell @whatusersdo
• Using Analytics for UXD - Paul Carysforth @paulcarysforth, Amaze
• Pitching and presenting your findings - Jane Murison @mewroh, BBC

18. Task 1 – Expert Review
• Group selects a web site
• Site approved by tutors
• Individuals undertake
– Cognitive walkthrough
– Heuristic evaluation
• Report back to group, share findings and confirm that choice of
web site is suitable
– Two groups changed to a different site

19. Task 2 – Guerrilla Testing
• Working as a group
• Define issues to focus on
• Prepare tasks, user types, consent form
• Select tech (laptop, tablet, phone)
• Screen capture, film, notes
• Undertake sessions 'in the field'
• Review findings

20. Task 3 – Final Testing Method
Choice of:
• Eye tracking [Tobii eye tracker]
• Lab based user testing [Morae recorder]
• User survey [UserZoom]
• Analytics [access required]
• Remote User Testing [UserZoom, WhatUsersDo]

21. Matt's movie
• Example of student submission
• http://youtu.be/AtUD9wMB0rk