Web Design App Ipad Pro

This article is going to take a deep dive into developing websites on an iPad Pro. As the owner of a WordPress agency, and a professional WordPress developer, I've been interested in this concept for sometime.

I got an iPad Pro 11 inch in January 2021, along side the Apple Pencil and the Apple iPad keyboard. This essentially gave me a laptop like experience with the iPadOS. When purchasing, it was never intended to be a development machine. Instead, I was going to use it as intended, for productivity. That includes writing content for this blog, and responding to various comments here and on the Youtube Channel.

Why Develop On An iPad?

The iPad offers an absurd amount of processing power, a high resolution screen, and touch input in a very small form factor. As design and build quality go, this is a very high-quality device, and can be brought anywhere you go. Because of that, developing an iPad could be a great supplement to a desktop or laptop computer.

For me, I found that I was bringing the device virtually everywhere I went. Because I manage manage many WordPress websites after building, I typically bring a laptop computer around to troubleshoot any major issues that may arise when I'm out of the office. However, if I can replace that laptop with an iPad, it's just easier. If you opt for the cellular model, you'll be able to access any and all client websites from anywhere with a signal.

Additionally, my laptop is a Windows machine, and having something that fits into the Apple ecosystem of a desktop, iPhone, and iPad, leads to much higher productivity. From a content creation standpoint, the iPad is a perfect device to pick up from desktop work anywhere you are.

Does The Hardware Allow It?

First, I need to figure out if the actual hardware would be able to support my needs for development. That means I would be looking at the specs, keyboard, trackpad, and additional ways of inputting data into the device.

If we're looking at the device from a pure speed standpoint, it's one of the fastest I've ever used... this includes older versions of the iMac Pro. My version is the 2nd Generation iPad Pro, meaning I have the A12Z Bionic chip with 64-bit architecture. However, I've messed around with my buddies 11in 3rd generation (which has the new M1 Chip), so I'll speak to that performance here:

The combination of the M1 chip, iPadOS, and additional hardware within lead to incredible performance. Websites and web applications load as fast as technically possible, and video rendering is even better than my laptop.

The touchscreen and Apple Pencil bring whole new dimensions to how you interact with the websites you build. For us, our agency creates with straight PHP, or Oxygen Builder. If you're using something with large buttons or drag and drop functionality, the touchscreen will make it a lot quicker than using the trackpad. Some windows users are spoiled with a touchscreen on their laptop, but for Apple users, you're stuck with the iPad if you want this type of data input functionality.

The Apple Pencil also makes it really easy to quickly sketch out concepts and Wireframes. Once created, on the notes app (or Adobe Draw), I can send them to clients and designers or like to create higher resolution mockupsups or get feedback on information layout and page flows.

The screen itself is very high resolution, and has a higher refresh rate making for a great viewing experience. The drawback here is that it is an 11 inch screen, much smaller than even a "mini" laptop. Because of that, if you are planning on making the 11 inch iPad Pro your main development device, you will need to reconsider this as it is virtually impossible to do several things that simply require a larger monitor and resolution (more on this later).

I actually wish that I opted for the 12 inch iPad Pro, which at the time I deemed too large for my needs. However, this isn't terrible as I do not primarily use this device to develop websites, and have a desktop and laptop.

If you are even thinking about creating content or developing with an iPad Pro (instead of using it for a entertainment or communication device) you will 100% need a keyboard and trackpad keys for it. There are several makers, from logitech to Apple, but the Apple Magic Keyboard blows all competition out of the water in terms of build quality and the actual experience of using it.

Typing on its keys is a tactile experience, unlike the old butterfly keyboards on Macs that were absolutely terrible. The drawback here is due to the size of the device, which is 11 inches, there's no possible way to have a full-size keyboard built into the case. Here are the keys you get:

The trackpad is small, but easy to use, very accurate, and high-quality. Clicking is also tactile. If you need a keyboard case for the iPad, this is definitely your best option. Competitors are just lower quality, with poor typing experiences and track pads. The only negative of this case is that it has a rubber type finish, and if you drop the iPad it will definitely protect it but also may rip or tear (mine has minor rips on the edges... nothing terrible, just annoying).

It's also possible to attach additional accessories via Bluetooth or USB-c. That way you can access a traditional mouse, larger keyboard, and even an external monitor. However, the external monitor is a major sticking point for me that I hope they address in future versions of iPadOS.

While you can connect an external monitor to an iPad, it simply mirrors the screen and resolution. This means that you get no additional room for any applications, making it very difficult for a developer to get into the flow of bouncing between various inputs and outputs - like a code snippet library, browser window for dev, and another for research (ie stackoverflow 😆).

iPad Pro and LG UntraFine 4K — Example of what that would look like: Source.

There are some workarounds to this, but don't even come close to a laptop like experience with an external monitor, which in my opinion is essential to any developer.

Even more annoying is that this is not a hardware limitation, but a limitation of the operating system. As we will discuss in the next session, iPadOS leaves a lot to be desired, but at the same time continually is improving and getting closer to a desktop like experience, so this article section may soon become outdated.

To conclude the section, the hardware technically allows for development to occur. You can attach any keyboard and mouse, but are limited by the screen size. There is very poor support for external monitors, so no recourse there. But if you needed to, developing on an 11 inch screen is more than doable. Additionally, the touchscreen support and Apple Pencil can make for a much more productive experience depending on what you are actually doing.

One thing that this seriously improves is the creation of wire frames and website concepts. It's super easy to draw one out using the Apple Pencil (which gives control and pressure sensitivity, just as a real pencil), send it to a designer -- they have a perfect understanding of what I'm looking to do. This is opposed to trying to vocally communicate ideas or send them in an email/Slack.

The combination of the Apple Pencil, iPad, and Magic Keyboard, all work perfectly together as they are native Apple components. That experience in itself is very premium and high-quality.

Can iPadOS Support Development Duties?

The second hurdle to developing websites and an iPad Pro is determining if the operating system can support our needs. This includes access to various applications, processing power, and an overall user interface that makes it easy to jump between applications, notes, web browsers, and more.

The two most important applications that you need access to is a developer oriented browser and a code editor. You also need a powerful file management tool, one that is on par with desktop operating systems.

What Web Browser?

Annoyingly, you can't use the built-in Safari or any other major web browser about locations for development duties on iPadOS. That's because there's no developer tools included. You can definitely access various online applications that you need to create websites, but you are seriously crippled without DevTools.

If you own a Mac, there is a way out of this - you need to connect Safari to the computer using a cable, and then address the iPad on the upper menu of Safari on the desktop or laptop. But... that defeats the purpose of developing an iPad, as you would need to carry around the laptop.

The way around this is a standalone web browser application that has developer tools built into it.

When you search for a tools browser on iPadOS, you're met with just about three options. Two of them are terrible, and one of them works: Inspect Browser by Parallax Dynamics Inc.

This is a paid application, coming in at $6.99, but it's the only way to get a real development tool kit on a browser if you're using iOS or iPadOS.

The included features are:

JavaScript console.
HTML element inspection and editing (with live preview).
CSS inspection and editing (with live preview).
View element details: CSS rules, JavaScript properties, dimension statistics, and more.
Open files and folders from other apps (like Working Copy), or from iCloud to test locally.
Network panel, displaying page headers and XHR requests.
Responsive design tools: View your site with a variety of mobile and desktop sizes and orientations, including support for custom sizes and user agents.
Cookies, local storage, and session storage inspector and editor.
Resource graph.
View raw page source.
Control over browser operation: disable JavaScript, cache, and clear cache and cookies to test various operations and states.
Save a screenshot of your site, including the ability to save the full page.

It's a very solid tool, but it doesn't stack up to desktop browser alternatives. However, if we're going to develop on an iPad, I would suggest that this is an essential application to own.

Browser, ✅.

Code Editor?

Next up is an easy method of editing code, managing snippets, and connecting to websites via FTP. Each of these three features are an absolute necessity for anybody developing WordPress, specifically the FTP. But, FTP needs to be integrated into a great coding experience, or else it's virtually useless.

The application for that is called Koder.

This is an all in one tool that allows you to code, access servers via SSH or FTP, manage snippets, and do a few other things. In my opinion, this application actually rivals desktop alternatives -- and it's free!

These two applications cover most use cases that a web developer will have when creating an iPad Pro. You can connect to any and all servers via SSH or FTP, use any web browser to access online tools, and use Inspect Browser to make use of a powerful and well featured developer toolkit.

The UI/UX Of iPadOS Itself

Now that we have covered the major features required to develop on an iPad, let's talk about the user interface and experience of iPadOS itself. This leaves a lot to be desired, especially if you are comparing to a desktop operating system. It's basically a cross between a mobile and desktop experience, meaning that there are pros and cons.

First, this is reviewing iPadOS 13, and with each new version it moves closer to being a fully featured desktop operating system, meaning that as the years go on, it'll become much easier to develop on an iPad.

For me, iPadOS is prohibitive to my flow, meaning I can't replicate the same productivity I would have on a desktop browser. By no means does it make it impossible to develop and code on an iPad, but it doesn't have the same features as Windows or macOS.

The biggest hindrance is how the applications are displayed and managed (or the mutlitasking features). This is much closer to a mobile operating system, where you can't really have individual windows. You can have a split screen, and a smaller mobile window overlay in a full screen background window, but there's no scaling, re-organizing, or minimizing.

When I create on a desktop, I have many windows open and individual desktops. For example, I may have a desktop of three browser windows open, one for development tools, one for creation, and one for research. On another desktop I may have a FTP connection, Slack communication with my team, and more.

I then swipe between desktops, windows, and tabs, minimizing and organizing as need be. This is impossible to do on an iPad, and meet even worse due to the fact that we can't have true external monitor support yet.

Getting between windows is actually very easy, you can use swipe in touch touch gestures. This is something that I really like, alongside having a touchscreen at my disposal. As I mentioned in the beginning of this article, it can be used to quickly select elements and highlight things, and for me is a bit quicker than using a mouse.

But my multitasking productivity flow is nowhere near what it is on a desktop. This doesn't make it impossible to develop, but it makes it difficult enough to make me want a laptop over an iPad. I think that this would be completely invalidated though, if Apple were to give external monitor support and actual windows. Though I would definitely need to upgrade from the 11 to the 12.9 inch version.

Can You Develop Websites On An iPad?

A combination of these features and software make it possible to develop websites on an iPad Pro. But, is it easy or recommended? Sadly not.

Obviously, using a desktop computer or a laptop that has a fully featured operating system will always be better than the iPad Pro as long as it running iPadOS. It's a machine that simply isn't designed to match the features of a desktop, which is why it's so fast and easy to use for consumers.

And yes, if you want to take a productivity hit, and have to use third-party tools like Koder and Inspect Browser, developing and creating websites on an iPad is more than doable.

You will need an external mouse and keyboard (the magic keyboard is great), and you'll have to make do with a smaller screen even if you opt for the larger 12.9 inch version (which you definitely should, 11inches isn't enough).

Should You Buy An iPad Pro as a web developer?

You may be surprised at this recommendation after the last section, but it is a resounding yes for me. If you can find room in your budget to purchase an iPad Pro, you definitely should. This article took a look at the iPad Pro from the lens of a developer looking to replace a laptop or desktop -- meaning you would need the features of a laptop or desktop like window management, fully featured browsers, easier to use file management tools, and more.

While you can't replace your desktop or laptop, you can certainly augment it. I no longer carry my laptop around as long as I am able to get back to the office within the day to resolve any major issues. With the applications mentioned in this article, I can handle any issue that arises on client websites (even though it may be slower).

It's also much smaller and easier to carry around.

Where I have found myself using the iPad the most is for "busy" work. That includes communicating with my team, writing emails, doing outreach, and creating contact for this blog. If you want to be productive in that sense, then it is an incredible experience. The portability of the device means that you can complete your work from pretty much anywhere, and having a touchscreen is awesome. If you already on a Mac computer, iPad iOS and macOS integrate seamlessly, meaning you can pick up where you left off easily.

I've easily seen a return on investment in terms of being able to have a device where I can communicate and worst case scenario develop and troubleshoot websites from anywhere.

Additionally, this tool is incredible in terms of consumer usage. The screen is super high resolution, so watching movies or videos after a long day of work on it is awesome. Having an iPad and an Apple Pencil together means that you can create stunning drawings for pleasure, or if you are looking to communicate ideas visually.

What do you think?

If you have any additional questions or thoughts regarding using an iPad to develop and create websites, feel free to leave them in the comments section below.