Tag Archive for ‘Web Tools’

My Next Mac

I’ll be in the market for a new Mac sometime in the next couple of months. While I still spend the vast majority of my time working from my iPhone and iPad, my usage of macOS has increased as I’ve shifted focus toward web design. I still write most of my code on my trusty iPad Air 2, but it’s difficult to test changes without a resizable browser window.

I have James Finley’s Web Tools installed, which let’s you test responsive sites at different device widths. It’s a great app and it can get the job done in a pinch. But screen real estate is at a premium and I often feel like I’m beyond the upper limits of what’s comfortable on a 9.7-inch display. A Mac would really make writing and testing HTML and CSS a lot easier.

I still have my 11-inch MacBook Air, which has done an admirable job at filling in the gaps for me lately, but the machine is getting a bit long in the tooth. It was purchased almost seven years ago, has an intermittently functioning trackpad, and lacks a Retina display. I could put in the time and effort to replace the trackpad, but it probably isn’t worth the trouble. I doubt it will be supported by Apple’s latest version of macOS for much longer and I think a Retina display is a must-have for any design work at this point.

The big question is, what Mac am I going to buy? Well if you follow the recommendations on the MacRumors Buyer’s Guide, the only Mac worth buying right now is the iMac Pro — its the only machine in the lineup that doesn’t feature a “Caution” or “Don’t Buy” badge. But the iMac Pro is a bit too expensive for my budget.

That means my best option is to wait for Apple to release new hardware, which will hopefully happen at WWDC next month. As for the specifics, I’m currently leaning toward a 27-inch iMac with the cheapest solid state drive available. If the state of Mac notebooks was a little different, I might consider a MacBook or MacBook Pro. But I suspect their next iteration will feature the same keyboard they have today, which is prone to hardware failures and isn’t that comfortable to actually type on.

And the iMac is a better fit for me anyway. I can use my iPad when I have to work on the go and the iMac’s large display will be put to good use with numerous text documents, browser windows, and an FTP client. I’ll be able to retire my MacBook Air and the aging Mac Mini that we’ve been using as our home server and replace it with one, single Mac that serves all of our traditional desktop computing needs.

I don’t think I’ll be gaining too much by waiting for the iMac’s next hardware revision — most likely just some minor upgrades to the internals. I hope Apple reduces the price of SSD upgrades. Or better yet, relegates all spinning disks to built-to-order options. With the rise of streaming music services and cloud storage for photos, the average customer doesn’t need giant hard drives like they used to.

One major concern I have with waiting, though, is that Apple could remove the RAM door that current 27-inch iMacs feature. They did so with the iMac Pro and I would hate to see that trickle down to the consumer-level iMacs so quickly. What I’d like to do is purchase a nearly stock 27-inch iMac — only upgrading to a solid state drive if it isn’t the default configuration — and plan on upgrading the RAM down the road.

Apple’s RAM is typically quite expensive compared to aftermarket options and having to make that decision at the time of purchase will put a considerable strain on my budget. I could easily get by with 8GB of RAM now and upgrade to 16 or 32 in a year or two when I have a little more spending money available. But if Apple removes the RAM door, I might have to buy a lesser machine than what I would eventually end up with if I was able to upgrade it later.

But I think it’s still worth waiting. I’m taking a bit of a gamble on Apple continuing to give customers an easy way to upgrade their RAM, but I’d like this iMac to last as long as possible. The extra few percentage points of performance won’t mean much, but if waiting another month or two gives me an additional year of macOS updates, it’s definitely worth it.

Web Design on the iPad

Coda and Web Tools in Split View

About once a year I get the itch to make some changes to Initial Charge’s design. I’m not quite sure what causes this feeling, perhaps it’s simply pent-up creativity that eventually forces itself out through a text editor. Or maybe the handful of growing annoyances with the current design slowly become too much to bear. Either way, this feeling is inevitable.

The last major redesign was the largest design project I had ever completed. I made the move to a responsive, single-column layout that retained many of the design cues that help Initial Charge stand out against a sea of minimally designed WordPress sites. The yellow background for anchor elements, the headings typeset in Georgia, and the overall focus on the body text itself were all present.

One of the main reasons for moving to a single-column layout was because it was the quickest method for obtaining a mobile-friendly design. The web has changed dramatically over the past decade, but the biggest change is the number of handheld devices used for web browsing. I just couldn’t stand to continue publishing on a site that wasn’t enjoyable to view on a smartphone.

But I’ve never been too thrilled about my decision to build a single-column layout. And although the mobile experience was my highest priority, I didn’t like how the site looked in desktop and tablet browsers. There was too much untapped potential in the additional screen real estate.

The current, single-column layout always felt like a cop-out. And unfortunately, that’s because it was. My knowledge of HTML and CSS has always been rudimentary. I could get by making small changes here and there, but I would frequently run into problems that I had an incredibly difficult time trying to solve. Some of the time I could look at the source code of other sites that were achieving a similar effect, figure out how they did it, and implement it here. But a lot of the time, I couldn’t.

This past September, I made the decision to learn more about web design. I signed up for Treehouse and started their Web Design track. I can’t believe how much I’ve learned in just under five months. Don’t get me wrong, I have no expectations of quitting my day job tomorrow and earning a living as a web designer, but perhaps that will be a possibility in the future. All I know is that I’m significantly more comfortable working in HTML and CSS than I used to be and that feels wonderful.

With the knowledge that I’ve acquired from Treehouse, I’ve started work on a new design for Initial Charge. But this time, rather than modifying an existing WordPress theme — as I’ve done with every other iteration — I’m building this one from scratch. I’ve already coded the necessary template files and I’ve started work on the CSS a few days ago.

My expectation is to have a two-column layout for desktop and tablets that gracefully transitions into a single-column when viewed on a smartphone. I hope that I’m able to achieve this while also writing much cleaner code than what the site’s using now (it works, but there’s about eight years of cruft that I’m not going to miss). I don’t have any idea how long this new design will take — I’d prefer to launch it when it’s ready rather than rushing to ship something that’s not quite there yet.

Web Tools’ Presets

But I didn’t just write this piece to tell you about how much I’ve learned from Treehouse or that at some point in the future you can expect a fresh coat of paint. I wanted to share the software and resources I’ve been using to build this new design, entirely on my iPad.

  • Typewolf: A wonderful typography resource by Jeremiah Shoaf. The site features examples of typefaces in the wild and recommendations on font pairings. This is the first place I go when I need to make typesetting decisions on my web projects.
  • iOS Font List: The majority of Initial Charge readers browse the site from an iOS device and it’s important that the typefaces I choose are built into the operating system. This site lists every single font available on iOS and when it was added to the system. Once I find the fonts I’m interested in using, I check to see if they’re available with iOS Font List.
  • View Source: An inexpensive app from Paul Hudson that let’s you view the source code of any website with an action extension. It’s a very simple utility app that I find myself using just about every time I sit down to code.
  • Web Tools: This app, by James Finley, brings three essential web development tools to the iPad — an inspector, a console, and a scalable browser window. This app is genius. It allows you to test your design at any browser width and offers a handful of presets based on the most common Apple devices. Web Tool’s inspector has been invaluable for me as I’ve moved from building the HTML structure to the CSS styles.
  • Coda: This is the real deal. A full-featured text editor from Panic with find and replace, syntax highlighting, local and remote file management, keyboard shortcuts, and more. This is the backbone of my web development workflow on iOS. It’s one of the few, truly desktop-class applications on the platform and I can’t imagine doing this kind of work without it.

My iPad had a role in building the previous design of Initial Charge, but I did the vast majority of the coding on my MacBook Air. For the most part, the iPad simply served as a preview screen.

This time around, I’ve barely touched my MacBook. I spend most of my time with Coda and Web Tools open, side-by-side on my iPad, which is propped up by my Compass. I have Apple’s previous Bluetooth keyboard in front of me alongside my iPhone, a pad of paper, and a pen. This has become my preferred setting for web design work and I wouldn’t change a thing.

Using the iPad for Web Development ➝

Matt Gemmell:

Responsive testing, though, is something you actually can do on the iPad, up to a point, with Web Tools. It lets you resize the viewport, or choose from a set of popular device sizes, and it also has a rudimentary built-in web inspector with DOM tree and editable CSS attributes (and a JavaScript console, as an in-app purchase). It’s basic, but you can readily use it to see how your site responds as the browser window resizes, or on different screen sizes than your own.

I hadn’t heard about Web Tools until reading this piece, but it looks like a great app. I’ll have to give it a try next time I’m in front of my iPad with some time to kill.