I’ve heard many designers say that a designer who knows how to code will always be more sought after than one who doesn’t. Numerous others believe the opposite, that specialisation in a certain area of design or development is a more effective way to go. So, is it better to be a designer/coder hybrid or a specialist in a certain area? Let’s look at this issue from a few different angles.

My personal story

I recently designed my own portfolio website and in doing so I really needed to have a think about my skill set and interests to define what job role I fit into best. I enjoy both design and coding and like the variety and flexibility gained in knowing a bit of both. So I decided to label myself as a designer/coder hybrid and received great feedback on my website. I liked being able to build my site in its entirety which also saved me the hassle of outsourcing the coding component. So in my case knowing a bit of code went a long way.

Jack of all trades, master of none

It’s hard to be great at everything, no matter how hard we try. We can either know a little about a lot or a lot about a little. If you’re a freelancer with your own clients then it definitely helps to be a bit of a hybrid. In my experience most clients will be looking for a logo design, business card design and a website. This requires skills in branding, graphic design, print design, web design, CSS, HTML and possibly a bit of PHP and JavaScript. If on the other hand you’re working in an agency with dedicated design and development teams then you’ll find that specialisation is the way to go.

Right brain, left brain, both brain?

Designers and coders are generally two very different types of people. Right brain designers are known to love colours, typography, layout and pretty pictures while left brain coders are more into logic, problem solving and making stuff work. So how could one person be both? Furthermore, how could one person be good at both? What do you think?

My two cents

I believe that it’s preferable for a web designer to have at least some front-end coding knowledge, especially in CSS and HTML. Mainly because I think that if you understand how websites work, then you’ll be better equipped to design them. I guess that in the end, it’s ultimately all about doing what you enjoy and what you’re good at, whether it be web design, PHP, CSS, Flash, UI design, branding, JavaScript or a combination of things.

I’m sure you all have your own opinions too and I’d love to hear them in the comments below. Please also let me know whether you are a designer, a coder or a bit of both. Thanks.

Here are some great WordPress plugins for bloggers:

All in One SEO Pack

Optimizes your WordPress blog for Search Engines (Search Engine Optimization). If you don’t know much about SEO then this plugin will help you set up some basic SEO for your site to help it get indexed more effectively.

Get this plugin »

Google XML Sitemaps

Having a proper sitemap will also improve your website’s SEO. This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Get this plugin »

Contact Form 7

Most of us would like to have a contact form on our contact page and this plugin is by far the most popular WordPress Contact Form plugin. It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Get this plugin »

TDO Mini Forms

Many people haven’t heard of this plugin before but it’s quite a good one. Have you noticed the community news feeds featured on certain websites? You can allow your visitors to post community news to your site using TDO Mini Forms. This plugin allows you to add highly customisable forms that work with your WordPress Theme to your website that allows non-registered users and/or subscribers (also configurable) to submit and edit posts and pages.

Get this plugin »

AddToAny: Share Button

A great little plugin to help your visitors promote your posts through social media sharing. This WordPress plugin helps people share, bookmark, and email your posts and pages using any service, such as Facebook, Twitter, Google Buzz, Digg, Delicious, and well over 100 more social bookmarking and sharing sites.

Get this plugin »

TweetMeme Button

Twitter is one of the best ways to promote your blog posts so you need to make sure that you have a “retweet” button on your page. The TweetMeme Retweet button is a very popular Retweet button used by some of the biggest websites in the world including Techcrunch.com, PerezHilton.com, Break.com, CNET.com, Wired, Time Magazine and hundreds of other massive brands, in total it is installed on over 100,000 websites around the globe.

Get this plugin »

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved allows you to easily post syntax-highlighted code to your site without loosing it’s formatting or making any manual changes. This is probably the best syntax highlighting plugin I have found as it looks nice, supports many programming languages and also allows users to copy code to their clipboard with a single click.

Get this plugin »

WP-PageNavi

This plugin allows you to add more advanced pagination to your WordPress blog. Basically instead of having the “previous posts” button at the bottom of your homepage, you can list a bunch of your pages with next and previous links.

Get this plugin »

WP Super Cache

If your website is experiencing a heavy load of visitors then this plugin will definitely come in handy. WP Super Cache basically generates static html files from your dynamic WordPress blog. After a html file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. It can sometimes cause certain other plugins to perform strangely when “Super Cache” is turned on so you might want to test it out first.

Get this plugin »

Don’t add too many plugins

Before you go adding every plugin under the sun to your WordPress website, just remember that each plugin requires files to be requested every time someone visits your website. So the more plugins you have, the more your website may get bogged down. Heavier websites generally won’t display very quickly when they are experiencing higher levels of visitors (You can analyse the speed at which your site loads using YSlow). So try to make sure you only use the plugins that you really need.

Which plugins have you found useful?

This is what your button will look like. Firstly you need to figure out where you would like to place your button on your web page. You then copy and paste the following code snippet into your HTML and be sure to replace the sample URL with your own web page URL.

<iframe src="http://www.facebook.com/plugins/like.php?href=http://sample.com
&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true" id="facebook-like">
</iframe>

If you have a WordPress blog then you could replace the sample URL with the following code which will get the current URL of your page.

<?php echo rawurlencode(get_permalink()); ?>

As an example let’s assume that your website is 800px wide and 400px high. Here is the HTML along with the CSS to center this website exactly in the middle of the page horizontally and vertically.

The HTML:

<div class="center">
Your website goes here.
</div>

The CSS:

.center {
width: 800px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -200px;
}

Basically you just need to make sure that the left margin is half of your website width and that the top margin is half of the website height. If you only want to center your website horizontally then simply remove the “top:50%” and “margin-top:-200px” from the CSS.

(Awesome meditation image by Emils Blums).

First of all you need to decide where you want your latest tweet to go on your website, then copy and paste the following HTML there.

<div id="twitter_update_list"></div>

Then simply copy and paste this JavaScript at the bottom of your website before the </body> tag.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/blah.json?callback=twitterCallback2&amp;count=1"></script>

Don’t forget to replace “blah” in the code with your own Twitter account name. You can also change the “count” to  display more of your tweets. Now all you need to do is style up your tweet with a bit of simple CSS and you’re done!

About the Form.Validator class:

The Mootools Form.Validator class evaluates an entire form against all the validators that are set up, firing events when inputs fail validation. There are many built in validators including: isEmpty, required, minLength, validate-numeric, validate-alpha, validate-email and validate-url to help you validate your form. You can also create your own validators if you need to. These validators can very easily be added as classes to your form inputs in your HTML and before you know it your form will have validation.

Setting up MooTools Form Validation

As an example let’s say that you have a contact form that you want to validate. Your contact form has three fields; name, email address and message. You want to make sure that the user enters something into each field before the form can be submitted and you also want to make sure that the email address they enter is valid. Here’s how to setup your contact form in a few simple steps.

Contact Form HTML:

Below is a simple contact form with three inputs (name, email and message) and a submit button. Since I want all these inputs to be “required” inputs, I just add the “required” class to the inputs. The email address also needs to be checked that it is a valid email address, to do this I similarly add a “validate-email” class to this input. There are lots of other validators you can use too.

<form method="post" action="sendform.php" id="contact-form">

	<label for="name" >Name:</label>
	<input type="text" name="name" id="name" class="required" />

	<label for="email">Email Address:</label>
	<input type="text" name="email" id="email" class="required validate-email" />

	<label for="email">Message:</label>
	<textarea name="message" id="message" class="required"></textarea>

	<input type="submit" name="submit" value="Submit" />

</form>

Include the Form.Validator class:

The Form.Validator class is actually not part of the standard MooTools Core. As well as the core you will need to download MooTools “More”. You don’t need to download all of it, you can save some space by using the More Builder and simply checking the check box for the Form.Validator option. Once you have downloaded your “More” file you need to include it in your website head as follows:

<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></script>

Usage:

The last thing to do is initialise your Form.Validator so that your form will get validated. This is done by adding the following JavaScript to your website where “contact-form” is the ID of your contact form. If you already have a domready function then simply add the Form.Validator initialisation to your existing domready function.

window.addEvent('domready',function() {
    var myFormValidator = new Form.Validator($('contact-form'));
});

That's it! Now just test out your form and you should see some error messages pop up.

Here is an example of the first implementation of a CSS Reset way back in the day. This reset basically stripped margins and padding from all elements on the page which became a problem as certain elements like form elements needed their margins and padding. So it’s probably a good idea to stay away from this global reset but it did pave the way for some great CSS Resets.

/* Global Reset */
* { margin:0; padding:0; }

The Meyer CSS Reset

These days, one of the most popular CSS Resets is the Meyer Reset created by Eric Meyer. The Meyer Reset acts as a starting point for the CSS styles of a website and can be tweaked depending on your website requirements. As you can see in the Meyer Reset CSS below, many elements are stripped of their default padding and margins. List items are even stripped of their styles to force you to give them an appropriate style.

If you are looking for a CSS Reset to tighten up your CSS you can use the Meyer Reset below. Simply copy and paste the CSS into the top of your style sheet and you’re ready to go! There are also many other CSS Resets out there which you can review and compare.

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Here is the compressed version of the Meyer Reset:

Here is the Meyer Reset in one line for those of you who like to keep your reset tucked away nicely at the top of your CSS file.

/* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

Simply add the following CSS to your style sheet and the dotted borders surrounding your links will be gone.

a:active {
    outline: none;
}

When you run YSlow on a web page it will analyze the page based on a set of rules (outlined below) then grade the web page based on these rules. Yslow also analyzes each component of the page and returns statistics as well as suggestions on how to improve each component of your site to achieve faster performance. As an example I ran YSlow on the Smashing Magazine website and discovered that they could improve their performance by simply combining background images into a CSS Sprite as well as combining their JavaScript files into one. This would reduce HTTP requests and hence improve website performance. You can see a screen shot from YSlow below.

Rules to speed up your website

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript and CSS
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make Ajax Cacheable
15. Flush the Buffer Early
16. Use GET for AJAX Requests
17. Post-load Components
18. Preload Components
19. Reduce the Number of DOM Elements
20. Split Components Across Domains
21. Minimize the Number of iframes
22. No 404s
23. Reduce Cookie Size
24. Use Cookie-free Domains for Components
25. Minimize DOM Access
26. Develop Smart Event Handlers
27. Choose
28. over @import
29. Avoid Filters
30. Optimize Images
31. Optimize CSS Sprites
32. Don’t Scale Images in HTML
33. Make favicon.ico Small and Cacheable
34. Keep Components under 25K
35. Pack Components into a Multipart Document
36. Avoid Empty Image src

The above rules are based on these best practices for speeding up your website.

Download YSlow

YSlow is integrated into Firebug (a must have for all web designers) so you will need to download and install the Firebug add-on first. Once that is installed you can download the YSlow add-on.

Eventually I’ll get around to optimizing the performance of this site (hopefully).

What is @font-face?

@font-face is basically a CSS rule that allows you to embed a font in your website so that viewers of your site will see that font even if it’s not installed on their computer. There is no JavaScript, Flash or images needed as this method basically uses a single font file that you upload onto your server.

Why use @font-face?

@font-face is a simple and elegant way to embed a font in your website and is in most cases superior to all other font embedding methods. It requires only the font you wish to use along with some CSS. Best of all @font-face is fully compatible with all major browsers. It’s search engine friendly and setting it up is quick and easy. No coding required. Sounds too good to be true doesn’t it?

How to use @font-face

You basically just need to buy/download the font you wish to use (you must have a license to use the font) and then add the following rule to your style sheet to reference your font. As an example let’s embed the Action Man font into our website.

@font-face {
 font-family: ActionMan;
 src: url(/font/ActionMan.ttf) format("truetype");
}

Now that your font is embedded in your website you can use it as you would any other font. Lets use our embedded font on our h1 tags like so.

h1 {font-family: ActionMan, Verdana, Helvetica, sans-serif;}

In order for your font to be cross browser compatible you will need a few different font file types for different browsers. Font Squirrel is a great resource that has made it very easy to use @font-face on your website by providing @font-face kits. These kits basically contain the original TrueType or OpenType fonts for Firefox, Opera, Safari and Chrome along with the EOT fonts for Internet Explorer. There are lots of great fonts to choose from, many of which are free for commercial use.

Issues with @font-face

Surprisingly, there are not really any issues with using @font-face to embed fonts in your website. But there are two things to be aware of. Firstly, your font will need to be downloaded by your website viewers which will usually cost you around 30KB of bandwidth for a typical font (which isn’t much at all). Secondly, as your font loads your website viewers may sometimes see the default font flash first for a second on the web page. Most people can live with that.

@font-face is quick to setup, simple to use, light weight, SEO friendly and browser compatible. The best method I have come across to embed a font in a website.