A quick introduction to Panaviscope
The idea behind Panaviscope is to facilitate communication between design and users. Not designers and users. Design and users.
This will be achieved with the help of a checkbox-only form that you will make available somewhere on your website (let's call it the "customization form") and a small, easy-to-use Panaviscope file that you will soon be able to download from this site. The whole approach aims to be very user-friendly and unobtrusive, and even people with little coding knowledge should be able to use Panaviscope (as long as you know how to build an HTML form, you should be ok).
The checkboxes selected by users through the customization form will become CSS classes injected into your mark-up. Your design will then be able to adapt to the users' wishes using those classes. If it helps you understand what Panaviscope does a little better, you can think of it as some sort of Modernizr for humans.
How it will work (tell me more)
- You will create a checkbox-only form containing as many options as you wish. Each checkbox name can potentially become a css class.
- This form will be sent to the Panaviscope website (or not: see below). The user will immediately be redirected to your website. The user settings will be stored in a cookie. The whole process is completely invisible for the user.
- The checkboxes ticked by your user will now become classes added to your
<html>tag. You will use a panaviscope.js file and/or a panaviscope.php file (both will be available for download on this site) to respond to your user's wishes.
And that's all.
It's still not clear; show me some code
Consider this bit of the customization form available on The Pastry Box Project:
<label for="hide-avatars">Hide the avatars.
<input type="checkbox" name="hide-avatars" id="hide-avatars">
</label>
If a user checks the "hide avatars" option, a class named "hide-avatars" will be added to the <html> tag of the site. The Pastry Box stylesheet, with the help of specificity, then uses this class to react in line with the user's decision:
.thought-content {
...
}
.hide-avatars .thought-content {
...
}
The panaviscope.php file would typically be used as follows (quick and dirty examples):
/* Include the panaviscope.php file */
/* Instantiate the $panaviscope object */
/* That's all you will have to do to get all the features of panaviscope working server-side */
require_once 'Panaviscope/Panaviscope.php';
$panaviscope = new Panaviscope();
...
/* check if a user has submitted settings (if a panaviscope cookie exists) with isAware() */
/* if yes, inject user's decisions with fillClass() */
<html<?php if($panaviscope->isAware()): ?> class="<?php $panaviscope->fillClass(); ?>"<?php endif; ?> lang="en">
...
/* check if a user has submitted settings (if a panaviscope cookie exists) with isAware() */
/* if yes, include panaviscope.css (the css file with user-aware rules) */
<?php if($panaviscope->isAware()): ?>
<link rel="stylesheet" type="text/css" href="panaviscope.css?v=1">
<?php endif; ?>
...
/* check if a specific class has been injected with isClass('class-name') */
/* show avatars only if we don't find the hide-avatars class */
<?php if(!$panaviscope->isClass('hide-avatars')): ?>
<p><img src="..." alt="..."></p>
<?php endif; ?>
As you can see, the panaviscope.php file lets you do nice things like not downloading images, which may be useful bandwidth-wise for users checking a website frequently on a mobile phone. The panaviscope.php file can make it incredibly easy for a user to minify the weight of a website, and keep only what she needs from your design.
Incredibly easy.
A few final words
Obviously, all this will be absolutely free and open-source, and you won't even need to have an account or send your customization form to the Panaviscope website if you don't want to. Thorough documentation will explain how you can bypass this process. And doing so will be very, very easy.
The good thing about communicating with the Panaviscope website, though, is that your user choices will be stored in a database (no IP address, no personal data, just the form that has been submitted) and parsed for you so you know how many times your site has been customized and what exactly your users choose to do with the options you gave them.
Tempting, isn't it?
And what now?
Invitations will be sent by the end of January for Beta testing. No need to ask for them. Only a dozen of people will be testing the project, and the site should open its doors quickly thereafter (in February).