This is a presentation I found when I was originally researching a few months back that was great in terms of thinkign about design for not just mobile but web going forward http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
It would be very interesting to see how much the stats have changed in the last year...
It was from that presentation I found the dconstruct 2010 website which I quite liked. It used the Less/SASS framework
http://2010.dconstruct.org/
Tuesday, October 18, 2011
Wednesday, September 7, 2011
Tracking new web projects
OK - I'm going to use this blog to track my WIP on two new projects - the overhaul of my portfolio site as well as the creation of a new business website for a family friend.
I'm going to keep Tot's Jots for general self study notes/discussion/discovery etc.
Anyway, I've started a content audit of the portfolio site. I plan to use Less Framework 4 to give the new site adaptive bones. I've been looking lately at mobile web dev and quite enjoying the challenge and change in mind set it takes to think about designing from small to large, instead of the other way around.
Looking at a couple of Javascript bits to make things interesting e.g.
Raphael http://raphaeljs.com/
jQuery Masonry http://masonry.desandro.com/\
jQuery roundabout http://fredhq.com/projects/roundabout/
LOVE the Quicksand sorter http://razorjack.net/quicksand/demos/one-set-clone.html
Can't decide if I like the potential here or if it's the new spinning GIF : http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/
looking for a slide deck something like this: http://www.slidedeck.com/
Maybe this? http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/
A couple of lists that might be useful:
http://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/
http://www.ourtuts.com/jquery-slider-plugins/
Being inspired by lots of sites I've come across in searches incl:
Naomi Atkinson
DevSnippets '10 jQuery Trasition Effects: Moving elements with style'
I'm going to keep Tot's Jots for general self study notes/discussion/discovery etc.
Anyway, I've started a content audit of the portfolio site. I plan to use Less Framework 4 to give the new site adaptive bones. I've been looking lately at mobile web dev and quite enjoying the challenge and change in mind set it takes to think about designing from small to large, instead of the other way around.
Looking at a couple of Javascript bits to make things interesting e.g.
Raphael http://raphaeljs.com/
jQuery Masonry http://masonry.desandro.com/\
jQuery roundabout http://fredhq.com/projects/roundabout/
LOVE the Quicksand sorter http://razorjack.net/quicksand/demos/one-set-clone.html
Can't decide if I like the potential here or if it's the new spinning GIF : http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/
looking for a slide deck something like this: http://www.slidedeck.com/
Maybe this? http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/
A couple of lists that might be useful:
http://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/
http://www.ourtuts.com/jquery-slider-plugins/
Being inspired by lots of sites I've come across in searches incl:
Naomi Atkinson
DevSnippets '10 jQuery Trasition Effects: Moving elements with style'
Thursday, April 22, 2010
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.
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...
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...
Thursday, April 15, 2010
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!
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...
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...
Subscribe to:
Posts (Atom)
