Setting up my website using an iPad Pro
As a learning experience and to increase my iPad skills, I decided to set up this website using only my iPad Pro 10.5”. I’ve set up many sites for myself and others over the years using my Mac, but over the last couple years I’ve been transitioning to using my iPad as my primary device.
What was easy
The majority of the setup went smoothly. Researching webhosts, templates, and tutorials was painless, especially with iOS 11’s improved multitasking and split screen features.
Here’s what I was able to do with ease:
- Pay for and set up webhost. I ended up choosing SiteGround for my webhost
- Installed WordPress (Using SiteGround’s 1-click install)
- Purchased WordPress theme (from Themeforest)
- Downloaded theme .zip file
- Install WordPress plugins, set up categories, etc
- Customize WordPress template
- Author posts. So far I’ve used Ulysses to write my posts. The publishing to WordPress seems a bit slow, but the writing process is much more focused.
First sign of trouble. The .zip file
My first hiccup came after downloading my template from Themeforest. I was able to easily download the file to the Files app, but when I tried uploading it to my WordPress site, it was rejected.
WordPress didn’t accept the zip file that I downloaded from Themeforest.net
It turns out the template is bundled with some demo data, documentation, and multiple versions of the theme. In other words, the zip file actually contained other zip files inside of it rather than being the actual theme .zip file. WordPress (rightfully) rejected it because it didn’t fit their format.
The iOS Files app has no way to natively unzip files. My Google sleuthing led me to Macstories, and Federico recommended using Workflow to unzip files. His Workflow made you confirm the location of every file in the .zip, which was clunky for my needs, so I modified it to unzip the entire thing at once. What I didn’t like is that my original .zip file was stored in the iCloud Desktop folder, but the only location I could unzip the file to was the Workflow folder in iCloud. It would be ideal if it could simply unzip in place, like it does on the Mac.
Screenshot of the Workflow I used to unzip files to the Workflow folder on iCloud
Once unzipped, I was able to find the correct theme files and upload them to WordPress using the web UI.
My coworker suggested I try Transmit for this task instead. Transmit maintains its own local directory, and is also really good at unzipping. I wasn’t planning on setting up FTP for my site, but decided it wouldn’t hurt. If I was to do this again, I would have just started with Transmit, but Workflow can certainly get the job done.
Web inspector and testing various screen sizes
Inevitably, a template’s customization tools don’t go far enough and I need to modify the theme CSS. Normally, I’d just use the Chrome Dev Tools Web inspector to figure out which CSS class to modify. Then I’d play with the CSS rules to get my changes correct before adding the rules to either the theme CSS file or the CSS injection within WordPress. iOS doesn’t have a web inspector, so I was out of luck.
I also wanted to preview my site on various screen sizes. With the Mac, it’s pretty easy to resize the browser or use Chrome Dev Tools to show different mobile sizes. Again, a limitation on iOS.
After some searching, I decided to try Inspect: Web Development Tools. There were several apps on the App Store which appeared to have a web inspector feature, but this one had more recent/consistent updates, which is a good sign.
The web inspector works pretty well for identifying the CSS classes. The modifications you can make are done inline in the HTML, so not quite as good as Dev Tools (which allows you to modify the CSS rules, not just the HTML), but it gets the job done.
To my delight, the app was also capable of previewing my site on different screen sizes. There are presets for a variety of sizes from large desktop to iPhone 4. Now I can feel more confident my site will work on all screens.
The WordPress crop tool
One step that I was unable to find a workaround for (yet) was using the WordPress media manager to crop an image for the favicon. WordPress allows you to upload a file to be used as your favicon and home screen icon (if a user adds your website to their home screen). I uploaded my logo file, an SVG, but the crop tool seemed to not support iPad or touch devices I was unable to do anything, and left the task unfinished for now.
“Logo” design
I’m not a great visual designer, and I’m definitely not a great illustrator or logo designer. But, I made an effort to design a logo for the site.
The logo is meant to represent a socket wrench and hex nut. Out in the non-digital world, solving problems often requires a socket wrench. At my core, I am a problem solver, so I feel like I can adopt the socket wrench as my spirit animal…tool. It doesn’t hurt that this is also a nod to other interests I have, such as Jeeping and doing DIY improvement projects.
I downloaded Graphic, a vector design tool for iOS. It shares enough similarities with Illustrator and Sketch, I was able to whip out the simple logo without too much pain.
Graphic exports to SVG, and I was able to save the SVG files to iCloud and upload to WordPress. I discovered I had to install a plugin to use SVG files in WordPress, so I installed this one. Once installed, I could upload my logo SVG to WordPress using the media manager.
Final word
This website project is just getting started. So far, I’ve been able to do just about everything I wanted on the iPad. It’s been a little more difficult than doing it on a Mac, probably just because I’m so familiar with the Mac tools, but the results have been equal.
I’ll continue to post more as I continue this project.