Brainstorming, Designing, and Building a Website With Your iPad

So you’re sitting in this airport with your iPad when all of a sudden you get the urge to play around with designing a website. What are you supposed to do? You don’t have your computer on-hand, and surely the iPad couldn’t help you brainstorm, design, and build a website, right?

Wrong. With the proper tools the iPad could easily be a useful crutch in this scenario, allowing you to capitalize on a burst of inspiration or kill time in a productive way. Let’s dig in.

Brainstorming

The beginning of any project is the brainstorming phase. You might be walking around, or playing a game, or doing anything but focusing on web design when something will come to you out of the blue. Or, alternatively, maybe you’re sitting there staring into space, trying to think through a problem.

Both issues have the same solution: writing the ideas down. Putting pen to paper (or finger to screen) allows you to actually see what you’re thinking, giving you an entirely new perspective and insuring that whatever happened to be in your noggin will be preserved for as long as you like. These two applications can help you get those ideas from your brain to virtual paper.

Penultimate

My favorite app for brainstorming ideas on my iPad is Penultimate. While there are other, more capable notepads for the iPad I’ve found that Penultimate is the best fit for what I would like to do with just the right amount of stability.

You won’t be able to design a website with drop-shadows and startling CSS3 transitions, but you will be able to transfer your thoughts into the application before they’re lost to the winds.

 

Adobe Ideas

Alright, you want to take it a step further. Maybe the shackles that you were forced to get when you bought Photoshop mean that you can only use their products for anything web-related; whatever the case, Adobe Ideas can be a functional notepad as well.

Design

When you say ‘design’ in the context of the web, many people will immediately jump to glossy buttons and gorgeous lighting, focusing on the decoration instead of the structure of the page itself.

Instead of even trying to replicate something like designing a webpage in Photoshop (or equivalent graphics creator) let’s focus on the bare minimum: information architecture, user workflows, and typographic decisions.

OmniGraffle

While OmniGraffle is by far and away the most expensive application on this list (it runs at about $50) it’s also the most serious tool that you could use for mocking up a website.

Now, you won’t be able to design in the granular, PSD-perfect way that you might be able to on the computer, but that isn’t the point of OmniGraffle. Instead, OmniGraffle (at this point I just want to see how many times I can say that in this article) allows you to mock up the layout and userflow of your website.

FontBook

According to this incredibly scientific audit that I just performed, eighty million percent of the web’s content is text. When you’re trying to show people that much information in the same way, you’re going to want to take a look at FontBook. Instead of relying on all of the default fonts, why not take a look at some of the better typefaces suited for the Web? Whether you’re looking for a specific typeface to use on your website or you’re simply searching for some inspiration, FontBook is chock-full of all the typeface goodness you could ever want.

Creation

Okay. You’ve got all of your thoughts into your iPad, added either with your incredibly adept phalanges or the wonderful Cosmonaut that I told you about before. You’ve browsed through the entirety of FontBook – twice – and you’re ready to work on building your actual website.

Textastic

I’ve already taken a look at Textastic, but for those that need a refresher: Textastic is a fully functional code editor for the iPad with syntax highlighting, TextExpander support, and a whole slew of options to help you accomplish whatever you need to do with your website.

 

 

Koder

Okay, so Textastic wasn’t your cup of tea. You found yourself thinking ‘this is pretty nice, but I really wanted an editor that incorporated some silly spelling, maybe a play-on-words.’ Buckle in friends, because Koder has you covered.

While it doesn’t have the same features as Textastic (TextExpander support is notably missing) it should allow you to work with your code in much the same way, offering syntax highlighting, its own snippets system, and a tabbed interface that allows you to work with multiple files at once.

Conclusion

Many would have called it impossible, but you’ve just built an entire website on your iPad. This deserves several hearty slaps on the back and maybe a cup of ice to ease the swelling in your poor, crippled fingers.

In all seriousness, this isn’t going to be easy. Many people that are interested in creating a website have already done so on the desktop and are set in their ways. Writing a large amount of text on the iPad can be a frustrating experience, and none of the applications listed have the power of desktop cousins.

If you want to ge some work done on the go, however, or you aren’t completely tied into one system, the iPad can work. You’ll probably want to use a bluetooth keyboard to do your serious typing, but you’ll certainly find that the iPad is more capable than you may originally have thought.


  • http://www.JpakMedia.com/ Jordan Pakrosnis

    While Koder is a pretty nice looking app with a good UI, the website preview NEVER works, and the application constantly crashes**. Textastic is pretty nice though. It simply works, but you may want to put in a couple files with code snippets you can use until they add them to the app.

    **Currently released version of Koder for the iPad 2.

    Very nice post for web devs like me though; thanks Nathaniel!

  • Hashem Zahran

    As you were reading my mind..l I’ve been searching all week long for similiar apps & accisorries to transform my work from Desktop to iPad… Your selected collection is very nice spcially th crreation apps… Thanks

  • Hans K. Froschauer

    Gusto is definitely missing on this list – I’ve been using the app for quite a while, and it’s a great coding app, with ftp-support and lots of bells and whistles. IN regards to quality, features and design it’s more than on the level with Textastic or Koder.

    For all 3 apps I have to say that I wouldn’t consider creating a website with them – I use Gusto to make corrections on existing sites, directly on the server.

  • http://matchboxhq.com Todd

    Thanks for this! I’ve recently started using my iPad more for dev and setup an external keyboard too. Koder is definitely much better than Textastic. Thanks for the insight Nathaniel.

  • http://www.brain-squeezer.com/ Josh

    Another collborative brainstorming by design app for iPad.

    • Josh

      Sorry, here the website of BrainSqueezer :
      http://www.brain-squeezer.com

      • Jokerad7

        Thank you Josh. I will try it soon…

        • http://www.toddmotto.com Todd M.

          Thanks for the link Josh. Great resource!

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow