Getting Closer to a Webby Curriculum

Building better web literacy curriculum means connecting interactivity and accessibility, online and off

With MozFest right around the corner and proposals due next week, now is a great time to unleash our creativity and re-imagine how to teach and learn about the web. How do we break out of old habits and take advantage of new opportunities for teaching and learning online and off? How do we develop an interactive curriculum that invites deep engagement with web literacy in accessible ways?

What do I even mean by interactive? Aren’t our offline activities interactive in and of themselves? Don’t people also make and remix stuff online using our lessons, resources, and tools?

To answer the latter: yes and yes. Participatory learning remains a hallmark of our curriculum and it differentiates us from programs that emphasize seat time and rote reproduction.

There is already a high level of interactivity to what we do online and in our face-to-face trainings, large-scale convenings, and Mozilla Clubs sessions around the world.

What I mean by here “more interactive” is “more webby.” How do we take advantage of the affordances of the web to make our curriculum

  • Easier to “read” online?
  • Easier to deliver to different communities?
  • Easier to connect to the other things that the web does really well?

To make our curriculum easier to read online, we’ve developed a new curriculum template that uses sidebar navigation to let you flip horizontally between parts of a lesson instead of scrolling vertically through it. We’re still working on

  • Styling different kinds of information differently.
  • Cutting copy to fit in screen-sized chunks
  • Incorporating more audio-visual and interactive media.

Though there’s work to be done, the framework is there to deliver curriculum that feels more like a slide deck or something swipeable than something that demands you scroll down until you find that one section you want. The infinite canvas inspires a lot of creativity, but it’s not always the best model for lesson plans. Check out some of our recent curriculum modules and share any feedback you have to help us improve the template’s webby features further!

To make our curriculum easier to deliver in person, we’ve started thinking about how to use different stylesheets for different audiences around the world. In response to the input of community members like our Women and the Web Regional Coordinators in Kenya and South Africa, we’re working to write not only printer-friendly stylesheets for offline delivery, but also low-bandwidth and mobile stylesheets that make the curriculum less time-consuming to download, less costly, and more readable in communities that experience the web mostly on mobile devices or that have limited access to data. There’s no reason not to use browser-detection features and user preferences to customize how we deliver curriculum to different communities throughout our network. Delivery can be more webby, too.

Finally, to connect our curriculum with the other things that the web does really well, we’ve begun using little bits of time here and there to create online games that teach the web. These are inspired by “explorable explanations” created by designers and developers like Nicky Case. The big idea is to develop and share interactive experiences that make parts of a webpage’s code visible on the page itself as you play. The code becomes part of the game. So far we’ve built a color-picker snake game that lets you read the codes used behind the scenes to color the snake and background of the page. (There’s also a design challenge to go with it.)

Play the game at http://chadsansing.github.io/color-picker-snake-game/index.html.

We’ve also started developing a simple bridge-building game where you try to position a bridge across a gap that lets your avatar (we call it a “train”) cross the screen and complete the level. This game uses the different styling and positioning decisions you make on the webpage to change the layout of each level. Please note that we’ll probably break this one several more times before we get it right.

Try the prototype at http://chadsansing.github.io/bridge-builder-game/index.html.

These are rough, early experiments in combining familiar game mechanics with (sometimes) unfamiliar web literacy skills. What do you think of these prototypes? What might other “early win” games along these lines be? Would you use these with learners?

More generally, when I think of more ways we could make our curriculum more webby, I think about

  • Using .gifs in place of static images and blocks of text like we do in this smartphone web literacy lesson from Kenya.
  • Embedding more inline examples of technical concepts from platforms like CodePen and JSFiddle.
  • Developing curriculum about the “post-browser” digital footprint. How should we think of our online identities when they’re spread across multiple apps and devices? How do youth think of this differently from adults who grew up with the browser?

How do you make teaching and learning more interactive where you are? How can we team up together to nudge curriculum further along? How can we help each other and other educators find the time and resources to do design similar, accessible experiences alongside their learners?