Articles

I was very excited to attend the Seattle stop of the An Event Apart tour this year. Last year I was out of town when it happened and was bummed. Thankfully I got my ticket early this year and was able to schedule it in advance.

I went expecting to be excited about HTML5, Standards and CSS3...the usual. And I was; many talks were exactly what I thought they'd be; cool new technology and topics that felt somewhat familiar already. However, I came away with knowledge I wasn't privy to previously and felt this information was more important to my work and my business as a whole.

Day One

Jeffrey Zeldman

Jeffery Zeldman kicked off the conference with a humorous yet insightful coming of age story of the internet. Full of lots of little anecdotal, quotable quips; it was quite enjoyable.

Jason Santa Maria

Brooklyn's Jason Santa Maria was a great presenter. He talked about web fonts and how they are creating new opportunities for designers; he also touched on typography as a whole.

I learned that being able to discern between a typeface's characteristics will help able you to select similar fonts or choose a contrasting typeface. Santa Maria also indicated that typography was largely an art of contrast (as is much of art). Juxtapositions are what make typography interesting.

He also talked about relationships between color, weight and line length. For example, the longer the line of text, the more space should be used between lines. Stronger colors used on text should also incur more line height.

One great point I took away is that we as designers shouldn't try to always do something wildly different for each design. Find typefaces that resonate with your personal style and develop a "personal palette"; get to know those typefaces really well.

Kristina Halvorson

Kristina Halvorson also blew my mind with her talk "A Content Strategy Roadmap." The founder of Brain Traffic hammered home how content strategy is a very typically overlooked part of the average web design workflow. Sure we all do IA, Design, Development, et al, but content is always that thing that gets tacked on at the end of a project and "isn't our responsibility".

Halvorson said that the content isn't the problem, it's the process or map we standardize on to complete our projects. Her talk made it clear that a good content strategy can inform the project at all touch points and should really drive much of the deliverables for a project. Some key points:

• Determine who is responsible for the content; the "content owners."
• Don't jump to conclusions about content; dig deeper; find the good stuff.
• Define the deliverables.
• Ask how content fits the business objectives.
• Ask how the content gets updated.

In short: content is your fucking job. We all need to remind ourselves of this fact.

She also introduced a new concept to me which is that of developing "Page Tables", a guideline of sorts that tells clients/copywriters what they are creating copy around.

Every time I develop a functional spec, wireframe, etc, I start with asking "ok, what's the content? how is it displayed? how much of it is there? how is it updated?" Content touches it all and really should be in the proverbial driver's seat.

Scott Berkun

Local hero Scott Berkun gave an insightful talk on "Why Designers Fail." As an industry, our successes are determined by how we fail and how we respond to that failure. He noticed that compared to most industries, we in the design industry rarely have a failure analysis protocol; that is to say, examining our failures and learning from them.

He talked about the different kinds of failures and noted that we must experiment to create knowledge. One highlight was his discussion of designer Matt Wiley's process. The designer recorded himself designing a magazine layout. The "try this, no, try that, no, doesn't work" method of failing to succeed is immediately apparent in his decision-making process. Berkun pondered why we don't look at this type of documentation as designers more often. Pretty fantastic.

Sarah Parmenter

Sarah Parmenter's talk was quite good as well. Through examples and anecdotal evidence, it became clear how psychology can affect user experiences. Parmenter boiled down psychology in design to five points:

• Speed (KISS - Keep it Simple Stupid. People think fast.)
• Simplicity (Clear messaging)
• Surprise (Challenge conventions)
• Social Behavior (Herding behaviors and social proof)
• Stirring Emotions (Inspiration negatively or positively)

We can tailor experiences to influence users to interact and react, buy and like. She even gave some great examples of dark patterns, using design patterns to negatively influence users. Her talk was fun and her slides were really well designed (no surprise there; her style is super rad).

Luke Wroblewski

At the end of the first day, Luke Wroblewski gave an amazing talk on "new mobile moves." To get us loosened up, he had the entire crowd do some move's from MJ's Thriller. Was pretty hilarious. Wroblewski really made it clear that we should be designing for mobile before designing for desktop. Mobile internet usage is growing so fast that it's going to be overtaking desktop usage in the next few years. Luke encouraged us not to make a website and then dumb it down for mobile, but to design specifically for what mobile was fantastic at doing, and then design the website around those features. He also talked about how interaction with mobile devices differs from desktop interactions and gave tips on designing for those interfaces.

Day 2

Eric Meyer

Eric Meyer started off day two with a number of CSS demos basically for "fucking" with the user. It was a nice way to start off the second day. I felt like it was funny that he just had a bunch of CSS files, but thought maybe it could've been presented in a much quicker format (like design a website for it with a demo on each page instead of copying and pasting). Unfortunately, some technical issues kind of killed his flow a bit.

I would've liked to have seen his demos in about 10 minutes and then have him talk about the state of the CSS3 spec for 40 minutes. Who defines the spec? How do the different browser vendors contribute to it? How does a feature implementation get into multiple browsers? I hate to admit that I was thinking "it's 2011, we all know this stuff by now."

Jeremy Keith

If Jeremy Keith wasn't everyone at An Event Apart's hero already, he was after his talk. Keith eloquently described how our design principles lead to a set of design goals and design patterns form or are utilized to achieve those goals. Keith showed examples how good/bad design principles lead to patterns that can help or harm an end-user. I think Keith's talk was my favorite of the event. I wish I could write more about it but I'm still thinking about it right now.

Aarron Walter

Aarron Walter's talk was accompanied by some great illustration. Walter's was a positive, motivating talk on prototyping, testing, and generally putting your ideas out into the world. He used his own company MailChimp (which, coincidentally, is one of my favorite sites right now...beautiful) to show examples of wireframing, prototyping, sketchboards, et al. He encouraged collaboration; having a buddy to validate your ideas.

Andy Clarke

I'd heard a lot about Andy Clarke before this event, but he was even more entertaining then I expected. Clarke gave a fantastic presentation on CSS3 transforms and (mostly Webkit-based) animation. He showed a CSS3 animated version of the Mad Men intro, and then walked us through how it was done. A beautiful demo and some practical implementation knowledge; awesome

Clarke then proceeded to blow everyone's mind with a working demo of Animatable, a browser-based CSS3 animation-creating tool that generates semantic markup. It looked something like the Flash timeline, but with a more rich timeline tool and palette system. It was safe to say that I was super impressed. You should definitely follow the Animatable team on Twitter for updates about this imminent tool.

Alexa Andrzejewski

Alexa Andrzejewski, the founder of the Foodspotting application recounted her trip to Japan and explained how urban design can inform user experience. I thought this was one of the more touching, personal talks. She cracked me up when she said that "there are no stupid people, only stupid interaction designers."

Tom Coates

Tom Coates seems like an absolutely brilliant technologist. He was also hilarious. Dude had everyone in stitches. Coates gave loads of examples of emerging technologies that are or could be networked. Even though he was really silly, it really made you realize how much awesome stuff is happening right now and how much potential for growth there is. Was a great end to the conference on a fun and positive note.

Thanks, AEA!

Overall, the conference was fantastic. The food was good, venue was perfect, the music was great, and I met a bunch of new friends. Definitely made it clear to me how fantastic Twitter is as an ice breaker ;)

This will be the first post about my experiences learning Android development. At the moment, I'm working on a small application for the project/code management software Codebase (http://codebasehq.com). The aim of this article is to show how to create custom background colors for ListView interactions in Android; that is to say, make the background of ListView rows not that ugly green or orange gradient.

← In my primary Activity that first loads when you start up the application, we're displaying a list of activity logs from the user's activity feed. The layout file for this is quite simple:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <include android:id="@+id/custom_title" 
        layout="@layout/custom_title"/>
    <ListView android:id="@+id/android:list"
        style="@style/ListView"
        android:layout_weight="1"/>
    <include android:id="@+id/navigation_dashboard" 
        layout="@layout/navigation_dashboard"/>
</LinearLayout>

So the ListView is what we need to "style" here. You can see that I'm referencing a @style property called ListView. That's defined in res/values/styles.xml. This is a resource file which is compiled into a Java class for use at runtime. So we define "ListView" style here, and then we can reference it in out layout above with @style/ListView or in code at R.style.ListView.

res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="ListView">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:background">@color/off_white</item>
        <item name="android:cacheColorHint">@color/off_white</item>
        <item name="android:listSelector">@drawable/list_selector</item>
    </style>
</resources>

You can see here that I've defined a property for android:listSelector. This sets a drawable that tells our ListView how to display the selected rows in the list. I reference a list_selector drawable which is defined in res/drawable/list_selector.xml. Again, this is another resource file, so we can access it in XML resources or code like we did with the styles. For this app, I'm using an off white color for the background of the ListView. The cacheColorHint is a setting that tells the list that it'll be drawn on this color background. It helps speed up scroll speeds as well.

res/drawable/list_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- touch down -->
    <item
        android:drawable="@drawable/list_selector_pressed"
        android:state_pressed="true"/>
    <!-- selected -->
    <item
        android:drawable="@drawable/list_selector_selected"
        android:state_selected="true"
        android:state_focused="false"
        android:state_pressed="false"/>
</selector>

This file is a state list drawable. It defines a set of drawables that represent the state of our property; in this case "listSelector". Above, you can see we've set a drawable for "state_pressed" and "state_selected". Each of these is another resource file.

res/drawable/list_selector_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <size android:width="1dip"/>
            <size android:height="1dip"/>
        </shape>
    </item>
</layer-list>

res/drawable/list_selector_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <size android:width="1dip"/>
            <size android:height="1dip"/>
        </shape>
    </item>
</layer-list>

Each item just defines a rectangle shape that's basically 1x1 density independent pixels (dip). This will fill the background of the rows of the ListView. So when you tap the list view row, it will use the drawable that represents the pressed state and fill the background with the drawable white rectangle shape.

So changing list view background colors is easy, it just requires a bunch of files!

After the foray into hardstep on volume 23, we're back to beautiful liquid beats this month. The new EP by Override is blowing my mind right now. So good. Enjoy the mix and make sure to follow us on Twitter if you want more music.

1. Override - Bring It Back
2. Vision feat. MC Kyla [Agent Alvin Remix] - White Papoo, Double Negative
3. The Dynamic - Kjell
4. Don't Fade Away - Submorphics
5. Enigma [Calbre remix] - Break
6. Enter - Leumas
7. Turning Point - Mindstorm
8. Simple Beginnings - Fred V
9. Sweet Harmony - Danny Byrd, Liquid
10. Summer Breeze - Command Strange
11. Fantasy - Dam Funk
12. Echoic Moments - Aphonic
13. Heal Me - Break
14. Closer To You - SKS,Kush
15. El Son - Sci-Clone

→ Download Liquid Hacynth Vol 24 from Dropbox

You've heard it before—the haters, the purists—you most likely either think Fireworks is the "free app that Adobe throws in when you buy 3 or more apps" or you're a Fireworks purist (read: snob) and feel the need to tell everyone how "Photoshop is for Photo Manipulation only." Let's be realistic, though; they are both completely adequate programs for web designers and one can happily design websites in both.

I believe, however, that many user's disdain for Fireworks is due to their unfamiliarity with the program (and possibly that it's one of Adobe's more crash-happy programs; though CS5 is certainly a huge improvement). The workflows they've spent years learning in Photoshop are "hard" to do in Fireworks (speaking from experience here). They aren't hard, just different, and I've found that now that I've gotten to know Fireworks, I actually prefer it over Photoshop for many tasks.

Let me be clear that I am not saying Fireworks > Photoshop. It's not; it's just different. I firmly believe, however, in using the right tool for the job. If you're editing photos, bitmaps, painting, drawing custom elements, etcetera, by all means, use Photoshop. If you're doing wireframes, prototyping, vector-heavy application design, layouts and web design in general, Fireworks should also be in your toolkit.

That being said, I'd like to tell you about some of its features I care about to make you think about giving it a shot on your next design project...

With many folks touting mobile-first design and mobile browsing growing by leaps and bounds, it's important to create responsive applications. Fluid layouts and scalable graphics mean thinking outside the 960x600 box we've designed ourselves into. Which brings me to items #1 and #2.

Decent Vector Editing

"Fireworks blends the use of bitmap and vector effectively, falling somewhere in between Illustrator's vector power and Photoshop's bitmap editing ability." -- Greg Lutze, Must Warn Others

Photoshop is the bee's knees when editing bitmaps, but vectors are a different story. If I want a scalable graphic I may fire up Illustrator and then create a Smart Object. In Fireworks, I can draw directly in the same app and create graphics that can scale to any size. Created a 320x480 design for an iPhone view? Scaling that up to 640x960 for retina display would pretty much be a complete redesign in Photoshop. In Fireworks, it's a quick Image Size change.

Speaking of size changes...

Pages & States

You Photoshop uses are probably saying "hey, we've got Layer Comps!" about now, right? Good, you should use them! Starting in CS4, Fireworks has Pages and States. States are similar to Layer Comps but Pages are like a whole separate design document in the same file. Each page can have its own canvas size so creating multiple layouts in the same file is a snap. Each page can have States within it. You can easily export Pages to images or to a PDF with a selection of Pages in it. I can't count how many times I've seen 3000px high Photoshop designs because the "Home Page" is only 700px high but that "News" layer is 3000px. That can be a bit confusing.

A document can also have Master Pages; pages which are used across all sub-pages. Put your navigation/header and global elements in there and make adjustments once to propagate across all pages. In Photoshop, if you make a global change, you may have to go back and update one of your layer comps to reflect the differences. This type of task is minimized with Pages and States.

There are things that both Photoshop and Fireworks do...

Grouping and Selection

Photoshop has great grouping. Select some layers, group them. However, I really like Firework's implementation of selection. When you select an object on your canvas, it shows it selected. Its not just a highlighted layer in your Layers panel. You can hover over a layer to show it's bounding box, so you know exactly what you're about to select. No toggling on/off "Auto-Select Layer", thank you.

Smart Objects vs. Symbols

Photoshop uses smart objects to make reusing assets easy. Edit your Smart Object in Illustrator or another editing program and update it throughout your file. Fireworks goes further with Symbols. They are almost like a MovieClip in Flash. You can create a reusable Symbols containing graphics and text, set properties on each, and add 9-slice scaling.

For example, you could create a Symbol that has a "label" property. Drag an instance of a custom button to your canvas and set the label property in the "Symbol Properties" panel, and the symbol will add the label and "9-slice-scale" the background to fit the text field.

Graphic Export

Both Fireworks and Photoshop have export tools for web. Fireworks gives you a bit more granular control and (I've found) better quality and superior compression on exported images overall. You can also set export settings per page if you are exporting the PNG document as images (one for each page). Fireworks also has a more sophisticated slice-creating tool, allowing you to create rollover states for buttons and export them all at once.

Trying It

I found the most difficult task when trying Fireworks for the first time was masking and gradients. They can be quite confusing compared to Photoshop. Making something like a gradient mask is quite easy though. Just like Photoshop, select the layer and click the mask icon in the layers panel. Then you just select the mask and use the gradient tool to draw the mask. The gradient tool in Fireworks is pretty cool as it has a sort of "live-preview" as you click and drag. The initial effort to learn the new methods is tough, sure, but I think you'll find that once you've established workflows for your familiar Photoshop tasks, you'll love Fireworks.

So, I've made my case for Fireworks. Obviously, these are just opinions, but give it a another shot. Perhaps you won't care for it, but I think it's responsible as a developer or designer to have both Fireworks and Photoshop available to you and to familiarize yourself with both.

Been a long time since I've done any mixes that weren't soulful liquid drum and bass, and @vinniefranco made a special request for a hardstep mix, so I started collecting harder tunes a while back. Definitely not for the faint of heart. Takes me quite a while to find harder tunes because I like a little musicianship with my wobble, if you know what I mean.

Enjoy, and hit me on Twitter @typeoneerror if you like this one.

1. Desert Orgy – Phace
2. Deception - Noisia
3. Twisted – Outrage
4. Drip Dry – Illfigure
5. The Key – C-Netik
6. Idle Machine – Heavy1
7. Moonwalker – Wilkinson
8. Always You – Youngman, Crissy Criss
9. Tomb – Block Dodger
10. Dark Side – Dub Elements, Venegaza
11. Ass – Receptor
12. The Scientist – Lightness, Eddy Crusher
13. Nerve Damage – Spinlock
14. All About – TC, Jakes

Like I said, I'm not a huge headbanger fan, but even I could get down to Tomb and The Scientist. Dance Floor Material.

→ Download Liquid Hacynth Vol 23 from Dropbox