Interaction Design and Web Building by Rick Murphy

Christian Bale and Kermit the Frog

2009-06-22T23:34:00.000-07:00

Kermit the Frog and Christian Bale »

First off, credit is due the blog Oh No They Didn't - the original Kermit and Christian Bale...

So kermitbale.com was available...

I can't put my green slimy finger on WHAT exactly is SOoo funny.. BUT it is. I think it's the man's intensity in contrast to Kermit's general lack of.

Well then there's this...

Whhuuuut!? Combine that with a little this...

Oh hey Kermit!

See how that all somehow works?

"Are you professional or not?"

So I bought the URL and started the blog.
A friend or two will help me keep it updated. Enjoy :)

-Rick

One Week, Sia, The Blakes and The Goats.

2008-02-26T00:18:00.000-08:00

The Blakes @ Chop Suey

I like when the band actually out-styles the hipsters in it's crowd. The place had so much energy during their set that you had trouble imagining that you would ever see them in this small of a venue again.

Sia @ The Showbox

Hot on the trails of Feist's iPod makeover, Sia's new album Some People Have Real Problems seems to strive for its own spot the list of somewhat unknown artists brought to light by Apple's ad campaigns. As disappointed as I was to see Feist move away from the styleings of Let it Die, I'll admit I enjoy Sia's return to the user friendly techno-soul familiar to her collaboration with Zero 7. I really wasn't expecting to have as much fun as I did. Sia and company came on stage in black-lit costumes appearing to be marker drawings of florescent stick figures... and I had enough to drink to believe that they were :)

The Mountain Goats @ Neumo's

Not really my favorite act. I went with a friend who's more into the lo-fi thing but it was a good show. Their many years of recording and touring could be seen in the the sold out crowd's bright-eyed response to each song. Jeffrey Lewis was a great opener and I couldn't get Creeping Brain out of my head at the after hours.

Oh yeah! Ben Gibbard of Death Cab showed up for The Goat's anchor set and

performed a bit.

Three Column CSS Layout with Fluid Center

2008-02-11T19:44:00.000-08:00

Its called the Holy Grail of CSS Layout. Three columns with a fluid center that expands with the width of the browser window. There are many examples out there on the web but few without browser hacks, javascript or a less than optimal content flow in the code.

Here is my version of the 3 column layout. I'll explain how it works below...

Holy Grail Requirements

The site wrapper and center columns must expand with the width of the browser window and since the beef of the content will be in the center column it must come first in the HTML code. This gets tricky because common CSS column solutions require that you define column widths and in order for our center to expand with the window it must remain undefined.

100% javascript and browser hack free.

To start off I'll show you the basic framework of HTML. It's a header three columns and a footer contained in a wrapper. The trick here is to wrap the second and third columns in a div making sure the second column is the first column in the code.

</div>

</div>

Add some content and borders.

Go ahead and fill out the divs with some dummy text so you can see what is going on. It's also a good idea to add some background colors and/or borders so you can see the layout coming together as you code. Start out with something like this...

Start by building columns two and three.

Float column two to the left. Give column three a fixed width of 180px and 10px padding and float it to the right. Usually when creating CSS columns you would float elements with defined widths that would share the space within their parent element. When these floated element widths add up to be more than the width of their parent the layout will naturally 'blow out.' We don't want to define column two's width here. This is so it will expand to take up the entire width of the parent as it inherits the changing width of the browser window.

Here's the trick...

Column three is currently 200px wide and and we want to make the browser think it is 0px wide if we want it to float into place. We can do this by giving the element the same amount of negative margin in the opposite direction of its float.

.col_2 {
float:left;
background:#ffffff;
}

.col_3 {
float:right;
width:180px;
padding:10px;
margin-left:-200px;
}

You will see column three pop right up into place but it will be overlapping column two since its technically 0px wide. Don't worry we'll take care of this later...

Now that our nested two columns are in place well do the same treatment to column one and the container of the right two columns. Give column one a width of 180px, 10px padding and float it to the left. Float the container with column two and three to the right and apply the negative margin to column one opposite of its float.

.right_2_cols {
float:right;
}

.col_1 {
width:180px;
padding:10px;
float:left;
margin-right:-200px;
}

.col_2 {
float:left;
background:#ffffff;
}

.col_3 {
float:right;
width:180px;
padding:10px;
margin-left:-200px;
}

Now you can see that the side columns are on top of any content in the far left and right 200px of the wrapper.

We can fix that by simply adding left and right padding to column two, pushing all the covered content out of side areas. Add about 210px so we get out from under the side columns with a little breathing room. You should also clear the footer at this point to keep the elements from floating through it.

.right_2_cols {
float:right;
}

.col_1 {
width:180px;
padding:10px;
float:left;
margin-right:-200px;

}

.col_2 {
float:left;
background:#ffffff;
padding:10px 210px 10px 210px;
}

.col_3 {
float:right;
width:180px;
padding:10px;
margin-left:-200px;
}

.footer {
clear:both;
}

There you have it.

Thats basically it. You can make the columns any width just make sure to adjust the negative margin. Keep in mind that if you define a column to be 300px wide and add 5px padding on each side, your total width will end up at 310px. This would mean that the margin opposite of the float would have to be -310px. With a little screwing around you could add another fluid column or even another fixed-width one for banner ads.

Here's my example of the liquid layout again if you wan to take a closer look at the code.

enjoy.

CSS External File Organization

2008-02-07T20:14:00.000-08:00

Separation of content and layout is one of the many advantages that has made building web pages with CSS today's standard. It's always recommended that you separate your content(HTML), layout(CSS) and functional code(javaScript) into separate files so that you can manage and serve them seamlessly from independent sources.

I also recommend dividing your layout work onto three different CSS files each dealing with their own piece of the layout puzzle. This will help ease implementing new features and designs to your website as well as dramatically cut down on the size of the your web page's file size.

this_elements.css

Create a file to manage all common CSS elements like your dynamic buttons and fluid modular round cornered backgrounds. Your design might use a red 'attention' box that floats near content that contains an important tip for your users. You will be able to easily update the look and feel of your site by keeping the code for these commonly used elements in this file. Link to this file separately and switch up the layout files as needed.

this_layout1.css, this_layout2.css, this_layout3.css

Most sites change layout from page to page. Some pages require a two column layout and others might need three. As the layout changes from page to page create a separate CSS file for each unique page format. Things such as column widths, number of columns, text-alignment, and margins should be included here. You will cut down on your CSS load times by toggling between files that contain relevant code for a page rather than having one CSS file bringing along the unnecessary layout info for all your pages.

this_style.css

This file is where all the pretty is loaded from. Create this CSS file to control the font attributes of text elements and background color/images. This file controls the branding of your site and can be a powerful tool as a developer when you need to reuse some old brilliant code or template sites out. You can even make your this_elements.css style-dependent on this file allowing a few lines of code to control all your design updating and template shifting needs.

enjoy.

Simple Web Interface Design

2008-02-06T22:54:00.000-08:00

Just about every project I have worked on has lead to the same challenge; Create a product that looks simple to use yet is actually simple to use. Where do you draw the line? You need to design a compelling webpage with a clear call to action yet you need to entice potential clickers with what lies beneath the click. It's always a battle between breadth vs. depth. When it comes to information architecture you have to find the balance between bringing more of the site navigation to the top where it's easily accessed and possibly overwhelming, or exposing fewer navigational links at the top and leading the user through a deeper navigational system.

Unique Actions vs. Repeated Actions.

Help Users achieve Goals. This is where user testing and research are important. Figure out what functionalities need multiple access points by asking and observing the user (and your business model). Learn what tasks they need to accomplish more often than others and place access points to these tasks on every page of your site. For less frequent tasks place links on relevant pages and keep in mind the current task flow and keep the navigation consistent.

The goal isn't to design a site that looks simple.

The goal is to create a site that is simple to use. Now that you have determined your repeated actions from your unique actions visually separate these access points. Generally, repeated actions get placed into some sort of header or global navigation device. Unique actions require a more creative treatment and are weaved into the design yet are unique to the goal of that page. Minimize the learning curve associate with your interface by sticking with best practices and user test the heck out of them. I can't really stress enough the value of user testing. Sit down with a few people and watch them interact with your design. Set some clear goals for the user to achieve and observe someone trying to achieve them. It will be eye opening.

Iteration Design

Take note of which unique tasks need to be upgraded to 'repeated' status and remove anything that is confusing the goal you want the user to complete. As you test iterations of your design be sure to bring in new subjects to test. You will learn more about your design's learning curve from fresh users. Tweak things like link wording and the way the site reacts to a click. Use less wordy links and buttons and give the user immediate feedback once a click takes place. You might learn that re-wording a few things will lead to a smoother task flow, a cleaner design, and a happy user who comes back to your site.

User-Centered Design Thoughts

2008-02-05T22:36:00.000-08:00

Try to get along with everybody.

Failing to understand 23% of your user pool can cost you 23% of your compensation. I’m not saying you have to hang out with everyone in your user pool, but just give him or her a chance. Hell, you might even make a few friends. In a successful design love triangle, you have your user, your product and your problem. You’ll need two pieces of that puzzle to figure out the third, and usually you’ll just start out with the problem. That means you need to get close to that user.

Have Empathy for your Users.

Most audiences come with similar experiences. Good designers will play on that. Lets say you’re designing a graphic interface for farming equipment. I would guess that most of them do not use the Internet all day, nor will they have a lot of experience with any popular OS (statement not researched). This will free you from many of the conventional navigational tools that many GUI designers commonly use. Scrollbars, shaded beveled buttons, and X close-boxes won’t seem so obvious to this target audience. This can be a lot of fun...

You will get to start from scratch but you will also need to lead your user a bit. Figure out how they respond to Interface signals through user testing. You might find yourself using more traditional communication methods such as Green means GO, red means STOP. Most users will have encountered experiences with stoplights so their brains will create and modify the schemas in their memory to adapt to your design.

Schemas work like this...

looks like duck + quacks like duck = myDuck

Now that you have the duck schema stored neatly away in your memory, next time you see a duck you’ll retrieve the duck schema and evaluate your perception of ducks.

looks like duck + quacks like chicken = notMyDuck

When a user experience contains unexpected 'duck' results they have to update their 'duck' model. This is no longer their duck.

Is it a Duck?

The user will need more experience with this duck to handle that question. Nevertheless, every action and response that is broken down, is made up from these schemas. As a designer, get to know your target user. Designing a web application? Create low-fi prototypes on paper and test them out first. Get the problems out of the way before hardcoding your site. Research and play on their past experiences to help them better navigate your products. If your target audience is known to be tech-savvy, feel free to use the conventional methods of navigation I mentioned above. Consistency will also help train and guide your user. Just as an actor will research a role, a designer must do his/her homework to be able to get inside the user’s head.

About Rick Murphy

2008-02-01T01:14:00.000-08:00

Me.

My full name is Patrick Francis Murphy III.
I design from Seattle, WA.

Design.

I am obsessive and compulsive. I stare at beautiful things, and currently am searching for the perfect balance between human touch and commercial value. I believe that the most successful products come from observing people and discovering how they live.

Music.

I listen to music all day. It’s coming from my MacBook Pro. I’m usually glued to it. Metric, Interpol and Au Revoir Simone are my current most played. I find that I’m a little more creative if I’m listening to something good.

Life.

Trial, error, brightness, contrast, and gravity...

This is the First Post

2008-01-31T23:33:00.000-08:00

Time to try to keep track of my design thoughts on this here blog.

Someday I'll have enough interesting thoughts posted on this thing to get a few returning visitors, and maybe some regular traffic as well. Thats when I'll sign up for AdSense and try to make an extra fifty bucks a month by misleading visitors with clever advertising placement.

anyway... just a warning i guess...

stay tuned :)

Whoopi Goldbus

2006-03-16T13:49:00.000-08:00

Whoopi Goldbus

I know, right?

Thanks George Freitag.