Hello! I haven’t been able to write anything on this blog for the past few weeks because of the high amount of work and deadlines I’ve been trying to chase. What can I say, I love what I do. I was set to launch two websites in three weeks but I’m basically done with one so my time is freeing up a little.

Back in August when I had just launched my site, I wrote about how Blizzard.com can do better with their website. I talked about how their website inspired me to learn web design and development a decade ago and how they seriously needed a makeover.Last Friday, to my surprise, I get a personal e-mail from the Lead Web Designer of Blizzard.com who told me he found the article I wrote last August and was thankful for the input and thoughts I shared, as well as following their web presence after all these years. Needless to say I was pleasantly shocked that someone from their web team would respond and that e-mail made my day. Talk about reaching out to your customers, a classy move indeed.

Of course, it was no coincidence in terms of timing that they wrote me last Friday. They also wrote to tell me that they had just launched their new redesigned website. Without further ado, I give you a screenshot of the newly redesigned Blizzard.com homepage.

I think their new website is awesome, in a professional sense of course haha. It’s what you’d expect from a 2009 redesign with the corporate color pallete intact and the game-inspired user interface that makes who Blizzard is. The mix of a clean and edgy feel allows them to not only be Blizzard the corporation, but Blizzard the gaming corporation.

I’ve always enjoyed how Blizzard uses flash as a supplement to their pages. With some of the best animators in the world, they have the resources to produce these very creatively done animations. Last time I used Flash, particle engines were picking up steam and usage so I wonder what engine they used to create the effects, if any.

So that’s it, be sure to check out the new snazzy redesign yourselves. Congratulations to the entire Blizzard web team, you’ve definitely moved your website out of the 90’s. P.S., Sorry I have to nitpick a little, there’s no favicon haha. :)

Humor me for a moment as I give a glimpse of my non-professional life. I promise it has something to do with design and development. Last Saturday, I joined the GCF Youth L.I.V.E. Missions team on an outreach to an urban poor area in Quezon City. For one thing, I did not work a lot during the past week so I thought I might as well do something extremely productive with my time.

For one day I served as a driver for the youth as well as handling a group of children from that area. It was a very fulfilling experience seeing how very little things can make a difference in the lives of children, even if it was only for a single day. This was my first time to help in one an outreach so it was surprisingly very fun talking to the kids and playing around with them.

So, what does this have to do with professional designers and developers? Well, I’d like to say that in any profession, I believe there is no excuse not to give back with the God-given talents you have. If you’re a web designer or developer, consider building a website for one non-profit organization a year. If your a print designer, how about designing posters for non-profit events this year for free.

More importantly, if you’re a designer or developer of any medium, without that many portfolio items, giving back pro bono style can provide a win-win situation for both parties involved. The organization get’s free design and more importantly, you get work to display in your portfolio, get to hone your budding skills, make a mark with your style and if you do a decent enough job, may obtain a stream of referrals from that non-profit. As an added bonus, pro bono clients will probably be some of the best clients you’ll ever have. They’re happy most of the time with anything you can give (which means you can experiment a lot) and most of the time, don’t hassle you at any angle.

When I look back at my very short life so far, I’ve always found a recurring theme when it comes to giving back. I’ve found that you always get more in return than what you give. When I was starting out with design, I chose to help out in my local church. Because I could experiment and make mistakes, I was able to grow into the profession I am in right now. Even if you’re an established professional, sometimes you have to believe that work isn’t always about the money or how bigger your pockets will be getting in return. Sometimes it’s about the intangibles in life and getting things of greater value.

As human beings, no matter what the profession, I believe that everyone can make the time to give back to their community, even if just once a year, and they’ll more often than not be pleasantly surprised to find that they get more out of it than they expected.

In a past article, I’ve already talked about how Drupal bests Wordpress in out of the box page optimization techniques but also, how Wordpress is not far behind. Today, I’d like to continue my series by talking about how Drupal and Wordpress both differ in their implementation of WYSIWYG (What you see is what you get) editors for content.

WYSIWYG editors seem to be standard issue these days. Blogging platforms like Blogger and forum packages like PHPBB have them pre-installed to help users add styling and HTML to their content. In content publishing, having those quick and handy buttons on the top help writers to quickly pull together styling the content without having to know any HTML or CSS.

Wordpress

As I type this entry, I look at all the available buttons here and are glad that WYSIWYG editors were invented. Out of the box, Wordpress comes with a very robust and feature-rich WYSIWYG editor. Obviously, the platform is built for bloggers so content publishing is the central feature of this CMS and Wordpress does it very well.

I learned how to use Drupal before I learned Wordpress so I was pleasantly surprised to see the WYSIWYG editor built in and ready to be used just like that. No fiddling with plugins, and no separate installation. I particularly love how images are handled with an easy to use interface.

Drupal

You probably got a hint from above that Drupal’s WYSIWYG just ain’t as good as Wordpress. One big flaw that Drupal has out of the box is that by default, all content is written in plain text. If you need to add styling to your content like bold words or italic characters, you’d have to know HTML and add those directly to the content.

To add a WYSIWYG editor to your Drupal installation, you’ll have to download and install a module called, you guessed it, WYSIWYG. Last time I checked though there were a few bugs that hindered the user experience but that could of changed since the last build. The good thing of having to install this is that you get to choose between a number of different flavors and brands of WYSIWYG editors which include the likes of TinyMCE and FCKEditor. I prefer TinyMCE but the others have their advantages as well. This can be great for power users but for the less educated and less experienced, the choice can be confusing and the fiddling could be frustrating.

Image uploading and insertion can also be more confusing than Wordpress to the less computer savvy. It’s not as straight-forward as I would like it to be but it does get the job done.

Final Note

This is one area where I think Drupal can take something from Wordpress. There is no reason that content should not be given the option of being styled, so in effect, the WYSIWYG editor should not just be an add-on, but should be included  out of the box.  If Drupal nodes or content don’t need styling, then just simply ignore the buttons.

On the other hand, some developers like the option of choosing what flavor of editor they prefer. For me though, that just adds to the hassle of installing modules that are essential in the first place and most users would prefer by default. What other features do you think are handled better by either Drupal or Wordpress?

It’s that time of the year when politicians start ramping up those television ads and candidates start declaring their intent to run for office. Yes folks, it’s election season here in the Philippines and the web has become another battleground and platform which politicians can utilize.

As we saw in last year’s US Elections, the web was a way that candidates could connect with voters (albeit, they had someone handling their internet presence) and was a platform for them to disseminate information. Judging by the highly successful Obama campaign and website, it seems that candidates can no longer ignore the web as a emerging information platform.

I personally enjoyed Obama’s campaign websites. It was very well designed, layed out, and provided a ton of information so I decided to find out what our own local politicians websites looked like. I found a list of websites for presidentiables here and started viewing them one by one.

Scanning the list of websites, I found only two whose design stood out, which is quite sad given the number of presidentiables we have in this country. If I recall correctly, McCain’s website wasn’t badly designed, its just that Obama’s hit a home run.

Senator Noynoy Aquino’s website is probably the best in the bunch. It’s clean, has a good color pallete (obviously yellowish), and uncluttered. It does have it’s problems though. The font is not tight and needs some work in which some pages have font sizes that look awkward. Also, he loses points for not having a favicon and having more than half his main navigation with broken links. Seriously, fix the links.

National Defense Secretary Gilberto Teodoro’s website is the other one that stood out to me. I enjoy the use of good colors, a modern layout and an appealing header (no matter how cheesy and stereotypical you may think it is, i like it). Unfortunately, I do not enjoy anything else. Again, the use of awkward font-sizes and font-color destroy the website. If the website were the first 400 pixels, this would be considered beautifully designed and well thought out. I also honestly though the text in the Latest News section were Google ads.

In terms of the choice of technology and implementation of websites, I don’t know if we’re really have this sheer amount of backwards developers  or people aren’t just reading and continuing to update themselves with the latest technology. I found a website that uses full flash (OK, he’s a vice-presidentiable but loading time was ridiculously long and good luck with SEO), two websites using *gasp* frames (for a reason I do not know), and almost all of them running on custom built CMS’s. There’s nothing wrong with Custom built CMS’s except that I don’t see much in their websites that warranted having to reinvent the wheel, which most likely means making a worse wheel.

I did see some good stuff though. Senator Noynoy’s website cuts large pictures into smaller pieces for faster loading, a technique that mostly became irrelevant in the broadband age but at least it shows the developer knows his stuff. Erap’s website (for the sake of this article we will pretend he can run) is surprisingly running on Wordpress which for me is a very good choice.

At the very least, I applaud our candidates for leveraging social technologies. In almost all of the websites, I found links to social accounts of the presidentiables. So if they can’t design well, at least they fulfill the goal of giving us, the voters, the proper information.

If I may go back to Obama’s website for a second, there’s no denying the influence it has had on some of the developers and designers of our local candidate’s websites. One website follows the same layout and design elements (even the color, yes, I almost laughed) and another, refers to <candidate> everywhere, similar to, Obama everywhere, when referring to social networks. One of them uses a circle emblem on a line at the footer area similar to what Obama used to do with his branding, but that might be nit-picking on my part.

Maybe it’s because I’m comparing our local websites with that of Obama’s during his campaign that I feel our very own are kind of lacking. If that’s the case, I hope that at the very least all of us Filipinos can utilize these websites to learn more about the candidates for the upcoming elections and be as informed as we can. And maybe, just maybe, they could move some of that enormous amount of campaign money and send it towards some very good local graphic studios, agencies, designers and developers.

Which candidate’s website did you find well or badly designed?

As many of you know I use two well-known open source Content Management Systems (CMS) when developing websites, that is Wordpress and Drupal. These are two of the top guns when we talk about CMS’s. As with any job, there is always the best tool. Sometimes Drupal is the right choice, in other instances, it’s Wordpress. They both have a place in building awesome websites.

It’s like those stupid Mac vs PC vs Linux ads, all they do is confuse consumers with lies. No single operating system is the best. All of them have their uses and we should choose which one suits our needs best. With that being said, Wordpress and Drupal are two tools that are similar yet different at the same time and I’ll be exploring how each one does things differently in certain areas of web development.

Today I’ll be talking about how both differ in optimizing your pages, more specifically how each CMS can be used to compressing CSS and Javascript files along with serving cached versions of pages. With this series of articles on two of the most popular CMS’s out there, I hope that you’ll be able to choose which tool is best for you with a glimpse of how the two are different.

Wordpress

In Wordpress, there are many ways to serve pages quicker. For compressing Javascript and CSS files, I use a plugin called Script Compressor. Simply install this plugin and it compresses all your Javascript/CSS files into a single file that has been compressed with whitespaces removed. Apart from that, the plugin allows you to serve the files as g-zip when applicable.

Another nice feature of the plugin is that it allows you to serve the compressed files at the footer of the page which allows the page to load faster (or at least have the illusion of loading faster) because part of the page has been loaded before the heavier and slower downloading CSS and Javascript files get called.

In terms of caching, which means the content of pages is cached as to not hit the database for information with every visit, I found WP Super Cache to work pretty nicely. Just install and enable the plugin and it’ll handle the caching for you. Beware though, WP Super Cache’s admin panel is a mess and it may take you some time to fully understand all the options.

Drupal

Page optimization in Drupal is probably one of the easiest things to do. Why? Well, because it’s built into Drupal itself. All you have to do is go to the Admin panel and head to Site Configuration > Performance. From there you can cache and compress pages as well as optimize CSS and Javascript files. Once you’ve enabled the options, your pages will be optimized, just like that!

Obviously, Drupal’s inherit ability to optimize pages far exceeds the capabilities of Wordpress because you don’t have to keep installing these essential plugins over and over again. The only thing to note here is that Drupal does not yet allow you to load the optimized files at the footer of the page for a seemingly shorter load time. That to me is probably the best advantage that the Wordpress plugins have against Drupal’s built-in optimization tools.

Final Note

One thing to note though is that in my experience, compressing Javascript and CSS files along with page caching usually does the trick for optimizing page load times. Loading Javascript in the footer is not as important as the techniques previously mentioned but if you’re looking to shave off every excess millisecond, loading Javascript files in the footer could prove essential.

So there you have it, two tools that perform the same job but one is arguably better than the other, at least when page optimization is concerned. If you’ve ever used both, share your experiences with us and how you think one CMS bests another in a certain feature.

Yesterday, two of my friends and clients Dwight Co and Mye Chung opened their new Photography studio right here in Metro Manila. It’s called the Living Room Photography Studios and it’s located along P.Guevarra. If you are interested in finding a place to shoot, this is a fantastic place to do it and I’m sure you’ll love what they got.

Aside from being a photography studio, they offer photography lessons for all the hobbyists out there. With the dramatic decline in the price of photography gear over the last couple of years, this is an affordable way to finally get the most out of your camera and to hone those budding skills.

You can learn more about the Living Room Photography Studios at their website. If you want Dwight’s insights into the creation of the brand and the studio itself, he has an interesting article about it on his blog.

The website was designed by Dwight, who is an identity and graphic designer by profession, and developed by yours truly. It runs on Drupal with several modules running beside it’s core.

Some interesting modules used were the Nodequeue and Views slideshow for the homepage (they really need to work on preloading those images), Galleria + imagecache for the lookbook, and Webform + SMTP Authentication Support for the contact page. Path Redirect was also used as to keep the URL’s clean and adjustable depending on the initial content of the lookbook and photography lessons page.

Enough of the boring stuff. If you need directions getting there, you can find more details at their contact page or you can ask me and I’ll show you. When the time comes that I’ll need a studio to rent, this will definitely be the one I’ll choose. Oh ya, please help spread the word! :)

I haven’t been able to write anything since I last got back from the weekend because I helped a client launch their website for a new and exciting business I’m sure a lot of you will be interested in. Anyways, more on that tomorrow.

I’ve already talked about two things that make HTML powered E-mails essential to businesses and freelancers alike. Today, I’m going to discuss actually diving in and creating your very own HTML templates.

What you’ll need

• A basic knowledge of HTML and CSS
• Whatever you use to write HTML/CSS (IDE, text editor)
• Thunderbird (or any equivalent mail client that can send HTML e-mails)

1. Learn the rules

With anything I try to do for the first time, I always try to read up about the subject beforehand so I don’t go into it blind. One thing to note about HTML powered e-mails is that they’re not like websites. You can’t do everything you’re used to doing in websites.

I recommend just skimming through the free e-book from the guys at MailChimp. These guys are the professionals when it comes to e-mail marketing so it’s definitely worth the read. I simply skimmed through most of the parts but took careful note of the Designing and Coding section (pages 9 – 25) which details some gotcha’s to avoid.

Really though, most of the other pages you can safely ignore unless you’re new to this web thing. :)

2. Get a head start with templates

2-column template

Sure we could code up an e-mail template from scratch but where’s the fun in that. Lucky for us, MailChimp provides some free templates as a springboard to your own designs. You can get them here. (scroll a bit to the bottom)

They’ve generously provided us with 4 of the most common layouts for an HTML powered E-mail. Included in the package is a 1-column layout, two 2-column layouts, and a postcard layout. Although they’re geared towards newsletters, don’t let this stop you from creating templates for regular correspondence or even invoices and proposals.

3. Modify those templates to your heart’s content

Now that we have the templates, open the HTML files in your favorite IDE/text editor and change what you like. You can preview them in your browser to get a hint at what they’ll look like. Remember to take note of some of the gotcha’s mentioned in the book and don’t try to overdo things, it is just a template.

It’s all pretty elementary HTML and CSS so you shouldn’t have a problem editing these things.  Once you’re done modifying these babies, it’s time to test these things in the real world.

4. Testing away

Inserting HTML

Ok, now you want to get that HTML you coded up and copy it to the clipboard. You want to fire up Thunderbird and write a new message. In the body of the message, select Insert > HTML… and paste the HTML template you created and hit the Insert button.

You will see your template in the body of the text, nice and pretty as you designed it. If your template is like mine, I have something like “<insert message here>” written in the body of my template where the message should be so that I can type my message in Thunderbird.

Once you’re done inserting your HTML template and modifying the text, start sending it out to different e-mail accounts to see how they’ll appear. I tested my own templates on Yahoo! mail and Gmail so I could see how it looked on a web browser based e-mail client and also on different mail clients like Outlook. Usually everything will be fine except for some minor tweaks.

5. Plain is still in

One thing you must note with e-mail is that not everyone wants to receive HTML powered e-mails and you have no way of determining how the receiver will want to view your mail. In that case, you must always send a plain text version along with your HTML powered e-mail.

Luckily for Thunderbird users, when you send those HTML powered e-mails, a plain version is automatically created for you and sent along with the e-mail. Just to confirm this, you can send yourself an HTML powered e-mail and set Thunderbird to read e-mails as plain text. From there, you can see if your potential recipients will run into any trouble reading your mail in plain text.

5. Clipping convenience

Finally, once you have your HTML e-mail template, you can use any clipping application such as Evernote, to store that template so you can easily find it for copy-pasting later. Any other software that allows you to quickly put the template into your operating system’s clipboard so you can paste it in Thunderbird will work too.

An Example

I use my own HTML powered e-mail templates for sending initial messages to clients, proposals and quoting. They follow suit with the color schemes I use and design elements of my brand.

My HTML Quote Template

Take note that HTML powered e-mails have a variety of uses, even more than what I use them for, that include sending newsletters, promoting products and sending branded notifications.

If you’re serious about doing e-mail marketing campaigns for your business, I would recommend MailChimp to handle the nitty gritty as this tutorial won’t cut it, especially if you’re sending to a mass number of e-mails. By the way, I am no way affiliated with MailChimp, just so you know. :)

All right, have fun with those templates and show me some of your own templates if you get to making them yourselves. If you have a tip to writing HTML e-mail templates, kindly share it with us in the comments.

Spicy Web Designers interviewed me for their website. If you want to know how my beginnings as a web designer and developer happened and a lot more information, you can read the article here. Mysteriously, there are a lot of other Philippine-based designers featured there. Hmm, I’ll have to ask the owner about that one when I get the chance.

I’ll be out of town for the next 3 days so I won’t be online. Clients and friends, you can get in touch with me via text message. I may not have my phone at all times so might not answer calls. :)

We’ve all seen them and admired them, or for many, are annoyed by them. Yes, I’m talking about those HTML e-mails which look like a website has been torn and brought right into your inbox. For many of us we will recognize them as the newsletter we get from our favorite online shops or the nice looking alerts we get from our social sites. Unfortunately, sometimes they take the form of unsolicited mail we get offering us a new product we don’t need.

Albeit annoying, no one can deny that the impact of an HTML powered e-mail can bring to mail we do want to have. If your a  freelance worker or a small to enterprise business operation and have not considered sending out HTML powered e-mails for official business, I give you two important reasons why they should be considered.

1. Your Brand and Image

For most business and one-man shops, the brand and image your project is invaluable to your operation. Having a consistent image is one tip that you’ll here over and over again about your brand. Consistent branding and image through the use of graphics, colors and fonts helps boost your image of professionalism and says that your not just simply a fly-by-night, anything goes, chop-shop.

A typical Twitter HTML powered e-mail

Take the Twitter message alerts via HTML e-mails as an example. They use the same colors, fonts, graphics and layout scheme that you’ll find on a typical twitter website. This helps build recognition to their brand as well as looking professional. When I see the e-mail I instantly recognize it as coming from Twitter and design cues help me remember the type of branding and image Twitter stands for.

2. Readability

Whether or not the e-mails you send out are HTML powered or not, they should at the very least serve the purpose of communicating a certain message. That being the fact, HTML powered e-mails have the potential of making your messages more readable through the use of design cues and layout techniques. Take a look of two examples that I’m sure you’re familiar with:

Facebook notification in Plain Text

Twitter notification in HTML

Both notify you of important events in your social networks. The difference is that Facebook’s is simply a plain message while Twitter’s is HTML powered. With the Facebook e-mail, it’s hard to initially discover what’s important and what’s not. There’s a lot of links, a lot of text that’s all jumbled together in a plain environment.

With the Twitter HTML powered e-mail, we instantly recognize what the most important piece of text is within the e-mail through font-sizes and font-weights. We also are able to quickly recognize who sent the message via an image. Through the layout, we are able to determine what information we can safely ignore such as those undersized elements and those at the footer.

Final Note

I’m sure there are more reasons why HTML powered e-mails are important but these are two of the more important ones that made me decide to use them in my own freelance business. In my next post, I’ll discuss how to design and develop your own HTML powered e-mails and show you some of the ones I use for my freelance business.

What do you think about the importance of HTML powered e-mails for any type of business?

With my twitter account, I have one simple rule: If people follow me, unless they’re outright spammers, I follow back. I’ll let Tweetdeck filter the stream of information later. Admittedly, I don’t follow nor am I followed by that many people but managing your twitter list, even if its just in the hundreds like mines, can be a bit too tedious.

One day I wanted to find out who I was following yet who wasn’t following me so I could distinguish those who follow you then unfollow you once you’ve followed them and those that I initiated a follow because I valued the information in their tweets such as freelance boards and web trends that almost never follow back.

That was a lot of follow for one sentence.

Anyways, I searched online for a tool and found a website called Your Twitter Karma. It will tell you who you only follow, who you have a mutual relationship with, and who is only following you. Combined, they are dubbed your Twitter Karma. Additionally, the website allows you to bulk follow and unfollow to save time.

An interesting and neat tool for the next time you decide to cut the fat from your Twitter account or simply want to know some interesting statistics about your list. What are some other neat Twitter tools you use?