Cibgraphics Design Studio

We have won 1st place in a monthly design contest from WebDesignerForum. We received almost 77% (76.92% actual) of all the votes casted by the members. Thats just insane. Thank you for everyone that voted for the design. If you wish to see it, here it is.

Click on the image to see the full version.

When we last left off, we had the basics for the 3 columns but it lacked content. Time to change that. The content's code is pretty basic so I won't go over it, but I will go over how the CSS works a little. Since we are going to be doing the form next week I have omitted the code for that until we talk about it. For now it is just the first two columns.

We are going to have to do some CSS overwrites which I will explain in a minute. To do this we have assigned the unordered list the class of "posts".

Now to style the headers, lists and links.

We have not specified to take off the bullet points yet if you save and load this code they are curiously missing. This is because of the "cascading" part of cascading style sheets. If you look back at the code from the last post, we took off the bullet points off of the list elements that made up the columns. This has carried over to this list element because it is a child element of the column lists. 

We have applied a grey color for the list as well as links inside that list. By browser default the links will have a underline so we don't have to specify that.  A green color (#63bc46) will show on the links when the mouse moves over them.

On the second column we want not only bullet points but green bullet points. Even if we add bullet points how would we color them? After all there is no element for just the bullet points. The trick is that the bullet points are a part of the list item not the link. So what ever we make the list color, so the bullet point will be. So since the link is grey, we can make the list green and it will appear as though only the bullet point is green.

Also, to get it to apply we are going to have to do a CSS overwrite which basically means we are going to trump a cascading style with another style. This is done by a more specific selector in the CSS. We can use the class of "post" that we created in the HTML earlier as a more specific selector.

This does pose a problem though. What if in that column we wanted some text that wasn't a link. That text would show up green instead of the grey like we want. In that case we would have to surround that text in a span tag and style that. But since that isn't the case here, we don't need to take that step.

Next week we will go over the form and how to use some browser specific CSS in order to style this the way we need. As usual if you have any questions post them in the comment section.

A friend of mine came to me to inquire that it would be a good idea to go through and give a tutorial on how to create a oversized multi-column footer.  She wanted to know best practice for the code, as well as how to put a form for a newsletter signup. I thought this would be a good idea, but since it involves a lot of code both HTML and CSS, I decided to break it up into multiple posts as to not create a post that was too large.

The design of the footer we will be creating is a simple one that you should be able to modify to your needs. The code is minimal so if you'll need to add more functionality especially to the form to get it to work in your web server. The design is as follows (click on it to view it larger).

To get started we will need some base code to zero out any margins or padding that we have as well as to set a container for ease of use reasons.

The next code is some basic HTML to contain your footer and is making the assumption you already have the base tags for your site (html, head, body) and have linked to an external CSS file.

Getting started on the markup

To write semantic code, you need to take what you need to code and think about what kind of information it is. That usually tells you what HTML tag you need to use. In our case it is a list of information that the user needs to view. Going by logic, it tells us that we need to use a unordered list

Your markup will go in the footer div and should be something like this (you'll see why we use the classes in the next post).

To make them into columns, we need to use floats. Floats shift elements and wrap surrounding elements around it. In this case we are going to make the list items themselves wrap around each other, hence making it appear as a column. The addition of display:inline; is to so solve a bug in IE6 that causes a double margin.

Tomorrow we will go into the contents and styling them. If you have any questions so far, post them in the comments section and I will answer them.

Its sad to see the total lack of web typography when there are so many resources out there on the subject.

Richard Rutter said:

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

One of the main confusions is the difference between hyphenations and dashes. 

Hyphenations

Hyphenations are used to join compound words together. That is all. 

En & Em Dashes

En and em dashes have their own purpose and should only be used for that purpose.

En dashes (–) should be used to indicate a range of numbers (10–20). Em dashes (—) should be used to indicate a sudden break of thought ("We are going to—what time is it?").

CSS3 is quickly making headway in terms of what it can do. I will be showing some examples of some CSS3 animations.

Due to lack of support, CSS3 animations will only work in WebKit browsers (Safari and Chrome).

Fade

Place mouse on me I will fade!

Pulsate

Place mouse on me I will pulsate!

Nudge

Place mouse on me, my text will shift!

expand Block

Place mouse on me, my border will expand!

Spin

Place mouse on me I will spin!

If your company has a plain business card design, one that even looks a little too corporate, it is time to change your business card. Today, cards that are not different or memorable are simply thrown away. You want a business card that a person will keep, even if they don't need your services. Yes, you want your card to have that kind of impact. 

How do you know if your card is working? Look at your card. If you don't keep looking at it for more than 3 seconds, chances are your clients are not either.

There are multiple ways to get your business card to stand out, even on a small budget. You could have a different size, special paper or coating, or a die cut (special cut in your card). Make sure you stand out above the rest with a business card refresh.

I have been selected as a judge for the Creative Fusion Pro Awards. I am proud to have been considered and look forward to seeing and judging everyone's designs. I was also interviewed as part of the process. Read it here.

Having worked with places and clients such as Overstock.com, NBC and LG, Chris is a true wonder in the industry. His design work is fantastic and he is always striving to master the art of code. He's always striving to help others learn how to do things and do them right. Because of that, we're happy he accepted our plea to be a judge for our contests.

When you are working on a complex project in InDesign, you are usually having to zoom in and back out again multiple times. This is a complete time waster and there is a much better way to do things. InDesign has the Pages palette that shows you a small thumbnail but this really isn't an effect way to watch your overall progress.

A more effect way to do things is to create a new window, or a new view. This way you can have two copies open of the same document at the same time. What you do in one window will effect the other. To do this, go to Window > Arrange > New Window.

Once you do this, you can size your window any way you need and adjust the zoom. This also works if you need to watch several pages at one time. You can open as many windows as you need. This technique also works in Photoshop and Illustrator but with the added task of tiling the windows.

Correct typography on the web is something that few people put the effort in achieving. One mistake that is common is incorrect leading. Leading is the space that is between lines of text.

When doing leading a good rule of thumb is to make the line-height (what controls your leading in CSS) 6-7px bigger than your font-size.

Incorrect:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

For some time I have been working toying with a little Adobe Air application that can feed my blog posts out into a form that someone can view without a browser or a RSS feed program.

So far I have a pre-alpha version that is pretty basic. I am looking to add more options to make it something that people will actually use. I can't give a release date on the application nor can I give a date for a possible beta. I will keep everyone up on the status as I make progress on it.

I also plan on making a OSX widget for the same purpose but development hasn't started on that yet and wont until the Air app gets released.

I will however need people to beta test it. If you are interested please send me a message.