In a former life, I designed and developed websites for money. When I tried to craft a site for a side project again recently, I ran into a thorny issue: I don't own a "desktop computer," only mobile devices. Eventually, I figured it out, as you might imagine given my headline, replacing a beige box with a tablet/phone is not impossible.

Luckily, a lot has changed in the web design space since I hung up my boots as a web-person-thing. Current design thinking is systematic and newer trends focus on content first, modular design methodologies and native design tools (i.e., in the browser). No more Photoshop—well there is room for graphic design programs, but no PSD == website-waiting-to-be-sliced thinking. Good news is that with the right attitude any modern mobile device can handle these tasks with aplomb.

I'll admit that I struggled. It was not terribly clear how to design for the web using these tools, but that's probably a decade of bad habits talking. I suspect if you follow my lead, you will encounter a similar shrill cry from your lizard brain trying to convince you out of learning a new way to work. Humans, amirite?

I'm going to shy away from directly discussing tools because you likely have your own workflows. Honestly, you will undoubtably find something that works better for you. What I will spend more time talking about is some of the new ways of thinking that are required to make this less weird.

Wherefore art thou localhost?

First hill to climb: none of your code is going to run locally, unless you're working in basic HTML and CSS (through something like Panic's excellent Coda for iOS). Chances are, if you've done this before, you have developed websites on a local server instance,^[1] but on mobile you have no access to the lower orders of your operating system. Great for safety, not so great for lazy geeks, like Mr. Eye over here.

The answer is simple: find yourself a server to do your development. Now, before you get all gushy on me, you have choices: pay for a VPS^[2], find an old PC and setup a LAMP or LEMP stack, or try a cloud provider like EC2. There are loads of guides all over the Internet, but setting any of those options up is beyond the scope of this article.^[3]

Do all of your development on a private server, that's it. A bit of a pain compared to what you're used to, but that feeling of pain is actually what we're fighting here, so no biggie.

What? I can't see everything?

With my remote development environment setup, I began my work. I had my text editor open and started tapping away, when I found another road block. I was like, "Oh, snap. I'm blind!" because I couldn't have a browser open while I was typing into my text editor. I'll admit, this bit felt like a real show stopper.

I wanted my external 27" monitor so I could futz about with window management and get things just right, but the old way just isn't possible on a mobile device.^[4] Multitasking on tablets can help you accomplish this exact thing, however, the feeling struck something deeply rooted. Every habit I had established seemed to be boiling inside me, yet I pushed on.

On my iPad Pro, I had a terminal open to my server on two-thirds of my screen and a phone width browser to fill the rest. Modern design recommends designing from the least capable device up, so I re-learned to design from the bottom-ish up.^[5] This is ultimately a strength of the platform. Designers often start on incredibly powerful machines with gorgeous displays and massive bandwidth, despite most of their users will have likely have none of those. Starting from an experience your users will likely have makes it easier to empathise and make better design decisions... Not that this project will likely have any critical mass.

The benefit of having a remote development server is that you can have multiple devices looking at the same page without any fuss. I'll admit it's funny developing with a tablet, phone and whatever other browser enabled device you have on hand but it does expand the mind a bit towards the realities of the Internet.

Take Away

What's applicable here, is that this type of design takes an entirely different thought process. Draw everything on sticky notes, scraps of paper; take pictures; get out the pens and have a conversation with stakeholders; arrange them in a spreadsheet or PowerPoint file; then get it into the browser and see how it works. New features in CSS and JavaScript make getting straight into code easier to do with less overhead than slicing PNG files.

It's a tough to let go of what you know and I'm still fighting off those entrenched computing habits of mine. As you will have no doubt gleaned, this is the real work involved in making the transition to mobile-only. The tools are there (for the most part, I can't speak to other use cases) but the mindsets are not.

---

1. Using something like MAMP, XAMPP, WAMP, or my personal favourite CLAMP on your personal desktop/laptop. ↩︎

2. If you're looking for something cheap and reliable, try Digital Ocean which is what I use to host this blog. Warning, by clicking that link there is the slight chance my hosting costs get cheaper by a nickel or two (no one has done it yet, so I can't actually be sure how much). If you are worried about that sort of thing, try Linode, or heck, use this link for Digital Ocean. ↩︎

3. Because I can't resist talking about Ops, I'll give you a hint on where you might start: use easyengine, SSH, tmux, VIM or Emacs and GIT. We love our tools, don't we? ↩︎

4. I'm well aware of tablets that run desktop operating systems, but I'm focused solely on mobile operating systems. ↩︎

5. There's a whole discussion to be had about designing for less capable devices, browsers and bandwidth, but alas, the discussion will have to wait, I'm already running long. ↩︎