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

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:

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: ● Structured Content: Think about what content should be on top

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

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.

Jquery for World Campus ● ● 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

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

Gamification ● everything 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!

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

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)

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

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

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!"