raydale

Charliez, I think SiNNuT has pretty much answered your questions. I would add:

• Custom admin URL - SiNNuT is spot on here. It may seem like a small point, however, if you are training and documenting the cms for a client it is often useful to state that the 'backend' system in ProcessWire is the 'admin' area. Therefore, it can be extremely useful to have them login and manage their content from a 'domain.com/admin' style url.
  
• Flood control - again SiNNuT is accurate here. To add more information - if you login to ProcessWire and go to your 'Modules' section you will see 'Session Login Throttle' there. The description to this module states: 'Throttles the fequency of logins for a given account, helps to reduce dictionary attacks by introducing an exponential delay between logins'. This is often referred to as 'flood control' with other CMSs and is usually NOT built into the system - instead being offered as an addon module. PW makes this sort of basic protection simple by being built into the system and enabled by default.
  
• Templating system - to my mind there is a templating system in PW. Yes, it is very 'light' and gets out of your way by not assuming you want to work any particular way. However, the fact that you setup 'templates' in the PW admin and then the system finds those php files carrying a predefined template name from the 'site/templates' folder suggests that there is some sort of automatic templating sytem.
  

Guys, as stated elsewhere I am also a bit of a noob when it comes to ProcessWire and this case study is very much from that perspective. Some of the language I use may be at odds to the vision and communication intended here. So, this is a good discussion - I think - as I am approaching PW from more of an enthusiastic outsiders perspective. I can change any of the case study to better reflect a desired approach if needs be.

It's a good read My thought though would be to make it personal if these end up on the new PW site - write them as customer succes stories rather than 3rd person case studies (which would just mean re-wording it to the 1st person in this case).

What do you guys think?

I think that's a fair enough point - particularly in this case. I have a habit of writing like this from working as an employee of the big corporates.

However, as PW grows and the community grows (the Drupal showcase reflects this) you will often see 3rd party entities writing articles on behalf of the studio who created a the website / project. To force this either way would potentially alienate one or the other.

I would like to see what other people here think too.

Thanks guys! Hopefully this is start to get a few case studies on here.

Thanks guys, keep me up to date. I think this sounds like a great idea, and looking forwarding to adding it.

Ryan, I have gone ahead and created a case study here:

Hopefully this will help other people write some more as the structure follows a 'problem', 'process', 'solution', 'conclusion' structure.

I hope it's okay - I'll try and write a case study the bigger projects I tackle with PW as well.

This case study relates to the topic here: http://processwire.c...ndpost__p__8988 about creating an archive of 'stories' about how PW has helped in relevant real life scenarios.

Website: http://www.ray-dale.com

RayDale Multimedia

Ray Dale is a multimedia designer. His portfolio website was 2 years old as of March 2012 and in need of a refresh. He found that the content management for his website was more time consuming than he wanted and the website was generally slow in performance and complex to update.

Ray needed:

• A website that could showcase his latest work with separate portfolio content types
  
• The ability to show lots of images and videos in each section
  
• Complex interlinking between each portfolio item - where each item would belong to a number of simultaneous categories
  
• To be able to publish a number of pages under various sections on the website
  
• To have a condensed navigation structure - not over-facing the user with navigation
  
• A blogging space that was easy to update
  
• To gain complete control over the HTML, CSS & JS markup and therefore the design of the website
  
• The ability to take more control over the admin experience - without using a host of plugins - so that the CMS could be used for clients to make their lives easier
  
• Speedy performance - even if a shared hosting platform were used
  
• Good site security
  

The previous solutions

Ray was previously using Drupal as a content management system. Drupal is a great system, it’s incredibly flexible, it can be made faster and using template overrides, almost complete control can be taken of the HTML and CSS output. However, the process to achieve any of this is time consuming and clunky from a web designer / front end developer perspective. Drupal was also going to require a number of plugins to be installed to achieve a lot of the required functionality.

Ray tested migrating his website over to WordPress. WordPress is another fantastic blogging system with light CMS functionalities. WordPress is generally easier to use than Drupal and a lot of control over the HTML & CSS markup can be delivered - in a much easier manner than Drupal. However, WordPress is still light on CMS features in the admin system. This means that it is difficult without either using a lot of plugins or custom php development (using the WordPress API) to have custom content types and fields.

The decision to use ProcessWire

Having searched around for an alternative to Drupal and WordPress - revisiting other CMSs that Ray had also previously used - Ray eventually landed on ProcessWire having read about it on a forum.

Right from watching the initial video produced by Ryan Cramer (the creator of ProcessWire) Ray was intrigued by the possibilities that ProcessWire seemed to offer - effectively solving all of the issues currently faced.

To summarise ProcessWire offered:

• Custom content types in the admin
  
• Custom field types in the admin
  
• Good control over media uploads
  
• A simple to use admin system
  
• A neat and simple API for custom frontend / backend development
  
• A customisable admin experience
  
• The ability to have a custom admin url
  
• Complete control over HTML markup
  
• Good security with flood control
  
• A powerful and flexible templating system (that was also simple)
  

Ray was extremely impressed by the features that ProcessWire offered, however, many CMSs look great until you actually start using them - where the unnecessary complexities, weak architecture and terrible, bloated functionality often start to appear.

The functionality seemed so promising that a gamble was taken to build the Ray Dale Multimedia website - with very little time now available - to ProcessWire and test how it performed.

Building the website

Having built the original Ray Dale Multimedia website in Drupal, then converted to WordPress before deciding to gamble on ProcessWire - Ray now had very little time left to build his portfolio website. As a testament to the ease and speed of using ProcessWire - he was able (with a little help from articles in the forum) to rebuild the Ray Dale Multimedia website in two days of effective full time development. This included all of the content creation and learning the new system - with the inevitable (but surprisingly smooth) learning curve.

Enabling complete control over output

ProcessWire allowed Ray to write HTML and CSS without any of the interference you get from other CMS systems. So, Ray was able to use the following frameworks of his choosing:

• HTML5 boilerplate
  
• jQuery
  
• Modernizr
  
• Masonry
  
• A customised version of the 960 fluid grid system
  
• PrettyPhoto for lightbox images
  
• Less - to create minified CSS
  

Though it must be said that literally anything can be used as ProcessWire makes no assumptions on the frontend - even on the Javascript framework.

Quick and easy API

One really pleasant surprise was the jQuery influenced API that ProcessWire offered. For example you can use php queries such as:

$pages->find("selector");
$pages->get("selector, path or ID");

to find content in the system - you can even filter your queries by template type, fields attached to that item, etc. You can even use a range of selector operators.

The API effectively works as a super powered and infinitely more flexible alternative to the WordPress loop.

Cross referencing pages easily

Complex cross-linking between portfolio items was needed so that capabilities, technologies and services could be linked to each item. It was easy to create a taxonomy system that worked the exact way required once the fundamental concept of how pages work in ProcessWire was understood.

Building navigation that works

Unlike a lot of CMSs that work effectively as ‘bucket systems’ - meaning that content is separate from any kind of structure or hierarchy by default in the system - whereas everything in ProcessWire is a page and arranged hierarchically. Whilst this may seem strange and restrictive to some used to the aforementioned ‘bucket systems’ - it works incredibly well and enables you to build navigational structures that are easy to plot a current location in. It is also something easy enough to break away from if you want a more ‘bucket’ type system.

For example, in Drupal and WordPress it can be very difficult to highlight the navigation on a website if you are using custom content types. Try using custom post types in WordPress and keeping your navigation tracking which page the user has landed on - it’s extremely difficult without a fair bit of custom development (this is true as of the time of writing - WordPress 3.3.1).

Because ProcessWire uses a structure and hierarchy by default - this structure makes building navigation that can track the current page very simple.

Easy / flexible admin system

The admin system in ProcessWire was easy and fluid to use, logical and stable.

The admin system can also be overridden with templates (there are already some great community contributed templates).

Modules used

Whilst ProcessWire has a number of contributed modules from a thriving and helpful community - absolutely no additional modules were needed. All functionality on the website was achieved from a vanilla version of ProcessWire.

Performance

Another area of importance was the performance of ProcessWire. Again, Ray found this aspect to be well covered with built in caching capabilities that were thoughtfully included ‘out of the box’. The caching was simple to enable on templates and fields. The memory footprint of the Ray Dale Multimedia website was a third of that of Drupal on the same website without using addon caching plugins.

Challenges

The only real challenge faced was understanding that ‘pages are everything’ in ProcessWire. You build categories, taxonomy, articles, blog systems with the ‘page’ (and any fields it contains) being the basic building block for all of this.

‘Pages’ in ProcessWire can be attached to templates and injected with fields to enable the creation of literally anything conceivable. However, understanding this concept takes a little work for people used to other CMSs such as Drupal, WordPress and Joomla.

However, in context - and compared to other systems - this learning curve is still fairly easy. There are so many other time savers that this learning curve becomes negligible.

The other area that Ray had to understand about ProcessWire was that there aren’t any template system paradigms that exist in Drupal and WordPress. Other systems have parent and child templating systems with default parent templates that can be leveraged, however, because ProcessWire makes no assumptions on how you are going to build a project (being a true framework) you currently need to create your own template files. This is made easy by good documentation on the ProcessWire website and a decent set of ‘starter’ template files that come as part of the default install.

Conclusion

ProcessWire was an absolute dream to work with. Ray found it to be very stable, well thought out and hugely flexible. So much so in fact, that Ray has decided to standardise on using ProcessWire for upcoming web design projects.

The flexibility and simplicity of the admin system, combined with power in frontend development that ProcessWire provides is something that Ray found to be liberating and more importantly ‘best in its class’.

Well, I have only completed one PW site so far with another one in the works. The completed site I have is my portfolio site (www.ray-dale.com) and I'm not sure it's the best representation of what PW can do as it doesn't really stretch the boundaries.

I'll gladly write up an overview / case study for it - from a newbies perspective - if you think it's relevant?

I think it would be great and make sense to have repositories of scripts and modules that are approved by the PW members to ensure they're quality modules. With launching the new PW website we're working on it will come.

This would be great. Looking forward to the new site.

Interesting to hear your case study RTurala. I have had a similar experience with the memory footprint you mention - though with a much simpler site (my own portfolio site). PW seems A LOT quicker and less hungry on memory.

I wonder if Ryan is thinking of putting together a PW case studies section? This could be in the forum or as a series of pages on the PW website. Letting users give a summary of how they built their sites and problems that were solved using PW. Maybe a nicer version of the Drupal one: http://drupal.org/success-stories

I don't think so. Advantages are in how to keep code in large sites easily maintainable.

Okay, thanks. I always wondered whether including head.php and foot.php was more inefficient in any way due to the extra include.

By the way - welcome to the ProcessWire forums Zach.

Can't wait to start using those shiny new commits on my next project.

I'm glad the repo name has a changed too - much easier for newbies like myself.

This is also interesting: http://foundation.zurb.com/

Nice find Apeisa, this looks a strong responsive framework.

It's interesting to see that people are fairly split on Twitter Bootstrap or HTML Kickstart. So, it looks like Bootstrap is full featured and Kickstart easier to get into?

I've only just come across this thread. This is a really good discussion with loads of good information - I wish I had seen this before.

My next PW site will probably be doing away with head.php and foot.php (though I do agree that this is an easier approach for beginners) for a preferred method above.

Are there any performance advantages with any particular approach over using head.php and foot.php?

Agreed on this. It would be extremely helpful. Maybe in the form of a wiki where everyone could contribute?

Thanks Apeisa. Yes, this was my first PW site.

I'm just in the planning stages with a client for another site which I have decided to also use PW on.

I've used Twitter Bootstrap for one live site, one that's in development and an extranet also in development, and it is truly awesome in its comprehensiveness. And just a couple of hours before reading this thread, I had decided to use HTML KickStart for another project that is (hopefully) due in soon!

It seems to me that one of the great advantages of ProcessWire is that any of these kind of design frameworks can be employed to streamline front end development, giving us the very best of both worlds. Especially those of us whose design skills are less than optimal.

I would really like to hear what you think when comparing Twitter Bootstrap to HTML Kickstart DaveP. HTML Kickstart looks great (but isn't setup to allow for responsive for mobile yet?).

I've only just come across this. Great site! Nice use of typography. elegant and clean.

Haha! Thanks RTurala!

I didn't think of doing this having recently switched my site over from Drupal to PW. It could have saved me a lot of time if I'd thought about it.

I have another site I want to migrate over and will test this then.

Hi Frikki and welcome. ProcessWire is still amazing me. Good luck with it.

Hi all, I have just 'finished' (well, to the extent that I can pretty much call it 'done' for now) my portfolio website.

There are still a few issues with it - I have yet to make it fully responsive for mobile, I need to work on the footer area and I haven't uploaded all of my work samples yet.

The brief I gave myself for this site was to come away from the usual 960, centered grid into something a little more fluid - breaking the usual mould for rigid layouts. I also wanted something very simple that hopefully allows the work samples to become prominent.

I am SO PLEASED working with ProcessWire for this site!!! It has been an absolute pleasure and just before I came across PW I had a version on my localhost developed with Drupal. It was slow and cumbersome! I was so sick of Drupal and it's horrendous default markup that PW seemed a dream to work with in comparison. I am already working on another website with PW and I see this trend continuing with every website I do.

Thanks for the great CMS!

www.ray-dale.com

That's a good site Alex. Very clean and sharp - reflects your great work very well.

Hi Everfreecreative,

I remember having a similar reaction to you when I discovered PW. I have been thoroughly battle testing it on two projects recently and that eureka feeling still hasn't worn off yet. PW is just a dream to work with - especially for designers who like to write their own semantic HTML and not have a CMS generate for you (badly).

The new repeating fields and field contexts being worked on are going to be a huge help in delivering a usable admin environment to clients.

Continuing from above about the field-template context… This video demonstrates how you can adjust the admin context of individual fields according to the template they are placed in. When you adjust the context in this manner, it only changes the settings for when a field appears in that template. This expands the reusability potential of fields across different templates, hopefully preventing the need to create another field if all you really needed was a different title, description or width. You can do this same type of configuration when editing a field in a repeater too.

View this full screen which should put YouTube into HD mode, where it's much easier to see.

Um... wow!!! This just made my day!

Thanks for the video Ryan. I'm so impressed with the speed of development on ProcessWire. Field contexts should be a UX designers dream. Of all the features lately this is definitely my favourite - so powerful when combined with repeating fields. I have struggled for so long with other CMS's to get the admin interface to become usable and friendly for clients - this is a massive step forward for me - as constantly creating new fields for various templates just to change a field title was a tad cumbersome.

I really like the modal windows to set the new field contexts along with the width settings - so useful.

Soma, Diogo: you'll be glad to know I've taken a close look at field template context and how we might support it in the core. It'll be simpler than I thought, so there's a good chance I can get this in version 2.2, relatively soon. Now that I understand how we'll do it, I think we'll be able to provide template context of almost any field setting (custom and internal). So it will likely go beyond just title, description, collapsed, width, etc. To change the context of a field within a template, you will edit a template, then click on a field name or edit icon (in the asmSelect). It'll open a modal window with all the field's configurable settings, all within the context of the template. I think this will be pretty cool.

This all sounds amazing Ryan. Field contexts on a template level will allow so much flexibility in the admin. We can then create ever more usable, custom admin screens for clients - simplifying the editing process for them. I can imagine that it will also keep the number of different fields necessary down to a minimum too?

This is a really exciting development.

This is a great initiative and a good way of showcasing PW's capabilities to users more familier with WordPress or Drupal. Profiles also seem like a great way to rapidly prototype websites.

Are you thinking of including a blog section statestreet? A blog with categories is a bit more time consuming to build and probably a bit confusing for your average user starting out with PW - at least that was certainly the case for me. Once you get the page based paradigm in PW it's a breeze and showing this in profile should really help.

Great work so far!!!

Thanks Ryan,

I did copy over a lot of the content from my localhost - so that could explain a page already being there (assuming that's the case). Does uninstalling the module remove it's setup configuration (removing the page and processes)?

It's not a big enough issue to warrant spending much time on it - especially as I now know how to get around it.