Introduction To CSS Shorthand

When you have been developing websites, it is always beneficial to know that there are alternatives to the long coding we do in order to fulfill what we need. Sure the old ways of CSS are fun, but what if we can shorten it, so we can focus more on the design of the page rather than the code? This is what CSS is made for: design and layout.

Let’s say you want to add an inline CSS to the body tag of your webpage. The common method of doing it using your standard CSS is this:

body{

background: url(“bgpic.gif”);

background-color: #00ff00;

background-repeat: repeat-x;

}

Let’s look back to the basics on CSS rule and what these parts are all about.

This is the common way to code a CSS. As a basic rule, the body is the selector; background, background-color and background-repeat is the property; and next to it is the declaration. If we add more CSS properties and more selections, this will be extremely lengthy and could take up much of your HTML code.

Now let’s see how it is done with shorthand CSS:

body {

background: url(“bg.gif”) #00ff00 repeat-x;
}

Now where do all the properties went? We used the background property so background-color, and background-repeat are all located in just one line.

Can we use shorthand on any CSS property? Of course, we can! Let us have a look at the most common shorthand CSS properties:

Do take note, however, that not all shorthand properties will work on all browsers. Moreover, following the syntax will get you an idea of how you can apply all the properties without problems.

The font property

The font property works mostly in all platforms, all modern browsers and any device, so you will not have problems using this shorthand.

SYNTAX:

font: font-style font-variant font-weight font-size line-height font-family

EXAMPLE:

p {

font:italic bold 12px/30px Georgia,serif;
}

As you see, I have not declared all the properties because if you do not need them, do not add them as default values need not be declared.

The margin and padding shorthand property This property is supported by all modern browsers. Do not use the “inherit” value because it is not supported on IE7 and earlier; IE8 requires a !DOCTYPE for it to work. You will not have problems with IE9.

SYNTAX:

margin: margin-top | margin-right | margin-bottom | margin-left padding: padding-top | padding-right | padding-bottom | padding-left

EXAMPLE:

p {

margin: 2em;

}

In this example, only one value is entered, but this means that it is applied to all sides.

p {

margin: 1em 2em 3em;
}

In this example, the value is applied for the top, right and left, and bottom margin respectively.

The border shorthand Border shorthand works in all modern browsers. Expect to see bugs in old and unsupported browsers like the ones in a TV or a mobile phone.

SYNTAX:

border: border-width | border-style | color

EXAMPLE:

p {

border: solid red;
}

This will display the default border width in solid style and is colored red.

p {

border: 2px dotted yellow;
}

This will display 2 pixels of dotted border in yellow.

These are some of the basic and useful shorthand properties you can use. Feel free to explore other CSS shorthand as every CSS has its equivalent shorthand.

Form Help without Popups

Shows up hint for the currently focused input.

Launch Demo/site

A list of dropdown menus

1. The drop-down in a horizontal line of links that further cscades to another horizontal line.Launch Demo/site

2. menu with THREE sub levels
Simple 4 level flyout menu

Cross-Fading Slideshow

This is a simple slideshow wich will display multiple images one at a time with a cross-fade effect.
Launch Demo/site

35mm Photo Viewer

Web-based DHTML image/photo display and browsing application.

Launch Demo/site

Form Field Hints with CSS and JavaScript

This Script shows up hint for the currently focused input.
Launch Demo/site

Creativity in the workplace

I’ve talked about this a bit at WDN with Dave in our presentation. A good idea is more likely to origin from an inspiring environment than from an uninspiring work place. I think that’s a great starting point for today’s post. Personally I think it would be great if at the end we all snap a shot of our working environment and inspire each other. How you decorate your personal space is only part of the larger picture of course.

Creativity defined…

According to the Encyclopedia Britannica Online the definition of “creativity” is as follows:

The ability to make or otherwise bring into existence something new, whether a new solution to a problem, a new method or device, or a new artistic object or form.

To me personally creativity is to master and control the random chaos in my head and bring all separate pieces together into harmony. It’s making the most out of a complex mental process.

There are many forms of creativity. We designers have a different view than for example programmers. But what people sometimes forget is that a programmer needs to be inspired also. It’s not because it looks more boring on the surface that it doesn’t have its influence on the end result. A DJ can be inspired by the reaction of the crowd to his music and know what to next.

What makes a workplace inspiring?

For me it’s hard to believe (because I’ve always been my own boss right from school) but there are people who see their workplace as a source of anxiety, stress and despair. A happy worker is creative and productive that’s what I’ve always believed. Let’s explore a few ways that can have an influence on the state of mind of the worker.

Listen

One way could be to listen to all ideas and explore them regardless of its origin. Making everybody feel part of the team regardless of his or her job description. In the case of programmers I know that some companies let their employees work on personal pet projects during working hours on a given day in the week. In many circumstances that’s the origin of a product or feature that a company later can use.

Play

Another one is let people play during work. I know for example that my friends at Happy Cog have a Wii to play with during business hours. At the Googleplex employees can shoot pool while taking a break in one of several employee lounges. They also have a large idea board and a 2 swim-in-place pools. It doesn’t stop there, Google employees can also take an afternoon volley ball break at Mountain View campus. I’m not sure if it’s still the case now, but in the past people at Apple were allowed to bring their dog. All this is in place to keep the worker motivated and happy. When a worker is happy he is more motivated and it’s not just doing it to receive a paycheck. I like to believe that a web-designer that works at such a motivating place will likely be more interested in using new methods and go the extra mile than a worker that just thinks about his paycheck. It’s all about having a passion for what you do and making it pleasant is just one aspect of that process.

Coworking

Another example of an inspiring environment could be to share it with other people. In Vancouver Dave Shea talked about him working at a shared office called ‘Workspace’. Two people who also started such a project last year are Tara Hunt and Chris Messina, it’s called ‘Citizen Space‘. It’s a nice place in San Francisco which is generally open from 10am – 6pm weekdays. They have a few residents but you can also drop by when you are in SF and use their Wifi etc. They also organize interesting things like a speaker training on the 21st of April. I’ve met both Chris and Tara and I can imagine working there must be lots of fun and inspiring. Some people also like to work at Coffee houses like Starbucks. I’m not sure if we have those coworking places in Belgium, at least not in the same setup as Citizen Space.

Decorating your workspace

For me the place around me and the things I need to look at are very important in finding my creativity. It comes down to many things like outside view, building (architecture), furniture, color, computer etc. We are still in the exploring stage to decorate our office.

Joyn

I kind of like the idea of something called ‘Joyn‘. Vitra calls it the platform for the network office. What I like about it is the flexibility that comes with it. On some projects we have to work together more closely and I like the idea of just reorganizing our desks to accommodate for that. If only they would place as much thought in their web presence as in their design : : : sigh : : :

Some examples of Joyn

Vitra - Joyn - Project: BBC, Birmingham (GB) - Photographer: Nick Kane

inspiring examples

Pixar

At Pixar there aren’t any grey cubicles because their employees have the freedom to decorate as they see fit. The end result looks amazing! My personal favorites are the little huts in a row, where each hut is a separate office.

Pixar offices

Red Bull London

That’s the most advanced I’ve seen so far to be honest. You’re upstairs and you don’t feel like taking the stairs, no problem just glide down in the carbon slide instead :) It immediately makes you feel that there’s no room for grey and tie wearing salesmen.

Red Bull HQ London

Mindlab

The Ministry of Economic and Business Affairs in Copenhagen, Denmark has Mindlab. It’s a meeting place for all employees. Its heart is an egg shaped meeting room with walls that are whiteboards so that you can write on any wall.

Mindlab

These offices were also mentioned in this post

Clearleft

The guys at Clearleft did something nice with their new office too. The oversized clothes pegs and letters are a nice touch. If I remember correctly the tables were custom built.

Clearleft office

What is your idea? How would you do it?

So what’s the perfect working space in your mind? What do you do to get it? Does it have to be modular so it can change often? What makes you feel good? I’m really interested in hearing your ideas about this subject.

Post your office picture in the group

I already did it in the past and would like to do it again, but a little different this time. I’ve set up a Flickr group called ‘Inspiring workplaces’. So if you would like to post your personal space there, that would be super! It’s my hope that this group grows to be a big group where you can go to and absorb some inspiration of other people’s working space. So go ahead and snap a picture of your desk and become a member and post it to the the group.

How to add your picture to the group
  • Become a member of the group
  • Upload your picture
  • Use ‘send to group’ and choose the ‘inspiring workplaces’
Adding the picture to the comments
  • Click ‘All sizes on Flickr for the static url and use the code of number 1
  • Make sure the width is 640px tops. If not resize it by using the ‘width’ and ‘height’ in the code

The new Duoh! logo identity

When we created the previous Duoh! logo (that is still online on my business site), our main goal was to build a more serious approach. I believe it fits its purpose, but we now feel it’s time to move on and rethink our corporate image. Let me share my thinking process with you…

Brainstorming session

Duoh!Geert and I were thinking that our current image didn’t really fit the company we really are. The old Duoh! logo presented a serious corporate image based on our 3 areas : print, web and multimedia. The logo was very business like and less focussed on what Duoh! is all about: design and most of all being creative. We both agreed after some self-analyzing that we needed a logo that showed a more illustrated style. It should be creative, fun without overdoing it and a touch of humor. We do take our job serious but we do believe that creative people have a lot of imagination and that humor is an important factor in originality and being different. Besides poking fun of oneself is better than taking yourself too seriously :)

Doodling to get inspired

So I started sketching. Geert suggested me to think about a simple icon, so that we could use that as a single identity. The first idea was to do something with a typeface, with the “o” in the name.

My very first doodling to get inspired for  the new Duoh! logo

While doodling I came to the idea of turning the “o” into a “cute” devil. I added devil horns and a devil’s tail. I was also thinking of adding a very busy colorful background illustration that would reflect our creativity. My idea was to work with a vertical illustration border that is divided by the logo into 2 parts : the top had warm colors, representing passion, the passion for our work; the bottom part showing cold colors representing the “cool” and “chill” factor shown by water and other swirly forms.

Duoh! little devil icon with warm and cold illustration artwork from sketch till Illustrator artwork

Going back to our roots

It didn’t look that bad, the creativity factor was there, but the illustration stole all the attention. If we deleted the illustration and looked at the naked logo, we still felt it was not what we were looking for. Then it hit me. Why not have “us” Geert and “I” in the logo? After all, the name came from being with 2, a couple, a “duo” in Dutch. The other “h” and “!” at the end was added because “duo” is too general and not really all that exciting for a creative business like ours. So I changed that into “Duoh!” which stands for “duo+oh!”, the “oh!” is the reaction we hope people will have when they see our work :)

doodles of couples as an idea for the Duoh! logo icon

Designing the logo shape

Now that I got this new idea for the icon of the logo, I did some more sketching and doodling of couples, man and woman faces and such. When I had a few basic ideas on paper I tried them out in Adobe Illustrator. Most of the time I don’t doodle very long for a logo. I want to try it out in Illustrator as soon as I have some basic ideas. Illustrator provides you the freedom and flexibility to play around and experiment with shapes all in a matter of seconds, minutes. Sometimes when I sketch on paper I wish I had this same undo option :) I’m so used to that.

playing around in Adobe Illustrator to get to the right Duoh! icon

Finalizing the logo shape

After playing around with shapes we ended up with a logo we both liked. I added bubbles and stars above our heads symbolizing the ideas we brew for each project and the magic we use to achieve that.

Choosing the colors

Personally I find it hard to choose colors for your own project. I end up with too many choices and being indecisive. Geert came to the rescue and the first 2 colors he chose were just perfect. They fit “us” and the office as well, since the grey is as good as the same color as the window frames of our new office. We are thinking of having our logo on one wall and maybe a light vertical illustration (of the bubbles and curls we use on our stationery) on the other wall next to our office windows.

Experimenting with colors on the final Duoh! logo

Finding the right tagline

The final Duoh! logo with taglineWe thought to emphasize our new identity by adding a tagline. One thing was for sure, we didn’t want a tagline just to have one and to sound hip or cool. We also didn’t want a tagline that sounds serious, traditional, corporate or boring. We always believed we are different from our competitors. This is a tough job if you ask me since taglines are short, max. 3 or 4 words. Geert came up with this funny tagline I loved from the very first moment: “beauty & brains”. We received the reactions we hoped for when we were wearing our Duoh! t-shirts at SXSWi. People found it smart and fun and some asked “So? Who’s brains and who’s beauty?” :) It looks like I’m brains, No? :P That was exactly the result we were hoping for. Of course we are referring to what we do, design is beauty and you need to use your (creative) brain to create smart design. After all design is about problem solving. Because of the logo icon this tagline has humor, and that’s exactly what we wanted to achieve.

Stationery design

One thing we both agreed on was to add some illustrations in the stationery design. The mistake of making this far too overwhelming was still fresh in my head, so I decided to go for a light and subtle approach. What I did like about my first illustrations attempt was the curvy rounded vertical shapes. So I decided to reproduce the same idea. The result is much different and exactly what we both wanted.

Illustration art to use on the Duoh! stationery designs

We both believed by making this illustrative effect part of our image, it would emphasize our creativity even more. People would link Duoh! more to design and illustration. This was far from the case in our previous logo. The more serious approach is something that didn’t work for us, because it’s not who we are. We like to be taken serious in our job, but I believe our track record, years of experience, list of references is doing that for us and not our logo.

Photos of the new Duoh! stationery

For the letterhead I can give you this little tip: don’t forget to add a tiny line on the left side so you know where to fold. You can also add another line in the middle for punching holes for storage in a map.

What’s next?

The task is upon us now to design the site and implement our new design into our invoice application and proposals etc. I’ll keep you posted I promise.

Just Add Heat, one of the projects I’ve worked on

Let’s talk about food, shall we? ;) One of the projects I have been working on a while ago is a website design for a company from Toronto, Canada called Just Add Heat. The logo and colors were already in place so our job was to to create a few website templates. This brings the perfect opportunity to share some basic CSS information on how the main template is set up.

Introducing Just Add Heat

If you are busy you’ll surely recognize the following scenario. Hard at it and completely gone up in your work you suddenly realize that it is dinner time but there is no food in the house or you don’t have time to prepare a decent meal. That’s were a new trend called assembly kitchens comes in. It’s a place where customers spend a couple of hours putting together a week or a month of dinners they can cook at home. That’s what Add Heat is all about, but I let the owner speak for herself:

I just opened an assembly kitchen near Toronto, Canada. While this is a very new concept here (mine is the 9th such facility in the country), these assembly kitchens are spreading rapidly across the U.S. with an estimated 1,100 locations by the end of 2006. It’s a large kitchen where customers can come and assemble family sized, healthy meals in record time. It takes about 10 minutes to put together something like a spicy chicken stir fry or pork tenderloin with apricots and raisins. We provide all of the ingredients that are chopped, washed and ready to go, plus all of the mixing/measuring utensils, and freezer friendly packaging (we also clean up!). Just Add Heat opened August 15th and in less than three weeks it has proven to be a much needed service. Part of this success can be attributed to Veerle Pieters as she created a fabulous website that is easy on the eyes and unintimidating for all. It was great working with her because she understood our wants and needs very quickly – making the birth of the website pain free and fast.

Inside Just Add Heat

It was great working with the people from Just Add Heat and a fun project and subject to design for. I’m very happy and honored they choose Duoh! for the design of their website and I’m double pleased that the business is going so well. It’s amazing how you learn about new things in other countries. Assembly kitchens isn’t something that is available to my knowledge in Belgium yet.

Setting up the template

Here is a picture that shows you how I divided the different areas of the page:

Just Add Heat template layout

As you can see from the CSS below and the picture above, I use 2 wrapper ids and within these I have again 2 content areas:

  1. body {
  2. font:75%/150% "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
  3. background:#646464;
  4. color:#666;
  5. }

The body element has the grey color as background and the primary-content-wrapper id and secondary-content-wrapper are stretched over the entire width (100%):

  1. #primary-content-wrapper,
  2. #secondary-content-wrapper {
  3. width:100%;
  4. text-align:center;
  5. }

The primary-content-wrapper id has the background image repeated horizontally. The rest of this area is filled with a very light grey color:

  1. #primary-content-wrapper {
  2. background: #f0f0f0 url(../images/bg-primary-content.gif) repeat-x;
  3. }

The secondary-content-wrapper has a border of 6 pixels at the top:

  1. #secondary-content-wrapper {
  2. border-top:6px solid #585858;
  3. }

There are probably different ways of doing this and achieving the same result. Some of you might find this piece of code a bit too basic to learn from, but from the e-mails and feedback I get I know that a lot of you are still starting to learn CSS. Hopefully by sharing this part of the project I help you to get a better insight on how to think in divs instead of tables.

However reality is, that you don’t always have total control over the outcome. So there are a few things I would have done differently code-wise, but hey, it’s already an improvement from a total table-based website. I don’t want to be a code-nazi, but the urge is always there to correct. “Let it go Veerle” that’s what I tell myself :) Further from that, I wish the people of Just Add Heat all the luck with their new business. I think I would be a regular customer if it was nearby ;)

Spraying Symbols in Adobe Illustrator

Say, you want to draw a tree in full Spring, a very green one. Not just an outline you want details too so that you actually see the leafs. Unless you have a ton of time on your hands or you’re paid by the hour, it would be a hell of a job to draw each leaf one by one. This would be one of the many situations where the Symbol Spaying Tool can be of assistance.?

Step 1 – Create a few symbols to spray with

First of all you need to create a few symbols to have a bit of variation to work with. Instead of creating a symbol of only one leaf, I suggest to draw groups of leaves and make them separate symbols. To do this, just select the group of leaves and drag & drop them in the Symbols palette. I’ve used different shades of green for my leafs.

Step 1 - Create a few symbols to spray with

Step 2 – Set the Symbol Sprayer Tool

The second step is to double click the Symbol Sprayer Tool in the Toolbox and adjust the settings to your wishes. This can be a bit tricky and you might need to experiment a bit to find the setting that fits your purpose. I’ve used an intensity of 7 and a Symbol Set Density of 5. Furthermore I’ve changed all dropdown menus to “User Defined”.

Step 2 - Set the Symbol Sprayer Tool

Step 3 – Let the fun begin and spray like you’ve never sprayed before

Once you’ve discovered the desired setting you can start spraying around. Oh and you don’t have to worry about damaging the ozone layer here, you can spray like a madman :) Just click and drag, release the mouse when you think that there are enough leaves. I usually deselect each time I’ve released the mouse. This way you have all separate sprayings, so you can move them around and rearrange them a bit if needed.

Step 3 - Let the fun begin and spray like you've never sprayed before

Step 3 - Let the fun begin and spray like you've never sprayed before

Don’t stop experimenting

Spraying Symbols in Illustrator
If you’re still not satisfied with the result, you can also tweak a bit by using the Symbol Shifter, Cruncher, Sizer, Spinner, Stainer, Screener or Styler Tool. These tools are hidden under the Symbol Sprayer Tool when you select and hold down the mouse. Think about the possibilities here in this tool and the amount of time you can save: a field full of flowers, a sky full of birds,… Ah Spring, can’t wait till it’s here. The weather forecast isn’t looking that bad for this week.

Quick and dirty report on SXSWi07

This is Veerle reporting about my SXSWi 2007 adventures in Austin, Texas :) I can’t really believe that it is over already because it feels like we just arrived in sunny Austin. The flights to Austin via Chicago went very uneventful so that’s a good thing. Returning back home we had a one hour delay in Chicago, but because of favorable winds we made up some of that time. I really had a blast this year and here’s my story if you like it or not :)

First day

After a good night sleep we had some extra time to kill before the conference started so we walked around a bit. There is a cool area around the river to walk or sit down and enjoy some warm glows on your face. It’s amazing what that can do to your body, such an energy boaster. It’s at that time I really realized how much I have been missing temps around 23° Centigrade.

The Domain

On Thursday we took a cab ride to a new shopping mall that opened that day for the first time, called The Domain. Like everything in Texas it’s quite big, so we did some shopping. I ended up with some free goodies like a set of cool looking vases from Macy’s. They will look nice on our new furniture :)

EllisLab formerly known as pMachine

Talking about pMachine now a company known as Ellislab. I was totally blown away by the magnificent design metamorphose by Jesse Bennett-Chamberlain. This complete re-branding has to rub off some of the greatness, and spread the news about one part of it namely ExpressionEngine. So you can imagine it was the event that I was looking out for on Saturday evening. The pMachine meet-up at the Moonshine grill where we had some good food and drinks. Meeting Leslie Camacho, Rick Ellis (CEO of EllisLab), Derek Jones and Paul Burdick was such a nice and warm experience. It was an honor for me to meet the people behind the tool I love working with. Finally I also got the chance to talk and hang out with the man behind the design as well. The next day we’ve spend lunch together at the Iron Cactus and talked about life and how it came together. Rick you rock for building such fabulous team :) This is what I love about SXSW: meeting people, new people or people you know but never met face to face before. I made quite a bunch of new friends this year, more then last year.

SXSW, the sessions

I have been enjoying and being inspired by some of the sessions that I went to. The only bummer was that this year it seemed that most good sessions had to compete against each other in the morning so that you had like 3 choices and later that day there was nothing really that interesting to attend. The so called power sessions can be a good thing for certain topics but the ones I saw felt like cramped because the speakers needed to rush. A good example of that would be Grids are Good by Marc Boulton and Khoi Vinh. There is a truck load of info to tell and they had to fit it in 25 minutes. I left with a hungry feeling for more because it was so interesting. You can see some of the mockups of this session.

My own session

My own session Design Workflows with Jeff Croft, Bryan Veloso and Kelsey Ruger went pretty well. Didn’t prepare myself really, except for a few notes in the green room. I think if you speak in a panel you just need to have a few bullet points just as a guidance. For the first time I wasn’t nervous and I felt rather comfortable on stage. The only little downside maybe is that I hoped to have talked a bit more about design, meaning more hands-on practical stuff. All in all I guess we all did fine and it was an honor to talk with these panel members. There is a mini site about the panel that contains some resource and interviews with other people about their routines.

My 3 favorite sessions

A Field Guide To Finding Inspiration

On Saturday the session that I enjoyed the most was the one with Jason Santa Maria and Rob Weychert about A Field Guide To Finding Inspiration. Rob and Stan are a good match and I can’t believe how much fun those guys have with all their special costume parties. If you see the slides you’ll know what I mean. Rob also showed Virtual Stan who still makes me laugh every time I see it. You can already listen to the podcast, download the slides or watch a videoclip.

Ajax Kung Fu Meets Accessibility Feng Shui

I already missed Jeremy’s session with Andy Budd called How to bluff your way in to Web 2.0 (video and slides), so I was glad I could attend Jeremy Keith’s other session about Ajax Kung Fu Meets Accessibility Feng Shui with Derek. The conferences before there was always this coincidence that our sessions were at the same time as well. So I was really looking forward to this one all the more because Derek Featherstone is a guy who makes accessibility sound sexy, and I tell you, he keeps you focused. I loved the practical examples they were showing. You actually learn something and even though the subject is rather technical for a designer like me, all of what they were talking about made sense to me. Jeremy has a way of doing that, making something complex sound easy, he does that very well in his book DOM Scripting too.

Web Typography Sucks

On the last day Richard Rutter and Marc Boutlon talked about typography. The title was Web Typography Sucks. The session covered the use of proper characters, vertical rhythm & browser defaults on margins, layout of lists, font stacks & choice of type faces, the relationship between type and grids, and discussion of where typography is in the design, development and production process. To me personally this was the best one of the whole conference with interesting examples. I left with the feeling that I really learned something. Can’t believe it was Richard’s first one as he handled it like a real pro. You can download the slides and see some resources on webtypography.net.

Tip for next year parties

To everyone I talked with, people love going to these parties, but they all find them much too loud. I wonder why they always have to turn up the volume so loud that you can hardly talk to each other. It is rather ridiculous since these events are just about meeting new people and making new friends. Buzzing ears before you go to sleep and loosing your voice because of the shouting is the result you have instead. Somebody should setup a lounge area with comfy bean bags, or like Shaun said, mattresses and ask Miguel Migs to play some San Franciscan chill/lounge tunes. Man I would be SO THERE! Not going into the drinking part and the headaches, this is something you have (or have not) under control :) Oh and this year the people from MediaTemple though it was a splendid idea to create a VIP area where only so called “A list bloggers“, or whatever their criteria was as Important People could enter. Yep, you got it right, with ribbons to close off the area. Plus, you needed a stamp to get in. They offered and I refused, just out of principle because I HATE the fact that it makes me more important or cool than any other person. I’m just Veerle dammit! I wonder what they were thinking here? It got me and Geert annoyed and it left me with the thought that this is just the kind of thing what SXSW is not. It’s about the people and the possibility to talk to everyone, celebrity or not. If this makes me uncool so be it.

Helvetica movie

On the last day I had the opportunity to see the world premiere of the Helvetica movie. Never thought a film about a typeface could be so interesting and inspiring. An immediate urge to play with fonts and sketches was a direct result. If you ever get a chance to see this movie, I highly recommend it.

Podcasts and video

Eventually all sessions that were recorded will end up as a podcast here. The video page is also up now. I will add them to the articles when they become available.

Making your business cards dynamic in Illustrator

Do you often have to create a page filled with the same business cards, stickers etc. nicely arranged ready to go to the printer? You know you don’t have to copy and drag them “manually” on the page. There is a much smarter way of doing this…

Step 1 – Create your business card and group all objects

First create your business card with crop marks and everything all set. When finished group all objects.

Create the business card and group the objects

Step 2 – Apply a Transform Effect

Select your business card and go to the Effects menu. Go to Distort & Transform and choose Transform. Check the Preview option so you see the effect live. Enter 3 in the copies field, -65 mm in the vertical field under the Move option. So we’re duplicating the card 2 times under each other.

Apply the Transform Effect on the card

Enter the data in the Transform Effect's box

Step 3 – Apply a 2nd Transform Effect on top

Now, we’re going to add a 2nd effect on top of this one to have this column duplicated to the right. With the original card still selected, go to the Transform effect again and ignore the alert message box, because normally you don’t go to the same effect twice. You use the Appearance Palette instead and edit from there. In this case however, we ignore the warning and click “Apply New Effect”. Enter 1 in the copies field and make sure Preview is checked again so you see what happens. Enter 92 mm in the horizontal field under the Move option. Woohoo! Look at that! A whole page of cards! But wait, it’s not done yet :)

Step 4 – Watch the magic

Now, just to show it’s magic and power, edit the name of the business card or any other data. All cards are updated automatically! Cool isn’t it? If you want to move the cards. It’ll move all duplicates as well, that’s also very handy.

Step 5 – Create a Graphic Style for later reuse

There is more magic to show. Select the card again and drag it into the Graphic Styles palette. You’ve now created a style that you can apply to any other business card with the same dimensions. If you create a new card, group all objects, select the new card and select this new style you’ve just created in the Graphic Styles palette, it’ll automatically duplicate your new card and create a full sheet of cards! What a time safer that is! :)

I’ve used this technique a lot for stickers and business cards and it has saved me a lot of time instead of duplicating them “manually”.

All credits of this article go to Collin Smith from Adobe. To my knowledge he invented this technique a few years back. This technique works in version CS or later.

Choosing color combinations

All important but often elusive: tips on creating your next color palette

Color is a subjective experience, it is a mental sensation, a reaction of our brain. We say that an orange is ‘orange’. But is it really orange? How do we know? We cannot get outside of our eyes or brain to find out, but we do know that when the sun or light disappears; color vanishes. We take colors for granted. It’s only when we are actually drawing or painting that we realize how much value color brings to our daily life.

Color theory in a wrap

cover image of Design of Flight magazineTo learn about color, you first need to understand the structure of color. A color wheel shows us how color is structured. We start with the three primary hues: yellow, red and blue. These are the basic building blocks of color. Next we have the three secondary hues: orange, violet and green. Then follows the third generation or third level: yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green.

The color wheel (See Figure 1) shows us which colors are opposite to each other on the wheel. Blue is the opposite of orange, red is the opposite of green, yellow-green is the opposite of red-violet. These are called complements. Furthermore, we can divide colors into warm or cold colors. The colors on the bottom right, derived from blue are cold colors, those derived from red are warm colors.

Which color is suitable for which purpose?

Sometimes finding the right color combinations can be really hard, especially if you have to start a project from scratch. If your client already has a logo, a house-style or branding guidelines, you have a starting point. But if it’s your job to design that house-style, the first thing you should do is decide which style the logo should reflect. And with style comes typefaces and colors. Color plays a major part in all this. It symbolizes a certain mood. Does your house-style need cold or warm colors?

Colors reflect a certain personality. They also have several meanings, most of which are closely connected to each other. For example, blue stands for sky, heaven and water. It reflects freedom and peace, but it can also mean cold, protective, authoritative or technical. Red is the color of blood, it reflects courage, romance, but it also means hot, dynamic, vital, commanding or alert. All these symbolic connotations are perfectly visualized by Claudia Cortes in her Color in Motion, a real treat for the eye (the eye has its claims too).

You may not be superstitious or believe that colors have actual meanings, but you ought to consider them. Whether consciously or unconsciously, we consider those meanings when we judge an artwork or design. These generally accepted meanings often play a role in determining whether we like or dislike what we are looking at. Darkness will always suggest danger and mystery.

Colors effect us psychologically regardless of any symbolism, because in some cases they don’t apply; it all depends on the circumstances. For example, black may signify mourning, but a tuxedo is also black and it signifies elegance. We all prefer bright vibrant colors over dull grey, but sometimes grey can be stylish too; it all depends on how we apply it in our design, it depends on the circumstances. But we should also be aware of the fact the meanings of color are different depending on the culture. For example, in most Western cultures, white symbolizes purity and elegance, cleanliness. However, in many Asian countries, white is also a color for death and mourning, and used for funerals. As with any design endeavor, make sure that you don’t only understand the psychological effects of colors but that you also know the nuances of the culture and audience you are designing for! This way you’ll have a better chance of success in achieving the emotional impact you want.

What makes a nice well-balanced color combination?

To define the colors for your project, choose a set of colors that fits with your client’s logo. This color set should be limited. This way, you get a stronger brand or identity. The overall use of too many colors could result in chaotic and unintended effects. It can get your design totally out of balance. In other words, it will loose its style and personality.

fig.1 color wheel illustration - fig. 2 examples of complimentary color schemes that are pleasing to the eye - fig. 3 examples of complimentary color schemes that don't work; they feel out of balance and inharmonious

When you choose your shades, there are a few things you should keep in mind. First, there should be enough contrast, and secondly, it might be advisable to have one complementary color. For instance, if you have a set of three colors, Color One should be in contrast with the Color Two and Color Three. Alternatively, Color One could be a complement of Color Two or Color Three. Using complements is not exactly necessary but it can help you achieve nice results. (See Figure 2) Using contrasting colors is important to achieve an interesting well-balanced design. For example, try to have two light colors and one darker color. Or you can have a light color, medium light color and a dark color.

Too much contrast can result in a restless or even aggressive design. (See Figure 3) It might of course be your intention to achieve this effect, but if so, make sure that the eye has some resting place in your layout. A rest-point is (I believe) necessary to keep it all in balance. You see, besides using the right color combinations, you should also think on how you dose these colors. Try using them in the right proportions. For example, use the lighter color for the bigger areas like the background and the most vibrant color on the items where you want to attract the attention to, like the logo or title. The middle colors can be used for the text and other items.

Using one complementary color can even increase the ultimate effect, but there’s a bit of a catch to this method. You have to be sure to apply them in a subtle way. If you excagerate and get it out of proportion things will get too overwhelming (See Figure 5). If colors are wrong applied or don’t go nicely together, they can make your design rather unharmonious. It’s up you to find out what is suitable or not, after all, colors are a subjective experience. One might like the combination while another doesn’t. So what makes you have ‘good taste’ in colors? Tastes differ, we all have different meanings of what is attractive and what isn’t. Yet still, the world would be unbearable if there wasn’t some general agreement. Luckily, by following these simple guidelines, you’ll have a better chance of achieving the optimal result. If you get stuck, you might find Adam Polselli’s Get The Look a nice source of inspiration on the latest color trends and styles.

fig. 4 examples of color schemes that use the right amount of contrast - fig. 5 examples of color schemes that are too high-contrast  - fig. 6 examples of color schemes that are too low-contrast

Color inspiration

It’s been said before, but bears repeating: inspiration can come from anywhere. Always keep your eyes open for color combinations that you like. Examine photographs, pay attention to the vibrant colors of nature, and most importantly, keep experimenting!

fig. 7 color extracted/derived from the photo

More color resources at my link list.

Since Design in Flight isn’t available anymore, I thought I publish the article I’ve written about color combinations for the magazine in April 2005. Many of you probably missed that one and I thought it couldn’t hurt to publish this on my blog here for you to read and hopefully to learn as well.

Web Directions North, the story

Web Directions North is over and I am still sick, but at least I now had the doctor coming over and he prescribed me some medication. When we arrived in Canada we hang out with Jeremy Keith and Dave Shea and enjoyed the local coffee art as you’ll see when I upload my pictures. It’s really cool what they do with the milk. You got to see them doing it to better grasp it but they wouldn’t let us film it.

The conference and my session.

One big disadvantage of having to speak on the last day is that you don’t get to see the sessions because you use the extra time to prepare and rehearse. It’s in my nature to try to make things as perfect as possible. From what I saw and from what Geert told me the conference was very well organized and everything started on time. John, Maxine, Derek and Dave did a great job in making this a success. One of the more fascinating things that Geert told me is a new way of embedding Flash into a webpage via CSS. It’s something that Aaron Gustafson came up with and I’m sure we will hear about it a lot in the coming weeks. I’ve always known Aaron was a really smart guy :)

Before it was our turn I felt that my energy level was way too low and I felt tired. I had this feeling the day before too. I had trouble concentrating and such, a headache, trouble sleeping etc. I thought OK, this is just a jetlag. So at lunch before I got to speak I forced myself to eat something more then just a salad and hoped that this would do the trick. I kept saying to myself, “you’re gonna do fine”. The first part of our talking worried me since I had to speak for a while and I had trouble remembering all the sentences while I was rehearsing. I though OK, if I have my notes with me I’ll be fine. That was such stupid mistake. I should have just kept keywords and bullet lists with me not the full notes. The first part didn’t go well at all, the 2nd part did and I enjoyed that part. I didn’t rehearse any of that, for me this was easy and it was entertaining I think. There was some laughter now and then. Guess I learned my lesson not to try too hard or it blows up in your face. The 3rd part was also OK and the 4th part…we’ll we never got to the 4th part. People were asking questions in between and that broke our schedule totally. I got the feeling I only said 50% of what I prepared. I’m still not sure how I feel about it all to be honest. Lots of people came to me they really enjoyed our session so I’m happy to hear this. I’m hard on myself, I’m a perfectionist :) I try to remember part 2, the Geeky Chix part which was fun. Dave being the client and I the designer. I hope to launch the site pretty soon (before I leave for SXSW).

The final session of Jared Spool was the only session I saw and it was really unbelievable. Man is he an entertaining speaker and even when I was already half sick I still managed to hear all of it.

Skiing

On Friday Geert and I did a half day of skiing so that was nice and I was glad that I still had it in me after all those years. I had a terribly headache but I forgot about it when I was at the very top of Whistler mountain, skiing down with the iPod earplugs in. Geert waited for me in the mid station so I was on my own skiing my own speed. I was following signs but then it appeared I wasn’t following the right ones and I had to ask directions. A couple handed me a map since they could miss one. I was going in the wrong direction but thanks to the map I made it back just fine. I just skied a bit faster to make sure Geert wasn’t worried. It’s really a long way up to the very top and a long trip down, which is wonderful. Geert did pretty well too for his second time. Whistler is nice but just too bad it was foggy and grey. I really would have liked to see some blue skies and sun. After the skiing we went to the Microsoft lounge to eat and talk. They did a great job in making us feel comfortable and supply us with everything we needed. That’s when I started to feel that my voice was going completely away and my throat was really soar. I did loose my voice for a bit already at the party the evening before but I thought that was just because of the music and trying to talk above it. I also had this terribly headache that wouldn’t go away. I just thought it was because I was tired but apparently there was more going on. I stayed in the lounge the rest of the afternoon since I wasn’t up for anymore skiing. It just took all my energy already.

Being sick in foreign country

The next day was the worst day in my life so far. My head and throat did hurt so much that even moving on another side in the bed was too much. I couldn’t get out of bed, I cried because of the pain and also because Geert needed to wake up at 6 am to return the ski boots. He was already starting to feel the same thing only he thought he could make it through the day and didn’t want to bother someone else with all the returning hassle. Since then the story is that we both stayed in bed as much as possible to get better for our long trip back home. It’s on those occasions you suddenly realize that all those other countries may be bigger but that they could learn a lot from our healthcare system. In Belgium the Doctor is only a phone call away no matter if you stay in a hotel or not and that’s what is really missing here. I feel for so many other friends who are now suffering from the same thing too. It’s like a virus that invaded the conference in one hard swoop.

The journey home and another British Airways delay

On our last day we tried to rest as much as possible to store enough energy for the long journey home. I felt a little bit better. After a hectic taxi ride during rush hour we arrived at the airport ready to drop our bags off. Only minutes later we learned that our flight was delayed from 20.30 till 21.45. Another delay that screws up our connecting flight from Heathrow to Brussels. So the same horror story as before when we finally arrived in London.

British Airways commercials on the plane shows an air hostess picking up a little doll dropped by a child telling you they care about you the passenger. Too bad reality is more like an air hostess with an attitude that says “nothing mush we can do about it” when I told her in a friendly way that it was like a horror story repeating itself. Or a person behind flight connections that does sigh everytime she needs to get up or promises us that they will let the airport taxi know we are not coming. We finally arrived at home at 22.15 because you already guessed it BA didn’t let the airport taxi know. Now we are still both sick as a dog and the doctor just said we have the flue. Now I am going back to bed so that I’ll be my old self as soon as possible.

Stuck in London

So after the big rush to get ready for trip I was so glad that we made in time. To make everything go as smooth as butter I checked in online at the British Airways website so we didn’t have anymore unnecessary delays. The airport taxi picked us up at noon and we arrived at Brussels Airport at 12.45pm. Plenty of time to relax a bit and wait for the information board to show the right gate.

The horror story of British Airways

Only 40 minutes before the departure time the gate showed up and we proceeded to the boarding area. 20 min before we should take off they all of a sudden announce that because of the fog in the morning on Heathrow our flight would be delayed by one hour. Now you have to tell me how they manage to react so slowly when the trouble was going on since this morning. We checked in online at 11am so you would assume that they already know that the rest of the day would suck ass and there would be cancelled flights and delays. No, they didn’t or they just don’t care. The lady at the boarding gate doesn’t know any information because she is employed by Aviapartner and they are hired by British Airways and have no access to the system to make any changes.

SN Brussels Airlines ROCKS!

So what to do next? They don’t tell us anything. We don’t know if we would make it, we don’t have any certainty that we would get a hotel etc. So Geert and I went to the service desk of SN Brussels Airlines instead to tell our story because there is nobody else in that terminal. The super friendly lady did everything she could for us and made some calls to insure us that we would be looked after in London. So it’s true THEY CARE about the customer at SN, even if you are not traveling with them. I’m a glad my trip to SXSW, Texas is with SN Brussels Airlines.

Can it get any worse?

YES it can :) So we went on finally and would touchdown in London with approximately 25 minutes to get our Vancouver flight in the same terminal 4. Almost 15 minutes before landing they announce on the plane that all passengers to Vancouver and Cape Town need to move to the front of the plane because somebody of ground personnel would meet us. This sounded promising and we got our hopes up again that we would still make our flight. If you think about it why else would they go through the trouble? Once out the door we saw a guy waiting there with a sign just to tells us our flight is gone and we missed it!!! Can you believe that? It’s like putting in the knife in a little deeper and turning it around a bit. He is standing there just to say we need to talk to connecting flights that’s it. What a waste of resources! To make matters worse we needed to go through security just to talk to some REALLY unfriendly guy that only says “well your flight will be tomorrow and we will put you up in a hotel.

That’s the least they can do right? I don’t know about you but you would expect a bit of comfort and some friendliness to ease the pain. The only other explanation from him was that we would need to take the hotel bus to get to it. What he forgot to mention is that we first needed to go from terminal 4 to terminal 1, 2 or 3 and then try to figure out where the bus stops exactly. After some running around finally somebody told us we needed to take to Heathrow Express to the other terminals.

The Hotel

The Renaissance Heathrow is not that bad room wise but the rest pretty much sucks. We got a dinner and a breakfast that was ok but if you would like to inform family you needed to pay 2.5 Pound per minute to call to Belgium. No Wifi in the room, at least not free. You need to pay 17 Pound for high speed internet to be precise. So you would expect that in the Lobby you’ll have access, well guess again because you need to pay too, 5 Pounds to be exact. That’s unbelievable and a complete rip off.

My conclusion

When we got our flight the next day the guy checking us in was friendly and he tried to do an effort to give us seats next to Jeremy Keith but the system didn’t allow that. A wasted opportunity to correct a bad situation to something better. It was my first time with British Airways and my last time or they have to convince me this was a one off. Otherwise I don’t recommend them to anybody because what they did is unacceptable. No trained or friendly staff and nowhere to turn to, late information and go on. British Airways if you are reading this your employees need an attitude update and I suggest you come look at the staff of SN Brussels Airlines soon to be Brussels Airlines how it is done.

Web Directions North, not packed yet!

Sunday morning here in Belgium and I still have to pack our bags for the trip to Canada for Web Directions North. They pick us up in 3 hours :) That’s an example of how hectic things can get when you are trying to please clients by doing as much as humanly possible and tying up loose ends.

Preparations and working, a challenge

It has been a challenge coordinating the two things to be honest. On the other hand it has been fun working with Dave preparing our talk about “The Design Process”. It’s all about workflows and design processes and I think we have some interesting material to present. It will give people a good idea of how Dave and I approach things. From what I seen so far John, Maxine, Derek and Dave have managed to get a stellar conference of the ground.

First time to Canada

It will also be my first time to Canada, a country that I always wanted to go to. I’m excited to get to know Vancouver a little better and to get the camera back out to snap some shots. Luckily I’m gonna take a little breather after the conference to hang with the Paris gang and reload the batteries. Much needed to get the creative juices flowing :) The trip will be even more awesome since I just learned we are on the same flight as the one and only Mr. Malarkey, that should make those 9,5 hours more interesting I hope :D

Don’t worry I’ll keep you guys in the loop and be sure the tutorials will return too when I am back. I have some interesting ones in the pipeline for when I find time to actually do them ;)

If you now excuse me I’m off finishing packing: underwear check, toothbrush check, ski pants … I’m so excited! :)

Implementing titles in ExpressionEngine

Implementing the title element in your ExpressionEngine templates is easy once you’re getting more familiar with the EE tags. For those still learning the first steps in EE, this will help you creating nice dynamic titles. I also share a tip on how to avoid a messy title bar in case the URL is broken. Learn and enjoy! ;)

Assign a variable

First thing you need to do is assigning a variable to your weblog’s name. This will make things easy if you want to (re)use this name in your template.

Implementing titles in Expression Engine - Assign a variable

The name of my (main) blog is “veerle_blog”. So I assign the variable “my_weblog” to this name. Everywhere I use the variable “my_weblog” in the EE tags, EE will know that I’m referring to my main blog, “veerle_blog”.

Implementing the EE title element

Between the opening and ending tag I’ve placed the following EE tags:

Implementing the EE title element

Let me clarify this. If you look at the titles of my pages, you’ll see it’s divided into 2 parts: the name of the blog and the title of the article separated by a pipe. In the first part I call the “weblog:info” tag where I use the variable “blog_title” which will display the “Full Weblog Name” name. In the second part I call the “weblog:entries” tag where I use the “title” variable which refers to the title of the article.

Avoiding messy title bars

A while ago I added an extra parameter to solve the layout errors when someone doesn’t enter the full URL or if the URL got broken. This was simply done by adding require_entry=”yes” in each EE exp weblogs:entries tag.

Implementing titles in ExpressionEngine - Avoiding messy title bars

If you don’t use this parameter, things will get messy in the title bar of the browser if the URL is broken. Adding this parameter solves the issue.

Float by Max Longin

Sometimes I am surprised what is out there and one item that qualifies nicely into this category is a custom made bed called “Float”. I think it’s fair to call this bed design innovative.

Float my boat

In fact I only am aware of one other bed that raises an eyebrow or two. That bed is designed by a neighbor from Holland called Janjaap Ruijssenaars. It’s a magnetic floating bed with enough magnets to keep 900 kilograms (1,984 pounds) floating in the air. The price will put you right down to earth since it costs a whooping 1.2 million euros ($1.53 million).

Magnetic bed by Janjaap Ruijssenaars

Float by Max Longin

The German designer Max Longin based the idea of this bed on a suspended bridge. He explained it as follows:

I sat in the middle of a suspension bridge and perceived its smooth movements—it seemed perfect for relaxation and sleeping.

Handcrafted and hand-finished

It’s held in place by four stainless steel cords attached to a frame of wood rods connected by steel bows. That way the Float’s mattress platform rests free of the floor just like a suspension bridge. It is able to absorb shocks as well as a weight of 1,200 kg (2,645 lbs).

Float by Max Longin

You can choose from the following hardwoods: ash, beech, cherry, elm, maple, oak or walnut.

Transportation case and patented connectors

Its components can be configured to become a compact transport case when the piece is dismantled. I always say, the perfection is in the details.

Float transportation box

Float by Max Longin

For the connection between the wooden rods and the steel bows simple and effective elements have been developed.

Float by Max Longin

Since this is completely hand made the price is in the higher regions. It starts from 3,960 Euro/$6,200, included are taxes, freight, freight-insurance and fees. When you bought one I think it’s safe to assume it will impress visitors. More info at the Max Longin website.

WDN Scholarships

Maxine of Web Directions North just brought something really unique to my attention, a first timer in our industry. If you are a full time student in the field related to the web industry you better listen up!

30 lucky students

As conference organizers, speakers and attendees, Dave, Derek, Maxine and John have long been aware that while a good conference can be an unbeatable benefit for your career, they are definitely out of the price range of those in our industry who might benefit most – students. That’s why they introduced scholarship pricing for students. 30 lucky students are able to buy conference seats at $195 (CDN) each.

Web Directions North - Vancouver, BC, Canada - Feb 6-10 2007

To qualify you must be a full-time student in a related field (design, computer science, or a specific web development course, for example) and not currently in professional employment. I can image that these babies will be hot so hurry and go to the registration page and enter the following code to receive your special discount: WDNSCH.

Looking forward to meet some new people and old friends in less than a month.

No more lurking! It’s De-Lurking time again :)

I know that you are there so don’t try to deny it. I’ve seen you hiding all this time but no more :) It’s De-Lurking time again, that time of the year to leave that safe place and come say hi to all of us.

What exactly is De-Lurking?

The term is used for people that read blogs or join chat rooms or newsgroups and don’t participate in commenting. The readers that just look around because they don’t have anything to add to the discussion or because it’s already been said. Does this sounds like someone you know? It’s something that got orginally started by Sheryl from Papernapkin.

Don't be shy and hit that keyboard NOW!

You can do it…

Last year 370 brave souls overcame their fear and left a comment, so that should be the target :) A lot can change in a year and I’m sure many newbies have arrived since then. This is your opportunity to let me know who you are (newbie or not, it doesn’t matter), what you do and where you are from. I always wonder if all of you are graphic designers, web designers or coders etc. Crossing my fingers that there are some geek girls out there too, female power you know :D It’s also the perfect opportunity to pitch some ideas for future postings. I always listen and try to incorporate some of the ideas.

2007 will be an interesting year for this blog too because I have some exciting things planned that will be revealed soon. I’m still working out a few things but it looks very promising so far. If all goes through I’ll be able to give away a few things on a regular basis :) I also can’t believe that I will be in Canada arround this time next month for Web Directions North. If you’ve not signed up already please hury because the extended deadline is January 14th for the $895 early price.

So don’t be shy and hit that keyboard NOW!