Portfolio site complete (mostly)

OK - so I polished off a fair bit yesterday on the portfolio site:

• Content complete
• new footers on all pages with functioning links
• breadcrumb navigation on all pages with functioning links
• checked and passed W3C compliance (XHTML and CSS) on all pages
• moved css files on server to one folder and now all pages point to only two files

There's still a bit that needs to be done:

• I'm not happy with the navigation, esp the footer. Need to sort that out (incl move the email underneath the main links (and make it look like an email link!))
• Will make sense once I do a content and link audit plus map site structure. I know I should have started with this, but I needed to get something up ASAP for the job hunt, so there are files all over the shop (time for a tidy!)
• Cross browser testing. Just launched it again in IE6 here at work and slightly horrified.
• Link up larger versions of a couple of the Zauron pics
• Refine a bunch of stuff - content, make it only one css file for whole site, get rid of multiple copies of images and therefore links.
• Down the track - redesign the CSS. Make it prettier :-) (after I'm done with the LIF redesign)

Cross browser testing tools

So, although I checked out the updated portfolio site on Safari last night (and have been using FF during the build), I just loaded it in my lovely work IE6 browser and was horrified. It's not too bad, but crap enough to annoy the hell out of me.

I've decided to check out online cross browser testing tools. I found this useful reference: http://designm.ag/resources/cross-browser-testing/

I think Browsershots was the free online tool I tried to use before - tried being the operative word. The time lag was so massive I think it finally dumped my request. I've just signed up for the basic account with Litmus, but so far having very little joy. The test page keeps bugging out and crashing. I'll give it a go once I get home on the Mac but I'm not holding my breath...

Revised portfolio site up - but still 'under construction' arrgghh!

I worked my backside off yesterday between jobs to finish off as much as possible of the portfolio site as I could. I was really hoping to have it finalised and uploaded last night, but didn't quite get there.

The biggest time thief at the moment (now that I've worked out the style. For now.) is writing the content on the fly. I'm having to write up new short blurbs again for each project - and trying to keep it concise is the biggest challenge!

I had planned to hold off uploading the new look until it was complete, but was sitting on such a big change I couldn't wait. It's all done, except half of the portfolio page and the missing content can be found in the academic portfolio. I changed the blurb at the top of the portfolio page to reflect that. What I really wanted to do was stick one of those horrible 'under construction' gifs there, like you used to see in the 90s all the time. Maybe it would be acceptable again - is it long enough ago to have evolved to retro yet?

Anyway, even as is, I like the new stuff better than the old stuff. I thought I might be able to get away with it as I don't imagine it's a high traffic site at the moment. At least I don't think so - I really should check the analytics stats...

I still need to tweak a list of things and make sure it's W3C compliant etc - I'm hoping I'll be finished with that this evening so I can get started working on the LIF redesign (and start the job hunt in earnest again!).

Tables and CSS

Having fun on a rainy day playing with table formatting for the portfolio site.

As always, the W3schools site is invaluable (refreshing my memory re what you can do with CSS) but having most fun colouring in with HTML - handy colour chart http://html-color-codes.com/

Updating thejct.net website

So I can get back onto actively looking for work, i thought I'd better prioritise fixing the portfolio site. I thought I'd adapt the academic portfolio site style and apply something like it to the main thejct.net homepage. I attempted to set it up with a 960px width and line up divs along the bottom with links to the different portfolios, as well as my sites/blogs. Suddenly things started going pear shaped. The link divs all hung down past the white background but seemed to be actually in the body wrap div (according to Firebug and FF Web Dev), plus the footer was the correct distance below. I just spent this afternoon fiddling with everything and I couldn't work out why it was doing it.

Finally found this article useful : Barelyfitz Designs' Learn CSS Positioning in 10 steps

It turns out the position: relative main div and the float: left child divs weren't playing well together. For the academic portfolio I had the divs wrapped by other divs with clear: both, but this didn't seem to work for the main page, so I created an empty new div after the link divs and had it clear: both, which seems to have solved the problem...

Thoughts on CSS for LIF2

OK, good feedback from the client re the mock-ups - she's even going to check out her picture stash to see if there's anything useful, which will save me a mountain of time sourcing stuff/taking pictures!

Anyway, just thinking about how to start the build. I started work in Gimp on the header bar/logo yesterday, but found the 800px width quite restrictive and small. Just did a quick search re idea on best practice standard sizes - started with the Yahoo Pattern library and noticed their grid suggestions mentioned 750px and 950px, but no 800px. I reckon thinking may have evolved since I last looked into this... A quick search on the net popped up these articles that I'd like to go back and review this weekend:
960 grid system (http://960.gs/)
Which CSS grid framework to use - article by Net tus+ (http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/)

I also figure I proved that I can build sites from scratch with all of my uni projects, so to save myself some time, I'm going to not reinvent the wheel and check out trying to use some sort of CSS generator/grid builder. I figure I should now be able to tweak whatever they create to suit my needs. This list looks promising:
15 Extremely useful CSS grid layout generators (http://www.webdesignbooth.com/15-extremely-useful-css-grid-layout-generator-for-web-designers/)

But for now...it's beer o'clock!

Launch into fitness Mark II

OK, in order to improve the look of my portfolio, as well as incorporate a bunch of review requests from the client, I'm giving Launch into Fitness a makeover, to hopefully make it less 90's style and more Web 2.0

I've reviewed the content and created a slightly different site structure - loosing the 'useful info' page, reassigning the home page info and shifting the privacy policy onto it's own page. I have very roughly mocked up the core pages in Powerpoint to show what I have in mind. I'm going to stick with an 800x600 px format and try where possible to keep the content from having to be scrolled. The colours aren't quite bang on, as the transparencies in Powerpoint didn't translate well...