As many of you know, I recently sold my shares in Agility – the web CMS company that I co-founded. Over the last three months, I have been experimenting with new technologies as I formulate the next step in my career.
As a first project, I decided to build a new website for a product that my wife’s company developed – the ClearBlue Ionizer. ClearBlue is a new technology for purifying water in pools and spas that drastically reduces the amount of chemicals required.
While Agility might seem like an obvious choice to use as a CMS, the site was very simple and didn’t justify the sophistication and cost of this robust CMS. I wanted to keep the budget small and the timeline short.
As much as I have trash-talked WordPress in the past, it seemed like an obvious choice in this situation, so it was at the top of the list. The current site was also on WordPress and I had some experience poking around with it. The only other system I considered was one I had read about recently – Weebly.
Weebly was a brand new system for me, so I decided to start there. I was pleased to find an elegant website with an obvious path to get started. Within minutes, I had a free account open and I was choosing a theme for my new site.
I knew that I wanted a clean, simple theme for ClearBlue and there were several to choose from. I only took a minute or two to choose one because I was just playing around, and I knew I could change it later.
Once the theme was chosen, the real magic began. I was placed into the work area for the site and was instantly familiar with the drag-and-drop interface. Whereas in WordPress I always feel like I am hunting things down and finding content in the most unlikely places, Weebly served up the pages and tools in a very intuitive way. It provides enough control to give you what you need without cluttering the interface with links and buttons. At first, I was surprised at how little control you get over editing text, but I was never wanting for more. They have struck an excellent balance between functionality and simplicity – something that all CMSs can learn from.
I immediately got to work building pages. I had no site plan or content plan at this point – just playing around. The theme had a few pages set up with a selection of templates. It took me about 10 minutes to add the logo to the header, choose the templates I liked, and rename the pages to something that made sense.
I started digging deeper into the home page. Using the drag-and-drop controls from the left panel, I added a title, columns, some images and text. Within about 20 minutes I had a serviceable home page completed.
You know that feeling of awe you get when technology “just works”? You get that early and often with Weebly. For example, if you want to add an image to your page, you simply drop the Image module onto the page and upload an image. Very easy. But what’s awesome is they also integrate a library of both free and paid images. I searched in the free images for ‘pool’ and had some great options to choose from. Check out the Shop Online page to see what I picked – all “off the rack” and selected within minutes for free.
If you have a bit of CSS knowledge, Weebly allows you to fully customize the stylesheets of your theme. The built in editor is good, and combined with the developer tools in Chrome, it’s easy to find and edit styles. The theme I chose had a bit too much space between the header and the body which was fixed with one line of CSS.
Another moment of delight came on the second Weebly site I built when I discovered the background editor, but I’m getting ahead of myself.
True WYSIWYG and Drag-and-Drop
“What you see is what you get” (WYSIWYG) and “drag-and-drop” are heavily bandied terms in the CMS world. They are high on the feature lists from customers and vendors talk about doing it, though most of them do it poorly. With Weebly, these two features are implemented flawlessly. Building pages is more akin to building emails in MailChimp than any CMS I’ve seen. The team at Weebly clearly has deep design expertise, as well as strong front-end coding skills. The drag-and-drop feel and flow is the best I’ve used. As I was building the pages, I was constantly impressed by how well everything worked – from modifying text to spacing blocks on the page to moving blocks around between different areas. It was also satisfying to have all of my changes instantly saved. There is no save button anywhere on the page editing “Build” screen.
I’m sure the term “responsive design” is a candidate for buzzword of the year. Surprisingly, the Weebly templates do not shift as the screen is resized. Rather, each theme has a companion mobile template that you can switch to from any page. The content blocks that are placed on the desktop pages are then morphed into the mobile template. I’m not sure whether this was a deliberate decision or whether they built their templates before responsive caught on. Either way, they work very effectively.
The mobile preview gives you a choice of iPhone or Android. I expected the Android view to have a larger screen, but both preview modes have a 4” screen width.
The mobile theme generates a menu button which animates the navigation in from the left. You can also place contact info and social media buttons on the navigation tab.
Weebly has the option of adding a web store to your site. For ClearBlue, they didn’t require a full store, but they do have products that made sense to sell online. I opted to integrate a solution from a Toronto startup called ShopLocket. They provide embeddable shopping widgets which are free and easy to set up. I was happy to find an “Embed Code” module in the Weebly library that allowed me to paste in the ShopLocket snippet. Between setting up the ShopLocket widgets and embedding them into Weebly, the site was equipped to sell products in under 10 minutes. Amazing.
At some point, I would like to take a closer look at the Weebly web store, but I imagine that they will have a tough time competing with Shopify in this area.
Search Engine Optimization (SEO)
SEO is clearly a high priority for any site and CMS. I was pleased to find that all of the major SEO considerations were present in Weebly. Each page has an “Advanced Settings” area where you define the Page Title and Description. Images all have an area to add the Alt Text. Crucially, you can also set up 301 redirects from your old pages to the new. There is an easy interface to do this in the Settings area that works well for a few redirects.
There were a few glaring limitations that I found with Weebly when compared to a more robust system like Agility. It didn’t seem like there was a way to upload long lists of 301 redirects. For large media sites, this is a must. You also can’t build lists of content with customizable content structures. Again, for news, magazine and other media sites, this is critical. While you do have a great deal of control over the templates, they are still bound by their designs and code. I think it would be difficult to create your own template from scratch. I poked around with the blog, and it also seemed pretty limited.
Overall, I can’t see Weebly being used for a heavy media site or sites that require custom content structures or integrations.
Live Site in Record Time
Before I knew it, all of my Weebly experimentation had garnered a complete site. I was expecting I would be stumped at some point and have to revert to something like WordPress, but the stump never came. Without paying a cent, I had built an entire web and mobile site, including design, templates, page structure, and content in a matter of two days. I showed it to my wife and she was blown away and asked if we could go live. I recommended that we go with the Professional package that would allow us to edit the footer and provide a password protected area for their retailers. It set them back a whopping $99 for the year, including hosting.
For a simple corporate website, brand site or web store, Weebly is an exceptional tool and worth a look. I don’t know of any CMS, including WordPress, that comes close to this level of usability and functionality for the price.