Over a year ago I created this online web application Convert Hub by the help of the splendid open source image manipulation library Netpbm. Give it a try, upload an image and convert it to another format. But not just that, it’s also capable of resizing an image, rotating or flipping it.

I love it. It’s simple yet adequately useful. The best part of it for a webmaster like me is that it can convert other image formats such as .bmp, .jpg, .gif and .png to .ico so I can use them as favicon.ico for my sites. Try these US state flags and convert them in any way you want!

It’s a great tool and gained tremendous popularity. I know this because one day DreamHost warned me of overwhelming server resource usage and took it down for good reasons. I had to move it elsewhere and Linode is where it currently resides on.

Server side computing is too expensive for a free application like this. After a few ideas and thoughts, I decided to create a client side software program to do the job instead. It’s called Batch Image Converter. And it proves to be much better. It doesn’t come with a daily limit on the number of conversions allowed per IP but you can do as many conversions as you want. The whole software consists of one single executable file, there’s even no need to go through any installation steps. It’s totally green to your system. What’s best, it can work in batches which means you are able to perform operations such as format conversion and dimension resizing on a lot of images by a single click.

All you need is to download it there. It’s free. The problem is that it only supports Windows for now. I’m planning on rolling out versions for other platforms but this may not happen soon.

Please do let me know what you think of the application in the forum.

Related Posts:

• PHP: Number Format Function to Format Numbers in PHP (Integer or Float)
• PHP: Convert between Numerical Bases | Binary Number, Decimal Number, Octal Number and Hexadecimal Number Conversions
• How to bring down / optimize memory usage in your unmanaged Linux VPS box and avoid OOM (Out Of Memory) errors?
• Check how much memory your PHP script is using. (PHP script memory usage)
• CSS: How to write CSS rules to detect or target Chrome, Safari or Opera browsers only?

I have a few tips for you:

1. Stick to simple white design.
2. Use no more than 4 colors other than grey scale (white, black, grey). Actually 2 would be perfectly enough for text information intensive sites.
3. Design the site as if it’s a chapter in a print book.
4. Plan blank areas.
5. Be goal oriented and GET RID of EVERYTHING that’s not closely contributing to the goal. You achieve perfect by having nothing to peel off instead of the other way around.

Related Posts:

• Key Differences between the Web Design of Google, Microsoft and Yahoo
• CSS Definition: What is CSS Defined and Explained
• Being simple as a bless for development cost
• Prova.fm, the Design Contests Platform – From Outsource to Crowdsource
• MySQL: Counting Number of Records or Rows by a Foreign Column (from Another Table)

No matter how fairy or pretty your design / template is, never use overflow:hidden for content containers.

Content comes a thousand times more important than any design or layout. I don’t care how much you hold proud your artistic work and how you think accommodating the content in any way possible would ruin the holy sweet layout, when an image or a table with indispensable content that the readers / visitors are ultimately concerned about expands across the content areas and messing up with your fucking design, using overflow:hidden to restrict them is just plain STUPID and ANNOYING.

Please by all means, DO NOT use overflow:hidden for content containers! What really matters is the idea / content the design is trying to convey rather than the design itself.

Related Posts:

• 3 column layout, left and right fixed width, center fluid
• Linux: How to delete / remove hidden files with ‘rm’ command?
• CSS: Complementary Background in Float
• It’s not your business, it’s who you are
• If you are not a professional designer and don’t want to look stupid

There are in total nearly a hundred HTML tags with good ones as well as bad ones in terms of XHTML. In the creation of a template or theme, after designing for the overall layout, artistic feel as well as the entire set of visual elements, the designer will be preparing the ready-to-use styles needed for common content tags such as the headings <h1>, <h2>, <h3> and <blockquote> and so forth, even though they may not have been used yet in the design. This article tries to be a rough guide on what tags to be styled before hand.

Here’s a shortened list for the most common scenario:

1. <a>, the hyperlink, of course.
2. <acronym>, usually for acronyms and abbreviations such as HTML. Industry standard is to style it with a dotted border at the bottom. However, <acronym> tag has fallen out of favor of HTML5, use <abbr> instead.
3. <cite>, author, <q>, inline quotations, <blockquote>, large paragraphs of quoting which is one of the most necessary tags that need to be styled before hand.
4. <button>, you may or may not prescribe a global visual style for all button tags across the template
5. <caption>, table caption / title, centered and bold by default, come out with a better one in case the content contains a lot of tables. <table>, <tr>, <th>, <td>, <thead>, <tfoot>, <tbody>, … for table styles
6. <code>, for templates dealing with code samples.
7. <dfn>, for definition terms, frequently used with a lot of inline terms and definitions.
8. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, content headings.
9. <img>, content image styles.
10. <fieldset>, form fieldsets. <legend>, form fieldset title.
11. <form>, forms.
12. <input type=”text”>, <input type=”checkbox”>, <input type=”radio”>, <input type=”file”>, <input type=”password”>, <textarea>, input controls of forms.
13. <label>, form field labels.
14. <li>, <ol>, <ul>, ordered list styles and unordered list styles.
15. <p>, paragraph styles.
16. <select>, <option>, <optgroup>, select list styles.

Related Posts:

• HTML Definition: What is HTML Defined – What does HTML stand for?
• PHP: Checkbox Array in Form Handling – Multiple Checkbox Values in an Array
• PHP: Allow Specific HTML Tags in Text Input Controls of HTML Forms, <textarea>, <input type=”text” />
• CSS: How to align HTML input checkbox and radio with text on the same line?
• CSS: Styling File Upload / Select Input Control <input type="file" … />

Microsoft and Yahoo is colorful in colors but Google is colorful in the imagination.

Google uses much less colors than Microsoft and Yahoo do. Yet somehow, Google comes out as the versatile one.

Google uses much more traditional colors than Microsoft and Yahoo do and rarely change in the style, yet it comes out as the innovative one.

Google has much less web page elements than either Microsoft or Yahoo, yet it has come to be known as the sophisticated one.

Openness is rich in Google in that they design all of their pages with no distinct boundaries at all on a plain white blank sheet stretching as wide as the browser window / computer screen. On the contrary, Microsoft and Yahoo believes in borders, boxes and restrictions.

Related Posts:

• CSS: Double Border
• If you are not a professional designer and don’t want to look stupid
• Create your first web page – Learn XHTML and Make Web pages
• Google: What time is it now? Get current local time from Google
• JavaScript: Open or Redirect to Another Page / Site / Location

While HTML is the concrete of all web pages and websites, CSS is the spirit. It specifies the aesthetic aspect of all the web pages by design through presentation, conveying the ideas and sensations by visual languages. The first class of all web designers start with CSS.

These are some of the best CSS books out there reviewed indispensable for those who want to be a web designer or / and developer.

Web Developers / Designers’ Books:

1. Best HTML Books
2. Best CSS Books
3. Best JavaScript Books
4. Best PHP Books
5. Best MySQL Books
6. Best Linux Books
7. Best Apache Books (mod_rewrite Books)
8. Best Web Hosting Books

CSS: The Missing Manual

CSS: The Definitive Guide

CSS Mastery: Advanced Web Standards Solutions, Second Edition

Stylin’ with CSS: A Designer’s Guide (2nd Edition) (Voices That Matter)

CSS Pocket Reference: Visual Presentation for the Web (Pocket Reference (O’Reilly))

Pro CSS and HTML Design Patterns

The Ultimate CSS Reference

Transcending CSS: The Fine Art of Web Design (Voices That Matter)

Beginning CSS Web Development: From Novice to Professional

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition) (Voices That Matter)

Handcrafted CSS: More Bulletproof Web Design

The Zen of CSS Design: Visual Enlightenment for the Web

More Eric Meyer on CSS (Voices That Matter)

Designing with Web Standards (2nd Edition)

Related Posts:

• Best Books of HTML and XHTML to Learn How to Create Web Pages / Sites with HTML and CSS
• Best and Newest HTML5 Books (and Some CSS3 Books)
• Best MySQL Books to Learn MySQL Database Programming and Development (+ PHP Applications)
• Best JavaScript Books for Learning JavaScript Programming and Development
• Best Books of Apache Web Server to Learn Apache and Use It

HTML is the language of the Web and all websites are written in HTML (XHTML). To learn creating website, the first thing you will need to learn is HTML. Period.

Some of the selected books below are for beginners and some are for intermediary coders to consolidate your knowledge of HTML and CSS and practice along reading the books.

Web Developers / Designers’ Books:

1. Best HTML Books
2. Best CSS Books
3. Best JavaScript Books
4. Best PHP Books
5. Best MySQL Books
6. Best Linux Books
7. Best Apache Books (mod_rewrite Books)
8. Best Web Hosting Books

HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)

Head First HTML with CSS & XHTML

Build Your Own Web Site The Right Way Using HTML & CSS

HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer/Tech))

The Ultimate HTML Reference

HTML and XHTML Pocket Reference (Pocket Reference (O’Reilly))

HTML A Beginner’s Guide (Beginner’s Guide (Osborne Mcgraw Hill))

HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

Creating a Web Page with HTML: Visual QuickProject Guide

Related Posts:

• Best CSS Books to Learn CSS Web Design
• Best MySQL Books to Learn MySQL Database Programming and Development (+ PHP Applications)
• Best Books of Apache Web Server to Learn Apache and Use It
• Best PHP Books for Learning PHP Development and Programming (with MySQL)
• Best JavaScript Books for Learning JavaScript Programming and Development

Face2Face is the name of this Joomla template, released free by Template Kingdom. I don’t usually use Joomla but one has to admit there has been many excellent template themes for Joomla like this one, just as there are with WordPress.

I love the colors of this template: relatively light but not too bright to be eye friendly, very enjoyable to look at as a result of all those intermediary colors constantly found in nature. The layout is tight and contains as much content as possible yet leaves enough blank for outstanding texts such as a slogan.

If you are ever looking for a Joomla template that’s as gentle as green tea, refreshing with grass warmth, this theme is it.

You can download it here, it’s completely free.

Still thirst for more? Here’s the extra premium website templates.

Related Posts:

• Free CSS + HTML Template: Fashion Club Website (with fonts and PSD source)
• A home made HTML web page template – simple, clean and free
• Free Web Template: My Dear Lounge
• Key Differences between the Web Design of Google, Microsoft and Yahoo
• Modify Index Homepage Title of MyBB Forum

Template Kingdom is one of the best template and design sources on the Web. Other than a spectrum of website template sets for thousands of different niches and needs such as plain html templates, flash templates, css templates, joomla templates, wordpress templates and newsletter templates, they regularly releases free web templates.

This round, it’s the Fashion Club free html template designed exclusively for fashion websites. You can download the template package including the HTML /CSS source, JPG mockup, PSD source and font files on this page.

However, you have to bear in mind that the problem with all things free is that the value it provides is increasingly diluted by the large number of people who have access to it. To make your website and project truly unique, you’d want a design agency to sculpt an exclusive solution for you or you will need to buy some premium web templates, and Template Kingdom is one of the best at what they do.

Looking for more? Here’s some premium web templates.

Related Posts:

• Yet Another Joomla Template Including Original PSD, HTML + CSS and Fonts
• Free Web Template: My Dear Lounge
• A simple business web template with PHP contact form
• Modify Index Homepage Title of MyBB Forum
• A home made HTML web page template – simple, clean and free

As requested by a reader of Make A Website that wants to know where to download web safe chinese fonts. I have now packaged them in a ZIP for download in case any more of you wants to use them for Chinese web projects.

Click to download the fonts.
No more download of fonts because of potential copyright infringement – you may google search and download them directly from Microsoft or other sites instead:

- Microsoft YaHei
- Microsoft YaHei Bold
- SimSun, NSimSun
- SimHei
- Song Ti font
- Hei Ti font
- You Yuan font
- Li Shu font

Included are the most common fonts of Simplified Chinese in mainland China: Song Ti, Hei Ti, Youyuan, Lishu and MS Ya Hei. You can view the detailed information about them at here. I used to have a total English version of Windows XP but now can’t quite remember how you must install the charset and encoding for Chinese / Asian languages first before displaying Chinese correctly on your system before using the Mandarin fonts.

Related Posts:

• What are the Mandarin Chinese web safe fonts?
• Watch TV and Movies Free Online – The China P2P Internet Streaming Network: PPS
• Let’s use Lucida Grande for a change – 13 web safe fonts revisited
• What is this font? An online tool to detect or guess font typography in images
• Symbolic fonts: Webdings and Wingdings

Browsing through websites after websites, you may wonder from time to time what a font is that’s used in the site design. While experience and necessary typographical knowledge is needed to make a sound guess, you can always upload a screenshot of image with some sample text of the font on to an online tool so that it can determine for you what is the font used, judging and comparing from a huge database of fonts and typographies.

For example, I wanted to know what font the black text of ‘rackspace‘ is in in the starting frame of the video on this page:

1. Make a screenshot containing the text ‘rackspace’. You may want to resize the screenshot relatively small and save it in BMP format or high quality PNG so that the font guessing tool can do a good job.
2. Upload the image at here: http://new.myfonts.com/WhatTheFont As you may have noticed, you can also specify an URL of image on the Web that the tool can download it for you.
3. Click ‘Continue’.
4. The system will present you a series of guessed characters, make sure at least one of them is right and leave empty whatever the system failed to recognize the right alphabetic character.
5. Click ‘Continue’.
6. Done. The system will now output an order of guessed fonts by similarity.

Thanks Jon for the tip.

Related Posts:

• Download Web Safe Simplified Chinese Fonts: Song Ti, Hei Ti, Youyuan, Lishu, MS Ya Hei
• PHP: GD Library Drawing Functions Reference
• Let’s use Lucida Grande for a change – 13 web safe fonts revisited
• What are the Mandarin Chinese web safe fonts?
• Symbolic fonts: Webdings and Wingdings

WordPress does a great job in smoothing the user experience of the blog administration control panel. Ever wonder how they have styled all those buttons with such touchy appearance?

Well the originator is the man in blue:

button
{
	border-left: 3px double #CCCCCC;
	border-right: 3px double #999999;
	border-top: 3px double #CCCCCC;
	border-bottom: 3px double #999999;
	padding: 0.25em;
	background: #FFFFFF;
	color: #333333;
	font-weight: bold;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}

Click Me!

The trick lies in the double border style which is rarely used. Attaching a background image would look good too.

Related Posts:

• Let’s use Lucida Grande for a change – 13 web safe fonts revisited
• Styling an Alphabet of 26 Letters in HTML and CSS
• CSS: Double Border
• What are the Mandarin Chinese web safe fonts?
• PHP: GD Library Drawing Functions Reference

If you are determined to make your site comply with the latest provisions in the accessibility code, you may find it’s a pain in the ass to check point by point against the checklist of WAI (Web Accessibility Initiative) and Section 508.

Yep, it sure is with so many check points for your web page styles and content building, until you find the right online tools to check them on your behalf automatically and free.

Content Quality is the web content accessibility validation solution by HiSoftware. Supply the URL, and the system will instantly provide a detailed analysis of how you are doing with the guidelines of either Section 508 or WCAG (Priority 1, Priority 2, Priority 3). Not only that, it also provides you the option to emulate quite a few of browsers in the process such as: IE6, IE5, Opera 3 … (God this is old)

Anyway, a great tool to validate your web pages against these accessibility guidelines.

Related Posts:

• Auto-generated content by user searches
• The Ultimate On-page SEO Checklist – Better SEO, Semantics and Accessibility at The Same Time
• Create your first web page – Learn XHTML and Make Web pages
• Check broken links on your site with this free tool
• A home made HTML web page template – simple, clean and free

Just for the sake of code separation and software development paradigms, a lot of web designers and front end developers are tempted to break the CSS styling into a group of separated files based on function. Yours might look like:

• layout.css
• typography.css
• colors.css
• widget.css

While this might look professional at the first glance and generally regarded neat for small websites, the cost of it such as the unnecessarily extra HTTP requests incurred rarely compensates the effort you have made, exponentially for popular websites. The negatives far outweigh the positives.

One may argue, however, that this is more straightforward in styles classification for the ease of switching between designs or themes. Sounds terrific, but in reality the maintenance issues, particularly those added up over time and contributing to styling complexity, will arouse themselves relentlessly with this approach and are simply not worth it in most scenarios. Some of them include:

• The ambiguity of which style falls into which file is sometimes debatable and subjective developer by developer. For example, borders can be sorted in layout.css but they have colors.
• As suggested above, large sites should avoid unnecessary HTTP requests as much as possible. Separated CSS files are apparently against this optimization principle. Not only the servers, but additional download requests can also be a burden (at least a waste of time) to client browsers.
• Bloated download size of the styles as many selectors have to be repeated in multiple files because for any of them, some rules are for layout, some for typography and yet some more for colors.
• Spread CSS cascading and specificity across multiple files is more difficult to predict and manage. Hidden dependencies between files begin to nurture themselves or get lost unfavorably.
• Spread CSS styles across multiple files makes patching and debugging more difficult and time consuming because of the simple fact that you need to constantly switch between files to locate, edit or add something.
• As a result of subjectivity as well as loose discipline, team members may carelessly violate the separation rules or unintentionally bring inconsistency to the distinctions among files by introducing selectors into files in which they should not be or not best be, ruining the intended classification in the first place.

A good practice, if you insist on the merits of separating styles for different purposes, is to categorize them by the help of PHP. Let PHP handle the assortment of styles at server side, dynamically and quietly, and render a single stylesheet file to the client. This way, you not only keeps a useful structure of CSS which would come handy in future development and derivative works, some of the aforementioned bad things about this are also overcome nicely.

Related Posts:

• PHP: Run HTML as PHP
• Which is better for AJAX requests, GET or POST?
• 8 Golden Rules of Writing CSS
• Yet Another Joomla Template Including Original PSD, HTML + CSS and Fonts
• Customize WordPress Post Editor CSS Styles

Authored by Squidspot, this would make a great poster for fellow web designers and typography lovers!

Related Posts:

• Let’s use Lucida Grande for a change – 13 web safe fonts revisited
• My confession as required by the US government
• Why having multiple CSS files is a bad idea?
• Free Web Template: My Dear Lounge
• Symbolic fonts: Webdings and Wingdings