For those tl;dr folks, the short answer: still no Coda or Espresso for iPad.
A while ago, right when the iPad app store first launched, I reviewed two very basic (and crashy) web development tools for the iPad. They could connect to an FTP, edit any readable text, and reupload it to the server. You couldn’t possibly imagine coding a website using those apps, but they made do for emergencies when all you have is your iPad.
We’re now six months into the iPad revolution, and its time to reassess the scene. I’m sad to report, that not much has changed. While both Markup and Gusto have become much more stable and have got a few features, they are still not different enough to warrant a re-review. But we do have some new apps that have something to offer. But first, let me discuss what exactly it is I need in a web development tool on the iPad.
First and foremost, I need it to painlessly connect to FTP servers and Dropbox. To work on live files is an important, as it allows one to perform maintenance on the go. Using iTunes to transfer files, or even a Wifi sync solution is not the ideal way to develop for the web. Second, I need a nice clean editor, with syntax highlighting, collapsible sidebar, and special keys mounted atop the virtual keyboard. Having just a plain basic onscreen keyboard is useless when you constantly need to enter special characters. Third, it should preview your page. And lastly, it shouldn’t be ugly — even standard iOS UI is fine by me, though I really think web dev apps will need to think beyond the standard two column view.
TEXTASTIC
Brand new editor by Alexander Blach, Textastic’s USP is its ability to recognise and highlight the syntax of over 80 types of documents. Which means all your PHP and CSS documents will show up colour coded, and they do. The left edge of the document shows the line numbering, and it will even bring up a little HUD showing you line and column numbers when your cursor is in edit mode. Textastic also features a brilliant keyboard, with most of the necessary function keys right atop your regular soft keyboard. And lastly, Textastic has got some pixel love from Michael Flarup, so everything looks really good.
But, you can’t use this for any serious development. Not even for your personal blog redesign. Or fixing some broken code in your current blog design. To access files you either need to use the iTunes for a wired transfer, use the Open-In file protocol (so you can open from Dropbox or Good Reader), or transfer them over Wifi by having the app broadcast itself as a WebDAV server (easy peasy). The problem is, you’re dealing with copies of files, which will inadvertently lead to confusion, and friction. The second problem, is that there’s no way to preview your work. You have to send your file to Good Reader, and preview it there. I for one cannot code a site without having a proper preview of what’s happening. As of right now, if you can code a site from start to finish just hacking out a structure, Textastic is fantastic. But that’s not how anyone works. There are other issues as well, like the always visible sidebar. Or how the line numbers are bound to the page, so if you scroll horizontally, they disappear in the overflow (though thankfully you can wrap lines to your choosing). One amazing UI is its search text dialog, which is better seen than talked about. Unfortunately, no find and replace yet.
But all hope is not lost with this app. It’s still a very early 1.0 release and the developer seems to be committed to bringing features like a web view, hiding the sidebar, and Dropbox support. It’s $1.99 as of right now, but it’s most of an investment for the future than a useful purchase right now.
FTP ON THE GO
A brief mention for this feature rich but downright ugly app. It quite possibly is the best HTML editor on the iPad right now. It has access to FTP servers, of whose files you can live edit. It’s got an enhanced keyboard featuring all of the special keys right up there, including numbers. It doesn’t have syntax highlighting nor does it show line numbers. It can collapse its sidebar, do find/replace, and features a web view, although that’s only for external urls. A nice features is you can view a page in the web view and download it for editing, although that wouldn’t be of much use for anything other than straight up HTML pages.
If someone doesn’t mind ugly UI, FTPOnTheGo is quite a viable solution for quick maintenance tasks. But if I can place my bets, I’d say Textastic is going to overtake it in functionality soon enough. FTPOnTheGo’s development has been stagnant since the time it was released (large parts of the code was based on the iPhone version) and I don’t see how they can improve it without rethinking their UI. But I’m probably being prejudiced against it for its untasteful pixels. It’s $9.99, and works alright, even on the iPhone.
CSS3MACHINE
This is a high production quality application with a user interface that will have you drooling. CSS3Machine is an application that allows you to create and apply styles to your HTML documents.
Let me explain the workflow, so you can understand what the app is capable of. From the stylesheet organizer window (much like the iWork document organizer), you create a new stylesheet. This stylesheet comes with predefined HTML templates which include some cards and forms. Create a new HTML template, and get into edit mode. In here, paste in the HTML to the web page you want your styles applied to. Once you’re done setting up your stylesheet, you’re in edit mode. From here, you add selectors to your stylesheet, like add a name (so you can identify it), state whether it’s a div, header, etc., if you want, and mention its class and or ID. Get into the element, and you can add styles like basic CSS, box shadows, transformations — basically the whole shebang. Then switch the panel, and you can add animations.
As you add styles and properties to your document, the preview in the bottom right will update. It will even update as you’re dragging your a slider back and forth.
In terms of functionality, CSS Machine is packed to the brim. You not only get access to all kinds of CSS3 properties, you can even manually edit each selector and add your own CSS to it. Complex properties like gradients are made simple. Need to add a colour stop? Just tap a button, choose a colour, and specify its position. Here’s where things get interesting. With any CSS property selected, tap the i button in the toolbar and it will peel off the user interface, revealing fairly detailed information about that particular property, including the general syntax and browser compatibility info. Tap another “More Info” button and it brings up a web view showing you the official W3C documents. The output document is clean CSS you can be proud of.
So where does this leave CSS Machine as a professional web development tool? The problem, is that is stylesheets are not your own stylesheets. You create the stylesheet within the app, and then export them. Let me put it this way: There’s absolutely no way for you to import your stylesheet into CSS Machine. And you couldn’t possibly imagine doing your entire CSS document inside of CSS Machine because dragging sliders is slower than hacking it out in a text editor. You don’t need sliders for basic CSS, so you’re going to want to construct your document in a basic web dev platform, and then import the document into CSS to add the fancy CSS3 stuff. All this leads to a contorted workflow that doesn’t work for me. Personally I prefer writing all my CSS by hand, but I wouldn’t have minded doing the animation stuff using some a GUI.
What’s the solution for this? Either allow direct editing of CSS documents imported or better still directly on a server. Or at least allow editing of the master stylesheet that you’re working on, so you can paste in a bunch of code. My guess is that CSS Machine is still not able to parse external code so the developer has just cut it out.
What’s the final word on CSS Machine? It’s a beautiful, quality application, with a lot of potential to be the CSS editor on the iPad. It needs to be a little more flexible, like being able to apply a style to a live web-view and edit CSS that is not created by the app itself. A great app to have if you’re confused about how to add some of the complex CSS stuff to your designs. $6.99 is an amazing price for the quality and finish it offers.
The iPad: Content Creation Workhorse, or Toy?
The debate as to whether the iPad is a content creation device is going to go on for some time to come. Sure someone can sit through and code an entire website using just an iPad, but that would be stupid considering how much of extra effort it would take to bring that to fruition (it would however get the Apple press buzzing). But that’s not content creation. Web development on the iPad is a far cry from what you get on the desktop. The difference is so big that you can’t look at the iPad as a serious tool for any kind of web development.
Not yet anyway.