Fonts again...

Typography is one of those things that the more I learn about it, the more I realise how little I actually know about it!

So I was reading a Six Revisions article on fonts in animation (Fundamental Typography Guidelines for Motion Designers) which led me to think more re fonts and the screen, which took me to reading their article on fonts and web design 'A basic look at typography in web design'.

Although in my past readings I'd discovered things like the difference between serif and sans serif, kearning, web safe fonts etc, I'd never really considered why you would pick one font sizing method in your CSS over another. I assumed it was just a personal preference thing and I had no idea there are actually quite a range of options! I'd inherited % sizing after seeing it employed by other people but usually stuck to pt myself as I was familiar with it, having used it in all of the word processing type programs I've used. It turns out this was a FAIL! Only the other day, in my cross browser tweaking trials and tribulations, I was cursing IE for the annoying way it was mucking about with my font sizes - what looked good on FF/Chrome/Safari zoomed right out in IE. Now I discover, it was a case of user error and I've been using the incorrect sizing method!

So it turns out pt is a unit of print measurement (which is why it's used in word processing programs, as the stuff produced by them is often (and used to be always) printed). Each browser treats pt differently, so I should have expected to encounter the issues I did!

Percentages are excellent to use - not only will proportions between font remain consistent across browsers (so you should in theory achieve the same effect in all cases), it also allows you to retain the design you intend even if the user has changed the browser font settings. Good design practice.

LIF2 pretty much there...

So, I haven't felt very chatty over the last week but that doesn't mean I haven't been a busy bee...

In and around busy work days, networking drinks, job hunting, barefoot running, 6am yoga classes and accidentally discovering a love of smoting in Age of Empires II, I have pretty much finished off LIF2. I tried to address the SEO concepts covered in my last blog post by adding in the non-repetitive key words & meaningful meta and title tags, I got rid of the extra old versions of the site floating around out there (except for the prototype site that I built for my uni assignment which is part of my academic portfolio...). I also set up a subdomain for the client so we can move the blogger-hosted blog over to the website (just waiting for the client to redirect the blogger site before I add in the link to the nav bar), hopefully all of which will giving it a greater hit rate and be better spotted by search engines...

I've also been cross browser testing and tweaking. It now looks good in Safari 4, Firefox 3.6, Chrome and IE 7 & 8. I chose not to cover IE6 - I know a massive proportion of peeps might still be using it, but they aren't most of the site's visitors (based on Google Analytics) and they must be starting to get used to things looking a bit odd in it these days anyway, now that so many major sites are no longer supporting it. (note: I'm cringing as I type this - the OCD part of me doesn't like such slack control over how people might see my work. It actually doesn't look bad at all in IE6 - there's a margin out here or there but nothing horrendous. Give it a week and I bet I can't help myself revisit this...)

The biggest hassle I had was trying to get things to work in IE7. I know I've cursed IE in previous posts (and trust me, I was doing so again prolifically in this current tweak job) but MS have added back a few brownie points on my kudos score board by including the compatibility view in IE8 (not to mention the built in dev tools - not as good as FF's but a handy inclusion!). It was great having to not try to install the two on the one machine, and just flick between them as I tweaked (as I'm still having zero joy with free cross browser test websites).

In the past I've built a separate IE style sheet but I decided this time to just add in what I imagined would be a couple of small hacks, based on the fact IE8 already looked fine. I employed the * CSS hack described in a very handy Nettus tutorial to target IE7.

I thought it was only going to be a matter of adjusting a few margins/padding/width values here and there, but it turned out to be a good chunk of a day just trying to figure out what the hell was throwing everything out. As it turned out, I discovered IE7 doesn't play well with floating objects (and doesn't read clear:both) - particularly when there are two floats on opposite sides of a div, which I had used in a couple of spots, including the header div. Much trawling of the internet didn't bring me much joy re providing a quick solution - among many things I tried shifting the padding to the parent element, removed floats and tried to have the divs display inline etc (I can't even recall everything I tried last week - I think I've blocked it all out). Anyway, I ended up finding this article that suggested absolute positioning as a potential solution to the problem. I was a bit wary of trying this - I'm not a fan of commitment at the best of times and I don't like the idea of something stuck in an exact spot - which I thought might go horribly wrong in the wrong browser/window size etc. I'd tried everything else so I gave it a go - well, I typed in *position: absolute, and gave the div a width, and it just sprung into place! I didn't actually have to give it coordinates. After that it was just a matter of a few padding adjustments and tweaks to font sizes, and the site was good to go in IE7!

So that's pretty much it for LIF2 (or will be once the blog has transferred over and the site goes live). I'm still stalling re launching into Flash by revisiting the site and tweaking here or there. Which I need to stop doing. Maybe I can build the site a Flash banner...

SEO considerations for LIF2

This is something I haven't been concentrating on and I wish I had thought of sooner - it might have changed my approach to things slightly...

So I was just reading Six revisions' 9 ways to improve the SEO of every website you design (who doesn't like a nice short checklist!) and it gave me a bit of food for thought. Looking at LIF2 - have I addressed these?

1. Add a blog
Yes, I have had Sue create a blog and I've linked it to the site, but I haven't actually made it part of the site...I might look at hosting the blog with the site, I'm sure Sue must have a subdomain included in her hosting plan... now I'll have to incorporate it into the navigation bar and maybe style the blog?

2. Add Google analytics to each page
Done

3. Reduce code bloat
The new site is certainly an improvement on the old site

4. Make each page unique
There is a bunch of repeated contact info on each page, but what I'm more worried about is all of the old trail versions of the site out there with the free hosting cos that I haven't bothered to delete - all with basically the same content. I just deleted a bunch of them, which should hopefully help. Once I replace the old site and remove the draft version from thejct.net, that should also help with that...

5. Use meta description tags
I thought these were useless to some extent i.e. search engines barely paid attention to them after designers just loaded them with all manner of words in the early days. I might revisit these and punch a few words in...

6. Remove repetitive wording from the website
The contact info, motto and the header is repeated across all pages. Hopefully the rest of the content is different enough to combat this...

7. Add footer links to every page
Done

8. Create a separate web page for each keyword or keyword phrase
Done, pretty much. I've at least got 'personal training' in there...

9. Use keyword rich title tags on each page
I might need to reconsider the ones I've used...


So there are a couple of extra things to add to the to do list!

css3 gradients in different browsers + buttony buttons

Came across this today

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

I've been exploring gradients in the current site redesign project (particularly when building buttons. For me, a gradient is like a text underline, it says 'link' or 'click me'...). Anyhoo, I hadn't considered you could possibly achieve this just using code! I really need to take a moment after my flash projects to investigate CSS3... I quite like the way this article also points out you need to not rely on it but instead use it as an enhancement for those using browsers that support it...going back to that article on degrading style...

Speaking of buttons, I was in Fireworks last night playing around with the Blog button for the LIF2 site. I originally went the rounded corner path but when I stuck it next to the official FB one, it looked naff. I decided to match the style of that button and squared off the corners. Interestingly, it still looked buttony to me. And better. So now I'm rethinking the 'sign up' button...I might square it off as well. I don't know why I'm so excited re rounded corners on the site. I originally went that path being inspired by the flowing, roundness in the logo, but now I think it's almost like 'just because I can'. It reminds me of all the sites that started rounding corners way back when - but that's like SO 5 years ago...

Tweak, tweak, tweak, tweak...

So I've been stuffing around with small tweaks and not really getting anywhere (it feels that way anyhow...).

I reworked the right hand column sign up button using the lessons I learned from http://learnola.com/2008/10/28/css-tutorial-roll-over-button/ and used a pre-loaded hover state image. It's quite cool except I got hung up on making the button look buttony. Which was my day yesterday...the worst thing is, not I don't like the way the site looks at all. I think I've been looking at it too long. I did visit the famfamfam.com icons and borrowed an arrow. Now I have to work out how to attribute it...

I still need to sort it out re IE7 and include a link to the blog and FB on all pages (just creating those buttons is a process in itself...). Either way, I want to wrap this up so I can start Flash work. My first project will be trying to build a basic game for my nephew. Then after that I'm going to try to recreate it in HTML5, just to see what that's like...

LIF2 draft complete!

OK! So all of the pages have now been built and can be viewed at www.thejct.net/lif2.html

I've sent the client an email asking for a review of the work and I'm drawing a line in the sand on Monday re content changes.

The good news is I sorted out the nav bar links re the Fitts Hicks law recommendation. I tried to display: block the links but I wasn't getting a bigger hit area. I couldn't for the life of me work out why until I looked at the layout in firebug and realised that the link area had a height of zero, with zero padding. Which meant zero hit area. derr. So I shifted the padding from the list element to the link and *presto* problem solved.

I also had a bit of a problem reintroducing the PHP form on the contact page. It's the exact same code I used in the prototype, and it seemed to mostly work i.e. it forwarded on the email address when entered and rejected it if the pattern match failed, but kept giving me an error message on loading the page. For some reason it just started stumbling and couldn't identify the variable 'email' (which should have been blank on page load and therefore the form didn't require action or the need to display a message). So I stuck an isset check at the start of the form code and all sorted! (I know I make that sound easy, but it gave me a bloody headache...)

I've already done a W3C check (and passed the strict xhtml test!) but there are still a couple of things that need to be refined, and I'll have to retest once I'm knocked those off.

One thing I need to sort out are the buttons. I have created buttons for the facebook and blog links, but I need different states (on hover/click). I've cross browser tested in IE7&8 and Chrome (PC), as well as the latest Firefox and Safari (Mac). It looks awesome in all except IE7, so I still need to go back and sort that out (I think I'm going to try out putting in hacks like I found in that article last week instead of building a new style sheet - see how well that works).

Something else I need to do (other that find a couple of better quality pictures) is perform a QA check on the whole site and test every link, if nothing else. I had another derr moment last night when I realised I hadn't linked the 'sign up!' button on any of the pages. The quick solution sent the style haywire, so I'll have to revisit that. I did want to change the button anyway, I might have to go back to that CSS button article list and see if something there will help...or try making the whole div a link...

960 grid system - CSS best determined practice

I wish I'd come across this Web designer depot article when I first tried to implement the 960 grid system code: Fight Div-itis and Class-itis With the 960 Grid System. It gives you a break down re how to actually use the generated code with clear diagrams explaining how it translates to your webpage. So simple! Now I get why it's been picked up so widely! I've been sticking to the grid sizing with LIF2, building my own code. Next time, I'm going to give this a spin again...

One good thing was they recommended applying classes to parents, not children, which I've been trying to do since learning from N. Design Studio's code. It keeps it neater and easier to reference back to as well...

Buttons and progress

So I finished off the major bits on 4/5 of the main pages last night (you can see these drafts at www.thejct.net/lif2.html). I added on my to-do list a note to sort out the 'sign up!' button on all of the pages. I just don't like it, the shape or position. Anyway, I just happened to come across this Speckyboy article today with a list of CSS button styling tutorials and techniques - I think I might look for a solution in there...

In the mean time, onto to building the contact page. I'm going to reinstall the php form at the client's request, which I had on the prototype site. Speaking of prototype site, I might have to move all the files over to thejct.net - the free hosting I was using keeps throwing up random ads these days... *sigh* I think I've got a few random bits all over the place, I'm going to have to consolidate everything so the links stay alive in my portfolio...

Contrast (speaking of colours)

So, the LIF2 build is coming along swimmingly - I've completed the major parts of 4 of the 5 main pages, just a few tweaks need to be ironed out.

One of those tweaks is I want to make all the links the same colour, and make that colour different to the text on the rest of the site, for accessibility/usability reasons. Interesting that I came across this article today on A List Apart 'Contrast is King' .

It reminded me how necessary appropriate contrast is when considering accessibility/usability and I felt like smacking myself over the wrist for having forgotten it. The article lists a couple of sites with useful tools, like Graybit, which converts your site to shades of gray (thejct.net comes up fine. LIF2 is OK, except for the 'sign up' button). Check my colours looks for contrast ratios between elements on a site. LIF2 didn't fare well at all with 61 errors....

My favourite tool from the site is the Colour Scheme designer (I'm really getting into these at the moment). The best thing about this one compared to the others I've come across so far is you can see what the chosen palette will look like based on your choice/extent of colour blindness, which is quite cool (i.e. contrast is obviously taken into account). I can't use the most up to date version on my work PC (IE6), but rather than just tell me I can't use it and how crap I am for having an old browser, it lets me use an older version, which still works pretty well (yay for degrading not abusing re older browsers).

I think I'll be reviewing the LIF2 colours (again) using this site - and probably choosing a consistent link colour based on it.

Usability, Hicks & Fitts laws and web links

http://www.vanseodesign.com/web-design/fitts-law-hicks-law/

A couple of take aways:

• display: block the link in a button to increase the clickable area
• make the text next to a radio button clickable as well by adding an id to the input and a label to the text. You should be doing this for accessibility reasons anyway
• reduce visual clutter and click options

CSS and opacity

http://www.impressivewebs.com/css-opacity-reference/

A good guide to how to achieve it.

Important note at the end, to be aware that you won't be complying with with current W3C standards if you use CSS opacity. So might be sticking to the background image on repeat for now...

LIF2 draft uploaded

So, I uploaded the first draft of the LIF home page last night at www.thejct.net/lif2.html

I built it using the 960 grid system, with the 12 column split. After reading Neilsen's article yesterday (see Tot's Jots), as well as listening to my instincts, I decided to shift to the 16 column version and shrink the picture on the RHS (as it turns out, I've shrunk it so it would actually still suit the 12 column split). I did this also because as I was about to start coding the other pages, I realised I was going to have to work with a hell of a lot of text and wanted the RHS column size to be consistent throughout the site (plus the images aren't amazing so I'd rather have the focus brought back to the text).

So far, it's looking much better. I'm definitely preferring the new version. I'll make a final call re the column split number once I plug in the content on the 'Personal Training' page and see how it all best fits...

JQery image slider

http://nivo.dev7studios.com/

I think I'm going to have to start a spreadsheet in google docs for all of these useful resources I've been stumbling across...

Colours and shades

So I'm checking out if/how I can achieve what I want re the background of the LIF2 home page. I wanted to achieve a gradient shading using CSS. I found this handy site re how to make transparencies happen cross browser:
http://css-tricks.com/css-transparency-settings-for-all-broswers/
which is great - except it shades out the content as well as the background. When i apply it to the div. Maybe I could just apply it as a class to the background image? Not thinking clearly, rather tired...

Anyway, another alternative is to have a repeating shade image, which is what I've figured most sites seem to do. If I'm interpreting things correctly...

In the mean time I'm looking at shades of colours, so I can just use a gradient of the key colours on the site (so I don't have too busy a palette). A couple of handy sites:
http://www.december.com/html/spec/colorshades.html A list of colours and for each, 3 shades lighter in hex
http://slayeroffice.com/tools/color_palette/ Awesome tool, creates 10 shades of a base colour, with degrees of opacity

Now, back to fun and games with vertical alignment...

LIF2 redesign update

OK, so I'm trying to stick with the 960 grid design (I keep coming across articles all over the place re designing with grids, so I figure it's probably a good thing to get used to working with). The 960.gs CSS/HTML generator seems like it would be useful for mock-ups and prototyping (which I might use it for next time, instead of ppt) but not so much for a short cut build (although I suppose you could. I just don't like the idea of so much redundant code sitting out in the wild...). The gridder bookmarklet is great, for quick placement checks (although annoying it's not accessible offline - at least I've got firebug handy).

I downloaded a trail version of Photoshop as Gimp, while useful and an awesome free program, just wasn't cutting it for what I needed to to (including designing my business cards, which I needed to CMYK colour design for the print peeps). I'm just going to have to bite the bullet an buy the CS4 package... It's been fun having the freedom to easily work on images again, I have to say...

So I've started pulling together the first draft of LIF2 and it's been way more difficult than i anticipated (of course :-) I've been stuck trying to get things to align all over the page like I want them (another reason why 'll be mocking up in code from now on...). I decided to go and have a sticky-beak at how other people achieve what I'm trying to achieve, to try to get some idea of what I'm doing wrong. I popped over to a similar site built by a design agency who shall remain nameless (they've been on my radar re future employer) and discovered that they built the whole thing using tables. Tables within tables. I can't tell you how disappointed I am. It's exactly what I've been taught what NOT to do. I understand it's probably a quick/dirty way of building (and if a company wants a cheap web presence, it's probably the way things go), but I honestly didn't think that was done anymore.

This being said, I'm now torn. Do I treat this as a learning experience and try to get the most out of it by sticking to my table-less CSS laying out, or do I just get something up sooner rather than later to display my design and focus on flash/job hunting?

And then there's the photo issue - the client sent through some great shots, but none that are really suitable for the front page. We need some that are personal, face-facing, connecting shots, and we probably need to look at organising new ones of her clients or purchasing some stock photos. Which probably isn't out of the question - if that's all this redesign costs her, I don't think she'll complain...

Colour combos

I'm about to start building the nav bar for LIF. Not sure I'm sold on the grey I've used in the mock-ups so I'm doing a bit of colour combo research. Found a couple of handy looking sites:

Colour combo library: http://www.colorcombos.com/ Searchable by colour (in hex)

Colour calculator: http://www.drpeterjones.com/colorcalc/ converts rgb/hex and allows you to tweak the colour incrementally. Cool tool.



ps this looks to be the closest in the bunch - I might try using the blue and grey and see how it looks http://www.colorcombos.com/color-scheme-14.html

pps even more awesome - helps you pick complementary colours!!!

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...