How to Create a Website Using Only iPad

thumb_ipad

Have you wanted to create a new website while sitting in your doctor’s waiting room? I guess not that many people think that but I tried using some iPad apps and released HTML template for free! Yes, that template was created on iPad :)

Useful Stylus Pen

stylus pen
Stylus pen is a useful tool to write or draw something on mobile device or graphics tablet. I bought this stylus which I don’t remember the brand name. You can write smoothly but it’s not that easy to write small character and details because a nib is thick.

stylus pen jot pro
Jot Pro has thin and clear disc. Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.

stylus pen

Using a tissue or cloth, you can write while putting down your wrist :)

Wireframe

Bamboo Paper – Free


Sketch out your thoughts and ideas on digital paper using your own handwriting. Wherever you are, at home or on the road. Bamboo Paper lets you take notes, draw, doodle, jot down recipes, write a quick list, entertain the kids… you name it! Easily create and manage your own personal library of notebooks.

Bamboo Paper

I made rough wireframe!

Adobe Proto – $9.99


Adobe Proto is a new Adobe Touch App, lets you create interactive wireframes and prototypes of websites and mobile apps on your tablet. Communicate and share ideas with teams and clients using a touch-based interface.

Adobe Proto
Insert interactive wireframe components from the component toolbox, including menus, tabs, accordions, and more, to quickly capture your design idea.

Adobe Proto
You can make a wireframe without thinking!

Design

Adobe Photoshop Touch – $9.99


The Adobe Photoshop Touch app lets you quickly combine images, apply professional effects, share the results with friends and family through social networking sites like Facebook, and more. Use Photoshop features designed for the tablet such as layers, selection tools, adjustments, and filters to create mind-blowing images.

Adobe Photoshop Touch

Let's get started! Create new canvas and tap on '+' to add new layer. It seems you can't change the layer name. Also you can't create patterns so I drew the line, duplicated that layer, slided it a bit, merged those layers and duplicated again... etc etc to make a background image...

Photoshop touch

Put texts, lines or images etc

Adobe Photoshop Touch

You'll see 3 dimensions image when you double click on the layer.

photoshop ipad

There is no slice tool so you need to crop it one by one. Normally it's saved PSDX format. Choose 'Save to Camera Roll' to save as JPEG or PNG.

Coding

Textastic Code Editor – $9.99


Textastic Code Editor is an advanced code editor for iPad with rich support for syntax highlighting, (S)FTP and Dropbox. Textastic’s code editor is written from the ground up using native iOS APIs like Core Text. Particularly evident during interactive search, the text editor is quick and responsive.

Textastic Code Editor
Tapping on the editor with two fingers brings up a cursor navigation wheel that simplifies text selection. Code completion for HTML and CSS. External keyboards are fully supported.

Textastic

Connect to FTP, SFTP and WebDAV servers and to your Dropbox account, use the built-in WebDAV server to easily transfer files from your Mac or PC.

Diet Coda – $9.99


Coda also released HTML editor app when I was writing this post. I usually use Coda so I bought both Diet Coda and Coda 2!

Diet Coda

Edit file on (S)FTP. Choose a file and tap 'Edit in Diet Coda' to start.

Diet Coda

Screen image. Super loupe is awesome!

Coda AirPreview
Your iPad will be a dedicated Coda 2 preview using AirPreview function.

However, I feel Diet Coda has a downside compare with Textastic Code Editor. For example…

  • You can’t edit files locally
  • Using Textastic Code Editor, you can save files on Dropbox
  • Textastic Code Editor has better key board for coding
  • A bit slow
  • I don’t like black background

You cannot sync your Diet Coda and Coda2 using iCloud yet. And again, Textastic’s cursor navigation wheel is just amazing. So I would say Textastic is winner at this time.

Done!

Coming Soon template
Back to Mac, tested on other browsers and finally it’s done! Please have a look “Free “Coming Soon” Page Template with Countdown Time” to see details and download this HTML template!

Conclusion

It’s time-consuming job but possible to built a website using only iPad. It wasn’t difficult to make a wireframe and code. Designing with Photoshop Touch requires great care. It’s unsuitable to design a website unless adobe adds tools such as guide, ruler or slice.

What do you think? Let me know if you know better way or apps!

Share

Comments