Firefox S5 is an ongoing community project on Spread Firefox started by Lachlan Hunt. The goal is to create a Firefox presentation using Eric Meyer's S5, which is a browser-based slideshow/presentation system.

About this Project Edit

It is expected that these slides will eventually reach a level of maturity at which they will be ready to be widely used. However, as Firefox receives updates and new features and as presenters using this provide feedback about their experiences, the slides will be continually updated and improved. Thus, new content, designs and translations will always be accepted and this project will continue to prosper.

And one issue with this will be that if updates are made to the English version, they will not be immediately made to the other languages. Such modifications will depend on submissions being made by those who can translate whenever such modifications are made. If anyone knows of an effective way to manage this issue, please discuss.

Get Involved Edit

There are several ways you may get involved with this project.

  • Creating and submitting a design or help improve an existing design.(See Creating Designs below)
  • Suggesting, adding or editing content. (See Creating Content below)
  • Translating the slides (this will come later after the content is finalised for the English version)
  • or just take part in the discussions

Creating Designs Edit

To create a design, basic knowledge of HTML and CSS is required. There is plenty of documentation available about the structure of the HTML and plenty of existing stylesheets you may use as a starting point for your own design.

  1. At a minimum, read through the S5 Primer
  2. Try to read most of the other documentation if you like.
  3. Download the latest Firefox S5 HTML or just use the sample slides provided in the S5 documentation.
  4. Write the CSS and create all the images you need.

Design Submission Edit

After you've created your design, there are 3 simple steps to submit your design.

  1. Upload Screenshots.
  2. Add it to the Wiki.
  3. E-Mail the Design.

1. Upload Screenshots Edit

Create two screenshots, one of the cover slide and one of a "normal" slide. You can then upload them to any of the following places:

  1. Upload them to Flickr. This is the easiest way, because Flickr will allow you to upload an image in any size and format and automatically resizes and converts your image to the compact JPEG format ready for use.
  2. Upload them to this wiki using the Special:Upload facility. This is probably the best option, but it prefers that you only upload small screenshots that aren't larger than 100 KB.
  3. Upload them to the SFX Gallery.
  4. Host the images yourself. (Quite obviously an option...)

After you've got your hosting sorted out, it's time to add the screenshots to this wiki page.

2. Add it to the Wiki Edit

The ideal width for each image you're embedding is 180px. If you're using Flickr, opt for the "small" or "tiny" versions. Then link to the larger versions if you like.

Don't forget to add the following information to your design:

  • Design Name (To uniquely identify your design - much better than having simple numbers like Design #1, Design #2, etc.)
  • Author (That's you! And why not link to your website while you're at it?)
  • Copyright & Licensing (Very important! Why not just use a Creative Commons Licence?)
  • Credits (In conjunction with the previous point, please remember to give credit to any other individuals as appropriate.)

3. E-Mail the Design Edit

Then, mail the CSS and image slices as is to be used for the actual slideshow to

For more information, please read the guidelines on the blog post Firefox S5 Designs

If you need help, maybe someone will help you on the discussion pages.

Designs Edit

You can view the designs already submitted and add your own design on the Firefox_S5:Designs page.

Creating Content Edit

  • Slide Title: Give each slide a title, using a 3rd level heading
  • Target Audience: Include a note about the suggested target audience(s) for the slide just below the heading, using a comma separated list. e.g.
    • (Target Audience: End Users)
    • (Target Audience: IT Professionals)
    • (Target Audience: End Users, Web Developers)
    • You aren't limited to just those target groups, if you have a reason to include another, use it.
  • Bullet Points: If you use bullet point, make them short, descriptive bulleted or numbered lists rather than long prose in the slides. Presenters should not just read the text on the slides (as I have seen so many do), but talk about the slide content using the bullet points as topical hints or summaries.
  • Other content: You are not restricted to to bullet points in each slide, other content may be:
    • A few paragraphs, more like a story structure.
    • Screenshots
    • Quotes from news articles
    • Tables of data (eg. for browser stats)
    • Anything else relevant to your presentation needs.
  • Images: Include notes about any appropriate images/screenshots that should be included. No need to include the actual image in this wiki, but you may do so if you feel it is necessary.
  • Handouts: Include any suggested content that you feel would be appropriate for a printed handout of the slide, below a 4th level heading called "Handout".
    • This may include longer prose and may include more notes about what the speaker will actually be saying.

The Slides Edit

Faster Surfing Edit

(Target Audience: End Users)

  • Convenient Searching
  • Open and Read Multiple Web Sites
  • Up to date News with Live Bookmarks
  • Fewer Annoyances - No Pop-ups

Convenient Searching Edit

(Target Audience: End Users)

  • Integrated search field (Screenshot: The search field and search engine menu)
  • Select any search engine you like
  • Unobtrusive text search - Find as You Type (Screenshot: Find as you type bar)

Handout Edit

Firefox's search abilities help users to find what exactly what they're looking for faster.

Search the web with any search engine you like using the convenient search bar.

Find as you type allows you to search the current page simply by typing. As you type, the find toolbar will display and the matching text will be immediately highlighted; helping you to find what you’re looking for, faster than ever.

External links Edit