Hey, thanks for showing an interest in what I’ve been writing about. I’ll be writing about design, development, ideas, food and life all here in the future.
If you love a post, leave a message on how it’s helped you, if you have better ideas or can expand on anything I miss out on.
Hey, so I wanted to quickly do a blog post about my new stylesheets that we’re using on JustGiving. They’re awesome. And boy do I mean awesome.
We’ve finally been given the chance to separate away from the .NET skins file and build on MVC which allows me – as the front-end developer, to work and build nicely semantic code. In the past we had to carefully dodge and tip toe around controllers, fearful of our jQuery not working. But now… awesomeness prevails. I’m able to separate my global styles from my process styles. So what does this really mean?
Well, we now have site wide elements (H1,H2,H3,paragraphs, list elements and more), we have site wide classes which can have minor and useful aids for developers who are not native to the DOM in this manner (.hide, .relative, .float-r, .sliding-doors-button, .corners, .blue – etc). While you may think some of these usages are extreme, they really useful for enabling a developer to learn through the DOM if an object is floating or positioned absolute.
Also having the global stylesheet away from the process/area specific stylesheet means that the code reviews can enable us to share our knowledge with one another on whether something should go into the global stylesheet.
I just wanted to share one last bit… we had a discussion around this about our elements now being in caps in the stylesheet. While some purists may argue that it confuses the lowercase standard in the document, in the stylesheet this aids the speed of which you can read it.
DIV#container.corners.red.one-third
rather than:
div#container.corners.red.one-third
…A minor thing, but something I’m growing to love. It’s the same goes with indenting HTML and seperating out your CSS codes. When you become good enough, it shouldn’t matter that you break some rules if they aid you in different ways.
That’s it for now!
Oh gosh. It’s that time again isn’t it. Just a month into the release of my new site, I’ve taken my brand and extended it further. I guess this is the one thing that as a designer we all suffer… the never ending search for happiness (props to EAK for the link).
Then, having read a 24Ways Article by Meagan Fisher who insisted that Photoshop was evil and you can build your site fully in markup… I gave it a go and the current blog (not in the image below) was the output.
I’m not saying she was totally wrong… I’m just saying she’s either really gifted not to need the use of pencil + paper to write down her ideas super quickly. It’s sadly not a gift I acquired.
Sure, if you’ve got a nice basis to work from which is really clean and concise then why not design in your markup. However, I’ve found that my markup is best to ask Information hierarchy questions while the visual and graphic design side best done on paper or Photoshop. How do you build a site? Do you use just paper prototypes, mockingbird, photoshop or go straight into the final output using markup and CSS? Should it be different for personal projects…?
What I did get out of Meagan’s post, was a really awesome app called Slammer – which enables you to use grids with suggestions such as the Fibancee sequance, the golden rule, uniformed grid and a few others. Extremely useful and inspiring! Go give it a try.
Speaking of which, it’s been fantastic to finally get back into the flow of using the Pho of GUI editing suites. Having a break from it for a while was useful… but now I really feel like I’m back to full speed, adding in shortcut keys for all those annoying and monotonous clicks. Oh it’s great to feel like an action per minute ninja.
Right. Enough!
Home through ice, food on grill, vacuuming buddy Sookie cleaning like the little domestic robot she is and I’ve got a presentation to complete ready for tomorrow (I started writing this on Friday!).
Suki has still been working hard on those pine leaves that my little Christmas tree left as a parting gift. They are pine leaves right?
To cap off a great week, I thought I’d just share my thoughts on a book designers should pick up if they haven’t already. It’s an oldish book, but still a brilliant one by New York based Ellen Lupton of Pentagram who I’ve just started following on Twitter. I’m lucky to have had the chance in the past to meet one of the co-founders/partners of Pentagram and have the chance to discuss the JustGiving brand with them, so I know just how they cherish graphic design like no other agency.
One of the best parts of the book is how it shares creativity with the reader. Explaining how to break the mold while working within it, as well as pointing out type crime (user experience problems with typography). Which has fascinated me since my time at PartyGaming, when our Creative director strongly pushed for people to avoid using center aligning of content willy nilly (see below for comic sans, poor grammar, typos and awful center aligned example).
Center aligning text is a technique that people apply all too easily, my rule of thumb was if it’s over three words… don’t even think of centering it. Yet, Ellen goes on to say that if used correctly it can “create a formal and classical, bearing rich associations with history and tradition. It invites the designer to break a text for sense and create an organic shape in response to the flow of content.” Which explains just why French menus use it and apply it so well. Some of the time… Below you can see an example of great center aligning that falls into the category of having a history and tradition from the use of the crest and the rich colours.
Center alignment in 'Orientierungsplan - Demokratisches Berlin. DDR Hauptstadt. 1964' taken by sludgegulper
She goes on to say how text is important and often in GUI icons get used on their own without text to highlight it’s meaning. I found this fascinating as the first time I saw this:
It was the most bizzare and random combination of icons I’d ever seen before. My mind was immersed with numerous colours and different icons and initially it made me think of skull and cross bones on the machine itself. Yet, if you look away from that green and white monstrosity, and towards the ‘One laptop per child’ site and logo, it’s a totally different story.
Which made me wonder if this was what she was referring to by saying icons alone cannot always work… The GUI on 1PPC clearly didn’t do Pentagram any justice, yet Ellen’s book and ethos for design really does.
So why should you buy this book, if not because I’ve said so? Type crime. Yup, I randomly blurted it out. The sole reason for you to go out and buy this, is that it explains proof reading and typography no nos without a pointy stick and a waggle of an index finger.
Time and time again, authors write so many things and don’t practice what they preach, yet this book does everything that makes me proud of being a designer. Ellen. We salute you. Okay enough geek talk for me for one night.
If you were to suggest a book to read based on design, typography, layout, inspiration or creativity… what would it be? My next book of reading is currently Chris Anderson’s – Free, which my wonderful mother purchased for me after reading a Christmas tweet. Isn’t life awesome? That was rhetorical in case you were about to answer in the comments box. What the hell, just reply that life is awesome.
I’m also excited that following up from that is an awesome read my wonderful girlfriend got me when I moved into my flat last year (it’s a huge book okay), by Alan Fletcher – The art of looking sideways.
Fin.
It’s been a wonderful Christmas and New Years break hasn’t it? Just swell I would say. What have you been up to?
Thanks to the wonderful world of Advertising that I’ve been imersed in since getting into the US hit TV show, ‘Mad Men‘ – I’ve started to think about how I’ll be reinventing myself. It’s a wonderful show and it’s drama and dark characters really have me addicted. Yet it’s not been enough to keep me away from the somber light of my beautiful little Mac.
Yes, it’s time to blog again. 2010 will be the year I get back into this and I promise to bring far better posts than I have before. Kicking off with a bang… perhaps a bit late, but better late than never is my investigation into the world that is HTML5. I’ve been hesitatant in the past to use it for my own site, but if you were to inspect a few elements you’ll notice the markup uses bizzare new HTML such as Header, Footer, Aside and more.
It’s a truely new experience to be without intellisense for HTML5, but I’m sure Panic’s Coda will have a plug in or some update to fix this soon. You could argue I’ve been foolish to jump and try it… however I’d disagree. I’m using if Internet Explorer php comments to pull in a javascript fix which pretty much any decent Front-end developer is also looking to use. If I were really concerned I’d also ping the site and then offer a local version should the caching of this file not be available, but my Google Analytics says that the majority of my audience uses Firefox, Chrome or Safari. So hah, I will have my cake (if I’m on my own personal domain) and eat it!
HTML5 will certainly improve semantics and make people think more about what they’re doing with their mark up. However, I wonder whether the NAV element should be like a UL or OL (un-ordered or ordered list) and contain LI. Most of all I’d really love to see canvas needs to be linked to a vector styled WYSIWYG editor.
My major gripe with using HTML 5 online, is that my Firefox plug in doesn’t support the new elements and the w3c validator (god I hate that word) is kinda lame saying that it’s all fine bar the fact that HTML5 is experimental.
So… will you be trying it out too?
Almost a week has passed and you might be forgiven to think nothing has occured on the site, yet the following got implemented:
I’ve still more to go as well as update more portfolio section. I’m going to be looking at improving the microformats, the design, more features (tag cloud, categories and more).