Build a Complete Website. On an iPad.

Let’s take a look at how (or indeed if) it’s possible to design and build a website entirely on an iPad. We’ll use a variety of apps to conceive, wireframe, design, code and deploy a simple HTML web page.

Ever since tablets breached into mainstream usage, we’ve taken a quick stance on working out the best way to support these new devices for consumption of web content. I’ve written numerous articles across our blogs about this topic, as have many of my fellow writers. Books have been published. Panels have been held.

But what if the tablet could be a viable platform, not only for consumption, but for creation? There’s been a recurring meme that touch devices are no good for productivity, and there’s no hope for getting any real work done on one. Yet, its svelte form and portability make it a fantastic device, especially for freelancers, who aren’t necessarily tied down to a specific workplace.

Step 1: Bringing Together Ideas

The first stage of the design process is planning and bringing together initial ideas. Before we jump ahead and start investigating putting together actual wireframes or prototypes, there are a number of useful iPad apps that can be used to simply sketch out very rough ideas, or prototype little parts of a design.

I opted for using Adobe Ideas to bring together some initial ideas and concepts. Using the large canvas, it’s possible to draw out a very rough mockup of a potential site, and then easily zoom out and annotate it on the sides. Obviously, we’re not carrying out anything too complicated with Adobe Ideas (it’s probably not capable of doing much more, to be honest), yet it’s still a useful app and is a natural suitor for the iPad.

I was also able to use Adobe Ideas to sketch out some basic flowcharts for site structure, etc. The iPad’s touch screen makes this an intuitive process, and its form factor means it’s easy to pass around to collaborate with anyone involved.

Ideas and Concepts: The Apps

Adobe Ideas is $9.99 (a price that has risen quite significantly since its release as a free app) and is essentially a sketchbook. The app offers a canvas in which you can explore ideas with a basic freeform drawing tool.

Combine the app with one of a number of styluses available from third parties and you’ll get a fantastic tool for putting together rough concepts and visualizations of your ideas. If you’re working with others and want to demonstrate to people what you’re thinking, Ideas gives a great platform for you to do so.

There are of course alternatives to Adobe’s app (and its $9.99 price tag). Jot! Whiteboard is a viable alternative, providing the same style of basic drawing and sketching. With the same uses, Jot! Whiteboard also includes a feature for live sharing of your sketches with others, either via another copy of the Jot! app or their browser. Jot! Whiteboard is available for $4.99 in the App Store.

One more popular iPad app for sketching and conceptualizing design ideas is Penultimate, which again offers a canvas to write and draw upon. You can easily send your ideas off to clients or co-workers as a PDF too!

Penultimate is the cheapest of the trio of apps in this section, costing just $0.99.

In addition to actually playing host to sketches of design concepts, these apps can be a great way to draw out mind maps and more general notes on briefs from clients, design ideas and more. There’s a wealth of note-taking apps available on the iPad, including the stock example which comes preloaded onto your iPad.

Don’t forget that even features like Safari’s “Reading List” can be incredibly useful, as you bookmark bits of the web, syncing the saved webpages to all your supported devices (including, of course, your iPad).

Step 2. Creating Wireframes, Prototypes and Planning

Now that you’ve explored and recorded ideas, it’s time to actually put them together and produce a plan. Fortunately, there’s an abundance of wireframing and general apps to help your planning process on the iPad. I chose Adobe Proto to do my wireframing.

Adobe Proto is very similar to Adobe Ideas, sharing a comparable interface. However this time, instead of freely drawing with your finger (or stylus), you’ll use a set of components to piece together a wireframe. The super cool thing about Adobe Proto is it includes some really useful features for wireframing, such as integration with a range of popular CSS grid systems.

Once a wireframe is setup, and we know the plan for a simple webpage, we’re able to go ahead and commence work.

Wireframing: The Apps

You’ve probably heard of OmniGraffle already, if only due to its $49.99 price tag. That cost is indeed hefty, albeit fixed and non-recurring, but this tool is one of the most sophisticated available for the platform.

OmniGraffle is all about planning, whether that be creating elegant, structured flow charts and diagrams, or sketching out wireframes freehand. OmniGraffle is very versatile, being able to adapt into many different industries’ work, including web design. The whole host of features culminates in plans that compete with those created on a traditional desktop driver.

OmniGraffle certainly deserves its honorable mention, but there are a lot of alternatives available at significantly cheaper prices. SketchyPad is a $4.99 app for iPad which offers the tools to create some effective wireframes from a wide catalogue of stencils and elements that piece together to create a final piece.

The app that I used was of course Adobe Proto, Adobe’s wireframing app. Adobe Proto allows you to easily sketch out website and app wireframes with a variety of components, and even align them to well-known CSS grid systems.

It’s pointless for me to go over every planning app out there, but I feel obliged to mention one more app that stands out for me. While it doesn’t have the most beautiful UI, the $9.99 Mocking Pad is fairly straightforward and somewhat minimalist, making your sessions of planning and putting together your final ideas a breeze.

Step 3. Setting Up For the Build

Before we skip forward to the stage of building a working design, we need to establish where we’ll actually be creating the site.

The iPad is unquestionably a device that can get stuff done. Unfortunately, one of its major disadvantages is the way it handles files. Apps feel somewhat sandboxed and tools like Finder or Explorer just aren’t available on the platform. Therefore, carrying out local work can be awkward.

Fortunately, we can utilize off-device storage to work on our sites. A simple way of doing this would be to work on the web, connecting to a live server over FTP (or alternative), and hosting files that way.

Alternatively, we have the option of Dropbox, a service that’s integrated into a number of the apps we’ll come to look at in the next section. With a fairly generous storage capacity for free (larger capacities are available at a fee), Dropbox is a great tool to store, sync and even version your files, as well as share them with co-workers or clients when needed.

While Dropbox is integrated into a number of the apps that we’ll look at in a moment, there is an official, free Dropbox app for iPad too.

Step 4. The Build

Now it’s time to actually put together a website. There’s a variety of code editors available for the iPad, but I’m going to use Diet Coda, Panic’s recent iOS release.

Once connected over FTP and having setup a site, you’ll essentially be launched into a writing experience familiar with Coda for Mac OS X. With relative ease, by tapping on the plus icon in Diet Coda, you can setup a new directory and any files inside it. I created an HTML file and a CSS stylesheet and opened them both up. Don’t let the iPad’s fairly small screen dissuade you though; by tapping on the purple page icon in Diet Coda, the app reveals its tabs, allowing you to quickly switch between open files (although this would be nicer to have permanently open subtly at the top).

Ultimately then, it’s a question of coding. By tapping on the snippets icon, you can easily drag in saved or preset code in Diet Coda, which speeds up a bit of the time spent actually writing the code.

Perhaps the biggest flaw in Diet Coda is that you can’t upload images or other files. If you’re creating an image-heavy site, this can potentially be an issue. I only needed a single image in this particular page, which I was able to successfully upload outside of the Diet Coda app using an FTP client.

There are several standalone FTP clients available for the iPad (literally just search “FTP” in the App Store), although even some of Diet Coda’s rivals have built-in FTP clients themselves suitable of doing the job.

Having passed the hurdle of uploading images, I was able to finished my admittedly simple webpage in Diet Coda just fine. It did indeed work and, again, while nothing special, I created a webpage entirely on my iPad, from concept, to wireframe, to a finished piece.

Coding: The Apps

There are several text editors available for the iPad, but four really stand out. The first is the most recent release, Diet Coda, a $19.99 app from the developers of the popular Mac OS X App, Coda (and its most recent version, Coda 2). I took a look at Diet Coda back when it was released last month.

I’ve played about with Diet Coda and it’s a pretty impressive editor. It does seem more like an app for editing rather than creating, with no local editing, but it’s certainly capable of doing the latter. Unfortunately, without any local storage, you’ll need to setup some sort of remote storage option, connecting via FTP or SFTP.

Personally, my day-to-day life consists of a lot of writing, and I sometimes have to format as HTML. Obviously it’s not on the same level as designing a website, but I did need to find a suitable text editor for when I wanted to write on my iPad. My app of choice, before the release of Diet Coda, was Textastic, at $9.99.

Textastic is, at its core, a text editor for editing in more than 80 languages, including HTML, CSS, etc. All the apps in this section share the same basic functionality, but what stand out in Textastic are its connection options. In addition to syncing your files to an FTP, FTPS or SFTP server, you can also easily share your documents to Dropbox and have them sync to the cloud and your other devices. Additionally, the built-in WebDAV server allows you to easily transfer files over WiFi to your Mac or PC.

Gusto is another text editor, available for $9.99 in the App Store. Featuring much of the same functionality as the aforementioned, Gusto too supports file transfer over FTP, SFTP, FTPS and Dropbox, making it a great option.

I haven’t had the opportunity to use this next app, but from what I can see from iPad.AppStorm’s review, it looks pretty cool.

Koder is the cheapest of these four, priced at just $5.99, and looks fantastic. In its sleek UI, Koder supports the authoring and editing of a whole host of languages, including our old friends HTML and CSS (if they didn’t support this, they wouldn’t get many sales).

Like the previous three, Koder supports file transfer over FTP, SFTP, FTPS and Dropbox, although you’re free to work locally.

Step 5. Testing

Ultimately, the best way to test your site on various platforms is to actually do it. If you’ve used one of the editors we discussed with Dropbox support (or the built-in WebDAV server), transferring your files to a different device should be a breeze. Or, if you’ve been working over FTP, you merely need to pull up a browser on the device you want to test, or use a service like Adobe’s BrowserLab.

Bonus Apps

There are a few apps that caught my attention that can be useful throughout the process of building a website.

FontBook is a $5.99 reference app all about typography, documenting the work of numerous type foundries and designers and offering up thousands of fonts for you to investigate. Plus, being optimized for the new iPad’s retina display should mean it looks absolutely fantastic!

CSS3Machine for iPad is another reference app that allows you to play about with styles, and even view what you prototype remotely in the browser of another device. CSS3Machine is even capable of building and exporting WebKit animations and more, allowing you to very easily put together some fantastic CSS and drop it into your project.

Don’t forget your browser. Through Safari on your iPad, or a third-party downloaded browser, you’ll have access to a world of documentation, inspiration and community support, so certainly don’t see the iPad as an isolated development device.

In this article, we’ve walked through the process of how it’s possible to produce a website entirely on an iPad. And we managed it, from planning to construction.

I’ve only mentioned the apps that I’ve personally had good experiences with, or have really been standing out for me. If you’ve been designing and/or developing on your iPad, share your experiences and favorite apps in the comments. Thanks for reading!