Interactive Themes

So you may wonder why we called it Personas Interactive.

If you were go to the Brand Thunder Gallery, you would see what we specialize in - creating customized browser experiences for different sports teams, websites, musicians and more.

These browser experiences have evolved over the years in their design, their technology and even their name. But regardless of the technology change, these browser experiences always required the installation of a Firefox add-on and the restart of the browser for every one that you wanted to install.

One of the reasons we created Personas Interactive was to address this issue. With the advent of Personas in Firefox 3.6, we saw the opportunity to take our browser experience to the next level. So one of the core features of Personas Interactive is Interactive Themes.

Interactives Themes take the Enhanced Personas we talked about last time and add interactivity like clickable logos, sidebars, toolbars, feedreaders and more. So instead of just providing people with a picture of your website or brand, you can provide a way for them to connect with you in the browser.

Enhanced Personas

In explaining exactly what a Persona was in my last post, I mentioned that a Persona contains two images - a header and a footer. I also indicated that these images are very large - 3000 pixels wide. You may wonder why that is. Personas is designed to do one thing; take an image and put it in the upper right corner of the browser. It doesn't resize or scale the image. If you resize your browser very wide, you just see more of the image on the left hand side. That 3000 pixels number is a completely arbitrary number that is designed to be the maximum you will resize your browser.

This architecture creates problems.

  • The file sizes of the images can be very large.
  • If you have a repetitive image, you have to cut and paste it to make it 3000 pixels wide.
  • If you want to use an existing image, you'll have to do something to convert it to 3000 pixels wide.
  • You can't guarantee that anything appears in the upper left corner.
  • You can't have more than one background image.

All of these problems have already been solved by CSS, but none of the CSS to do anything to background images is available in Personas. That's where the Enhanced Personas feature of Personas Interactive comes in.

Enhanced Personas adds additional attributes to the Personas JSON that gives you all the things that CSS backgrounds have to offer. This includes multiple background images! Here are the attributes we've added:

backgroundImage
Specifies the URL of an image or multiple images that will be used for the background. Multiple images are separated by a comma. The images are drawn from right to left, so the left most image appears on top. We aren't using the actual CSS syntax here, so don't put url('...') around the images.
backgroundPosition
Specifies the position of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundRepeat
Specifies the repeat of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundSize
Dpecifies the size of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundColor
Whereas accentcolor in the original Personas specification is used for both the titlebar and the background of the browser, we allow you to specify just the background color. It is never used for the titlebar. If you specify both a backgroundColor and an accentcolor, accentcolor is used for the titlebar, and backgroundColor is used for the background of the browser.

textShadow
One of the other areas that causes problems with Personas is the area of text shadows. We've provided an additional attribute to let you control the text shadow. Personas determines the color of the text shadow to use for your Persona by computing the luminance of the textcolor specified in your Persona.

let luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

If the luminance is less than or equal to 110, it makes your text shadow light, otherwise it makes your text shadow dark. We've made textShadow an attribute that you can specify, and you can give it three values: dark, bright or none. You can experiment with these three values to see which one makes your text look good on your Persona.

Summing it all up

So what does all this give us? The ability to create a Persona that takes full advantage of CSS. If you hover over the preview images below with Personas Interactive installed, you'll see examples of Enhanced Personas in action. Each of these Enhanced Personas has an image on the left, an image on the right and a repeating image for the background. If you install them, you can resize the browser and see that the images stay in both corners of the browser. I've deliberately placed breaks in the background image so you can see the repeat. You'll also notice that I've used a different text shadow option for each of the Personas. See if you can figure out which value I used.

Enhanced Persona Demo 1attachPersona(document.getElementById("enhancedpersonademo1-preview"));Enhanced Persona Demo 2attachPersona(document.getElementById("enhancedpersonademo2-preview"));Enhanced Persona Demo 3attachPersona(document.getElementById("enhancedpersonademo3-preview"));Enhanced Persona Demo 4attachPersona(document.getElementById("enhancedpersonademo4-preview"));

Enhanced Persona Demo 5attachPersona(document.getElementById("enhancedpersonademo5-preview"));Enhanced Persona Demo 6attachPersona(document.getElementById("enhancedpersonademo6-preview"));Enhanced Persona Demo 7attachPersona(document.getElementById("enhancedpersonademo7-preview"));Enhanced Persona Demo 8attachPersona(document.getElementById("enhancedpersonademo8-preview"));

Here are some other things to keep in mind with Enhanced Personas.

backgroundImage is a required attribute. This means that even if you use the other attributes, if backgroundImage isn't specified, they won't be honored. The only exception to this is textShadow.

You can create an Enhanced Persona that works with Firefox out of the box. Just specify both a headerURL and a backgroundImage. Personas Interactive users will get the Enhanced Persona.

For our next installment, we're going to talk about the hallmark of Personas Interactive, Interactive Themes and Interactive Personas.

This is part three in my series about Personas Interactive from Brand Thunder. If you missed the first two, they are Introduction to Personas Interactive and What is a Persona?

What is a Persona?

After I introduced Personas Interactive, I indicated that my next topic was going to be Enhanced Personas. As I was writing that post, though, I realized that I was putting the cart before the horse. Before I explain how we've enhanced Personas, I need to give more detail as to how you can put Personas on your website. Then we can talk about the enhancements we've made and how you can use them in your Personas. Remember that to really see these things in action, you need Personas Interactive. You can download it from here.

So what exactly is a Persona? You probably think of a Persona as just an image that goes in the background of your web browser. But Personas are not just the images. They are also a JSON file that gives a little bit of information. Here's what a bare bones Persona looks like:

{"id":"mypersona@kaply.com",
 "name": "My Persona",
 "headerURL": "http://kaply.com/images/mypersona.png"
}

To use this Persona in a web page, Firefox introduced an attribute called data-browsertheme. To designate that an element on a web page defines a persona, you add that attribute to any element (usually an image):

<img alt="My Persona"
     data-browsertheme='{"id":"mypersona@kaply.com",
                         "name": "My Persona",
                         "headerURL": "http://kaply.com/mypersona.png",
                        }'
     src="mypersona.png"
     id="mypersona-preview">

Having the data as an attribute on the image isn't enough, though. We need to have some JavaScript that hooks everything together. Personas works by using custom DOM events to indicate when an image is previewed, installed and reset. Here's what preview looks like:

var event = document.createEvent("Events");,
event.initEvent("PreviewBrowserTheme", true, false);
document.getElementById('mypersona-preview').dispatchEvent(event);

Writing this code every time would be tedious, so I've created helper functions that do this for you. You can download them here. Attaching all the appropriate Persona events to a node is matter of calling attachPersona and passing it the node that you want to use for your Persona preview.

Now you may be thinking that it would be difficult to maintain JSON embedded in a web page, and you would be correct. What we need is an automated process to generate a Personas gallery. At the beginning of this article, I mentioned that Personas are described in a JSON file. What we want to do is store JSON files directly on our server and generate web pages that use the data contained in those JSON files. The reason for this is three fold. First, because it makes it easier to maintain, second because Personas can be updated by pointing to the JSON file directly, and third because we will use those JSON files for site specific Personas which we talked about in the previous post.

I'm a PHP developer, so the example I am going to provide is how to generate a Personas gallery using PHP. For my basic example, I'm using a top level directory with an index.php that will be my gallery and subdirectories that represent each Persona. Those directories are named for the Persona and contains a persona.json file, a PNG file used for preview that is named the same as the directory, and any other supporting images, like the background or icon. To generate a gallery item, you call the function generateGalleryItem passing it the name of the directory. Here's some PHP code that does this:

<?php
function generateGalleryItem($name) {
  $handle = fopen("$name/persona.json", "rb");
  $contents = stream_get_contents($handle);
  fclose($handle);
  $persona = json_decode($contents);
?>
 <img alt='<?php echo $persona->name; ?>'
      data-browsertheme='<?php echo $contents; ?>'
      src='<?php echo $name; ?>/<?php echo $name; ?>.png'
      id='<?php echo $name; ?>-preview'>
<script type="text/javascript">
  attachPersona(document.getElementById("<?php echo $name; ?>-preview"));
</script>

With these code examples, you should be able to get a Personas gallery working on your website.

Earlier I talked about the fact that I was giving an example of a bare bones Persona. Now would probably be a good time to talk about what else you can specify in a Persona JSON file. Personas support the following attributes which are all strings:

id
The ID of the Persona. It does not have to be of the form persona@example.com, but it is recommended.
name
The name of the Persona, as displayed in Add-ons-Themes
headerURL
The URL of the image for the header. Per the Personas specifications, this image is 3000px wide x 200px high.
footerURL
The URL of the image for the footer. Per the Personas specifications, this image is 3000px wide x 100px high.
textcolor
The color of text in the browser.
accentcolor
The color used for the background of the browser, as well as the titlebar on Mac.
iconURL
The URL of an icon to be displayed in Add-ons->Themes
previewURL
The URL of a preview image to be displayed in Addons->Themes
author
Your Name. This is displayed in Add-ons->Themes
description
The description of your Persona. Normally this is only displayed when you right click a theme and select "About", but for Personas Interactive, we've replaced the default display of "Created by" with the description.
homepageURL
A home page URL for your Persona. This is accessed by right clicking on a Persona in Add-ons->Themes
updateURL
The URL for your Personas JSON file. Firefox requires https, but for Personas Interactive, we allow http as well.
version
The version is used only when you need to update your Persona. If a version is added or is greater than the previous version, Firefox updates your Persona. This update check happens every 24 hours, similar to update checks for add-ons.

Site Specific Personas

I mentioned site specific Personas, so I might as well give you that information as well. To enable a site specific Persona, add the following code to the header of your website:

<link rel="persona" type="application/json" href="https://mydomain.com/mypersona/persona.json" />

The href points to the JSON file that describes your Persona. If you want to use a Persona from getpersonas.com, navigate to the Persona and then look at the URL. You'll see a number at the end of the URL. The format for Persona update URLs is https://www.getpersonas.com/en-US/update_check/%ID%. Just replace %ID% with the number at the end of the URL.

One other thing before I close this out. I find the site JSONLint.com invaluable for debugging my JSON. Not only can you paste JSON there, but if you put a URL to your JSON file, it will read it and check it. I can't recommend it enough.

I hope this has helped you get started adding Personas to your site. Next post - Enhanced Personas. I promise.

Personas Interactive

Brand Thunder released a new theme for the Goblins web comic today. While it's a great theme and I'm excited to have it out there, I'm more excited about how we're delivering it. Goblins is the first theme we are delivering on our new Personas Interactive platform.

Personas Interactive is a new add-on that allows us to deliver all of our interactive themes with one click in the same way that Personas works. In the next week or so, it will be available as a standalone download. Right now you can get it by downloading the Goblins theme.

But Personas Interactive isn't just about interactive themes. It provides major enhancements to Personas within Firefox and adds support for Enhanced Personas (more on that later). I'd like to take a few posts to talk about what we've done with Personas Interactive. First we're going to talk about what we've done to Personas; then we're going to talk about Enhanced Personas and Interactive Themes/Interactive Personas. We'll finish the series up by going into details about how web developers can use our new features.

Let's start with what we've done to Personas within Firefox.

We've removed the limits

Firefox currently has a limit of eight Personas. We've completely removed that limit. You can have as many Personas installed as you would like.

We've removed the limitations

Firefox prevented Personas from working with any theme but the default theme. We've removed that limitation. They don't always work right, but at least you can try.

We've removed the lock-in

Firefox uses the same permission model for Personas that it does for the installation of extensions. What this means is that if you give a site permission to install Personas, you're also giving it permission to install extensions. For this reason, Firefox does not make it easy for you to enable other sites to provide previews and host Personas. We've created a new permission model for Personas so you can give a site permission to preview Personas knowing that all they can do is preview and install Personas. Now any site can host a Personas gallery! We'll be providing more detail in the next week on how to do this or if you want to get started now, send me an email. And if you want to see this in action, check out design noir.

We've updated the look (on Windows)

Personas on Windows just don't look right. With the gray tab and the extra dark tab strip, they just don't pop like they do on the Mac. We've updated the Personas look on Windows to be more consistent.

We've given you the choice

We've added additional configuration options so that you can make your Personas look the way you want them. If you wish you could see just a little more of your Persona, add some space. If you don't want the titlebar to change color on Mac, turn it off. If text shadows make your Persona look bad, turn them off.

We've added some really cool stuff

We've enabled site specific Personas. Any website can put one line in their HTML so that people see a Persona when they viewing that site. Of course they have to ask your permission! If you want to check this out, you can load my blog with Personas Interactive installed.

In my next post, I'll be covering Enhanced Personas. The best analogy I can give is that Personas are like a bumper sticker on your browser. For the artist, Enhanced Personas give you a palette so you can size, position and repeat any number of images on the background to create a design that's exactly what you want and that resizes with the browser. I think you'll like it.

One more note - Brand Thunder brings you VERY cool themes and extensions for FREE, but each takes a team of designers and developers. Brand Thunder themes include Bing as the default search engine since our primary revenue source is our search partners, Bing and Ask, so please give them a try.

And before you ask, we're hard at work on Firefox 4 support. We hope to have something in the next few weeks.

Extensions, Personas and Jetpack! Oh, My!

As a result of Mike Connor's post, there's lots of discussion about extensions, theming, Personas and Jetpack. This is my livelihood, so I definitely have to jump in.

First, let's talk about Personas. I hate to burst everyone's bubble, but:

Personas is not lightweight theming. Personas is wallpaper.

We've had it since Windows 3.0 (may be even before). It's pretty wallpaper, but it's still wallpaper.

Lightweight theming is a different beast. Lightweight theming is the ability to theme the browser window WITHOUT theming the rest of the browser. So lightweight theming might involve changing things like browser background images (more than one), toolbar buttons, and possibly the URL bar or the tabs. I'll be a little self serving and say that everything Brand Thunder does is lightweight theming. You can see examples at the gallery.

Personas is not a suitable replacement for Firefox theming. It doesn't even come close. And looking at the designs for future versions of Firefox, Personas becomes irrelevant - there's very little browser chrome to even see the background images. (Clue to Firefox developers - make the new tab window transparent like Chrome).

People point to Personas and say "look how popular it is - people must want theming that way."

Personas' success is about marketing.

Personas is the only extension that Mozilla markets. They market it on first run pages, download pages and home pages. It has a dedicated domain. It has special privileges for being installed without the add-on security warning. It was a recommended add-on from day one. They even have a custom bundle of Firefox that includes Personas!

So please don't tell me that Personas is the future. Personas is the present. Clearly a completely new solution will be needed for future Firefox versions.

Now let's talk about Jetpack.

Jetpack is like giving me an Erector set when I used to have a Home Depot.

Let's look at the problems that Jetpack attempts to solve and see if a new programming model was necessary to solve them.

Install without restart -
If extension developers were given a specific set of APIs that they could use that didn't require restart, then extensions could be marked as "doesn't need restart" and this problem would be solved. All Jetpack does is pre-grab parts of the Firefox UI so that when things are placed there, Jetpack handles their placement, not Firefox. This could be done with any extension API. It doesn't require Jetpack.

Ease of creation -
A learning curve is a learning curve. I don't know jQuery, so Jetpack has a learning curve for me. Jetpack is simply trading one programming model for another. I've been to presentations where HTML developers were shown how extensions work and within one hour they could create extensions. Doing very interesting things with extensions might be difficult to learn, but that's why you create an API. And that API does NOT have to be Jetpack specific. Packaging can be a little tricky, but again solvable outside of the context of Jetpack.

API -
If the extension API isn't very user friendly, fix it. Isn't that what FUEL was trying to accomplish? If you want a stable API that doesn't change from release to release, create one. There's no need this API needs to be created as a part of Jetpack.

Forward compatibility -
Extensions break from release to release of Firefox. That's just a fact of life. The only way to prevent this is to give extension developers a very tiny sandbox in which to play. We don't want this. Give us a big sandbox and if we break, we break.

The problem is not that you break us. The problem is short release cycles

Right now, the Firefox team is aiming for six month release cycles. For an extension developer, the last two months of that cycle are when we can really start checking out things and it's only in the last month that we can actually release addons that have the correct version in install.rdf (due to AMO restrictions.). Most extension developers have multiple extensions and probably a day job. Updating five or 10 or even hundreds of extensions can be quite problematic.

Jetpack simply creates a new set of problems and a new context to solve those problems. We should try to fix those problems in the existing context.

I think the core problem here is a disconnect between Mozilla Labs and the rest of the Mozilla community. Mozilla Labs operates in a very closed community, completely contrary to the way other Mozilla projects are done (at least for the initial phases of a project). I think that contributes to their myopic vision of the future of the browser. I'd much rather see Mozilla Labs work with the community to propose ideas and foster those ideas to create a real open source lab versus coming up with ideas and then trying to force those ideas on me.

And incidentally, Internet Explorer is a great example of what happens when you give people a limited set of APIs to work with. They come up with elaborate hacks in order to make things work. And those definitely break from release to release. If you limit people, they will come up with ways around those limits. Please don't limit me.

Canvas from Brand Thunder

In the description for the Personas Add-on is the following statement:

The Artist in You Should Be Able to Treat the Browser as Your Canvas

With the introduction of Canvas (formerly PhotoFox) from Brand Thunder, you really can treat your Firefox browser as a canvas.

Canvas allows you to use any image from the web or any image on your computer as the background of your browser. It allows you to move it, pin it and tile it to give it exactly the look you want. It even allows a web designer to specify exactly how they want an image to appear in Canvas with a few HTML attributes.

Adding an image from the web to Canvas is as easy as right clicking on an image and selecting "Add Image to Canvas." The image is immediately available in your browser. Try it with the image below:

Seamless Photo Texture 01
Seamless texture provided by FreeSeamlessTextures.com

By default, the image is in the upper left and is not tiled. This image would look much better tiled so click the Manage button to tile it, move it around, or change the menu and background colors. You can also give it a memorable name.

We said that by default Canvas does not tile the image and it puts it in the upper left. You might have an image that you want to make available for use as a background, but you want to designate how it appears in the users browser. You can do this by adding custom attributes to the image that allow Canvas to set the defaults for the image. Here's an example:

Cliffs

If you right click on this image, you'll see "Add 'Cliffs' to Canvas" instead of "Add Image to Canvas." After the image is added, it is aligned to the right and has a background color. You'll also notice that the image that was added is bigger than the preview image. This is because you can specify the actual image you want to be used in the browser separate from the image the user clicks on. (Note this feature can be used to trick you into using possibly inappropriate images, so just be aware of that). Here's the HTML from the example above:


Cliffs

The attributes map directly to the CSS attributes for the image, so you just set them to those values. You can also specify "menuColor" if your image needs a custom color for the menus.

We know this is a very nonstandard way to accomplish this, but we wanted something simple that anyone could use on their website. We'll be improving on this process in the future.

Canvas also supports Personas. If you go to getpersonas.com and right click on any image, you can add the Persona to Canvas. Note we do things a little different: we do not use the status bar image and we use the background color as the color of the status bar. We automatically determine a color for the status bar that works on that color. We also don't change the title bar color on Macs.

You may wonder why we added that feature. We worked very hard to support coexistence with Personas and I think we did a pretty good job. You can switch back and forth between Personas and Canvas. In the end we determined that it would be better for the user if they had one place where they could go to access all of their browser customizations.

Now that you have all these images added to your browser, how do you switch between them? The My Pix button. Clicking My Pix will display a list of all the images you've added to Canvas so you can quickly switch between them.

We think that Canvas opens up a whole new way to customize your browser and we have lots more ideas that we're excited to bring to the table. Keep watching this space. And download it here.

Note: Canvas from Brand Thunder includes the Surf Canyon extension. It also changes the default search engine to Yahoo! and adds search to new tab windows. We do this so that we can keep our extensions free. Obviously we'd love for you to use Yahoo!, but if you don't want to, feel free to change it back. We also can give you info on removing the tab search. Just let us know at getsatisfaction.com.