felix

Hi Diogo, thanks for your kind answer. I'm "not really" impacient as i understand that this is quiet a complex topic to deal with (at least if you're not coming from a frontend-dev background like me). I can't expect to just "throw my thoughts in" and have people think about and engage with them it as if they had nothing else to do. But yes: I wanted to push this a bit further and give some more input to discuss about. IMO it's always good to have some (maybe controversial) foundation to discuss about as a starting point. Just looking at a "nice design" and literally asking people to start a discussion about a "good frontend" was propably not enough as design (for some) is somewhat subjective. People tend to focus on details instead of the topic as a whole. So if there is a big list of consumptions maybe someone will engange for some specific thought or technology quicker.

Since there were no further replies I thought i might share my Ideas concerning "what would be a perfect frontend for the backend" from a technical point of view. Again: I started to code some stuff, took a step back and thought it would be interesting to get some input on my considerations first. This list is not meant to be complete but only a preliminary result of my current thoughts: What could be improved on the current technical setup of the backend? Modularity Not only PHP but CSS as well as Javascript should be modular. To do this "right" there should be some considerations about how things are structured and the way modules inject their assets into the system: Modular Javascript: My proposal is to use a module based javascript loading technique. Until EcmaScript 6 modules will finally have a broad support in the majority of browsers the way to go here would be UMD (or namely require.js). There would be several benefits from using this kind of loading technique: The Global Namespace would be much less polluted, Scripts would only be loaded when they are needed and multiple files can be loaded in parrallel. Furthermore there this technique ist "non blocking". This means: While loading scripts the browser continues rendering the frontend without having to wait for all assets to be completed. The core modules could be combined into a single file to minimize requests and speed up the application even more. Modular CSS: From my point of view an OOCSS Architecture (BEM, SMACSS to name a few) would also give us several benefits. Current modules often have to fight a "!impoprtant war on specifity" with core components due to the fact that there are several pretty specific selectors. This could be eliminated by using a flat, object oriented, reusable set of classes that can be extended. To give an Example of this here is some CSS from the default theme: .PageList .PageListItemOpen > a.PageListPage { color: #000; background-color: #ffffdd; } in BEM Syntax this would be: .pagelist__item--open .pagelist__page { color: #000; background-color: #ffffdd; } To alter this and avoid more descandant selectors you just add another class of .pagelist__page--myfunkyalternation and thus can see by the name it's a changing the page element. Modular "External Frontend Components": I personally like using bower to manage external frontend ressources. It really simplifies the way of downloading and updating them. There are some things to consider when it comes to structuring them, though. Performance Not only the "frontend" part of the Website / App you're about to build should be fast. There is a huge demand for responsive backends not only when it comes to displaying and using them on mobile devices. Most people that left the ModX community (and i'm sure there are others facing the same problem) did this because of it's sloppy and slow backend. While the processwire is stunningly fast now, there are always some things to tweak and optimize On a sidenote: There has been quite a buzz about this in the last couple of months (as mentioned in this thread) which could also help market PW and "ride this wave". Btw: My co-worker just sent me the link to a standalone PHP asset optimisation & manipulation library. This fits in here quite well: http://mun.ee/ Accessibility This is also a huge one. Modern Applications should be as accessible as possible. Consequent usage of WAI-ARIA, meaningfull / semantic Markup and a bunch of related a11y techniques would make the backend more accessible for people with disabilitys. This is also a "Killer Marketing Criteria" as most western governments and their organisations have to put a special focus on choosing software that is accessible for anyone who works with it. Currently there aren't many (Open Source) CMS which match these criterias well. Testing There should be (frontend) tests for all crucial core components. This is also something which can be used for marketing when it comes to CTOs making decisions about whether to use a system or not As stated above this list isn't meant to be complete (i didn't mention grunt which is awsome for simplifying some of the above tasks for example!) and subject to be changed and updated with great Ideas from the community which are missing until now. Having said that: Your Feedback is greatly appreciated!

Thanks a lot! I'm about to post something on this in a few minutes (current status: writing )

Well. Even if no one seems to be interested i'll keep updating this if i stumble upon interesting links. Maybe this will help someone in the future Here we go. How to prioritize visible content: http://www.feedthebot.com/pagespeed/prioritize-visible-content.html

Fira would be a pretty good choice as it is open source and designed for the web (even looking good in chrome / windows). If you like to preview how it might look in PW: I used it for my "Modern Admin Theme" Design

As some of you might have noticed recently there has been a large "Frontend Performance Talks Offensive" (not only) by Google Engineers. Here are some high quality (regarding content) Videos which i enjoyed very much and thought you also might be interested in. A Rendering Performance Guide for Developers by Paul Lewis: Performance Tooling by Paul Irish Your browser is talking behind your back by Jake Archibald Gone In 60fps – Making A Site Jank-Free by Addy Osmani http://addyosmani.com/blog/making-a-site-jank-free/ Any suggestions for more interesting performance related stuff are welcome!

Thanks a lot ryan! I can't wait to hear more details. It's 2013. What do you think? Sure it will be responsive! For a "normal" (consumer) website i most certanly would have done a "mobile first" design. But for me processwire is a software that is used by "professionals" as part of their work (either developing or creating content). So i created it with "desktop first" usage in mind as most people are using some sort of desktop computer for their daily work. "Mobile optimization" will be done while actually coding the theme (though i did think of several things performance wise while designing... if you're interested in some really cool videos and links i'll open up a topic in "Dev Talk" as this is a little bit off topic). Thanks!

Hey apeisa, thanks a lot for your feedback which leaves me sitting here with a big smile Quality frontend code is in fact something i'm really passionate about. In my mind i'm already doing some nice ux stuff as well as optimizations concerning a11y to existing markup and scripts while introducing some "up to date frontend stack" (grunt, sass, bower).... But for now let's wait for some more Feedback to come.

Hi Everyone, the last days i read a lot about the ongoing process of "modernizing" the admin theme, adding some features and getting some marketing buzz from people who aren't currently aware of processwires awesomeness due to the fact they didn't like the current admin theme. I must admit that at first was one of those "design oriented" guys and didn't dig deeper into the system because i didn't liked it's look & feel (or at least i thought it doesn't look "professional" enough to present it to our customers). Fortunately a colleague of mine finally managed to convice me giving pw a second try. After digging deeper i started to really like the concepts behind it. I tried different admin themes and git stuck with "ergo" which we currently are using on several pw instances. Although i weren't completely happy with it's look and feel on several details (but that's just me: i never heard one of our customers complaining ). The Idea of doing a theme by myself started to grow in my mind. After doing several layouts that "just beautified processwire to my taste" (i can post a "design evolution summary" if anyone is interested) i took a step back and started doing some more conceptual work and research. Specifically i thought about which "personas" are using processwire and for what reasons they are using it. Also i tried or looked at screenshots of some more "hyped" systems (ghost, anchor, craft...), asked out some (dev) co-workers and others who are content editors (which are the two main "groups" of personas imo) what parts of processwire could be done better or used in a more efficient way. The good (but not surprising) news is: There were almost no complaints about the current features. Long story short: With the "benchmark" in mind and some feedback i again started layouting. I rearranged some buttons, menus and tried to give processwire a more modern, clean and "up to date" look. But before i'm going to code all of this i wanted feedback from a broader audience so i can propably fix or correct things that you as everyday users aren't happy with. Here we go: I used the "w" of the processwire logo as a "picture mark" as it is pretty unique and can easily be recognized and remembered (You could also use this as a favicon). I kept using "processwire colors" for brand/product recognition (i know ryan stated people are complaing about them) but also tried to use them in a very minimalistic way so there is nothing that distracts editors from the content. I chose the menu to be positioned right for two reasons:1) Content first! The most part of work in processwire is editing and creating content. So why shouldn't content "rule" and be the first and most important thing (at least for LTR Readers)? 2) With the buttons and the menu both at the right side there is a "cluster of functionality" which makes it more efficient: Shorter ways for eye- and mouse movement, less things to "overlook" when actually editing content. The pages options within the tree are hidden (again: reduce visual complexity) into a dropdown with only the most commonly used one (edit) beeing shown (this should be configurable). The Font is the beautiful Fira from Mozilla <3 The messages are displayed "growl style" and can easily be closed by the user (or close themselves after a certain amount of time) I chose to use the content of ryans "new theme" example screenshots to make it easier comparing them in terms of visual hierachy. As you scroll, the buttons on the top will pin and scroll with you. This way it's always possible to save or view the page at any scroll position (the save/publish buttons are part of a module that's currently in devlopment here). The bar at the bottom will contain some shortcuts as well as less frequently used / system related stuff (i.e: user profile and logout). "Zen Mode" with closed menu. Just you and your content For those who like it bright: An example of an alternate version which is even more minimalistic.From my point of view there are some things still missing. I thought a lot about including a possibility to open the page tree from everywhere (as in Nico Knolls Dark Business and the ongoing Discussion in the Two column admin theme concept). I think this might be more effective to just test it from a ux perspective when actually coding the theme. My Idea is to build a static clickdummy and put it on github before actually releasing a "real" theme (with all the logic / js work to be done) to do some usability testing. Thanks for reading and i hope there will be some feedback! Best regards, Felix

WOW: Very nice, friendly and clean Design. I especially like the use of subtle shadows, the 3d buttons and how you are using the curved angles! From a frontend POV: You could save a lot of requests and kilobytes (500!) by minifying and gzipping your js/css resources (i'm using grunt for concatenation and minification). And you should definitly use schema.org data to enrich your content for search engines!

@MatthewSchenker: Thanks a lot. We were searching for a CMS/CMF that completely fits our needs for quite a long time. We used to have our own, properitary CMS but quit developing it for several reasons. Afterwards we were using the usual suspects (Typo3, Wordpress, ModX...) but never were really satisfied with each of them. I think we finally found what we were looking for and will be happy contributing stuff to the community (in fact we've already started to ). @NoDice: If it inspires you that's propably the best thing that can happen. Thanks a lot!

That's right. Although we only used it's grid part.

http://www.michael-wessel.de/ - the website of a german IT service provider - is now powered by processwire. By the way: Some of the most recent work of the agency i work for is and (most likely) will be done using processwire. Me and my colleagues (some of them are registered here, also ) are pretty excited about it's speed, simplicity, community, ease of use and last but not least: the awesome API. So: Expect some more examples (as well as plugins and admin-themes) to come! Best regards Felix

I also love where this is going but i think there are some issues concerning usability (as mentioned above) and code quality (css,html). If I'm allowed to i would love to do a remix (or contribute)!

@apeisa have a look at https://github.com/flack/createphp

I see your points and fully agree. At first i wanted to start this topic in the modules section but realized there were mostly "look at my finished modules" topics, so i decided to post it as a general wish. Could somebody please move this thread to the "modules" section? //edit: I apologize i forgot to also thank all contributors in my first posting and would like to do so now

Hi Ryan, first - as this is my first post - let me say i just started using processwire and already fell in love with it. You're doing a great job! There already are several threads about replacing the current wyswig editor (TinyMCE) with [insert $editor here]. I did a forum search and wondered why no one mentioned implementing in-page editing like most "big cms" (drupal 8, typo3 neos, symfony cmf...) currently are. In my opinion this is an absolut killer feature from a clients/authors point of view. As create.js is just an editing API people could also start using whatever editor they like (currently availabe editors are: hallo.js, aloha, ckeditor, redactor). If you never read about create.js you should visit http://createjs.org/ and have a look at the demos as well as this blog post: http://bergie.iki.fi/blog/createjs-in-2013/ . There already is a PHP library (create.php - https://github.com/flack/createphp ) which aims to help integrating create.js into existing applications/cms. I'd absolutely love to see this feature in an upcoming version of processwire (even though i will also keep using processwire it if there won't be in-page editing ). Best regards, Felix