Wix

Our proposal to bring Midwest UX to Pittsburgh is almost ready to go live. Our design lead decided to give Wix a try to build our site. I’ve been doing some editing tonight, and I’m unimpressed. For one thing, it didn’t work in Safari, but that was the least of my issues. I realize it’s probably a great tool for someone that doesn’t know how to write HTML and CSS, but I found it extremely limiting and pound-your-head-on-the-desk frustrating to use. Unless you want to be tied to the specific designs they’ve made available, you have to “customize” your elements. When you do that, they no longer share their styles with any other objects, so if you have a list of buttons that have all be customized, and you decide you want them to be a different color, you have to change each one individually. I wouldn’t be surprised if there is some feature I don’t know about that lets you define styles, but if so, it isn’t obvious.

Sure, it makes it easy to add transitions, shadows, rounded corners, and to lay out a page, but you can have it. I’ll take my trusty text editor and a CSS file.

Adobe CC 2014

I’ve been using the new versions of Photoshop and InDesign. I’m quite happy with the improvements to Photoshop, but InDesign has been a disappointment. I was expecting it to receive some improvements to improve consistency between the way the applications work. Alas, InDesign still doesn’t have scrubby zoom. I’ve become so used to it in Photoshop now that I try to use InDesign’s zoom tool the same way, which doesn’t work well at all.

InDesign still doesn’t play well with multiple displays. The toolbars only dock to the edges of the primary display. You can put them on a secondary display, but they just float, rather than snapping into place, and the document window doesn’t account for them automatically. I plug my MacBook Pro into a 27” Apple display, which I prefer to use as the main display. The laptop’s screen gets all the palettes.

And, while I was excited about the ability to import settings from the previous version of the application, I didn’t have very good results. I was happy my color list traveled, but my cursor preference and unit settings weren’t carried over, nor were my custom actions.

Dropbox for Granted

I’ve become addicted to Dropbox. For the most part, it’s a healthy addiction. I have access to files on my iMac at home, my MacBook Pro at the office, and the MacBook Air that I carry with me to class, church meetings, vacations, etc. All of the working files for my book are in there. All of my conference presentation and workshop files are in there. All of my classwork, from lecture notes to student work, is in there. I have Circus Ponies Notebook files and Bento database files in there. It’s kind of like Prego spaghetti sauce. “It’s in there!”

It’s gotten to the point that I just take it for granted. I expect that my files are always up to date. However, if my MacBook Air doesn’t have an internet connection, it can’t sync. Just last night I was bitten by my complete trust in the service. I arrived at my church for a meeting to find that the WiFi was still down from a lightning strike a couple days prior. I thought it was inconvenient, but it wasn’t until later that I realized that my laptop hadn’t been connected for awhile, and the versions of the files I was working with were out of date. When Dropbox detects changes to both versions of a file it is trying to sync, it keeps them both, marking one as being conflicted. That’s not immediately apparent for a package, which appears to be a single file, but is actually a collection of files.

At first, I thought I had lost my changes, but quickly thought to check inside the package where I found the conflicted version of a file containing the content I had edited. I was fortunately able to recover my work.

It’s a tribute to Dropbox that it works well enough to become a subconscious part of my behavior, but that makes it especially unsettling when it does something unexpected, even when it isn’t at fault.

Upgrade Amnesia

I was finally able to upgrade to Adobe CC at work today. I installed the usual suspects: Photoshop, InDesign, Illustrator, and Acrobat Pro. After the installation, I launched Photoshop to continue working and… oh bother! I was looking at defaults. My custom workspace setup wasn’t there. My color swatches were missing. There was no sign of my recorded actions. I know they are still somewhere on my drive—probably buried in one of the Library folders that Spotlight doesn’t search by default.

I spent time getting all of my palettes arranged just right. I’ll probably take time tomorrow to run through all of the preference settings and find those files. It’s a real hassle. And then I’ll have to do the same for InDesign and again for Illustrator. Is it too much to ask for the installers to be smart enough to transfer all of my custom settings?

Unintelligent Upgrade

Ever since Quicken dumbed down its Mac version, I’ve been using iBank. You can read about that saga in these posts if your are interested:

Cut to the Quicken - 1/19//10
QuickEnd - 7/11/11
The Quickening - 12/22/11

This weekend, I discovered that they had released a major new version (5), and I decided to upgrade. I had purchased iBank through the Mac App Store, which is quite handy, but still doesn’t allow upgrade pricing. So, I could either buy iBank 5 at full price from the store, or I could download it from their website and purchase an upgrade license for about half price. I like to save money, so I did the latter.

This modal dialog was displayed, asking for my credit card information. Yes, the software I use to download transactions for all of my credit cards asked me to enter my credit card information. It could have asked me to select one of the credit cards it already had information for. Of course, since it was modal, I couldn’t even look up the information in the application. I had to resort to getting it out of 1Password.

Correction: I was contacted by someone at IGG Software who pointed out that the application doesn’t actually have my credit card information, just the account information. It’s been a long time since I entered my accounts into the application, and I just assumed. You can’t offer to use what you don’t have.

In the Details: 1Password 2-for-1

I started moving my software registration records from Yojimbo over to 1Password, because Yojimbo requires a paid subscription for synching, while 1Password synching is included in the price of the app (as it should be). I noticed two nice little microinteractions as i was doing this.

First, I noticed that as I added each application, 1Password was finding that app on my drive and pulling in its icon. Notice that the Battle.net Mobile Authenticator has a generic icon. That’s because it’s on my phone, not my desktop.

The second “aha” moment happened when I added the eleventh item. The list gained alphabetical dividers. The application’s designer decided that for ten or less records, dividers weren’t necessary. Nice touch.

Crop Accuracy

Prior to Adobe CS6, I was able to accurately crop an image with pixel precision at 100% zoom. With the change to the way the crop tool works, I find that I now have to zoom in quite a bit to get my crop boundaries where I want them. I no longer have the previous version installed, so I can’t do a side-by-side comparison. I can only conjecture as to the reason.

As I recall, the outline created by the previous crop tool would be either black or white depending on the background behind it. At any rate, I certainly remember that it changed to contrast with the background, and this made it really easy to detect edges. The current tool uses a nearly black line, regardless, which is only slightly transparent, and it darkens everything outside the boundaries. This may work well for photographs, but it actually obscures edges when trying to crop screenshots of UI elements, which is what I’m typically doing. It now takes me over twice as long to crop an image.

Back to Basics: Database Keys

I don’t know a whole lot about relational databases, but there is one thing I know about them all too well. Each entity within the database has a primary key that acts as a unique ID by which the entity may be referenced. It is also typically used as a foreign key, linking it to other entities. An example of this is the User ID, which is required separately from your actual name because, unlike your name, its uniqueness can be enforced by the system and thus depended upon to distinguish you from every other user in the database.

Left to their own devices, developers will invariably use a value from a user-entered field as the primary key. Because it is the unique ID and used to link to other tables, the value cannot be changed. So you are now left with a UI that allows the user to enter a piece of information, but once entered, won’t let them change it. This is a design sin. As a rule, if the user is responsible for entering information, they should be allowed to change it, if for no other reason than to correct typos. There are certainly edge cases in which this rule should be broken, but they are few.

When specifying your UI, make sure you include editing capabilities for any data the user enters. If editing functionality is specified, the developer will know that they can’t make it the primary key. They will generate a key behind the scenes that the user will never see, and that’s the way it should be done.

RSS in Limbo

I’m in limbo. Ever since Google Reader shut down, my workflow for keeping up on design blogs and other news has been dysfunctional. I had been using NetNewsWire on all of my Macs and my iPhone. It used Google Reader, as did most RSS readers, it seems, for synching. That way, whether I read something on my phone, my work laptop, or the iMac at my house, every platform was up-to-date on what I had read. If I subscribed to a new feed, they would all be updated.

Synching stopped working when Google Reader shut down. The NetNewsWire iPhone app stopped updating feeds. They released a Beta version of their new desktop app, and while it was able to retain all of my subscriptions, it doesn’t synch them between machines. I did most of my reading on my iPhone, and they don’t have a new iOS app available.

So, I decided to check out another feed reader I had heard a lot about. I installed Reeder on my iPhone and added a few of my favorite feeds to it. I really like the design of the app. It works well. Unfortunately, their desktop version is no longer available. They pulled it from the Mac App Store when Google Reader shut down. So, they don’t currently have a cross-platform solution that fits my needs either.

As things stand now, I have a few feeds in Reeder that I’m reading regularly and a lot of feeds on my iMac in NetNewsWire that I’m not. I’m having to add feeds to my students’ blogs on my iMac and my MacBook Air individually. In short, it’s a mess.

I expect whoever releases both a desktop and iPhone app with synching first will get my money.

Designer’s Toolbelt: Macaw

When I first began learning to design websites, I used the brand-spanking-new Adobe Pagemill. Who needs to learn code? I was a designer, not a programmer, and I wanted the freedom of the WYSIWYG tools I was used to using for print. The computer should do the boring work of figuring out how to actually specify it. When GoLive Cyberstudio released, I jumped on it. I continued using that tool after Adobe purchased it, and I eventually switched to Dreamweaver after Adobe acquired Macromedia.

By that time, I had graduated with my Masters and was working for a software development firm. It didn’t take long for me to realize why the developers turned up their noses when they saw the HTML I was handing them. Fortunately, I had been working with it long enough that I had developed enough understanding of HTML to be able to start coding by hand. Once I got my hands on CSS, you couldn’t pay me to go back to a WYSIWYG editor. These days, I’m a huge proponent of Object Oriented CSS (OOCSS), speaking at conferences and leading workshops about working with developers and contributing directly to the production code base.

So, it was with much interest and a hint of disdain that I took a look at Macaw, “the code-savvy web design tool” under development by Tom Giannattasio and Adam Christ. I must admit, I’m impressed with what they have shown so far.

Stop writing code. Start drawing it.

Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It’s time to expect more from a web design tool.

This tool is pretty slick, and you can tell that it has been thoroughly designed by a designer who understands typography, grid-based layout, and code. You can tell that it has been built to address all those little annoyances we web designer/developers face daily. From readouts that tell you things like the number of characters per line, to supercharged key combos for quickly aligning objects (pudging is going to make your heart skip a beat), the application looks to be chock full of awesome.

And then there’s the code. I’m awed by how intelligent their aptly named Alchemy engine is.

We wanted Macaw to write code you’d be proud enough to hand to developers. Current applications rely on trendy frameworks, export rigid positioning and generate ridiculous IDs. We think designers and developers deserve better. Macaw’s powerful, patent-pending engine is called Alchemy and it can do some incredible things.

Alchemy analyzes every possible selector to describe your document and determines the most succinct way of using them based on logical criteria: applicability, specificity and semantics.

Macaw offers designers the freedom of absolute positioning within the interface but will convert to a static document flow upon export by calculating the necessary margins, padding, floats and clears. It’s the best of both worlds.

There is an incredibly elegant outline palette, reminiscent of Photoshop’s layers palette, that not only serves as a method of hiding and showing elements within your page, but also creates the semantic linking between elements and the classes that will be generated in the CSS.

I’m just scratching the surface here. You really should check it out for yourself. I’m not saying I’m ready to start generating all the enterprise web applications I work on in this way, but it sure seems like an excellent tool for sketching, prototyping, and then moving your prototype to usable code. It’s leaps and bounds beyond any editor I’ve seen before. They say it’s coming to the Mac App Store soon. I’ll be following their progress with great interest.