New MooTools website - get involved

[fakedarren]

Hi everyone

We've started work on a new site for MooTools, and wondered if any of you wanted to help out. The is a lot of work to be done, requiring a variety of skills:

• Design
• HTML & CSS
• Wordpress customisation
• 'Classic' PHP (for the bulk of the site and the documentation / demo runner)
• Symfony (for the Forge)
• Content contributions - tutorials, demos, documentation

We've already sketched out some initial design ideas and the first stage is to flesh out the 'style guide' - covering basics, like heading styles, paragraph and link styles, code snippet styles - so that when we move on to specific sections, anyone that wants to help with design knows where to start.

So how do you get involved? Well, we have a Github repository and all you need to help out is going to be put there. 'Watch' the repository to get notified of any issues, and you can comment with any questions or ideas. 

Don't know git? That is fine, if you want to contribute designs only, you can submit design ideas by email (fakedarren at mootools dot net) but you'll need to create a (free!) account to take part in any discussions. If you want to contribute code, you will need to use git.

So - what is it we want you to do?

Well, we have a list of milestones / steps, and within each step, a list of tasks. Each milestone should take approximately two weeks to complete. We'll log tasks accordingly. If it's not assigned to anyone, it is still outstanding, and any contributions are more than welcome.

For now, we're still waiting on real basics - a basic style guide, a colour palette, the main navigation - if you want to get involved, please do.

A massive part of the new website is to beef up our 'learning' section - so if you want to help with content, take a look at the Tutorials section, and see if there is anything you can help with.

If there is anything you feel the new website should have, please create a new issue, and it will be discussed.

Cheers

Darren

[Eli]

My two cents:
The site has no "Hey! This is a JAVASCRIPT FRAMEWORK FOR DOING THIS
AND THAT".
It starts off with "demos" guides and api reference right off the bat,
and it needs a little more "newbie" friendliness.

There are a few worse sites than those don't don't explain their
purpose from the second you look at them.


Answer those questions as a start:
What is this?
Who is it for?
Why this and not that (jquery/prototype)? - maybe a short differences
table
What do I need to start? (you've got jsfiddle = nothing but a good
browser)
Where to go from here?

Keep the existing links as well, but don't make them the main theme.

-Eli

On Sep 16, 9:46 pm, fakedarren <darren.wadd...@gmail.com> wrote:
> Hi everyone
>
> We've started work on a new site for MooTools, and wondered if any of you
> wanted to help out. The is a lot of work to be done, requiring a variety of
> skills:
>

>    - Design
>    - HTML & CSS
>    - Wordpress customisation
>    - 'Classic' PHP (for the bulk of the site and the documentation / demo
>    runner)
>    - Symfony (for the Forge)
>    - Content contributions - tutorials, demos, documentation
>
> We've already sketched out some initial design ideas <http://d.pr/uxWg> and
> the first stage is to flesh out the 'style guide<https://github.com/fakedarren/mootools-website/blob/master/DESIGN%20A...>'

> - covering basics, like heading styles, paragraph and link styles, code
> snippet styles - so that when we move on to specific sections, anyone that
> wants to help with design knows where to start.
>

> So how do you get involved? Well, we have a Github repository<https://github.com/fakedarren/mootools-website>and all you need to help out is going to be put there. 'Watch' the

> repository to get notified of any issues, and you can comment with any
> questions or ideas.
>
> Don't know git? That is fine, if you want to contribute designs only, you
> can submit design ideas by email (fakedarren at mootools dot net) but you'll
> need to create a (free!) account to take part in any discussions. If you
> want to contribute code, you will need to use git.
>
> So - what is it we want you to do?
>

> Well, we have a list of milestones / steps<https://github.com/fakedarren/mootools-website/issues/milestones>,
> and within each step, a list of tasks<https://github.com/fakedarren/mootools-website/issues?milestone=1>.

[batman42ca]

Sorry to be critical but the initial design looks a little plain to
me. It doesn't grab my attention. This:

http://web.archive.org/web/20070303200242/http://mootools.net/

... grabbed my attention. Especially the main menu. The main menu is a
big part of what drew me to Mootools Back then, I hadn't seen anything
like that before and I thought to myself, "I want my web sites to be
able to do stuff like that"

So my suggestion is be eye-catching and rather than just links to
demos, actually use Mootools on the web site.

[Aaron Newton]

Oh. I miss that design.

[Robert]

Same with me. (http://web.archive.org/web/20080513101403/http://
www.mootools.net/)
In my opinion the main website should be showcase saying "this is why
You WANT to use mootools!".
That first black site with subtle animations did just that.

[Aaron Newton]

The most popular web server in the world: http://httpd.apache.org/

Sites about technology should focus on serving it to their audience. I miss the old (first) MooTools.net, but on the flip side, the demos are better, the docs are better, the library is better. If I had to choose, I'd choose what we have...

[Robert]

Yes, the initial design says: "I am boring bunch of links from people
broken by routine" ;-)

It could Use ART, some clever animation (remember this?
http://devthought.com/2007/01/29/cssjavascript-true-power-fancy-menu/),
something people would instantly want to use on their sites. Reference
page with links could be one step deeper.


Thanks,

[Robert]

But webservers are for geeks and js frameworks are (in many cases)
also for designers.
JQuery could probably have page like apache because it is most popular
js framework, mootools have to CONVINCE people to use it - and best
way is "to show, don't tell".

I know I started to use mootools because on mootools page I found
animation I couldn't easily reproduce in JQ.

And good design with clean message doesn't mean there could be no
demos, does it?


Thanks,

[Barry van Oudtshoorn]

On 28/09/11 14:33, Robert wrote:
> But webservers are for geeks and js frameworks are (in many cases)
> also for designers.

Hmm, I think that in the case of MooTools, the former is far and away
the larger target demographic. Yes, you can achieve fancy effects in
MooTools; you can do just about anything in MooTools that you can in
jQuery. The difference, and what I believe the website should promote,
is that MooTools is about writing code.

I think that generally speaking, people perceive the toolkits something
along these lines:

jQuery: quick, easy, fancy; it lets you manipulate the DOM and layer
effects onto existing documents.
YUI, Dojo: big frameworks for developing apps; the "enterprise" solution
(ugh).
MooTools: All and none of the above.

(Yes, there are more frameworks. No, I'm not going to list them. :P)

MooTools is not, to my mind, a framework to facilitate DOM manipulations
(although it does do that). Neither is it a UI toolkit (although you can
build/find one using it). MooTools is to JavaScript what a blowtorch is
to a crème brulée: the tool that makes it exceptional, rather than just
great.

I think that MooTools should be targeted primarily at developers, but
with a note to the effect that "Yes, it does X/Y/Z, too -- and well!"
Looking at the people who post to this mailing list, they're generally
developing fairly large-scale sites/apps using MooTools. In my opinion,
these people should be the target.

- Barry

--
Barry van Oudtshoorn
www.barryvan.com.au

Not sent from my Apple πPhone.

[Robert]

Developers has to convince designers / business people that mootools
is the way to go. And for this the best way is to show its excellence
and large user base. I know because I "pushed" mootools for some big
projects in my company. And they always ask: why use mootools when
even MS uses JQuery? Then I have to show them same fancy effects and
say "it is easier/better then JQ".

Apache don't need to market itself because everybody knows it is best.
Mootools doesn't have this position.
And less developers means less code to reuse, less recognition, which
means less developers, and so on.

Once Mootools has fame for its animations. Now we should pin some
points where MooTools shines and market it with this in mind. Maybe we
should work with Joomla people, they are probably the largest group of
mootools users out there...





On Sep 28, 9:00 am, Barry van Oudtshoorn <bvanoudtsho...@gmail.com>
wrote:

[Arian Stolwijk]

"Best way to make something happen is to do it" -- Arian, 2011 

:P

[Philip Thompson]

The most valuable company in the world*: http://www.apple.com/

It has a clean, beautiful design that appeals to the tech-savvy and the designers alike. =D

I also agree with Arian's quote. +1

~Philip

* http://techcrunch.com/2011/08/09/apple-exxon-valuable-company/

--
http://lonestarlightandsound.com/

[Aaron Newton]

Apple is a consumer products company. Know your audience.

[Robert]

You mean - my own mootools page? ;-)

[Robert]

Aaron, if apache.org is a template for us and mootools.net is going to
be just bunch of links - why any redesign at all? It will only produce
confusion.
apache.org is not doing redesign every 3 years... ;)


cheers,

On Sep 28, 5:38 pm, Aaron Newton <anut...@gmail.com> wrote:
> Apple is a consumer products company. Know your audience.
>

> On Sep 28, 2011, at 7:25 AM, Philip Thompson <philthath...@gmail.com> wrote:
>
>
>
>
>
>
>
> > The most valuable company in the world*:http://www.apple.com/
>
> > It has a clean, beautiful design that appeals to the tech-savvy and the designers alike. =D
>
> > I also agree with Arian's quote. +1
>
> > ~Philip
>

> > *http://techcrunch.com/2011/08/09/apple-exxon-valuable-company/

>
> > On Wed, Sep 28, 2011 at 1:24 AM, Aaron Newton <aa...@iminta.com> wrote:
> > The most popular web server in the world:http://httpd.apache.org/
>
> > Sites about technology should focus on serving it to their audience. I miss the old (first) MooTools.net, but on the flip side, the demos are better, the docs are better, the library is better. If I had to choose, I'd choose what we have...
>

[Christoph Pojer]

At this point I am convinced Aaron gets paid for all the lobbying he does for Apache.

[RipTheJacker]

I agree with some of the others about the old, more flashy and
friendly, design. That's what initially brought me to using MooTools
over other frameworks out there. Apache is a poor example. Like
someone earlier said, that market is not the same as with MooTools.
Also, plenty of tools target toward developers have nice designs
anyway. Look at Nginx, or the Ruby community, or the website for our
President (which influenced better design in every other candidate's
site). Design is as important a tool to get your point across as
documentation.

[Trevor Orr]

It seems like the only thing that can be agreed upon is that there needs to be a redesign.  

I Agree with the statement of "know your target", if the target is not MooTools developers then it needs to be something fancy that is going to catch their eye and say "wow, that is cool".  

Programmers on the other hand for the most part aren't as interested in the cool look as they are in the cool functionality, architecture, etc.

[Aaron Newton]

I'm not saying that good design isn't important. And, frankly, I loved those little kwicks on the original Mootools.net as much as anyone. But when I compare it to the current MooTools site which is somewhat underspoken and the design for the new site which is also somewhat subdued, it doesn't bother me that there's not shit flying around the page just because we can. Anyone remember this?

When I talk about Apache's site it's not because I like it - I don't! - but rather to say that good community and good documentation and good code are about a billion times more important. The current MooTools site is simple, easy to find your way around, and easy to use. I agree it could use a little more information in places (the home page, imho, could feature some demos, featured sites, etc), but I disagree that MooTools.net needs to itself be a design showcase for the framework.

On Thu, Sep 29, 2011 at 6:47 AM, RipTheJacker <kab...@gmail.com> wrote:

[Arian Stolwijk]

You mean - my own mootools page? ;-)

 

No, look the link below.

 

It seems like the only thing that can be agreed upon is that there needs to be a redesign.  

Yes, hence the link below.

https://github.com/fakedarren/mootools-website

[hartum]

Hi everyone*

I think we are losing focus from important things.

1º) we should define de data tree estructure:

Example:
- Home
- Downloads
|__ Core Builder
|__ More Builder
|__ GitHub repository etc....
|__ Etc..
- Docs
|__ Core
| |__ Array
| |__ String
| |__ Etc....
|__ More
- Forge
- Blog
- Demos

2º) create some wireframes, based on usability.
As web developers I think the most important sections are:
- Documentation
- Demos
- Forge
- Blog
- Download
- Others


3º) create some designs based on wireframes. It could be gray and
beautiful ;-)
http://dribbble.com/shots/279929-Is-this-too-apple-ish-/attachments/10335

Finally I agree that effects and DOM manipulation is the gateway for
this amazing framework
but we are looking at the finger, and not at the moon.

*sorry for my terrible english. :-S

On 29 sep, 17:43, Aaron Newton <anut...@gmail.com> wrote:
> I'm not saying that good design isn't important. And, frankly, I loved those
> little kwicks on the original Mootools.net as much as anyone. But when I
> compare it to the current MooTools site which is somewhat underspoken and
> the design for the new site which is also somewhat subdued, it doesn't
> bother me that there's not shit flying around the page just because we can.
> Anyone remember

> this<http://www.ericmmartin.com/wordpress/wp-content/uploads/2008/08/jquer...>
> ?

[Andrea Dessì]

On Thu, Sep 29, 2011 at 21:57, hartum <har...@gmail.com> wrote:

Hi everyone*

I think we are losing focus from important things.

1º) we should define de data  tree estructure:

Hi all,

hartum is right, it's very important to target the website contents.

Then distribuite them and make them happy with the design.

just my 2cents too :)

--

Andrea

[Robert]

Ok, I am talking little too much so I just try to sum up my point.

From my perspective as a senior developer this whole "elitish" thing
"mootools is for developers" makes me sad.
Lately I had to hire some programmers and none of the candidates knew
anything about mootools. I had to hire "jquery guys" and teach them
new framework. It may be no problem for Aaron or core devs, who are
word class programmers and probably can work with anyone - but for me
it is a big burden.

And there is my friend who is making Joomla sites and he is just
beginning programmer and also has to work with mootools.

This students I hired could work with mootools earlier but there are
really no entry points to mootools except Joomla. There are almost no
brilliant controls out there that make people awe, mootools page is
dull and boring and general message from the core devs is "if You are
not javascript mastahacka mootools is NOT FOR YOU". The one and only
promotional site for mootools is brilliant David Walsh blog.

So if new site is just for current mootools devs - I think we don't
need any redesign. I can find anything on current site with my eyes
closed, I am used to it. It may get some improvements (comments for
the docs and forge pages, obligatory licence type for the forge
plugins) but it is ok. But if we want new developers coming we need to
promote mootools and the main page is the best place for it. The main
page should be for newbies, because "old dogs" would get to the docs
or forge directly. And it should be not only for advanced developers
but also for students and designers, because in the end this students
and designers may become advanced developers.

So for me first black mootools page with two awesome plugins is a best
model, it SHOWS what mootools can do and brought a lot of people to
mootools.
I would also think about something for Joomla people, even a page with
links to docs for versions of mootools which work with different
versions of Joomla.

Ok, enough the rant ;), thanks for all the hard work,
Robert

[Robert]

I don't think it is sane to start work if we don't agree on the
principles. For now it looks like we think about different sites for
different people. ;)

cheers,

On 29 Wrz, 18:19, Arian Stolwijk <ar...@aryweb.nl> wrote:
> > You mean - my own mootools page? ;-)
>
> No, look the link below.
>
> > It seems like the only thing that can be agreed upon is that there needs to
> > be a redesign.
>
> Yes, hence the link below.
>

> *https://github.com/fakedarren/mootools-website*<https://github.com/fakedarren/mootools-website>

>
>
>
>
>
>
>
> On Thu, Sep 29, 2011 at 5:43 PM, Aaron Newton <anut...@gmail.com> wrote:
> > I'm not saying that good design isn't important. And, frankly, I loved
> > those little kwicks on the original Mootools.net as much as anyone. But when
> > I compare it to the current MooTools site which is somewhat underspoken and
> > the design for the new site which is also somewhat subdued, it doesn't
> > bother me that there's not shit flying around the page just because we can.

> > Anyone remember this<http://www.ericmmartin.com/wordpress/wp-content/uploads/2008/08/jquer...>
> > ?

[kriscd]

"...I think we are losing focus from important things..."

The focus?!

A good goal for a developers is to find, with a few click, what he is
looking for.


I like very much the php example at the the end of the function page.
Since 1998 when i started with php i found all the basic (and good)
example
to work with a new function.


Simple and quickly


In my little experience...
Always when i need to work i start first from the example page (a i
find what i need).
I don't need to follow any newsgroup to learn about php.


This is for me the most important direction to follow for the future.
So i suggest, if it's possible, to improve the actual (good demos
area)
with a section dedicate to all the people that want to give a
contribute with extra example.


Many thanks for your attention
Cristiano

> beautiful ;-)http://dribbble.com/shots/279929-Is-this-too-apple-ish-/attachments/1...

[Darren Waddell]

Hi everyone

Thank you for all the feedback. The good news is that all of the things mentioned have already been discussed by the team working on the new site, at length, so it's good to know we've taken everything that people think is important into consideration when making decisions.

Some specific points:

* Don't worry, we will make sure the new homepage is as attention-grabbing as the old 'kwicks' on the old site
* We already have a good overview of content we would like the site have (https://github.com/fakedarren/mootools-website/wiki/Site-Content-(Outline))
* We are splitting the work up into small chunks so people do not get carried away discussing things that do not exist yet, or things that can only exist if more people help out

For the next month or so we will be working on the documentation and demos runner. We have a list of outstanding tasks (https://github.com/fakedarren/mootools-website/issues?milestone=2), and if you have any input you wish to make feel free to open an 'issue' stating what change you would like and how it would be achieved.

We're particularly interested in seeing ideas for demos - again, discussing them here is not particularly useful. Create an issue 'create demo for X?' and the merits of the idea can be discussed, and, at some point, assigned to someone for them to actually do the work, which is the bit that we need help with. If we could build a new mootools website out of ideas alone, it would be epic.

Cheers
Darren

[Divyan]

Just my 2 cents:
I think it's best to keep the old design, but pimp it a bit.
To start off with the layout:
-With a nicer shadow under the header, a few darker grey borders and
an addition of a text-shadow on the menu anchors, then it's a much
better website already.

Then for the content:
- Maybe a homepage-showcase / tutorialcase (done with a php-curl to
David Walsh's latest mootools blog) will keep new and oldschool
mootools developers interested.
- Comments both in the Forge and the Docs that can be clicked open to
discuss what's going on with a Doc-example or Forge-plugin.
- people should somehow jsfiddle things to explain examples and
bugs / questions

- Then on the homepage: Latest 5 comments on the Blog / Docs / Forge.
This will get peoples attention to what's going.

/2cents

I'm looking forward to it all :-)

[Aaron Newton]

It may be no problem for Aaron or core devs, who are
word class programmers and probably can work with anyone - but for me
it is a big burden.

I am so not a world class programmer.

[Chad Meyers]

On Sep 30, 5:32 am, Robert <forpoc...@gmail.com> wrote:
> Ok, I am talking little too much so I just try to sum up my point.
>
> From my perspective as a senior developer this whole "elitish" thing

> "mootools is for developers" makes me sad. . . .

> This students I hired could work with mootools earlier but there are
> really no entry points to mootools except Joomla. There are almost no
> brilliant controls out there that make people awe, mootools page is
> dull and boring and general message from the core devs is "if You are
> not javascript mastahacka mootools is NOT FOR YOU". The one and only
> promotional site for mootools is brilliant David Walsh blog.

. . .

> Ok, enough the rant ;), thanks for all the hard work,
> Robert

I would have to agree with this a lot.

When I started up doing web design again, I wanted to find out how to
do flash things, without flash. As I scoured the web looking for
websites with great animation I would check to see if they used flash
to do it. I found a few sites that didn't. They used this MooTools
thing. Cool I said. I looked up MooTools and found the demos. I was
unimpressed but knew the greater power of the crummy changing boxes.

Long story short, I set out on a very rocky road to learn MooTools.
Boy did it piss me off. The forum seemed all but useless. Very un-
active and un-helping community (no offence, but I was used to
osCommerce, I didn't have to ask, someone already did and it was
answered) And the documentation made very little sense. I blamed my
lack of Javascript knowledge and hammered through. The result was
this website here, http://www.idoweddingsaway.ca/ It works, but is
kind of written funny.

I wanted to do more work - some lightbox features. I struggled to
find what I was looking for in mooTools and ended up using fancybox
for jStuff. I thought, maybe I will learn that framework instead and
drop mooTool. But as I ventured into jQuary I found it really didn't
offer me the type of flexibility I wanted. So I decided to just stick
with mooTools. This resulted in our new redesigned page here
http://www.starlingdesign.ca/

I guess what my ramblings are trying to get at is;

1. The page should make me say, wow! This looks awesome. (You don't
need any Javascript to do that, just good layout and graphics)
2. The function of the page should make me say, wow! that was cool.
(here is where MooTools should do it's song and dance, just don't take
a lot of time to do it - navigation should be simple, obvious, and
fast)
3. YOU NEED BETTER "hey I am a beginner, how do I use this stuff"
documentation. A really dumbed down step by step list on how to make
your own "crummy little morph box" once you can do that, venture out
to the forums, and mess with the demos.

If you don't redesign like that, don't bother. Why layout the
dictionary over and over if it is always going to be the same old
bland thing. You might as well copy Apache or php.net (yawn)

This also does not mean the whole site has to be graphical and dance
for you, but the home/index page sure as hell should. Once you move
on to the documentation it can go encyclopaedia on you. (it'll load
faster that way anyhow)

[hartum]

Hi again

I have couple of suggestions to do.

1) Now that some version of mootools have been released, You should
add a "tab" or "radio button" or something graphically similar to
this:

http://365psd.com/day/2-167/
http://www.premiumpixels.com/freebies/menu-notification-badges-psd/

The idea is to have available the documentation of all versions and to
choose the one you need, not just the latest version


2) Please implement a simple way to update new plugins to the forge
from the webpage. Maybe a form connected with GITHUB?

Thank you very much, I Hope this feedback is useful for you.

On 30 sep, 11:39, Darren Waddell <darren.wadd...@gmail.com> wrote:
> Hi everyone
>
> Thank you for all the feedback. The good news is that all of the things mentioned have already been discussed by the team working on the new site, at length, so it's good to know we've taken everything that people think is important into consideration when making decisions.
>
> Some specific points:
>
> * Don't worry, we will make sure the new homepage is as attention-grabbing as the old 'kwicks' on the old site

> * We already have a good overview of content we would like the site have (https://github.com/fakedarren/mootools-website/wiki/Site-Content-(Out...))