So let’s start with this week’s interview with author and reviewer, Kai Loon.

Interview With Author and Reviewer Kai Loon (kailoon)

Kai Loon is one of ThemeForest’s very own reviewers. He not only reviews for ThemeForest but for GraphicRiver as well. Kai Loon isn’t just a reviewer though, he is a skilled author who also runs two great websites–LoonDesign and ThemeTation. I’ve asked Kai Loon a few questions for this week’s interview and here’s what he had to say.

Q #1: As one of ThemeForest’s reviewers, what are some tips you can give to our current and potentially new authors?

A: “Never give up, try the best you can. Try not to compare to any low performance items while your item was rejected. All of us have the passion to be the best.

Many authors always have the same thought when designing for ThemeForest: I want to provide something special, unique and different from what we have on ThemeForest now. I understand that, as a designer, we always want to try something new. However, we still have to keep the aesthetic level and standard usability when creating something new.

Further, this is a marketplace but not a web gallery. People pay money to buy our creative works but not pay for something you use to test the market or your skills. So, we need to provide our best.”

Q #2: Obviously, there are so many elements and practices that go into creating a wonderful and high selling theme. What are some techniques or tricks you have learned that have proven to be successful?

A: “Flexibility and usability are the key, keep in mind your items can be used for several times on multiple websites. Users normally will modify it before they use it. Know the needs of the type of theme you are going to build. For example, if you are going to create a photography theme, you will need to provide functions such as auto image resize, gallery, lightbox, easy to manage of images etc. Or, if you are creating a community theme, you will need functions such as news submit form, multiple authors support, easy blogging system etc.

Always think that this is a theme that you are going to use. Then you will know what you need to do.”

Q #3: How did you get started in web design and development and what is your favorite part of the work you do?

A: “I started as a graphic designer, and then I know about WordPress 2 years ago. At that moment, I don’t know anything about HTML/CSS, jQuery or anything related to web development. I started as a blogger, I know more about WordPress when I first modify my blog. Then I started to learn HTML/CSS, jQuery, WordPress and php. I enjoy the both designing and coding.”

Q #4: When/how did you first come across ThemeForest?

A: “I was contacted by Collis and asked to submit the first WordPress theme and Joomla template to ThemeForest. I knew about this site via PSDtuts. After that, I was hired as reviewer for ThemeForest and GraphicRiver. I am so happy to be part of the amazing team Envato.”

Q #5: What are your top five pet peeves in design or web development?

A:

1. We have only 24hours per day.
2. Getting this phrase “This design is ok but can you move the box 1 pixel left?”
3. Selection of color combinations
4. Getting this phrase “Can you help me to clone cnn.com?”
5. Getting this phrase “I want this, this and this but my budget is only this. No worry, we can have profit sharing after this.”

Q #6: Lastly, can you give us any general wisdom or rules to live by when designing?

A: “Simplicity is the most complex achievement.”

- -

Thanks for taking the time to answer these questions Kai Loon!

Check Out Kai Loon’s Portfolio

Notable Additions to the Forest

Here are eight fantastic new items that have been added to the ThemeForest marketplace over this last week.

[PSD] HYPER PRESS – Premium PSD Template

“The ‘Hyper Desk’ theme is a clean & modern layout designed to promote anything from a corporate business to a portfolio site. It comes in 7 color ‘flavors’ to start, but within mere minutes you can have this layout colored and styled to suit your taste.”

[PSD] Photoworks – Photography & Portfolio PSD Template

“Photoworks is a modern web 2.0 style psd template for photography or portfolio website.”

[HTML] RT-Theme 5 / Premium Corporate Theme 10 in 1

“RT-Theme 5 is best suited for business, corporate or service websites. Theme comes with 10 premium skin options and you can easly modify or make your own skin using sliced PSD files.”

[HTML] iMaxell Premium Corporate Template

“This design is a Portfolio and / or a Corporate template for companies, portfolios, webdesigners, eBooks sites, etc, to showcase your services and work. This theme comes with Cub3r an awesome 3D slider easy to customize, I’ve added 2 more sliders for your customization, s3Slider and jQuery innerFade.”

[WordPress] Kreativik – 5 in 1 template Wordpress edition

“Kreativik is a result of our work on an easy, clean and solid design, which would be universal, cool and featured-packed at the same time. Finally available as wordpress theme!”

“It comes in 5 different styles (these style actualy link to the HTML version, but the look of the homapage is the same ):”

[WordPress] TYLIUM – Premium Wordpress Theme

“This template is a complete site compatible with all the browsers IE6 , IE7 , IE8 , Opera, Firefox 2, Firefox 3, Safari 3, Safari 4, Google Chrome.”

[PHP Scripts] Shoutbox

“This is an easy to integrate shoutbox that you can use also as chat. The installation is really easily: You have just to upload one file, follow the introductions and that’s it! With just 27kb, PHP5 OOP and jQuery powered it also very fast and looks also good.”

[PHP Scripts] Ad-Seller

“Ad-Seller is designed to make advertising very easy for everyone who has the needs to display ads on there website! Ad-Seller is lightweight to minimize the server load. It has a great simple css based design and offers great options! Next to the lightweight design, Ad-Seller is made using CodeIgniter an PHP framework with exceptional performance.”

More Great ThemeForest Items

These are some seriously great templates, themes and scripts but don’t forget that there’s lots more! View them here!

Chatter In The Forest (Forum Discussions)

Here are some of this week’s forum discussions worth checking out and chiming in on. Authors, make sure you check out the ThemeForest Authors Twitter List and the Nvator iPhone app.

• Say hello to Nvator iPhone app for Envato Marketplaces
• October 2009 Browser Stats!
• Envato IRC Chat Room
• The Official ThemeForest Authors Twitter List
• What Do you Buy Templates on Theme Forest For?

Blog Review

This week’s fantastic blog posts.

• Free File of the Month: November, 2009
• Record-Holder for Most Sales in a Single Month
• Ask JW: A Plugin to Make Important Announcements
• Inside the Mind of ThemeForest’s Top Selling Author
• New Featured Author of the Week: Maximus

Web Roundup

There’s a tremendous amount of information on the web and it’s not always easy to find the cream of the crop. Here are some great tutorials and articles from around the web that are definitely worth checking out.

ASP.NET from Scratch: Lesson 1

Nettuts+ is primarily a PHP haven; however, I’m sure we can all agree that there are many fantastic, and technically more powerful languages and frameworks at our disposal. Jeremy McPeak, author of Professional AJAX, and Beginning JavaScript: 4th Edition, will teach you how to build ASP.NET applications from scratch over the course of the next several video tutorials. Enjoy!

Website Maintenance Tips for Front-End Developers

One of the biggest advantages of online media over print is the ability to change, update, and enhance online media at virtually anytime, with virtually no negative side effects. In fact, if a website or web application does not continually offer its users an ever-evolving and growing experience, that site or application would soon become insecure, unusable, and out of date.

Simple CSS Tips that Go a Long Way

Sometimes it’s the little things that can make all the difference and there are plenty of neat little CSS tips that can help with all aspects of design and development. Here are a few great tips that will help you improve your CSS work and help you get the most out of your code

40 New Useful Web Development Tools and Resources

To become a professional web designer, you need effective tools that would help you implement beautiful designs with solid coding techniques. Handy ready-to-be-used solutions and smart design tools are always nice to have, but good ones are often quite hard to find. And this is where we come into play.

In this post we have put together a useful collection of new web development tools to save developers and designers time, energy, and headaches. Let’s take a look at 40 new useful web development tools and resources in a goodie bag for you, including easy and fast tweaks to forms, snippets of code, documentation at your fingertips, fonts, and cheat sheets.

50 Examples of Effective Uses of Typography Within Web Design

Not only do we showcase typography in the classic sense, but also illustrate that the combination of web design and great typography can be used effectively, along with clever color selection, and create usable web sites thats base design is dominated by text, for either navigation, a good headline, a logo or even used for the entire content.

Essential CSS/HTML Lists Styling Techniques

Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels (with the help of Javascript). These features can help developers build new sites and applications as well as integrate new content into existing applications.

Web Design Trends for 2010

With a new year on the horizon, it’s time to pack away the old, worn web designs and prepare for the brave, new face of tomorrow. Although trends don’t start and stop on January 1st, there is a definite shift from what we craved at the beginning of the year to what we are seeking tutorials for at the end of the year. Most of the time, this shift is subtle. It’s a perfection or re-interpretation of a currently hot trend. Trends help us evolve as designers. As we master the skills of design aesthetic, we continue to push forward to what’s next or what needs to be fully discovered.

• Author’s Username: Maximus
• Member Since: August, 2008
• Location: Sibiu, Europe

How Come?

A buying frenzy occurs on ThemeForest with every new template from MAXIMUS! The reason is quite simple: his templates are perfectly designed and solve problems. With 2700+ sales, he is easily one of our most consistent and top shelf authors!

Portfolio Sample

Marketplace Community WordPress Theme

“Marketplace is a both clean and stylish WordPress theme with the intent and focus on creating a community site for industry news, tutorials, etc. This theme includes many popular built in features seen in today’s industry leading community sites. This themes comes with 5 different color options to choose from.”

Ambiguous Portfolio

“Ambiguous Portfolio WordPress theme was developed to showcase your work. Ambiguous has a large featured portfolio items area well placed on the homepage showcasing the best of your work. Also on the homepage are your most recent blog posts. In the sidebar there is a custom twitter feed feature, about widget displaying brief info about yourself, and a site search feature.”

Convergence Community

“Convergence is a nicely put together WordPress theme with the intent and focus on creating a community site. This theme includes many popular features seen in today’s industry leading community sites.”

Sketchbook

“Sketchbook was created with the online professional in mind and is geared towards an online showcase of blog and portfolio for the creative individual.”

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

In this interview, we’ll dive into his work process, and hopefully steal some tips and inspiration!

How long have you been in the web design business?

About five years ago, I started the Multimedia and Web Design Course at SAE Vienna in my home country, Austria. Back then, I did mostly Flash stuff (almost every piece of work was REALLY horrible to tell the truth) and I also had some interest in html coding (I loved table design back then ). With every course I took, I lost a little interest in Flash and got more curious about HTML and CSS. When they handed me my Bachelor Degree a few years later, I was pretty decent with HTML and CSS whereas my Flash skills were lousy at best.

I did some small projects for an event agency during that time and as soon as I finished College, they offered me a full time Job as a Front-end Developer, which I gladly accepted. I’m still working at this Agency

When/How did you first come across the Envato marketplaces – specifically ThemeForest?

I was a regular reader of the TUTS-PLUS Websites and therefore was aware that there is a marketplace called ActiveDen, where people sell all this neat Flash stuff; but since I was only a Front-end Developer with HTML, CSS, and some PHP Skills at that time, I didn’t really bother.

When Envato announced the opening of ThemeForest, I thought I could give it a try, and uploaded my first WordPress theme. The theme flopped really hard and only earned me 30 Bucks during the first month. Out of pure boredom, I created a second theme.

The second one did a little better, really just a little, but it was enough that I became curious if I could do better with each theme. =)

You’ve been particularly successful when it comes to WordPress theme sales. When developing a new item, do you try to plan for PSD, Site Template, and WordPress submissions? Or do you prefer to focus only on one category per design?

When I started creating templates, I almost always only planned for the WordPress version. I was thinking that the HTML Templates are far to cheap to earn a good amount of money, which is actually not true.

I did this until I invested countless hours into a Wordpress theme which underperformed to a point where I had worked for about 3$/hour for a whole week. Since then, I usually create a HTML template as well, to test if customers like what I have designed.

I still usually don‘t do a PSD version. Unlike other people, I only design to a certain point in Photoshop; many of the small improvements and details that customers see in the final HTML version are added while I code the HTML and CSS.

Though encouraged, we do not require that authors provide support for their items. Do you? Considering how well your items sell, how do you manage to provide quality support to so many different buyers? Any tricks/short-cuts?

It is indeed really hard sometimes to support all customers, especially those not familiar with WordPress, but I try to answer all questions. I think it’s crucial if you want customers to return and buy your themes again. The big problem I guess is providing “Quality Support”. I simply don‘t have the time to do more than 90 minutes of theme support each day, so if I see tons of requests on my Author Dashboard, answers usually (and unfortunately) get a little more generic :/

There are several “tricks” that worked out pretty good for me:

• I am trying to encourage all customers to use the item dashboard and not the mail contact form. That way, other customers benefit from the answers as well and I only have to check one place for requests.
• Updating the documentation file that comes with the download regularly helps a lot as well. I also save answers that I have given more than 2 or 3 times into a text document for copy/pasting on demand.
• Overall I can only suggest to find your own method of streamlining support; the best way to cut down support time of course is to create themes and documentation that are so easy to use, that support requests drop to a minimum.

Do you or have you considered selling on the different Envato marketplaces as well?

Yes. I have tried to upload a flash file once last Christmas, since I had a pretty neat Santa animation. Those who have checked my portfolio might have already guessed it… it seems it wasn’t that neat. ;D

Many successful authors have noted that the biggest advantage to selling their designs through us is that it takes the client completely out of the design process, and instead allows the author full control. Would you agree? Any other advantages?

I agree, it is indeed great to be in full control of all decisions. I have worked with too many clients over the past years who thought just because they can use MS Paint they are great designers But you should never underestimate the positive impact of a second opinion when creating your themes. Therefore I almost always ask some of my colleagues at the agency to make suggestions on my designs before I release them.

I also love the fact that I don’t have any deadlines here and can try new stuff with every theme I release

Do you take advantage of our referral program, or promote your items in any additional ways to increase sales?

Only a little; I promote my themes on my blog and on Twitter when I release them. But since I make postings rarely on my blog, the impact on my sales ain’t that big. ;D I will try to post more often in the future when my sites redesign is finally done, but to tell the truth I am not a very persistent writer.

Without giving away any of your key techniques, if you could only make one choice, what would be the most important thing to keep in mind when selling on ThemeForest?

Study and improve. There are very few authors here that did a great job from the beginning. Almost everyone who is selling a lot nowadays has heavily improved over previous months. I am no exception, I can’t believe how much I have learned about web design and coding during the last year, and I think that’s the best weapon we have. Learn from your mistakes, listen to reviewers and customers and improve with every file you release.

A new member signs up with ThemeForest and is hoping to upload his or her first item. Any advice?

Use the help of the community to get your items uploaded and to improve yourself. Authors, customers, reviewers, almost everyone here is very helpful; so don‘t hesitate and ask Don‘t give up if an item gets rejected several times, it happened to almost all of us!

Final question. What’s next for you? Any special items planned before the end of the year?

I will try to invest more time into my themes, which basically means more themes, hopefully better themes, more updates and better support. I am already in the process of designing the next two items, but it’s been a very busy month at the agency so I haven’t been able to release anything new for a while now.

Last but not least, I wanted to take the chance and thank everyone who purchased one of my themes! I appreciate it more than you probably can imagine. Earning money here is great of course, but its equally amazing to be part of such a great community!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

• View Demo
• Download Source
• Plugin Homepage

The Screencast

The Final Plugin

(function($) {
 
$.fn.jwAnnounce = function(options) {
 
	var options = $.extend({
		className : 'notice',
		text : null,
		siteWidth : null }, options);
 
	return this.each(function() {
		$(this).prepend('<div class="' + options.className + '" />');
 
		var $announceDiv = $('.' + options.className);
 
		$announceDiv
			.append('<div>' + options.text + '</div>')
			.children('div:last')
				.css({
					'width' : options.siteWidth,
					'margin' : 'auto'
				})
			.end()
			.prepend('<span class="close">X</span>')
			.children('.close')
				.css({
					'position' : 'absolute',
					'cursor' : 'pointer',
					'display' : 'none'
				})
			.end()
 
			.hover(function() {
				// over
				$(this)
					.children('.close')
					.show()
					.click(function() {
						$announceDiv.slideUp(250, function() {
							$(this).remove();
						});
					})
			}, function() {
				$('.close').hide();
			});
	}); // end each
 
}
 
})(jQuery);

An enormous, awesomeness-filled congratulations goes out to ThemeForest’s very own, Kriesi! Last month, Kriesi smashed the record for most sales in a single month, across ALL of the Envato marketplaces, as he accrued a whopping 954 sales! This makes him a superstar among superstars — and at twenty-seven years old, I’m in awe of such talent. Please join me in sending out a much deserved congratulations to one of our very own: Kriesi.

What our CEO Tweeted:

“Can you imagine earning 5 figures a month in your spare time?” – Collis

And don’t forget: records are meant to be broken! A bit of friendly competition never hurt anyone. Who’s next??

With the closing of every month comes the arrival of a new free file! This month’s template comes courtesy of DDStudios. Please join me in thanking him for providing us with this beautiful PSD theme for free!

Author : DDStudios

File : Nova – PSD Theme

Nova

Nova is a simple and clean PSD template that is most appropriate for a portfolio or business.

Download Here

Usage:

You are granted ONE free usage of the item in a project either commercial or non-commercial. You may not use the file in multiple projects unless you purchase licenses in the usual way. You may not redistribute the item in any way. If you need a different license for this file, you may purchase it here (link).

More From DDStudios

A&D HTML/CSS

Magnifico HTML/CSS

Nova – HTML – 6 Color Skins

A big thank you goes out to DDStudios for generously offering this PSD template to the community!

Don’t Forget the Other Marketplaces! More Free Files.

Interview With Author Tolga (stmcan)

Tolga is one of ThemeForest’s rising stars with some really great quality portfolio items to offer. When Tolga submits a new template or theme, you can be sure it will have lots of options and styles with a fantastic design to go with it.

Q #1: When creating a new template for Theme Forest, what aspects are top priority and why?

A: “The thing is ‘usability’ what is preferential principle for me to making a new theme for Theme Forest. I have been working in business field about web design and development with hundreds clients approximately for nine years. According to these wide experiences i am trying to convey new themes in this large area as considering customers needs.”

Q #2: What tips for success can you share with our readers that you feel have contributed to your success?

A: “Generally everyone can say that you need hard working and big love to be a successful person in every area in your life. It’s all true for Theme Forest also, but additionally you need to have large perspective to evaluate your themes for the purposes of buyers view point.”

Q #3: What do you enjoy most about the work you do?

A: “I’m enjoying all parts of the web development process. But if I had to choose one, I would choose coding.”

Q #4: Outside web design and development what other interests do you have?

A: “Well, I like sightseeing with my family, the dog is included! These meantimes I’m trying to take photographs, really like B/W ones and also enjoying to make unreal photo manipulations on them. In the near future I would like to open an exhibition.”

Q #5: What are your top four pet peeves in design or web development?

A:

1. Unfortunately we have only 24 hours in a day
2. Extra works for ie6
3. Searching icons or stock photos for design
4. Getting this phrase “This design is ok but, can we see the red one additionally?”

Q #6: What are three of your favorite features used in websites?

A: “My favorite features are sliders which i like to use in my sites also.”

Q #7: What are some tips or words of wisdom you would like to share with our readers?

A: “I’m working as a web developer over nine years and I think if you miss the life while working, your creativeness die away in the course of time. Even if you catch the success, can not get the utmost enjoyment out of it.”

- -

Thanks for taking the time to answer these questions Tolga!

Check Out Tolga’s Portfolio

Notable Additions to the Forest

Here are eight really great new items added to the ThemeForest marketplace over this last week.

[PSD] Grunge Portfolio

“Grunge Portfolio is a grunge design theme for webdesigner, printdesigner, photographer or any other graphicartist you can think of.”

[PSD] Clickloud Web 2.0 Business Template

“Clickloud is a web 2.0 business software template. It’s mainly directed towards the companies that either produce or administrate web 2.0 software content (cloud software companies) but it may be used for a variety of other things: company portfolio, personal blog theme etc.”

[HTML] BigBrands

“BigBrands is a marketing/Portfolio site geared towards showcasing your skills in a variety of fun ways.”

[HTML] Under Construction Page w/ AJAX contact form

“SolidForm Maintenance Page is a customizable “Under Construction” page.”

[WordPress] Concise

“Concise is a very easy to customize theme which best suits business or portfolio sites. This theme has a feature loaded theme options page with over 50 options you can play with to make this theme Yours! – check out the screenshots to see what you get. Concise has a jquery featured slider where you can showcase posts in a specific category.”

[WordPress] WP-Photo – Beautiful Photo Blog

“A Professional Wordpress theme with an ultra-clean layout, big images and superior style. The look and feel of this theme can be used in many ways making it a top choice for businesses, artists, designers, photographers and more. ”

[PHP Scripts] simple PHP Feedback form

“This simple application that will bring a feedback form for your site, you can put this feedback contact form into any interface that you have.”

[PHP Scripts] Contact Form With Custom Auto Responder

“The easy and full functional advanced contact form with validations and custom Auto responder message system which is easy to set no need of php coding.”

More Great ThemeForest Items

These are some seriously great templates, themes and scripts but don’t forget that there’s lots more! View them here!

Chatter In The Forest (Forum Discussions)

Here are some of this week’s forum discussions worth checking out and chiming in on. We’ve got a fresh bit of info. from Collis on an upcoming code marketplace, more proof that authors can make a living at ThemeForest, a “flash” back from the past, birthdays and more!

• Code Marketplace is coming!
• What Do you Buy Templates on Theme Forest For?
• 1000$+ profit
• Which Game Do You Play?
• FlashDen 2006 – Original FD Intro Animation
• Authors Post Your Website – By UNIXIS
• When is your Bday? Making a calendar with your special days
• Movember Competition On The Envato Marketplaces

  “Movember is a mustache growing charity event held during November each year that raises funds and awareness for men’s health.”

  Grow a mo and post a photo on the marketplaces and Envato will donate AU$10 to Movember Australia. Every member who grows a mo will get a special Mo badge. The coolest mo, chosen by Collis, will win the coveted Gold Mo (only given away once this year)!

Blog Review

This week’s fantastic blog posts.

• New Featured Author of the Week: MarkDijkstra
• An HTML-Friendly Template System using PHP’s Output Buffering
• How to Achieve Cross-Browser @font-face Support

Web Roundup

There’s a tremendous amount of information on the web and it’s not always easy to find the cream of the crop. Here are some great tutorials and articles from around the web that are definitely worth checking out.

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.

Top 10 Reasons Why the Closing of Geocities is Long Overdue

Geocities is finally, after nearly fifteen years, bowing its head and closing its doors. While the first reactions of many, like myself, was, “it’s about time;” others embraced the nostalgia of their first websites in the nineties – full of animated gifs, enormous counters, midi tunes, frames, tables, … the list goes on and on. With that said, we can all agree on one thing if we’re truly honest with ourselves: this closure is long overdue!

20 Do’s and Don’ts of Effective Web Design

When you are creating a website (or hiring a web/blog designer to create one for you), there are specific items you need to be aware of. Things that normally wouldn’t cross your mind. For the average person who wants a website or blog for their business, they are after one very important thing – sales. Now, they may tell you that they want the big flashy logos, or the overdone textures/gradients, but it is the job of a well skilled web designer to steer their clients in the right direction.

14 jQuery Plugins for Enhanced Content Viewing

Whether you need to display content within a limited amount of space or you just want to make a section of your website more engaging, jQuery is an excellent solution. With jQuery you can easily create accordion style content boxes, image galleries, and content sliders. Here are 14 excellent jQuery plugins for adding this type of functionality to your site.

To School or Not to School

Education undeniably changes us. Learning new things completely alters our perception of life and the world around us.

But formal academic training is a touchy subject for some people. Going to school to learn a discipline is still not an option for everyone.

As someone who has worked in the graphic design field for quite some time without an advanced degree, I understand that self-education is not to be underestimated.

But just how far can this type of training get you in life before you reach an impasse?

This is one of the big questions in the world of graphic design: is design school worth the time, money and effort? Does it pay off?

Brand = User Experience: The Interface of a Cheeseburger

There he goes, the web designer, stepping up to the counter of an empty McDonald’s at 3 o’clock in the morning. He is scanning the overhead menu, putting a cheeseburger in his mental shopping basket. “Cheezubahga, onegaishimasu,” we hear him say, “with an iced tea.”

Waiting for his order, he examines the wireframe of the display on the cash register, the mechanical logic of the deep fat fryers, the input/output logic of the ice cream dispenser. Coming late from work, with his mind still in design mode, he starts tracing the restaurant’s interaction model, drawing arrows from the entrance to the counter to the tables to the trash cans; seeing how the conveyor-belt kitchen, the trays with the paper liners, the bolted down seats and the meals comprise a single, complete customer interface. “They must have run usability tests,” he thinks, taking his tray to the table.

• Author’s Username: MarkDijkstra
• Member Since: March, 2009
• Location: Netherlands

How Come?

Hailing from the Netherlands, Mark has been a very active member of the ThemeForest community for the last eight months or so. We can all look forward to each new submission from him, as they invariably are of extremely high quality.

Portfolio Sample

Sapphire Online

FreshCMS

AP Administration Panel

Tutorial Details

• Program: PHP
• Difficulty: intermediate
• Source : Download

The Problem

If you want to use a template engine you can choose from many mature and feature rich solutions. Nevertheless there is one thing most of them have in common: It’s their basic concept of including one template into another.

{include file="header.tpl"}
Display user profile here.
{include file="footer.tpl"}

The above example in Smarty includes a header file, then displays the content for the current page and at last includes a footer. Now imagine the contents of both included templates. In a very abstract scenario they could look like this:

header.tpl:
<html>
    <body>
 
footer.tpl:
    </body>
</html>

In a real-world example both files always contain much more markup code and often when you want to change the header you also have to change the footer.

This becomes a pain if you have them in two editor tabs and must look where to insert the appropriate ending tag and so forth. Therefore it would be nice if we could have complete markup trees. HTML code that belongs together should be found in one and the same file. Hence the template structure and template management are cleaner and easier.

The Idea

Those of you who have ever worked with Django are likely to be familiar with the concept of extending templates. This is exactly what we want to achieve in PHP now. Just look at the following template code:

main.tpl:
<html>
    <head>
        <title>{ begin "title" }Default title{ end "title" }</title>
    </head>
    <body>
        { begin "content" }
        This is some default content.
        { end "content" }
    </body>
</html>

We have a beautiful unshattered piece of HTML code. It contains some Smarty-like template code defining two extendable or overwritable parts in our template.

sub.tpl:
{ extend "main.tpl" }
{ begin "title" }My sub-template{ end "title" }
{ begin "content" }
<p>
    My sub-template content.
</p>
{ end "content" }

Above you see the extending template “sub.tpl”. What happens now if we load “sub.tpl” and display it is, that all begin/end blocks are parsed separately. Then they are inserted into “main.tpl” at the appropriate positions. Please note that we now have two template files that contain clean HTML markup trees instead of three files with divided HTML elements.

As a side effect we can define parts of the template that are displayed by default. If we omit one section in a sub template the default content of the master template
is used.

So if we use such a template system there are several benefits:

• We don’t break HTML structure.
• We can access the specific template file we need without any detours.
• We can setup a structure of templates extending each other. (So to say OOP templates )

The Implementation

Now that you know what this is all about we can think of a small example implementation. I’ll be using PHP as the template language (since I wonder why people write language parsers in a perfect template language itself…) and the output buffering functions to implement it as fast and slim as possible.

Let’s define how we want to access our templates. I think something like this should be fine:

$template = new Template( 'sub.php' );
$template->display();

So we need a constructor that takes the filename of the template and a method that brings the template to standard output. Also a constant that defines the path to the folder containing our templates and a method called “build” returning the template content as a string would be nice.

class Template
{
 
    const DIRECTORY = './templates';
 
    protected $path;
 
    public function __construct( $name )
    {
 
        $this->path = sprintf( '%s/%s', self::DIRECTORY, $name );
 
    }
 
    public function build();
 
    public function display()
    {
 
        echo $this->build();
 
    }
 
}

As the next step we need the method “extend”. It has to load anotoher template and save it until we’ll access it again in the “display” method.

protected $extendedTemplate = null;
 
public function extend( $name )
{
 
    $this->extendedTemplate = new Template( $name );
 
}

Next we can implement the methods needed for extension templates. The method “start” will set a variable with the name of the section and start output buffering.

protected $sections = array();
protected $currentSection = null;
 
public function begin( $sectionName )
{
 
    ob_start(); // start output buffering
    $this->currentSection = $sectionName;
 
}

When looking at “end” we have to distinguish between two cases: If $this->extendedTemplate has a valid value the method has to save the section content into an array, mapped to the section name. Otherwise the current template is a master template. Then the method shall output either section contents that were set by a sub template or (if not existant) output the buffer data which represents the default section
content. Please note that we won’t use an argument in the “end” method. This would only be necessary for error checking or if we wanted to implement nested sections. Both things are quite useful but are not part of this tutorial. Needless to say you are invited to practice your PHP skills and implement this stuff later.

public function end()
{
 
    if ( !is_null( $this->extendedTemplate ) )
    { // current one is a sub template
 
        // read buffer contents and drop them
        $this->sections[ $this->currentSection ] = ob_get_clean();
 
    }
    else
    { // current one is a master template
 
        if ( isset( $this->sections[ $this->currentSection ] ) )
        {
 
            ob_end_clean(); // drop default content
            echo $this->sections[ $this->currentSection ];
 
        }
        else
        {
 
            // output buffered data and drop buffer
            echo ob_get_clean();
 
        }
 
    }
 
}
 
// will be called from "build" later
public function setSections( $sections )
{
 
    $this->sections = $sections;
 
}

Now the most important part: the build method. Note that we load the PHP template only when “build” is called. So everything we have coded until now is executed in the template files on the fly. Thus it might be a bit hard to understand what’s going on here. B

At the end of this tutorial I want to list some

ut if you follow the order of method calls carefully you’ll get it.

public function build()
{
 
    // start output buffering
    ob_start();
 
    // just include the template file (some error checking would be nice)
    include $this->path;
 
    // Now our "extend", "begin" and "end" methods can be called from the template
    // using $this: $this->extend(), $this->begin() and so on...
    // We can't do anything here, just wait until the template is included
    // Note that we capture the HTML output with the output buffering.
 
    // get our buffered data
    $output = ob_get_clean();
 
    // Now we can check what we've got.
    if ( !is_null( $this->extendedTemplate ) )
    { // we have a sub template, go on with the master template
 
        // Since a master template is set, the "end" method has captured the contents
        // of the template sections. Now we have to provide the master template our
        // data.
 
        $this->extendedTemplate->setSections( $this->sections );
 
        // Now just display the master template.
        return $this->extendedTemplate->display();
 
    }
    else
    { // we have a master template, nothing more to do here
 
        return $output;
        // Since in a master template the "end" method outputs either the default
        // content or the extended data of a section our HTML output is complete.
 
    }
 
}

And that’s all the magic going on. Let’s implement the example from the second part of this tutorial using our new class. Be careful with those “

main.php:
<html>
    <head>
        <title><? $this->begin( 'title' ) ?>Default title<? $this->end() ?></title>
    </head>
    <body>
        <? $this->begin( 'content' ) ?>
        This is some default content.
        <? $this->end() ?>
    </body>
</html>

sub.php:
<? $this->extend( 'main.php' ) ?>
<? $this->begin( 'title' ) ?>My sub-template<? $this->end() ?>
<? $this->begin( 'content' ) ?>
<p>
    My sub-template content.
</p>
<? $this->end() ?>

That’s it. Note that this class is not complete at all. For instance, it has no variable handling and it is also only capable of loading one sub template and one master. (If you change it in a way that the section contents provided by a sub template are saved in a separate variable than in the array containing the own sections you can also extend extended templates…)

Nevertheless, I hope this tutorial has shown you a nice but rare concept among template engines and some interesting aspects of PHP’s output buffering functionality.

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

• View the Demo
• Download Source

Preface

If you haven’t been living in a cave for the past few months, you will have heard lots of talk about the @font-face CSS declaration, which lets you use custom fonts in your web pages. This is very exciting, but unfortunately every browser supports @font-face slightly differently. The latest browsers support linking directly to truetype or opentype fonts, but this has caused a lot of debate about licensing issues with the fonts. Fortunately, services like Typekit are trying to solve the licensing dilemma, and if you want to read more about Typekit there are plenty of articles including one on Nettuts+, by Jeffrey Way.

Internet Explorer was the first browser to support @font-face, going all the way back to IE4. They still support it the same way they did then: Using a proprietary format called EOT, or Embedded Open Type. EOTs font have restrictions in place in order to try to solve the licensing problem, for example EOT files can be tied to a particular domain so that other sites cannot hotlink to your font files, or download them for their own use. They also have support for font subsetting, or including only the characters that you need in your page. This can drastically reduce file size, which is always important when designing anything that needs to be downloaded over the internet. EOT files are a solution to the licensing problem, but some people do not like the fact that they contain a form of DRM. There have been efforts to create a specific web font format that all browsers would support, and would solve the licensing problem, but like any new web standard, these initiatives would probably take a long time to be finalized and implemented in all browsers. Rather than waiting until then, you can actually use @font-face today with a bit of work. Below is a list of the font formats supported by various web browsers.

Source: Wikipedia

Step One: Obtain Your Font

Because of licensing concerns, you cannot simply embed any font on your website. Your best bet is to get a free font. There are lots of great free fonts out there, and lots of sites have lists of free fonts that you can use with @font-face. The site I like for getting free fonts is fontex.org. They have all kinds of fonts, and it is pretty likely that you’ll find one that suits your design there.

Step Two: Convert Your Font

Because of the diversity of formats supported by the popular browsers, you’ll need to create at least three font files in order to get support cross browser. First you need a TTF or OTF font for Firefox 3.5 and Safari. Fortunately, most of the free fonts that you will come across will be in one of these formats. Second you will need an EOT file for Internet Explorer. Microsoft has a tool called WEFT that can be used to create EOT files, but it was created in Windows 98 days, and has an awful user interface, and may not even run on your computer. Luckily, a hacker has reverse engineered the EOT font format, and published a command line tool called ttf2eot. Now don’t fret about having to use the command line, because you don’t have to. There are a few online tools that have created graphical user interfaces for ttf2eot. The one that I’ve found works the best, is the Font Squirrel @font-face Kit Generator. As it’s name implies, it is a tool created specifically for creating fonts for @font-face, and it can generate a number of formats including EOT. All you need to do, is upload your font file to their service, select your output formats and hit download. A folder with all of your converted font files, and a demo page will be downloaded to your computer once Font Squirrel is done converting your fonts.

There are a number of different options available in the Font Squirrel converter, such as subsetting the font, that you can play around with. Other than an EOT file for Internet Explorer, Font Squirrel can generate SVG fonts (which we’ll discuss in a minute), and WOFF fonts. A WOFF font is one of the new proposals for a web font file type, and will be supported by Firefox in version 3.6. Don’t worry about generating that file yet, since no shipping browser supports it.

OK. Let’s talk about SVG fonts. You might have heard of SVG as a vector graphics standard, but SVG can also be used to create fonts. All browsers that support SVG support SVG fonts within SVG files, but some browsers also support the use of SVG files in @font-face. We will be using SVG fonts in order to get support for @font-face in Google Chrome, Safari for iPhone, and the Opera browser. Font Squirrel has the ability to generate SVG files, but they often ended up more twice the size of the original font in my testing. If you are comfortable in the command line, there is another tool that can be used to generate SVG fonts that are about the same size or even less than the original file. If you aren’t comfortable on the command line, you can skip to step four.

The best way to generate SVG fonts, is to use the command line tool ttf2svg from the Java SVG toolkit Batik. You need to have Java installed on your computer in order to use it. Mac users will have Java installed by default, but Windows users might need to download and install it. Next, you need to download Batik. Within the downloaded folder, you will find a file called batik-ttf2svg.jar. This is the converter program used to create SVG fonts. Unfortunatly, the converter only deals with TTF files, so you’ll need to convert any OTF fonts that you have into TTF files first. You can use this online font converter to do that. Open up a command line window, and type the following command:

java -jar /path-to/batik-1.7/batik-ttf2svg.jar FontName.ttf -o FontName.svg -id font

You’ll need to put the correct path to the batik-ttf2svg.jar file on your computer into this command, and replace “FontName” with the actual name of the font that you are using. The last option used in this command sets the ID of the font in the generated SVG. This will be important later, and you can just leave it as “font” for now.

Step Four: The CSS

OK. We should now have all of the font types that you need to get cross browser support. Now, we just need to write the CSS to actually embed the fonts. Building on the work of Paul Irish and his bulletproof @font-face Syntax, here is the code:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

This code links to all of the different font formats that we have created, and will make the font work cross browser. First we give our font a name that we will use in the rest of our CSS in order to specify this font for use in our page. Next, we have two src properties: one for IE, and another for all other browsers. We want IE to use the EOT file, so we link to it first. The second src declaration will be ignored by IE because it thinks that we used invalid syntax. The second src declaration is a list of all of the other formats, in the order that we want them to be used in. The first two formats use the local function to check whether the font is already installed on the user’s computer. If it is, we don’t want to download the font over the network. There are two of them because Safari only supports the postscript font name, so when the postscript name differs from the normal name, you should include both. The next format after the local formats, is the TTF, or truetype font. If you are using an open type font, you would put that here. The truetype or opentype font will be used by Firefox 3.5, Safari, and Opera 10. I put it before the SVG font for performance reasons in Safari, which supports both truetype and SVG fonts. The last format is the SVG font for use in Google Chrome, Opera 9, and the iPhone. You will notice that in the URL of the SVG font there is a hash: “#font” in this case. This corresponds to the ID that we used when we generated the SVG font. If you followed the command line instructions above, you will have specified an ID to use. If you are using the SVG file generated by Font Squirrel, the ID will be the font’s postscript name (the second local() definition). This is there because you can actually have multiple fonts embedded within the same SVG file, and you need to specify which one you want to use.

To use the font that you just declared in your CSS, you just need to reference it like a normal font. The name that you reference corrisponds to the font-family name that you specified in your @font-face declaration. Remember to always provide a fallback web-safe font for people using really old browsers, otherwise they will end up with their browser’s default font. For example:

h1, p {
    font-family: 'Comfortaa Regular', Helvetica, Arial, sans-serif;
}

Examining the Appearance

Great! You now have your font working in all browsers. Now how does it look? Well, that depends on what operating system you are using. On Mac OS X, the fonts will look pretty good. On older versions of Windows, however, they might not look so hot. This is because Microsoft’s font rendering engine does not antialias (smooth) the edges of the fonts it renders. This produces a terrible look, which was recently complained about by the users of Boing-Boing, who said that the font used in their redesign looked “awful”. In Windows Vista, Microsoft enabled a feature that had been in XP but not enabled by default, called ClearType, which aims to make their font rendering look nicer. There is a way to enable the feature in Windows XP, but most users have not. Thus, you as the designer of your page need to make the decision about whether to use custom fonts. In my own testing, custom fonts at small font sizes looked just fine. At larger font sizes that you might use for large headings on your site, the fonts didn’t look so good. In general, the more curvy the font, the more jagged edges you will see. If you have a large proportion of users using IE on your site, you are better off using something like Cufon for the large headings on your site, and @font-face for the smaller text. Some fonts will look just fine at larger font sizes – it depends on the font. So do some testing on older Windows computers before you put your site live, and make that decision. If you need to use Cufon, there is a great tutorial right here on Nettuts on how to use it.

Conclusion

I hope that this tutorial provided you with some knowledge about how to embed custom fonts on your website, and I look forward to a time when it isn’t so difficult! If you have any comments, you can leave one here or send me a message on Twitter. I’d love to see your sites with custom fonts!

• View the Demo
• Download Source