CSS Tools that’ll make life easy!

Sometimes, CSS can be such a complicated thing, making sure it works on different browsers, fixing that darn IE bug, and just generally making sure it all works properly. This can be especially annoying if you are a newbie to CSS. But give it a chance, you will love it!
Below are a few tools I came across that will be easier on you and your time!

1. CSS Template Generator – with Source Code

2. YAML Builder

3. CSS Rounded Box Generator

4. WordPress Theme Generator

5. CSS Tidy

6. CSS Compressor- Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

7. Firebug- If you aren’t using this, now would be a good time to start

8. Aardvark- This is by far one of my faves from Firefox, because it enables you to fix template problems by combing through the layout.

9. CSS Layouts

10. Collaborative Javascript Debugging

There’s more where this came from! Check out 60 CSS Tools.

6 sites with really interesting header graphics!

Some really cool motion going on in the image. Excellent graphics.

I really like this toaster idea, especially the ornamental design. Love it!!!

Extremely different, needle in a teddybear. Neat background.

Very nice side bar. Inspirational.

The wood texture has been done quite a bit, but not quite like this...

Fantastic use of graphics. A little too much even...maybe, but still really good!

IE 6’s Double-Margin Bug

There’s some valuable information on ther web about CSS and the various bugs going around with the different browsers. For me this was always a big issue. So I would turn to Pookey and he would fix it. As easy as it was, I couldn’t help feeling I had to figure this out for myself!

For those who are unfamiliar with the “Double-Margin Bug”, if you float an element and then procede to add margins in the same direction as the float, Internet Explorer 6 will double the value. For example, A left margin of “10px” becomes “20px” in IE6. Well how do you fix this?

Why not try the underscore hack?
The Underscore Hack is a useful looking CSS hack. IE/Win ignores an underscore (_) at the beginning of any CSS property name, interpreting the declaration as if the underscore wasn’t there. Other browsers do not recognise the property and ignore the declaration.

#sidebar {
position: fixed;
_position: absolute;
}

Modern browsers will cycle through these properties. When they come to the underscore, they’ll skip the style entirely. On the flip side, IE6 will ignore the underscore and implement the new margins.

In addition to this there are other ways to avoid this. Such as…

Change The Display To Inline
The easiest solution, change the display property of your element.

#floatElement {
display: inline;
float: left;
margin-left: 100px;
}

Use Conditional Comments
Use conditional Comments to target different web browsers.

!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>

In layman’s terms, this code is saying, “If a visitor to your page is using Internet Explorer 6 or lower, import a stylesheet called “ie6.css”. As a result, modern browsers will ignore this statement. IE 6 and below, on the other hand, will implement the file. Now, in our ie6.css file, we’ll need to add some override styling.

#floatElement {
float: left;
margin-left: 50px;
}

Since we know that IE 6 will double the margins on floated elements, if we reduce the value of the margin by 50%, it will fix our document. This method is particularly appropriate when you have many styles that are targeting IE6 directly. It’s important to contain all of your “hacks” in a centralized location.

Tips, courtesy of Net Tuts and The Underscore Hack

Web Design Company That’s Making a Difference

I have been busy lately, with family over and what not. Rest assured it was a great time! Family always is, never a dull moment.

Last week I came across Electric Current. Who is Electric Current? They are the guys that did my church website and a whole bunch of other ones. Straight from their ‘about us’ section,

Electricurrent is a strategic communications firm that focuses on branding initiatives, design campaigns, websites and information technology. In its twelve-year span, Electricurrent has risen to every occasion, achieving over 40 awards from a multitude of companies and organizations. Electricurrent was honored for two straight years as one of the “Top 10 Christian Places to Work in Canada” by The Bridgeway Foundation and the Canadian Council of Christian Charities (“CCCC”).

They really impressed me with what they stand for and the quality of design. (They also seem to be currently hiring a web developer!) Electric Current has produced work for some high-profile ministries all across the globe (Missions Canada, Alpha Canada and many more).

They also have something called (I love this part!)Advanced Ministry.

…an affordable web and communications solution that enables churches and ministries to build and maintain an effective website, without having to compromise on quality or design.

Some amazing packages for churches or ministries on a budget. Their quality of design is nothing short of Excellent!

I only hope to be at least half of what they are, one day!

Useful Resources for Web and Graphic Designers

It’s friday again, summer seems to be passing swiftly. Had a pretty good week, mostly listening to Eddie Izzard’s ‘Death Star Canteen’, its soooo funny (some swearing involved). “Do you know who I am?” lol

Anyways, below is a list of useful websites that can help generate some backgrounds for websites.

1. Background Image Maker
2. Stripmania
3. Ajaxload

This is a blog that has some templates to display your artwork on (i.e. stationary templates, packaging templates), all with a simple Layer Options > Multiply.

Clear images for Identity Design

For Cool Photoshop, Illustrator or Css Ideas Go Here

This is a rave. A rave about Veerle’s blog. For cool photoshop, illustrator or css ideas go here.

I’ve been frequenting her blog on many a occasion and I always come away with a new trick or lesson learnt. A little background on Veerle…

Veerle is a graphic/web designer living in Belgium. Her career began in 1992 as a freelance graphic designer under the name of Duoh!. The first 3 years were mainly filled with print orientated work such as logos, stationery and brochures.

From 1995 she broadened her horizons and started designing websites and user interfaces for intranets together with multimedia development. In 2003 she discovered CSS and since then has been promoting it through her blog.

There are quite a few neat tutorials and articles even on various topics and artists. Veerle, is a true inspiration to me and I really like her flair for design.

BlueprintCSS by Google

Google has come up with a prettty handy tool…

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Features:

• An easily customizable grid
• Sensible typography
• Relative font-sizes everywhere
• A typographic baseline
• An extendable plugin system
• Perfected CSS reset
• A stylesheet for printing
• Powerful scripts for customizing your layout
• No bloat of any kind

To read more click here

Rat Race: Quit or Die Trying

“The trouble with the rat-race is that even if you win, you’re still a rat.” – Lily Tomlin

It’s Friday afternoon, another week gone by, another weekend beginning. And so it seems the cycle continues week after week. The rat race must go on. As much as I like being a part of it, I want more. I want to reach out of of my comfort zone and achieve more…oh and be able to take 3 month vacas without having to check with someone. Seems like you only become more of a salve after school, much to my dismay. I want to be free.

I read somewhere,
”Your mind is your first and biggest stumbling block when you consider breaking free of your comfort zone. Add fear, insecurity and painful experiences of past failures, and it all becomes one humongous frightful monster of a vicious cycle. You end up pushing your dreams aside because not doing anything means you won’t fail!”

The mind is a strong weapon. We can only go as far as we picture in our minds.
So here’s a few things I deem important on a journey to being a successful freelancer. Mind you I haven’t ‘arrived’ to my success point as yet, so you can either take this or skip to read some articles below.

1. Change your mindset to believe you can get there. Make goals and set dates.

2. There’s a lot of blogs and such online with really good advice on these topics. Google them, search them, read them, soak them.

3. Avoid talking about your goals or strategies to people who aren’t optimistic about it. You need encouragement, not the opposite (i think we get enough of that on the news).

4. Get yourself out there. People cant hire you if they don’t know you exist. Invest in some advertising. Put yourself up on free classifieds like Craigslist or Kijiji. Send out a mass email to everyone on your contact list, so they can forward to their friends and so on (6 degrees of separation does work). Most of your clients will be a friend of a friend of a cousin of a sister….you get my drift.

5. Granted you are starting out, but be ready to invest into your business. Marketing, printing, websites or whatever else you need. You get what you pay for, so don’t cheese out on this. Get it done right the first time, so you don’t have to keep investing.

6. Remember there will be down times, but remember your goals and keep moving ahead. If one strategy doesn’t work, try another and another…

Here are a few articles I came across in my daily browsings,

Breaking Free Of A Salaried Existence – Being Your Own Boss

A Comprehensive Guide to Starting Your Freelance Career

The Secret to Landing Clients Nearly 100% of the Time

Living, Breathing & Eating Design

A nice list of things us designers tend to do. I find a lot of them to be true. Original List from CG Files, I’ve added a few of my own in here.

1. You’ve almost rear-ended the car in front of you because you were analyzing a font on a billboard.
2. You get pissed when a free Photoshop brush you download is less than 1000px in size.
3. You’d rather study the paisley pattern on your boyfriend/girlfriend’s shirt than listen to what he/she has to say.
4. You can use keyboard shortcuts at light speed, blindfolded, but you can’t type a paragraph of text without staring at the keyboard.
5. You’ve had “Software Nightmares,” when you’ve been working way too much.
6. You consider meals, interruptions.
7. You’ve learned your lesson and stopped using the word “final” in any file name when saving.
8. You clean your keyboard more often than you wash your car.
9. You’ve intentionally given up trying to explain your projects to non-designers.
10. You see CMYK and RGB like Neo sees the Matrix.
11. You’d rather organize your desktop than your sock drawer.
12. When you heard that Adobe was acquiring Macromedia, you had a Design Orgasm.
13. When you look at Album art all you see are grunge Photoshop Brushes. (Then you see the album art a couple minutes later)
14. You’ve Photoshopped out a watermark for a comp or mock-up.
15. Everytime you come across an intricately designed site, you must take it apart and figure out how it’s done using the wed developer tools in Firefox.
16. You’ve actually $paid for a font.
17. You’ve totally slaughtered a great design concept because the client thinks he/she knows best. (everyone thinks they are a designer)
18. The amount of words you’ve written with a sharpie labeling burned discs total more than the amount of words you’ve read in novels.
19. A lot of time is spent browsing CSS websites for inspiration.
20. You’ve had to explain to a client that a layered file wasn’t part of the deal.
21. You’ve kept a ragged concert ticket just so you could scan it.
22. You’ve nicknamed the OSX spinning wheel. (and not affectionately)
23. You bookmark a resource more often than you have a fun night out on the town.
24. You’ve intentionally overbid a project because you can sniff out a bad client from a mile away.
25. You can’t go to a restaurant without secretly critiquing the menu design.
26. You download the weekly free image at istockphoto.
27. You have an amazingly huge font collection, and an amazingly short temper.
28. If you had a penny for every mouse click, you would have been a trillionaire 3 years ago.
29. Lunch break at work is spent working, sketching or thinking up design concepts for your freelance clients.
30. You cannot watch TV without having your laptop in front of you (it just wouldn’t be right!).
31. While away on vacation, your laptop is most missed.
    

Fundamentals for a good website

A website is like having a business card. Only difference is it’s online, with a lot more information than a business card and no expensive printing involved(yay to that).

Websites are very important in todays marketing strategies. Before getting your business card, people ‘google’ for a website (atleast, thats what I know when I am looking up a new restaurant or someone’s choice recommendations). Your online presence (website) is the first impression you make on potential clients. What kind of impression are you making online?

The following text on what makes a good site, is ofcourse, my opinion and is not written in stone (its been tried and true in my experience).

1. When designing a site, first comes the site map. After this, comes the design (GUI). Design the site keeping in mind one day or the next hour you might have to make some changes or additions to it. Your webpage should consist of the header(with logo), content and footer (somewhere in there should be your navigational buttons).

2. Most people are very visual and like to look at images. Have a good balance between text and images (I strongly recommend hiring a photographer for ‘your’ own shots or open up a stock image account online). If thats still not an option, use colour, just don’t be tacky about it.

3. Once you have text and images which is the meat of the site, make sure you have a good enough whitespace. You need whitespace or some of it so the reader or viewer’s eye isn’t jumping all over the screen.

4. Flash is really nice. My first website was done all flash. I am a fan of it. However, lets not have a million moving things on the website, you might think it’s ‘cool’ but it might just be too distracting and take away from the content on your site. Personally, when I see a lot of moving elements on a site, I think to myself, the company must not be confident about their product and need fancy things to keep the viewers interested.

If you MUST have moving elements or music, minimize as much as you can, otherwise just walk away from it.

5. Make your site accessible. Try some ‘meta-tags‘. Can’t hurt to get yourself some google adwords or those facebook ads. Heck couldn’t hurt to start a blog, visit other blogs and make sure to participate in comments and leave a link to your site.