Single-Page Portfolio Design

[Leventhan]

Heya everyone, I've started designing my own portfolio site and I'm in need of feedback of what should be improved etc.
This is possibly the farthest I've been in designing a website - mostly it's only been mockups and such.

The site will be a single-page site, and will be using a jQuery Easy Slider for the portfolio section (the white section) of the site.
Hence the arrows. I'm also planning to use some jQuery for the section above the white section, to make it expand accordingly with different amounts of text - so it retains its margin. Well, I guess that's pretty much it.

 

[Dave1975]

Hi Leventhan,

I would recommend getting your logo design/identity designed first as I personally find website designs and layouts far easier once you have the logo to work from. In terms of overall style, colour scheme and general 'identity' of the site you'll find inspiration and direction working from the logo

HTH
Greg

 

[Kevin]

A zoom/full view button on your work would be appropriate. Get some sort of visual interest on your content box [The most challenging....]. The entire layout is kind of plain and bland for the moment, so I think you should put in some sort of logo (it doesn't even have to be yours) to see what it would actually look like in the end.

 

[tbwcf]

I think single page sites can be pretty cool but jazajay said something the other say on a post about them being a nightmare for SEO/google... might be worth bearing that in mind.

 

[Jazajay]

Well the thing is a 1 page can only rank for so many terms, these tend to be quite few.
For example my home page should only rank for Mysitename first and foremost, and then have weight towards parents, parents-to-be and parents to be, I know I wouldn't have a great chance at making serious ground in entrenched keywords due to a split in the equity and the words and content within the page.

The other thing is they have to be thought out very carefully due to bottle necks in the http responses, and a slowness to load the top images that are seen first.

Accessibility can as well be a bit of a nightmare as well as external linking, I wouldn't link to a site that had the content I wanted half way down the page unless I could use a close id to the content, then it would be a jump link.

However if the site uses a lot of JS to hide and show areas on click this is then pointless again losing my link.

Now that doesn't mean 1 page sites cant be done.
How I would do it is create separate pages for the whole site, then bring in Ajax and bring in the files onclick and set the links to return false. That way all the search engines can follow the links and give you more ranking power, accessibility is again much easier, and if you put permanent links in for people to link back then they can copy and paste the link directly to the correct individual page.

That is how I would do it TBH.

Jaz

 

[Leventhan]

@Greg
Hm, I'll get on to it then. I find that you yourself are your own worst client. It's much harder to make a pleasing personal logo.

@Onartis
I'll work on it, thanks for the suggestions.

@Jazajay
Hm, your post certainly gets me thinking whether I should or shouldn't use this single-page site.

I'm not quite familiar with the onclick method you've talked about, mind explaining it a bit? (Still rusty in jQuery)

 

[Jazajay]

I don't use JQuery I write the code myself so err.... not sure how to pull it off via that.
How I would do it though would be something like ~

HTML
<a href="path/to/same/file/but/html/hard/coded.html" onclick="document.getElementById('main').innerHTML='';call('path/to/a/separate/file/containing/just/the/main/contents/of/this/link.html','main (id to load the new page into don't add this bracketed section)','','Loading the page, please wait....');return false";>Some link</a>

<div id="main">
Main guts of you page excluding your navigation, footer and header.
</div>

Now to use it you will need a AJAX script, lucky I have written one and here it is ~
Ajax Script, the code above calls that function.

Then when the link is pressed the contents of the main div id are "deleted" and in it goes the content from the file you just referenced in, the return false then tells the browser not to follow the link, but if JavaScript is turned off, or it is a search engines spider they will still follow it to the single page that you have also created.

Now linking wise what you want to do is put a permanent link in, so if someone one wants to link back they can copy and paste the URL to the dedicated page on it, that way 9 times out of 10 when a user hits your site they will just get the home page that appears to be a single page, but in fact is just your home page using Ajax.

Any problems let me know.

Jaz

Key:
Purple ~ XHTML