Michael Hartmayer - Portfolio » Web Design

Working on New Portfolio Theme!

Michael Hartmayer — Fri, 04 Dec 2009 23:14:06 +0000

Working on a new theme for my Portfolio! The theme I’m currently using is just something I grabbed off some site, to get my portfolio up and running. Now that I have time to rework it, I’m putting a little extra time and effort into it. So far my process has been to create a wire frame of the elements, and markup some basic functionality (I created an asset list document to work from, before creating the wires). This will make designing a whole lot easier and permit me to only have to worry about the “pretty factor”, since I’ve already mapped out my functionality and flow.

Check out my progress:

Wireframes (Layout):

Wireframe (Layout + Navigation Example):

Designing the Background:

( I’ve already got grid lines in place to make sure everything will work with 960px. width )

More Background Work + Some Layout:

Trying to find a good way to present the navigation:

Started Filling in the Content UI:

Continued:

Share and Enjoy:

IE6 / IE7 jQuery Fix: Anchor Image Clickable Area

Michael Hartmayer — Fri, 25 Sep 2009 18:45:31 +0000

IE6 and IE7 both experience a problem in which images inside of block elements inside of anchors lose their click ability. Here’s an example:

 href="rss-icon.png">
	 style="display:block; width:100px; height:100px;">
		 src="someImage.png" />
	>
>

Every area of the link remains click-able except for the surface consumed by someImage.png. (Note, this problem will not show in IE8, or FF)

Here’s a very small jQuery plugin I wrote to fix this particular issue.

(function($){
	$.fn.fixClick = function() {
		return this.each(function(){
			$(this)
				.css({cursor:'pointer'})
				.click(function(){
					window.location.href = $(this).attr('href'); 
				});
		});
	}
})(jQuery);

Simply select your target element(s) and use this plugin to make the entire anchor click-able again. Here’s an example:

$(document).ready(function(){
   $('a').fixClick();
});

Share and Enjoy:

DoodleRagnarok CP Update

Michael Hartmayer — Mon, 25 May 2009 18:23:40 +0000

Almost done adding all the functionality to the CP. My process for this project has been pretty fun. Something like this:

1. Layout the different pieces of information I want to show

2. Style them

3. Make them dynamic

I usually like to plan a lot before I tackle big projects like this, but I just couldn’t resist. Having too much fun just winging it! Guess that’s the advantage to working on your own projects. They get to be as fun as you want them to be! Here’s a screenshot:

Share and Enjoy:

Update to NoMessenger

Michael Hartmayer — Thu, 21 May 2009 20:23:10 +0000

More minor tweaks and changes:

Share and Enjoy:

New Doodle Design

Michael Hartmayer — Tue, 19 May 2009 05:14:19 +0000

New doodle design in progress:

Share and Enjoy:

Evolution of Design

Michael Hartmayer — Wed, 13 May 2009 00:58:14 +0000

So, this is the project I’ve been playing with. As you can see it’s slowly shaping itself into the application I want it to be. Still fiddeling with the UI for that chat.

Check out the progression:

Menu’s I’m working on:

Share and Enjoy: