Free Web Templates My Personal Reviews Web Design Tips and Insights

Yet Another Joomla Template Including Original PSD, HTML + CSS and Fonts

free joomla template 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.

Free Web Templates Web Design Tips and Insights

Free CSS + HTML Template: Fashion Club Website (with fonts and PSD source)

fashion web template 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.

China Internet Fonts & Typography

Download Web Safe Simplified Chinese Fonts: Song Ti, Hei Ti, Youyuan, Lishu, MS Ya Hei

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.

Fonts & Typography Web Design Tips and Insights

What is this font? An online tool to detect or guess font typography in images

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: 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.

what is this font

CSS & HTML Tips Web Design Tips and Insights

CSS: Styling WordPress Administration Control Panel Buttons

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:

	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;

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

CSS & HTML Tips Internet Tools Web Design Tips and Insights

Validate and Check Your Site’s Accessibility against WAI (WCAG) and Section 508

online accessibility validation tool 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.

CSS & HTML Tips Web Design Tips and Insights

Why having multiple CSS files is a bad idea?

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.

Fonts & Typography Hilariously Funny or Creepy Web Design Tips and Insights

Periodic Table of Typefaces

periodic table of typefaces

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

CSS & HTML Tips Web Design Tips and Insights

Cross browser compatible HTML table cellspacing and CSS border-spacing property

As a result of the failure of IE (IE6 and IE7) browsers to implement the border-spacing CSS property for HTML tables. The mere CSS rules below:

border-collapse:separate; /* border-spacing will be ignored should border-collapse:collapse;*/

Have no effect of widening the cells distance on IE.

To enable border spacing and cells gap, you will not only use the above rules in your CSS (for FF2, FF3, Opera 9.5, Safari 3 and Chrome) but also add the HTML table cellspacing property (for IE6 and IE7) to the table in HTML:

<table summary="" cellspacing="2">
Free PHP Classes & Library PDF Tips & Tutorials

Generating PDF documents with PHP

I generate, oh no, I mean PHP generates the PDF version of all the blog posts I have here by this library, but I think this one‘s a lot easier!

Giving it a try sometime later, thanks Dan for the find!

Yeah, yeah, I know I know, I could have posted this to twitter by nature of microblogging. I’m just trying to be more casual and to be myself for a while.

I hate most of the social medias that are no more than just pompous distractions providing little value if at all.

Update: Better libraries to accomplish the job of converting HTML/CSS to PDF documents might be HTML2PDF and PrinceXML.