Software

The last months I was busy with a friends art project. Today I'm very happy to announce that it went public on july 15th and is doing good so far.

Jule, the founder of Port of Art, approached me last summer, asking if I could help her building an online market place for artworks. Working primarily as a freelance Drupal developer, knowing that her budget is tight and that she is certainly not the first one with this idea, I hesitated. But I gave it a thought and after several meetings I agreed. I liked the idea and I liked Jules approach, that is very trusting and positive without being naive. I like good people ;) She also gave me the impression of being able to value constructive input, even if it means to change previous ideas. That is a good feature in clients!

Basic ideas with a special flavor

The basic requirements were pretty simple:

• Content management for static content pages as well as for special content like the artworks that are sold on the site
• Search artworks by different filters
• Legal compliant checkout process
• Integration of external payment providers (limited to paypal for the moment being)
• Contact forms
• Multilingual content and communication
• Integration of social media
• Some map views for geo visualization
• SEO, customizability, ...

So far that was relatively straight forward and we all love Drupal for that.
But there were some special requirements too, that had a huge impact on my choice of modules to realize this with.

• Artworks don't integrate with a basic warehouse approach. Each one should be unique and can be bought only once. Therefor there was no need for a shopping cart either.
• Artworks can be bought for a fixed price or as an auction.
• Artworks under a certain price are not sold via the site, but instead the customer and the artist are put in touch directly and have to figure out the details independently of the platform.
• Artists should be able to upload their artworks, pay a fee to get them published and than manage the selling and delivery on their own.
• Artworks expire after a certain time that depends on the publishing fee that the artist is willing to pay.
• Once an artwork has been sold on the site, an additional fee has to be paid.
• Fully customizable e-mails

The main content is obviously the artwork. This is a node type with additional fields to represent attributes of an artwork. Then there are static pages, artschools, faqs and webforms. On the user side we have two frontend user roles for customers and artists that get enhanced using the Profile 2 module.

Additional considerations

The situation that our development team was faced with: Small budget, tiny team (only 2 people), the project's concept still a little in the flux. The founder had no technical background or previous experience using Drupal but needed a customized shop system that she could actually manage after we finished the project and went on to other things. So one of the goals during development has always been to make things configurable. Special text at a certain page? Build a setting for that. A special criterion that controls logic during checkout? Don't hardcode it somewhere! Build a setting for that as it might change later and you don't want to change code for simple things. I love drupal for it's easy variable management and quick form building capabilities. Building an admin form to control certain behaviors takes rarely more then 10 minutes. Obviously there are things that you can't build that way, but when you can, do it. I feel much butter with it and the client loves it too because it gives him control.

Conception and development process

One of the things I knew before, but that got confirmed again: Communication is the key. The client has never did a web project before. That meant that certain good practices and workflow, concerning the development process as well as the final product, were not clear to her. So we (the designer and me) spend a good amount of time helping her figure out what was realistic and which compromises needed to be done in order to deliver the product without cost explosion or an exagerated time frame. Being honest and communicating potential problems early on, as well as the clients openness towards constructive input, was something that attributed a lot to the perceived quality of the development process. Including the client in the development and design decisions also allowed us to educate her on the technical aspects of the product and raise awarness about technical implications, making her see advantages and restrictions in different areas that she didn't consider in the beginning.
We didn't formalize the process, but we ended up with some kind of agile development with three distinct roles: Conception and design by the client, frontend by the designer and backend logic and architecural design by me. That worked very good for us.

Obvious modules that we still didn't use

First, there is Rules. A crazy wonderland for workflow configuration that amazes me every time I look at it. But I've almost never used it. Call me old fashioned, but when business logic or complex relations must be build, I prefer to build them on my own. I want as much logic as possible in the code, not in the database. So for all the power Rules provide, I still prefer not to use it.

Then there is Commerce. We have never build a real-world website with it, so our experience was very limited. We thought about it. Very seriously. Then we decided against it. From todays perspective that was probably an error. But given the special requirements we were afraid of having to spent too much time customizing and altering the workflow that commerce proposes. This was more of a gut feeling. And at the end I'm not sure it was the right decision. We ended up with conceiving and building a full fledged product management incuding the purchase logic and payment. The obvious advantage when you write something like this on your own, is that you have a lot of fine grained control about flow and design. But the price is pretty high considering the amount of time necessary. At the end we have a considerable code base that needs to be maintained. So next time, I hope I'll remember this an give commerce a more in depth examination regarding the potential for the problem at hand.

Crucial contrib modules / add ons

It's hardly necessary to mention, but we couldn't have build the site so easily without the usual candidates: Views, Webform, Better Exposed Filters, Address Field, CTools, i18n, References, Profile 2, Geofield, Global Redirect, Libraries, ...

The fantastic wookmark jquery plugin is responsible for the display of the central search component of the site. Our designer loves it!

Some modules that got born or advanced

I build MEFIBS for this site. I had a need for that functionality before, but never quite as strong as this time, so I decided to solve it as a self contained module instead of hacking things together. Though there are some problems currently with a few new features that I added recently, it is already in production and doing pretty well. Have a look at the filter and sorting blocks on the artwork search page: . Two independant blocks without duplicating a views display or intensive custom form altering. That's pretty neat.

Hopefully the jQuery Update module will also profit. During development I ran into issues with the admin version feature introduced here: https://www.drupal.org/node/1524944. I wrote about it in jQuery version per theme. This resulted in a feature patch that is currently on a good way to get committed soon.

I also found a bug in the PayPal for Payment module: https://www.drupal.org/node/2052361 that will hopefully get fixed soon.

Another module I find myself using often is my sandbox module Mailer API. It's a bit cumbersome to use as a developer, but for the client it's perfect. She can customize practically every mail that will be send by the system. It's all on a single configuration page and supports multilingual setups. A test mail feature is also included to see what mails will look like. And a batch mailer that the client often uses to address a bunch of people. It's like very easy home made promotional mails in a consistent look and feel. Made the client happy.

For frontend eye candy we have build a jQuery plugin that is responsible for the collapsible checkbox filter elements in the left side bar.

Some module discoveries

During the work on www.port-of-art.com I found some modules that I didn't know before.

The Form API Validation module allows you to simplify validation rules in custom forms, using predefined validation rules. And you can also add your own rules which we used for the price entry validation needed when artists publish their artworks.

The Physical Fields module provides fields for physical dimensions and for weight attributes. That was exactly what we needed for physical goods. It saved us the time to configure fields in field collections.

Conclusion

At the end of the project I can say, that everyone involved has had a good and productive time and enjoyed the process and the result. The client is happy for all the things she can do with the site. Now she can concentrate on managing business and extending marketing. The designer was happy. Even if some of the design decisions might not have been the best ones looking at the requirements profile from today. I feel positive though that the system fully matches the clients expectations and that it'll be a valuable tool for developing her business. If the site manages to establish itself, it's more than probable that we would rebuild the system, at least some substantial pieces like the shop component.

We as the site builders are happy too. We feel that we have done a good job and that we managed to keep resources and expectations in balance. I would do it again, which always feels like a good measure.

Category: Drupal Planet7.x

It's fair to say, on a fresh install the content authoring experience in Drupal needs improvement. WYSIWYG editors are often criticised for various reason such as the ugly HTML they are known to generate or the power they give users to mess up typography. While these are valid criticisms, there is definitely a right and wrong way configure these editors. Doing things the right way will empower users while keeping them safe from nasty pitfalls. Note: this guide assumes you're already familiar with a typical Drupal WYSIWYG setup.

Provide a true WYSIWYG experience

It's important that a WYSWIYG editor represents exactly what appears on the front-end of your website. While it seems obvious, it's easy to ignore and has a big impact on a user's experience.

Our WYSWIYG stack is:

Completed Drupal site or project URL: https://www.concern.net

Concern Worldwide is a leading international humanitarian organization dedicated to tackling poverty and suffering in the world’s poorest countries. Their main website, www.concern.net, plays an important role in their fundraising process. It enables people from around the world to donate towards specific campaigns and ensure that their money is distributed to where it’s needed most.

SystemSeed has the wonderful opportunity of partnering with Concern in leveraging Drupal to power the Concern Worldwide platform for a number of years spanning all the way back to the days of Drupal 5. This particular site was upgraded to Drupal 7 in 2012 as part of a large platform refactor which aimed to consolidate all of Concern’s Drupal websites under a single common platform. We wrote about the transition from standalone sites in this case study.

Since then, we have been leading a large project to bring full responsiveness and optimisations across a wide spectrum of devices to all sites on that platform. Today (July 3, 2014) sees the completion of this project with the rollout of a fully responsive and adaptive theme layer, catering for its widest audience ever. In this case study, we’ll look at some of the components of this project, the processes, the challenges, the successes, and lessons learned along the way.

Key modules/theme/distribution used: OmegaBreakpointsBreakpoint PanelsPictureInline Form ErrorsOrganizations involved: SystemSeedTeam members: mrfeltonrahulbileroblavfastangeljucallme

So I am not kidding NavBar is literally the next step in Drupal navigation, it is being used in core for Drupal 8.  This is great news because not only does it mean that the Drupal 8 core will contain some much needed improvements to the administration navigation scheme.  Back end user improvements like this are perhaps the thing that makes me most excited about what Drupal 8 is bringing to the table.  Lets look a little bit at NavBar.

What You Get

Pretty simply put NavBar gets you a responsive administration toolbar for your Drupal users.  It really isn’t going to do anything for what your visitors see, but your content creators, site administrators, and even site builders will see this as a much welcomed change.  NavBar is first and foremost completely responsive, and for those of you who use the traditional Drupal administration toolbar on your mobile phone oh boy are you excited.  The standard Drupal 7 install, not to mention Drupal 6, doesn’t offer the most mobile friendly administrative experience.  NavBar helps resolve this.  NavBar also offers a more flexible navigation option.  You are able to use NavBar at the top of your site above the header, or as a sidebar on the left hand side.  The customization of the tool, really helps set it apart.

Not only is the mobile experience improved, but there is a much cleaner and professional looking image presented than the Drupal 7 administration menu.  Though this might not seem like much, for those of us who build Drupal sites for clients this is a big deal.  Image is everything, and it is tough to sell Drupal’s out of the box usability against WordPresses out of the box usability.  We have a lot of admin usability improvements in our standard Drupal installation to help combat this, but now NavBar is another one.  Users almost expect clean and friendly design, and now they can get it. 

Installation

I am not going to lie, NavBar in its current state is a bit of installation work, but most people should be able to figure it out if they have a little understanding for how Drupal is structured. 

The first step for me is downloading and installing the project.  I think that drush is the best tool for installing and enabling projects like this, but particularly for NavBar I suggest installing the project before moving to some of the other steps.  The reason is that once the project is installed and enabled it will put some indicators on your /admin/reports/status page that can really help you troubleshoot in the next steps.

Once the NavBar module is enabled, you can visit the site’s status report using the path above and notice that there are a three statuses now associated with NavBar, and this is where the fun comes in.  NavBar requires the installation of three libraries (Modernizr, Backbone, and Underscore), and you may have them already installed, or at least some of them.  Using the status page at this point will help you find out if you have them already installed and ready to run, or whether you need to install them.
If you find that you need to install them, the process isn’t all that complicated, there are some helpful guides on the project page that will point you in the right direction.  Or give us a shout we would be happy to help.  Essentially it is a matter of downloading the libraries, or cloning their respective repositories, and moving them to your libraries folder in the Drupal installation.  The Modernizr library requires you to follow a link and download a specific minimized version of the library but there are specific instructions to follow on the project page to help guide you here, so I won’t reinvent the wheel here.  The instructions are pretty thorough, and relatively simple. 

Once you have the libraries installed you can disable your regular administration toolbar and you are off and running.  If you follow those steps and still aren’t having any luck, the site status report is the best place to look.  Most likely it is an error with the libraries that were installed, and that report will point you to which library is causing trouble, and maybe even what the problem is.

We have fallen in love with NavBar, and it has started making a huge impact on our clients and how well they like using Drupal.  We highly suggest you use it.

For more tips like these, follow us on social media or subscribe for free to our RSS feed and newsletter. You can also contact us directly or request a consultation.