Matt Gibson: Designer Portfolio

Designer Portfolio site for myself, using lightbox technology on the my work page.

as far as I know it all validates and doesn't have any bugs.. so please let me know if there are any problems.

the site design is quite image/bandwidth intensive, but should degrade gracefully if images are turned off.

The code might look a bit ugly as I took all the carriage returns out as it was leaving some horrible random whitespaces in the design

anyway, look forward to hearing what suggestions/opinions people have on the design/code

Thanks in advance

I love it! I have nothing else to say... well ok.. I have more...
I love how easy it is to use. I love your work, I love the design of the site.
You are very talented imo and it was a pleasure to look at your site!
I give it 10 out of 10! I see big things in your future...
P.S. Your photography is amazing!

Yeah it's really good, your work is great too. It's quite dark but that works in this case.

Love it.

Pete.

wow! thanks, wasn't quite expecting such positive feedback.

I've been told elsewhere I need to sort out my apparent fetish for Arial Black, so the i'm currently on the case downloading/buying some new bold style fonts.

My print design is a bit weak on the ground at the moment too so I'm going to build that bit up by doing some free flyer designs for friends who do club night promotions and that kind of thing..

That's a good idea Matt. Your print section was your "least mainstream" section. Not much there that I could relate to but then again, you probably aren't targetting someone like me as your client.

You have such a refreshing attitude. Willing to do free work to increase your portfolio.. setting a strong foundation for your future..

Design looks good, but are you using something to keep the default pointer on the links in the header? It's really disconcerting to move your mouse over what you assume to be a link and the cursor doesn't change to the little hand. It does that in Safari, anyway.

• You've also got some serious problems on the work page in Safari. The rows of thumbnails don't wrap properly, causing me to have to scroll horizontally quite a ways. Should be a simple fix, anyway.
• You're using the <br /> tag wrong. Use <p> instead and set up margins in CSS.
• Get that image out of the <h1> and put text in there!
• Also, stay away from inline JavaScript as much as you can: Unobtrusive JavaScript
• Eek, looking more closely your header is constructed horribly. Use background images and hidden text for the navigation. Use background images for anything having to do with your site's layout (all the images in the header).
• Use the image-replacement method on all your headers.

Design: 5 out of 5
Code: 3 out of 5
Functionality: 3 out of 5
Accessibility: 0.5 out of 5
SEO: 2 out of 5

thanks for your input ryan as always

i have no idea why the mouse pointer is doing that in safari - http://www.matt-gibson.co.uk/css/screen.css is the css file if you want to look and find something really obviously wrong

i'm trying to use iCapture so I can see myself the things you've mentioned in safari but I'm having no luck at the moment, but i'm guessing the work page problem may have been because I was using margin: auto on the unordered lists. I've now manually set the margins along with the clearfix for IEMac so maybe it will work now? please let me know if it does..

I've fixed the poor use of <br/> tags on the about me page now.

How would I go about setting mutiple images within a div as background images?

I'm right now going through trying to implement the image replacement method for all my headers too.

You can only use one background image per element, if you wat more than one you'll have to add some extra markup. Empty divs will do the trick. It's not ideal but a bit of extra markup for some nice bg images is worth it to me.

Pete.

I thought that would be the case. Thanks Pete

As for the image replacement method? how accessible is it? would I not be better off leaving the images there in headers with alt tags as opposed to having them as background images and then putting text in with display: none properties? As I've read some articles saying that a lot of screen readers can't read text with display property set to none?

Don't use display none. Either use text-indent: 9999px; or use the gilder/levin method which is slightly more complex but probably the best bet. Go here to check out many different image replacement techniques.

Pete.

ah nice one, makes it all a lot clearer now!

The blue text on the black is strainful on the eyes. The good thing is that you are only using it for links so as not to completely blind your viewer, but I just don't like that shade of blue.
'Interactive Media Design' BA (Hons) Is the one I am referring too.. If you toned it down a bit (and made it match the header) I think that would fix the abruptness of it.

Also your site is not Valid XHTML as your link says it is... Here's the error:

Code: Select all

Error Line 36 column 3: end tag for element "p" which is not open.
</p>

This was found on your homepage so go fix that quickly and you can be valid again .

Ohh sorry, I forgot to tell you that I am being picky because I like the rest of the site but these are 2 small issues that could make it even better. Good stuff, ohh and you might consider dropping some of the things you have done in maya. You have some REALLY nice looking things and some REALLY unfinished looking things. So at least put WIP (Work In Progress) on them to let your viewers know that they aren't done yet.

thanks noobsmith, fixed that now..

i've altered the blue now from #0066cc to #336699 so let me know if that is less of a strain on your screen to view.

re. the maya stuff. I know the ones you are talking about and I did put that they were only prototypes, but guess I could put "Work In Progress" too..

ps. thanks for the critique everyone, I like to think every time I do one of these I learn a little bit more because of the feedback and become a bit better at it.

I like the links much better

I really like your site, very easy to use and your work is very impressive!

Just looking through your portfolio and some of your print stuff is stunning. Really like the georges cross thing.

One thing I just noticed was your contact form. I am against styling a form so heavily, I believe at forms should at least feel familiar to the user. Try making the background colour of the text input and textarea a different colour from the main background, it may help. Even if you leave the text inputs and text area as they are, I would have a rethink about the button. It just doesn't look like a submit buttom, it would seem more familiar if it had a border of some kind. That is my only remaining problem, however, cos you've got a brilliant site there.

Pete.

thanks cbrams9..

and re: the form styling. I see what you mean, the button might be a little too styled.. I'll get onto sorting that out..

and as for the header code, i'll be doing that in the next few days, i'll put up here when I have, would be really grateful if you more experienced coders can check it out for me.