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.
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.
