Monday, October 31, 2011

How to Host Multiple Sites in WordPress

In version 3.0 of WordPress, it’s possible to have one single WordPress install hosting multiple websites. This is great news for anyone who has multiple blogs hosted on different domains. Combining all the blogs into one install not only saves disk space, it also makes maintenance and upgrades easy. If you’re using WordPress version 3.0 and above, this feature is already built ​​in for you. Unfortunately, it’s not turned on by default. You can find the installation instructions on the WordPress Codex.

Here’s a quick summary of the steps required:
Step 1: Back up your current WordPress database.
Step 2: Add this line into your wp-config.php file:
  1. define('WP_ALLOW_MULTISITE', true);  
Step 3: Log in to the admin area and click on Tools -> Network. Choose the “Sub-directories” option. Submit the form (accepting the defaults for the other options), then follow the instructions given on the next page.
Step 4: Log out and log back in again. You should now have a “Superadmin” panel at the top of your WordPress admin menu. Under Superadmin -> Sites, add your new site.
Step 5: Test that your new site is working.
There you go! You now have a new WordPress site running in a subdirectory. But what if you would like your new WordPress site to be located at an entirely different domain instead?
In this case, you’ll need to go through a few more steps:
Step 6: Download the domain mapping plugin and follow the installation instructions.
Step 7: Log out and log in again. Update Superadmin -> Domain Mapping with your server’s IP address, then go to Superadmin -> Domains to link up a domain with a site ID.
Step 8: Test your new domain.
That’s it for now! Any feedback is welcomed.

Tips To Make Your Web Site Mobile-friendly

1. Style for mobile

Congratulations — you’ve decided to embrace mobile, one of the fastest growing segments on the Web. The first thing you’ll notice is how diverse the mobile ecosystem is. Browsers, screen sizes, connection speeds — everything is different. The Web community enjoyed a brief period of iPhone domination, when addressing one browser/screen resolution seemed sufficient. But now that Android devices (which come with a variety of screen sizes) are quickly gaining popularity, it’s important to once again think of the bigger picture.
When styling your mobile site, stick to relative units — percentages, ems and so forth. There is no way to predict what mobile devices your users are using today or might be using tomorrow. Relative units can go a long way when it comes to making a lasting, quality mobile design. It’s also important to maintain visual consistency with the desktop site — this will make your brand stronger and reassure your mobile visitors that they’re in good hands. You’ll also want to minimize scrolling and page transitions in order to reduce time spent looking for content. mobile site

2. Resize images

Small screens call for small images. There’s just no reason to push desktop-sized, heavy image assets to mobile users that don’t need them. A good strategy involves resizing the images on the web server — this way they take up to 90% less time to load. CSS-based resizing can also work, although it carries performance and bandwidth penalties.
If you can, make your optimized images link to the full, original image hosted elsewhere. Your mobile visitors will appreciate it in case they want to zoom in to get more detail.
Matt Bango mobile site

3. Automatically detect mobile devices

Typing is a pain on even the best mobile devices, and many users avoid it when browsing. Combined with the fact that communicating to your users that you actually offer a separate mobile version of your site, and getting mobile users to visit the mobile version of your site is actually quite difficult.
Thankfully, a variety of methods for automatic mobile device detection have become recently available. The most reliable approach, in our experience, is User Agent detection, where a server makes a decision on what to serve based on how an incoming browser describes its capabilities. Other implementations feature real-time JavaScript requests to databases like DeviceAtlas or WURFL that also supply information on what a device can do. A mobile version is not complete until it’s automatically triggered for every mobile user!
Minlo mobile site

4. Rethink navigation

Your website might have a couple of dozen footer, header and sidebar links — but do they matter to your mobile visitors? Mobile web surfing is known for its high bounce rates (users come to look at just one page), so focus on a few key areas of the web site and acknowledge your visitors’ short attention spans. Don’t think twice about eliminating links to destinations that don’t have a high mobile priority.
At the same time, consider adding or prioritizing mobile-specific items. That tiny “Contact” link hidden in the footer of your full site? It could be a great top-line header item for the mobile version, simply because many users will come looking for a phone number or your office address. Another great item to have in the mobile header is Search.
metrolyrics mobile site

5. Provide a clear path to the full site

As a web designer, you are responsible for making content decisions for the mobile visitor. However, occasionally a piece of information that a user is looking for is not included in the mobile version. One very easy solution is to put a footer link to your “Full Site” on every page. Make sure that this link takes the user to the full version of the exact page that they’re currently browsing.
Once the transition to the full site is complete, it’s considered good practice to disable mobile redirection for that user. Some sites do this permanently (e.g. Digg Mobile) while others (CNN) set a timeout period of 1-2 hours with a special cookie. Your call!

6. Don’t break links

In the early days of the mobile web, it was common to see standalone mobile web sites that were structured completely different from their traditional, desktop counterparts. Today, mobile traffic is driven to a large extent by Google searches, links in Twitter streams and email. Most of those links point to desktop web sites, which is why automatic device detection is so crucial.
However, after the mobile user has been detected and sent to, it is important to show them the exact content that they expect. For instance, if a was the original link, present the visitor with the mobile-optimized, not just the homepage. This might sound easy, but a significant number of web publishers don’t do this right, and end up surprising and frustrating their audience.

7. Measure the mobile audience

Mobile devices are quickly becoming an integral part of the Web, rather than an isolated market niche. Plenty of mobile analytics and advertising services have come and gone, but Google’s recent AdMob acquisition and a Mobile Analytics API are going to further help consolidate mobile services under one roof.
Measuring the mobile audience is important for several reasons. First, by knowing what devices are popular with your users, it is possible to make informed design decisions. For example, if your mobile audience is 99% iPhone, you shouldn’t worry too much about BlackBerry compatibility. Another aspect is traffic and lead generation. After looking at the mobile stats, you’ll likely see that mobile and desktop users prefer different content. Knowing all this, it is possible to create an outstanding mobile presence and successfully monetize it.
Thanks for reading these mobile tips, and best of luck with your mobile sites!

How To Build a Speedy WordPress Sandbox VM

If you’re planning to break into the world of WordPress development, it makes sense to set up a dedicated development environment — and one of the best ways to do it is with a virtual machine. I prefer VMs to my Mac’s built-in server or servers like MAMP because you can run them only when you need them, pack them away when you’re done, set up as many different ones as you need, and share them with friends and co-workers with ease. And if you’re new to web server administration, setting up and maintaining a Linux VM is the perfect beginner project to practice your skills.
In this article, we’ll take a look at setting up a Linux virtual server with all the bits and pieces required to support a WordPress installation. If the words “Linux”, “administer”, and “server” give you the heebie-jeebies, you’re in luck — we’ll also show you how to use a pre-packaged WordPress server that takes just minutes to install and requires no knowledge of the command line. What’s more, since we’ll be making use of free and open source software, all it costs is a bit of your time and hard drive space!

Download and Install VirtualBox

Your first step is to acquire a virtualisation system for your desktop machine. We’ll be concentrating on VirtualBox, a free and open source virtualisation system for Windows, Mac, and Linux — you can grab it for free from the VirtualBox website.
Those of you who have shelled out for another application, like VMWare Fusion or Parallels, never fear — you can still set up these VMs in the system you already have, but you’ll need to consult your product’s documentation for how to do this.

Setting Up a Ubuntu Virtual Machine

If you’re confident with the command line — or you’d like to become confident — installing and configuring a VM from scratch might be the method for you. The steps to do so here in 2011 are largely the same, so there’s no need for us to repeat every step in this article — go ahead and check out that article for the full play-by-play. Before you do so, however, keep these three things in mind:
  1. In the article, Louis shows us how to set up port forwarding with an XML configuration file. In the latest version of VirtualBox, you can now also set up port forwarding in the VM’s Network Adapter settings panel. You can see these settings in figures 1 and 2, below.
    The Network panel with the Advanced twistie open, showing the port forwarding button
    Port forwarding setup in VirtualBox
  2. During the installation process, the Ubuntu 10.10 Server installer will ask you to choose the type of system you’d like to run. We’re after a LAMP server and we’d like to be able to log in using OpenSSH, so be sure to select that when asked. You can see this panel in figure 3, below:
    Choose the right packages for this server.
    Doing so ensures that Apache, MySQL, PHP, and the OpenSSH packages are downloaded and installed from the outset.
  3. This process takes a while, and you’ll need to set a few passwords and answer quite a few prompts — go brew up some tea or coffee, and pay close attention to every question, especially the ones that ask you for a password.
If you followed Louis’ instructions to the letter, and if all went well, you should now have a working Linux web server. Test this out by opening a web browser and heading over to http://localhost:8888. If you see a page that exclaims “It works!”, you’re on the right track.
In your VM window, you should also be greeted by a login prompt. Log in now, using the admin username and password you chose when you installed Ubuntu.

Grab WordPress

While it’s possible to install WordPress using Ubuntu’s package manager, it’s kind of idiosyncratic and fiddly. WordPress’ famous five-minute install is called that for a reason, and it works perfectly, so let’s install it this way, instead. First, head on over to the web directory, which should be /var/www:
  1. cd /var/www  
cd /var/www
To grab the latest WordPress version, save yourself some tedious FTP-ing and have your VM download it direct with wget:
  1. wget  
Now, unpack the zip:
  1. tar -zvxf latest.tar.gz  
tar -zvxf latest.tar.gz
All the WordPress files will be unpacked into a subdirectory of your website called wordpress. I’d prefer my blog to live at the root directory of my website, so I’ll be moving all these up one level:
  1. mv wordpress/* /var/www  
mv wordpress/* /var/www
The default index.html file (that’s the one that says “It works!”) and empty wordpress directory can be removed:
  1. rm -r index.html wordpress  
rm -r index.html wordpress

Create A Database User and Password

During the Ubuntu installation process, the wizard asked you to specify a “root” password for MySQL. You’ll need that now, as we’re about to create a database for WordPress to use. The process for doing so is explained over on the WordPress codex, and goes a little something like this:
  1. raena@wordpress:~$ mysql -u root -p  
  2. Enter password:  
  3. Welcome to the MySQL monitor.  Commands end with ; or \g.  
  4. ...  
  5. mysql>  
raena@wordpress:~$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Now, you’ll create the new database:
  1. mysql> CREATE DATABASE wordpress;  
  2. Query OK, 1 row affected (0.00 sec)  
mysql> CREATE DATABASE wordpress;
Query OK, 1 row affected (0.00 sec)
Next, set up a database user:
  1. mysql> GRANT ALL PRIVILEGES ON wordpress.*  
  2.     -> TO "wp_user"@"localhost"  
  3.     -> IDENTIFIED BY "password";  
mysql> GRANT ALL PRIVILEGES ON wordpress.*
    -> TO "wp_user"@"localhost"
    -> IDENTIFIED BY "password";
Clean up after yourself, and you’re done:
  1. mysql> FLUSH PRIVILEGES;  
  2. mysql> EXIT  
  3. Bye  
  4. raena@wordpress:~$  
mysql> EXIT
Easy! You can now start installing WordPress using the web-based installer — head on over to http://localhost:8888 again and follow the instructions from the WordPress Codex.

Setting Up A Pre-Packaged WordPress Appliance

If you’re less confident with the command line, or if you’d prefer a simpler and faster installation process, a pre-packaged VM appliance might be the solution for you. A VM appliance is a virtual machine file that’s already been installed and configured, with little or no need for adjustments on your part. WordPress’ Codex suggests two appliances: BitNami’s WordPress VM, and TurnKey Linux’s WordPress Appliance. The TurnKey Linux VM is the most user-friendly, particularly for less confident Linux users, and it’s the one we’ll use for this example.
First of all, you’ll need to grab the appliance. TurnKey provides appliances in a number of different formats, one of which is the Open Virtualisation Format, or OVF. This is a common format for appliances, and bundles up all the software a VM needs in one easy-to-digest package. Look for the OVF link in the download bar, near the top of the TurnKey WordPress page.
Once you have that file, simply open it in VirtualBox — you’ll be asked to confirm the settings inside it. There should be little need to play with anything you find here, except perhaps the name of the virtual machine (vm is the default — a little generic, right?). VirtualBox will import the file and convert it into a virtual machine; when it’s complete, you’ll see it appear in the left of your VirtualBox window.
Next, start the machine and keep an eye on the screen. You’ll set up your machine through a wizard, which will ask you to set up usernames and passwords for the machine’s root account, for MySQL, and for WordPress’ administration account. You can see the wizard in action in figure 5, below:
TurnKey Linux's wizard asking for a password
Be sure to make a note of these passwords. You’ll also be asked to set up the TurnKey cloud backup service, daily security checks, and whether you’d like to update your machine right away. It’s fine to skip the TurnKey backup setup for the time being (you can always enable it later), but it’s definitely important to set up your security updates now. It’ll take a few minutes, so grab a cup of tea or coffee while your machine does its thing. When it’s finished, you’ll see the TurnKey configuration console, which tells you everything you need to know to reach your website and to administer it — check it out in the figure below. Your WordPress blog is installed and ready for action at the address specified under “Web”, and you can administer your new server’s other goodies using the command line or the easy Webmin interface. Double-check now that you can log in to your system and that the WordPress site is definitely installed.
The TurnKey Appliance Configuration window
Since your appliance may have originally been created days or even weeks ago, you may find that you need to update some of your plugins, or even WordPress itself. Once you’ve done that, though, you’re ready to rumble!


Now that you’re up and running, you’re ready to fill your blog with interesting test content and start hacking on your plugins or themes.

Build Your Own Dev Server with VirtualBox

Sun’s VirtualBox is ideal for testing different desktop environments (for example, browser testing), but I’ve discovered it’s also great for running a test server environment. Instead of setting up Apache, PHP, and MySQL right on your desktop machine, you can place them in a virtual Linux server. That way there’s no interference with your desktop, and you can ensure that your development environment is as close as possible to your eventual deployment environment.
With a virtual Linux server running inside your desktop operating system, you can SSH into it, upload files to it, load web pages from it–whatever you’d do with a real live server. And all the software you need is free and simple to configure. Let’s make a start!

Setting Up Shop

The first step is to download the VirtualBox client. Pick the version appropriate for your host system.
You’ll also want to grab a disk image for your Linux server. For this tutorial, I’ll be using the 64-bit version of Ubuntu server 9.04, but feel free to use whatever distribution you’re more comfortable with. Of course, you might need to adapt some of the instructions to your particular setup.
We could also use a desktop build, but since we’re only interested in the server functionality, it’s best to stick with a server build: we’ll save on memory because no graphical desktop interface is loaded.

Installing the Ubuntu Server

Start up VirtualBox and click New for a new virtual machine. Step through the wizard, making sure to choose the 64-bit version of Ubuntu (if that’s the disk image you downloaded). I used the defaults for every other option: RAM, disk size, disk type, and so on.
Now select your new VM and click Start. VirtualBox will ask you how to install the OS on your virtual machine. Since we downloaded an .iso, choose CD/DVD-ROM device from the Media Type menu and Image File from the Media Source menu, selecting your Ubuntu Server iso. As the system boots, you’ll be presented with Ubuntu’s installer. Choose your language, and then select Install Ubuntu Server.
Follow the on-screen instructions to install the server. Notice that when you come to partitioning your hard disk, the virtual machine only “sees” the disk image you created before. Feel free to use the whole disk. Later on in the process, the installer will prompt you to install additional software. For our purposes, we’ll install the LAMP server and OpenSSH server packages. This way we have everything we need for a fully functional web server out of the box.
When it comes time to reboot your new server, you can “eject” the installation CD by choosing Devices>Unmount CD/DVD-ROM from the VirtualBox menu.
Log into your new system with the username and password you chose during installation. It’s also a good idea to upgrade your system with:
  1. sudo aptitude update  
  2. sudo aptitude safe-upgrade  
sudo aptitude update
sudo aptitude safe-upgrade

Accessing the Virtual Server from the Host System

Now that our server is up and running, we want to be able to access it from our host system. We’ll set it up so we can SSH to it, transfer files to it via SFTP, and make HTTP requests to Apache.
To do all this we need to edit the xml configuration file for our virtual machine:
  • On a Mac, the file is found at ~/Library/VirtualBox/Machines/<machine name>/<machine name>.xml
  • On Windows, it’s inside the .VirtualBox/Machines subdirectory in your home folder.
So for my machine, which I’ve called “Ubuntu Server,” I’m editing Machines/Ubuntu Server/Ubuntu Server.xml
At the top of the file you should see an <ExtraData> tag. Inside that tag, copy in the following tags:
  1. <ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/HostPort" value="2222"/>  
  2. <ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/GuestPort" value="22"/>  
  3. <ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/Protocol" value="TCP"/>  
  4. <ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/HostPort" value="8888"/>  
  5. <ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/GuestPort" value="80"/>  
  6. <ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/Protocol" value="TCP"/>  
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/HostPort" value="2222"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/GuestPort" value="22"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/Protocol" value="TCP"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/HostPort" value="8888"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/GuestPort" value="80"/>
<ExtraDataItem name="VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/Protocol" value="TCP"/>
These lines configure VirtualBox to forward requests to specific ports on the host system onto other specified ports on the guest system. For SSH, we’re forwarding port 2222 of the host system to port 22 of the guest system (where OpenSSH is listening). The same principle applies to the Apache configuration items, with port 8888 on the host mapping to port 80 on the guest.
With that done, save the xml file and restart your virtual machine.
If the machine fails to start, it’s likely to be because of a network interface configuration problem. In the lines we added, we specified pcnet as the network interface. To ensure that’s what your virtual machine is using, right-click on it in the main VirtualBox window and click Settings. In the Network tab, select one of the PCnet adapters from the Adapter Type drop-down. You should be able to restart your virtual machine with no problems now.
Now if you open a browser on your host system and point it to http://localhost:8888/ you should see the default Apache “It works!” page. Great!
Similarly, to SSH into your new server, SSH to port 2222 on localhost with the username you set during the Ubuntu server installation. (If you’re on Windows, you can use the PuTTY SSH client to perform the same function):
  1. ssh -l <username> -p 2222 localhost   
ssh -l <username> -p 2222 localhost 
You’ll receive the usual “unknown host” security warning; type “yes” to connect and you’ll be prompted for your password. Upon entering it, you should be logged in to your server! Feel free to look around and make yourself at home.
While we’re still logged in, let’s do one more task: by default the Apache web root in Ubuntu Server is /var/www/, which your default user won’t have write permissions for. Let’s change that, so you can upload files to your web root with SFTP. Enter this command and hit return:
  1. sudo chown <username> /var/www  
sudo chown <username> /var/www
To connect to your server with FTP, no extra configuration is necessary. OpenSSH gives you “free” FTP via the SFTP (SSH FTP) protocol. Most clients (FileZilla, for example) support it; just choose SFTP as the protocol, localhost as the server with port 2222, and your Ubuntu username and password. Choose /var/www/ as the default directory, and you should be able to transfer files to and from your server.
Let’s test that everything is working: create a php file named info.php containing the usual phpinfo call:
  1. <?php  
  2.   phpinfo();  
  3. ?>  

Use your FTP client to upload that file to your server’s /var/www/ folder. Now point your browser to http://localhost:8888/info.php, and you’ll see the PHP info page. The System row at the top of the table will tell you PHP is running on Ubuntu.
There you have it! You can test server configurations, brush up on your sysadmin skills, and develop your web sites and applications in a full Linux server environment running inside your usual desktop.

Sunday, October 30, 2011

Roots—A HTML5 WordPress Theme Framework

One of my favourite new finds is Roots, a starter theme created by Denver-based developer Ben Word. And whether you’re a grizzled old WordPress veteran or a fresh-faced new theme recruit, I bet there’ll be a feature or two that will put a smile on your face. Let’s take a look at what’s inside.
What are the, er, roots of Roots? It’s based on a combination of the HTML5 Boilerplate project, Elliot Jay Stocks’ Starkers theme, and your choice of the Blueprint or style frameworks—plus there’s a dash of the developers’ own secret sauce to boot. If you’re unfamiliar with these projects, here’s a quick breakdown:
  • The HTML5 Boilerplate proclaims happily that it’s a “rock-solid default for HTML 5 awesome”—or, basically, a template full of defaults for best practice HTML5 development. Every bell and whistle is rung and blown here, but there’s still room for supporting older browsers.
  • Starkers provides a strong, plain theme to use as a basis for your own development—all the functionality with none of the presentational fluff. It’s been a themer’s favourite for some time.
  • The 960 and Blueprint CSS frameworks provide a strong grid-based layout system that work in even the most stubborn old browsers, and let you create anything from the most pedestrian bunch of columns to a slick magazine layout. When you use Roots, just pick the one you like best.
Here are some of the improvements Roots makes to WordPress’ default output, and some of the ways in which it helps you as a theme developer.
  • Activating the theme creates some sample content and pages for you—for this reason, it’s best to start using it on a brand new site.
  • Posts’ markup includes support for the hNews microformat, for juicy, semantic blogging.
  • URLs for search results are rewritten to look less WordPressy, which may have some benefits for SEO.
  • URLs to items in the wp-content folder are rewritten to appear at the  root of the site, disguising any WordPress-specific URL cruft.
  • The theme’s robots.txt file is already set up according to the WordPress team’s SEO recommendations, meaning it’s all ready to disallow access to the themes, plugins, and includes folders.
  • The built-in gallery functionality will use HTML5′s figure and figcaption elements.
  • There’s a small admin panel that allows you to perform some basic setup for Twitter and Google Analytics, as well as make some rudimentary layout choices. Of course, since this theme is for developers, this is hardly as comprehensive as a pro-blogger’s paid theme, but it’s a great basis for your own purposes.
In the excerpt we posted, we talked about how to decide what framework suits you best. To my thinking, Roots is a great example of the kind of features you should be looking for if you’re seeking out a framework. It’s up to date with today’s best development advice, it’s based on tried and tested projects that many developers will already be familiar with, and it’s been designed with speed and ease in mind—perfect for those of us who like to make it out of the office on time while still doing a great job. There’s a growing collection of documentation, and a glance at the project’s GitHub repository shows frequent updates to both the code and the manuals. A criticism of some theme frameworks can sometimes be that sites made with it have that cookie-cutter feel, but Roots’ gallery shows off a wide variety of layouts and looks—just bring your creativity and start hacking away!
If you’re looking for a super-modern WordPress theme framework, to learn about WordPress development, or if you’re ready to start using HTML 5 in your WordPress projects, consider adding Roots to your list. It’s a strong contender for my next project!

Migrating Your WordPress Blog to Adobe Business Catalyst

Blogs are an important part of an ecommerce solution, especially for a small company—they provide a way of directly connecting with customers, they are an inexpensive way to differentiate your client from their competition, and they provide real benefits for search engine optimization.
In many cases, however, designers are engaged to build an ecommerce solution for their client’s business and understandably spend most of the available time and budget on the online store—focusing on product presentation, categories, navigation and checkout. A blog is frequently an out-of-the-box, bolt-on solution to complete the site’s feature set—especially for a designer that has limited development resources.
Typical integration focuses on the navigation and presentation however—a common header and style are used across both the application that powers the store and the application that powers the blog—but stops there. Data cannot be shared easily, authenticated sessions are not supported, and any changes to common elements need to be updated in multiple locations, but that’s just the start of the support woes.
WordPress’s plug-in architecture is a huge advantage for most users—having developers around the world add features and functionality gives designers and clients a wide variety of options to extend their blog’s functionality. But with any plug-in architecture, you need to stay current as platform upgrades impact plug-ins. This is just another aspect of the maintenance hurdles that can grow into costly maintenance tasks over time.
Smaller design firms working with small or medium sized businesses need to maximize their efficiency and reduce long-term support costs. You should be focusing your effort on delivering value for your client, and keeping support costs low.
Even designers who recognize this issue find themselves in a larger hole: the cost to change is sometimes greater than the cost of dealing with support issues. Most full service platforms acknowledge that and provide tools to assist migrating an existing site into a new platform.
Adobe Business Catalyst provides tools to migrate an online business onto their platform—including blogs. Blogs represent a special case because blogs contain structured data with relationships that cross articles. For instance, most blogs have comments and comment threads, they are assigned to categories, and have a history. In this article, we’ll walk through migrating your blog into a new Business Catalyst site and set up a seamless template based on your current WordPress blog.
Beyond blogs, Business Catalyst is really a platform for an online business and provides tools for integrated ecommerce, marketing and content management. Other articles in the series cover those topics in more detail.

Make a Plan

Everything starts with a plan. I’m a big believer in planning before jumping in, so take a few minutes and plan it out, here are the steps we know we have to take:
  • Create a new BC site
  • Create a template
  • Set up your blog layout
  • Create your blog
  • Export/Import current blog
  • Fine tune and set as start page
Along the way I’ll identify a few more details, but this is basically what we’ll cover.

Moving In

There are actually two steps I’m going to cover in the process of moving into Business Catalyst—the first is about setting up a template to wrap your content. We’ve done this in prior articles, but in this one, the design constraint that I am applying is that you want to keep the current site template in place that is on your WP blog.
In order to set that up, the fastest way is to import your current site and then create a template from that content. After we set up the template, we’ll work on moving the blog content into the template. Sound good? OK, let’s get started.

Import the site

Business Catalyst provides a wizard that makes it easy to move a site onto the platform. It builds out the file system and moves all of the content and supporting assets into a directory structure in Business Catalyst. This step is important if you want to base your new site template on your existing site. If you are taking this opportunity to create a new template, you don’t need to do the import site step, you can skip to the Import Blog step further along.
I’ll assume you’ve created a new account and are familiar with the Partner Portal (if not, see Introduction to Adobe Business Catalyst), go to Create Site and select a Pro site type and click on the “Import your current website” radio button. This will load a subsection where you can enter the URL of your current site.
You can restrict this to a subsection of the current site by specifying the directory to begin; BC will only import pages under that directory.
create site
Once you have entered the URL/path click Next and then you’ll need to enter a bit more information to finish setting up the new site on your account.
create site
Click submit and the page will reload with verbose status of the import process. Pretty cool. Depending on the size of your site, this might take a while. At the end you see a confirmation message “Congratulations! You have successfully signed up …
Now the fun part begins.

Create the Template

The first task is check out the new site—open a new browser window and hit the URL you created for the imported site. I’ve decided to work with a fictional company targeting coffee enthusiasts called Koffee Klubbe.
site imported screen
Check out the links, they should all work. What you’ll see are static copies of everything your old site contained. Unfortunately, that also includes seemingly dynamic items like a search box and comment forms. They won’t work—at least not as you’d expect since they are still pointing to the old site. We’ll walk through that clean up in just a moment.

Remove WP tags and content

Note: If you view source, you’ll see that some items in your site still reference the old WordPress site—including the stylesheet. You should take the time to identify and migrate those files to your BC site once you have your blog set up.
We’ve covered the basics on setting up templates in an earlier article so if you need a refresher, click here. I’m going to focus on the steps you’ll need to take to make a new template out of your existing WordPress page.
In the WP theme I was using, the div containing the content is
. I simply brought up my Default page in the Web Pages Details editor and found the beginning and the end of the div. Replace all of the content within the div with a simple {tag_pagecontent} tag:
create template
If you toggle back over to Design view, you’ll see that the content was replaced with the tag. Right now, BC isn’t parsing that tag since this is a static page—we’ll set up the template next.
create template
Copy the HTML for this page, click on Admin > Manage Site-wide Templates and create a new template for the site. Name the template, toggle to HTML view, paste the content, save and publish. Go back to the Web Pages, create a new page as index.html, give it a name and select your new template:
create template
OK. You’re actually halfway there. Now, let’s build your blog.
We’re going to start with the blog layout. In addition to the site-wide templates that let you define common elements that will show up as a consistent frame to your content across sections of your site, you can also define layout for your blog that will control how the text, comments, links to other articles and categories will be displayed within the {tag_pagecontent} section of your larger layout. Got it? Let’s get started.
Navigate to Admin > More Customization Options, then click on Blog Layouts.
blog layout
Next, select the Overall Blog Layout to edit.
blog layout
That will bring up a standard editing window but this time you’ll see all of the modules related to blogs—blog content, tags, comments, trackback links etc. If you toggle over to the HTML view, you can control the layout down to the level of detail you need.
blog layout
Now your template and your Blog layout are all set up, let’s go add the blog to your site.
Go to Web Pages > Blog and create a new blog. Like most BC applications, you’ll name the blog and select the template to use when displaying the content. I selected to enable the trackback function and the RSS feeds—common features on most blogs.
create blog
On the next screen, you’ll see that your blog has no content—yet. We’ll import your blogs from WordPress next.
create blog

Import Blog

The first thing you’ll need for the import is your data—go to your WordPress site, log into your Dashboard and click Export under the Settings menu.
export link
In the next screen, narrow the scope of the export to meet the ranges that match what you want to move into your new site. In my case, I’m moving all of the articles over.
export screen
The export should result in a datestamped xml file being downloaded. Save the file to a local directory—you’re going to use it in a minute.
Go back to your Business Catalyst site, and click on Admin, Import Data. Select the Blog import.
import blog
You’ll have to select the blog to import into, select the blog engine, in this case “WordPress” and then select the export file. Click next to begin the import.
import blog
You’ll be prompted twice to confirm that you are ready to do the import—click through the prompts and you’ll see a successful confirmation.
import blog
Now, go to WebSite > Blogs and click on Blog Posts in the right hand nav and you’ll see all of your content:
blog admin
Remember that a Blog is really just a data-driven application—web apps are set up as Modules within Business Catalyst and this gives you tremendous flexibility to extend applications and share data across applications.
Like other BC webapps, you’ll need to add this to a page in order to see the blogs on your site.
Let’s go back to the Blog Details page using the right hand navigation above the Action Box or by going to Website > Blogs and clicking on your new blog.
In that action box, you’ll see the link to Set as Start page.
blog set start
Click on the link and you’ll see a modal confirming that your blog is now the default page on your site.
blog home page
As you can see, the blog structure dynamically builds navigation to the Recent Posts, Tags, and the postings by monthly archive. You may also see that the import didn’t completely respect the formatting you may have had on WP. But that’s a great reason to check out the new blog editor. Navigate back to Blogs > Blog Posts and then select the Edit with new UI link.
blog list
You can edit the posting, add tags, categories, update the publishing date and of course use the WYSIWYG editor.


As I noted above, you’ll need to trim some of the legacy items from your template, one of them is the search box. Since all of the underlying content is stored in the database, it’s easy to add search capabilities to your site—without any coding.
Navigate to Modules > Site Search and you can quickly build a new search portal. Click on Create New Search and then name it and determine the scope of the content you want to search against. We’ll select Blog and then Save the search module.
In order to add the search module to your site, go back to Admin > Manage Site Templates and select your Blog template to edit.
Toggle over to HTML view and create a new div for your search module. Select Modules from the Action list, and select a Search form to add to your page.
search module
Position the cursor inside the new div and click Insert to place the search box code into your template. The insert will also place the search results tag directly after the tag. I moved mine to the main section of the template just above the {tag_pagecontent} tag. This is perfect for a bit of jQuery to style a nice blind to open up with your search results. You can add as much chrome and UI behavior as you want.

Why migrate?

If you are completely satisfied with the solution you have in place, you wouldn’t be looking at migration strategies. The most common pain points that designers experience are the costs of ongoing maintenance and the effort of maintaining a site spread across disparate infrastructure.
The advantage of a platform like Business Catalyst is that your entire online business can be managed from one platform allowing you to leverage data, analytics and marketing tools across all of the web apps on your site—not just a blog. Consider this an opportunity to future-proof your solution by moving into a hosted platform that will grow as your business grows. Content management, fully integrated ecommerce, cross sell capabilities, email marketing are all driven from the same underlying platform.
Migrating from one platform to another is never completely painless, but Business Catalyst’s tools let you design the site, template and blog with as much fine-grained control as you want. If you follow the quick migration path I’ve outlined above, you’ll still want to clean up your template to ensure that the CSS, JS and related assets are all under your control and hosted on the same platform.
Questions? Comments? Let me know!

Tips for tuning up:

These are a few of the quick changes you should make in your site-wide templates after you directly import your site from WordPress. Again, you don’t need to do the site import step—if you want to design a new one from scratch, your blog data will flow into whatever template you design.
  • Remove the search box.
  • Create a local version of your CSS and JS files.
  • Remove just about all of the meta and link tags from the head—do not remove the CSS link until you recreate your style sheet locally.
  • Remove the feedarea
  • Remove the comments at the top that capture the time it took to generate the page.
  • Remove the RSS feeds.
  • Remove the Footer.
  • Replace the headerimage div.

Usability Resources to Win Arguments

thumbToday’s post is a big one and it’s most definitely one for your bookmarks menu, because from time to time when speaking with clients it becomes necessary to have material to backup the statements which you are making.
Sometimes clients will suggest things such as forcing all users to register with a six page long form before they can even access the site. They aren’t web professionals, it’s not their fault for not knowing that this isn’t a good idea from a usability perspective.
If you’re going to convince them that this is a bad idea, however, then you’re going to need some rock solid material to back that up. While an element of trust is always important to a working relationship, you have to respect that sometimes clients will just need to see the facts in front of them to fully understand that what you’re saying is correct.
So, what we’ve done for you today is compiled a list of some of the biggest, most compelling usability articles which address common issues. Hopefully this should help you during tough conversations about what does and doesn’t work on a a website.
Bookmark this post, come back to it, use it in meetings and educate your clients on the things which work for other websites, so that they might also work for them.

How Not Forcing Users to Register Increased Sales by $300million

A truly fascinating article covering how one ecommerce site removed forced user-registration during the checkout process, with a result of a $300million increase in revenue. Very impressive.

10 Useful Usability Findings and Guidelines

  • Form labels work best above the field
  • Users focus on faces
  • Quality of design is an indicator of credibility
  • Most users do know how to scroll
  • Blue is the best color for links
  • The ideal search box is 27 characters wide
  • White space improves comprehension
  • Effective user testing doesn’t have to be extensive
  • Informative product pages stand out
  • Most users are blind to advertising

The myth of the page fold: evidence from user testing

“People tell us that they don’t mind scrolling and the behaviour we see in user testing backs that up. We see that people are more than comfortable scrolling long, long pages to find what they are looking for. A quick snoop around the web will show you successful brands that are not worrying about the fold either.”

247 web usability guidelines

A massive post of usability articles covering:
  • Home page usability: 20 guidelines to evaluate the usability of home pages.
  • Task orientation: 44 guidelines to evaluate how well a web site supports the users tasks.
  • Navigation and IA: 29 guidelines to evaluate navigation and information architecture.
  • Forms and data entry: 23 guidelines to evaluate forms and data entry.
  • Trust and credibility: 13 guidelines to evaluate trust and credibility.
  • Writing and content quality: 23 guidelines to evaluate writing and content quality.
  • Page layout and visual design: 38 guidelines to evaluate page layout and visual design.
  • Search usability: 20 guidelines to evaluate search.
  • Help, feedback and error tolerance: 37 guidelines to evaluate help, feedback and errors

An Introduction to Using Patterns in Web Design

A fascinating article covering the use of patterns for usability in web design, or “chunks” as the author calls them!

F-Shaped Pattern For Reading Web Content

Eye-tracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Top Ten Mistakes in Web Design

The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Weblog Usability: The Top Ten Design Mistakes

Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.

Top-10 Application-Design Mistakes

Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both.

Mega Drop-Down Navigation Menus Work Well

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.

10 Usability Crimes You Really Shouldn’t Commit

A big post by Chris Spooner covering forms, logo links, link states, alt attributes, background images, content, link text and text alignment.

Blasting the Myth of the Fold

Another article slamming the idea that nothing below the fold ever gets seen. Users know how to scroll. The fold is relevant for a few things, but it is not the be-all and end-all.

UX Myths

A great site which is regularly updated with a list of (sometimes funny) myths of user experience issues, these include things such as “all pages should be accessible in 3 clicks” and “the home page is your more important one”.

Eyetracking points the way to effective news article design

Real eye tracking tests carried out and showing interesting results with regards to the effectiveness of laying out new articles and blog posts.

Label Placement in Forms

A detailed case study showing that the optimum placement for label forms is to the top-right of the form field.

12 Standard Screen Patterns

A great rouncup of some standard screen layouts which may pursuade clients away from spherical invisible navigation, or similar.

“Mad Libs” Style Form Increases Conversion 25-40%

This interesting article covers how well forms work when arranged as blanks within sentences rather than simple linear pages.

Breadcrumbs In Web Design: Examples And Best Practices

“On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages.”

Inline Validation in Web Forms

A study by A List Apart on inline validation in forms with live user videos showing the differences between standard forms vs inline validation.

What about you? Do you have any really great articles like these which you think would be a good addition to the list? Drop us a line in the comments below so that everyone can benefit from them!VROOSH! Metacrawler