nickpan

web designer, digital projects manager and web standards advocate in singapore.

Experts to Heroes

Rodney Mullen. Amazing Skateborder, an Expert. I’m always fascinated in his style, innovation and technicality. There is such an excellent spirit and dedication when I see him skate all the time.

This series of videos about him thought me 2 things.

  1. Progress can be due to weird reasons like being tormented by ideas.
  2. When doing something complex, focus on just the key things.

Go check out more of his videos on Youtube.

He will always be my Hero.

No comments yet

CSS Normalisation

If you don’t plan, you plan to fail.

Developers all know the importance of Data Normalisation and its a key planning activity to ensure data integrity, optimal data warehousing by reducing data redundancy, ease of extending database structure, etc. I really feel web designers need to understand the spirit behind normalisation when planning their designs as well.

A website have many elements, from headers to footers, navigation to utility bars, from page wrappers to content containers. And from within the content container itself there are loads of normal HTML elements such as headings, paragraphs, tabular content, lists, forms, quotes, indents and the list goes on.

So just understanding and using CSS is not enough as a large site needs alot more planning. I feel that having a planning session to determine what ID and CLASS to assign to elements is extremely important. Also keeping in mind that using Content Management Systems mean webmasters (your clients) are most likely going to use something like CKEditor or TinyMCE as their WYSIWYG editor which by default uses the basic HTML tags.

So planing for CSS Styles is actually a CSS Normalisation process in my view. Data Normalisation is about “data relationships” and for CSS its about “cascading styles“. Styles are related by inheritance and these inheritance are the relationship.

Data Normalisation Objectives according to databasedev.co.uk:

  1. Arranging data into logical groups such that each group describes a small part of the whole
  2. Minimizing the amount of duplicated data stored in a database
  3. Building a database in which you can access and manipulate the data quickly and efficiently without compromising the integrity of the data storage
  4. Organising the data such that, when you modify it, you make the changes in only one place

So let me try to translate these objectives into CSS Normalisation objectives.

CSS Normalisation Objectives

  1. Arranging CSS Styles into logical groups such that each group describes a small part of the whole
  2. Minimizing the amount of duplicated CSS Styles stored in the CSS file(s)
  3. Building the CSS file(s) in which you can access and edit the CSS Styles quickly and efficiently without compromising the integrity of the whole website
  4. Organising the CSS Styles such that, when you modify it, you make the changes in only one place

Agree? Disagree? Do share your views.

ps: If only someone can do up a simple diagram like Natalie Josy’s Standards in a nutshell to visually explain this CSS Normalisation concept, i’ll definitely stick it to this post.

3 comments so far

Appreciation of the material we work with

Today I’ve heard the best perception on how to go to the next level in craft we all call web designing and this is from a collegue of mine at work.

In the past, famous artists experimented with the materials they were using. Arylic paints, oil paints, wood, stone, clay, glass, metals etc. and in the morden world, plastics, carbon fiber, foam, etc.

I remember how Karim Rashid shared that understanding the intricacies of the manufacturing process would enable the designer the know how on how to go about designing a new product. Also the importance of knowing how to design in an efficient way so as not to compromise on the affordability of the end product.

For the web however everything is digital and there isn’t really a physical “material” that web designers work with. However we work with HTML, CSS, Javascript and the likes. These are what makes up the web. These are the “materials” that we who call ourselves web designers work with.

So in order improve ones understanding and to go to the next level of web design, take a break from photoshop and start your text editors. Start reading up on CSS and experimenting with AJax, start understanding grids, start understanding how some content management systems work, start understanding web infrastructure, start putting yourself in the shoes of webmasters who need to update the website you build daily.

This colleague who shared this with me is not a designer, he is not even design trained, but instead he is an excellent developer, a great observer. Thanks, you know who you are.

3 comments so far

Categories

Archives

@nickpan

Twitpics