First attempt at a MooTools website redesign. Thoughts?

[Benjamin Kuker]

As a result of a conversation in another thread about helping jumpstart the MooTools community and development, I thought I would try my hand at refreshing the look of the website. A couple things before I share the links to the mockups, though.

1. The look of the current website isn't bad. I've done my best to try to capture the spirit of it in the mockups while still making it new.
   
2. This would be more of a facelift than a complete overhaul. I'm not completely sure how everything is pulled into the site from GitHub, but I don't think there would have to be any major content rewrites.
3. The purpose for the redesign is to show the community that MooTools is still alive and active, while making some slight improvements.

The primary goals are:

1. Make it easier for new users to figure out what to do and get started.
   
2. Maintain the same general structure for existing MooTools users in order to minimize friction because of the transition.
3. Place a bigger emphasis on community.
4. Make the site responsive and accessible for mobile devices. For this, I would use my new UI framework, based on MooTools.

I've only created two image mockups at this point to get feedback before going any further. I've put them up on GitHub. Here are the mockups for a new front page and a documentation page (you'll probably have to enlarge them in your browser).

For the front page, I wanted to make it clearer what to do when you get there. The current page has a lot of text, which I wanted to reduce and streamline. I also felt that visually showing the logos of sites using MooTools is much more impactful than just using links. The footer, which would appear on every page of the site, would have dynamic links to the blog, as well as links to various social media accounts or communities which already exist. This will make blog updates more apparent, grow the community in more channels, and have the added benefit of more SEO power to the link targets.

The docs page is largely unchanged from its current form. I did remove the left column in favor of a two column layout to make more room for the actual content. The Core classes navigation would all be viewable by clicking on the gray "View All Core Classes" button, which would slide them into view. The large title across the top would also function as a breadcrumb.

So, all that said, I'd love to get your feedback. Do you love it? Hate it? Have suggestions for improvements? This is just a first iteration and the margins and alignment aren't all perfect yet, I just wanted to get something out there. The next steps would be to iterate based on feedback, produce more mockups for different pages on the site, and then to do a live prototype. It would also be helpful if someone could explain how the website is currently compiled, as that might have some impact on the design and implementation. Can't wait to hear what you think.

[Aaron Newton]

I love it. The big icons (below the logo) are a little too big for my tastes, but that's a personal preference that I'm happy to cope with on my own. More importantly is the fact that it pulls a lot of new content onto the page and makes it clear what resources are available.

Some small thoughts:

• I think the version number should maybe be on the download button.
• I might mention something along the lines that it's "ready for mobile"
• We should be able to feature the books that have been written about MooTools (I'm fine if mine isn't featured; it's outdated anyway)

--
 
---
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Andrea D.]

I agree it is pretty fine!

My two cents:

The version number within the download button and near a link to archived versions

The main icons maybe a little smaller

--

Andrea

[John-David Dalton]

Thank you so much Benjamin!
You're the kind of dev project leads dream of :3

- JDD

[Benjamin Kuker]

Thanks for the feedback, everyone, I'm glad you like the general direction. A couple follow-up questions before I update the mocks:

• My original intention was for the download button to just link to the download page, where you could customize your build and download older versions as well. I didn't put the version number on it because, in my mind, that implied just a direct download of that specific version, whereas the generic download label would be less confusing if it led to the download page. Still, that an incredibly small detail and I'm fine either way.
  
• I can definitely shrink the main icons. I think I want to add a fifth one in there for the docs page anyways, so that works.
• How would you feel about adding a "Resources" page to the main navigation? I didn't include the books on the front page because I thought they might be better suited for a page like that, but I could add them back in if people think the front page is the best spot for them.
• Would it be too spammy to include a link to my UI framework in the footer if the redesign utilizes it? The framework itself is open source, MooTools-based, and not a direct clone/port of Bootstrap, but it will eventually have an optional commercial tool/service for it as well. I've put a ton work into it and hope that it will eventually become the MooTools alternative to Bootstrap. Taking in your suggestion, Aaron, I was thinking about a link along the lines of "Made responsive with VM UI Framework". However, if people feel uncomfortable about that, I could leave it out of the footer.
• I forgot to add anything related to Media Temple. What exactly is the relationship? Are they a sponsor? Should I add something similar to the current site?

[Barry van Oudtshoorn]

I'd like to chime in re: the download button. I think you maybe need to have the main download button (perhaps with version number) just download the latest full minified Core, with a link below saying "customise" or "other versions" or something. Even better if clicking the main button started the download and landed you on a page explaining what it is you've just downloaded, and how to get started using it.

Also, I think the redesign as a whole looks great. For the docs, though, I find that I jump between classes much more than I jump around within the page -- so perhaps move the page contents into the combo box and list the classes out explicitly.

I also think it'd be nice to have a little bit more colour injected: the grey tones make the "download" button stand out nicely, but then it just becomes very grey... I don't think you'd need much -- just a few subtle highlights here and there would give it a little bit more vim, in my opinion. I think that the docs could certainly use colour to differentiate between the various heading levels more effectively: I can't tell at a glance that "Property: initialize" is a lower-level hading than "Returns" (although I can make that inference when I see "Examples" and "Class example" right next to each other).

--
 
---
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

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

[Erik Cervin Edin]

This is cleaner, 
nice work!

I agree that a redesigning the site would send a strong message. Or rather, that the site as it is doesn't look maintained. There's nothing on the site that gives the indication that the framework is being updated or worked on. Since most people will only see the MooTools website & not places like this Google group, I don't think it's strange people perceive the framework/community as 'dying'. Evidently from this group, however, the community is still very much active and I think it's important that this shows.

As you've mentioned before Aaron, the primary focus of MooTools has not been community, so I gather that valuable time & resources were probably less so spent on maintaining the website. I think it is important, however, to spend more time & resources on the MooTools website & its Social Media channels, as they represent MooTools externally. People will make superficial assumptions about the MooTools community and the framework, based on MooTools' online presence. I think this is a great first step in showing people that this show is still going on.

Btw, here are some Alexa stats:
http://www.alexa.com/siteinfo/jquery.com
http://www.alexa.com/siteinfo/mootools.net

I had no idea that jQuery had such a good site ranking, it's 761! (Moo is at 26,333)

jQ has a lot of sites linking in: 43,055 vs Moo's 5,971

A big reason for jQuery's success seems to be the SEO snowball like effect created by its large community. Constantly talking about, referring and linking to the framework, pulling in more and more users. As these users learn the framework, they post queries (pun intended), building upon the knowledge base and attracting new users. The circle repeats itself, building a Web 2.0 community that has become very effective at promoting, maintaining and supporting the framework. 

I think Moo has a lot to gain from a stronger community. A good place to start seems to be increasing the engagement of the existing community and getting out more user-generated content that relates to the framework, on top of keeping its external presence vibrant. This can be simple stuff - answering questions on message boards, explaining & linking to the documentation, providing alternative MooTools solutions to jQuery ones etc. Doing a little bit each person, and as a group, building a stronger community.

-my €0.02

But yeah Benjamin, loving the work, keep at it.

--

[Arian Stolwijk]

like

[Benjamin Kuker]

Thanks, Erik. What you wrote mirrors my own sentiment as well. I really feel like the community is the key thing to spark here. Sure, the Core code could use updates from time to time, especially with all the new devices joining the market, but it's pretty mature and has a sensible API. Personally, there isn't a ton I would change about it, though I have a few minor ideas. Really, though, I think that most of the future of MooTools could live on through plugins, which allows anyone to contribute to the ecosystem without needing to make a huge commitment. We all benefit from that. We have a good start with the Forge, but I think we could do even more.

The biggest part to growing and revitalizing the community, in my opinion, is to make it easier for new users to dive in. This is an area where jQuery has excelled. Even though MooTools is currently marketed toward intermediate and advanced JavaScript developers, I think the majority of web developers probably aren't there and simply want to download a plugin to make a neat widget on a page. Do you need to change the API to be more jQuery-like? Not at all. I think we just need to do a little better job of explaining things to developers who have no idea how to use or build out object-oriented classes, why they would want to do that, and how to use MooTools if you just want to include a plugin on your page. Aaron has done a lot of that with the MooTorial and with his jQuery vs MooTools site, but it can't hurt to have more.

Here are some ideas that I'd like to throw out there as a possible roadmap:

- Start with the redesign of the site to start regenerating interest.

- Pay attention to things like SEO and social throughout. Page title and descriptions, good anchor text, no missing content or funny redirects, microdata, etc.

- Rename the forge to plugins to make it more accessible and SEO friendly.

- Add social sharing widgets on the individual plugin pages and blog posts.

- Hook up all of the social media accounts so that they are updated automatically whenever a new blog post or plugin is added. We could even add a mailing list that sends a weekly digest through something like MailChimp.

- Expand the current demo suite with more examples.

- Use jsFiddle to put actual demos in the documentation for each class, with an emphasis on practical examples and best practices.

- Rework the Forge slightly to add a custom download feature. Basically, this would work the same way as a shopping cart: you add which plugins you want to download and when you "checkout", it grabs all of the necessary MooTools Core/More dependencies along with the plugins and packages it all together for you.

- Along with the above, maybe More could be broken up and moved completely to the plugins section to simplify things for new users.

- The plugin instructions are great, but we could also add a plugin template on GitHub that people can just fork whenever they want to create a new plugin.

- Similar to the current Forge, we could create a directory for MooTools resources that anyone could submit to: books, tutorials, videos, and a community showcase.

- Add more beginner tutorials. I'd be willing to write some and I'm sure others would too.

- Watch the MooTools tag on StackOverflow and similar sites and try to help out as much as possible.

- Submit a package to PHP's Composer and get an updated Ruby Gem for the latest builds of MooTools. I'm not familiar with them, but I'm sure Python, Node, and other languages have something similar. It would be great to have an interface in there for plugins as well.

- Personally, I'd love to see more resources develop around testing JavaScript. I know MooTools has a test runner, but I'd love more docs and tutorials on how to adapt that to my own code. If we could make testing more accessible, I think we could draw in a lot more professionals as well.

Obviously, I can't commit to doing all of that on my own, but I thought maybe I could start a discussion and maybe get the ball rolling.

[Benjamin Kuker]

Good suggestions across the board. I'll incorporate them in the next draft.

[Arian Stolwijk]

We've created a central place where people can contribute ideas and designs for MooTools:

https://github.com/mootools/website/wiki

And for these specific ideas: https://github.com/mootools/website/wiki/MooTools.net-redesign

[hartum]

*no fucking way to move this image :-P


Hello everyone

I agree that it is time to redesign the site, bearing in mind two main objectives, usability and self-promotion.

It seems important to separate these two issues in order to better organize work to do and design a strategy to be successful (by the way, very good target list Benjamin).

For promotion is essential to establish channels of communication between the Mootool's community and social channels (twitter, facebook, etc. ..)

For usability, there are a few points that I would like (please do not take these comments as a personal attack, not):

• Rarely homepage is a key page. [...] The purpose of the home page is usually the direct users of the authentic key pages, so we should focus our efforts on the design of the parts that are used, and then decide where we want to direct visitors. If someone from mootools core with access to the statistics could tell us what are the most visited pages, would be helpful
• Usually is a good idea to do some mockups, to decide which elements are present and in that place, before deciding other visual elements such as colors, fonts, alignments and other. There are plenty of online tools to make and share mockups, I suggest a few:
  - Mockflow
  - Mockingbird
  - Fluid IA
• I agree that the proposed design documentation, not comfortable. In my opinion it is more comfortable, 3-column structure in tree. Look at image at the top
  

I can help with mockups, design and Spanish translation.

Loose thoughts and opinions:
In my opinion the spirit of mootools should be a little more ambitious, enough of the topic:
"Mootools is for developers and jQuery is for designers who do not want to learn to program"

Mootools can do the same visual tricks on jQuery DOM, and also is a great tool for developers who want to do more serious things. Try to create a new topic:
"Mootools, great for designers and professional tool for developers"

I make reference to jQuery so, not because I look like an enemy to fight, I really do not think jQuery is an enemy, but if you think it is a model of success that we can learn several things. I do not know what the job situation in your countries, but in Spain I assure you that jQuery is a "de facto" standard and a requirement demanded in the job offers.
The idea is not to pit against jQuery Mootools but use their fame to draw attention to Mootools.

I do not want to enter the debate, "mootools is not about animations and changing colors, mootools is to do, blah, blah, blah ...." well that it is a multipurpose framework with incredible capabilities, but what caught my attention first were "the fireworks", and then discovered that there was much more.
The fact is that it is easier to attract people to the community if you first call your attention. It is difficult to show all there under the surface if no one is watching.


Another issue with which I disagree (sorry Benjamin) is to use a small and unknown CSS framework (VirtuosiMedia) for the layout of the site, rather than take the fame and the community behind Bootstrap. I think if one of the basic ideas of the redesign is to promote, using Bootstrap will make people realize that you can still use the Mootools library with Bootstrap. Again this is not to make enemies if not allies, to use force of contrary to our own benefit.


Let me know what do you think about all this.

Regards (and sorry about my english)

[Arian Stolwijk]

I see no reason to use Bootstrap on MooTools.net. Bootstrap is great for prototyping a website or quickly putting something together. MooTools.net should look professional and not something that is put together in a few hours.

[Lee]

1. Can we please make each page's TOC alphabetical? 

2. I agree with the jQuery points you make below. It would be great to have info on how to easily and quickly replicate jQuery's pretty tricks, and it might even be an idea to have some prominent info on using MT alongside jQ.

3. I would every sub-class (Request.JSON) to clearly state it is a sub-class, and to clearly link to the parent class. It took me ages to find the 'emulation' when first using Request.JSON!

[piotr_cz]

Hi, this looks great!

I like current website, but weakest point IMHO is that it looks like
Mootools stopped at 1.2.

I'd add as much of dynamic things as possible:
- Blogpost titles with introtext
- Newest / most popular forge items
- User group post titles (like in http://developer.joomla.org/)

Than some code examples with links to docs/ demos on front page for
best picks (classes, ajax, seleoctor, etc)
I think this is very important for fresh visitors

Like in
http://mootools.net/test/prime/
http://jquery.com/ ;)
or any almost repo at github

On Mar 20, 10:28 pm, Benjamin Kuker <cont...@virtuosimedia.com> wrote:
> As a result of a conversation in another thread about helping jumpstart the
> MooTools community and development, I thought I would try my hand at
> refreshing the look of the website. A couple things before I share the
> links to the mockups, though.
>

>    1. The look of the current website isn't bad. I've done my best to try

>    to capture the spirit of it in the mockups while still making it new.

>    2. This would be more of a facelift than a complete overhaul. I'm not

>    completely sure how everything is pulled into the site from GitHub, but I
>    don't think there would have to be any major content rewrites.

>    3. The purpose for the redesign is to show the community that MooTools

>    is still alive and active, while making some slight improvements.
>
> The primary goals are:
>

>    1. Make it easier for new users to figure out what to do and get started.
>    2. Maintain the same general structure for existing MooTools users in

>    order to minimize friction because of the transition.

>    3. Place a bigger emphasis on community.
>    4. Make the site responsive and accessible for mobile devices. For this,
>    I would use my new UI framework<https://github.com/VirtuosiMedia/VM-UI-Framework>,

>    based on MooTools.
>
> I've only created two image mockups at this point to get feedback before

> going any further. I've put them up on GitHub<https://github.com/VirtuosiMedia/MooTools-Website-Mockups>.
> Here are the mockups for a new front page<https://raw.github.com/VirtuosiMedia/MooTools-Website-Mockups/master/...>and a documentation
> page<https://raw.github.com/VirtuosiMedia/MooTools-Website-Mockups/master/...>(you'll probably have to enlarge them in your browser).

[hartum]

I was talking about use Bootstrap as base CSS framework, mainly for responsive layout, not as final CSS. ;-)
With some extra CSS code website could look as professional as we want.

Anyway I think the discussion about the look must come after, mockup discussion.

[Arian Stolwijk]

Which is why I made https://github.com/mootools/website/wiki

[pixel67]

That's a fine start!

[Dimitar Christoff]

On Thursday, March 21, 2013 11:02:17 AM UTC, Arian Stolwijk wrote:
> I see no reason to use Bootstrap on MooTools.net. Bootstrap is great for prototyping a website or quickly putting something together. MooTools.net should look professional and not something that is put together in a few hours.

Using bootstrap does not mean using the bootstrap look at feel.

start here: http://antjanus.com/blog/web-design-tips/user-interface-usability/customize-twitter-bootstrap-into-themes/

there are so many bootstrap theme generators etc but that's not the point. no matter the polish, bootstrap is - at its core - a responsive grid based OO CSS framework. It has a number of useful mixins and predefined styles - but neither of them need to be employed. the semantic markup and expressive class decoration on elements that is familiar means a far greater number of people will be able to contribute and maintain this than compared to a bespoke or relatively unknown framework. you should also look at bootstrap 3.0-wip branch, it's becoming a lot flatter / google+ ish now, which means more generic and less familiar.

there are enough smart people around here and talented designers that have what it takes to alter bootstrap and make it less twittery and more ZING.

[Benjamin Kuker]

While Bootstrap is a great project, I would recommend against MooTools using it for the following reasons:

1. It's jQuery based and it's closely affiliated with jQuery in terms of public mind share. If MooTools were to start using it, I think it that the perceived uniqueness of MooTools would be greatly diminished. We're simply not a part of the jQuery ecosystem and I don't think we should strive to be.
2. There are a number of Bootstrap ports to MooTools, but to the best of my knowledge, none of them are complete ports or drop-in replacements. I also don't think any of them are compatible with the latest version of Bootstrap. Using Bootstrap would mean extra work in developing the missing parts and upgrading one of the ports to the latest version, time that could be spent doing something else.
3. In a jQuery group, the argument that Bootstrap should be used because it is popular would carry more weight, but for a MooTools group, I think that it means less. Though I'm sure some do, I would hope that not too many people are using both Bootstrap and MooTools on the same project, at least, not without a port.

I'm not sure how closely you've looked at VM UI Framework, but I think there are some valid reasons to use it.

1. It's 100% MooTools based. No need for converting scripts or writing missing pieces in.
   
2. Not only does it have feature parity with Bootstrap, but it has additional features as well. Charts, form validation, social widgets, and form element replacements are just a few of the features that are included that aren't present in Bootstrap. I would argue that it's also more semantic than Bootstrap. For example, button classes: "largeInfoButton" vs. "btn btn-large btn-info". Many of the plugins that it shares with Bootstrap like modal windows and the slideshow also have more features and options.
3. Despite the added features, the page weight is going to be less in most instances. Bootstrap uses LESS, which has some advantages for development, but in practice produces a lot of extra code. My framework is carefully optimized CSS only, which reduces the page weight considerably. Being CSS-only also makes it more accessible to developers who don't use LESS. Because of MooTools, most of the plugins are either at about the same file size or less than Bootstrap as well.
4. VM UI Framework is well documented. It is unknown because it's still in beta and I haven't been promoting it much yet, but you're not going to have a hard time figuring out how to use it.
5. There are currently 3 templates to choose from, one of which is a skeleton template, made specifically to be customized. This means you don't have to spend a bunch of time ripping out code you don't need. You simply add to the base.
6. It's completely modular. Take what you need, leave what you don't.
7. It gives the MooTools community a viable alternative to Bootstrap. Yes, it's still in beta, but any issues logged and any bugs fixed directly benefit the community at large. Bootstrap is accelerating jQuery's momentum. MooTools could differentiate itself by offering and supporting another responsive UI solution. Coalescing around Bootstrap isn't any different than having only one JavaScript framework or only one browser. In the end, I think the competition would be to everyone's benefit.

[Erik Cervin Edin]

Hartum, while you are correct that the home-page serves little when it comes to functionality, it still represent the framework externally at the barrier of entry. I'm not saying we need to focus most of our energy on the home-page but I think it's crucial it's an accurate representation of Moo. Currently, you get the feeling it's stuck at 1.2, as piotr_cz pointed out, and that's not good. If we don't do a good job with the facade, we risk people leaving before they've had a chance to dive into the interesting parts of the framework.

I think the home-page is of paramount importance when it comes to attracting new users and strengthening the community. While the documentation needs to be the focus, as it's most valuable to the community, the front-page mustn't lag behind. As a community, we thrive with the influx of new people and ideas. Let's not have the front-page deflect people.

I whole-heartedly agree with this:

-In my opinion the spirit of mootools should be a little more ambitious, enough of the topic:

"Mootools is for developers and jQuery is for designers who do not want to learn to program"

I don't see the MooTools community gaining anything from this attitude except for looking like a whiners-club.

Another good point

"Mootools can do the same visual tricks on jQuery DOM, and also is a great tool for developers who want to do more serious things. Try to create a new topic:
"Mootools, great for designers and professional tool for developers"

MooTools needs to better explain its advantages, 'it's better' is not an argument.

Some concrete examples of problems Moo excels at solving would be nice. 'It's more like JavaScript' is too obscure. Why is this preferable? 

As many have already pointed out, the core is good code, where we could make gains is explaining the framework to the uninitiated.

I agree with piotr that some dynamic content would be nice. For example, how about showing the commit history? Even if the site itself doesn't change, it would be nice to show people what's going on behind the scenes.

As for which framework to use, I'll leave this up for discussion to folks who are more initiated.

/e

[Sanford Whiteman]

I 100.00% support using VM UI for this. It is an accomplished effort, and having built it even while MooTools was in the "publicity crisis" we are currently addressing, I think Benjamin deserves this reward. And all the better if people get come to know the "VM UI look" on other sites over time.

-- S.

[Tony Brown]

Going to look at VM UI and make some mockups, I'm pumped up for this \m/

On Thu, Mar 21, 2013 at 4:56 PM, Sanford Whiteman <sa...@figureone.com> wrote:

I 100.00% support using VM UI for this. It is an accomplished effort, and having built it even while MooTools was in the "publicity crisis" we are currently addressing, I think Benjamin deserves this reward. And  all the better if people get come to know the "VM UI look" on other sites over time.

-- S.

--

---
You received this message because you are subscribed to a topic in the Google Groups "MooTools Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mootools-users/fz2dbZE-iOk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to mootools-user...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

--
Sincerely, 

Tony Brown

twitter:   https://twitter.com/pixelBender67

 

[Benjamin Kuker]

So after some chats on IRC, it looks like there will also eventually be some micro-sites: Prime, Elements, Slick, and Agent. Something to keep in mind for the design.

[underscore_05]

I really like that my liked framework is now eager to update design of the flahship of Mootools, I cant wait for it.
On the first look at Mootools Website it really looked liked it is no longer maintained.
And im sad because I started to like Mootools now, though i'm just a newbie.
I am proudly talked about mootools in my fellow workers and young students but i dont think they like the websites.
BTW, I really liked JQuery in my school days because of its dedicated UI, which is JQuery UI.
But like other newbie. I tend to be a copy paste addict and its really not fun at all and thats why i really dont learn javascript and what i learned is to copy and paste and guess, guess, and guess.
Maybe for the new design of Mootools website,
it will be nice if the documentation will be more obvious on how to work with it (real life example or a link to some jsfiddle/demo page of mootools and not just code with colors).
And also a list overriden methods and available methods that has been inherited by the child class (though its already stated on top* of the documentation, i think a back track link will be more nice). 

Noong Huwebes, Marso 21 2013 05:28:57 UTC+8, si Benjamin Kuker ay sumulat:

[Tony Brown]

How do you guys feel about using the Foundation Framework, like mootools it doesn't get it's fair share of the limelight?

--

 
---
You received this message because you are subscribed to a topic in the Google Groups "MooTools Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mootools-users/fz2dbZE-iOk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Tony Brown]

Nevermind, just remembered, jQuery is a dependency >_<

[Dimitar Christoff]

On 21 March 2013 20:20, Benjamin Kuker <con...@virtuosimedia.com> wrote:

While Bootstrap is a great project, I would recommend against MooTools using it for the following reasons:

1. It's jQuery based and it's closely affiliated with jQuery in terms of public mind share. If MooTools were to start using it, I think it that the perceived uniqueness of MooTools would be greatly diminished. We're simply not a part of the jQuery ecosystem and I don't think we should strive to be.

Really? how is a CSS framework affiliated with jQuery? The few plugins they offer are nothing but sugar to supplement the rest. Also of note, Bootstrap's co-creator Jacob Thornton (aka, @fat), is a MooTools alumni and ex contributor. 

1. There are a number of Bootstrap ports to MooTools, but to the best of my knowledge, none of them are complete ports or drop-in replacements. I also don't think any of them are compatible with the latest version of Bootstrap. Using Bootstrap would mean extra work in developing the missing parts and upgrading one of the ports to the latest version, time that could be spent doing something else.

True enough - and the reason for that is that the js code in bootstrap is not meant to be production-ready, that was never he goal (or at least, not at the start). It was simply there as a starting point and as a reference. Converting it to mootools "as is" is not at all difficult - but code conventions and best practices as well as extendability in MooTools means they can be improved a lot and extra configurations and functionality can be added. 

1. In a jQuery group, the argument that Bootstrap should be used because it is popular would carry more weight, but for a MooTools group, I think that it means less. Though I'm sure some do, I would hope that not too many people are using both Bootstrap and MooTools on the same project, at least, not without a port.

Also, disagree, not at all applicable. Any mootools.net js func should be powered by elements/prime/moo.fx to showcase the lib.

 

I'm not sure how closely you've looked at VM UI Framework, but I think there are some valid reasons to use it.

1. It's 100% MooTools based. No need for converting scripts or writing missing pieces in.
   

None of these scripts need to be on the site.

1. Not only does it have feature parity with Bootstrap, but it has additional features as well. Charts, form validation, social widgets, and form element replacements are just a few of the features that are included that aren't present in Bootstrap. I would argue that it's also more semantic than Bootstrap. For example, button classes: "largeInfoButton" vs. "btn btn-large btn-info". Many of the plugins that it shares with Bootstrap like modal windows and the slideshow also have more features and options

I would argue this is actually worse - it's much more rigid and does not allow for mixin classes to add style, it's a completely different philosophy. 

1. .
2. Despite the added features, the page weight is going to be less in most instances. Bootstrap uses LESS, which has some advantages for development, but in practice produces a lot of extra code. My framework is carefully optimized CSS only, which reduces the page weight considerably. Being CSS-only also makes it more accessible to developers who don't use LESS. Because of MooTools, most of the plugins are either at about the same file size or less than Bootstrap as well.

Bootstap .less is actually extremely modular. All you need is to edit the @import statements to trim it to the correct modules. You abstract your changes in your own @import file, overriding any stock variables.less and mixins.less.

You cannot seriously suggest that having a CSS-only framework makes it easier to work with. On the contrary, I would say it's the exact opposite. CSS per-processors are the future and it won't be long before browsers adopt native SASS/LESS etc. If you think it makes it harder for people to consume/contribute, just look at Bootstrap - by FAR the most starred repo with nearly 50k likes and biggest number of forks. People learn and move on...

I am not trying to say anything at all about your framework, I have not looked at it and I am sure it's great - but the point is about how Bootstrap is being used (or not being used).

Best regards,

--
Dimitar Christoff

"JavaScript is to JAVA what hamster is to ham"
@D_mitar - https://github.com/DimitarChristoff

[Tim Wienk]

Benjamin, I took the liberty of adding your mockups to
https://github.com/mootools/website/wiki/Prime . I realise they're not
Prime mockups per se, but as mockups it fits just as well. :-)

--
Tim Wienk, Software Developer, MooTools Developer
E. timw...@gmail.com | W. http://tim.wienk.name

[Benjamin Kuker]

Okay, so I did some revisions based on everyone's feedback and placed them on the redesign wiki. I also tried to incorporate some of the other ideas on the wiki as well. Please let me know what you think of the changes.

On Wednesday, March 20, 2013 2:28:57 PM UTC-7, Benjamin Kuker wrote:

[pixel67]

Ben, I see no reason for me to submit my ideas as you have done a superb job!

Do you have a prototype yet or are you still in the discovery stage?

[Benjamin Kuker]

Thanks. No prototype yet. I'd like to get more feedback, do a little more iteration before heading down that road. Getting the dev team's buy in is a must as well. I'd hate to start something only to have them want to go in a different direction. In talking with them on IRC, it seemed like they wanted to build the site with Node.js. If that's the case, I would definitely need to coordinate closely with someone as I haven't used Node. I could still create the frontend pretty quickly, especially with my UI framework, but some of the implementation details might change depending on how the site is put together.

[Tony Brown]

Let me know, I've been hacking on node since it came out and know my way around the tools (i;m fairly new to javascirpt so my programming skills are not on any of your levels' but I know all the tools that are used to work with node) I have hacked into several node CMS, this is one of my experiments: usefulninjarobot-1.herokuapp.com and have another running on nodester which I can't seem to boot up at the moment due to noderster's crashing >_<. 

Just coming back to mootools after taking some time to learn JavaScript better :)

and would really love to see moo get it's fair share in the community so I am here to help/

--

 
---
You received this message because you are subscribed to a topic in the Google Groups "MooTools Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mootools-users/fz2dbZE-iOk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Benjamin Kuker]

Sounds good. Perhaps in a week or two, once things get finalized a bit more, we could chat about some of the specifics.

[Tony Brown]

Ping me any time, and, again ,love what you have so far, clever of you not to use any colors just yet :)

[Benjamin Kuker]

Well, I think Pietro and Rasmus get credit for that, I just kind of expanded on their ideas within the framework of what I already had.

[adidi]

Really nice work ! looks very good (are you a designer and a programmer btw ?)

My remarks about design:

1. The gray buttons ("Demo Tour","Mootourial" etc... in homepage and combobox in docs page) does not look good. it's too much pothoshop-ish - I suggest just to do some simple beautiful css3 buttons (like twitter buttons for example) no need to try too hard with the shadow and border - it's look a bit unclear.

2. In the home page I didn't like the multi header menu - top links and bottom links(Download,Docs,Demo) - I think it should be one or divided in different areas

3.Too bad the design is not for the new prime project - I think this is what mootools going to be focus on in the closest future no ? 

About your list on how to help - my modest support to the community is be very responsible on stackoverflow regarding "mootools" tag (http://stackoverflow.com/questions/tagged/mootools)  - If you see - there isn't any question left open or uncommented - I am really trying to solve any question asap so people will see how devoted this community to the project.

I am now also learning and understanding the new prime mechanism with the commonjs methods to help in this project and hopefully to be a key developer one day.

Kudos for your amazing work - well done !

[Benjamin Kuker]

Thanks for the kind words and the feedback. I do both programming and designing, but I have to say that design has been a bit more of a struggle as it isn't as objective. It wasn't until I did a whole bunch UI/UX research that I started to catch on a little. I'd like think I'm getting better, but there are still some designers that blow me away with their creativity and composition.

Regarding your feedback:

1. There are a couple reasons why the buttons might not look the best. First, if you were looking at the mockups on the wiki, they aren't full-sized, so that could have some impact. Look at the raw images on my linked GitHub project for the full size. Also, I use Fireworks. It's great from a workflow perspective and it's better than Photoshop for quickly doing web mockups (IMO), but it has some limitations. I usually find that when the design is actually coded, it's crisper and looks a lot better than the mockups. I'll make sure they look good when it's actually implemented.

3. These designs actually take Prime, Elements, et al into consideration. It might have been easy to miss because they were at the bottom of the wiki page, but there are mockups for each of the new projects.

2. I didn't explain it on the wiki, but perhaps I should have. The black secondary menus are project specific. So, the Docs link on the main MooTools page will link to the MooTools docs, but if you click the same link on the Prime page, it'll go to the Prime docs. They are separated like that because they don't apply to all projects or pages, so it didn't make quite as much sense to include them in the more global menu up above. In fact, perhaps on some pages, that menu should be removed altogether.

Kudos to you for helping out on StackOverflow and for diving into the new stuff. We definitely need all the help we can get for building the community.

[kangarolf]

Great start on the redesign, I like it, more modern and more accessible and
informative.

As a javascript newbie who came to the framework scene 8 odd years ago and
was faced with jQuery or Mootools I ended up with Mootools, the reason was
mostly because the demos were clear and I could recreate them easily. jQuery
at that time was messy and all over the place and was hard to understand
what files you needed where, I found it very opaque.

I think now the situation has switched and if I was coming fresh to decide
on a framework I might well choose jQuery simply because of the community
and info, what you can achieve quickly is very evident.

I'm glad I went with Mootools now but I really dont think I would choose it
if I were in the same position today.

So my 2p is that you have a showcase area which really lets people see with
well commented code what you can achieve....perhaps bang heads together to
come up with the things people always want to do when starting, but are not
that obvious how to do till you understand the framework better;

1 - perform multiple effects on elements with delays
2 - create tabs, sortables and other UI elements
3 - image rotators with pre-fetch and fadein/slidein effects (alot of this
is CSS as well but its something people want and expect)
4 - image gallery
5 - ajax demos
6 - hiding and revealing elements (issues around display, visible and when
.fade('in') works and when it doesnt)

It would also help new people if 'best practice' methods were used
throughout. When I was just starting I was confused by the various ways
people could achieve the same thing, especially in terms of functions and
looping through elements and adding events etc. This is, I think, a
reflection of how Mootools enhances but doesn't hide javascript, but
confuses people the first time round.

Exciting!



--
View this message in context: http://mootools-users.660466.n2.nabble.com/Moo-First-attempt-at-a-MooTools-website-redesign-Thoughts-tp7581284p7581321.html
Sent from the MooTools Users mailing list archive at Nabble.com.

[Andree Christaldi]

Looks ace

[Tim Wienk]

Please do not go too much in-depth with all this yet, at the current
stage I'm confident there won't be a finalised website in two weeks.
We are still just exploring and looking for the right direction and
gathering ideas. Actual implementations (let alone platform or "CMS"
decisions) are not even point of discussion yet.

Meanwhile a small word of concern regarding the design, as Valerio has
mentioned (see https://github.com/mootools/website/wiki/MooTools.net-redesign
), what we're looking for is a rather light design, a lot of
whitespace and clarity. While I think your designs are rather nice in
general, they don't seem to follow that principle as much as the other
mockups in the Wiki do.

There is some discussion and collaboration regarding the layout
aspects taking place in IRC (#mootools on Freeenode, or
irc://chat.freenode.net:6667/mootools ). You can use your favourite
IRC client, or https://webchat.freenode.net/ if you'd like to join.
Feel free to ping Timmeh or arian (or just ask in general) in that
channel if you'd like a quick update, when someone is around they'll
poke you back, I'm sure. (This goes for everyone, but it'd be
especially nice to see Benjamin there. :-) )

Furthermore, there hasn't be a lot of activity on the mailing list
regarding the redesign, since we try to collect the different ideas
and remarks in the Github wiki, feel free to add your own ideas as
well: https://github.com/mootools/website/wiki/_pages . I'm really
impressed with the level of the designs and designers we're seeing,
the final outcome will surely be a combination of multiple people's
designs (in fact, most of the current mockups in the Wiki are already
results of combined ideas).

[Tony Brown]

Excellent!

--

---
You received this message because you are subscribed to a topic in the Google Groups "MooTools Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mootools-users/fz2dbZE-iOk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Aaron Newton]

I've been pretty quiet so far on this thread (except up at the top where it got kicked off) so I'll share a few thoughts:

1. I love that the main drivers of this thread are not core MooTools devs. It goes to the point about you guys (and girls?) taking MooTools to the next level and making things happen. And here you are!
2. I'm content to stay out of any of the decision making but I'd like to throw in my 2 cents for Bootstrap. Here's why:
1. I use Bootstrap all the time (http://www.thanx.com and the mobile implementation of our app at http://app.thanx.com both use it). Your stuff doesn't need to look anything like Bootstrap to make use of it's goodness.
2. It's a robust and mature CSS framework and everyone else is using it. I think it might actually be a GOOD thing to show that MooTools can work just fine w/ Bootstrap.
3. The default styles, though a bit boring, are well designed. I can't stress this enough. You have to try and make ugly things with Bootstrap. I can't say that about most other CSS frameworks.
4. I have an implementation of most of the Bootstrap features (http://github.com/anutron/mootools-bootstrap). It may need a little bit of updating for the latest version (I don't think so). It does not use the same JS signature; it's not a 1:1 port of how you invoke it (it's more of a MooTools style). Use it or don't, but my point is only that implementing it wasn't that hard.
5. Avoiding Bootstrap because they implemented a version of it w/ jQuery is a silly reason.
3. I'm so happy and proud of this community. Keep it up!

--
 
---

You received this message because you are subscribed to the Google Groups "MooTools Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.

[Tony Brown]

We love mootools Arron, thanks for all your hard work and time :) !

[Tony Brown]

I actually like Bootstrap, but as I said earlier, imo Foundation 3 + 4  are just as good if not better, or am I mistaken ( is this why Bootstrap is so much more popular?), what are your thoughts?

[Aaron Newton]

The base bootstrap stuff (all the mixins and basic fonts and whatnot) are superb. Having not used Foundation I couldn't say if it's as good or not. I will say that (sorry to anyone here who prefers Foundation) Bootstrap is a nicer looking UI framework (IMHO) and it's also very actively maintained. That last one means a lot. I have a lot of faith in it being updated and maintained by the Twitter team.

[Tony Brown]

Zurb is the company behind Foundation and the devs that made Boostrap admit they got it from Foundation :) but I agree, there is no need to worry about Boostrap not being maintained that's for sure.

Thanks man!

[Andree Christaldi]

I love the bootstrap stuff. Super easy and clean. Why not use it. 

[Benjamin Kuker]

So after chatting some on IRC with the dev team, it looks like a version of Pietro's designs will be what will be used going forward. Still, thanks all for the kind comments and feedback, they are much appreciated. And just a heads up, this is a longer process, so despite seeing detailed mockups, there is still a lot of work to be done before anything would actually be implemented and live. With that said, please direct your feedback to the work Pietro has done so that we can get the best design possible for the new site.

[Aaron Newton]

Just looked at them for the first time. WOW! Great stuff! I can't wait!

--

[Eric Patrick]

My 2 cents:

I believe the MooTools site should showcase demos of multiple UI frameworks.  Bootstrap is a must because it is indeed full of goodness, actively supported, and wildly popular.  VM UI looks awesome, and is a great showcase of how one can leverage MooTools. 

As a parallel, my company offers a document imaging module integrated in our product suite.  It's interfaced based. We include our own imaging (based on Amazon S3), and have plugins for several of the major vendors. I love when our clients choose our own version, but if they have money and talent invested in something else popular (e.g. FileNET), I want to make it easy for them to pick our products (without worrying about building FileNET integration). Having that interface out of the box is a huge selling point for us.

My thoughts on 'interfaces' (wrappers, whatever we want to call such plug-and-play offerings) we might want to feature on the Mootools site to encourage others to choose Mootools:

• Bootstrap (with Aaron's behaviors, or with exact jQuery replacements?)
• VM UI (native Mootools!)
• Mapping providers (Google, Bing, MapQuest, Yahoo) ?
• Facebook / Google+ / Twitter / LinkedIn ?
• Google Visualizations ?

Other thoughts?

Eric

[Arian Stolwijk]

Just a heads up, Pietro pushed his designs and a first html / css demo to https://github.com/mootools/website

The html / css might have to be redone, since this was simply a quick prototype.

So now we're at the implementation stage: https://github.com/mootools/website/wiki/Implementation

The website will run on node.js. I think using Express would make sense. Personally I like Jade and Stylus, but anything else would work too.

It would be cool if someone could set something up. If that's too much I can do it next weekend so it gets easier to iterate from that.

[Arian Stolwijk]

Hi, this is a start: https://github.com/arian/microsite

Some features need to be ported from https://github.com/arian/prime-website.

Missing features:

- Documentation page (can be ported from the linked prime-website repo)

- Guides (content as routing, preferably written with markdown)

- Section for the other projects, starting with elements, moofx, wrapup

[Tony Brown]

I like it, nice clean look ,the font is beautiful !

[Arian Stolwijk]

Little update: https://github.com/arian/microsite#like-to-help

Let me know if you want to help out with something or if something doesn't work. 

[Arian Stolwijk]

Did another round of restructuring the code for the websites: https://github.com/arian/website

Installation is perhaps the easiest with https://github.com/arian/website#vagrant or otherwise https://github.com/arian/website#installation

Any help is really welcome! https://github.com/arian/website#like-to-help

[Alain ANDRE]

Hi guys,
I first have to thank the mootools community as I'm really new to it. I'm using it for now a couple of months for a project I originally made in JQuery. I think my experience can be used in this new site.
I'm always looking for new technologies and methods to develop, this is why I used JQuery first : I was lost and it gave me the ability to do quick things with good looking in few lines. But It was too linked to it's UI framework that I did not really like (every site look the same now), wasn't using Object Oriented the way I like and a bit too much Microsoft new pet.

So I started to look for a better solution and I've found Mootools code more like Object Oriented I like, free of UI and more flexible. So I adopted it. The thing I really liked in the doc site is the fact you have the classes grouped by theme on the left and the method on the right, it's a real clear visualisation of the framework. One missing point was a link to the top of the page as the doc can be long to scroll up.
I noticed some missing things compare to the JQuery. It's not really missing as you can do it yourself, but it should be abstract options to save time. For example in the drag and drop, the possible fact of cloning the object or to put it back to it's origin (I use CSS3 transition btw.)

I like the fact Mootools is flexible, not linked to a specific UI and really Object Oriented, I think this should be really clear at the opening of the site because lots of people are lost and don't know if it's better for them to use JQuery and Mootools or witch are the differences even if there is some blogs about it, it's not clear.

[dukeofgaming]

I think this is exactly what the community needs :)