Friday, March 26, 2010

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

Thursday, March 25, 2010

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

Wednesday, March 24, 2010

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

Tuesday, March 23, 2010

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

Monday, March 22, 2010

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

Friday, March 12, 2010

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