Portfolio Attempt

[Psy]

I don't see anything except your name and email address.

[TheMiede]

I don't see anything except your name and email address.

Uh, wut? You don't see my thumbnails of the screenshots?

[Bema]

You're going to make those enlarge-able, right?

Ya, I am debating whether I should:

A) Open a new window with the full size image
B) Change the current window to have just the full size image
C) Create a page with the same layout but instead of having multiple thumbnails, show the full size image and a back button.

I think C is the best option, but what do you think would be best?

Or

D) Use something like Highslide JS. I'm fairly sure Vivi uses it (or a simillar application) for his media on the Chell's Legend site.


I decided it would be quicker for me to have a quick run around in Photoshop rather than type out my feedback in detail, but here are a few (lengthy) accompaning notes:

1. Keeping everything on a single page is a tad frustrating. People have to load all the images in one go & scrolling to specific maps is a tad difficult. If each map had it's own page, things may be easier.

2. You need a Nav bar of some description for the reasons cited above, and in the next point.

3. You need an 'About' page/section. Tell us about you. The guy behind the work is just as important as the work itself.

4. A link to 'Peer Feedback'. Give a link to the thread in which you released your work. That can be here, or elsewhere - wherever. People won't always have the time to try out a map based on screen shots alone. Linking to a thread in which people are commenting on your map is useful in that regard + it'll show how other mappers and gamers judge your work. There's no reason why most of the commentary shouldn't be positive as long as you've released a finished article you're happy with. It'll also give a way for people viewing your portfolio a way of giving direct feedback.

5. Downloadable Portfolio. Have a CV style set up to it, but more colourful. It's just polite really (assuming you're looking to get something back off of the portfolio).

6. 'Concept/2D Work'. That's just a place holder subtitle. That section looked a bit empty with just Mapping and About Me subtitles. Possibly replace with a link to a blog? Something that you update with Work in Progress media?

7. Current Projects - Let us know what you're up to!

8. Map details. Tell us what the map is about etc. Multiplayer? SP? Objective based? Deathmatch? What game is it for? Etc etc...



('Right Click + View Image' for a clearer view.)


Now all that basically looks like a complete re-design, but it's all based off of your original principles. All i've suggested is streamlining the content being displayed on the first page, and expanding the number of pages the site appears to have.

[TheMiede]

Whole shitload of helpful direction.

Thank you so much man. That is an awesome and artistic layout. Awesome crits, I will work on all of that tomorrow. Santa gave me awesome crits for christmas

[SixThree]

I thought this was a no crits server!

[Psy]

I don't see anything except your name and email address.

Uh, wut? You don't see my thumbnails of the screenshots?

Nope. I'm using Firefox by the way.

[ad_hominem]

I don't see anything except your name and email address.

Uh, wut? You don't see my thumbnails of the screenshots?

Nope. I'm using Firefox by the way.

Have you tried scrolling down?

[TheMiede]

I don't see anything except your name and email address.

Uh, wut? You don't see my thumbnails of the screenshots?

Nope. I'm using Firefox by the way.

Hmm, I am using FF 3.0.5. Try checking your block images preferences or something. Do you see the TC_Rubble header?

[Blink]

I'm using latest Firefox and the right column is floating underneath the left column. The left column is too wide the right column has nowhere to go but underneath.

This problem exists in IE6 and 7.

You must be looking at your website on widescreen so that the columns have enough room. Try resizing your browser to 1280x1024 and the most common 1024x768. You'll notice the site breaks.

Make both columns fluid so they can expand with the browser or just set a much smaller container width. You should be supporting 1024x768 as the minimum width these days. It's rubbish but that's how it is.

[Psy]

It seems to work fine now.

[TheMiede]

I'm using latest Firefox and the right column is floating underneath the left column. The left column is too wide the right column has nowhere to go but underneath.

This problem exists in IE6 and 7.

You must be looking at your website on widescreen so that the columns have enough room. Try resizing your browser to 1280x1024 and the most common 1024x768. You'll notice the site breaks.

Make both columns fluid so they can expand with the browser or just set a much smaller container width. You should be supporting 1024x768 as the minimum width these days. It's rubbish but that's how it is.

ugh, ya I am running widescreen. silly me.

As you can tell, I am not a great web developer. How should I go about fixing this. Should I change the width from pixels to percent?

(This is updated code. all i changed was adding a footer that brings you "back to top".)

style.css

Code: Select all

@charset "utf-8";
/* CSS Document */

a:link {color: white;}
a:active {color: white;}
a:visited {color:white;}
a:hover {color: white;}

body {
margin: 0px;
padding: 0px;
background-color:#364F52;
color: white;
font-family:Arial, Helvetica, sans-serif;
}

#rightcol {
padding: 50px;
float: left;
width: 860px;
}

#leftcol {
text-align: right;
float: left;
width: 400px;
border-right-style: dotted;
border-right-width: thin;
border-right-color: white;
}

.post {
vertical-align:top;
background-color: #72878a;
border-color:#FFFFFF;
border-style: solid;
border-width: thin;
width: 820px;
}

.title {
padding: 5px;
background-color: #9cb7ba;
padding-left: 10px;
}

.content {
text-align: center;
}

.footer {
background-color: #9cb7ba;
padding: 5px;
text-align: right;
}

index.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daniel Miede</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="leftcol">
<p><a name="top"></a><img src="images/dmlogo.gif"/></p>
</div>
<div id="rightcol">
<p>
<div class="post">
   <div class="title"><h5>TC_Rubble - Source Engine</h5></div>
   <div class="content">
   <p><img src="images/art/thumbnails/rubble01_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/rubble02_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/rubble03_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/rubble04_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/rubble05_thumbnail_daniel_miede.jpg" /></p>
   </div>
    <div class="footer"><h6><a href="#top"> back to top </a></h6></div>
</div>
</p>
<p>
<div class="post">
   <div class="title"><h5>TC_IwoJima - Source Engine</h5></div>
   <div class="content">
   <p><img src="images/art/thumbnails/iwojima01_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/iwojima02_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/iwojima03_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/iwojima04_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/iwojima05_thumbnail_daniel_miede.jpg" /></p>
    <p><img src="images/art/thumbnails/iwojima06_thumbnail_daniel_miede.jpg" /></p>
   </div>
    <div class="footer"><h6><a href="#top"> back to top </a></h6></div>
</div>
</p>
</div>
</body>
</html>


[Blink]

I would recommend making your main content column a lot thinner, it's 860px wide which is the same as the whole interlopers site!

You don't really need thumbnails that huge to be honest and I also think you could either shrink that left column or get rid of it completely and use the logo as a header, unless of course you are planning to add a navigation in there. But it is a huge waste of space at the moment.

I recommend you install Web Developer toolbar and Firebug for Firefox. The former will give you loads of handy tools (such as resizing the browser) and Firebug let's you inspect the CSS/DOM with ease.

[TheMiede]

K, both installed. Great suggestions. I am going to try to change the site to look like what Bema suggested.

[TheMiede]

Alright, came up with a new design for the content section for my maps. This will be a single column page, much like this site.



I am still trying to figure out where to stick everything in the content box on the left. I am using Bema's image as a reference.