Weird Wide Web is a pencil-and-paper role playing game where the characters are web designers and implementors.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Weird Wide Web

Weird Wide Web image


Trolls have been harassing the town of Copperplate for too long. You and your friends have decided to do something about it. Grabbing up your palette of colours, your rusty photoshop, and your +1 blade of data visualization, you team up with a Hipster Scripter, a Geek Tagger, and a Goth Stylist to rid the community of this troll menace once and for all. Little do you know what dark Open Sourcery lies behind this seemingly straightforward flame war.

Welcome to the world of Onlinia.

The Web shapes the world and makes the world, and many strange things exist in The Web: ferocious Viral Memes, #C72 Jellies, Spam Bots, and exotic beasts. You are one of the creators and maintainers of The Web, helping to tame the frontiers, to shape the experiences, to bring Usability to the masses, and (hopefully) bring a bitcoin to your pocket doing so, or even win big with the great payday: The IPO.

As a maintainer of The Web you take on the role of one of the classes who care for the web: the holy Designer who works with colour, image, and layouts of great power, the Stylist who nimbly separates the form from the function (and pockets the form), the Scripter who wields scripts that can change the very content of The Web, or the sturdy Tagger strongest and bravest of all, who can battle even the fiercest of Infinite Loops with his mighty HTML5 tags. There are also sub-classes which straddle these realms of influence.

Character Creation



Ability to know, use, abide by, and leverage the standards (both de jure and de facto) of The Web.


Strength of character and resolve enough to persevere in the face of deadlines, crises, and IE6.


How fast you can come up with solutions to problems, iterate on new releases, and turn the company around a failing business model towards sustainability, without screwing up completely?


Measures your ability to find the information you're looking for quickly. Not just raw Google searches, but a rich archive of stored links, code snippets, examples, tutorials, and generators.


How readable is your code? How well do the colours in your design work together? How concisely can you write a specification? This is a measure of your good taste and ability to be guided by experience and a deep knowledge of What Is Right and Good.

Whuffie (or should this be experience?)

This is your Google Juice, your Slashdot karma, your Advogato reputation, how well known and trusted you are in the community, and therefore how much you are able to lead and to be believed. A high whuffie can be more important and useful than having a large bank account. Use fame to raise a flashmob army.

Other options:

Health as battery life (vampires drain your battery?). Hit locations: CPU, hard drive, RAM, monitor, keyboard? Recharge to get health back.

Saving Throws

From time to time your character will need to roll to avoid some fate.

vs. Firing

Rolled for both contract and employee workers when a deadline is missed or mass layoffs occur. Contractors roll at -2.

vs. LOL

vs. Distraction

vs. Seeing what cannot be unseen



The fighter analogue, master of HTML5 tags.

Subclasses: Enabler (Paladin) who promotes accessibility


The cleric analogue, master of images, colours, and layout.

Subclasses: Usabiliteer (Druid)

OR: Designer could be illusionist


Thief analogue, master of CSS.


Stylist Special Abilities
Detect hidden elements
Disable User Tracking


Magic User analogue, master of Javascript

Subclasses: Flasher (Illusionist), Wonk (Researcher), Open Sourceror (server-side)


Web Monkey (multiclass)

A Web Monkey can take levels in more than one class, splitting experience between them as she chooses, but requires twice the experience in each class to progress to the next level.

Other potential classes

Search Optimizer, Content Creator, Engineer, Monetizer, Information Architect, Font Wrangler, Wireframer


Web developers come from many species in the world of The Web.


The elf of The Web world, focussed on style over substance. It's all about who they know, not what they know.


Like dwarves, focussed on a task and a theme to the exclusion of all else. There are many different kinds of Geeks: Music Geeks, Programming Geeks, Gaming Geeks. All can be distinguished by their long attention spans on the subject of their interest, and their complete disinterest (to the point of rudeness) for anything else.


Well-rounded humans, who might want to go home to their families at 5pm, or even have friends outside of work.


Half-trolls are perfectionists who don't tolerate fools or sloppy thinking. They are cantankerous and can be hard to work with, but they are usually right and are valuable on a team, especially when dealing with tricky situations like security or internationalization.

Hippie (hobbit)

Punk (goblin)

Goth (dark elf)


Left Aligned

Right Aligned


CEOs, legal department, Enablers.

Ragged Right

Necromancers, thieves, pirates, viruses.


Weapons and Equipment

While a Tagger is unafraid to fight with simple divs and spans, she has a variety of other weapons at her disposal. The Tagger is also the only class that can use every tag (including MathML and SVG), and can customize every tag with attributes, although there are limits to her use of the style attribute and on* event handling attributes.


Security, passwords, public key cryptography





Design Spells

A Designer's spells come to them from their faith in their tools, whether Photoshop, In Design, DreamWeaver, Viso, etc.

First Level Spells
Logo of Recognition
Schwag: T-Shirt

Script Spells

A Scripter's spells come in several broad categories. Some scripters choose to specialize in a category of spells, gaining bonuses with those spells (and penalties when using spells outside her specialization), while others are generalists who receive no bonus or penalty for any spell.

Categories of spells include: DOM, AJAX, Canvas, Forms, Functional, Core, UI, and Meta.

First Level Spells

####### Toggle Class

####### Read Value

####### Reverse List

####### Rick Roll

####### Double Rainbow

  • ROFL Curse
Peanut Butter and Jelly Time

Cause opponents to be stuck in peanut butter and jelly and has to wade through it, cutting their movement in half.

Autotune Remix

Reduces damage from an opponent and does damage to them.

Caramella Dansen

Causes target to be forced to do the Caramella Dance (to the music). Target cannot move or act normally and everyone in range has save vs. distraction or be annoyed.

Religions / Cults

Flying Spaghetti Monster

Cult of the Dead Cow



Also: Search Engines as Gods





See XKCD maps. Large sites are countries (domains). Blogs are homes.

In Twitter people live in tiny treehouses, with Fail Whales in the sky. Danger of data firehose.

Tutorial sites are schools.

Smaller sites are buildings, abandoned sites are ruins suffering linkrot and other hazards, databases are dungeons.

Information highways.

Special boats are needed to cross torrents.



But first you have to make it stop laughing.


The equivalent of walking


Normal transport


Only useful for short journeys


For travelling across the seas



The 4Chan is a dangerous type of troll, which roams in large packs.

Accounting Troll

See these Dilbert strips:


A chaotic good troll-mouse, dangerous in large numbers.

Badger badger badger badger

Cat on a roomba in a sharksuit chasing a duckling

Dramatic Chipmunk

Shapeshifter Meme (like keep calm and carry on)

Fail Whale

Exploding Whale

Numa Numa

Awkward Turtle



Spiders aren't harmful, but they do reveal what you are doing, so they should be avoided if you're doing anything sneaky. Spiders are attracted by fame, so the more famous you are (whuffie) the harder it gets to avoid spiders. The Robots.txt spell can be used to hide from some spiders.

Spiders on Drugs

Stray Tag

Script Bug

#C72 Jelly

Spam Bot

Viral Meme

#000 Pudding

#CCC Ooze

#0F0 Slime


Zombie Processes

Infinite Loops

Human Resource

A drone with no life of their own, controlled by a Human Resource Administrator.

Human Resource Administrator

A type of necromancer who controls the Human Resources.

#FF0 Mould

Blink Tags

#826644 Hulks




Flame Bait

Script Elemental

Style Elemental

Canvas Elemental

Form Elemental

Captcha Golem


Heated debates that drag-on, also known as flame wars [Note: promote Flame War to a first class concept]: Mac vs. PC, vim vs. Emacs, Twilight vs. everyone else. If you curse too much you turn into a dragon.

Skeleton Pages

Star Wars Kid


Zombie Process


  • Popup site prison
  • Crash trap
  • Overload trap
  • Beachball trap
  • Mouse trap
  • Overflow trap
  • Fax trap
  • Mentos and Diet Coke

Random Events and Hazards

  • PC Load Exec
  • Linkrot
  • Multiple languages