Looking for feedback on site usability/portfolio

www.ryanklinger.com

Just finished my site with hopes of marketing myself more professionally for a full time position or freelance work. I’m graduating in a month so I really want it to sell. I’ve been quite successful in acquiring freelance, but no job just yet. I’m looking for feedback in general on the site’s usability or on my work/portfolio.

Thanks to anyone who takes the time to check it out. Hope you enjoy.

Ryan

Hey Ryan,

Just a couple of quick things… The overall layout of the website is easy to use.

I would get rid of the “home” button on most of your pages and just have a link to the home page attached to your header/logo.

I would also have a look at the tags for the images in your main menus (two sides to the story) etc… it has a broken link when clicked on.

One more thing… one of your projects has a photoshopped hand that is grabbing your tech light. You should probably have another go at cutting out the hand, its a little distracting.

Sorry to focus on the negatives, but everyone here gave me some good constructive critcisim/beta testing when I was developing my folio site and so I hope it helps!

I did enjoy looking at the site!

Hi Ryan,

Site is good - dead simple to navigate, good use of the blue for highlighting bits. The header/footer bars look great.

Layout seems a bit funky though, not sure if it is meant to look that way or not?
Content (picture of brain, blocks of text etc.) seems to be way below the menu, could be intentional but seems odd. Not really aligned to anything… personal preference, but I would put the content to the right of the menu, top aligned.
The top right part of the page (just below you contact info) is quite often left blank as a result.

May not be a problem, but occured to me as something to point out.

Other than that, site layout/usability is just fine.

Matt

thanks for the feedback…

for some reason when viewing in Internet explorer it places the content of the site below the navigation bar when it really goes to the right of the navigation. When I view it in firefox or chrome it seems to display properly. If anyone has any suggestions for fixing that, it would be great!

ill get to fixing that hand asap, and try to link the header to the homepage.

thanks again!

Ryan,

the reason the content jumps below the navi div in IE is because it is floated left and the width:940px style of the containing “content” div is cascading down to gNavi making it 940px wide. (firefox and chrome correctly float the content and not the container box, IE floats the whole box regardless of the content within)

The easy way to fix this would just use a table. Otherwise I’d make the the menu and container divs display as inline-blocks with defined widths (20% and 80% for example)

bennybtl,

I struggled greatly to get the coding where it is now, do you have any advice/places to look for a reference in regards to the easiest way to make that happen?

Thanks

Ryan

Ryan,

Don’t be discouraged, CSS layouts can be really frustrating. I took a quick look at the code and it’s pretty simple but you have a few different issues driving your layout problems. One thing you may want to consider is using a simple reset css sheet. I’m attaching the reset stylesheet from the thematic framework for wordpress. It’s pretty simple and good. This is used because all browsers have default values for markup, and they are not all the same. If IE says paragraphs have 30px of padding and firefox says 15px, unless you specify, it’ll be different in those two browsers.:

/* -------------------------------------------------------------- 
  
   Reset default browser CSS.
   
   Based on work by Eric Meyer:
   http://meyerweb.com/eric/tools/css/reset/index.html
   
-------------------------------------------------------------- */

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
    background:#fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a img { border: none; }




I think that if you look at this tutorial, it should get you on the right path.

The only difference is you have a left navigation column, instead of a right (just swap the floats or the widths)

Last, a tool I use to check ie6/ie7 display is netrender: Moved

Good Luck!

Was hoping for more feedback everyone! Comments, suggestions, anything…?