Eric D. Fields

Messages.app Gets Cross-Device Notifications Just Right

ericdfields@gmail.com (Eric Fields) — Thu, 16 Feb 2012 14:02:59 PST

Word of OS X 10.8 (kitty code name: Mountain Lion) dropped today. The big summary is its a continuation of the iCloud-ification of your data across all devices.

Part of the announcement was a beta release of Messages.app, formerly known as iChat. Now your iMessage conversation history syncs between your OS X machine(s) and iOS devices seamlessly.

A quick test with a friend and it works as expected. "Holla" jumps up in the conversation on the iPhone, iPad and Air almost simultaneously.

So we started using it while working on our OS X machines. Then the iOS devices went to sleep. Then things got interesting.

With a conversation happening on one device but being synced across many, knowing which device is having the conversation is key to the user experience. Apple figured this out so well that I just had to jubulate in its subtlty with this post.

When typing in Messages.app, iCloud knows your in Messages.app. When typing on the iPad, iCloud knows your on the iPad. When you're engaged in a conversation on one device, the other devices do not get notified of new messages. This avoids cross-device notification flares currently experienced by calendar alerts, which makes for an especially noisey 9:55 AM for me.

Now say you're working, working, working and Messages.app is out of focus. At this point, iCloud doesn't know what you're up to. A new message comes in. Since iCloud doesn't know what you've done since the conversation stopped it notifies all your devices.

You're still in OS X so you reply to the message via Messages.app. Now you've got notifications to dismiss on your iOS devices, right? Total first-world bummer, right? Nope: iCloud dismisses the notifications across devices once the conversation picks up again.

No extra X-ing out of things. No burnt seconds of your life. Just gets rid of them because it knows you've started talking again.

This is a total win. Anyone who's had an IM client open on an iOS device while signed in on the desktop knows that the scenario of multiple notifications about the same thing at the same is annoying to the point of untenable. Power users might deal with it for its synchronous novelty, but real users won't.

I imagine the entire minagerie of Notification Center-enabled OS X apps will work this way. Maybe it already works this way on iOS and I just never noticed it (I'm stingy with what I allow in my Notification Center).

Maybe I'll finally stop being reminded of our daily scrum by three screens at the same time every morning.

Above the Fold in 2012

ericdfields@gmail.com (Eric Fields) — Wed, 15 Feb 2012 09:39:48 PST

Boss: Do we think if we make these changes that this content will now be above the fold?

Me: You know, when I fold my laptop the screen shuts off and I can't use the keyboard. This is going to be the case for a lot of our users too. It's good enough content as stands; I really don't think its worth considering the fold.

Yes, this is obnoxious. No, not all bosses can take a joke.

Sublime Text 2 and Columns View and a Wish

ericdfields@gmail.com (Eric Fields) — Tue, 07 Feb 2012 15:20:17 PST

I've got high hopes for TextMate 2, which we know is happening for sure now. But Sublime Text 2 has been my goto editor for the last few weeks now.

Plenty to like, plenty to loathe, but its refreshing and it comes in Cobalt.

But being blessed with a 27" Cinema Display, one particular feature is providing that "I can never go back to a time before this" feeling I haven't experienced since cold folding: column view. Specifically Columns: 4 ⌥⌘4.

Right now I'm mostly wearing the hat of Front-End Rails Developer at HipHost, which means I'm dealing mostly with four types of files: Controllers, Views, SASS stylesheets, and JavaScript.

Now here's that wish: four columns + four file types + some light OCD = Assign File Type to Column.

I should be a good developer and just figure out how to make this happen. But then there's that free time thing…

If anyone's interested in this, drop me a line. I can at least give a brain dump of my thoughts.

Bash Convert All Your SCSS (or CSS) to SASS in One Line

ericdfields@gmail.com (Eric Fields) — Wed, 01 Feb 2012 10:40:05 PST

I've been using — nay, depending on — SaSS and Compass for at least a year (I'll get around to contributing, I swear). At the time when I picked it up, I was not familiar with Ruby or YAML, so its indentation-based syntax took a little while for me to wrap my head around.

But HipHost uses Ruby On Rails, so I've gotten to know and love Ruby. I took another stab at using the SASS syntax and now I'll never go back.

The only problem is I've got quite a few .scss partials that I need to convert now. Well open up that Terminal; here's one line of bash to the rescue:

You can replace that first *.scss with * or *.css depending on what's in your pwd. Just remember to change your from (-F) argument accordingly.

Metro UI's Creeping Influence on iOS Apps

ericdfields@gmail.com (Eric Fields) — Thu, 26 Jan 2012 12:58:15 PST

Microsoft's Metro UI has been rightly praised as a breath of fresh air in the interface design world. The last decade of websites and apps has been highly influenced by Apple, whose skeuomorphism has been both ridiculed and praised.

Microsoft's designers created a minimalistic but responsive and colorful design language inspired by the stark modernism found in public transit hubs.

I've yet to play with a Windows Phone, which featured the first iteration of this design. Nor do I think I'll use a Windows 8-powered tablet regularly in the future. But I think I'll be using quite a few apps that draw heavily from its influence:

Scorekeeper XL

Clear for iPhone

There's a lot of emotion behind these apps. The stark visual design heightens the effect of the unique sounds and animations. Watching these videos and using Scorekeeper XL (Clear is not out yet) is delightful in the Pixar sense of the word.

Microsoft's designers deserve credit for their innovation. Too bad it won't come in the form of Windows Phones flying off the shelves.

How to be a Web Designer in 2012

ericdfields@gmail.com (Eric Fields) — Tue, 24 Jan 2012 00:00:00 PST

I recently read Tom Milway's "How to Build a Modern Website in 2011" and Andy Johnson's article "Do We Really Need a New Web Design App?" back-to-back.

Both articles deal with the current state of web design: the process, tools and responsibilities of a web designer in 2012.

If you fancy yourself a web designer or front-end web developer of some sort, I encourage you to do the same.

I'm going to talk about Tom's article now, and I'll follow-up with a response to Andy's in the future.

Responsibilities of a Web Designer

Tom does an excellent job breaking down the trends and lessons from the last few years. The bulk of his message is what you expect: mobile-first, content-first, good typography, and a simple/responsive design:

I think the average folks designing for the web are starting to understand that design should never be the focus - that should (arguably) be left to art. I passionately believe that the purpose of a modern web design is purely to provide a neutral canvas to elegantly display content, allowing users to interact with it in natural, innate ways, and that it should be optimized for whatever device the user chooses to access it on.

Collectively, we need to assert this position. As web designers, our job is to design low-friction experiences accessed via web browsers on any device. That's it.

When you've got that requirement locked down tight, then and only then should the art department be brought in.

Art Department?

It was a quick little comment, but it really struck a chord with me: a good chunk of what clients typically think they want out of a web design is really more of a job for a digital artist: neato custom icons, expertly cropped and composited hero shots, "something to make the page really pop."

Any creative environment of the last century separated the concerns between design and art: newspaper layouts aren't handled by the guy who does the editorial cartoons, book covers aren't drawn by the typesetter, and National Geographic's gorgeous spreads aren't designed by the feature's photographer (even though his or her photos are main content of the story).

The fact that web designers, ever since they were webmasters, have done "a little bit of everything" defies the logical separation of disciplines that allowed the creative economy to thrive in the 20th century.

"We provide a wide range of creative services"

Most web designers I know do some combination of page layout, content strategy, information architecture, typesetting, usability, digital image manipulation, and coding. There are jobs within these jobs, too: on a single project I've written object models and controllers in Ruby, individual views with HTML, styled it all with CSS, then added additional interactivity through Javascript.

The next day I made 48x48-pixel icons in Fireworks.

Break it Down Now, Ya'll

Web designers are curious creatures who aren't afraid of the unknown. We'll fall into a new language or play with a new Javascript plugin and not come up for air for hours. And we like it like this.

The result of this unabashed curiosity is that we're mostly an industry of generalists.

That's OK. We still get the job done. But the big meaty responsive web design projects of the future will require many people with varied disciplieds to work together as efficiently as we already do on our own projects.

Become a T-Shaped Individual. Or maybe I-shaped. Or maybe an M. Or a W.

So day-to-day you can still be a web designer, so long as your focus is only on delivering access points to content manipulation via the browser. Along the way, mark those moments of specialization when you know you're delivering "just enough" to move on. When you're frustated from fumbling with a Photoshop composition to fill a 400 x 300 space on the page, take note. When a button is button-y enough and you need to move on to other tasks, journal it.

Alternatively, when you're all up on the Twitter tweeting about a sweet CSS3 widget you cooked up in less than an hour, that's a moment of specialization worth highlighting in three different colors.

Becoming more mindful of these moments will help us better examine them as disciplines that warrent their own spcial attention on future projects. As a bonus, you also learn your deficiencies and proficiencies, which you can confidently lay on the table next time your part of a team.

Jobs for Nihilists

ericdfields@gmail.com (Eric Fields) — Thu, 29 Dec 2011 00:00:00 PST

Maybe you should try LinkedIn?

Web design deserves better tools than the crap we're stuck with now

ericdfields@gmail.com (Eric Fields) — Thu, 01 Dec 2011 00:00:00 PST

As an industry, we web design-types are torpedoing into the responsively designed future while our design tools are stuck in the mockup-driven past.

We now have the know-how to serve dozens of devices, resolutions and bandwidths with one codebase and a design that adapts to its device. The old flow of designing a mockup with a 960-pixel grid, getting sign-off and coding it up is dead.

Dead, dead, dead!

We could attempt a mockup-driven approach to responsive design. Why not pick a few resolutions we want to support for an arbitrary amount of devices and then just do static mockups that address each scenario? We could, but now we've multiplied the amount of work we do by a factor of n, and our finished design won't feel quite right when coded.

Not only that, but what gives you the right to only support a handful of devices? Let the user use whatever device they have in their hands to get at it.

"But everything needs to be approved by The Creative Director. That's their job! We need to stay on-brand, on-message! Margins of exactly 12px!"

Sure, no doubt. No one wants a grumpy Creative Director. But there's no reason why you can't design responsively today and still please any number of stakeholders.

Design the parts, assemble the whole

What I find myself doing more and more is designing components in the browser where their context is 1:1 — no pictures of websites here, folks — where I can easily test multiple viewport sizes. (I'm not sure that component is the right word yet, but it works for now.)

For me, a component is any given idea of a thing that a good website must have:

good typography
a uniform set of form inputs and buttons
navigation or chrome
adaptive layout

Right now it's a big, slow, dumb challenge to attempt to do all these things well in static mockups and expect the result to be pushed into code perfectly. These days, I often work on something like my header, paragraph and list styles with markup and CSS in a browser using real content, test it across multiple viewports and devices, then move on to the next component when I'm happy with the results.

You can't do anything like this in Photoshop, Fireworks, or any other tool where the output is only vector or bitmap. The output needs to be code.

Ugh. Code?

Yeah, but just the web standards: HTML, CSS & Javascript.

Look: we create paintings with brushes and paint on canvas; we make music with things that make noises; we need to design websites with things that make web standards code, specifically good code — not too much, just for a specific component, that gracefully degrades. (This is not the article where we weigh the merits of screen designers coding their work. There are plenty out there.)

Do I smell future?

I actually started writing this article a couple days ago with no particular tool in mind, only wild fantasies of what a modern and future-forward web design app would be like.

But serendipity is a clever girl, and Gradient 1.0 was released today in the Mac App Store.

In a nut, Gradient is a remarkably intuitive tool for doing 90% of the gradients we web designers need on the regular. Just look at the first boot screen:

Gradient makes the task of designing gradients in CSS3 as easy as designing them in an image editor. With a UI like this, I might actually argue that its the most enjoyable gradient editing tool I've ever used.

The current problem with creating gradients using CSS3 is the boatload of vendor prefixes you need to make them work across browser, as well as having a fall-back strategy (usually a solid color) for older browsers. You can streamline this process quite a bit using SASS and especially Compass to compile your CSS, but you still have to ⌘-R your browser to see the results.

Gradient gives you a sexy interface for interactive gradient editing and outputs beautiful CSS3 instantly. With SASS support and multi-step gradients on the way, this app is a model of future web design tools. If you're as excited about this New Way as I am, please support the Jumpzero guys by purchasing the app.

Onwards.

You'll be missed, Steve

ericdfields@gmail.com (Eric Fields) — Thu, 06 Oct 2011 00:00:00 PDT

Preface

I am not a well-known web developer. I've yet to work on anything that made its way to the front page of any widely read blog or news site. I'm just a humble guy who writes a lot of code and moves a lot of pixels around all day. My voice isn't heard by many outside of the small circles of friends, family and colleagues I interact with on a daily basis. But this isn't stopping me from writing this post.

Reflection

Steve Jobs passed away yesterday. He was 56 years old. He built one of the world's largest companies, selling some of the world's most amazing and truly beautiful products.

Steve — (don't we all feel like we're on a first name basis with him?) — created devices that help me and millions of others get shit done every single day.

I'm part of an industry that wouldn't be where it is today without Apple. Apple's devices, especially the iPhone, forced competitors to catch up.

Google up operating system screenshots before and after OS X, phones that predate the iPhone vs. those that have come after, and laptops pre- and post-MacBook Air.

Steve knew we were in the future and, dammit!, the future is supposed to be shiny, sexy, and easy.

Steve broke the status quo over and over again. A rebel with a cause, practically vigilante but crazy genius for sure.

Self-Reflection

I'm trying to figure out why I feel so sad about the passing of a guy I never knew, why flowers and vigils at retail stores across the world seem so appropriate (a first of its kind, for sure).

Maybe because I never thought I had any living, breathing personal heroes.

Now I certainly have one less.

Rest in peace, Steve. And thanks for reminding everybody about the future.

Creating digital media on an iPad (2)

ericdfields@gmail.com (Eric Fields) — Thu, 22 Sep 2011 00:00:00 PDT

When the iPad was initially release, it was touted as the ultimate digital media consumption device. Whatever you can see and hear over the Internet or on your hard drive was just going to be more enjoyable on the iPad for all sorts of reasons: form factor, ease of use, portability, etc.

It took a little while, but a few multitouch-optimized production apps started to trickle out to prove that the iPad's unique interface makes an exceptional if not ideal digital media creation device as well, if only for certain types of media.

Djay for iPad was one of the first apps Gruber cited proving this true. Then of course came the iPad 2 and Apple's own Garageband made its multitouch debut.

Trying to be productive

Along the way, the good folks at The Omni Group ported their much-loved diagraming app, Omnigraffle to the iPad. Being a fan of the desktop version, I sucked it up and purchased the $50 iPad app. It was probably the first productivity app for the iPad that I decided to take seriously.

Amazingly, most of the familiar Omnigraffle tools and options were there. It was impressively simple to create new objects, line them up, resize, and change their properties. Without getting too deep into it (I'm not trying to write a review here), it felt truly useful, but not robust enough to replace desktop Omnigraffle for my everyday wireframing needs.

Actually being productive

Fast-forward a year and a few months, and Omnigraffle for iPad is now at version 1.6 and has some impressive improvements. Most notably, you can import stencils from Graffletopia simply by searching and clicking. With almost zero effort, I had some of my favorite wireframing stencils ready to go.

Today I was tasked with giving the home page for HipHost a rethink for the sake of highlighting featured or seasonal tours, I decided to give Omnigraffle for iPad the old college try.

Actually using the damn thing

The goal at hand was a simple home page wireframe redesign. I usually find redesigns easier than carte blanche designing, but I wasn't ready to jump into desktop Omnigraffle, Fireworks, or even code. I reached for the iPad and fired up Omnigraffle thinking I'd play around with a few grey boxes and figure out the big picture, then shift to the desktop.

But an hour and a half later, I had something that looked an awful lot like a complete wireframe. And I was very, very happy with the results. And very, very surprised by the time.

Single-tasking is the way to go

Multi-tasking destroys productivity. True productivity. The sort of get-shit-done productivity where you feel good, not exhausted, when its over. The single-tasking nature of the iPad means you can't help but pour all your attention into what you set out to do.

A UI so clean, you can eat off it

When wireframing, I'm mostly doing the following:

selecting elements
positioning elements
typing text
configuring elements

Here's how you do these things in Omnigraffle for the iPad:

selecting elements: tap
positioning elements: tap & hold, drag
typing text: tap, double tap
configuring elements: tap, tap the Inspector icon, tap a property, make changes

These are trivial examples and certain actions are more complex by nature, but they demonstrate that nothing I wanted to do ever took more time than I felt it should. I was never fumbling through menus or panels trying to figure out where some switch was that let me do what I needed to do. All the important controls just felt there.

While apps on the iPad lack power-user features like keyboard shortcuts, the right multitouch user interface at least feels efficient.

I started writing (again)

ericdfields@gmail.com (Eric Fields) — Tue, 13 Sep 2011 00:00:00 PDT

Around July 1, 2011, I left my job at a high-profile consulting firm in Boston, Massachusetts to embark, for the second time, on the path of indie web professional.

The decision wasn't terribly hard. All the questions had really simple answers.

Why'd I decide to go?

I didn't care about the work I was doing. I never felt like I was doing cool or interesting work from both a development and business standpoint. When you don't care about what you're working on, you don't do your best work.
What was I going to do next?

I had a small project going with a friend. A cute little mobile-optimized, location-based tool. I wanted to put the proper amount of dev time into it to see if it really had legs. I'll refrain from telling more about it, as I'm not sure what its current status truly is.
How would I find more work?

I was getting pinged at least once a week by someone looking for someone to fill a role quickly. At least every other one of those were freelance gigs. I worked for half-a-dozen or so companies in five years as either a contractor or employee. I have a network. It's done more for me than LinkedIn, for sure.
What if things didn't pan out?

I had enough money in the bank to last me few months and there's a dearth of front-end developer and user experience talent in Boston. Finding a new role wouldn't be hard.

So what finally happened and what does this have to do with writing?

Through that wonderful network (never burn bridges, folks), I connected with Mario Ricciardelli, founder of StudentCity. We met at a Meetup geared at UX for entrepreneurs where he showed me his Balsamiq wireframes for a cool social travel concept, HipHost.

In a little less than a month of working with Mario and his team, HipHost.com is up and running, at least as a soft launch. I've made the front-end code my baby, juiced it up with Compass and SASS and helped breath some personality into the design.

I'm working on something I care about. I'm generally happier and more satisfied at the end of the day.

You still didn't mention anything about writing.

Sorry.

I was a huge writer throughout high school, both creative writing and journalism. The combination of writing + geekery and my general creative tendencies played a huge part in getting me to where I am today, in the (thriving) industry I'm a part of today.

But I stopped writing for a while, partly due to going through the necessary but often fun motions of growing up but also due to the lack of creative will I had at the end of a day working on stuff I didn't care about.

I'm proud of what I'm building now and I feel like I'm ready and willing to share that process with the vibrant community I'm a part of through my writing.

I guess the lesson here is do good work and the rest will come naturally.

HipHost has a long long way to go, but we're in a hot space and I have a ton of confidence in the team. A few more of these blog posts (but shorter!), and I'll also have that confidence in myself to write more and maybe contribute some cool code.

Have fun out there.