I love animated gifs – boom

Click to see the animated gif, as I made it a bit large to display right here – 32mb – ooops

Boom

Especially now I know you can create them via the command line and ffmpeg.

ffmpeg -i file.mov -pix_fmt rgb24 -s qcif -loop_output 0 animated_gif_ftw.gif

¡Viva la Revolución!

How To Build a Modern Website in 2011

Simply brilliant article on some of the emerging concepts, techniques and philosophies that have hit us through-out 2011 in the world of web design/development. It’s been a truely epic, transformative year, it’s really exciting to see the development of responsive design, mobile first, web typography, HTML5, CSS3, solid web design principles that are enabling us to build the next generation of websites. It feels like industry has reached maturity and now we are ready to fly.

Prepping for 2012

So think this is the third new design for this site in 2011. Which is 3 times the numer of posts for 2011 so far…truth is twitter, facebook and increasingly instagram and foursquare keep me entertained yet allow me to communicate effectively with my networks.

However a constant itch I feel the need to scratch is the wider narritive. Twitter, facebook et. al. are great, but they tend to be short format, quick thoughts or feelings, a snapshot if you will. I always liked this space for a bit more indepth thinking and musing on subjects du jour.

So I’ve said it loads of times but yet again, as I appraoch 8 years of running this thing it’s time to try again. I think I have a fair amount to say and would like to give it another crack. Blogs may be somewhat 2002 now but hey, I always enjoyed blogging so even if I am madly writing away to myself I would like to give it another crack. Maybe not so much pressure to blog frequently, but about once / twice a month seems fair.

As part of preparing this post I thought I would dive into some old themes and get some snapshots of this blog through the ages….going from 2004 by year. Seemed like a nice way to review what I have done over the last 8 years and was pretty fun activating the old themes and seeing what broke. Surprisingly apart from some legacy plugin code most of them worked even the theme built for WordPress 1.2! Now I am on the shiney 3.3. WordPress has come such a long way, such a great platform to develop and write on. Although the less said about some of the markup I chose to use the better .

Why Labour lost

Great quote from Andrew Rawnsley on why Labour lost:

New Labour was too insolent about civil liberties, too cringeing to high finance, too tolerant of sleaze, insufficiently dynamic about public services and too crabbed about welfare and constitutional reform

Cultural change is free

One of the best critiques for the modern phenomenon of target driven system design, where outsourcing, rationalisation, target driven methods, standarisation lead not to the intended outcome of increased efficiency and lower costs, by higher costs, demoralisation and customer disatisfaction.

The main guy, John Seddon is a brilliant, thought provoking and eloquent speaker that manages to make you laugh, cry and shout in agreement.

Some choice quotes / themes from the presentation.

* Gaming the system – if you set points targets etc, people like to maximise points and will do so at the expense of finding the best solution to just finding the easiest solution to score the point

* Your workers are the system make them improve it

* Management changes from adversarial role to co-operative working on the system with the worker

* Understand where the demand is, understand differences and reasons

* You can’t to the wrong thing right

* By imposing arbitrary targets into system you create a purpose – hitting targets, you also constrain method

* Three things every manager needs to know about targets:
1. Always makes performance worse
2. No reliable method for setting a target (i.e. last year + 10%)
3. Real measures derived from the workers, workers doing to work you receive benefits you would never dream of setting as a target

* Have you ever seen a 5 year plan that says we will get worse

* We never re-visit plans to see if we were right

* The only plan is ‘get knowledge’

* The only work is what the customer wants to pull, everything else is waste

* Change is emergent

* Change starts by studying the current system » study demand until you can predict demand going forward » you take your value demands (the things you know you are going to get a lot of) » follow them (the value demands) through the flow » see where they go » keep following the demands

* One-size fits all – enormous forms – feeding the machine

New box model army

I love the Observer magazine’s new layout design, particularly the use of mixed fonts and bold header styles.

It got me thinking web design and how new techniques such as CSS3, HTML5, jQuery and Typekit (or more generically type replacement techniques) are allowing for much richer designs and interfaces to be applied easier and more semantically. This is a very good thing, sure with a combination of markup, classic javascript and background images (sprites) we can get pretty complex designs applied, yet it always felt slightly ‘wrong’. Having to create 4 nested divs and negative margins to create a scalable, rounded corner box just felt icky and too heavy to feel proud of actually constructing something out of divs and gifs.

Also fonts, sigh, having to deal with 4 or 5 fucking fonts for a decade is really frustrating, sure we can use images, flash placement etc etc, yet again having to pad my code with so much stuff just to get a font outside, Verdana, Helvetica and Arial (and a few others plus a few sans-serif fonts Georgia, Times et. al.) again seemed like a large overhead and had too many disadvantages (flash issues, slightly non-accessible) to be used unless really necessary (brand guidelines, client preference).

Anyway that’s part of the history and frustration, but then the future started to push through. CSS3, HTML5 and font replacement has been tantalisingly close for what seems like ages. For me the need to carry on supporting IE and it’s backwards and verging on the offensive support from emerging standards has kept front-end development frozen in time, attempting to create increasingly complex and exotic work arounds to achieve new methods for building new web designs (that are not restricted by standards only imagination). Yet there seems to have been a change in heart over the last six months, maybe it’s a tiring of support for a browser that refuses to embrace modern standards, maybe a need (user) or desire (advanced interfaces) to use modern techniques to take the web to the next level and be damned the browser that refuses to grow-up.

Certainly my feelings have changed, where once I felt all users deserve an equal experience (functionality and form), I now feel that if a user chooses to use a browser that doesn’t support modern technologies then why should they expect them (one wouldn’t expect ABS brakes or power steering in an antique car). Ofcourse some people do not have the choice to move away from Internet Explorer, and I do sympathise with those users, yet again, that should not mean we shouldn’t experiment or push the boundaries, I don’t want to be 40 before I can use native rounded corners in CSS. Obviously this is not an approach I take to client sites or important functionality. I believe in the Aggressive Graceful Degradation model where the site is still accessible, readable and usable, but if Internet Explorer users don’t get rounded corners on a form button then will I or they lose sleep at night, well probably not. Hey maybe the proliferation of these more advanced sites will encourage Microsoft, Organisations and Users to upgrade or move away to something more suitable to the 20th century (low-shot I know – but hey)

So people with modern browsers get the treats, like people with modern televisions, computers, mobile phones, and cars get the treats of modern technology. We wouldn’t expect to be able to get HD on a CRT monitor, so why should all users get the same interface?

Also for my own personal development it’s important I keep up with new emerging standards, If I stand by and await for Redmond to grace the web with a decent browser then it’ll be too late for me to catch-up with people that have decided to launch fully into the HTML5 and CSS3 world, especially those which have been brought up on Firefox and Safari (launched 6 years and 7 years ago respectively).

All of this is a very long way of saying I am looking at new techniques and methods to deliver richer designs in html and css. Anyway back to the beginning of the article, the Observer Magazine redux and how much I liked it and how it could be done in native HTML/CSS with more advanced techniques. So I thought I would give it a try, by using typekit to deliver the fonts and CSS to get the rounded corners. First the original (examples from The Magculture blog)

Observer magazine

So thinking I might be able to take care of the circle via -border-radius declaration, with a border radius of half the width and height of the block element in question. But then using a mixture of absolute positioning, margin, padding, z-index and background-image for the border (I had trouble with the simple border declaration and the stack order of the various elements). The benefits of this approach is it’s really easy to change the background colour of the circle element and ofcourse the text as style is set by css not markup or images.

All in all it’s just simply lovely to be able to see a technique in another medium not restricted by technological standards and replicate it in a nice clean(ish) way in CSS3/xHTML/TypeKit – the future is starting to look really quite exciting and I haven’t even really touched on HTML5 yet 🙂

So here is a screen-grab of the header:

Observer magazine - CSS and HTML

And the mark-up (click here to view the demo on a standalone page):

Food & Drink
pie chart - mmmm pie

Heading: The detail

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Something Something

And the CSS:

	/*section colors*/
	#magazine-header span.orange {background-color:#dc8100;}
	#magazine-header span.red {background-color:#e00000;}
	#magazine-header span.pink {background-color:#d800a3;}
    
	/*magazine style header*/
	#magazine-header {
		position:relative;
		width:100%;
		background:transparent url(bg.gif) 0 bottom repeat-x;
		height:120px; 
    	overflow:hidden;
	}
	#magazine-header span.caption {
	    text-align:center;  
		color:#fff;
		display: block;
		width: 120px;
		height: 120px;
		-moz-border-radius: 60px;
		-webkit-border-radius: 60px;   
		position:absolute;
		bottom:-15px; 
		right:20px;
		z-index:100; 
		}
	#magazine-header span.caption em {
		display:block;
		padding:40px 25px 0; 
		font-family: "bello-pro-1","bello-pro-2",sans-serif;    
		line-height:20px;
		font-size:20px; 
	} 
	#magazine-header div.excerpt {
		width:auto; 
		display:block;  
		position:absolute;
		bottom:20px;
		margin:0 350px 0 100px;
	}
	#magazine-header div.excerpt h2 {
	   font-size:14px; 
	   font-weight:bold;
	   margin:0;
	   text-transform:uppercase;
	   font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
	   margin:0 185px 0 0;
	}  
	#magazine-header div.excerpt p {
	  font-size:12px;
	  line-height:14px; 
	  padding:0;  
	  margin:0 185px 0 0;
	}
	#magazine-header h6.meta {
		color:#fff;
		position:absolute;                                             
		bottom:0;         
		right:135px;
		line:height:1em;
		font-size:10px;
		margin:0;
		font-family: "bello-pro-1","bello-pro-2",sans-serif;
	} 
	#magazine-header h6.meta span 
	{
		color:#fff;
		font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
	} 

I’m back!

And on a shiney new server! Thanks @shanemarsden for getting all the apache and php stuff sorted on our box so I can install lovely wordpress.

It’s been over six years since I started here and at another junction where I try and work out what the purpose of this website is, but seeing as I change my mind all the time and the interwebs changes likewise, I guess it;s going to be that way for ever.

But as it’s election time I guess there may be the old politics post 😉