Social Feasting

Three weeks ago, just before a much anticipated summer vacation, my shiny new iPad 2 arrived. Armed with my Nikon D90 DSLR and the Apple iPad Camera Connection Kit, I was more than ready to leave my clunky laptop at home and travel light (from a technology perspective anyway). I of course fully intended to blog during my vacation. I was visiting the Pacific Northwest after all and had planned several blog-worthy food excursions. This should be easy-peasy from my iPad right?

Wrong.

I had expected selecting the right tools for editing photos on my iPad to be somewhat of a hurdle (it wasn’t, BTW), but was totally blindsided when I realized that creating a Wordpress blog post wasn’t as smooth of process as I was accustomed to. It’s down right clunky and annoying in fact. How-tos on this topic are surprisingly few and far between, so after a little research and a great deal of experimentation, I concocted a usable process. Hopefully other Wordpress bloggers with iPads can learn from my floundering and get blogging faster.

The Crux of the Problem: Image Upload and a Bad App

As I started to dig into just how I’d have to modify my blogging style when working from an iPad I discovered there are two key issues that create unexpected complications:

• Lack of access to the file system for photo upload. Just like the iPhone, the iPad doesn’t have native support for access to the file system. Some tools like GoodReader help with this on a day-to-day basis, but they don’t help websites access the files on your iPad for upload. The bottom line is if you want to upload an image to your Wordpress blog from your iPad you won’t do it from the web interface. That’s where the Wordpress iPad app comes in. Just skip the web interface entirely, right? If only it were that simple…
• The Wordpress iPad app less-than-stellar. The Wordpress app is, frankly, awful. It’s a stripped down version of the web interface that requires hand coding of HTML if you want to format your posts at all. All of the intuitive interface elements that are at the core of the success of blogging are simply missing. It’s just not worth the trouble to write posts in the interface, particularly when the web interface is significantly better. While the Wordpress web interface as seen in Safari isn’t as robust as the one you’d find in a full-featured browser, due largely to a lack of support for AJAX in Safari, it does have a collection of tools that make formatting and finalizing posts with HTML much easier. It also has the familiar interface for tagging, categorizing, and scheduling posts as well as access to all of the tools you need to manage your blog. The Wordpress app does have one redemptive quality: image upload. Unlike the web interface, you can access your iPad camera roll from the app. All of the iPad image tools for importing and editing save your images to your camera roll, making the app your best option for uploading images from your iPad to your blog.

My Solution

Okay so, the Wordpress web interface in Safari is pretty good but doesn’t allow image upload. The Wordpress iPad app is awful. Now what?

Use both.

I ended up with a two-step process that takes advantage of the best of both Wordpress tool options:

• Create a post in the Wordpress iPad app, attach all of the photos I need for the post, and save as a draft.
• Write, format, and finalize the post via the Wordpress web interface.

I’ve detailed this process with screen shots at the end of the post. Hop on down there for a visual guide.

Generally I don’t draft my post text in the Wordpress app just because I like to format as I go along, but you could also draft the basic text in the app and finish with the better Web-based formatting tools.

I’ll admit it’s a little wonky to use two tools but not nearly as wonky as hand-crafting markup in the Wordpress app or uploading image files to an FTP server to reference from the web application, one of which would be necessary if I wanted to move to a singular tool to create a post with images in it from the iPad. I’m also not wiling to buy a third party app like Blogsy because I’ve already invested enough in apps and tools for blogging. I can live with my two-step process, at least until Wordpress gets their act together and makes their iPad app the quality tool it should be.

Niggling Annoyances

Once you decide how you want to solve the image upload issues, there aren’t big barriers to blogging from the iPad, only annoyances that make creating long or complex posts more difficult than they are worth. My top three irritants are:

1. Typing on the iPad. I can’t type as fast on the iPad as I can on a keyboard, but I can solve this over time with a) practice and/or b) a bluetooth keyboard.
2. Moving the cursor around on the iPad. I tend to move my cursor all over the page when I’m blogging and I’m not as precise with my fingertip as I’d like. An inexpensive stylus or practice (again) will make this better.
3. Tabbing between browser screens. My personal blogging style has me hopping back and forth among browser screens for URLs and references. I can do this easily with keyboard shortcuts on a PC today but have to resort to a the finger again, as it were, on the iPad. This is just another acclimation issue that I’m sure I’ll overcome with time.

For now, I’m limiting my iPad blogging to shorter content (500 words or less generally) and am avoiding recipe posts because of the hRecipe XML code I have to manually tweak for them. Managing markup on the iPad is tedious and error-prone and so I’ll save that work for a more robust interface.

What about Tumlr posts like this one? Images are an issue for Tumblr too (surprise, surprise) and I haven’t yet found a solution for writing a Tumblr text post with multiple images. I’ll report back when I do.

My Two-Tool Process, Illustrated

For those new to the Wordpress iPad app and web interface, I captured the activities I go through in each tool as I created my latest food blog post covering my foodie adventures in Boston.

Note: these steps assume you already have images ready for use in your post and the they are tucked away safely in your iPad Photo Library.

Attaching Pictures to a Draft Post in the Wordpress App
To get started on your draft, launch the Wordpress iPad app and create a new post. Give it a title and click on the photo icon in the bottom right corner.

Select the Add Photo from Library option and select the image you’d like from your collection.

The app will ask you what size you’d like the image to be. I found it difficult to manipulate images from either the Wordpress app or Safari web interface, so I’d recommend specifying the size you need for the image now.

Small, medium, and large were arbitrary for me and I know I need my images to be no bigger than 500 pixels wide for my blog theme, so I use the custom setting to control the size.

Click OK and the app will attach your image to the post.

Lather, rinse, repeat to add as many photos as you need for your post. You’ll add text around them later in the Wordpress web interface.

Before you move on to creating the text for your post, be sure you set it to save as draft in the Settings (accessible from the wheel icon at the bottom left of the post screen) instead of to publish which is the default behavior.

You can do all of the activities in the Wordpress app without being connected to the Internet. The draft post and images will synch with your blog the next time you connect. I tested this from a cruise ship with no connectivity just to be sure. You’ll need a live connection however to work with the Web interface and finish the process.

Finishing the Post
Now it’s time to switch over to the Wordpress web interface to finish the post. When you log into your blog you should see your draft post ready and waiting for you to edit at will.

As part of my post creation I like to go in and modify the image names to make them more userful than the system generated names assigned by the Wordpress app. Click the image icon at the top of the Wordpress post editor and click the Gallery tab to get to your post images to edit each one’s attributes. Don’t forget to set the alternate text at the very least to make your content accessible. You can also set one of your photos as the featured image at this time if your blog theme uses featured images.

As I mentioned earlier, the Wordpress interface in Safari isn’t as full-featured as you’ll find in other browsers, so you still have HTML to contend with, but there are tools that make it easier.

Once you’ve tweaked your text and settings to your heart’s content, you’re ready to publish!

Do you have tips and tricks for blogging from the iPad? I’d love to hear about them in the comments.

Chris Pearson (@pearsonified) of DIYThemes schooled us in critical things to know about how people interact with a website. I expect we’ll see a whole group of Austin food blogger redesign efforts cropping up in the next few weeks.

Two Elements of Elements of Effective Page Design

1. Your goal for the page (sell something, e-mail subscription, etc).
2. The user’s intent on the page.

When people are looking at your web page they are in a very tenuous state of mind. You can use page elements to sway them to do what you want them to do. To make this work, your goals for the page need to align with the user’s intent.

Designing for user behavior is like dating: it’s a courting process with a focus expectations. Users are in one of three frames of mind when they begin their courtship with you.

1. Flirting. They don’t know you and you don’t know them. They may have landed on any part of your site from any source (search, blog links). Optimize the most common flirting pages like the home page to appeal to flirters. People won’t look to hard to find the value you have to offer, you have to make it apparent. Default blog templates aren’t typically set up for flirting so you’ll need to modify them. Always be flirting.
2. Information gathering. Help people find the information they are looking for and remove all other links or distractions that can fracture the experience. For example, the e-mail sign-up page should focus on e-mail, not on links to other parts of your page or other actions. Lead people from the top to the bottom of the page in a straight line to get them to take the action you want. People need room to think. When they are trying to make a purchase decision their eyes seek white space to escape dense information.
3. Taking action. Don’t get in their way and make it as easy as possible for them to take action.

My Ah-Ha Moments

• There’s just too much to digest on any given page of a blog. We’re not only sharing content but we include ads, blogrolls, tag clouds, and a whole host of badges. It’s distracting and may ultimately impact the efficacy of the blog. We should all look at each section of our blog with our and our community’s intents in mind and optimize what’s displayed to focus only on what’s absolutely necessary.
• Most Wordpress themes (exempting Thesis of course) don’t approach web design with these principals in mind. They encourage adding widget after widget of extra information creating a cluttered and overwhelming experience. Next time I shop for themes I’ll look for a strong combination of simplicity and flexibility. In the mean time, I’ll do what I can to customize my current theme with Chris’ principles in mind.