• New HTML pages should be able to be written without having to modify or append the CSS
• CSS should be able to withstand new people touching it and not fall down or cause impact elsewhere when somebody changes it
• One of the biggest mistakes is writing really clever and complex module class that often overlook module flexibility
• There are two main principles; 1) seperate Structure and Skin 2) seperate Container and Conent

• CSS is very abstract and can easily create dependencies across all pages. Content within modules is a classic example.
• OOCSS aims to break the dependency between module and content
• OOCSS aims to build objects and breaks down the re-usable components

• In the example of headings, they should be consistent site-wide. If you want a header to look different for a different location then extend the heading object rather than based on location
• OOCSS aims to abstract the structure of the block from the skin which is being applied
• Structure is block based, skin is visual based
• Reusing elements is a performance freebie. They’re likely to be stored in cache and save new requests of the wire

So how do we get to OOCSS?

• Start with the lego blocks first. If you start building pages straight away you will end up with classes that are too specific
• Try to avoid redundancy
• Avoid too similar modules
• Average user’s are not sophisticated enough to notice the difference between 14px semibold and 14px bold font or a 1px round corner over a 2px round corner. This just adds weight and performance cost for something that will go unnoticed

• Objects should be persistent and not change when placed within different modules. H1′s should always look the same no matter where positioned
• Don’t specify elements. It’s restricting and not everyone will know that class .error only applied to a <p> and not a <div>. Be element agnostic.
• If you do want to extend it, only extend those specific rules and keep the shared elements within the base class

Be flexible

• Let grids control the width and make sure content control height
• Learn to love grids. The point of loving grids is you never re-code. They are an abstraction and separation from the content
• Learning to love grids means you or new coders only need to learn the structure once

Summary

• CSS should become obvious
• There should be little learning curve
• You don’t need to be an expert to use it or a designer to create a new HTML page

Font Spring also offer some great advice and support especially on how to resolve Chrome’s poor quality font rendering in widows. Smoother font rendering in chrome.

Creativity

Creativity requires a lot of energy. The worst time to force creativity is when you are tired. If you are at the beginning of a project and you feel tired or don’t feel like your energy is between 80-100% try to avoid creativity and jumping straight into a new design. At times of feeling tired and energy is below 80% turn your attention to mundane tasks and those that don’t require much thinking.

Inspiration battery

Once your energy levels increase and your creative urge is set loose on the project, maintaining this inspiration is difficult. You need to keep your inspiration battery charged. One method of keeping your inspiration battery charged is to not work beyond your creative inspiration. If, after a couple of hours of being psyched over a design, take a step back, do some other tasks or move away from the computer all together. By doing so you will find yourself itching to resume work on the project and over the course of the project your inspiration will be maintained.

Don’t push on through tiredness. As mentioned above, creativity requires energy. You cannot be creative if you are tired. If you try and push on through tiredness the project will reflect this and you may find yourself disappointed with the work you produced in this period. This will leave you feeling deflated when you return to the project and you may struggle to reignite that creative spark.

Finally separate those tasks that get you feeling inspired from those you don’t. Ensure the ones that inspire you are always there when you need them. If you get tired of programming switch to design. If you get tired of design switch back to programming. By implementing these small details may help to keep you feeling perpetually inspired.

Wednesday 8th May 2013 will always be ‘that day’. It was the day that since 2002 every Manchester fan had been dreading. I think for 99% of us it was also unexpected. Just a couple of games after clinching our 20th league title and only three days after program notes suggested he’d be here for at least the next two years, the great man calls it a day. Shock, sadness, followed by continuous waves of shock and sadness hit me like a ton of bricks.

He was installed as manager of Manchester United 2 years after I was born. My first ever football match was at Old Trafford in 1992. Since then Manchester United were ‘my team’. At the beginning of every season I was fortunate to be bought a new kit and at the end of every season I was fortunate to be bought the season review on VHS.

As I grew older I became more aware of Ferguson’s management style and his personality on and off the field. This awareness was a result of the many interviews, books, press reports, articles and later Internet articles I would always read.

On the field he was a fire breathing monster, constantly giving his players instructions, making the referee aware of time wasting and giving constant ear ache to the poor fourth official. Off the field he was a father figure to his players, leaping to their defence and kept all private matters inside the Old Trafford doors. Thousands of other press reports will describe him from first hand experience and a lot more accurately so I can’t and don’t want to go on.

What I can appreciate is the respect he has from everyone who comes into contact with him. For nearly three decades he has been the boss. He is always in control, he always has the final say and he is always ultimately responsible. He’s continued to adapt, continued to learn and over time changed his methods to suit the fast changing pace of the game. I would love to achieve even a small amount of this in my field of work.

Every time I see him I have admiration. I laugh at quips during interviews with Geoff Shreeves, I see him celebrating like a 10 year old after winning titles and when I see him walk down the touch line, hugging Fred the Red on the way I struggle to believe this is a 71 year old man.

And I think this is what I will miss the most. For over 26 years I have watched him walk the touch line, watched him hug Fred the Red and watched him raise the Old Trafford crowd when needed the most. I’ve seen his enthusiasm for the game many times when I’ve visited Old Trafford and I’ve even sat in his seat in the dugout while on the Old Trafford tour.

For all these memories, for all the huge highs and very very few lows I want to say a massive thank you. For Manchester United the impossible dream was made possible and this was down to one man; Sir Alex Ferguson.

The Industry Conference was held at the Turbine Mill in Newcastle, April 2013.

The venue was simply awesome and in my opinion perfect for this event. Newcastle is a favourite city of mine. Originally from Hartlepool and having worked in Sunderland I always get a sense of safe and warm when going back home. The Quayside is a very beautiful place that blends the modern with the traditional working class environment.

The conference started with a traditional pre-party. This was a great night that lasted longer that originally expected but it give me chance to meet @mkjones and @alexhansford,both great people.

All speakers at the conference spoke well, provided me with so much motivation and the topics were wide ranging but useful to both designers and developers.

The talks I particularly liked were:

Harry Roberts

I first listened to Harry speak at Canvas Conference in September 2012. His talk was very helpful to me. I actually returned to work and rewrote all of my CSS into more of a granular, layered model. His talk at Industry was quite similar but more focused and explained the usefulness of the layered model and how it increases the efficiency of scalable CSS.

The approach is to look at your CSS at a granular level which in turns helps you to see or build a bigger picture. His analogy was that of building a house. House construction can be separated into different layers; 1. Foundation, 2. External Structure, 3. Internal Structure, 4. Decoration.

CSS takes a very similar approach. We start with a base, I use normalize.css, we build our framework which more often or not is a grid, we gradually add internal components and we finish with some enrichments such as CSS animations, gradients.

This seperation of files, each working independently of each other allows far more efficient and cleaner CSS when working with larger sites or applications. It is more open to change, prevents over specificity and allows controls or themes to be shared across different applications.

Another useful point was the use of /* Comments */. Comments allow you to inform others within your team why some CSS rules are a certain way, why some hacks may have been put in place and often act as a reminder. As front end developers we don’t comment enough.

Lastly is hack.css. This idea involves the creation of a specific hack.css file specifically for any quick CSS hacks. This becomes a self documenting to-do list. At the end of the day, we’ve all been there. Project deadlines approach fast and browser testing becomes a pain so we put a quick hack in place with the intention of fixing one day. In reality we don’t and we set a precedent within our CSS which allows for bad code. Creating a hack.css prevents this and gives us an up to date fix list when time is back on our side.

My to-do list from Harry’s talk:

• bem.info
• smacss

Jeremy Keith

I got the chance to speak to Jeremy during the mid-morning break. I was immediately in awe of his knowledge and it made me realise I have so much more to learn but I am excited to do so. I was also thankful for his pointer towards Steve Faulkner who works at the Paciello Group for info with ARIA.

Jeremy spoke of what we mean when we talk about the web. This talk was quite broad ranging so I only want to talk about the points that affect me as a front end designer/dev.

He touched on responsive design and the control the designer longs for. In the days of 800 x 600 resolution we decided that this was our fixed view port and everything then on is a fixed measurement. This technically was not correct, we merely did this to give ourselves total control of our environment.

We now live in an age where resolutions are endless yet we still strive for total control. When does a resolution become mobile? When does a desktop become a tablet? These are questions we can’t answer. What increases the difficulty of us gaining control is the tools we use to design and build our sites. The moment we open Photoshop it asks us for our canvas dimensions and PPI so immediately our mindset is constrained by our environment. Trent Walton also touches on this and has a very helpful blog post.

The talk of being responsive also leads on to a theory that all all websites are in fact responsive and accessible before we break them. Divs are 100% width, basic sematics are readable by screen readers and assistive technology yet we add fixed unit measurements or roles to change the appearance of elements.

So instead of making everything responsive and accessible maybe we should aim to not make things unresponsive and inaccessible?

My to-do list from Jeremy’s talk:

• A Dao of Web Design. John Allsopp; A List Apart.

Summary

It’s easy for me to say this was a fantastic conference with great speakers as both of these are true.

I think the main positive for me was the realisation of the community in which we work. We are a selfless, caring, sharing community. The minute we build we share. The minute we design we share. We ask for advice, we get some back. We ask for help, we get some back. It is a community that allows new entries to feel warm and welcome and gives everyone the freedom to ask questions which is the most efficient way of learning.

It’s a community I’m proud to be in.

How did I not win the bingo?

Today was my nana’s 80th birthday. We travelled home for a ‘Toby Carvery’ at lunch time to surprise her with a birthday hamper and a card that she was already complaining about for the fact she hadn’t received it in the morning post.

We ate lunch, a king size carvery, that stuffed us all.  We surprised her with a birthday cake and a 80 balloon and the lunch was a brilliant occasion. Spending time with family, listening to them talk about old times is such a privilege.

That evening we went to the Billingham Cons. The Billingham Cons can be described as a good old working mans club that you would traditionally find ‘up north’. If you have not experienced a night in a working mans club you should. I love them for their honesty, values and tradition. Not to mention a round of four drinks won’t cost more than £10.

It was here I got to meet my nana’s dearest friends. It was so nice to step into my nana’s life for a few hours. Everyone love’s her. Whether it’s the three 18 year old barmaids, the sign-in guy on the front desk or ‘pen man’ who gives her a lucky pen for bingo, they all at some point wished her happy birthday, complimented her for her young looks and bought her a drink. At one point she was sat with three glow bands around her wrist, a glow band around her neck singing to the Beatles – I love you yeah yeah.

Late into the evening it was ‘eye’s down’. From my little experience I take bingo very seriously. Once those numbers have started it’s just me and the bingo, nothing else is important for those 10 minutes. As expected I didn’t win, in fact I didn’t even come close to winning. I was waiting on 4 numbers at best.

Still, my disappointing bingo experience aside this was a fantastic day and one which will live long in my memory.

• Regular desktop applications have a behaviour layer that is not dependent on requests to a server.
• Regular desktop applications have a far richer set of interface components.

Often people rely too heavily on color to make distinctions with design when ideally other tools such as scale, layout and white space can be used more effectively. Once scale and layout have been used as much as possible, luminance (shades of grey) can be used to help identify and locate important elements from others.

Amazon

Viewing Amazon’s search results in greyscale is a great example of this. You can clearly see the visual structure of this page, elements that are larger and elements that are smaller helping to group together related information.

The departments (left column) are also clearly identified through the use of different font weights and luminance. The Amazon site works very well in greyscale but adding color makes it even better.

Once the structure has been identified color can be added.

Amazon have used a very limited color palette which works really well. Generally when working with color less is more. Using less color is more powerful and does not overwhelm the user, however this is obviously down to personal taste and the message you are trying to convey.

A general rule of thumb is that using fewer colors within your design helps the user to recognize patterns which reduces thinking time and improves their overall experience.

Bad design however we notice differently. We notice bad design when we trip over or it or because it breaks our rhythm. We end up squinting at the screen and we begin to think about what we see in front of us.

We can help to create good design by introducing some basic techniques.

Introduce White Space

Some space must be narrow so that other space may be wide, and some space must be emptied so that other space may be filled. Robert Bringhurst Elements of Typographic Style.

Adding white space allows you to group together salient elements therefore separating them from other non-important elements. White space allows you to direct the user along the path you want them to follow through your UI.

Use font contrast

Adding typographic variation such as weight, color and style creates a visual hierarchy. Newspaper prints are a great example of this. Newspaper prints use larger font sizes and heavier weight to target the main news headline while smaller font size and less heavy font weight for secondary news stories.

Information consists of differences that makes a difference. Edward Tufte Envisioning Information

Guide

Guide the user through your UI by conveying structure, relative important and relationships between elements helping the user to effortlessly follow the path to completion.

Pace

Set up the pace of the interaction, draw the user in, help orient and provide hooks to allow them to dig deeper into the UI.

Message

Use visual design to express meaning and style and help give life to the content.

View draft