Like Google always do, in beta. The good thing about using Google font directory is that there is no copyright issue, I’m pretty sure Google may take care of those before publishing their typeface.

It is very time saving and very easy to implement into your design.

Link to the stylesheet:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>

Call a CSS:

h1 {
font-family: ‘Tangerine’, serif;
font-size: 48px;
}

Use it on your site:

<h1>Making the Web Beautiful!</h1>

As simple as that, only 3 steps to remember and some typefaces’ name. Currently there are only 18 typefaces ready in Google font directory, I definitely hope to see more.

Here are a few which I personaly think a good hack to develop a website other than a weblog using WordPress.

Feature entries / Specific categories update

This is useful when it comes to a web magazine or a business blog.

<?php
wp_reset_query();
query_posts(‘showposts=’5&cat=Feature’);
if (have_posts()) : while (have_posts()) : the_post();
?>

<h1><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h1>
<?php the_content(); ?>

<?php endwhile; endif; wp_reset_query(); ?>

The wp_reset_query(); is to destroy the specific query. Since it reset the query, you are free to add as much as you want on your design.

Widgetize

This is, almost certainly a feature never missed. But how to write a good one and understandable? Name it and style it. The widget code looks like this:

if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Sidebar’,
‘before_widget’ => ‘<div class=”sidebox”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

On the ‘name’ => give it a name on each and every widget you designed. Some theme has more than 5 widgetized areas.

Theme options

Themeforest blog has a great tutorial about how to create a theme option. However, how you develop it is the key.

What can a theme option possibly do? Here are list of what I did after the tutorial.

• Enable disable – Almost any thing, from breadcrumb, social icons and etc.
• Feature slider with category name and number of entries
• Twitter username and it’s number of update or enable/disable the update
• Changing stylesheet

It may seems hard to create on, but it definitely easier if you understand how it work, even you’re a PHP noob, like me Below I compiled a list of auto-generated checkbox, text form, textarea and select input.

$settings = array(
‘desc’ = “Something about the description’,
)

$themename = “WP theme option”;
$shortname = “mythemename”;
$options = array (

array(
“name” => “Function name”,
“id” => “a_message”,
“std” => $settings['_message'],
“type” => “textarea”,
“note” => “A message.”,
),
array (
// More function //
),

);
function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo ‘<div id=”message” class=”updated” style=”position: absolute; top: 0px; right: 0px;”><p><strong>Settings saved</strong></p></div>’;
if ( $_REQUEST['reset'] ) echo ‘<div id=”message” class=”updated” style=”position: absolute; top: 0px; right: 0px;”><p><strong>Settings reset</strong></p></div>’;
?>

<form method=”post” action=”">

<?php } elseif ($value['type'] == “text”) { ?>
<p>
<h2><?php echo $value['name']; ?></h2>
<input onfocus=”this.select();” name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>” type=”<?php echo $value['type']; ?>” value=”<?php if ( get_settings( $value['id'] ) != “”) { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>” />  <?php echo $value['note']; ?></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “textarea”) { ?>
<p>
<h2><?php echo $value['name']; ?></h2>
<textarea name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>”><?php if ( get_option( $value['id'] ) != “”) { echo stripslashes(get_option( $value['id'] )); } else { echo stripslashes($value['std']); } ?></textarea>
<?php echo $value['note']; ?></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “select”) { ?>
<p>
<h2>?php echo $value['name']; ?></h2>
<select name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>”>
<?php foreach ($value['options'] as $option) { ?>
<option <?php if ( htmlspecialchars(get_option( $value['id'] )) == htmlspecialchars($option)) { echo ‘ selected=”selected”‘; } elseif ($option == $value['std']) { echo ‘ selected=”selected”‘; } ?>><?php echo $option; ?></option>
<?php } ?>
</select></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “checkbox”) { ?>
<p>
<h2>?php echo $value['name']; ?></h2>
<?php if(get_settings($value['id'])){ $checked = “checked=\”checked\”"; }else{ $checked = “”;}?>
<input type=”checkbox” name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>” value=”true” <?php echo $checked; ?> />  <?php echo $value['note']; ?>
</p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “header”) { ?>
<?php } }?>

<div style=”clear: both; padding: 20px; overflow: hidden”>
<input name=”save” type=”submit” class=”button-primary” value=”Save changes” /><input type=”hidden” name=”action” value=”save” /></form>
<form method=”post” action=”"><input name=”reset” class=”button” type=”submit” value=”Reset” /><input type=”hidden” name=”action” value=”reset” /></form>

<?php }
add_action(‘admin_menu’, ‘mytheme_add_admin’);
foreach ($options as $value) { if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
foreach ($settings as $k=>$v) { $var = $shortname.’_’.$k; if (!empty($$var)) $settings[$k] = $$var; }
function dp_settings($key) { global $settings; return $settings[$key];}
?>

There, I placed all the possibility use of the options. Text, textarea, checkbox and dropdown select. Go wild with your creativity!

Page template

Sometimes, you can’t get away from create a page with a unique design. That’s what most web designer will do, even a blog.

<?php /* Template Name: Template name */ ?>
<?php get_header(); ?>
Your content is here
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Web designers likes to custom design a profile page on their weblog. That is when the page template comes to play.

Custom homepage without setting

Some of us like to use the static option to set a specific homepage. But that will only help query run more and longer. To shorten it and go straight into the custom design, this code:

<?php if(is_home()) { ?>

<?php include(‘custom_design_content.php’); ?>

<?php } else { ?>

<?php get_header() ?>
<div id=”content”>
<?php include(TEMPLATEPATH . ‘/post/feature.php’); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . ‘/post/post.php’); ?>
<?php endwhile; ?><!– END Loop –>
<?php pagination(); ?>
<?php include (TEMPLATEPATH . ‘/post/pagenavi.php’); if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
<?php else : ?>
<?php include(TEMPLATEPATH . ‘/post/none.php’); ?>
<?php endif; ?>
</div><!– END Content –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php } ?>

So if it is on homepage or index page, it will directly show custom_design_content.php instead of the normal blog entries listing.

However, the big down side is that it cannot use static to show a blog entries page.

WordPress 3.0 was said to be better developed and was like a CMS instead of blog engine. Can’t wait for the release now Let’s see if the release helps cut short all the tips and hacks we usually found online.

Email client about the leave

It is important to let the clients know that you’re having a road trip and might not be able to get back to them in a short time. You surely don’t want to make them waiting and wondering what is going on, why there is no reply since the last email, and so on.

Going MIA (Missing In Action) out of a sudden will give a bad impression that you are irresponsible to the client. Therefore I always informed my clients about my trip/leave and make sure that some heavy jobs has been done before I head off for the trip.

It is as simple as 1,2,3: Take some time, finish the heavy job and take the leave.

Have a mobile broadband

I registered a mobile broadband for home use (at the moment) and travel use. Of course I did not online all the way when I was having a road trip. There are time like lunch, dinner or having rest in the room for the day which can be more leisure with Internet on hand. You can check if there is any urgent email too.

Nonetheless, if you have a Twitter and your client is following you, they sure know what and where you’re heading to too – talk about interactive with client. Well, the worst senario is no Internet connection at all. That means, time to have real fun on the trip.

Take light work only

Jobs like designing stuffs is a big no-no for me. I prefer to take web-developing job with me on the trip.

I am using a laptop as my working computer and working with the touch pad is not recommended at all, and could possibly lead to a waste of time.

It comes in handy when you just want to do some typing work and there is no proper table around you. Hence I prefer to work on jobs that involved using keyboard (such as writing proposal and coding) more than using mouse (talk about designing) when I am on a road trip.

External battery

When you are on a road trip, that means you will spend most of your time outside. Prepare to be on the road without any electronic devices, not even your mobile phone.

Always remember to get external battery or adapter if possible. Once I finished using the battery of both my laptop and my hand phone, I couldn’t do anything at all besides waiting for the time I get back to my room and charge them. Car charger is a very good companion if you’re driving.

Hopefully you can add in your experience too.

There are plenty of software that helps you to create a local server. EasyPHP, XAMPP, WAMP and the like. I personally recommend WAMP as it have not crash with any software I have installed in my computer. EasyPHP has some bug on mySQL connection, while XAMP is a little bit advance.

Installing WAMP

First off, install WAMP from http://www.wampserver.com/en/download.php

Make sure you don’t block the Apache when the notification windows pop-up.

Once you have installed it, look into the folder C:/Program Files/wamp/www if you follow the default setting when installing. www folder works like public_html or domain_html on your normal hosting account.

Leave index.php in the folder, it is a handy little index page for you when surf to http://localhost.

Installing WordPress

Download WordPress from http://wordpress.org/download

Once you downloaded it, unzip it and copy the whole folder into www folder and you’re set to install the 5-minute installation.

Mac user

Mac user has this little application called MAMP, it works just like WAMP but then, it is 100MB over in size, prepare to spend some times to download them

1. Stylesheet media handling
2. Re-structure the CSS/Web layout
3. Trim down images loading

Anyway, I might miss something else, but do correct me if I’m wrong. After all, it’s my first time working on mobile web. Can’t say it’s a pure mobile web, but it’s a transformation from a screen web to mobile web, depending on how Opera Mini was config. I have a Nokia E71 with Opera Mini too, I have to set it to “Mobile View” in order to use the handheld view.

Stylesheet media handling

Normally a website should consider 3 stylesheet, one for screen, one for mobile and one for printing. For mobile, the media is “handheld”
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
Only browser that set to view in mobile only can view mobile version though, or else it will still shows full web.

Due to the cost of mobile browsing, consider hidden all the images on the site.

Re-structure the CSS/Web layout

When it comes to re-structure the same layout, display: none is a good friend. I’ve hide sidebar, some header images, content images.

Trim down images loading

By using also display: none it should help mobile browsing faster.

Things that you should consider to display: none:
Sidebar
Most people will crumpled their sidebar with ads and images, which will take a lot of bandwidth. Consider don’t need the sidebar when showing in mobile, the common screen resolution of mobile are just only 240×360.

Footer or the sitemap
Because browsing in mobile is a “light” activity. There is no need for full information on the web anymore.

Advertisement and Javascript
Advertisement and Javascript are those takes the longest time to load and also the bandwidth eater.

I’ve trim down from 50kb to only 5kb load of mobile web, saving my bandwidth and cost

Web design, as in all kind of design or a specific design

What is the content of the “design” in web design. It is the effect? The structure? The arrangement? Or the guide on a webpage? Which one is the core job of the web designer? Designing a web site shouldn’t be a web designer, but a web architecture, because one need to know how to structure the whole layout, then guiding the visitor from one part to another.

Web designer are multi talent already

If you’re still speak about design and design only, I would suggest to go for a design firm instead. Some of my ex-colleagues still keeping web design as a topic, which I think it is a little out of date. Web designers nowadays is more than just design the layout, there are a lot of area they explore into. For instance, cutting down the resources, solving web technical problem,

Web trend then web copy

Some say follow the recent “we trend” some say it is copying the design. I would say it is just the way of web appear to the people now. Web cannot be copy unless, you clone the exact same one, else it is not a copy, but a trend people following. Big typeface, gradient background and etc are the web trend now, are they copying each other? Not likely.

Keeno

Chris Rowe

Yalamber Subba

Josh Minnich

John Sutherland

Tyler Finck

SOFA

MISONA

infekted

Bunton

Google Pagerank

A lot of people has difficulty get Google page ranking, but what does it really do. Google PR only for Google search engine, the higher your site PR is, the more search result it will comes out, means Google put priority on your site instead of other relevant site. It does not mean that if you have no Google PR for your site, your site won’t comes out from the search result too. So the key to win the situation when you have no Google PR is to get a real good keyword, the most in-demand keyword if you can. Well, Google Webmasters tool is the complete set of tool for you to understand and know your position and keyword of your site.

Alexa Ranking

Alexa ranking is not depending on the redirect like everyone talking about, after all the redirect is not working now, because of the abuse people placing all over the Internet. In order to build Alexa ranking, you’ll need Alexa toolbar for Firefox. Alexa pull information from users who use Alexa toolbar, and monitor how and what those users visiting. So Alexa ranking is greatly depending on your visitors’ browsers. If most of your visitors are using IE, forget it!

Seriously, Alexa ranking is nothing. When I was working in a firm, my manager asked me to build Alexa ranking for the company site. All I did was install Alexa toolbar and open the company site everyday. Within one week, the ranking went up 20,000.

Ranking is really not the key to success now, but it is essential information for advertisers to know how they’re going to be expose. However, that can be done with traffic too.

Delete unused or inactive plugins

Most people doesn’t care about the plugins, doesn’t matter how many unused plugin on their list, as long as they did not activate it, they thought it would be fine. Which is not really, because each time you load your WordPress, it will go through all the script in the engine so it won’t miss anything out to load. The listing is taking time, and resources on your CPU. Consider to delete them, install them again if needed, some how, WordPress 2.8 has a nice built-in plugin search and installation with a few clicks.

Clean up the template CSS

Seriously, I find this funny too. Each spacing is the key of cleaning up the template code. Both CSS and PHP template always has lots of space between lines and columns. Delete them or use shorthand code.

Code like:
#div {
font-family: Arial, Verdana, Tahoma, San-serif;
font-size: 1.2em;
font-weight: bold;
font-style: italic;
}

Can be shorthanded into:

#div {font: bold italic 1.2em Arial, Verdana, Tahnoma, San-serif;}

Spacing and long winding has been cut short for easier loading.

Clean up the template PHP

While you’re cleaning up the CSS, you should consider about the PHP too. Just take a look into header.php, there are too much code that is not necessary, if you know your site well.

Things like:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<?php wp_head(); ?>

Are not necessary, if you know your website well. Language and charset, instead of asking to query the PHP again, it is always best to fix it yourself. Normally the language set to en-US and charset is UTF-8.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Of course the wp_head() are mostly SEO friendly meta tag. SEO can easily archived by a plugin, I normally delete the line too.

WP Super Cache really helps

I ended all my WordPress sites with WP Super cache plugin. I can’t deny the power of gzip compression it created to help cutting down the load of WordPress. WP Cache will create a static HTML files for certain pages, instead of query the PHP and your database again, it will show the static HTML to the rest of the visitors, which it doesn’t query any PHP at all.

I believe it’s not all yet. Those are what I normally do to cut down my sites and host load. Recently my host provider has a problem with high load server. The thing is m,y host provider is WPWebhost, a WordPress specialised hosting provider, I’m pretty sure there are bunch of account with WordPress sites did not optimise their WordPress.

Designers stealing each other

It is very clear that there are lots of articles or information about recent web trend. Now, tell me, are those stealing the design and transform it into an articles for all other web designers to steal together?

It is as simple as brain stroming. From one trend to another, by the time you have a bunch of idea on paper, the “trend” would eventually gone and you’ll have an authentic and unique design. I agree to those who say getting inspiration from a design also consider as stealing.

Newbies copy design

Most web designers who copy an existing design is because they are new to the field. They have no place to go for, they don’t know how to make a great design beside taking from somewhere else, which eventually ended up copying the existing design. I too made some copying design previously, but it happen mostly on my own weblog. My weblog is like my experimental subject of WordPress, design and PHP.

Newbies who copy are not necessary a bad thing, but newbies who sell the design is bad bad thing. Copying could be a practice too. In order to polish up your Photoshop or XHTML/CSS skills, copy an existing design from scratch.

We have to be honest, we can’t stop from influenced by the environment and the surrounding. A lot of web designers (my ex-colleagues and friends) likes to sit on the desk and online to get (read: steal) inspiration. After all, when one designing on Photoshop, one will automatically thought about how the great design he seen before potrait.