SicanStudios

Ignore Details Early On

Fri, 17 Feb 2012 11:36:00 +0200

I was re-reading “Getting Real” from 37Signals and stumbled across a very important section, in my opinion. Now that I think about it, it is also one of the reasons why I fired my first client (yes, I do that as well!). I share the section below, check it out:

—

Work from large to small

We’re crazy about details.

The space between objects
The perfect type leading
The perfect color
The perfect words
Four lines of code instead of seven
90% vs 89%
760px vs 750px
$39/month vs. $49/month

Success and satisfaction is in the details.

However, success isn’t the only thing you’ll find in the details. You’ll also find stagnation, disagreement, meetings, and delays. These things can kill morale and lower your chances of success.

How often have you found yourself stuck on a single design or code element for a whole day? How often have you realized that the progress you made today wasn’t real progress? This happens when you focus on details too early in the process. There’s plenty of time to be a perfectionist. Just do it later.

Don’t worry about the size of your headline font in week one. You don’t need to nail that perfect shade of green in week two. You don’t need to move that “submit” button three pixels to the right in week three. Just get the stuff on the page for now. Then use it. Make sure it works. Later on you can adjust and perfect it.

Details reveal themselves as you use what you’re building. You’ll see what needs more attention. You’ll feel what’s missing. You’ll know which potholes to pave over because you’ll keep hitting them. That’s when you need to pay attention, not sooner.

Twitter CSS Button

Fri, 17 Feb 2012 10:55:00 +0200

I browse Dribbble often and I’m amazed by the talent most of the folks on Dribbble have! I came across a shot yesterday (18/11/2011) by Matt Gentile of an awesome Twitter button he created.

Not only that; he also gives away the PSD for free. I downloaded it and liked it so much I decided to code his design just for fun, as a Saturday afternoon practice.

Icons? What Icons?

I’m not using icons anymore for my designs. They’re a pain to make, resize, optimise and adjust (CSS sprites). I’m using a new idea — for the web; Wedbings has been around for quite awhile now — which is incorporating all the modern icons in a vector html-compliant typeface. Sounds interesting? Check out extra info and download here.

The Button

The button was coded in HTML5 and CSS 3. Note that it has no images! The button adjusts for three states: normal, hover and active.

View the button →

It displays a slightly different version of the original design &mdash bird is looking to the right and has different feathers — but that’s not an issue. The problem I encountered was how to code the shadow inside of the bird (text). As developers know, CSS text-shadow property doesn’t have an inset modifier like box-shadow has. The solution I came up with was to stack text shadows on top of each other.

Inset text-shadow with CSS

The method of creating a pseudo-inset effect is simple. Have the bottom text-shadow without feather far above from the text. Stack the next text-shadow on top of it, lower, with some feathering and lighter colour. Finally, add another text-shadow even lower with feathering and an even lighter colour. The last text-shadow should match the colour of the text.

When tested on Chrome it looks somewhat bad. It’s a bit blurry. I am aware that there are other solutions on the Internet but none of them work on Firefox, yet. And I’m on Firefox, so… But if you’re interested here’s a cool way of doing it for Chrome/Safari, code developed by Simon.

Categories in Wordpress not appearing problem

Thu, 16 Feb 2012 18:07:27 +0200

During my switch to different servers last week, I’ve encountered a problem with Wordpress. The Categories were not displaying, along with the posts assigned to those categories — for example inside site.com/blog nothing would be displayed.

The Categories were not appearing in the admin panel as well. Even after deleting the categories and trying to add them again, it would say “A term with the name provided already exists with this parent”. Then I had the idea to check inside PHPMyAdmin and the categories were there; but still, on the website they wouldn’t display.

Solution

The solution came to me when I encountered a different error. Trying to upload something within Wordpress, I got the error “Missing a temporary folder”. Then it came to me: In the effort of making my Wordpress more secure, I changed the permissions of my tmp folder inside the root of my server.

For this problem to be fixed, you have to change your tmp folder’s permissions to 777. To do that, you need to be a sudo user or logged in as root. Type-in the following command:

sudo chmod 777 /tmp

That’s it! Test it out and let me know if it solved your problem!

Portfolio vs Blog: A Mexican standoff

Thu, 16 Feb 2012 18:06:40 +0200

Another blog post by yours truly — posted one day apart from the last. I feel like I’m Mozilla, implementing their short release cycle of Firefox (they’re at FF8 already) on my blog. Today I want to talk about this website for a bit. I’ve been having some thoughts lately, on whether I should focus on writing more often for this blog or adding new work to my portfolio.

The Blog

Having a blog is great. You get to share your thoughts, your opinions, your experiences and in my case teach people and solve their problems. The most visited pages of this website are the ones that belong to my blog. But writing often and maintaining it, sucks.

I’m guilty of doing this: Go on Google, search for my problem, find a blog that teaches the solution — usually within the top three Google results — read the solution and get out. No commenting on the post — unless something doesn’t work, no subscribing to it, nothing. Not to mention bumping into types of blog posts like the one you’re reading now. My head is screaming: “I don’t care!”.

Well this has become a problem for me. Although I’m getting near-the-top positions in search results for many keywords, I don’t appreciate it. Google traffic comes, reads my solution and GTFO. My website’s bounce rate reflects this behaviour at it’s at around 73%, which is high. There are a number of possible causes for this, one being my writing. Another could be the length of the blog post. Who has time in 2011/12 to spend eight minutes on a blog post?

“But Alex, you don’t have any kind of signup/subscribe form on your blog” I hear you say. I used to have.

I used to have not one, but two forms on the same page making it impossible to miss. And you know what the result was? Countless unverified e-mails and around 300-400 subscribers with an click rate of 15%. Apparently shoving signup forms in people’s faces and making them subscribe doesn’t work in the long term anymore. It’s much like website or magazine advertising nowadays. And FYI, advertising should only be used for reinforcing a brand — sticking in the person’s memory — not trying attract new loyal customers with it. Word of mouth is the only form of advertising that continues thriving. And there isn’t any word of mouth for this blog in the way it has evolved.

The Portfolio

The portfolio is the most important aspect of this website. It’s firmly embedded in the ideology of SicanStudios: the portfolio should speak in the name of the design company. The portfolio is the first thing a visitor sees — unless they’re coming from search engines — when visiting my site. That happens because it has its own dedicated big orange button on the homepage of this site. And it’s doing its job at attracting eyeballs perfectly.

I designed the browsing experience of my portfolio is such way, to favour the latest website/work. Not only that, but also to subtly make the visitor accord more time for each piece — more than he would for a thumbnail — and allow me, the designer, to explain the design choices and production.

In our era, when the web changes that fast, I know my portfolio is dated. And this saddens me, because my skills are better than what I show in that portfolio. And I acknowledge the fact that my skills are getting better with each new project.

The Mexican Standoff

Having a blog has the potential to go evergreen — blog posts written 2 years ago are still read nowadays — whereas browsing a portfolio work is only temporary. At most it will make an impact on the visitor and like my website design and development skills — maybe get a retweet. With the blog I help many people find solutions to their problems whereas with a portfolio I help no-one but myself, improving my skills whilst completing new work.

The potential clients and companies don’t care about your blog; have you ever gotten a client through your blog? I haven’t. All they care about is (I hope not “qualifications” in the design industry) your portfolio. Is it any good?

“Well… NO it’s not because I was writing tutorials and helping people on my blog” is not a valid answer.

So, which one is it: The Portfolio or the Blog? “Both” I hear you say? Should I remind you that a day has only 24 hours?

Conclusion

I tried to make this blog post short enough for you to finish — I know you don’t finish my blog posts, I check my stats. So, this is what’s bothering me the last couple of days. Care to share your opinion? I’d love your input on this subject matter. Post a comment here (preferred) or on Twitter. Cheers!

How to set cookies in JavaScript

Thu, 16 Feb 2012 18:05:25 +0200

Cookies are an important part of browsers. Without them, we couldn’t browse websites that require authentication, such as social networks since we’d be asked for our password at each new page. We couldn’t write an e-mail, or buy something. In general, our use would be fairly limited to browsing only passive websites. Therefore, cookies are an important part of a developer’s arsenal. In this tutorial we’ll focus only on a small part of cookies, setting and editing cookies using jQuery.

I’ll be using a cookie plugin created by Klaus Hartl. We do not need to edit anything in this file, just call it after jQuery. Download the script →

Step 1 - HTML first

Based on the example above, we create a div and inside it we have two messages. The one that will be displayed only one time, when the page is loaded and the one that will be displayed after the first one was shown. I used heading tags to separate them from one another:


This message is displayed only the first time you visit this page. Refresh to hide it!

This is shown only after the previous message was shown in  the last visit. Even when you refresh the page, the browser remembers  your option. In case JS is disabled, this message is more important and  should be displayed!

Step 2 - CSS

I always take into account JavaScript being disabled. It’s good practice and makes your website more accessible and user friendly. In case JavaScript is disabled, we don’t want to confuse our visitor and have both messages display at the same time. We need to hide the first message by default, in the CSS. We will display the message it in the JavaScript section:

h1 {display:none;}

Step 3 - Initialising

It’s best for page loading times, to add JavaScript at the bottom of the page, before the tag. First, we need to call jQuery.

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Next we call the cookie script. Make sure you add the correct URL pointing to the script.

Below it, we add an empty script and inside it, we start coding:

Step 4 - JavaScript

First, we will reverse what we did in our CSS file. Display the initial message (h1), and hide the second message (h3).

$(document).ready(function() { $('.message h1').css("display", "block"); $('.message h3').css("display", "none");

Next we add the cookie code. There are two parts to this: one that checks the cookie and the other that adds the cookie. First, we will check for the cookie (I explain why later). If the ID of the cookie is set to hide, then hide the first message and display the second:

var cookie_mesage = $.cookie('welcome'); if (cookie_mesage == 'hide') { $('.message h1').css("display", "none"); $('.message h3').css("display", "block"); };

Before we close the script tag, we have to add the cookie that will hide the first message. We add it at the end, because if we were to add it before the code that checks (see above) the cookie, it would hide the first message from the beginning. Adding it at the end ensures that the message will be hidden the next time the page is loaded.

$.cookie('welcome', 'hide'); });

The complete code for the first example:

Step 5 - Add cookie on click

In the second example of the demo page, you saw that the message was hidden and the other one was displayed, only after you clicked on the “X”. First we need to add an a href tag to our HTML. I added it inside the first message, so that when it’s hidden, the button will be hidden as well:

`This message is displayed only the first time you visit this page. Refresh to hide it! X`

Position the “X” to the top of the container using the relative/absolute trick in the CSS:

.message {position:relative} .message a {position:absolute;top:0;right:0;}

Inside the script tag, we add the code to do something once the a href is clicked:

$('.message a').click(function() { return false; });

Inside the function we will be using classes to identify when a user has clicked or not. First we check to see if we already have a class clicked assigned to the link. If yes, do nothing. If we don’t have a class, it means that the user hasn’t clicked on the link before. Fade out the first message and queue the second one, once it’s finished. Finally, add a cookie with the variable clicked.

var $this = $(this); if ($this.hasClass('clicked')) { } else { $(this).addClass('clicked'); $('.message h1').delay(200).fadeOut(1300) .queue(function(n) { $('.message h3').css("display", "block"); n(); }); $.cookie('welcome', 'clicked'); }

But wait, we are not done! We need to check if the cookie has the clicked variable attached to it:

var cookie_mesage_clicked = $.cookie('welcome'); if (cookie_mesage_clicked == 'clicked') { $('.message_click a').addClass('clicked'); $('.message_click h1').css("display", "none"); $('.message_click h3').css("display", "block"); };

The complete code for the second example:

Step 6 - Accessibility

If you disable JavaScript and you check the page, the first message will be completely hidden because we hid it in the CSS; that is good. But if you disable stylesheets both messages are visible, creating confusion. Why would you want stylesheets disabled? Well for one: screen-readers; used by blind people, they read only what’s in the HTML disregarding CSS. To fix this problem and make our website even more user friendly we have to add the first message in the script tag, so that it will be displayed only if the user has JavaScript enabled.

To do that, remove the first message from the HTML. Then we just append the message to the .message div inside jQuery. Note that this has to go before the JavaScript code in which you hide the initial message (h1).

$('.message').append('

`You can only hide this message, by pressing x at the top of this box X`

');

Conclusion

There are many uses of cookies. Showing a one-time only message is one. Or showing a message until you click to hide it is another popular use — now you know how to create your own Hellobar. The next step is authenticating users and saving sessions in the cookies.

Any questions or praises in the comments section below.

Create an auto width CSS button without floats

Thu, 16 Feb 2012 18:02:02 +0200

Recently, when coding a website for a client I stumbled across a problem. I wanted to create a button with some padding left and right that would resize itself according to the text that’s in it. So I couldn’t use a fixed width. Furthermore, I wanted to use it more than once and position it in different parts of the layout. So I couldn’t float the button. Continue reading to see the solution I came up with.

The problem

Create a button with 10px top/bottom and 15px left/right padding. It should automatically adjust its width and have the possibility to be placed wherever in the layout, following the alignment of its parent container. For example, if the container with the text is aligned on the right, the button should also be aligned on the right.

Using a width property will mean that I would have to create several classes (small, medium, large) representing buttons with different width. Then, decide which will be the large buttons and assign that particular class to them. Unnecessary extra work and coding. Using a float property (widely used method) means that I cannot position that button in the center to match the text above the button, for example.

HTML Code

First we need to add the HTML. We create a simple href link with a class button.

This is a button

CSS Code

The CSS code required to create the button is displayed below:

.button{ padding: 10px 15px; line-height: 50px; font-size: 20px; background-color: #971b00; }

Pretty simple right? That’s all you need to make this work. Experiment with the line-height property. That is used to separate the button from the other buttons or text, above/below it. Additional CSS3 code is recommended (not displayed in this tutorial) to sexify your button.

Second Solution

The first solution is good, but I ended up using this one for my client’s website. In this solution, the line-height property is not used to separate the button from the other buttons/text vertically but define the height of the button. Furthermore, the buttons are separated vertically using a margin property.

CSS Code

The code I used to create the buttons in the second method is below:

.button_second{ padding: 0 15px; display: inline-block; line-height: 45px; font-size: 20px; margin-bottom: 7px; background-color: #971b00; }

Conclusion

This is my version of a CSS button. I prefer the second method, but the first one works just as well. I tested the CSS button and it displays seamlessly on Firefox, Safari, Chrome and IE+7. What do you think? Any problems or suggestions you might have?

Display top message bar on click like Twitter

Thu, 16 Feb 2012 18:00:00 +0200

Say that you want to display a message bar on top when the user saves their preferences. Or when the user adds a product into the cart, provide them with feedback that it was added successfully. In this tutorial I will show you how to do that using jQuery. Furthermore, we will be passing variables from an HTML form to JavaScript, check them with PHP and display the appropriate message. Finally we will be adding some jQuery animations to the final message. Let’s dive in!

Displaying the message

If you go to Twitter and change the design of your profile, you have two options: save it or cancel. When you click “save”, the website reloads with a message on top sliding down saying “Your profile customization has been saved”. Inspired from this message, I decided to write a tutorial showing you how to do that.

For this example we will be passing the name from a name field and saving it into a hypothetical database — functionality not included in this tutorial. In order for the user to view the message, they must have JavaScript enabled. But, if the user doesn’t have JS enabled on their browser, the value of text field should still be saved into the database; the only difference is that the message won’t be displayed.

Things to check: we need to save the text field’s value only when the user clicks the button, not when they reload the page. Also we have to check that the user inserted a valid name. Both these checks will be done using PHP.

Note that in order to run PHP code (server-side language) you need to add your PHP file on a server and run it from there, or install a virtual server on your PC.

HTML Form

First we need to create the HTML Form. There isn’t an action to this form, but you should have one. The action=” “ value of the form can point to a PHP file for example, and it defines what the form does and where it sends the values. We add classes to the inputs so that we can separately style them in CSS.

JavaScript Code

Now, it’s time for the fun part. First we call jQuery JS and then add the “magic” script shown below:

In short, we create a function, add a div with a class topbar, add some text to it and prepend it to the body of the page. The entire message is hidden from the user. Next, we add some animation to the message to sexify it a bit. We slide down the message fast, remain in that position (delay) for 9 seconds and then slide the message back up and remove the function.

If you add the code and refresh the page, a message should be displayed every time you refresh the page. Now it’s a good time to add some CSS to the topbar class and improve the design of the message.

Additional functionality and errors

I said that we will be adding some PHP as well. First we need to call the script only when the user clicks the button. Before the JavaScript, we add some PHP code to check if the button was clicked:

If the submit button is set, do something. Inside the curly brackets, we add the JS script.

Next, I want to display the name from the text field inside the message to make it more personal. To do that, we just echo the value of the name field. To save the value into a database, is another story not covered in this tutorial (let me know if you would like it covered, in the comments).

So, the code up to now should look like this:

The final checks we will be making are: on click, ensure that the name field is not the same as the value (if it’s the same then the user didn’t input anything), that the string of the field is between 2 and 20 characters and that the field is not empty. The third part is actually handled by another script that also hides the text’s value on focus and displays it back if nothing is changed (named empty_field.js in the demo page).

So, to make the aforementioned changes the script needs to be altered. The PHP code that checks the name field is listed below. The code checks if the name equals Insert your Name OR if the length of the string is over 20 characters OR if the length of the string is under 3 characters then display an error message.

20) || (strlen($_POST['name']) < 3))) {echo 'Please try again! And this time, insert your real name!';}?>

So, here is the final, entire code:

Conclusion

I hope you found this tutorial useful. Feel free to play around with the code and change the design or place of the message to suit your needs. You can even create a Lightbox-like version of the message with an “OK” dialog box that darkens the screen, if the message is important. Furthermore, with some extra PHP coding you can also save the value(s) to a database or an external file if you want! Have any questions? Pop them in the comments section!

Hide and show a div

Thu, 16 Feb 2012 17:57:03 +0200

Hiding and showing a div in HTML is really simple to do. In this tutorial I will show you how to do that using only CSS. I will also show you another version of hiding and showing divs using jQuery. Furthermore, we will take the necessary precautions if Javascript is disabled. Let’s dive in!

Hide and show a div with CSS

The first method, involves using only CSS. We will use the CSS pseudo-class :hover. The idea is that we want to hide the div once the user has moved their mouse over it and display something else instead. This effect is commonly used when you have a subscribe button. It saves space, without compromising the necessary information for the user.

HTML Code

First we need to add the HTML. We create a div, .subscribe; inside it we add another div and a form, which is hidden at first. Once the user moves their mouse over the .subscribe div, the inside div is hidden and the form is displayed. The form was made to work with FeedBurner. You can replace the form with whatever you want. If you want the form to work for your account, replace “sicanstudios” from the …a/mailverify?uri=”xxxxx” and value=”xxxxx” with your FeedBurner URI.


 Subscribe to this website

CSS Code

Next we have to add some CSS. By default, the elements that will be hidden are: a)the form and b)the inside div (once the .subscribe div is hovered). To affect something with CSS you add “ > ” at the end of the class. For example: .this_class>affects_this. The one class you are changing must be a child of the parent class (in the previous example affects_this is the child of .this_class). The second CSS statement, tells the browser to show the form once the .subscribe div is hovered.

form, .subscribe:hover>div {display:none;} .subscribe:hover>form {display:block;}

That’s all you need to make this work. Now, it’s up to you; style it and make it look sexy with some cool CSS3 coding.

Hide and show a div with JavaScript

In this second example, we hide and show a div using a JavaScript library, called jQuery. This time, we won’t hide the div when it’s hovered but when it’s clicked. By default the divs will be hidden; once they are clicked, they become visible, displaying the text inside. Also, we want each div to be “independent“ from one another. Meaning, if I click on the first div to see its contents, the other divs should remain hidden.

HTML Code

To get this to work, we will add two divs, one inside the other. The outer div will always be displayed, along with a title wrapped inside an h3 heading. The inner div will be hidden by default and once the outer div is clicked, the inner div will be shown. Feel free to alter the code to your needs. For example you can hide the divs completely once they are clicked, or you can add a button to hide them.


 This is a third title...

 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam  blandit, eros id adipiscing congue, lorem ante sagittis elit, id  malesuada nibh est sed orci

CSS Code

In the CSS we will add two classes. One class, named .hidden, will hide the element and the other named .visible will display the element. Since we want to affect the div inside, we will be adding >divto the class. You can change it to whatever you want, for example >span. This will affect the span element inside the outer div.

.hidden>div {display:none;} .visible>div {display:block;}

JavaScript Code

Up until now, nothing happens. The divs are still visible and when you click on them, nothing happens. For a good reason; if the user has JavaScript disabled on their browser, they should still be able see and read the content of the divs. You should always use JavaScript as an enhancement and improve the browsing experience not degrade it.

Now, inside JavaScript we will hide the divs once the document has finished loading. This will be our default state. We hide the divs by adding a CSS class called hidden to the outer div called .text_container. This will trigger CSS to hide the inner div.

Once the user has clicked the div we will check to see if the div has a class hidden then we remove it and add the class visible which will show the inner div. If it doesn’t have the hidden class then it means that the inner div is visible; add a class hidden to the outer div to hide the inner div. Don’t forget to call jQuery before adding the following script:

Conclusion

See how simple it is to hide and show a div? As a farewell gift from me to you, I will share with you another JS code. Following the same pattern of this code you can manipulate CSS values from within JavaScript directly, without having the need to add a class.

You can alter many CSS values, for example the JS code below will hide the .text_container element and change the font colour to red.

$('.text_container').css("display", "none"); $('.text_container').css("color", "red");

Use the code wisely. If you have any questions, ask them in the comments section below.

How to speed up your website

Thu, 16 Feb 2012 17:54:00 +0200

Having a fast website is crucial nowadays. With the attention span of the Internet users decreasing constantly, you need to have a fast loading website. Go slow and you will lose any potential customer that visits your website. Google is penalising slow websites as well. I know, because I got “punished” almost a year ago; they stripped one page-rank from this website — punishment continuing to these days. This factor: website loading time, is a potential dealbreaker. So, let me show you some methods of speeding up your website.

Checking your speed

First, we need to establish the current loading time of the website. To do that, you need to download a plugin for your browser called YSlow. After you installed Firebug, YSlow and restarted the browser, you should have an icon in the bottom right corner of your browser. Click it and run it on your website. Now, there is a catch. The website’s loading time also depends on the client’s Internet speed. So, when I refer to checking your speed I mean writing down the size of your website.

Finished? Okay, let’s start reducing the loading time of your website. I’ll present the methods by each subject.

Javascript

Remove all unnecessary scripts and fancy effects that can be achieved using PHP. For example, displaying your Twitter feed. You may argue that with this way you load the server more. Yes, but it’s an insignificant amount and I prefer it rather that overloading the client’s machine. By removing scripts you also reduce the requests you make to the server to fetch that script. So there you have it; win-win situation. Another clever solution if your website is running with WordPress is to use IF statements to load certain scripts. For example, there is no point in loading that Fancybox script used to preview full size images if the user isn’t on a post page. The code for that:

';?>

Place your Javascript at the bottom of the page. The functionality of this is to allow the page and the style of it to load completely before loading the script with those fancy effects. The benefits are that your browser doesn’t hang mid-air waiting for that script to load and then continue loading the page.
Make your Javascript files external. Keep the HTML only for content. By doing that, the browser can cache the script file, whereas having it inside the HTML would be loaded every time the HTML file is requested. You get a faster website instantly!

Combine your Javascript files into one big file. The benefit is that you reduce the script requests to one. This can be tricky though. Conflicts between effects could appear. Start by creating a .js file and inserting in it, one effect at a time. Test your website to see if the effects work. If yes, continue adding the effects until you are done. If one of the effects doesn’t work, you could try to alternate places with another effect (place the one on top of the other). It goes without saying that libraries such as jQuery should be at the top, inside that massive JS file. Some tweaking to your Javascript code is required. Generally it’s good to add each effect inside its own function:

$(function() { . . });

Minify your Javascript code. Minification is the practice of removing unnecessary characters, such as spaces, from code to reduce its size. Go here to minify your CSS and here to minify your JS. It produces an “ugly”, crushed version of your code, which you will have a hard time editing. So, make sure you have the files backed up in their original state. If you are using WordPress you can install this plugin or this one.

Images

Images are a big timewaster. Use CSS3 to style your buttons and graphic elements. You can simulate any Photoshop effect with CSS3. Don’t forget that users on Internet Explorer cannot see CSS3 elements (IE 8 or earlier); in the custom CSS file for my IE hacks I also add the image versions of the design elements.

Use CSS image sprites. This means adding all the images that are used in your website inside one file. By doing so, you minimise HTTP requests. Then, you can position each design element, for example the logo, by using CSS code to move the sprite image around:

.logo{ background: url('./images/sprite.png') 50px 100px no-repeat;}

This technique should also be implemented when adding hovering effects on an element, a logo for example:

.logo{ background: url('./images/sprite.png') 50px 100px no-repeat;} .logo:hover{ background: url('./images/sprite.png') 50px -100px no-repeat;}

In Photoshop, save your images for the “Web and Devices” (Alt+Shift+Ctrl+S), not just selecting “save” or “save as”. This will result in a much smaller sized (in kB) image. Also, crop your image to allow space only for the necessary elements; don’t create a 500px by 500px image for a 100px square.

Smush your images. Smushing your images removes unnecessary bytes from the files. A popular free service is Smush.it. Also available as a Wordpress plugin. Apart from the content images, don’t forget to smush your favicons and image sprites.

Use fewer images with your content. I know; they attract attention and enhance the browsing experience. But they can also ruin it completely, by never allowing the website to finish loading. I get pissed at people who add images only for the sake of it; images without relevancy to the content. On the other hand, images can be used as a traffic source. Click to read how I managed to increase my traffic by 570% using images.

Do not resize images in HTML:

Don’t ever do that. Why? Because you’re forcing your users to download larger files than they need, making thus your website slower. Your images will look awful because browsers don’t do a very good job at resizing images and resizing in the browser requires more time to render the page and uses more of your viewer’s system resources and RAM.

HTML and CSS

Learn how to code properly. Do not use many selectors:

#header #menu .submenu ul li ul li.hidden{font-size:20px;}

The above code is the same as the below:

li.hidden{font-size:20px;}

Another way to reduce your CSS file size is to use smart coding. For example this is not smart:

#footer{margin:10px 20px 10px 20px;}

The same can be achieved with the following code:

#footer{margin:10px 20px;};

There are many ways to write good code; I won’t go into detail in this post; if you want, read more here.

Validate your HTML and CSS code. If your CSS code doesn’t validate because of the “-moz-opacity” or the “-moz-box-shadow” it’s OK. But often you simply forget a closing bracket; this can lead to page rendering issues later on. And don’t assume that because the website loads fine on your machine to load fine on a different one. Reduce those errors.

Other Savings

Compress your files with gzip. Learn how here. If you are using Wordpress, the plugins mentioned earlier in the minify section, should do that for you automatically.

Remove entity tags. By removing the ETag you disable the ability of the browser to validate the files, relying on your expires headers and cache control. Add the following code in your .htaccess file:

Header unset ETag FileETag None

Speaking of .htacces files, do you know how to remove extensions (.php, .html) from pages? If no, check out my tutorial How to remove .php, .html, .htm extensions with .htaccess.

Remove iFrames. The Facebook like button at the top of this page, above the title is costing me around 10KB in size, increasing the page’s loading time. Is it worth it? Why not just replace it with a simple text link? Speaking of which, did you click it yet? :p

If you are using WordPress, utilise the least amount of plugins. Installing many plugins, heavily overloads the database making it slower. Also, databases should be optimised at least once a month. A plugin for WordPress that does that (ironic isn’t it?) is this one.

Get a good hosting server. Especially if you get sudden spikes of traffic from Digg, StumbleUpon, etc. These spikes can crash your server. If you are getting lots of traffic regularly, consider dedicated servers on which only your website is hosted (more expensive). A good company is Linode which hosts a plethora of popular websites without problem.

Use a Content Delivery Network (CDN). A Content Delivery Network is a system of computers containing copies of data. In short, the user accesses a copy of your website near them, as opposed to all users accessing the same central server, creating bottlenecks near that server. Check out CloudFlare. Basic account is FREE!

Consider hosting your comments on external platforms like Disqus. In doing so, the server is doesn’t have to save, process and access your comments every time the page is loaded. Furthermore, spam comments are automatically checked by them; another plus. Engadget and many others use it, why not you?

Conclusion

Having a fast website is very important. Now you know how. I presented you with many methods of speeding up your website. Go ahead and use them on your website, today!
This list is on-going; meaning, I will add even more methods later.

But in the meantime, do you have any tips on how to speed up a website? Comment below!

Top 5 reasons why you shouldn't start creating websites

Thu, 16 Feb 2012 17:49:00 +0200

The Internet is expanding; that’s a no-brainer. And with it, the market and the business opportunities. More than ever, I see ads claiming to show how to make shitloads of money from working at home via the Internet. One way to do that is to work as a freelance website designer/developer. This post is intended to expose the risks of that and what I’ve learned from working in the field.

In this post, I assume you will be dealing with both the design and the development of the websites yourself, as I have.

Reason #1 – It takes time

It takes a long time to master the skills of HTML and CSS. Yes, you may learn them in a flash (they’re easy languages to learn) but it takes time to master them. Don’t forget that you also have to learn how to design a website, how to compose the elements on the page, what colours to use, what fonts to use, what backgrounds, and the list is endless. At the beginning it is very hard to get it right. With time, practice and experience, you train your eye to see these things which help you create “better” websites and faster too. Not to mention that you can skyrocket your hourly rate.

But, the constant improvement and growth of technology makes it even harder for you to keep up. The browsers constantly change, new ones also emerge. So, you are happy that you finished the website and you go to test your website on all these browsers; but you discover that in one browser (hint) your website isn’t displaying properly. On you go in search for hacks and solutions. Mobile phones are entering the game now, so you also have to learn how to optimise your website for mobile phones — small file sizes for fast loading times, stripped design, keep in mind the small screen and more… — HTML5 along with CSS3 are entering the arena. Go find out more about these.

More companies and individuals now want to update their content by themselves. They demand that you use a CMS (Content Management System) to develop their website on. On you go to learn PHP, MySQL, how to create a theme, what CMS to use, how to install it etc. Because of the trend, companies now want to be active on social media, so they request from you to create them a customised page for their Facebook Fan page on which visitors will land first. They read that this would help them convey their brand better and engage more with their visitors, increasing thus their fan base. On you go to learn FBML (Facebook Markup Language). Lastly they insist in displaying their Twitter updates on their website. On you go in search for ways to do that.

There’s a strong possibility that by the time you’ve learned and mastered all those skills, the trends would have changed. So, you are now left behind, watching helplessly how others who ride the “trend wave” get your clients.

How websites looked in 1999 (Photo from: PixelPunk)

There is a hidden pitfall, which goes by: “I don’t follow trends”. Well buddy, as far as I’m concerned, you can design your website like it’s 1999 but don’t expect to get any clients… Maybe your daddy will get them for you.

Reason #2 – The competition

I’m telling you up front; the competition is fierce! I often feel that the Internet is filled with website designers and developers! Wherever I turn my head —digitally of course— there is a dude or a dudette offering website design services. Now, whether they know how to design and develop a website is irrelevant. Yes, completely irrelevant. Because there are many clients, hell I believe the majority of them, who want a website created for the minimum amount of money. It doesn’t matter if it’s going to cost them more in the long run. They just don’t see the forest behind the tree. And to share with you a trade secret: avoid clients that say they don’t have the budget! They’re a pain to work with. I figured a way to repel those timewasters. In my contact form, I added a “what’s your budget” option if the message is work related. Problem solved!

And get this: there is always going to be someone who can do the job, faster, or cheaper or even better than you. This applies to any business. But in the website creation business, the amount of people who can do it faster and cheaper than you is infinitely larger!

Frankly, it is too crowded and we don’t need another one “joining us”! Don’t get me wrong, join the website development business, but don’t say I didn’t warn you and don’t expect to become a millionaire…

Reason #3 – There are no standards

There are certain standards and quality controls that you need to follow when creating a laptop for example. From the client side, there is also a standard of price versus quality. You know that if you want to buy a good laptop you are required to spend something in the range of $600 – $1000. If you want a “top” laptop you will go for an Apple MacBook or an Alienware and expect to pay somewhere in the range of $1200 – $7000. My point is that you can estimate your value for money. Furthermore, you can even consult with the plethora of websites that review laptops and choose the best laptop based on their tests, maximising your value for money and minimising risk.

This kind of standard, the price you need to pay for a quality product, is inexistent with websites. You can pay something from $0 (carbonmade.com, webs.com, freewebsites.com, wix.com) to $45 – $159 (PSD to HTML: xhtmlchop.com, psd2html.com) to $15000 (for a full e-commerce hand crafted, custom made with extra benefits). There is no price point limit! Apart from this being confusing to your clients, it is also confusing to you, the developer. You don’t know how much to charge; hell you aren’t even sure if you should charge by the hour or by the project!

To expand an aforementioned point: quality controls. There aren’t any in the websites’ world. You can create a website without a DOCTYPE as long as it renders, it’s OK; now, gimme the money! No matter how crappy the coding is if you deliver, the client won’t say no. That is until they realise that blind users can’t browse their website or that older versions of browsers don’t even render their website. Too late for that though; the bird has left the nest.

There is another possibility that the client could be well informed and demand from you to ensure that the website renders in other browsers, deals with long loading times, has a mobile version, has a SEO thought construction, improves conversion rates, and many more. This is what separates the professionals from the amateurs. Here is where true professionals can shine. The downside is that there aren’t many clients like that. But this type of client is a charm to work with. Yes, they may be demanding and limiting your creative spirit, but they know exactly what they want, making your life easier. And if you CAN deliver — or even, over-deliver — you have nothing to worry about!

Want to join this chaotic business? Be my guest! But again, don’t say I didn’t warn you!

Reason #4 – The Client

This one is tied in with the previous reason, the lack of standards. Because of a utopian perception of things, the client assumes that they can ask for the moon and the stars and be given to them. Moreover, they make that outrageous request and offer to repay you with an average car. As soon as you say that it’s impossible and that you need at least three average cars to fulfill their request, they threaten to go to someone else. Now it depends on you; if you are low on cash you will suck it up and finish the job, whereas if you are a kick-ass person &mdash a starving kick-ass person or not, it doesn’t matter &mdash you will show them the finger and move on. There is one asset you need to improve in this kind of business: dealing with clients. Sure, bad clients exist anywhere but if you join this business you will discover that there is no shortage of them here.

Reason #5 – It can get lonely

Being a one man army, jack of all trades can become tiresome at some point. Working infinite hours in front of a computer (developer, designer), dealing with money (accountant), dealing with problems (IT support), dealing with clients (secretary), etc. can exhaust you in no time. As you can see, you need to develop many qualities and have strong character. There won’t be anyone behind you (or “above” you) checking to see if you’ve done any work. Not to mention that your work/life balance will be disrupted. But if you are like me and realised that you can get more done by eliminating distractions such as coffee breaks, telephone interruptions, meetings, colleagues, then this profession might be worth another look.

That is in short, my experience with freelancing. If you’d like to “join us” and want to learn more on freelancing, where to get started, etc. ask me your questions in the comments section below.

Are you a freelancer? Do you intend to becoming one? Comment below!

Display different content depending on the category in WordPress

Thu, 16 Feb 2012 17:45:00 +0200

In this tutorial I’ll explain how to take your WordPress theme to a new level and detach it from the typical blog type template. Basically, we’ll be displaying different content depending on the category the post is in. By mastering this technique, the possibilities are trully endless.

Customising content

Using WordPress as a CMS is very “in” nowadays. I’ll be transferring all my websites to WordPress in the following months as it enables hassle free maintenance and makes updating easy. You can do so much customising within WordPress, such as adding custom fields, displaying different styles (CSS) for each category, picking random posts, displaying custom content to search engine visitors, and some wackier stuff such as displaying all untagged posts, displaying different content depending on day, customising the dashboard and many, many more!

In this tutorial we’ll focus on displaying different content for each category.

First Method

For this tutorial we’ll assume that we have two categories that we want to customise: contact and news and that you are using WordPress 2.9 or newer (if you aren’t, use the second method explained below).

First, go in your template folder (located inside wordpress_root/wp-content/themes/) and create two PHP files called:
category-contact.php and category-news.php

By default, the template hierarchy within WordPress will select the first file that matches the following list:

category-slug.php
category-ID.php
category.php
archive.php
index.php

So if you try to view the contact of news category now, it will show a blank page. That’s it basically! You can now, go inside each category’s PHP file and add whatever you want inside; the default template’s PHP will be bypassed.

What if you have a dozen or so categories, do you have to create a dozen of PHP files with the categories names? No!

You just add the default content that you want to be displayed on most categories within the archive.php page and create only PHP files for the categories you want to customise. Or, you can do it by using the second method explained below.

Second Method

The second method is to create two PHP files for the two categories we want to edit, place them inside the theme and name them:

category_contact.php
category_news.php

Next, create another PHP file and name it

category_other.php

This will be the alternative content to be displayed when the visitor selects neither the contact nor the news category.

Now, you go inside the archive.php page and delete everything that’s inside. Add the following code:

if (is_category('contact')) {include (TEMPLATEPATH . '/category_contact.php'); } elseif (is_category('news')) {include (TEMPLATEPATH . '/category_news.php'); } else {include (TEMPLATEPATH . '/category_other.php'); } ?>

So we’re basically saying, if the category selected is contact, display the category_contact.php. If the category selected is news, display the category_news.php. If none of the ifs are true, then display the category_other.php. Simple and very efficient!

Conclusion

The same principle can be applied to the posts template. Say that you have a post which you want to display differently, add a gallery at the end for example. You can apply the same idea from the second method (haven’t tried it with the first method).

I hope you understood the concept!

How to remove .php, .html, .htm extensions with .htaccess

Thu, 16 Feb 2012 17:44:00 +0200

I recently wanted to remove the extensions from my website, to make the URLs more user friendly and search engine friendly as well. I stumbled over how to remove the .php extension from a PHP page. What about .html? I wanted to remove those as well! In this tutorial I’ll show you how to do it easily editing the .htaccess file.

What is the .htaccess file

The .htaccess file is a simple ASCII file that you would create with a text editor like Notepad. It provides a way to make configuration changes on a per-directory basis.

Note that .htaccess is the file’s extension. It isn’t file.htaccess, it is simply .htaccess.

.htaccess files affect the directory they are placed in and all sub-directories. For example if there is one .htaccess file located in your root directory (yoursite.com), it would affect yoursite.com/content/, yoursite.com/content/images/ etc.

It is important to remember that this can be prevented &mdash if, for example, you did not want certain htaccess commands to affect a specific directory — by placing a new htaccess file within the directory you don’t want affected with the changes, and removing the specific command(s) from the new htaccess file that you do not want affecting this directory.

Features

With an .htaccess file you can:

Redirect the user to different page
Password protect a specific directory
Block users by IP (Check out my tutorial)
Preventing hot linking of your images
Rewrite URIs
Specify your own Error Documents

In this tutorial we’ll be focusing only on rewriting URIs.

Removing Extensions

To remove the .php extension from a PHP file for example yoursite.com/wallpaper.php to yoursite.com/wallpaper you have to add the following code inside the .htaccess file:

RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.php [NC,L]

If you want to remove the .html extension from a html file for example yoursite.com/wallpaper.html to yoursite.com/wallpaper you simply have to alter the code above to match the filename:

RewriteRule ^([^\.]+)$ $1.html [NC,L]

That’s it! You can now link pages without needing to add the extension of the page. For example:

wallpaper

Adding a trailing slash at the end

I received many requests asking how to add a trailing slash at the end. Ignore the first code and insert the following code. The first four lines deal with the removal of the extension and the following, with the addition of the trailing slash. Link to the HTML or PHP file as shown above. Don’t forget to change the code if you want it applied to an HTML file.

RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^/]+)/$ $1.php RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.php RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$ RewriteRule (.*)$ /$1/ [R=301,L]

Removing both extensions

Some people asked how you can remove the extension from both HTML and PHP files. I haven’t got a coding solution for that. But, you could just rename your HTML file from .html or .htm to .php and add the code for removing the .php extension

Conclusion

For those who are not so experienced with .htaccess files there is an online tool for creating .htaccess files. It is pretty good for novice users and very easy to use. Visit their website →.

Updates

Attention GoDaddy users: In order to remove the extensions you need to enable MultiViews. The code should look like this:

Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.php [NC,L]

How to customise the title tag in WordPress

Thu, 16 Feb 2012 17:41:51 +0200

In this tutorial I’ll demonstrate how using PHP, you can display different title tags depending on what page you’re viewing. So, you can display the tagline of the website on the homepage and on an individual post display only the post’s title. This is an example of how you can customise your Wordpress theme to suit your needs.

Customise the title tag

Say that you are on the home page and you want to display in the title tag the name of the website and the description. Now say that you want when you navigate away from the home page and move to the category page, to display in the title tag the category and the name of the website without the description. Or when you are inside a post page and you only want to display the name of the post with the name of the website. How do you do it?

Step 1

Go to your header.php file within your active template and locate the tags. There are three types of pages we need to keep in mind:

Post page
Category page
Simple page
Home page

Post Page

We first need to check if the page is a post page. If it’s true, then display the title of the post and the name of the blog (or whatever else you want to display). Below is the code you need to add inside the title tag (unfinished code):

»

This will display the title of the post wp_title(’ ‘); followed by a “»” and the name of the blog bloginfo(‘name’);

Category Page

If the page isn’t a post page, we need to check if the page is a category page. If it is, then display the category title and the name of the blog (or whatever else you want to display). Below is the code you need to add inside the title tag:

»

This will display the title of the category single_cat_title(); followed by a “»” and the name of the blog bloginfo(‘name’);

Simple Page

This is the kind of page which you can add yourself inside WordPress. You can have various pages, such as a “Contact” page, “Testimonials” page etc. If the page isn’t a post or a category then it could be a page. If it is, then display the page’s title and the name of the blog (or whatever else you want to display). Below is the code you need to add inside the title tag:

»

This will display the title of the page wp_title(’ ‘); followed by a “»” and the name of the blog bloginfo(‘name’);

Home page

If the page is none of the above, then it means that it is a different kind of page, probably the home page. If so, display the name of the blog and the description of it (or whatever else you want to display). Below is the code you need to add inside the title tag:

»

Conclusion

So the complete title tag should look like this:

<?php if ( is_single() ) { wp_title(' '); ?> » <?php bloginfo('name'); ?><?php } elseif (is_category() ) {single_cat_title(); ?> » <?php bloginfo('name');<br/> ?><?php } elseif (is_page() ) {wp_title(' '); ?> » <?php bloginfo('name'); ?><?php } else { ?><?php bloginfo('name'); ?> » <?php bloginfo('description'); ?><?php }?>

Of course, you could change the title tag to suit your needs; this is just a demonstration of what can be achieved. The important message to take away is that WordPress PHP snippets are very powerful and can be used in many ways.

Also, check out the Wordpress help sheet to see more PHP snippets and codes helping you customise a Wordpress theme easily!

The most important CSS trick you’ll ever need

Thu, 16 Feb 2012 17:39:46 +0200

Having experienced the awful taste of designing layouts with tables when I developed a myspace design for my band, I learned how hard it is to develop a customised myspace design. I would’ve been nowhere near to finishing the design in time if I hadn’t made use of this CSS “trick”. Which is not really a “trick”, it’s a clever use of a CSS property.

CSS Trick

I’ll jump right into the subject. The most important CSS “trick” you’ll ever need is:

border: solid 1px;

That’s it! All you need to add to an element is a border! Let’s see some applications for it.

Aligning elements

Say that you want to align two elements which are absolute positioned on the screen. How do you align them perfectly? This is especially important if you’re developing a grid based design (such as the 960) The elements must be aligned spot on. Of course, there are widgets and pre-made CSS templates to ensure that, but let’s do it by hand.

For example, we want to bring the top container text down aligned with the other container.

All you have to do is add a border to both of the elements and move the top container down to match the other container’s position. We move it down, by adding value to the top: property:

.text1{ position: absolute; top: XX; left: XX; }

Replacing text link with image

Let’s say that you want to replace the boring text link with a button. The button is an image and you want to make it clickable. You also want to remove the text from the link, since the button image already includes it. How do you do it?

First, we need to replace the HTML link with the image button. To do so, we add to the link a class link and add a background image to it. The background image is the button. We then hide the HTML text from inside the link with the property text-indent:-9999px. Finally, we add a some width and height to the link (preferably the same size as your button):

.link { width: 223px; height: 73px; display: block; text-indent: -9999px; background-image: url('../images/image_button.jpg'); background-repeat: no-repeat; margin: 50px 0 0 80px; }

Next, we just add a border and try to match the height and width with the button. Furthermore, we also need to change the position of the button with margin: CSS property:

.link { border: solid 1px;width: 223px; height: 73px; display: block; text-indent: -9999px; background-image: url('../images/image_button.jpg'); background-repeat: no-repeat; margin: 50px 0 0 80px; }

Conclusion

There are many applications for this “trick”, you just need to explore them. Hope you enjoyed the tutorial and the “trick” will be useful and you will make it part of your web development process!

Different content or CSS depending on iOS version

Thu, 16 Feb 2012 12:51:00 +0200

I’m currently caught in the process of developing my first web application. I’m optimising it to work and look great for the iPhone and the iPad. The testing of the app is done on my iPhone 3G running iOS 4.2 — the last supported iOS for this device. I don’t have an iPad so I thought of testing it using “online simulators”. Don’t bother…

Aside from resizing the browser size — operation you can do by yourself — and adding an iPhone/iPad-like address bar, they’re rubbish at rendering the page like a mobile browser. In order to test the app on other devices, I went to my local “App Store” where they have all the latest Apple devices running iOS 5. I was surprised to see that there were a number of differences in the way the page rendered compared to my iPhone 3G.

New addition to my browser checks?

How a website is displayed depends largely on the browser — Firefox, Chrome, Safari, Opera, IE8, IE9. Although the number of differences in the way a website is rendered is being reduced with every new version of a browser that comes out — for example IE8 vs IE9 — it’s far from insignificant. So, every once-in-a-while during the development stage I check the website in other browsers and fix the inconsistencies — if possible.

Now, I believe, I have to add iOS (iOS4 vs iOS5) to that check. I won’t go into all of the differences, but one of the biggest is that in iOS4 you could not have fixed elements on the page and a scrolling div — you had to use JavaScript alternatives, like iScroll, to mimic the effect. This is fixed with iOS5: just add the following code and mobile rendering of that div will be similar to a desktop browser:

-webkit-overflow-scrolling: touch;

Older versions of iOS

If you don’t care about older versions of iOS and you only want to support the latest version, that’s fine. But I think we’re not quite there yet. It’s a similar situation to the “IE6”. A couple of years ago, even though there were new versions of IE out there, we had to include hacks into our code to make the website look as good as possible on IE6. Slowly, as usage of that version dropped, we stopped supporting it nowadays.

Add content or change CSS values depending on iOS

Nonetheless, in order to check for what iOS use the code below. I have setup my HTML/CSS to cater for iOS4 and I make any changes for iOS5, using JavaScript. The code below will check if the user is using iOS5 and will change the CSS property bottom to a value of 0 for the footer of the page. Note that the value is in pixels. Moreover, it will append to the body of the page some text or HTML element.

var iOS5 = navigator.userAgent.match(/OS 5_/i) != null; if (iOS5) { $("footer").css('bottom','0'); $("body").append('

`This is for iOS5`

');
 }

Conclusion

That’s it basically! There are many uses for this script. One idea would be to only load certain scripts — for example iScroll — in order for the website to work great in older versions of iOS, if the user is on iOS4 or below. That will save some precious bandwidth for the user that views your website using iOS5. Other uses not related to iOS would be to cater for different browsers. For example in Firefox the web font looks great, but in Chrome it needs some extra letter-spacing. Use the code below:

var chrome = navigator.userAgent.match(/Chrome/i) != null; if (chrome) { $("body").css('letter-spacing','0.5'); }

Am I forgetting something? Yes, I am: Android OS. If only I could get my hands on an Android device and test my websites/apps on it. In the meantime I can only trust my coding skills and hope that the page looks at least “good”.

As for my web app — details coming soon… You should follow me on Twitter for updates.

5 easy ways to increase traffic to your website by 570%

Thu, 16 Feb 2012 01:43:53 +0200

In this tutorial I’m going to share with you my personal experience of how I managed to go from an average of 94 unique visitors per day to an average of 630 visitors per day and still growing. I divided the tutorial in 5 easy steps for you to follow.

Minimum Effort

Due to the lack of free time I had, and still have, I did the bare minimum to increase my website’s exposure. Such methods like advertising your website, guest posting, performing A/B testing and studies, building connections, link trading and many other didn’t apply to me. By applying the Pareto principle I managed to get the biggest results by doing the bare minimum. In this tutorial, I’ll explain exactly the actions that I did.

1. Start a blog

Nowadays, starting a blog is a great way to connect with your readers, increase your website’s visitors and get your name out in the blogosphere. That’s why many companies have started a blog and they regularly post on it. Furthermore, connecting the blog with some sort of social network (Twitter or Facebook) is another trending solution which is being used by many companies and individuals.

With time, search engines will index your blog’s content. As a result, more and more visitors will be visiting your website after searching on search engines topics that you’ve covered in your blog.

When you’ve finally decided that you want to start a blog, the next step is to decide your niche. This is very important as it will help you create a name for yourself and be seen as an expert in that niche.

For example Darren Rowse is known as a successful blogger blogging on Problogger.

Make sure that your blog is well designed, easy to use and navigate (add a search function), accessible (validate your website and fix those HTML errors) and that you post frequently on it. Schedule at least once per week to post on the blog and stick to that schedule.

And last, don’t start a blog just for the sake of it! People will notice! Write passionately and post great content!

2. Content is king, or is it?

Ensure that you deliver high quality original content on your blog. Make your content easy to understand and minimize grammatical or spelling errors. By writing high quality posts, other people will link to your article, resulting in your post and blog to be read by even more people.

Based on my experience, it usually creates a “snowball” effect which goes like this: influential people read your post and if they like it, they go and talk about it. Many people listen and now then they come to read the post resulting in them going and talking about the blog post to their audience and so on.

But still, there are tons of great blogs with awesome content but they don’t get the deserved attention and nobody reads them.

That’s because you have to make sure that your content has solid foundations where to sit on. Things like attractive web design, valid and accessible code, being active in social media, fast website loading times, good SEO (explained later on), big readership matters (created over time) and can help your content market itself easier.

Mack Collier writes great about this topic here.

3. SEO

If you don’t know what it is, read about it here. Although many disagree, for me this is one of the best methods I managed to increase my unique visitors.

How? By improving my search engine rankings.

So, how do you improve your search engine rankings?

Make sure you have relevant page titles on all your pages. First insert the most important keyword and then other details.

Example:

BEFORE: “MySite.com | Web Design Page” AFTER: “Web Design Page | MySite.com”

Ensure that you have included a meta description which is unique for each page. The description is picked up by search engines and is displayed when they present that page in the search results.

Add alt and title attributes to images.

Write your posts using headings (h1,h2,h3) and include keywords in them. It helps search engine spiders better understand the content of the post. Use headings in order of importance. H1 is for the title and the “theme” of your post, the H2 is for the secondary points and so on.

Last but not least, include a sitemap for your website. Sitemaps inform search engine crawlers that their pages are available for crawling.

4. Freebies!

Everyone loves free stuff! So, give it to them!

It can be anything: icons, wallpapers, games, software, subscriptions, entertainment, advice, demos and tryouts or even useful information. This is a very powerful way of attracting people. Many companies offer demos of their product to try out. After testing, you decide that like the product but in order to enable the full features, you have to purchase it. So you do. It’s that simple.

Many game companies proceed in the same way; they offer a demo of their game for you to try, experience the new features and then, after you are convinced of the high quality, you are determined to purchase their game.

Even on a blog, you come to read meaningful, quality posts and tutorials that solve your problems and if they do solve them, you come again or subscribe to the blog.

Where’s the blogger’s gain in this? Well apart from the personal satisfaction of having a voice and being heard, if you have an advertisement section you can also earn some income. Many bloggers have quit their job and became full time bloggers.

So, start giving something for free today! You’ll see the difference!

5. Post loads of images

Adding images is a great way to earn extra traffic! Remember to optimise your alt tag and title tag and don’t overfill them with irrelevant keywords. Search engines are clever; they match the keywords to the text associated with the image and discard the irrelevant images.

Conclusion

There are certainly a lot more ways to increase your website traffic, but for me, these are the ones that worked best! Here’s a list with some useful resources and more ways to increase traffic, in case you want to do some more reading:

Effective Techniques Increase Website Traffic
20 Easy Ways to Increase Website Traffic
3 Proven Free Methods to Increase Your Website Traffic
How to Go from 1 to 1,000,000 Users (or Readers)
101 Ways to Build Link Popularity
101 Web Marketing Ideas and Tips
8 Reasons Why Lists are Good for Getting Traffic to your Blog
3 Ways to Immediately Increase Search Engine Traffic
How to get traffic for your blog
The 7 Deadly Sins of Blogging
Link Building Blog
The 9 Free Things Every Site (or Lens!) Should Do
Is Commenting on Blogs a Smart Traffic Strategy?
Why You Can’t Make Money Blogging
How to Be Interesting
How to Increase Your Blog Subscription Rate by 254%

Moved to tumblr

Thu, 16 Feb 2012 00:03:00 +0200

Hi guys, to make a long story short, today I got hacked. Partly it was my fault. Nontheless, all my websites got wiped from the face of the Internet. Setting them back online was not easy, and I hadn’t enabled auto backup on my VPS so the last backup I did was in December.

Frustrated, whilst I was trying to bring the websites back online and they wouldn’t connect with the MySQL, I decided: “Enough!”. Kill the contract with the hosting company, keep the domain names and go for social media profiles.

But the sad thing, apart from my other websites not working, was my blog with all the tutorials was also gone, along with the Google juice and the 700 daily unique visitors.

So, I decided to create this blog on tumblr. From here on, expect new and old tutorials at this address!

My portfolio can be viewed over on Dribbble