1. PSU Web Conference '12 Erica Hollis The Future is mobile Responsive Web Design Mobile Planning JQuery in World Campus Usability Testing Gamification Making maps with Mapniker

2. The Future is Mobile ● Half of Americans have a smartphone today ● This is growing very quickly ● Mobile use predicted to surpass desktop use by 2015 ● Can do interesting things with mobile – With video: http://www.youtube.com/watch?v=h2OfQdYrHRs http://www.youtube.com/watch?v=h2OfQdYrHRs

3. Responsive Web Design ● Responsive web design is applying the best strategies and layouts for each device it may be accessed from ● Don't assume user's intent – Have the same content on regular & mobile site – Nice to have a similar experience across platforms ● Fluid content: http://www.ucsd.edu/http://www.ucsd.edu/ ● Structured Content: Think about what content should be on top

4. Mobile Planning ● People are using mobile on the move and stationary ● Allow for faster page loads by sending less data to mobile users – Send less after initial call ● Cache ● Use javascript & client side code – Soap vs Rest → rest is lighter

5. Mobile Design ● Responsive web design for full site experience – But, this could lead to excessive scrolling, versus just having to zoom in ● Dashboards are efficient for quick lookups – Could have a toolbar on mobile site that links to a dashboard (allows for both site & dashboard options) ● Can look up phone capabilities on WORFL (xml file with every phone’s specifications and capabilities) and modify layout accordingly – Does phone allow for css, javascript, etc.

6. Jquery for World Campus ● http://bit.ly/cmstoys http://bit.ly/cmstoys ● Progressive Enhancement philosophy – start with basic html & css that everybody can access, then add enhancements for a richer experience for some users ● enhance.js – runs javascript based on broswer capabilities ● Visualize.js & FLOT – jquery plugins for creating graphs & charts

7. Usability Testing ● It can be easy to test the usability of a website ● Usability testing is testing if it works like it should (not like a focus group) ● Easy method: – 3-5 people from each group you want to test – Use a microphone and screen capture software – Ask testers to “think aloud” as they navigate the site – Have a script to read from – can allow free browsing and ask them to do specific tasks

8. Gamification ● http://www.slideshare.net/ColB/game-on-how-games-are-changing-life-the-web- everything http://www.slideshare.net/ColB/game-on-how-games-are-changing-life-the-web- everything ● Most people play video games – Words with friends, World of Warcraft ● Gamification – using game elements to motivate, engage, and enhance the user's experience ● Playing beats working!

9. Gamification Elements ● Challenge – people like competition ● Progression – levels (profile complete status) ● Rewards (receive points for activities)

10. Mapniker ● Make your own custom maps – Use imput files (census bureau has large free open collection) – Use xml and scripting language to get your own custom map image – Easy to use – Quick to load since it's just an image (don't have to wait for google map to load)

11. Mapniker Example Made this map in 5 minutes from a shape file (a geospatial vector data format for geographic information systems software - wikipedia)

12. Mapniker Example [NAME10]../data/42_Pennsylvania/tl_2010_42_county10.shp

13. Mapniker Example -Use a python plugin #!/usr/bin/env python import mapnik m = mapnik.Map(1024, 768) mapnik.load_map(m, 'PA.xml') m.zoom_all() mapnik.render_to_file(m, 'PA.png') print "Done!"