Opinion on my website

jonnyj

Hi all,

Being unemployed for the last few months I decided to build my own website. So not knowing anything I set about it using dreamweaver. Well im quite pleased with what I have content wise.

So what I would like your opinions on is how the layout looks, Ive quite a large screen and I tried to design it so it suits smaller resolutions but im not sure. Are the colors ok, does the navigator menu bar work ok.

Also are the photos too big, I have them at 300 dpi

does the enlarger in the projects page work in your browers and is it ok for smaller screens

and finally the flash part of the portfolio page it sometimes showes a flash image and error on mine but you go into it again and it works fine. (do I need to put a patch file on the server for it to work and where do i get one)

the website is www.jonathanjmurphy.com

thanks for any advice,
J

henryporter

Hi Jonathan,

Well done on the website. A few comments:

- I'd look at reducing the overall width of the pages to about 800px and filling any slack either side with a background - I'm using a 13" laptop and the page is scrollable horizontally as well as vertically, which is not a nice feature.
- Not gone on the cream/yellow background.
- Not gone either on the way the projects links cover up the material behind.
- I really like the portfolio page - its just hard to read.
- I don't think you need the 'enter' button on the initial page - clicking your name should be fairly intuitive for most people.

Really good effort though because there's a lot of content nicely handled. Just wait til you get going with PHP/Javsascript and so on!

jonnyj

thanks henry,
ya the pages are currently 1024, I did some googling and thats what I came up with, I will have a go at changing it, to 800px, will the space at the sides fill out on larger screens like boards for instance.
I will get rid of the cream yellow,
the portfolio page isnt really meant to be read, its more visual (i should actually have a link to the pdf there i will do that thanks).
on the index page yep I can get rid of the enter button.


cool thanks henry, that will keep me busy for a few days.

p

Fair play for putting together a website and teaching yourself.

However, honestly, the visual design is very bad. I would never hire an architect if that was their site. Now you're over the technical hurdles, spend a good bit more time working on the layout, reducing clutter and keeping it simple.

Also, ditch the animation on the first screen and just jump directly to the content.

Architecture firms are known for amazing sites, so it's difficult because you're kind of competing with them, so it's a tough space.

site designer

For first site its not bad, but I wouldnt use it in any professional sense, its not good enough.

design wise, you should be working on your photoshop skills, always design your entire site in photoshop. Start a new PSD 1300 * 2000 pixels and go crazy, using a different layer for every element.

As for image formats only ever use jpg or png, jpg for anything photographic and png for everthing else. never rezize an image using html.

once you have something professional looking, you can attempt the conversion to HTML/CSS, theres plenty of documentation online so get to understand the code.

what I will say, if you just want to whip something out without any of that hassle, but still want a clean generic site you could use commercially. look into wordpress and different templates. where your knowledge will fail is if you need to customize any aspect.

Good luck with it but its definitely a learning curve, and knowing the code wont prevent you from making ugly sites, so design is everything. If you couldnt write a line of code but could produce beautiful layered mockup sites in photoshop you could make a good living.

ocallagh

Fair play on the site!

The background image is quite good as an image, but always: usability first, design second. I can't read some of the text on the home page because the background image is too detailed. It is possible to have a detailed background image, but it can be difficult to pull it off. Have a look here for some inspiration http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

I know you're using Dreamweaver, but if you want to give website design a good go you'll need to get dirty and look at some code.

Increase your screen resolution to 1600 or higher and then check out some of your content pages. Reduce the size of your browser window and see how the elements re-align themselves as the window gets smaller. This needs to be improved. You need to use DIV tags to position and group elements. Do a search for '2 column fixed width template' or '2 column fluid width template' and have a look how it can be done. If you are going with a fixed width, I think 1024 is fine nowadays. A fluid width (one that changes depending on the users screen and browser size) is a lot trickier, for your first site I'd go with a fixed width.

good luck with it.

Liam Byrne

jonnyj wrote: »

thanks henry,
ya the pages are currently 1024, I did some googling and thats what I came up with, I will have a go at changing it, to 800px

Remember to allow for scroll bars! 1024 screen is approx 970 screen space, and similarly 800 screen is approx 740

tricky D

Well done on your site, however I am seeing a lot of issues with many of the site's elements.

I hope my criticisms will be viewed constructively. As p mentions, you need a tip top site to be viewed with any credibility in this field.

From the top...

First thing, lose the splash page (welcome one), users simply don't like them and they have no value.

Homepage:
Your logo has white jagged bits around the text. This is due to you making the logo on white and then putting it over a different colour. Make it over the page's background colour in PhotoShop.

Your homepage text is in a css frame. No need for that frame.

The text there is all 'I' an 'me' and never mentions what I can do for you, the prospective client/employer/whatever other market you are targetting eg. BER with a Sales orientation.

The background image is too wide and needs treatment to blend in. I'd make it something like 900 wide and blur the left and right edges to a blue colour which is also the page background colour. The people in the background image are poor quality unlike the sharp gallery parts. The fella on the left is a bit transparent.

About:
The copy is in the 3rd person. It could benefit from having links to Porfolio items and awards. It reads a bit like a resumé so think about merging About and Resumé navigation-wise.

Projects:
Could be merged with Porfolio as they seem similar.

The Projects text in the lhs nav doesn't link anywhere. Make it a link to a page with a projects listing with a brief description of each one.

The pop ups layout from the thumbnails are appearing a bit low on the screen and some of them pop under the lhs nav. Have them consistenetly pop up in the main content area.

The Howard Gardens pics are too blurred.

The Graphic Design has the text appearing too low on the page. Actually your advert.gif isn't importing in FireFox probably because you are using an animated gif in a background, FF doesn't like that practice. Don't use css backgrounds for this, just use a regular image tag. Same for other graphics like the images on the Howard Gardens and quite a few other pages are also backgrounds when they should use a regular html img tag. The advert.gif is also 2.4MB which is a bit too big for just 4 image frames. Think about getting a jQuery animation widget instead.

Mahon Fox has under construction but there is content below which could easily be missed.

Portfolio:
Flash doesn't do anything for me. Unless you have a good reason to use Flash, avoid it and try to use something like a jQuery solution instead.

Current Work:
No content so remove until you do have some.

Contact:
No address.

The text is in a graphic when it should be just text. (General rule use text for text unless there's a good reason for having it in a graphic)

The Send Feedback button is overlaid with the sitewizard graphic.

Do you need the captcha? Unless or until your form gets a lot of spam, omit this.

General stuff:
Add an Awards link to the lhs nav pointing to its own page.

Your 404 page is missing. See http://www.jonathanjmurphy.com/mispelledthing. Put a sitemap there.

Your images are 300dpi. That's suited to print, not to screen which only needs 72dpi.

To reiterate what ocallagh says, DreamWeaver isn't good for layouts and your screen size is causing problems. Resize your browser window to something which reflects regular sizes as opposed to a CAD user's size. 1024x768 is one good size. Use something like www.spadixbd.com/freetools/jruler.htm to get the size right and again don't forget the scroll bar width.

You also need to up your SEO game with proper headings <h1> etc., alts for images, decent page titles (text like wit isn't descriptive), keywords relevant to the industry and the locality (at a glance you seem to have Cardiff mentioned more than Ireland). Download and read this: http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf

hope that helps

jonnyj

Thanks to you all,

I will take everything on board,

P the site is meant to be more about promoting myself to employers Im not trying to get my own work thats the reason why I left out a services section. Most architects have budgets for their websites and so use flash im on a shoestring. I will work more on the layouts and will try reduce the clutter, Thanks P

Site designer - yep I will have a go at setting it up in photoshop, thanks for your input

Occalagh and Liam, thanks to you both.

Tricky D - a very concise report, I like it thanks, ya the people in the home page image are terrible but they came with the rendering package. I know they should be pototshoped in. I will go through it all like a check list.

Thanks all, very much appreciated

Liam Byrne

jonnyj wrote: »

Most architects have budgets for their websites and so use flash im on a shoestring.

If they use Flash they are idiots. If you put the effort into your own site you can achieve far more with a proper HTML site with something like jQuery and have a far better site than theirs in terms of usability, speed, cross-platform (Flash doesn't work on iPhone or iPad) and search-engine response (you'll be found, they won't)

Chet Zar

+1 on losing the 'enter' page as it's just another superfluous step for the user. Would also rethink the colour scheme as it looks a bit washed out. Logo needs a lot of work - I'd scrap and come up with another. Better to have top navigation for the different sections rather than along the left-hand side.

Good luck with it!