We often hit a problem with the admin menus in Magento.  Typically they stop working (no dropdowns) after we install the modern theme for Magento.  Today though we encountered it straight away on a fresh Magento install.

Fortunately the fix is straightforward:

1. chmod 755 the js/ folder, and folders within.
2. chmod 644 the javascript files inside js/lib/
3. chmod 644 js/index.php

Thanks to Proxy for pointing us in this direction.  He also recommends replacing a core head.php file; we’ve never found this necessary though, and the system works with just the file permission fixes.

We are looking a business or organisation in Haiti who’d like a pro bono web design and development.  We’ll design, build and host the website free of charge.

If you know of any businesses directly, or ways of finding one, please let me have your suggestions by 14th February.

As Haiti reconstructs after the earthquake, its emerging businesses will need to find ways to trade. A free web development struck me as the best way we could offer support. The website could be a brochure site, ecommerce shop, a membership site for an organisation, or even an online magazine.

The difficulty is finding a suitable business in Haiti, and that’s where I’m hoping you can help. Perhaps you have a direct contact, or maybe you’ll know someone who does and re-tweet this out to them.

I’d like suggestions by 14th February, we’ll choose one and design and build the website during February / March.

If you are a French translator, and would like to help on the web design and development project, please let me know.

We’ve used the Magento ecommerce platform for 3 projects recently, and I thought it would be useful to share the setup steps we go through for our Beanstalk + Versions + Coda web development environment.

About the development tools

Beanstalk is a hosted implementation of the SVN source code control. Versions is an SVN client tool on the Mac, and Coda is an editor and web publishing tool. Magento is a powerful ecommerce platform available in both Open Source and Enterprise editions.

Overview

We essentially go through 6 steps:

• Setting up the SVN repository in Beanstalk
• Setting up a working copy in Versions
• Committing the Magento download files to the repository
• Deploying the initial download files to the development server
• Setting up the database and configuring Magento
• Setting up the site in Coda

We can then begin coding our website.  I’ll take you through each of those steps in turn.

Setting up the SVN repository in Beanstalk

We store the code for all our website projects in Beanstalk SVN repositories.  In a large ongoing project, it allows us to develop and test new functionality independently of the main website.  We also use it for short ’single hit’ developments, benefitting from the knowledge that our code is safely backed up, and we can easily revert to an earlier version should we accidentally delete or corrupt a file.

For a Magento ecommerce project, we create a standard repository in Beanstalk:

1. Choose the ‘create a repository’ button from the Repositories tab
2. Give the repository a name, e.g. My New Shop
3. Select all the default options (including ‘Create the repository from scratch… Create default repository structure’)

Setting up a working copy in Versions

Beanstalk holds our files and code securely.  Versions is the tool (SVN client) that lets us manage the files: uploading them to Beanstalk, downloading working copies to our local machine, and committing changes once we’ve finished our edits.

For our new online shop repository, we need to set up a working copy in Versions by:

1. Bookmarking the repository (choose the option to ‘create a new bookmark to a repository URL’)
2. We then select the trunk folder in Versions, and choose the checkout option
3. We are prompted for a local folder to store the working copy files in.  We have a folder for all our development projects, and create a folder for each project under there, e.g. development/mynewshop

At this stage the relationship between Beanstalk, Versions and our working folder has been established, but we’ve yet to load any files into the project.

Committing the Magento download files to the repository

At this stage, we take the Magento files from the download zip (on the Magento site), and copy them into our working folder (i.e. development/mynewshop).

Once the files have been added, we return to Versions, where we:

1. Select the files, and choose add (top right menu bar) to bring them under SVN control
2. Commit the files to the Beanstalk repository

Note: You have some alternative choices here.  Magento is a big system, with nearly 45MB of files.  We choose to  bring the whole download under SVN control, but you may prefer just to have your app/design, app/code and skin folders under SVN control.  You can find discussions of the pros and cons of this, in particular with reference to supporting future Magento upgrades, in other posts on the Internet.

Deploying the initial download files to the development server

We are now ready to deploy the Magento files to our development server, setup a database, and perform the initial Magento configuration.

Beanstalk has built in capabilities for deploying your website files to a staging, development or production server.  Due to the size of Magento, we’ve encountered timeouts problems using Beanstalk for the initial deployment of the files.

Instead, we use our standard ftp tool, Cyberduck, to transfer the Magento files to our development server.

Setting up the database and configuring Magento

With our files transferred to the development server, we then follow the Magento Installation guide (Default Install section), to set up the database and configure Magento.

Setting up the site in Coda

This is the final step in setting up our Magento web development environment.

To this point, we’ve set up our SVN repository in Beanstalk, created a working copy in Versions, established a folder for our local working copy, and committed the initial Magento download files to Beanstalk.  We’ve also deployed the Magento files to our development server, setup the database and configured Magento.

We then follow the standard procedure to setup the site in Coda:

1. Choose the ‘Add Site’ button from the bottom of the Coda Sites window
2. Enter the site name: My New Shop; the remote root: url of the development server; and the local root: our working copy folder (e.g. development/mynewshop
3. Enter the ftp connection details
4. Enable Source Control and enter the Beanstalk repository url, Beanstalk username and password

That’s it… Beanstalk SVN, Versions, Magento and Coda are all setup, and we are ready to start the development and skinning of our Magento ecommerce web site.

WordPress is the underlying platform for a lot of our website development.  Alongside the base platform, there are thousands of plugins that make developing websites easier.  We really love three of those plugins; they feature in many of our projects: All in one SEO, cforms, and improved include page.

All in one SEO

The all in one SEO plugin from Michael Torbert is first out of the box.  A few small tweaks and it automates all our on site search engine optimisation.  We’ve no complaints, and the search engine ratings for our clients have been impressive.  We were even happy to pay for the Pro version!

cforms

When we need a contact form on our websites, we invariably turn to the cforms plugin.  It’s the only plugin I know of that’s written by food bloggers.  It’s also, for licencing reasons, excluded from the official WordPress plugin pages.  Despite that, it’s one of the most popular plugins out there.

The feature set is very rich, although some of the customisations we’d like to make are sometimes difficult to implement.  I’ve also just noticed that like all in one SEO, cforms is German in origin… Vorsprung durch Technik and all that.

Improved include page

Improved include page is a real help when we’re treating WordPress more like a Content Management System than a blog platform.  It lets us easily include subpages of information.  We typically use it for multiple column text, or dropping content into a sidebar.  Improved include page (iinclude_page) was created by Italian developer Vito Tardia.

WordPress plugins

There are a lot of other great WordPress plugins of course.  We’ve used BuddyPress in a number of projects, although don’t think of it as a plugin, and are quite excited by  Twitter Widget Pro (which we use on the front page of 21 inspired).   We are also looking forward to trying the Author Spotlight widget from Debashish Chakrabarty.

The WordPress image is courtesy of Jose Pardilla on DeviantArt.  It’s licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

Our web design and development process has evolved to include a very powerful suite of tools that let us build rich websites quickly and efficiently.  In this post, I share some insights into the tools and how we use them.  Hopefully, you’ll find some new software to explore; I look forward to hearing your thoughts.

Coding and standards

XHTML and CSS are the cornerstones of our web development, with PHP and MySQL for our server side scripting and database work.  Before a website goes live, we test it for standards compliance using the W3C validators.  We want our websites to work across different browsers with less problems, and standards compliance helps ensure that.  It also gives us some search engine optimisation and disability discrimination pointers.

Most of our websites have rich interfaces and effects built with Javascript (typically using the jQuery libraries).  The sites we are building for Concept Eye Clinic are great examples of  jQuery enhanced websites.

Our graphic designer, of course, uses the ubiquitous Photoshop to create our site layouts and design previews.  Something about the ‘developer aversion to Ps’ in me, sees Fireworks being snook out occasionally to tweak graphics.  I’m getting over it.

Content management

Almost all our sites are built using the WordPress platform for content management.  We  worked with Expression Engine for one project, when we needed friendlier image handling for the client, but have returned to WordPress since.  We know the platform well, and are comfortable extending it to meet most website needs.  We’ve used WordPress to build everything from simple  brochure sites to full blown online magazines.  I’m also keeping an eye on RadiantCMS for a future development.

We undertook a couple of ecommerce projects a while back, and have had a surge of them arrive recently.  For all three of the new projects we are using Magento.  Magento is more than a little intimidating out of the box, with a powerful but complex set of XML and PHP files for layout and templating.  The documentation, including text books, is often poorly written, but a very active Open Source developer community means ‘how to’ solutions for just about any problem are only a Google away.

Last but not least, we’ve used BuddyPress for social network developments, including the acclaimed Hello Eco Living website.  We considered Elgg as a social network development platform, but opted for BuddyPress because of our familiarity with the underlying WordPress system.  BuddyPress has been an adventure.  It’s feature rich, but definitely went through teething problems during its first year.  Serious development requires far more knowledge of filters and event handlers than you’d expect to encounter developing standard WordPress themes.  That, coupled with a much smaller market, means the number of skilled developers and shared knowledge is limited.

Development tools and environment

We develop on Mac, using the Coda web development environment to hand code our websites.

MAMP Pro gives us a full featured Apache / MySQL / PHP local test environment, and we use Versions in conjunction with Beanstalk to manage our code.  Beanstalk is a hosted source code control system (subversion SVN), that lets us track revisions to our websites, build and test new features independently, and integrate back into the main site.  Coda can function directly as an SVN client, but we prefer to use it in combination with Versions.  We use Versions to create test branches, create working copies of a website, and set up our local file structure.

Finally, we use Safari with its developer tools enabled as our main development browser.  The developer tools offer a similar set of functionality to Firebug on Firefox, allowing us to examine our HTML / CSS / Javascripts and resource usage in the browser.

This post has given a quick overview of the tools we use in our web design and development process.  I’ll delve into more depth on some of them in future posts.

Blog post coming soon

We launched the new 21 Inspired website in January 2010.

We’ve focussed on letting you see how we work, and letting you discover if you’d like us to build your website.   A portfolio of our work, including some of our more famous designs, takes centre stage.  We’ve backed this up with a blog that lets you behind the scenes, exposing how and why we put our websites together.

We’d love to hear your comments.

Blog post coming soon

We spent summer 2009 developing one of our most exciting web projects to date. A full blown online magazine, social network and blogging platform for Hello Eco Living.

Challenge presented

We’d discussed a number of eco-related projects with Laura and Chris, and were absolutely delighted when they asked us to develop their Hello Eco Living brand and website. They wanted a site that delivered an online magazine full of practical tips, and a related online community that pooled expertise, discussed and shared ideas on how to adopt a more eco-conscious lifestyle.

Our solution

Our graphic and branding ideas went through several iterations, ‘high tech’ revolutionary initial concepts giving way to wonderfully welcoming ‘eco-lutionary’ logo and design. The web design is our most ambitious project to date. An outwardly simple set of pages, subtly enhanced with beautiful typography, is underpinned by an extremely powerful social networking engine. Javascript is used to enhance the XHTML, CSS front end, and a content management system allows Hello Eco Living to easily add and edit their magazine stories. The final touch is the integration of a blogging platform that allows site members to create and author their own eco blogs.

End results

Hello Eco Living have an engaging and pervasive brand that unites a whole suite of online features, and even out onto their Faceboook and Twitter pages. Their website is ambitious and immensely powerful. The Beta version launched in September, two editions of the magazine have gone out, and membership of the social network is starting to grow.

In January, 2010, WPMU.org listed Hello Eco Living as one of the “10 Latest and Greatest Inspirational BuddyPress sites“.

Artemis Media had been trading for more than a year, but had only ever had a placeholder website. Without an online portfolio to show potential clients, and with no presence in searches, they were losing opportunities. They needed a web presence up and running quickly, particularly as they were planning a new campaign “doing it differently”.

Clean, professional, strong website

Prior to the website build, we advised Artemis on  structure and layout, and how their website could become an effective business tool.  For competitive reasons they were reluctant to reveal too much case study information on site; instead the focus is on illustrating their services, backed up by a series of quotes from their clients.

The website is driven from a content management system, allowing Artemis Media to edit and reload content as new campaigns start, or they introduce new services. Our web design for them also incorporates a blog, where they can write content to enhance their reputation, and gain recognition in the search engines. Other touches include Javascript elements to enhance the front end, and built in on page search engine optimisation.

Delivered within a short timescale, the Artemis Media website portrays a clean, professional image for the company.  As the Artemis add more content, it has strong fundamentals, that will allow it to perform well in search engines.