Tag Archives: mct

MCS – round two

Over the last quarter of 2008 and somewhere into first months of 2009 I was working on the project called Mozilla Community Sites. We got a lot at the time, with initial implementations for several products, the Theme, Logo, style guidelines and the whole concept that was originally introduced by Pascal Chevrel and me in 2004 really took off.

Then, at some point I had to call it a release and switch to other tasks, while MCS was waiting there for people to pick it up and use. From the very early days of the project, I knew it’s one of the projects that has to be maintained by the community of its users and upstreaming patches people make while deploying will set the speed of the project. In the end, we have to use the work to understand what’s most important and I’m personally maintaining only one community website – wiki.aviary.pl, so I can’t be the only driving force.

Over a few months we saw a lot of experimentation with MCS, and there are at least 10-15 sites that are using some aspects of the project (for example Mozilla Lietuvoje, Mozilla Argentina or Mozilla Srbija) and people started approaching me and sending patches, asking for bug fixes, features and plans. I would like to especially thank Tomer, Jesper, Guillermo and RQ.

Unfortunately, until now, I really failed to find time to push MCS further, and I feel like I was blocking it by being an inactive owner of the project. Things are slowly changing as RQ started pushing patches to the repo, Jesper and Topal started working on their sites working around me, Tomer suggesting to start a community group forum for MCS and me wrapping up my other projects to have a clean slate to work on MCS once again, this time, collaborating in a group! Yay! :)

So, I’d like to thank everyone involved in this project and apologize for not being able to be active when it was needed, and I’ll do my best to make myself and the project back on tracks. Rimas committing patches and Jesper getting an HG account is a solid first step. I want to start a group project for MCS next week, and I hope we’ll have more people joining the project now. In the time of EU MozCamp, we should have a lot of exciting things done here :)

MCT: Style guide

It’s been a while since the last update on MCS but things were moving on and it’s time to catch up with the progress in the project.

picture-1Description

Today, I’d like to introduce you to a new Mozilla Community Theme style guide. MCT Style Guide is a document that explains the design decisions made by the theme authors that allows people who use the theme to extend it following the original concepts and keeping their new elements in sync with original one.

Rationale

Mozilla Community Theme was created to give us a fresh theme that can make it easier for communities to set up a professionally looking website without having to look for a designer or crafting something on their own. Three months after the release, MCS is becoming a popular option among opicture-2ur communities when they’re making their choices with regard to the website. We like to think that the reason is because we offered maximum freedom and flexibility with this set, letting people do what they want, while providing high quality of the design itself.

One element that we did not cover very well until today, was how to extend the theme. How to move forward. Not only modify what we gave you, but also add new elements, theme new websites, or T-shirts, or posters… That’s where the Style Guide hits.

Style Guide

Style Guide is a short book that presents the concept choices together with list of modification options that, in the theme author’s opinion, will match the theme and let you keep the unified look and feel no matter where you’ll go.picture-3

What’s exciting about it, is that it opens communities to a new level where they have all the tools and resources that usually professional web agencies have and they can develop their skills and get accustomed to the new concepts. While working on our hobbies, we’re getting real experience that translates directly into our portfolio.

 
 

picture-5This Style Guide lets you dig into:

  • color palettes
  • typography decisions
  • layout and grid models
  • branding options
  • methods of preserving space and light between text blocks that influences readability of the text
  • texture options that influence how the website looks
  • and others…

picture-4We hand this to you, so that you can experiment and develop the theme further or just customize it to your needs. What’s really important and exciting is that as all other parts of this project, the style guide is open! You can download Indesign document or editable PDF document and hack the Style Guide itself.


I’d also like to use this moment to thank Tara Shahian and Seth Bindernagel who have worked together with the theme authors on this 1.0 release of the guide. :)

So, grab it here and… we’re accepting patches :)

MCS: Source files released!

Another milestone for MCS project has been reached! And its a big one!

If you open http://hg.mozilla.org/webtools/mcs/file/tip/theme/source/ you will find full source PSD files of the theme.

picture-41

What does it mean? Well, this is another step on the way of making sure that we have a really good theme that is open to everyone according to what we understand as Open. And understanding of it is not that common.

Think of it. How many open themes do you know. There are a lot of themes that you can download for free, but that’s not making them open, right? Next, there are themes that may provide sources, even on open licenses, which makes them technically open but does it make it easy to work with. Its almost like opening sources of a software, but not making the sources readable, not helping with hacking them, not providing documentation, and build environment… If you track all open projects out there, they usually take a lot of time to open their projects exactly because re-licensing sources is not enough. Because it will not make people want to use it and contribute to it.

Because in order to get this kind of activity around your project, there’s much more that needs to be done, and the source files for MCS are exactly doing this. It’s not only theme, it’s a theme with PSD files there, and the PSD files are licensed on Creative Commons 3.0 Attribution Share-Alike and it is ready to be modified. The source has all the layers properly grouped to make working on theme sections easy and natural. It has guidelines that help you keep the scheme in shape while modifying and it makes it easy to change colors or elements that you will likely to want to modify. It is a fully open source theme, and we have an example implementations there to show you, but you can change it however you like and come up with your own implementations.

We will provide tutorials on how to do this, and we hope to see people modify it in creative way and upstreaming their changes to make the theme look even better in result of community effort!

I would like to thank Legal Team in Mozilla (Catherine, Harvey), Tara and Seth for making this possible!

I may be wrong, but I think this is the first case ever of opening the theme this way. I would love to see other examples, but it I think we’re just opening a new chapter with both, Mozilla Community Theme and Mozilla Community Sites – since I think no other project is offering such powerful tools for its communities to develop themselves around their own websites.  Mozilla is leading  :)

p.s. if there’s someone who knows how to port psd file to gimp xcf without loosing… everything in the file, then I’d love to get your help!

MCS MediaWiki alpha1

After successful launch of the Theme and WordPress, its time for the next tool that your community can find very useful in collaborative work – Wiki.

mcsmediawikiWiki technology allows no-entry-cost edition of documents making it possible for many people to contribute to the same set of documents. Such technologies are widely used for projects like Wikipedia, MDC, wiki.mozilla.org or for many projects at Wikia.

In case of MCS, Wiki can be a good place to start a community when you have a group of people who want to collaborate on the vision for your project, or can serve as a place where people can work on documents and statups updates for your community. In today world almost every project in the world is using a Wiki and we believe that your can benefit as well.

Because of its popularity we decided to stick to MediaWiki, as the most popular wiki solution in the world. MCS MediaWiki is a powerfull addition to WordPress or Drupal based website and will allow you to boost participation level accross your community.

This is an alpha release, and I mean it even more than in the case od WordPress. MediaWiki may be a solid wiki solution, but its definitely not easy to customize and theme, so we want to work more on making the theme better for some specific sections of the Wiki (like search or recent changes), but the big thing that is missing here is usability.

We deployed all controls that should be needed, but the UI of original mediawiki is far from being perfect and our theme tries to fix it where possible. I cannot call it a full success yet and I hope those who will want to deploy the theme as well as other usability experts will want to contribute to the project by finding ways to make the UI more intuitive for use.

picture-11

Edit section
Edit section
preview
preview

You can see it live at http://mcs.labs.braniecki.net/mediawiki or download sources from http://hg.mozilla.org/webtools/mcs/file/tip/mediawiki/.

I am aware that MediaWiki 1.14 has not yet been released, but it’s already branched and will get there soon (while it contains some important improvements and our MCS Mediawiki is in alpha version. alpha versions are for people who know what they’re doing, right?) ;)

So, feel free to test it and play around and if you decide to implement it in your website, consider upstreaming your changes so that everyone benefits!

Next is phpBB3 and Drupal :)

MCS WordPress 1.0alpha

One of the major efforts during last 2 weeks was to prepare working application using Mozilla Community Theme.

The first app that got MCS support is… WordPress 2.7.

wpmclove

WordPress 2.7 is a modern, flexible CMS system, that is best known as an excellent blogging platform. Because of its clean design, easy maintainance and many plugins its also used by many websites as a classic CMS. For example polish community – Aviary.pl - is using  WordPress and it proved to be very stable and solid platform for small websites.

Because one of the primary goals of MCS is to help our small communities get a shiny website with minimum effort WordPress was an obvious choice for the first app to be implemented.

Today, I believe we have a quite stable and usable theme for WordPress together with one custom plugin and support for another.

That’s how it looks in its full glory:

picture-4picture-5

I call it Alpha, because there’s some work to do. JS code requires optimization, Theme should provide admin configuration panel, and it needs some experimental implementations with bug squashing before we can call it stable.

You can install it togther with OpenID to gain full OpenID support. It uses vanilla WordPress 2.7, so feel free to give it a try, and if you’re familiar with WordPress theming/plugins take a look at the sources and… you know… we’re accepting patches :)

p.s. we currently do not provide bundles, so to download the elements you either have to use mercurial (hg export http://hg.mozilla.org/webtools/mcs) or go to http://hg.mozilla.org/webtools/mcs and click on “bz2″ or “zip” to download the package. Then follow instructions in ./wordpress/INSTALL.

MCS Theme 1.0beta2

10 days after first beta of MCS Theme – core element of the Mozilla Community Sites project, the next iteration is coming!

MCT 1.0beta2
MCT 1.0beta2

MCS Theme 1.0beta2 brings many improvements:

  • Tomer Cohen contributed initial support for right-to-left locales! (thank you!) :)
  • several lists are now <ul> (footer link list, article list etc.)
  • fixed nasty bug with right sidebar positioned below content due to Gecko bug by adding a wrapper div with display: table-row in #middle. (dbaron pointed out the solution)
  • fixed another nasty bug that caused middle row to shrink if #content was (almost) empty. (.aside is now display: table-cell by default)
  • fixed IE7 CSS hack. Now the theme will look good in IE7 when left-menu/right-menu is hidden
  • jQuery JS code split into modules
  • JS login box supports states (login, logout, register etc.)
  • cleaned up the use of .headline vs. .title classes
MCT in Right To Left mode
MCT in Right To Left mode

You can download sources from hg.mozilla.org/webtools/mcs directory theme/html and theme/php.

You can also preview Beta2: HTML mockup, HTML rich mockup, PHP mockup, Builder.


This release brings us near to stable version with many elements being in place and working well.

Right now, my main focus is on webtools using the theme, so if you want to play with it a bit, and you’ll find any bug, please let me know!

Mozilla Community Theme v1.0beta

Happy Holidays!

I will use this moment to introduce you the first release of my latest project. Over two months ago I presented the revision version of Mozilla Community Theme.

MCT is an element of a wider project – Mozilla Community Sites (MCS) that will help start a new community and maintain a website without much effort.

The Theme and its implementation are major part of the project and for last two months I have been working on creating a powerful, generic implementation of the theme, several small tools for making the theme easier to use and many tiny updates that should result in the higher quality of the theme.

On Monday we finalized the draft of the licensing guidelines which was the final step to release the theme to public.

Today, I’m proud to present you all the first revision of Mozilla Community Theme (click to test a mockup live):

picture-2

From today I’m starting a serie of blog posts about various aspects of Mozilla Community Theme, but for those of you who want to dig on your own you can just start reading wiki.mozilla.org/MCS documentation.

Logo

mctlogoThe very first element of the new theme is a Mozilla Community logo. The logo is a new element that we hope will become a unifying element of all community building efforts. We spent a lot of time thinking about how to license it and I believe the result is a very relaxed policy that allows you to do whatever you want with the logo, while leaving us ability to block malicious use.

The logo may be used by any community that wants to express its relationship with Mozilla project. We do not try to create a new brand out of it, we try to give you ability to show what you stand for. In result the logo can even be modified (!) to adjust it to your website, but please, try not to overuse this power. The logo means something and I believe its extremely cute, but can be easily devaluated by misuse.

Theme

Mozilla Community Theme is an open source theme (the sources will be provided soon) that provides polished and high quality solution for anyone willing to start a new community website but lacking designer skills.

We provide highly customizable theme that can be used in different color palettes, with different backgrounds, layouts and widgets. The theme was created basing on dozen of current community websites with an intention to match all major components of those websites. It is possible to take the theme as it stands and use it for your website without changing a single line, but if you want you can modify everything. Its up to you and the further you go from the original design, the more you’re on your own in terms of quality ;)

Example implementation

The theme itself is a huge step forward, but the real benefit only starts there. As a part of MCT we provide ready to use implementations of the Theme in several forms.

The very first form is a clean XHTML/CSS/JS mockup which presents the semantic structure of the website and its style documents.

Another is a PHP version, which may look similar but provides an example of how to use several tools and deploy the theme into PHP application.

The third is a small cutomization tool – PHP Builder, which is a proof of concept of what you can modify in the theme with simple CSS file (generated out of GUI). You can customize the theme, download custom.css file and replace it in HTML version to get your custom theme!

picture-3

At the moment Builder is pretty rough, but it already allows to create tens of versions of the theme. Ability to generate custom color palette (select custom and type any HEX RGB color) makes the amount of possible result infinite. In the future Builder should be able to provide more features and layout options.

App implementations

In a few days I will release first Theme implementations – wordpress and mediawiki, and drupal should follow shortly. The app implementations will not only contain the theme itself but also set of extensions that will provide unified set of features across multiple applications (think: OpenID, Single Sign On). We will also work on adding unique Mozilla related extensions that will allow your website to present the data directly from websites like QMO, SUMO or MDC.

MCS Admin Panel

The last step will be to provide single admin panel for installing/updating Mozilla Community Theme powered applications to run a complete website. The panel should allow someone with no prior experience in running a website to painlessly install and maintain his website, learning with no rush how the whole thing works.

Now it is YOUR time!

Working on such project inside Mozilla has, among others, one more benefit. I’m surrounded by web experts. Every single person who is reading this blog post has some unique knowledge and experience with coding HTML/CSS/JS or usability or accessibility or cross-culture design. Everyone can take a look at the sources provided with the whole implementation and find all the bugs I made and all those stupid mistakes. You can help make this project better.

My dream is to have this theme be a pure example of excellence in HTML/CSS/JS website development. Clean, modern code, flexible beyond recognition. During those two months I probably missed many opportunities to get nearer to my goal. Many elements may be not polished or may require some patience and love. If you think you found something like this, you probably did. So please, take a moment to share the feedback.
If you find the project interesting, and have some experience with web development, themes/extensions for WordPress/Drupal/phpBB/punBB/MediaWiki and want to help, email me (zbraniecki _a_t_ mozilla dot com) please. I could use some help :)

Credits

I would like to thank people who have helped me with this project. Especially Seth for an incredible patience and support in removing road-blockers, and The Royal Order of Design for a great design they prepared :)

Also, Szymon Piłkowski contributed first round of reviews, Wojciech Szczęsny provided initial insight into IE6 compatibility (not ready yet) and Szymon Błaszczyk contributed first usability review.

Plans

After getting the first round of feedback, I will remove “beta” from the release status, tag it and call it official. You can take it today and start using right away, but there may be some changes in the CSS basing on the volume of bugs discovered by peers.

During next days (after some christmas rest with my family)  I will be working on finalizing wordpress implementation (you can take a look at the current status) and mediawiki. I will also shed some light on the PHP code I wrote for this project and present you CSSLib and Style class.

Finally, I hope to spend some time discussing with you your feedback and implementing fixes to the code and helping first brave souls implement it for their new community websites!

So… how do you like it? :)

p.s. if you have ideas you would like to see, or you would like to work on, contact me or list them on the MCS:Brainstorm page.

Mozilla Community Theme – revised

Three weeks ago we asked you for feedback on an initial round of Mozilla Community Theme mockups and we received plenty! Then, we started sorting out what we got and preparing a plan for improvements.

Today, we present you a revised Mozilla Community Theme:

Mozilla Community Theme logo

The new logo you can see here is a proposal for a Community Logo in Mozilla world. It means that we will offer it as a unifying branding element for all communities that will operate inside Mozilla environment, and it’s perfectly in line with our Manifesto:

(…) The Mozilla project uses a community-based approach to create world-class open source software and to develop new types of collaborative activities. We create communities of people involved in making the Internet experience better for all of us. (…)

It has been combined, together with other elements into an improved screen of an example website:

Mozilla Community Theme, screen1
Mozilla Community Theme, screen1

We will offer several options for the header bar, several header backgrounds and several color palettes:

This, of course, is still just an option set, since you can go beyond that and use the color set you want.

We’re currently preparing a guidelines document for you, which should help you work with the sources once they’re public. We’re working on the template for other webtools (like forum, wiki), we’re preparing sources for publishing, and we’re open to hear your feedback once again on what do you think about this theme, so let us know what you think!

Mozilla Community Template progress

A quick update on the status of MCT. Tara, Seth and I gathered a solid round of feedback from many of you. We scanned it, analyzed and built a profile of updates we want to make. We noted five main issues raised by you regarding the first proposition:

  • You are wondering what flexibility you’ll have. What about different colors? Flags? Logos?
  • You want to know how it’ll work with other tools than Drupal
  • Details are wrong, wrong flag, left&right menu are the same width, colors are wrong, languages are mixed
  • The theme is not “mozzilian” enough
  • The theme is “graphic” heavy.

Let me address those comments.

First, we are commited to create an extremely flexible environment for you with this theme. We are preparing it in the way that will give you ability to choose colors, layout, elements you want to put in the background, virtually anything. Beside, we will provide you Guidelines prepared by the agency that will help you work with those sources. They will just guide you on how to modify the template to keep the consistency. And if you missed that in my last post – we’ll also provide you full sources on open license so that you can modify this as you want! It’ll be a mixture of professional quality and community freedom.

Second. As I said we are preparing the template to work with several webapps out of the box, and with the freedom described above we hope you’ll contirbute with the theme suited for other apps as well.

Right now, we’re preparing, among the others, php template, planetplanet template and wordpress template:

MCT v1, forum view
MCT v1, forum view
MCT v1, Planet view
MCT v1, Planet view
MCT v1, WordPress template
MCT v1, WordPress view

And we also have another mockup with data from a pretty complex Mozilla Community site, in this case mozilla-russia.

Please, bear in mind, that those are all mockups – elements just combined together to present how the website may look like. Of course the width of elements, choice of logo, colors etc will be up to your community, so please, forgive us a mixture of polish, russian, spanish, latin, lorem ipsum and some other languages in those mockups ;)

Of course all those mockups are from before we received your feedback (version 1), so I’m attaching them just to show you the variety of cases we’re working on. The new mockups should be ready soon.

We spent some time trying to figure out what does “mozllian” mean in terms of website template (mozilla.com? mozilla.org? developer.mozilla.org?) and we tried to minimize the influence of mozilla.com visual identification to make sure people see it as Mozilla Community – not official MoCo site. It seems we didn’t hit the right balance yet.

Regarding “heaviness” of graphics on the template. We find your comments saying that the template works great for smaller sites (majority of our community websites are in this category), but we could improve how it’ll look on more complex sites. And that’s also what we plan to address with the new round.

So. Did I get you right? Does it answer your feedback? We’re working on the next round and we hope it’ll be near to final so that we can start deploying it for you to use. Expect next round, next week :)

update: Just to clarify – this is an option for our communities to make your life easier. We will not enfore anyone to use it! :)

[RFC] Mozilla Community Theme

We’re listening to you and we’re excited about your ideas :)

Some time ago, Staś and Seth started a survey program to get an idea on what You feel about Mozilla. And in the very first survey they led, the very most commonly requested support from Mozilla was to provide Mozilla website template for community sites.

We were not surprised to see this in the survey results because it has been something that many of us have been considering a long time.  How could we find creative ways to support all of our Mozilla contributors?  How can we make life easier for everyone?  We have all levels of communities, from large to small and new to old.  Many do not have all the resources needed to create this on their own.

That’s exactly how Mozilla Community Sites project started. We’re going to work on customization of several commonly used community webtools to make it easy to set up and deploy a website for your community. If a contributor community chooses to use the tools provided, they can get a site up and running that looks like a Mozilla Community project website, with several features built in specific that do not requiring mastering PHP/MySQL etc. (but if you want, feel free to support us with your skills :)).

The tool presents several commonly used webtools like Drupal, WordPress, phpBB/punBB, PlanetPlanet etc. and prepare them to be ready to start in the Mozilla community environment. We’re planning to offer two kinds of websites:

  • powerful and highly customizable website using Drupal CMS
  • smaller, easier to deploy and less interactive based on WordPress.

We want these sites to easily feed from Mozilla Developer Center, SUMO, QMO and list latest stable releases in your language.

We also intend to use Single Sign On, OpenID, and other features to improve integration.

One featured below is a much requested Mozilla Community Theme.

From the survey, we gathered that people wanted a theme that clearly indicated that websie was part of the Mozilla Project, while at the same time not an effort from the Mozilla Corporation or Foundation.

We worked with designers to help us create something that had a feel somewhere close to the Corporation and Foundation sites, but still unique and different.

And today, I’d like to present you the draft and ask for you feedback on it!

Below is the screenshot of how the website could look like.

Main Community Website 2
Main Community Website Draft
Main Community Website 3
Main Community Website Draft
Main Community Website 4
Main Community Website Draft

The content presented on the screenshots above is of course just an example. Website maintainer will decide what to present there.

Also, the theme is not obligatory to anyone. It’ll be just an option you can use while preparing your website. We appreciate and respect how our communities are independent.

We will also provide you a special Guidelines that will help you customize the template according to your needs (changing colors – green, orange, blue etc., backgrounds, etc.). These guidelines are intended to make it easier to modify the template if you want to skin another webtool from outside of our list with this theme while still maintaining quality.

Just to be clear, with this tool you will be able to select the following:

  • components you want to display (top header, header bar, left, right panels, etc.).
  • colors to use (Guidelines will provide a list of color pallets that fits the theme well)
  • ideas to put in the background (maybe something specific to your community – Eiffel tower in the header background?)
  • community logo.

We will suggest you to follow those Guidelines, but if you want to go beyond, feel free!

Oh, and… the theme will be, of course, open sourced :)

So, now, that we spent some time with designers on this, we need your feedback before going any further. We need to know what you think, would it fit your community if you lead one, which kind of community does this mockup fit, what could be improved to fit others, what can we do better and what is missing. It’s especially crucial to find out what’s missing to make sure it’ll be covered with the final version. Please, focus on clear, productive feedback. Thanks! :)