Majority of the designs on the web now are powered by the CSS. These Cascade Style Sheets seem very simple therefore it is often ignored. Designers need to understand that CSS can be an extremely powerful language if used properly.

Due to it’s simplicity it is believed that anyone can just code templates in CSS, but there is a reason why the experts and gurus are still at the top. That is because they follow the top notch CSS principles. I will share some of the tricks that I have learned after talking to multiple designers over the course of my career.

1. Use CSS Shorthand System

This seem like a very simple trick but like I said it is the simple tricks that makes you a pro. Beginners / Newbies often ignore this feature. It takes a while to get used to of it, but once you do you save yourself a lot of time, and you are making your CSS File smaller. To give you an example of a CSS shorthand system would be:

Lets say you have a div class that you are setting padding to. Instead of saying padding-right: 0.5em; padding-left: 1em and so on you can just use padding: 0 0.5em 0 1em; It goes like padding: top right bottom left;

Same goes for the margin. Another example would be setting borders – border-width:1px; border-style:solid; border-color:#000; You can simply say border: 1px solid #000;

This type of techniques will help speed up the process and it is one of the principle code that is followed among the top notch designers. [Source]

2. Essence of Class Names

Appropriate Class names define an expert designer. You might think it is useless and a waste of time. But by naming your classes efficiently, you are comforming to the standard, and you are increasing your reputation in the community. How so? Well when you design a website, that client might not always stick with you. They might branch out, or get their own design department. Now if you have a well guided CSS class names, they would get respect for you. Forget the respect, it just makes it easier for others to understand your CSS.

Lets say you name a class .rssbox or you can say .sidebarbox well there could be multiple elements in the sidebar, so you don’t know which one it is. Naming it .rssbox is probably the way to go. It might take the extra 2 seconds, but putting thoughts into class names is worth it.

3. Center your Layouts with CSS

Centered layouts are the future of the web because it allows designers to be more creative and it just looks better on the screen. Alot of sites use tables to center and use divs the rest of the site. The fact is that most people don’t know how to center the layouts using css.

It is very simple actually. Lets say you are calling your class .main-container{margin: 0 auto; width: 950px; text-align: left;} whereas your body css would look like body{text-align: center;}

This should get the job done just fine. This method helps your website looks organized and neat.

4. Using the Correct Doctype

DOCTYPE is a key solution to alot of CSS Problems. This is a crucial part of design which gets overlooked very often. Using an incomplete or outdated DOCTYPE or no DOCTYPE at all throws the same browsers into Crazy mode, where it assumes you’ve written old-fashioned, invalid markup and code.

So Basically I am saying that if your site is not looking like how it should in all browsers than this could be one of the problems that you need to check.

5. Use Notes within Your Codes

It really helps when a CSS file is well guided. You need to divide the css files into sections. For example header section, content section, sidebar section, and footer section. Obviously a complete site is more complex and may have more sections. But this is what you should do. This way you know exactly where to look for when you encounter an error, or when you want to change something. Well how do you make these notes in your css file?

You add /* Notes */ in your css file. I learnt this technique during the latter part of my career. That is why now I try to add as much notes in the css file to help. Specially if I am designing a free theme.

6. Keep Your CSS File Small

You need to keep your CSS file small because it helps the load time of the site. How can you do that. Remove unnecessary characters, and spaces from your CSS File. Embracing Short Hands as mentioned above will do this for you. Another technique alot of CSS Experts suggest is that you keep your codes in one line.

For example if you have

body{
background: #fff;
color: #333;
font-size: 9pt;
margin: 0;
padding: 0;
}

You should instead use

body{background: #fff; color: #333; font-size: 9pt; margin: 0; padding: 0;}

Because this cut the space down. I personally don’t do it that way because for me it is more organized the other way, but I have seen this done alot. You can take your pick.

7. Don’t Force the Codes

CSS is a simple language, but when you force the codes, it ends up breaking your website. What do I mean by forcing the codes? Well forcing a code is when you set width and margins at the same time. Have you ever opened a website and saw the sidebar scrolled all the way down to the footer below the content. That is just one of the common problems forcing codes can do.

A good advice to take would be if you set a width, then don’t set margin or padding. And if you are setting a margin or padding, then don’t set a width.

Using a box style template system can cause alot of problems if you use percents in your design structure. Note if you are using a box style system without percentages then you can force codes.

8. Use px instead of pt or em for fonts

Are you designing a website for the web. I hope you are. Well than you should be using px for your font sizes. I mean you can use pt system as well, but you might end up getting different results in the browser. If you are thinking about users printing your site than stick with pt but if you want the accuracy go with px.

I personally use pt for balkhis because alot of my users print the articles to read. Just remember that at the end day it is your own choice because I can’t enforce anything on you.

Great Article on CSS Font Size Selection

9. Avoid Hacks

It is becoming more and more acceptable to use hacks in the CSS community, but experts still preach that you should avoid using those. I would be another one to tell you that you should not use CSS Hacks. Reason is simple. You are avoiding simple problems and looking for more complicated ones. While you may think that one or two hacks every now and then won’t hurt anyone, getting into the mindset of “hacking through” any problems you encounter can have a negative impact on your overall design mentality.

Always Validate

I give this advice to not only designers but programmers also. If you are spending time to code a website than might as well validate it with W3C Validator. Validating your code allows you to clean up any problems and ensure that it’s going to work well for all of your visitors.

Now often designers do this job and programmers leave it out. Specially you will have alot of plugins that are not css valid. You might fix them once, and if the update comes out, there you go more work. That is why Balkhis is not CSS valid right now.

Well anyways these are the 10 top notch CSS Principles that I have learned from the experts and my own experience. Feel free to put your own down in the comment box. If you like this post then all Social Media love is appreciated.

This past sunday, I wrote a post about 25 Sure-Fire Ways to become a better Designer, and in that post I mentioned as step 25 you need to stay updated. Stay updated with the news, inspirational sites, and new technology.

Well in this post, I will share with you guys 15 very good websites for designers. These websites I check almost every other day if not daily. I can guarantee you would learn alot of skills from these sites, and they will make you a mind blowing designer because of the tips and trick you will learn. Sit back and relax, and get ready to subscribe to these sites because I am sure you will once you check them out.

1. Smashing Magazine

2. Photoshop Tutorials

3. Webdesigner Depot

4. Six Revisions

5. Noupe

6. Web Designer Wall

7. N. Design Studio

8. Specky Boy

9. Tuts Plus

10. Photoshop Lady

11. PSD Rockstar

12. Deviant Art

13. CSS Drive

14. CSS Elite

15. Best Web Gallery

There are alot of other websites that you can stay updated with, but these are the ones that I currently stay updated with and use often. In the past I have made a list of 24 Design Magazines that you should read. Which you can also use as a resource.

I am a firm believer that good designing cannot be thought because a good design is a reflection of one’s creativity. But I do believe that work place, surroundings, work habits, and daily life can all have a significant impact on your creativity. Also these things have a great impact on your time. In this post, I will be sharing some tips and tricks that I have adapted and learnt over the past six years. These tips have helped me throughout my career, and I am sure will help anyone who uses them effectively.

I am not going to tell you to buy a better computer, or upgrade your ram. Because that does not make you a better designer. All it does is make you do your work faster. But a good designer, can design on a little they have. When you get the revenue these things do help though.

25 Sure-Fire Ways to Become a Better Designer

1. Never Make an Assumption

Assumptions always get the better of you. And majority of the times, you realize when you have screwed up badly. My teacher used to say when you assume, you make an *Ass – out of * You and * ME. Know exactly what you are doing before moving onto the final step. For example checking the design in all browsers before sending it off to the client. Never assume if it works in Firefox than it will work in IE. Or if it works in IE 7, it will in IE 6. (Tips on Cross Browser Compatibility)

2. Do Your Thing

In the beginning of my web designer career, I would try to do more than what I could which is usually a good thing, but in designers case it is not. It kinda takes you out of your design. Design is a reflection of the Designer, and when you are trying to add something that you can’t it just does not work. For example, if a client wants you to make a super abstract design, and you are more of a simple touch, structural designer then you should stick with what you do. Don’t let the clients push you around.

3. Effective Nomenclature

Ah cool title. No really just name your file well. Organization for designers are a big thing. Learn this advice from me, the world’s most disorganized person. Make sure you keep in track with your client’s work. So if I am making a design for a site called twitter then I want to make sure that I name them twitter1 and twitter2. Make a separate folder for each client. You want to make edits to your filename and keep them updated. This is the best way because if you add words like finalcopy, final, or pro … It does not work because you will have to change it again. Clients often come back after few months, and they want changes, so this would save you a little bit of time.

4. Carry a Sketch Book

I understand it is hard for some people, how about using one if you can’t carry one. I used to just picture the design in my head before. But human memory span is so small that we often seem to forget minor details. Guess what, that is all what the design is about. Minor details is what makes a design a good design. Jot down your ideas. Make little scribbles if you have to. Use words, that will remind of you this idea at a later date. If need be write sentences.

5. Connect Ideas

As time goes on, you will have more and more clients. You might not want to repeat the same style again. But connecting or combining two ideas can sometime result in a new idea. Atleast that is what I learned when I studied religion and culture. This would help when you design also. Just interconnect all these ideas and watch. You WILL end up with something entirely new.

6. Draft: Put it Together

Do you think that your job was done when it was on paper. Alot of art work looks phenomenal on paper and suck on the web. So just roughly sketch it out. Dont worry so much about perfectioning the design at this point. Get the basic infrastructure layed out. It gives you an idea of what you will be working on later. This trick not only save time, but inspire new ideas as well.

7. Save, and Save, and Save, and Save one more TIME

It happens every freaking time when I least expect it. The program goes crazy on ya. Computer is just one of those things. No matter how powerful your machine is, one day it acts gay and you lose everything you were working hard on because you forgot to save. Save after every single move that you are making. Ctrl + S is my most used keys aside from the cursors.

8. Allocation of Time While Brainstorming

Time is of essence. You need to understand that. Whether you are a designer, marketer, blogger, remember there is only 24 hours in a day. You can’t just sit and think for ideas all day. Instead what you should do is brainstorm for a bits, then JUST DO IT. Then if that does not work, brainstorm for more a few bits.

9. Take a Warm Shower / Bath

For some reason whenever I am stuck, I use this option. I have noticed my best ideas came while I am in a shower. Might or Might not work with you.

10. Short Breaks

Creativity is limited when you are forcing something upon yourself. Frustration is a key to disaster. Leave your computer if you are stuck or even if you are not stuck. After every hour or two you need atleast 10 minutes of a break. It helps you with raising your creativity level.

11. Listen to Calm Music / Work in the Wild

Psychologically proven, calm music and wilderness both have a great impact on your creativity. I am sure you can’t take a trip every day to the wildlife but you can definitely listen to the music and work. It just relieves stress. I loved the time when I was in the mountains, and sitting at the top and designing. Snow all around me, beautiful trees. Can’t get any better.

12. Ask Others

Sometimes there are things that you won’t see. Asking another opinion always make your work perfect. You should ask a friend or a family member about their opinion of your new design. I ask my friends for their advices when I am designing because their input really helps.

13. Learn When TO STOP

You need to know this quality as a better designer. Sometimes overdoing is not good. It wastes time and it is very obvious from the design that it has been overdone. It is just like a steak, you need to know where to stop. Dark, but not burnt!!!

14. Simplicity

Don’t make the design too complicated. You need to see it from the reader’s eye. Remember the concept of usability. Because it is one of the key parts of any design. Simplicity might sound easy but it is one of the hardest thing to achieve. Usually as a designer, you have too many ideas, you need to learn how to put them into one.

15. Save your Gradients

When working in Photoshop, you need to make sure that you save cool gradients that you used. Because it saves insane amount of time. This way you will have a reusable library overtime and you can increase your productivity.

16. Colors Combos

It takes a really good eye to get good colors at your first try. You need to play with colors. Because one shade of blue might outdo the other one, and you need to find the best one. I use my favorite resource Colour Lovers when picking colors because they have alot of creative people there coming up with new ideas.

17. Balance in Colors

It is not always about the light colors. Light colors are good and calm on the eyes and user preferred. But you need to add little bit of dark shadows and touches in your design to keep it balanced. Because this way your design does not look too blend.

18. Break it Down

Whether it is a file or a layer, it is always good to break it down. When designing, it seems easier to merge layers because you have less of a mess. Wrong mistake because then you can’t change it back. So here is a suggestion. You can either not merge at all. Or you can make a separate psd file for this little part, and move the folder over and merge it. So in your end copy you have less clutter, but you still have something to go to when you need to make changes.

18. Use Shortcuts

Using shortcuts can save you a great deal of time. I know that, and you should know that too. It gets hard to memorize all the shortcuts because there are TOO MANY of them. But the ones you most use, you need to know. For example duplicating a layer in photoshop Ctrl + J …. This saves you from going to the layer, right click and hit duplicate layer over and over. (Speed up your Designing with these 50 Awesome Photoshop Tutorials)

19. Stay Foolish, and Stay Hungry

I learnt this from my last year’s roommate. When it comes to knowledge, you must stay with this attitude. The day you think you know everything, that is the day of your demise. I am always open too new tutorials, ways to work. I mean I do not need to read tutorials on marketing if I don’t want too. But the thing is you can never know enough with this technological industry. Things update, new things come, you have to stay updated. So don’t think you are an expert because you are not. And you will never be. After 6 years, I stay at this point with a flowing income, I still do not consider myself an expert because I am barely there. I am a student like everyone else, learning from other’s experience and my own.

20. Practice makes you Perfect

Sounds rhetorical doesn’t it. Well it is true, no matter how it sounds. When it comes to coding specially. There would be some problems that you will learn to solve from experience. Experience is key in this business. The more experienced you are, the better you know your audience, your clients, and yourself. So if you have free time, and you don’t have any orders. Then make a free theme and release it. It makes you get more efficient in your work, and you get some publicity.

21. Know your work Inside Out

This is one of the things that I can be proud of. You need to know your work inside out, so if a problem occurs, you know exactly where it is. This is often a challenge when a client comes to you with a prior website, you get to learn another designer’s way of processing. If you are working with a CMS for a client, then you need to know about it just as well as you know about your birthdate.

22. Spell Check

Big bobo if you make an error in the spelling of a logo. It is so common, you would not believe. So you need to learn how to spell check when you are designing. More so if you are printing something, then you need to make sure about ten times. Read it yourself, multiple times than have someone else read it too. And more than one someone elses.

23. Keep a Backup

Keep a backup of everything. Every single client that you had. I have a backup of all the work I have done in the past six years. Yeah that requires 3 external hard drives, and numerous cds / dvds. But that is ok. At least I know where to look if I fall back. Think of backups as a strong step that you make in your career. So if you fall from the top, you are not going to go back to start, you will just fall back to the step below.

24. Work with Your Clients

Always a saying, work with your clients and not against them. Both parties need to stay on the same page for the project to go through successfully. At the end day, they will be the one that is paying you. Sometimes you might think that they are holding you back, but really it is you who is holding yourself back. Justify your work to the client and have good communication. Remember your client can be your best resource in the matter of productivity.

25. Stay Updated

You need to stay updated with the world and most importantly Balkhis for the next post of mine which will be on Tuesday. In that post, I will share the websites that will make you a better designer. So stay updated.

That is the end of this long ass list, and I can tell you that there is alot that goes onto become a better designer most of all is experience. I would love to see some of you guys comment and share of what you think to become a better designer.

I was asked a question via email if there are advantages of having random header images. I say why not. If you have a website that contains a header image, it is much better for you to change things up, spice it up a little. I would take the dynamic header image any day.

Most people think this would be a pain in the ass and it requires some plugin. And if you are like me, you don’t want to go through the hassle of searching the plugin. Well how about I tell you that there is no need for a plugin to do this. I say this tutorial is on Beginner Level.

All you really need is a simple php code that I am about to give you in this post.

Get the Header Images

For demonstration’s sake I will be only using three images, but you can use as many images you want. Few things to keep in mind that you must have all of these images in the same extension. Meaning if you have one image as a .gif then the other two must also be .gif. If you have one as .jpg then the other two must also be .jpg. I hope you guys get the concept.

So the three files we would use are:

• himage_1.jpg
• himage_2.jpg
• himage_3.jpg

You do not have to use the same names as I do. It can be header_1 or head_1… anything you really like. Just make sure there is an _ separating the number. Also make sure that these images are the same size, so it fits your design’s dimension and doesn’t make your site W3 Invalid.

If you need help finding stock photos then I have compiled a list of 11 free stock photo sites.

Implementation

This code would work just about work on any platform that is based on php. So if you are using wordpress then you are ok. Anyone else who wants to use it on their php websites, this would work as well.

<img src="http://path_to_images/himage_<?php echo(rand(1,3)); ?>.jpg"
width="image_width" height="image_height" alt="image_alt_text" />

If you are using more images, make sure that you change the number from 3 to however many images you have. All what this code does is it takes your image and choose one randomly. It is that simple.

I hope you guys like it.

Fonts are the backbone of all designs. Without a good font, a design cannot be good. People often overlook the importance of typography in designs. A good logo is highlighted with an astonishing font that makes it stand out and attracts the user’s attention. Most people don’t know how to get these fonts, and some who do find these, often end up finding the expensive fonts.

Professional designers use professional fonts. On average these fonts can cost upto $50/font. Most of them which are only used once in a design. I am sure for bloggers and young designers who do not want to pay that much for a professional font, I have a few free alternatives for you that may fill the need.

*Click on the name of the fonts to download rather than images*

Professional Free Fonts for Designers

1. Pigiarniq

The family includes a bold, heavy, italic, light and regular weights. You won’t understand the website this font is on, just click on the download link.

2. Gentium

Gentium is a typeface family designed to enable the diverse ethnic groups around the world who use the Latin script to produce readable, high-quality publications.

3. Cardo

This font is free for personal, non-commercial, or non-profit use.

4. Day Roman

5. Qlassik

6. Diavlo

This is an awesome font and as you can see this is also being used on Balkhis.com Logo.

More fonts in the full post, so click to open the full post to see the rest of this list.