Designing and building a website entirely on my iPad because I am a crazy person.

About a month ago I decided to design and code my website from scratch entirely on my iPad. It was the Christmas break, I had time on my hands and I was curious enough to see just how much real work I could get done on this machine thatI love to use primarily for reading comic books. I don’t use or update my site all that often so paying Squarespace $18 a month for it to just sit there provided me with a good project to tackle.

Nothing is ever done but its mostly presentable. (nicksr.com) All said and done, I did about 90% of it on my iPad + Magic Keyboard and I have the carpal tunnel to prove it. That last 10% were things I ran into that were too excruciatingly hard or impossible to do on iOS*. Here’s what I learned along the way.

Old Fashioned Point-and-Click Design Via Touchscreen

The iPad is a great machine for digital illustration, there are a ton of incredible tools out there that leverage the hardware format and the Apple Pencil in ways that I’d argue probably even give a standard workstation and a Wacom a run for it’s money. But I’m an old fashioned point-and-click designer who is entrenched in the Adobe machine, so I immediate started with what I knew, the stalwarts of my career, Photoshop and Illustrator.

The big guns (Illustrator, Photoshop)

I’m not sure if I would have even thought about starting this without Photoshop and Illustrator. I needed some kind of friendly starting point before tackling something like this and Photoshop and Illustrator were it. They were a m i r a g e. Hot take: Photoshop is decently acceptable but Illustrator is a dumpster fire. Backing up a bit though, lets give credit where credit is due. The fact that they even exist in some kind of functional state on the iPad automatically gives them each 3 points on the board from me, just for showing up.

Illustrator 5/10

It’s Bad.
I’ve been at this for over a month now and I still don’t know how to open a document and just tap to select an object on the canvas. I tap at my screen, I prod with my trackpad, none of it works the way it should. For reasons that escape me, Illustrator for iPad requires one to open up the layers palette (palette for lack of a better word here) in order to select an object manually. Now to be clear, SOMETIMES one can just tap and select an object on the canvas, but there is no rhyme or reason as to why it works occasionally and never most of the time. It’s so glaringly buggy that it absolutely has to be a conscious UX decision, an offensively bad one that I just can’t understand. This is just one of a litany of issues with Illustrator for iPad that I could fill this page with.

Generally it feels like Illustrator is being worked on as an-illustration-app-for-illustrators vs as a vector-tool-for-designers. This is a totally understandable and acceptable approach that is the real core source of my frustrations, but understanding and accepting it does not make my life any better. Desktop Illustrator can be both and iPad illustrator should be too.

Illustrator is very feature incomplete, which is fine but it doesn’t feel like Adobe is working on it as furiously as they are Photoshop. The bright spot to this, and I’m probably spoiling the 10,000 word takeaway here, but I do find that its become immeasurably useful for me in concert with the desktop version. Bouncing back and forth between the two has become an invaluable part of my process lately. Whipping in some designs and tossing the file back to my desktop is a chefs-kiss-gif. In isolation though, its not quite there yet**.

Photoshop 7/10

Not Bad Obama.gif
Photoshop, like its vector generating sibling, is not as feature complete as the desktop. However it nails the UX and feature set and once you wrap your head around the content-aware pallet design system its a very capable design application. Illustrator, which is using a similar content-aware-pallet-design-system implements it with just enough of a departure, and additionally is just feature incomplete enough, that its excruciatingly harder to get oriented in it. That said, if it wasn’t for the consistent UI signposts between these apps and their desktop counterparts it would be infinitely harder to pick them up, to work past the new UI paradigms and get anything done with them. It’s no wonder Adobe has such a stranglehold on this market, having to learn huge new apps that do this sort of stuff is a tough road.

I’m really dying for this to support Smart Objects and animation which are two huge gigantic gaping holes in its feature set. Still, its coming along fast, and is definitely usable.

Adobe is clearly working on Photoshop for iPad at a pretty feverish pace and its really coming along fast. I can absolutely pick up my iPad and get some Photoshop work done in a pinch without too many headaches. And dammit it is just so nice when it all works.

Circling back to IIlustrator, which works like a dream when the desktop and iPad versions are used in concert with each other, Photoshop for iPad is different. The interface paradigms between the iPad and the desktop are sodifferent that its really hard to bounce back and forth between the two gracefully. This is actually where the departures that Illustrator takes actually work for its benefit. On Illustrator I want to use my iPad for specific tasks (freehanding with the pencil). On Photoshop for iPad because I can do more with it than just use my iPad as a glorified Wacom, I want to do more on it and find it jarring to jump back to the completely different desktop interface.

Obviously the iPad version is not all there yet, but because cloud psd’s are so graceful at supporting degraded feature sets, its perfectly fine that it doesn’t support everything. I can just pop over and do the one thing I’m missing on my desktop later. Which brings me to…

Adobe Cloud Docs are a dream…but also a nightmare. (.aic, .psdc)

If there is anything this experiment has done for me it is to bring a great appreciation and respect for Adobe’s cloud document formats. Photoshop and Illustrator cloud docs are a fantastic evolution and the best feature to come to the Creative Suite since Smart Objects. Adobe has done an admirable job of leveraging everything that’s great about working in the cloud, but for PSDs. Not having to worry about saving, collaboration features, working on different machines, it all just kinda works. Which is a bit of a shocker since since the 90’s I’ve been isolated in a one machine per .PSD world which came to a screeching halt every time I hit Apple+S. Honestly cloud PSDs work so shockingly well I repeatedly had test myself to make sure they weren’t broken at first. Its just so seamless.

Edits just work across platforms. If your iPad version of Photoshop doesn’t support something you did on the desktop,thats ok! Is still possible to work on a doc, and when you get back to desktop Photoshop all the stuff it didn’t support is still there. Cloud docs truly work as promised and unlock a multi platform future where you can work on the same docs across multiple machines without slinging giant documents back and forth and its all bullet proof. (Again, most of the time. I get the occasional frustrating sync errors leaving me with multiple versions of the same document littered around my Creative Cloud. Though no lost data yet!) They’re not 100% perfect and they still have a ways to go but they’re really good for most of my needs.

Bad news time, and it has nothing to do with cool creative stuff, its just one of those boring fundamental nuts and bolts things that if you dont get it right, your life is miserable. File management. It’s unfortunate that cloud docs can only live in their weird own isolated world accessible only through Photoshop, Illustrator and the Creative Cloud app. Not amongst the greater hoi polloi in your synced Dropbox-like Creative Cloud folder that shows up in the Finder.

The problem with them living up there insolation is that, for me, .PSDs and .AI files are in a class I call support content. They play a support role to other applications and files and are rarely documents that function in total isolation. They rely on linked Smart Objects, or need to be imported or referenced by other applications or even other PSDs or AI files constantly. So the fact that .AIC and .PSDC can only live by themselves just means they’re not living with the rest of a project and can’t interact with any external assets. It adds a constant extra step to working with them which is the biggest hurdle to integrating them with existing workflows***.

And thats the thing about Cloud Docs. They bring a host of benefits, not (really) having to save, sharability, collaboration, etc. The cost of that being additional mental workload having to manage the files, remembering to archive and restore, and trying to remember what version of the app supports what feature set. Its really up to the individual on whether that trade off is worth the experience.

Gif and animation creation

Not great when you’re giffing from scratch.
Creating and managing gifs was a constant head-to-wall challenge for me. This was the one part of the process I kept having to go back to my MacBook Pro for. I still can’t find an app that will allow me to create a blank canvas at whatever pixel dimensions I want. I’d then want to drop in a bunch of videos, edit, then export a highly compressed gif. ImgPlay was a solid play at the latter, though its no AfterEffects. The former has been completely elusive, resulting in this circuitous process:

1. Either open Photoshop or After Effects on my MacBook Pro, create a document at the non standard aspect ratio I needed.
2. Drop in some clips or edit as needed.
3. Export an .mp4 and throw it on iCloud Drive.
4. Then go to ezgif.com, upload my mp4, convert to .gif, and compress the shit out of it. Save back to iCloud Drive.
5. Then import into Code Editor for FTP transfer.
6. Then test live on server in layout, realize I screwed something up and start all over again.

Additionally I could have just done this on my MacBook Pro in 1/4 the time.

Fonts!

(Typefaces, dammit)
fonts.adobe.com
The site formerly known as Typekit is basically the only place to go. Thankfully its pretty rock solid! My favorite is being able to select a bunch of faces and styles and it’d auto generate just one custom @import url for your project. What a delight not having to import a half dozen links for each font asset. It’s pretty painless to use and integrates really nicely with the Adobe apps on desktop and iPad as well.

File management — a tale of clouds and sandboxes

Circling back to asset management, but getting out of cloud PSDs and AI files, the overall management of files was its own set of challenges. Working on the iPad is basically like hopping from lilypad to lilypad. You have one cloud service over here then you have to take your files and hop to another cloud service over there. Then you’ve got a sandboxed app over there that you have to hop to with all your files again. This leads to leaving a trail of files littered all over your pond. Since every app has its own cloud service or own sandboxed file access I’d have 3 and 4 copies of files living all over the place. For example, I’d have PSDCs and AICs files living up in one part of Creative Cloud that I’d then have to export to a folder on my iCloud Drive if I wanted to drop them into After Effects. I’d have support files like jpgs or doodles living in my photo library or my iCloud Drive. Then Code Editor by Panic had its own sandboxed file area that it works out of in order to push up to the web server. I wish there was some way I could just work all in one place like the old days. Instead I have to spend an inordinate amount of mental energy just keeping file organization and version control straight all in my head.

Development stuff****.

I used WordPress for the backend and just hand-coded the front. I started with an off-the-shelf WordPress theme called Dank Portfolio that I initially started with just modifing but by the time I was all said and done I’d just rewritten the whole thing so much that it no longer resembled where it started. It’s all hosted on my longtime favorite hosting provider, DreamHost. (That’s a referral link.)

I did it all in Code Editor by Panic, an app I was delighted to discover after finding out that Coda and Transmit for iPad don’t exist anymore. It does exactly what it needs to do. Edits code, highlights syntax shit, doesn’t auto correct me and allows me to FTP files up to a web server as well as download them. Like everything on iOS/iPadOS, the UI takes some getting used to. The more like a desktop iPadOS becomes, the more one misses that persistent menu bar like on the Mac. I get why things are laid out in it the way they are, they are cramming a ton of functionality into a teeny living space. As a result, everything takes more taps to reveal functions and it feels incredibly inefficient. Could be a me problem. I’ve used a ton of worse apps in my time, and frankly it made sense quickly so maybe I have no business bitching about it. After all, its not Illustrator-bad.

Because there is no local testing on an iPad I had to work live on the server for EVERYTHING. Which was its own pile of pain especially when I accidentally hosed a few dozen files here and there because of the aforementioned mental version control gymnastics but YOLO— that’s life on the edge. Code Editor kept up like a champ. What a rock solid app. It does feel like its getting a little dated right around the edges especially with being so sandboxed from iCloud Drive but really its solid. I was changing things constantly, shooting it to the server, bouncing back to my browser, jumping back in, etc. I don’t think it crashed on me even once. Even split screen code editing live on the server and refreshing constantly in a browser, it all was seamless and without a hitch.

But speaking of no local testing on the iPad, it brings me to what was 100% guaranteed easily my biggest headache of this entire project. The hyper-aggressive caching of Safari for iOS. Since there is no way to set the cache to zero or easily empty it. Any time I wanted to test my changes I would have to…wait for it… jump to Settings > Safari > Advanced > Website Data > Search for my domain name, swipe and delete. Only then could I hit refresh in Safari, look at the change, close the tab, and repeat. Oh wait! Heaven forbid I go through all that only to get back to Safari and realize I hadn’t closed the tab previous to doing all the cache emptying nonsense because then I’d have to do it all over again. Sometimes this process also involved force quitting Safari. For literally every single change I tried to make. It was utterly infuriating. I almost gave up pretty early on. I even tried to write a Shortcuts script to automate the process but unfortunately to no avail. You can’t access that menu area through Shortcuts.

Thankfully, there were some options to save the day!

Inspect Browser
This was a life-saver. It allows you to set the cache to zero, and get a developer console to see all your source code, your CSS tree, and all that other nonsense that just lives in desktop web browsers for free. You could even have your code on one side of the screen, your site on the other and drag the little divider around to check the responsiveness. This app was worth double what they charged.

Edge
Edge was the best as far as browsers go for not being super aggressive with its caching. A few refreshes and it usually grabbed the latest version. The others not so much but none of them were as bad as Safari. In order it’d be Edge, Firefox, Chrome then Safari. However through all this I really gained an affinity for Edge. Maybe its because it was the only browser that just worked right, or the hard-edged utilitarian design aesthetic, I dunno. I really had a soft spot it by the end. Not enough to switch for my daily browsing but definitely its my first alternative*****.

At the end of the day I was genuinely surprised by how do-able this task was. Sure, it probably took longer than it needed to, but its good to know that the iPad has come far enough that you can actually get some real shit done on it from time to time. And even in a pinch, get a lot of shit done on it. It’s by far my favorite computing environment these days, despite its foibles. I find sitting on my couch tapping and prodding away on it to be a delight and the Magic Keyboard is 100% responsible for that. I still love my MacBook Pro, I use it for work every day, but using it feels like going to the basement to get my toolbox. It’s big, rusty and heavy. Though its familiar and I can use all the things in it with my eyes closed, I feel better about closing it and putting it away than I do lifting and opening it.

NOTES:

*I did consider using my iPad to remote into my laptop to do these things, but I decided that would just be silly.

**You know what burns me up? I can’t grab an eps off of Shutterstock, and open it in any of these apps. This is really an iOS problem but I still blame Illustrator because I’m that pissed at it.

***Managing these .AIC and .PSDC seems to only be able to be done through the Creative Cloud app or within the dialog boxes in PS/AI — none of which are ideal file management interfaces especially compared to say, THE MACOS FINDER.

****Let’s be 💯 clear. I’m not a developer. I no longer code for a living and wasn’t super great at it when I did. That said, I’m not helpless and can still hand code a simple site, which was a pleasant surprise. So I’m not looking for any critiques into my markup.

*****Speaking of browsers, now that everything uses WebKit or Chromium it has made browser testing an infinitely easier than it used to be. Or maybe I don’t care what this site looks like in Windows, and I’m just hoping for the best, I dunno.