Cibgraphics Design Studio

In part 2 we styled the list elements in the first 2 columns. For the last part of this tutorial we are going to go over the web form for the newsletter. Here is our design so we can see what we are going to be creating.

Our form markup is very simple with an input box, label for the input box, and then a submit button.  The markup is something like this:

The CSS is also very simple.

As you can see we used some browser specific code to create the rounded corners on the submit button. It will be styled that way on WebKit browsers (Safari and Chrome) and Firefox.  In Internet Explorer browser it will have the traditional straight corners.

The last thing to do is to create the copyright test below the columns. To make it display right because of the nature of floated items, we will need to clear the floats.  This is done by a clearing element with some simple CSS which goes right after the unordered list in the code.

We have already done the CSS for this element in part 1 when we declared the clear class.

The text on the bottom is just a simple paragraph tag after the clearing div with some very simple styles applied to it.

View the demo of the mutli-column footer. Post any questions you might have in the comment section. 

Adobe Photoshop is a very powerful tool that no graphic artist should be without. But one of the many things that slows people down is mass amount of things you can do with it. Panels can only do so much before it starts to crowd your desktop and Adobe sure has made strides at making that problem as small as possible. But one thing they have yet to cure is the mass amount of operations that you can do from the menu system.

Doing default actions in Photoshop like resizing the document to placing new smart object involve constantly going up to the menu system. That is, unless you are keen on memorizing literally hundreds of shortcut commands (oddly the place command has yet to get a shortcut).

Adobe has now fixed that problem by letting you create your own panels populated with anything you can do in Photoshop (almost). Welcome to the world of Adobe Configurator. 

I know what you are thinking, more panels. While that is true, these panels let you define your own content so they are much more useful. Adobe has created an Adobe Air application that lets you create, organize, and save any number of panels you want for Photoshop CS4 (requires CS4).

The result is a time saving pallet complete with functions just for your needs.

The program is currently in beta and can be downloaded for free on http://labs.adobe.com

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.