Paul Armstrong Designs Entries

Weather View iPhone App Retrospective

donotreply@paularmstrongdesigns.com ( ) — Mon, 09 May 2011 21:36:43 -0500

It seems like project ”postmortems“ are trendy these days for software development. I wanted to do one for my first iPhone application, Weather View, but ”postmortem“ seems like the wrong word to use. The application is far from being dead—I've just finished the first version, and have many iterations to go. So instead, here's my retrospective; a look back at how I first came upon the idea and a look into how the project progressed over time.

Available in the App Store

Preface: The Cubicle Window

In 2008, I made a quick and dirty website that had its entire background an HTML5 canvas view animating the weather for a location, as provided by the Yahoo! Weather API. It worked great… in Safari and Firefox, which were the only browsers that had any support for canvas. As I worked at my little desk, far from any window to the outside world, I thought to myself, ”How great would it be if I had a window at my desk?“

Thus, an idea was born. At the time, I had neither an iPhone nor an iPad (it was 2008, the iPad wasn't even a real thing at the time). So I set out to make a desktop application—which I quickly grew tired of attempting to make.

Fast-forwarded 2 years. The iPad is a reality now. Everyone rejoices. Hooray! I have a little, old, iPhone 3G. It works, sort of (the iPhone 4 was the new hotness). Seeing the iPad sitting on a dock at a desk reminded me: why couldn't that be my window to the outside world?

So I set off designing my application, ”Cubicle Window“ for the iPad.

Round 1: Giving Up

Design

From the start, I knew that I wanted to keep things as simple as possible from a design perspective; let the view do that talking, not the flare around it.

I set off a built up a real window within the iPad. Wooden frame, pull shade, and a nice little view of a field and sky. Overall, it worked—sort of.

Development

At the time, I wasn't comfortable diving into Objective-C, so I pulled up resources that I knew. I chose Titanium Mobile as the platform to create the application in, because I could write the entire application in JavaScript. HTML, and CSS. This was my first mistake.

I really enjoyed working with Titanium. I was able to replicate all of the iOS-standard controls really easily and the only learning curve was Titanium's API documentation (which has gotten much better since).

However, after nearly completing the application, I was finding more and more that I just could not get any decent performance out of the animation. I got to the point of crippling my iPad's memory limits and soon gave up.

Round 2: Just Learn It Already

Come February I was transitioned at my day job to become the tech lead of an experimental mobile games division. Not a single one of us knew any real Objective-C, but we all knew that in order to get the performance we needed out of the game, we'd have to write native code (let's not argue this any more right now). So we started learning it.

And learn it I did, in the only way I know how. I went home and started rewriting Cubicle Window from the ground up with native iOS Objective-C.

I set out to build this with ”minimum viable product“ in mind, but not until now did I realize how fast my timeline actually ended up:

In 1 day, I had clouds, a sun, and rain.
By day 3, I had a pull shad, basic settings, and a decent window sitting on my desk.
By the end of my first week, I had up-to-date weather reporting and mostly visualized, including the night sky.
I changed my app from iPad-only to Universal in less than a day.
In just 1 month, I had beta builds pushed out to the hands of friends for testing.
In 2 months and a couple days, I had my 1.0 release submitted to the App Store for approval.

I chose Cocos2D to handle all of the visuals and animation over openGL, while keeping the rest of the application using built-in Cocoa Touch controls. This worked absolutely great. I was able to put two libraries to use exactly how they were intended to be used.

Not only was I quickly iterating on code, I also changed design elements many times over the course of this. However, most of them were relating to the actual view of the weather. Clouds needed touching up, rain just didn't look right, snow was laughable at times, but it all came together. Most of the major elements of my initial design stayed. The one notable piece that was removed right away was the wooden window frame: it was cheesy and frivolous.

What Worked

Cocos2D: The documentation and community around it made there no question of using another library for animation.
Solid, prototyped design prior to development.: While the first iteration with Titanium took almost as long to build, I count it as my prototype for the design. It worked well enough to visualize how the application would work and I was able to iterate quickly at the time, but it became clear early on that it would never be a complete project developed as it was.; Having the solid design meant that I didn't have to make large code refactorings for the sake of design. No time wasted!
Git: Any time I was unsure of a code path I was going down, I quickly made a branch. If it worked, I could easily continue on it or merge it back to the master branch. If it didn't? git branch -D thisbranchsucked.
Beta Testers: I used TestFlight to distribute builds to some friends around the world. They offered great help in tracking down some really nasty bugs.; Thanks, Testers!

What Didn't Work

(Besides Titanium Mobile's performance, of course)

Demanding Perfection: I'm a perfectionist at heart. It was incredibly difficult to hold myself back from tweaking every little thing until it got just perfect. I indulged quite a bit and it set me back.; I likely could have shaved off 2, maybe 3 weeks of development were it not for my demands.
The Icon: It's not very good. I mean, did you look at it?
Thinking the Name Was Final: Cubicle Window was a pretty good name. But it was limiting. For a very long time, I resisted even considering a name change. Once I finally changed it, from lots of feedback from my wonderful beta testers, it was alright… However, it's a huge pain in the ass to change a project name in Xcode for some reason, so now Weather View is just codenamed ”Cubicle Window“ forever. Ugh.

Not much didn't work. I really made a stretch to list the first one here. I more or less stayed focused on the idea of a ”minimum viable product“ for first release. Considering the application made it from zero code to released in 2 months, I'd say it was a success.

In The End

I don't think that I could be happier with the way I picked up and finished this project from the depths of my unfinished work vault. Needless to say, I'll be continuing to support and expand the features of Weather View and create many more projects for iOS in the coming months.

Oh, hey. Weather View is pretty awesome. Did you get it yet?

Available in the App Store

Weather View

donotreply@paularmstrongdesigns.com (Paul Armstrong) — Mon, 02 May 2011 19:16:00 -0500

Enjoy a virtual window on your iPhone or iPad to the current weather conditions outside. A great substitute for a real window in your cubicle at work or reception desks.

Presentation: You're Still Doing It Wrong

donotreply@paularmstrongdesigns.com ( ) — Tue, 13 Apr 2010 12:03:00 -0500

Yesterday's presentation at MinneWebCon '10 was a success. I had a great time watching the other presentations and keynotes, as usual, but the highlight of my day was having the chance to get up and speak about form design and remind everyone that we can always do thing better. As promised, here are my slides, also available on Slideshare.

You're Still Doing It Wrong

View more of my presentations.

Speaking at MinneWebCon 2010

donotreply@paularmstrongdesigns.com ( ) — Mon, 08 Mar 2010 08:09:11 -0600

As a follow-up to my presentation at MinneWebCon, 2009, the University of Minnesota’s web conference, I’ll be giving a giving the next iteration of my engagement, "It’s the Little Things, Part 2: You’re Still Doing It Wrong". This year, I’ll dive in deeply to the most used, and arguably most important, interaction elements of the web: forms.

In this extension to "It’s the Little Things" from 2009, my presentation will focus on the most widely used interactive sets of elements and most frustrating user experience of the web: forms. By looking at the necessity of collecting data from web site visitors, we’ll look at worst and best practices, managing user assumptions, new ideas and future considerations, and how we can help our visitors finish painful forms without frustrating them to the point of giving up and bouncing from your site.

So come join me and other web design and development professionals from across the Upper Midwest for the University of Minnesota's third regional conference, MinneWebCon, about Web design and standards, content management and strategy, user experience, and social networking.

WebSlide At MinneDemo

donotreply@paularmstrongdesigns.com ( ) — Mon, 08 Feb 2010 08:43:08 -0600

Last Friday, I had the great opportunity to demo WebSlide at MinneDemo, the local geek show & tell event for Minneapolis, MN. As always, it was a great chance to catch up with peers and colleagues and see the awesome stuff that everyone has created. This year, Tech.mn was able to provide us with live video feeds via ustream.

I was in the second batch of demos at the very end (thanks for sticking around!). To view both videos, head on over to Tech.mn, or you can skip ahead to 35:32 in the following video to see WebSlide in action.

All of the instant-registrations from MinneDemo have been given out for WebSlide, but don't let that stop you from signing up for the beta list!

2009: The Year in Review

donotreply@paularmstrongdesigns.com ( ) — Fri, 01 Jan 2010 15:33:09 -0600

Outside of being awesome all the time, I have accomplished quite a few other things this year. It actually surprised me to look back and be reminded of all of the things that I’ve done. I really feel like I’ve accomplished a lot towards my goal of helping make the web more awesome.

Relaunched my site as version 6, utilizing lots of awesome styling, JavaScript, and Canvas techniques.
Not long after relaunching my site, I got really angry with MediaTemple and moved to SliceHost. In turn, I was able to force myself into learning a lot about Apache server administration.
Introduced the world to baseJS, my super-lightweight JavaScript framework for iPhone-optimized web sites.
Spoke at MinneWebCon on design and development conventions and how they impact user experiences.
Rocked an awesome video of designing a blog that reflects and animates the weather in near-real time using pure JavaScript and Canvas. Warning: content may not be suitable for anyone: Paulasaurus Rex
Soft-relaunched the current version of my site in a home-brew CakePHP content management system.
Rebranded and redesigned Watermelon Sauce, the collaboration between myself and Zach Johnson.
Launched the closed-beta program of WebSlide, the best way to collaborate and share designs and mockups with your team and your clients.
Worked on over 28 different sites and web-based projects for clients.

It’s been quite a year for me. I’m happy to have had the experiences that I have–both professionally and personally. Here’s looking forward to 2010!

WebSlide: A New Way to Collaborate on Your Designs

donotreply@paularmstrongdesigns.com ( ) — Mon, 07 Dec 2009 22:35:35 -0600

How do you display your creative mockups to clients? Do you email them a package of images? Or maybe a single, poorly compressed PDF? Or do you spend a bunch of time dropping images into HTML wrappers and placing them up on a demo site? I’ve tried all of them and I found that none of them really gave me and my clients what we really needed.

In June 2009, I released an alpha-version of an interface for viewing images in a slideshow-like format called WebSlide. It was great and served its purpose, but still wasn’t enough. While simple, it was still slightly cumbersome to set up if you weren’t comfortable with JavaScript. On top of that servers it was being tested on quickly became quite unorganized and people were forgetting just where their WebSlide revisions were at.

So, in comes the real WebSlide. A hosted application that lets you quickly and painlessly manage and share designs, mockups, and all sorts of your pretty pictures.

Features

Organize projects by client
Control project access for multiple user-levels
Post and review multiple project revisions
Fast and easy interface for uploading multiple images at once and organizing them
Email notifications to users when new revisions are posted
Track comments on each project revision

Demo

Here’s a quick video of me uploading this project revision for WebSlide:

I Want It Now!

WebSlide is currently in beta-testing mode. Registration keys are being given out as more bugs are squashed, so if you’d like to become a beta-tester or be notified when WebSlide is publicly available, please sign up at the WebSlide home page.

WebSlide

donotreply@paularmstrongdesigns.com (Paul Armstrong) — Tue, 24 Nov 2009 11:28:10 -0600

WebSlide is a private, secure, easy-to-use system for uploading and viewing designs for you and your clients without ever leaving your web browser.

New Watermelon Sauce Identity & Site

donotreply@paularmstrongdesigns.com ( ) — Mon, 14 Sep 2009 14:18:07 -0500

Watermelon Sauce is a collaboration of two experienced professionals, myself and Zachary Johnson. We spent almost 2 years on our original identity, but always felt like we needed something that more fit both Watermelon and Sauce. With that, we have our new logo and new Watermelon Sauce website.

The new site also features a single-page design powered by deep-linkable JavaScript. This isn't your mom's old 1999 Flash website, folks. This is a state-of-the-art HTML, CSS, and JavaScript machine.

Watermelon Sauce

donotreply@paularmstrongdesigns.com (Paul Armstrong) — Mon, 14 Sep 2009 00:14:24 -0500

Branding, Identity and Website design for a partner company.

Timelapse Design of Paulasaurus Rex

donotreply@paularmstrongdesigns.com ( ) — Mon, 17 Aug 2009 03:31:40 -0500

My personal blog was left dormant for almost 3 years, so I decided it was time to redesign and reinvent it a bit. I set up an Automator script on my computer and had it take a screenshot every 10 seconds while I worked, in 60 minute intervals.

I also made this my first personal site that was fully built in CakePHP, so I'm pretty excited about having it a lot easier to manage the entire site from a single administration system. Hopefully I'll be transitioning this site over some time soon…

A word of warning: On Paulasaurus Rex, I mostly post crazy doodles and fictional stories based on real events. Please be warned that the site’s content may be to the extreme at times and does not necessarily reflect any of my personal or professional opinions.

Quick Helper Code Snippets

donotreply@paularmstrongdesigns.com ( ) — Wed, 12 Aug 2009 15:58:53 -0500

Chris Coiyer over at CSS-Tricks put out a call for helpful snippets just a few days ago. I submitted a few to him and realized that I never really get around to posting them here. What a jerk I am for not sharing! How about some love? Sure thing…

CSS Clear Fix

I really hate using extraneous markup like <div class="clear"><> to clear floats. So how about a class you could apply to the parent element of floated elements to force it to self-clear the floats?

.clearafter {
    height: 1%;
}
    .clearafter:after {
        content: '.';
        display: block;
        clear: both;
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
    }

Jeff Starr explains another way of accomplishing the same task. This was also posted to CSS-Tricks under “CSS Clear Fix”.

Automatically Append a Class to File Downloads

Visual cues for file downloads are helpful for your site’s visitors to quickly recognize files they can download and what format they’re in.

Assume we have the following image with three file-type icons for Word documents, Excel spreadsheets, and PDF documents. Using CSS, we can target class names on an element to apply the correct piece of a single sprite to the element. If you’re unfamiliar with this concept, read up on using sprites before moving on.
Here’s our image:

.file {
    padding-left: 16px;
    background: url(images/icon-sprites.gif) 0 0 no-repeat;
}
    .file.doc { background-position: 0 0; }
    .file.xls { background-position: 0 -16px; }
    .file.pdf { background-position: 0 -32px; }

This works well, but how about automating adding these classes? Easy. Assuming you’re using jQuery, just add this snippet after you’re DOM is ready:

$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass('file').addClass(C[1]);
   }
});

This was also posted to CSS-Tricks as “Use jQuery to auto discover links to files and apply a class”.

Automatically Force New Windows on External Sites

Since the target attribute for links has been deprecated, I wanted a new and unobtrusive way to force links to different sites to open in a new window. This quick jQuery snippet will do just that.

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

This was also posted to CSS-Tricks as “Use jQuery to automatically open links to different sites in a new window”.

Prevent Superscripts and Subscripts From Affecting Line-Heights

Superscript (<sup>) and Subscript (<sub>) elements break line heights in HTML because of their vertical-align properties. This quick CSS snippet will fix that for you. For more information, please read my original post.

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

This was also posted to CSS-Trkcs as “Prevent superscripts and line-heights from affecting line-heights”.

Thanks for the Birthday Tweets!

donotreply@paularmstrongdesigns.com ( ) — Mon, 20 Jul 2009 19:28:02 -0500

So, I realized that today is my birthday. I’m not normally one to share personal stuff, but maybe it’s time to switch things up a bit. So, I posted this to twitter to see the reactions:

It’s my birthday, I guess. —@paularmstrong

Some awesome people responded. I highly recommend that you all check them out, because they’re awesome.

Happy birthday then. —@skwiot

Happy Birthday! —@hekainteractive

Happy birthday, man! —@ShawnJGoff

happy birthday to you, happy birthday to you... happy birthday dear paul armstronggggg happy birthday to youuuuu!!!!!!!!! :D —@creativestable

I’d just like to note that creativestable is now my favorite person, just because she sang a tweet to me.

Well then, happy birthday, I guess —@pennig

Happy Birfday. —@zacharyjohnson

Happy birthday! Gonna have a party? —@whitewaffle

Happy birthday man. Have a good one! —@tomstanoch

god we’re old. —@chrisrandel

happy birthday! Argh! If I would have known I would have gotten you a cake while you were here! —@jmullan

I spent this past weekend in San Francisco with Jesse (@jmullan) and Matt (@pennig) and it was a blast—a great way to kick off birthday week.

In other news, I’ve got some more projects and updates in the works for your enjoyment, so check back soon!’

Your Address and Required Fields in Web Forms

donotreply@paularmstrongdesigns.com ( ) — Fri, 17 Jul 2009 14:54:47 -0500

It’s pretty uncommon for any site not to have some sort of contact form these days. But lately, I’ve been noticing more and more sites (and clients) having fields for address, city, state, postal code, etc. The curious part is that most of the time, they aren't required—or maybe the more disturbing part is that they are required.

So let’s take a poll. The spreadsheet of results will be cleaned of addresses and published in the near future for everyone to see.

Recap: The Together Show @ Umber Studios

donotreply@paularmstrongdesigns.com ( ) — Wed, 01 Jul 2009 01:04:07 -0500

Recently, I mentioned that I would have some art up at "The Together Show at Umber Studios". I figured that it my duty to update you all on the happenings. This reception was held on June 20^th, 2009 and will run through July 12^th, so stop by if you’re in Minneapolis! How about some sights from the show?

Okay, here goes…

The front door of Umber is always welcome.

This is some of my work. A series of doodles in the middle running vertically.

Yes, sometimes I am an art nerd.

This was yet another great opening put on by Umber Studios. If you’re in Minneapolis and like art, you best stop by!

WebSlide — Slideshows for Designers and Clients Alike

donotreply@paularmstrongdesigns.com ( ) — Thu, 25 Jun 2009 12:31:14 -0500

Update

WebSlide has changed dramatically! Learn More About the New WebSlide

I’ve always found that sending creative mockups for web sites and slideshows to clients is a huge pain. Most people settle for bundling up a PDF and emailing it over to their client. This is absolutely not an acceptable practice. Instead, I’d like to propose a solution: WebSlide.

The Problem

PDFs of design mockups are often poorly scaled, pixelated, and create more confusion than they’re worth (unless we’re talking about logo & print design). Often times, designers will even include an image of a browser wrapped around their mockups.

What? Seriously? Stop it!

And what about sending an email with images as an attachment? Again, this isn’t showing designs for a web site in its natural environment. Why can’t we just show our clients how it will look in their own browser?

The Solution

Why not have an environment that can display your mockups from within the actual intended medium?

Enter WebSlide, a jQuery-based, user-configurable, and user-themeable application that has no server requirements (other than it being a web server, of course).

View the WebSlide Demo

Features

Display images as slides in your browser
No server-side requirements
User-configurable
Create custom themes with CSS
Keyboard navigation
Zoom images in & out
Optional password protection
And more!

Okay, now that you definitely want it, hop over to the WebSlide project page and download WebSlide!

The Together Show @ Umber Studios

donotreply@paularmstrongdesigns.com ( ) — Wed, 17 Jun 2009 14:55:22 -0500

Hey! This weekend is Umber Studios' 2^nd birthday. I'll have a few pieces up as well as many other talented artists and great friends. Stop by, say hi, enjoy great art and great people.

for the second anniversary of umber studios, the TOGETHER show celebrates two years of brilliant umber artists. every artist who has shown at umber returns to the space to show new work and celebrate the gallery they helped to create. to all who have made the gallery what it is today...

What: The Together Show
When: 8pm Saturday, June 20th, 2009; (June 20th - July 12th)
Where: Umber Studios; 3109 East 42nd St, Minneapolis, MN 55407

Artists in Show

Aaron Bickner
Allen Brewer
Amy Aaron
Andy Ducett
Ben Garthus
Dc Ice
Doug Beasley
Jake Keeler
Janell Vircks
J.a. Olson
Jessica Helvey
Jesse Mullan
Joshua Norton
Juri Loginov
Keegan Wenkman
Laura Hallen
Marq Spusta
Michael Joseph Winslow
Noah Norton
Pamela Valfer
Paul Armstrong
Peter Skwiot Smith
Phil Behrend
Rebecca Sullivan
Roger Barrett
Ruben Nusz
Russell Joslin
Sarah Christianson
Steve Krause
Steven Anthony
Terrence Payne
Tim Dieterle
Todd Bratrud
Torey Bonar
Tucker Gerrick
Zachary Johnson

Presentation: It's the Little Things

donotreply@paularmstrongdesigns.com ( ) — Mon, 06 Apr 2009 11:44:20 -0500

This morning's presentation was a success. I had a great time presenting and am now enjoying the rest of the presentations throughout the day. As I promised, I've put my slideshow up on Slideshare for everyone to view. Notes and links are available on the Slideshare site.

More to come later. Good luck to the rest of the presenters!

Meet Me at MinneWebCon '09

donotreply@paularmstrongdesigns.com ( ) — Mon, 30 Mar 2009 12:43:27 -0500

I’ll be speaking at the second MinneWebCon at the University of Minnesota next Monday, April 6th, 2009. There's a great lineup of speakers focusing on a range of topics, from user experience design, to social media privacy, to site security and hacker tricks. I attended MinneWebCon ’08 and had a blast. I'm more excited this year to have the honor of presenting a session entitled “It’s the Little Things”.

My Session: It’s the Little Things

User Interaction: it's the little things that are a website’s best assets for gaining a positive and memorable user experience. This presentation will focus on trends and best practices in design and development conventions for user controls and how they affect the user experience—negatively or positively. Through the course of the session, we will discover various problems affecting smooth user interaction. Then I will identify ways to enhance controls and layouts in order to both speed up required user tasks and make them easier to use.

There is limited space for attendees at MinneWebCon, so register today before it fills up. I hope to see you all there!

Sub-Pixel Text Position in Photoshop

donotreply@paularmstrongdesigns.com ( ) — Fri, 20 Mar 2009 10:52:25 -0500

This is my biggest peeve in when trying to design a web site using Photoshop: text objects can't be forced to whole pixels. They always seem to render their start point from a sub-pixel location. In the following image, you can see two separate text objects that I created, each with the exact same text, but each is rendered slightly different because of its sub-pixel starting location.

Is there any way to fix this? I've been searching the web and looking through everything I can think of in Photoshop, but not finding an option like snapping shapes to pixels. Not that I have any intention of switching, but does Fireworks behave the same way?