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!
Thursday, April 15, 2010
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...
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...
Wednesday, April 14, 2010
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...
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...
Wednesday, April 7, 2010
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...
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...
Thursday, April 1, 2010
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...
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...
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...
Wednesday, March 31, 2010
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.
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.
Subscribe to:
Posts (Atom)
