I know I have blogged (ranted) on the subject of web literacy before (here), however that particular thought was aimed more at ‘thought-leaders’ and the like. This post is aimed more at thinking about people (regardless of sector) who have to use the web on a day to day basis. For these people I believe that some basic level of coding should be a mandatory skill. You wouldn’t let someone who didn’t have basic literacy skills draft and send a press release or write copy for a brochure so why isn’t the same basic level of ‘digital literacy’ required of people who output content on/for the web on an almost daily basis?
I’m not talking about the ability to juggle python, ruby, php and asp simultaneously, what I’m trying to describe is a better understanding of things like basic HTML markup (that actually conforms to standards!), or simple CSS. I think that the time has passed where these are ‘specific’ skills that should only be expected of people with ‘digital’ or ‘online’ in their job title (although lots of those don’t understand this sort of thing either…). If, for example, you work in a marketing department and produce copy for e-comms on a regular basis shouldn’t you have some idea as to how this should be marked up? I know a lot of time is spent by people wrestling fruitlessly with crap WYSIWYG editors that a basic knowledge of HTML would solve in an instant.
However there seems to be a fundamental mental block with lots of people whenever this sort of thing is mentioned. It is unfortunately seen as geeky, inaccessible and hard. Maybe this is a result of the lamentable way that IT has been taught in schools for too long? Whatever the reason I really do think that a basic understanding of this sort of thing would help lots of people in lots of very small ways to do their job (or help other people do their job) in a more efficient, effective way.
I had intended these to be far more regular than this, must try harder. A mixture of tips/tools/reviews/articles that you’ll hopefully find useful, I did.
Right, I’ve realised that I spend a lot of time reading ‘interesting stuff’ and thought it might be useful if I share some of the best things here on a semi-regular basis.
To start off with are some useful CSS things;
- Nth-child CSS selector: http://css-tricks.com/useful-nth-child-recipies/
- Check to see if things like nth-child CSS selectors are supported in a particular browser: http://caniuse.com/
- Provides feedback on your CSS code: http://csslint.net/
A bit of house-keeping (for wont of a better word) first, I’ll be moving this blog in the next couple of weeks to integrate with my website www.bigthingsandlittlethings.co.uk. When I first set this blog up I wasn’t entirely sure what form it was going to take but I’ve managed to keep it quite web-relevant (thus far) so it seems silly to keep two separate identities running when really they are parts of the same thing….
Now, boring stuff over, on with the blog.
This isn’t a hugely technical blog this time but covers a few CSS-related things that I have found make a big difference to workflow and just generally making things a bit easier to organise and manage.
I came across the notion of CSS ‘global resets’ a few years ago, to me they make a great deal of sense, especially with regards to white space (http://leftjustified.net/journal/2004/10/19/global-ws-reset/) – I find it far easier to start from nothing and completely build up my styling in the knowledge that I’ve specified every element rather than let some odd default browser setting trip things up. The notion here is that all browsers have default margin/padding/font-face/etc settings for elements that will be applied if you don’t specify an alternative, the annoying thing being that all of these browser defaults are slightly different. With a global reset you, as the name suggests, reset all instances of the specified attribute (whether its padding, margin, font-face, whatever) to zero, or Arial, or black depending on the attribute in question. This then gives you a specific base point to work from – which I find very useful.
Some good examples of CSS resets can be found here http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/ and a good one here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/ http://warpspire.com/features/css-frameworks/
A further use of resets is detailed here, http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ Smashing Magazine takes CSS resets as an element of their suite of recommendations for developing a CSS framework – on reading this article I realised that I already used my own framework to some extent (I just didn’t refer to it as such) as there were certain stylesheet practices and scripts that I use as a matter of course – the acknowledged disadvantages of frameworks – such as the time taken to familiarise yourself with them and the possibility of inheriting bad code if you use someone else’s – didn’t really come into play as all the code I use is hand-written by me, I’m not saying I’m perfect though!
I’d be interested to hear about people’s experiences using some of the external CSS frameworks out there – there is a handy list of some of them here http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/ – have they streamlined your workflow or do they cause more problems than they solve?
There are also a couple of great articles at Smashing Magazine (who I rate highly – as you can probably tell) regarding good CSS practice and tips for better coding here http://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next-web-design/ and here http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
A couple of clients have expressed a penchant for divs with curved corners (a penchant which I understand, share and encourage). Now as you may, or may not, know (or care) – divs with curved corners are supported in Opera, Firefox and Safari (via the css ‘border-radius’) which is all nice and simple and standards-compliant and lightweight and all that good stuff that you want your design elements to be. HOWEVER (and unsurprisingly) Internet Explorer doesn’t support rounded/curved corners. In the past this meant lots of messing around with images and other things which all made things bigger, more complicated and…basically…not as good.
I stumbled across this solution to the IE issue http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser which uses an .htc file (an htc file is relevant to IE 5+ and contains script that defines the appearance of an element). Now I have used this solution a couple of times with some success (although this does result in a faint outline to your corners in IE it’s better than nothing), although I’m currently having a few issues – these are possibly due to my server more than anything. Fingers cross that IE9 actually supports css3.
So as you may or may not I do an occasional podcast (www.tapes-online.co.uk) with a chap called Cameron who also happens to be an exceptionally good illustrator/designer/drawer of ace things (http://twoducksdisco.blogspot.com/).
As you also may or may not know I also do web design outside of the 9-5 (under the title of ‘big things and little things’) and am currently doing Cam a website, I’m also working on a new site for the Jane Tomlinson Appeal (you may remember a mention from an earlier post, but probably not so here it is http://ashmannblogs.wordpress.com/2009/01/19/bike-rides-and-vans/) and a site for my brother who does things like talk about sport (http://tristanmann.wordpress.com).
If anyone else wants a web site doing then drop me a line, i’m an (x)html/css/php chap really.
Oh I am also going to try to keep up my music recommending, today it’s mirador by efterklang from their album ‘parades’ http://hypem.com/track/968772/Efterklang+-+Mirador+Live+ which is bloody lovely, it’s joyful, orchestral, beautiful and generally ace.