A website’s design gets all the glory. When someone visits a site, you’ll hear them talk about how awesome the design is–but, do you ever hear someone talk about how awesome the code is? Never!

Regular people can’t see code, nor do they care to see it or what it looks like. It’s precisely this reason that there’s so much ugly code in the web world today. People don’t see it so developers don’t believe that clean code is important, but it is.

It’s quite rare to find a clean coded site, even from huge companies who should have the budget to pay for a good developer. However, it’s just as important to have beautiful code as it is to have a beautiful design.

Why Should It Matter?

Most of the time, messy code works just as well as clean code. So why should it matter if it’s pretty or not?

• Quicker to update–Organized code is easy to navigate and update. Save yourself some time in the future by making stuff easier to find now.
• Faster loads–Often, clean coding uses less code, which means it’s faster to load.
• Professionally–Would you rather pay someone who gives you a junk heap of code you can’t read, or someone who hands you correctly nested and organized code? Which one would make your life easier? Which one shows more professionalism?
• Find errors–With organized code, there’s less of a chance you forgot to close a tag or that you closed them in the wrong order. Plus, if you do make a mistake, it’s a lot quicker to find it.

Beautify Your CSS

There are several ways that I’ll show you how to organize your CSS. Of course, beauty is in the eye of the beholder, so you may not find that what works for me, works for you. Experiment with a few different ways you can organize your code to find what works for you.

• All in one line–Placing the entire rule on one line shortens the document, making it a smaller file size, easier to read and quicker to locate what you need. For example, instead of:
  • div {
background: #FFF;
font-style: italic;
font-size: 18px;
margin: 20px;
padding: 10px;
font-weight: bold;
}

  Try doing this instead:

  • div { background: #FFF; font-style: italic; font-size: 18px; margin: 20px; }
• Group like elements–I like to group similar rules together so that I can find everything I’m looking for in one section. For example:
  • div.element {}
div.element a {}
div.element ul {}
div.element .class p {}

    div.other {}
div.other a {}
div.other p.class {}

• Sectioning–It’s also good to section off your CSS by the area of the website where it is located. I use comments to call attention to the sections and usually section them off by header, nav, footer, main page and subpages.

continue reading…

Infographics refers to visual representations of information, data or knowledge. These graphics are used where complex information needs to be explained quickly and clearly, such as in signs, maps, journalism, technical writing, and education. They are also used extensively as tools by computer scientists, mathematicians, and statisticians to ease the process of developing and communicating conceptual information.

Infographics allows you to see the and understand the concept in a more interesting and useful manner, Here I’ve listed 27+ beautiful infographic design, that will help and inspire you to design a complex data in to a simple attractive design.

1.) The Largest Bankruptcies in History

2.) Housing & Poverty

3.) Crisis Of Credit 1

4.) Crisis Of Credit 2

5.) The Great Pacific Garbage

6.) On Words Concordance

7.) infoGraphic On Driving

8.) Show do Milhao

9.) Seeking Refuge

10.) Michael Anderson Resume

11.) Biking to Work

Continue Learning…

The term Web 2.0 refers to the second generation of web development incorporating websites designed to encourage sharing and collaboration between users, like social networking sites (e.g. Facebook), video sharing sites (e.g. Youtube), wikis (e.g. Wikipedia) and blogs (e.g. this one).

Of course, Web 2.0 sites are not only accessed through desktop computers with large displays. They are increasingly being viewed on portable web-ready devices, from mobile phones to netbooks and car dashboards, not to mention on TVs and through a plethora of video game consoles. The best Web 2.0 fonts, therefore, must look great at a range of scales regardless of what device is being used.

Web 2.0 sites aim to encourage participation and Web 2.0 fonts must do the same. In addition to being highly legible, the best are inclusive and accessible to all. They are cool, original and striking, but not to the extent that they are only appreciated by certain groups with specific aesthetic sensibilities.

Here are 15 great ones to download and start using in your designs!

1. Corpulent

Corpulent is a simple font that looks at its best in uppercase.

2. Airstrip Four

Airstrip Four combines straight and curved edges to great effect.

3. Automatica

This is a stylish, somewhat squat, sans serif font.

4. Rezland

Rezland is a really cool, curvy font. Unfortunately, it’s only available in lower case.

5. Ubuntu Title

Ubuntu Title takes up little horizontal space, so it perfect for inserting into tight spots.

6. Tuffy

Tuffy looks friendly and playful, but not at the expense of clarity.

7. Photonica

Photonica is a futuristic-looking seriffed font that looks even better when italicised.

8. Moderna

Moderna’s rounded letters are really well balanced and very attractive.

9. Arista

Arista is also available in ‘light’ and ‘extra filled’. The ‘light’ version looks fantastic when viewed on a small screen (such as on a mobile phone). The ‘extra filled’, on the other hand, is practically illegible.

10. Bohemica

Bohemica is an interesting looking font that retains legibility, despite its disjointed structure.

See more fonts here…