Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 12 2013

06:30

Getting Started with the Sass Preprocessor

Preprocessors are a popular way of simplifying and writing more manageable CSS, as well as making use of frameworks to write better CSS. Let’s take a look at the basics and learn how to create a fully loaded CSS3 button with gradients, shadows and transitions while making use of the Sass preprocessor and Compass framework to do all the hard work for us.

Wait, Prepro-wha?!

I guess if you’re new to this, the sound of ‘CSS Preprocessor’ is confusing! But rest assured, it’s nothing big to worry about. A CSS Preprocessor takes your CSS written in a specific file, compiles it, and writes out your CSS into a separate file. It helps for writing your CSS in a developer-friendly way, but can also help simplify and manage your CSS better.

CSS3 button made with Sass and Compass

In this tutorial we will be making a very simple button with 3 states, full of awesome CSS3 features like gradients, box shadows and transitions, while relying on the preprocessor to do the hard work for us. There are a few preprocessor languages out there, but I highly recommend using Sass and the popular framework built from it, Compass. Sass can be used to structure our CSS, while we can use Compass to beef up our styles and provide fallbacks.

View the CSS3 Button Demo

What you need and how to get started

The first thing to do is get a program to help compile your code, and while you could install everything by command line, it’s easier to keep control of it using a compiling application. I highly recommend trying out CodeKit for this tutorial, so grab a trial copy and we can get started.

Make a folder for our project, complete with a index.html file ready to put some code in. Next, enter CodeKit, go to the File menu and select ‘New Compass Project’. You will then be presented with a dialog box asking where your project folder is located and where to compile to, and make sure it is set to the following.

Compass Configuration

What we’ve set up is where our Sass files are located, where they compile to, and how Compass will write out the CSS. Here, I’ve set it to the expanded view so I can see how my CSS looks, while setting it to compressed will minify the CSS. It’s up to you how you want to organise your project. Compass will then create the project, as well as the location of our CSS and Sass folders.

Compass Configuration Result

Getting started with the Sass code

In our HTML file, all we need is some very simple code, and a link to our CSS file in the CSS folder of our project.

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="container">

	<a class="button">Click Me!</a>

</div>
</body>
</html>

That’s all the HTML we need! Now, onto writing with Sass. Enter your preferred text editor, and make a new file, save it into the sass folder, and name it style.scss. We’re going to be writing everything out in SCSS, which Sass can also process, to keep things simple and SCSS isn’t as strict on the beginners. :-)

At the start of our file, we will write out a basic reset for the HTML, an import for Compass, and write out our colour variables for the button.

@import "compass";

//Simple Reset
body, div, a {
	margin: 0;
	padding: 0;
	border: 0;
}

a {text-decoration: none;}

a:focus {outline: 0;}

//Colour Variables
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;

//Hover colours
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;

//Main Styles
body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	

At the top of the file, we’re calling on Compass to be included into the file so we can make use of some mixins for later. We’ve also written a simple reset, and we’ve made use of one feature already: variables. This allows use to store values we will constantly use in our CSS, including colours, font values, and more! Here, I’m using it to store the colours used on the button to simplify writing them out but also for re-use throughout the stylesheet.

Styling the Button


.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;
}
	

Onto styling that button! We’ll start off by applying the base styles to the a tag with the class of button. Here I’ve set the base styles for the button, and notice how I am making use of the variables from earlier.

Now, onto the fun part! Remember the Compass import placed at the beginning of the Stylesheet? Here we make use of it, as Compass has a mass library of built-in mixins, which include CSS3 prefixes for browsers that still need prefix support.

.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;

	//Compass Mixins
	@include background(
		$button-colour
		linear-gradient(top, $button-start 20%, $button-stop)
	);
	@include border-radius(3px);
	@include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));
	@include transition(all 0.3s ease);
}
	

After the initial styling, we can include some mixins for the background colours, linear gradients, border radiuses and transitions. The best part is it will compile with only the necessary prefixes, and save us from writing them all! The class so far will compile into the following in the style.css file.

.button {
  width: 158px;
  height: 30px;
  margin: 120px auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: block;
  color: #fff;
  padding: 7px 0 0;
  border: 1px solid #163861;
  text-shadow: 0 -1px 0 #06304b;
  position: relative;
  background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
	

Writing Styles with Nested Elements

Another great feature of a Preprocessor like Sass is the ability to nest elements and appending classes with a parent element you’re styling. This is then compiled into the necessary CSS to make it work.

.button {
	...
	
	&:hover {
		@include background(
			$button-hover-colour
			linear-gradient(top, $button-hover-start 20%, $button-hover-stop)
		);
		@include box-shadow(inset 0 1px 1px rgba(#fff, 0.95));
	}
	
	&:active {
		@include background(
			linear-gradient(bottom, $button-start 20%, $button-stop)
		);
		text-shadow: 0 1px 0px $text-shadow;
		@include box-shadow(inset 0 2px 8px $focus-shadow);
	}
}
	

After the main button styles, we can nest the pseudo-class selectors for the element’s :hover and :active states, with the ampersand to tell Sass that it’s a nested class appended to the parent element. In the :hover state, we can add a little bit more emphasis to the gradient and inner shadow using Compass Mixins, while the :active state reverses the gradient and changes the box shadow to give the impression that the button is pushed in.

.button:hover {
  background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9));
  background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.button:active {
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: linear-gradient(bottom, #37a0dc 20%, #2068a6);
  text-shadow: 0 1px 0px #06304b;
  -webkit-box-shadow: inset 0 2px 8px #0b3c5f;
  -moz-box-shadow: inset 0 2px 8px #0b3c5f;
  box-shadow: inset 0 2px 8px #0b3c5f;
}
	

The above is what happens after the :active and :hover states are compiled by Sass; they are written as pseudo-class selectors to the parent element in valid CSS, as well as the desired CSS complete with fallbacks, completing our 3-state button.

CSS3 button made with Sass and Compass

View the final CSS3 Button Demo

The style.scss file and compiled Stylesheet

Full SCSS Stylesheet

This is all that is written in our whole style.scss file, as we have an organised file which is written simply, as well as carrying mixins and variables that do some of the work for us, which then compiles into the final style.css file Stylesheet.

Final CSS Stylesheet

Learning more about Preprocessors

Hopefully this hasn’t been too much of a headache, and has given you the ambition to write more in Sass and Compass, as well as try CSS Preprocessors. There are many great articles by CSS-Tricks, NetTuts, The Sass Way, and many more on the subject to help you on your way to write more efficient, simple and easier CSS.

April 08 2013

07:00
Sponsored post
soup-sponsored
04:52

March 25 2013

08:00

How To Create a WordPress Custom Page Template

Creating a WordPress theme to accommodate your website design concept becomes so much easier when you know about things like Custom Page Templates. WordPress operates using posts and pages, but every page doesn’t have to be cookie-cut from the same format. You can create unique layouts and content for specific pages to create visually interesting sites that are still editable via WordPress’ powerful publishing tools.

What is a custom page template?

WordPress custom page templates are theme files that provide an alternative to the default page.php file. These custom templates can contain whatever HTML and template tags you wish to build your desired layout or content, then the file can be attached to a specific page in order for WordPress to use this new template when serving that particular page of the site.

Common uses for custom page templates are to create unique page layouts for about pages, testimonials or services; an eye-catching portfolio with an array of clickable thumbnails; or a clever about or contact page with features embedded directly to the template in code. If you need to configure your page layout beyond what is available in the default page.php file, a custom page template is what you need.

How to create a custom page template

Creating a custom page template couldn’t be easier. Create a blank php document, then add the following code:

< ?php
/*
Template Name: About
*/
?>

Configure the template name to something recognisable, this is what will appear in a drop down menu within the WordPress admin screen. Saving the file with a name corresponding to your chosen template name makes sense, for example about.php.

In the remainder of the document add your HTML and WordPress template tags to construct your desired layout. This might utilise tags such as <?php get_header(); ?> to build the page using the existing header/sidebar/footer elements, or you might be building something completely unique using a complete WordPress loop. Don’t forget, you can also hard code features into your template file that are unique to this page, such as a contact form, YouTube video or a Google Maps iFrame.

Once you’ve created your custom page template and uploaded it to your theme directory, create your page using the WordPress editor. Any content you add using the WYSIWYG will appear wherever the <?php the_content(); ?> tag was placed within the template. This page will use the default page.php template unless your change the Template option under Attributes.

Select the Template menu and choose the template file with the name you supplied. Hit the publish button and see your WordPress content dynamically generated using the structure of your custom page template.

April 21 2012

13:00

1WD’s Super Collection of Web Design Posts

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Nearly three and a half years ago in 2008 an idea was born. An idea based on love and passion about design. Couple of mockups, sleepless nights and cups of coffee and a blog was about to come to light. Little by little with hard work and ambition the blog grew bigger and bigger and attracted more and more designers from all over the world. Yes, that’s the story of 1stwebdesigner. Now being the third largest design blog and attracting over 3 million monthly visitors we can truly be proud of the success we gained.

A couple weeks ago we reached our thousandth post. One thousand, really? Can you imagine a pile of a thousand books, a thousand ideas running through your mind for a thousand nights? We’ve managed to achieve that amount of articles in three years. Ideas come and go, trends and technology change, but there are still some articles that have been, and will, stick around. With this post we’d like to start a new series of articles – 1stwebdesigner’s unique pages. We will gather the very best content from 1stwebdesigner reaching as far as the beginning. The series will cover all the major and popular themes such as web design, tutorials, WordPress, jQuery, freelancing, inspiration and many more. We’ve gone through dozens of pages, reviewed your comments and choices so these series are basically chosen by you, our dear reader.

For the first article of the series we’ve chosen an important topic. The beginning web designer’s guide to a successful career. This blog has helped many designers with insightful articles, useful tips and brilliant tutorials. Thus, we decided to compile the best of the best. This article contains all the basics you need to know about web design and also some basic development stuff since knowing that will just make your work a lot easier. The article is divided into sections so you can start from the very beginning and gradually move up. Good luck with the learning and stay tuned for more articles.

Basics

I will have to sadden you if you thought that you’d open Photoshop and start creating stunning websites from the get go. Before diving into the intricate and advanced aspects of web design you need to learn the fundamentals of it. Starting with history and moving up to some basic tips. If you’re absolutely new to web design this is where you should start. This section contains some of our best beginner and explanatory articles on fundamentals and basics of web design. Study the history, get to know the modern trends and learn from examples.

1. 11 Essential Tips Every Designer Should Be Aware Of

Essential-tips-beginner-intermediate-guide

Almost every profession requires never-ending learning and self educating, but especially it’s important in design field – new software, websites, tools come out every day, it’s your task to keep up, evolve your view and find the best ways to do specific tasks. This article contains some essential things every growing designer and not only should keep in mind.

2. 20 Reasons Why Your Website Design Sucks Part 1

Design-sucks-beginner-intermediate-guide

No matter how good or bad personal style is, the truth is that everyone has one. However, when design conventions are left out of a project, the result will be a bad or uninteresting design. That is exactly what happens with those terrible clients, when they try to implement their personal style without knowing anything about design conventions. This post will cover 10 common beginner pitfalls in web design and how to avoid them.

3. 10 Basic Visual Web Design Mistakes

Visual-mistakes-beginner-intermediate-guide

No doubt, all of you has so many experiences of seeing so many web design when surfing in internet. It often happens that you see more bad web design layout than a good one. This article covers 10 basic visual web design mistakes and tips to avoid them.

4. Ancient Website Design Practices That Beginners Should Avoid Part 1

Ancient-practises-beginner-intermediate-guide

This article is intended for beginners in the field of web design and development. It talks about old design practices that have died off several years ago, but up to now some are still being used. The goal is to discuss why these practices are bad and to instill in the minds of budding designers and developers that doing the right thing even if it’s hard to do and hard to learn will greatly pay off in the future.

5. Ancient Web Design Practices that Beginners Should Avoid Part 2

Ancient-practises-2-beginner-intermediate-guide

Part one mostly talked about the errors designers and developers make, here in part two you will also have the chance to read about the problem with what “webmasters” or website owners do to sully their names. Also be sure to read the comments because, very often, the gems are hidden there.

6. Things Web Designers Do That People Love

People-love-beginner-intermediate-guide

Web designers and web developers often wonder what kind of things they should do so that their audience will love them. This article will talk about those little things that create a big impact on people throughout the internet.

7. Web Design History: From The Beginning

History-beginner-intermediate-guide

The history of the internet is short, but so much has changed within that time. It has radically changed how we live our lives. More importantly, the internet has created thousands of jobs that did not exist a decade ago. These include jobs in SEO marketing, online telemarketing, freelance writing, blogging and of course, in web design. In this article you’ll find out how everything evolved and turned out the way it is now.

8. The Elements of Design in Modern Web Design

Elements-modern-web-beginner-intermediate-guide

The elements of design are pivotal in creating an eye-catching, harmonious design that speaks to your audience and shouldn’t be overlooked. They are the fundamental elements of design which can be called upon when you reach a tough part of the design process. Becoming familiar with these elements means you have the knowledge to make sound decisions in regards putting a design together.

9. Future of Web Design – Facts and Thoughts

Future-beginner-intermediate-guide

Web design has changed tremendously in the last few years and it’s still changing. More than changing, web design is evolving and evolution is bounded with complexity. Although the industry is not in danger some web designers are. Sounds contradictory right? Not really. The truth is that the web design industry is healthy and growing, new jobs are being added, more clients are emerging and consequently more agencies and companies related to the business.

10. 20 Reasons Why Your Website Design Sucks Part 2

Design-sucks-2-beginner-intermediate-guide

Like the previous article, this one’s focusing on another 10 mistakes that can transform your website design into an unpleasant place to be. However, this time you won’t see extremely bad layouts that make you laugh, instead you’re going next level and will focus on bigger mistakes that good designers make.

Design tutorials

Photoshop still is designer’s tool of the trade number one. You have given it a try but aren’t quite sure about the results and some commands still confuse you? In this section you’ll find some of our most successful and instructive tutorials that will teach you how to be a solid web designer.

1. 1st Photoshop Web Design Professional Layout Tutorial

Web-layout-beginner-intermediate-guide

This tutorial will guide you through the process of creating a beautiful, clean and professional business type web design.

2. Learn How To Create A Clean Layout In Photoshop [Very Detailed]

Clean-layout-beginner-intermediate-guide

In this Photoshop tutorial you’ll learn how to create a clean looking website layout, you’ll also be using 960s grid system to keep everything aligned. This is very detailed tutorial, so if you have basic knowledge about Photoshop you should be able to easily keep up and let the tutorial guide you through this layout creation process.

3. GD Auto Service: Learn How to Create an Awesome Landing Page in Photoshop

Auto-service-beginner-intermediate-guide

In this tutorial tutorial you are going to create an awesome landing page for GD Auto Service as an example. The template will have a cool logo, search bar, navigation, slider gallery, login panel, blog, services, testimonials and footer.

4. Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop

Burnstudio-beginner-intermediate-guide

Have you ever had a hard time designing your own personal website? Thinking of what elements, shapes, font styles will suit your design? This tutorial wil guide you in creating a stylish personal website. You will be using mostly shapes, layer styles, and fonts to create a new personal website.

5. 9 Etiquettes And Tips of a Photoshop Rockstar Designer

Etiquettes-rockstar-beginner-intermediate-guide

With the abundance of online resources, tutorials, blogs and articles which keep on excavating the trade of photoshoping, anybody with passion and readiness to work hard can become a pro over time. But what does it take to transition from just a pro, to ‘the best’? Why are there some designers who are always the best? Check out this article to find what it takes to be a rockstar designer.

6. 1st Ideas: Create a Stylish Design Agency Website [Very Detailed]

Design-agency-beginner-intermediate-guide

In this tutorial you’re going to be showed how to create a stylish agency website. This tutorial will be quite long, yet don’t be afraid. The techniques and tricks learned will be invaluable. You will be using tools gradients mostly, combination of light and dark colors.

Development tutorials

The title says this is web designer’s guide however as already mentioned in the introduction if you want to be a rockstar web designer you do have to know some basics of this. Knowing how to slice your design into a functional HTML/CSS will just make your work a lot easier. This section is just right for those who already are a bit familiar with the designing process yet are willing to bring their designs to the life. you. Below you’ll find some of our best basic coding tutorials to get you going.

1. How to Create a Minimalist and Typographic Blog Layout From Scratch

Typographic-blog-beginner-intermediate-guide

Typography is probably one the most important and powerful design element ever, so in this you will learn how to create this minimalist theme scratch including XHTML, CSS and WordPress.

2. 9 Inspirational Website Effects Deconstructed

Effects-deconstructed-beginner-intermediate-guide

As you may know, there are lots of great tutorials out there which can definitely help you practice, learn and achieve amazing results. The good thing about having so many tutorials to learn from is precisely that – you have a large variety of sources to choose from. Sometimes though, the tutorials aren’t clear, or difficult to understand or you just can’t apply it in the real world. The purpose of this article is to provide you with resources and insights about how you can learn from your favourite websites, learning and taking advantage from real implemented effects and functionalities.

3. 17 CSS/HTML Effects with Cross-Browsing Alternatives

Css-html-effects-beginner-intermediate-guide

We surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser. You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right? Thus, the point here is to collect some cool CSS effects that you should be using.

4. How to Create an Awesome Blurry Menu Using CSS

Blurry-menu-beginner-intermediate-guide

Today you will get a perfect and simple blurry menu effect via CSS. In addition to it, you will get a useful multiple borders effect. To achieve this effect you will need to have a basic understanding of HTML and CSS. You will work with IE filters and text-shadow, but there is no reason to worry if you have never used it, they’re all well and simply explained.

5. Convert Burnstudio from PSD to HTML [Very Detailed]

Convert-psd-html-beginner-intermediate-guide

In this article you will learn how to convert Burnstudio Personal Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout.

Inspiration

Inspiration is an inalienable part of every type of art. Web design is not an exception. While working you’ll often find yourself in situations where you’ll want to look how others have resolved this or that problem. Having a lot of inspiration sources will lighten your creative work and help to find your own uniqe style. In this section you’ll find some neat and inspirational articles to keep your creative flame buning. Also be sure to check out our Inspiration section out to find some fantastic things.

1. Web Galleries as a Source of Inspiration for Designers

Web-galleries-beginner-intermediate-guide

There are a number of web galleries that feature inspirational web designs. These web galleries serve a purpose, and that is to update people on new trends and showcase sites that are pushing the boundaries. It is important, as a designer, that you know what the latest trends are and see how other people are pushing the boundaries. In this article, you will find some of the best web galleries that you can reference for inspiration.

2. Inspiring Videos For Designers & Developers

Inspiring-videos-beginner-intermediate-guide

Whether you’re a motion designer, front-end developer or economy student – you have to keep up with the times and constantly increase your knowledge and broaden your professional viewpoint. One of the best ways to do that is by watching videos from professionals and experts in your field. Videos don’t have to be strictly instructive. A good and gripping video can inspire you for the rest of the day. In this article you’ll find a compilation of 40 awesome, inspiring and valuable videos varying from entrepreneurship to web design and self-motivation which will help you to develop new skills, gain a bunch of inspiration and simply look at things from a different perspective.

3. 30 Sources To Get Your Web Design Inspiration

Sources-inspiration-beginner-intermediate-guide

If You are developing web designs, then you know there is times when you struggle without any ideas. That’s the time when these web sites becomes handy. This post contains a nice list with some of the most known web gallery sites showcasing and listing well design sites into different categories, letting you to promote and demote all designs.

4. Great Art Movements That Inspired Modern Web Designers

Art-movements-beginner-intermediate-guide

The first modern designers are, of course, inspired by traditional and classical art. We designers, as a whole, get our ideas of beauty and aesthetics from by viewing paintings, sculptures and artworks from the most powerful art movements in history. Here are among the top art movements in the 20th century that helped shape how we view art and beauty.

5. 33 Excellent “OUT OF THE BOX” Ways for Creatives to find Inspiration

Out-box-inspiration-beginner-intermediate-guide

Feeling uninspired? Running dry on inspiration is normal. We all get there at some point and none of us feel very comfortable being there. Every one gets tensed when having no inspiration. This article shares some great tips to get back to the creative corner. Some tips may seem funny but seriously give them a try and you will love them.

Resources

Resources and assets are on of the most important things in web design. Learning how to use premade resources and enhancing your workflow is a huge part of being a web designer. Sometimes finding these resources may be quite time-consuming but that’s where blogs like this come to aid. In this section you’ll find almost every resource you’ll need when starting off.

1. 45 Online Generators For Designers And Developers To Do The Job Faster!

Online-generators-beginner-intermediate-guide

Online generators can be extremely handy for creating small details or saving time writing code. Whether it’s a striped background, a pattern or an advanced CSS3 text effect, online generators can surely make your workflow go smoother. This post presents 45 of the best and latest online generators for designers and developers. The emphasis has been put on CSS3 generators since CSS3 is quickly becoming the new progressive web standard.

2. 50 Superb & Free PSD Files From Dribbble To Learn From The Best

Dribbble-psd-beginner-intermediate-guide

Either for self-promotion or simply for goodwill and to help others, the truth is that finding free resources and inspiration can be a really easy task. If you are an experienced designer, you know the best way to learn is by just looking and studying other people’s work. PSD files can be a powerful way to learn and fulfill your work expectations. This collection includes some fantastic UI kits, a lot of assets for web and graphic design, as well as a few cool icons. These PSDs are as perfect for learning as they are for your future projects.

3. 30+ Best Websites to Download Free PSD Files

Websites-psd-beginner-intermediate-guide

PSD files are very useful resources for learning purpose because you can see all the layers and also what techniques have been used to create the work. In this article you’ll find almost all possible websites to find free high-quality PSD files.

4. Photoshop WebDesigner Toolbox: All the Resources You’ll Ever Need

Photoshop-toolbox-beginner-intermediate-guide

If you’re using Photoshop daily it’s essential to have an asset library. Having a pre made toolbox or asset library can be extremely handy. While you could spend countless hours making your own resources, usually there’s no need to do that. Nowadays the web is full of pre made high-quality resources. This post contains various resources, sites and tools that can considerably boost your workflow, free up some time on your agenda and simply enhance your projects.

5. Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources

Design-elements-resources-beginner-intermediate-guide

Have you ever thought that every day, while you are busy doing your work, there are a lot of people doing almost the same thing as you? And they are releasing it. For free. And sometimes we just forget all this stuff and lose a lot of time doing things that just didn’t need to be done. Someone else has done it for us. Why should you start from scratch if you can get some cool things and just make them better? So, this is a post with a lot of links to resources and comments about them.

6. 18 Wireframing, Mockup And Prototyping Tools To Plan Designs

Wireframe-tools-beginner-intermediate-guide

Many beginners usually forget how important it is to plan your webdesign, sitemaps, draw flowcharts,wireframes before actually starting to design a functional and beautiful design. If paper and pen ain’t for you check out this article and find some useful tools for wireframing, mockuping and prototyping.

7. 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

Html5-css3-frameworks-beginner-intermediate-guide

Everyone of you has heard about HTML5 and CSS3. And you probably are cognizant with the features these two offer. However, you may be asking yourself – Is is time to change? Should I forget everything I know and dive into this new world? Well, actually you don’t have to. There a lot of tools that make that transition to new and better technologies safer and smoother. Frameworks are really helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point. This article will talk a little about frameworks and other tools, like generators and templates.

8. 10 Useful Tools For Cross-Browser Compatibility Check

Compatibility-check-beginner-intermediate-guide

Something that makes a website great  is when it is compatible in multiple browsers regardless of version. Technically this is referred to as cross-browser compatibility. This can be a struggle for developers throughout the creation of their websites. If a user cannot view your website properly, he will not blame the operating system or his browser, he will blame the website itself. In this article you will find ten useful tools that you can use for your cross-browser compatibility check.

Going Further

So you’re now cognizant with all the basic stuff and it’s time to go further. How to redesign a website, what’s UX and how, for instance, your typefaces will effect it? This section will take you into the next level and discuss things like responsive web, redesigning, preparing for a project etc.

1. Beauty vs. Function: On Redesigning

Beauty-function-beginner-intermediate-guide

The thought of producing the best possible design, either from scratch or redesigning something, gives jitters to the heart of many designers. Even professionals in the field can’t quite balance beauty and function. In this article you’ll find things to take into consideration when planning a redesign.

2. A Brief Introduction to Web 3.0

Web-3-beginner-intermediate-guide

For many, Web 2.0 is characterized mainly by the ability of users to share information quickly with others, which has been developed into the phenomenon that we call social media. From Twitter to Facebook to YouTube and to all sorts of other kinds of communities, Web 2.0 is all about sharing and seeing. Now if you recall or were around during what is now known as Web 1.0, information was put up on a website and that was it–the best way of sharing it was privately through e-mails and such. There was little to no communication and if you wanted information, you had to go to the source for it. Can you imagine such a harsh internet? Now with Web 2.0 on it’s way out, the obvious question is, what in the world is Web 3.0 going to be?

3. 15 Most Influential People in Web Design

Influental-people-beginner-intermediate-guide

The web design industry is continuously changing and there are many people who are setting the bar higher every day with their incredible work and contribution to the web design community. Here is a list of just a few of the people who are responsible for changing the meaning of web design with their awesome work and concepts.

4. Preparing For a Web Design Project

Preparing-project-beginner-intermediate-guide

There are several stages during the process of a web design project, and every stage is important to achieve a positive end result. In order to proceed to the research phase, you need to gather information and know what the project is about, which technology is required, the target audience, goals, content, etc. Every professional designer or developer work in different ways, however, this article’s goal is to give you good insights about how you can prepare and deal with some practical aspects of a web design project.

5. 4 Reasons Why Designers and Developers Should Learn to Write

Learn-write-beginner-intermediate-guide

If you are using the internet to gather and share information you really must learn this secret. What is the secret, you ask? The secret is that everyone should learn how to write in order to advance well. The days of people who focus only on one skill is numbered. Slowly, and steadily, a rise of designers, photographers, developers, and anyone who knows what a blog is are starting to write. This will be harsh for people whose desire is to focus only on their trade. People in the online community will soon eradicate specialists, the internet will be filled with Jack-of-all-trades and if you are not one you won’t get noticed. Learn why it’s good to master writing skills and how to do that.

6. Redesign Process: Taking Small Steps for a Better Website

Redesign-process-beginner-intermediate-guide

This is an experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.

7. A 5-Step Checklist for Mobile Website Designs

Mobile-checklist-beginner-intermediate-guide

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. This article will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website.

April 19 2012

13:00

Revised Google SEO Guide 2012 Edition: Big Changes in Algorithm

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Everybody is buzzing all around now, how latest changes Google did affected their search traffic greatly! Chances are if you monitor your own properties on Google Analytics, you will see significant drop in your traffic in March!

1WD was seriously affected as well from March 20! Besides Google Panda release, there were 2 rounds of changes Google did, hurting almost every site search traffic:

• Panda 3.3 - Search quality highlights: 40 changes for February
• Panda 3.4 on March 23 - Search quality highlights: 50 changes for March

So what exactly do these changes mean? Do you need to be worried and what can you do to be prepared and be more likable in Google’s eyes?

In this Google SEO guide I will show you the behind the scenes on how 1WD was affected, explain how to monitor your traffic better and how to be more prepared in the future. A lot of websites were hit hard, even high authority websites. We always have been focusing on high quality content here, never used spammy link building techniques and we believe our social presence is very strong as well.

So what the hell is happening here?

Google analytics data

Which sites were affected, which were not?

After asking around, I found out that mostly new websites ~1 year weren’t affected, but a lot of sites which had some very high-ranking keywords, felt a big decrease there.

It seems if you have average links, new website and haven’t done spammy SEO promotion, you are doing great. However if you have something to lose as old, stable top keyword rankings, you got hit.

I compared several top web design websites on Alexa and here are results for the last month March 15 to April 15:

  • 1WD – 6% drop (it was more like 15% drop in reality for me, which means everybody was hit much harder as Alexa shows)
  • SmashingMagazine – 6.5% drop
  • Sixrevisions – 2% drop
  • WebDesignerDepot – 5% drop
  • Css-Tricks – 4% raise
  • Designm.ag – 12% drop
  • TutPlus sites – 3.7% drop
  • SpeckyBoy – 4% drop
  • SpyreStudios – 7% drop
  • Hongkiat – 9% drop
  • UxBooth – 5% drop
  • WebDesignerWall – 3% drop

You can check Copyblogger with 15% drop  and Quicksprout 16% drop in other niches! Crazy right? And those are just Alexa’s inaccurate stats, if I compare with 1WD Analytics, then I believe all of these sites in reality got 10-20% drop in traffic!

All of these blogs are very popular and always focus on high quality articles. This really doesn’t make sense and it shows how we need to rethink what we are doing online, what we are writing and how we need to promote our websites.

The most visible and buzzed topics about Google changes were:

  • Big link networks taken down
  • Duplicate page content
  • Over Optimization
  • Too many ads above the fold
  • Social signal importance

What mistakes should you avoid doing? And how to fix them?

Its time to list down the most popular mistakes we all probably have done before, but should avoid now! Interesting that a lot of these mistakes aren’t new, but before all of those techniques were really working. Most mistakes are easily found because they do not look real and Google has raised his eyebrows to search everything unnatural.

1. Obsessing about exact-match anchor text

Everybody who has done link building anywhere has been working to target perfect term for their website. Wherever you could, you try to include your term, for example: web design blog.

You can include this term while:

  • Commenting on other blogs
  • Writing guest posts
  • Getting paid links, advertising
  • Writing your forum comment, Yahoo Answers, Quora, including term in signature
  • Using link building tools, blog networks

Previously this technique was really working even if there were people warning about over working, but there weren’t so many drawbacks. Until now.

Such obsessing do not look natural for Google and it’s easy to spot it!

How to fix this mistake?

Do your keyword research again and choose 5-10 terms you would like to rank for and mix them in wherever you can. Change your signatures to be different. Instead of working for one term, when guest posting for example, include related article you have on your blog, not your home address anchor text.

While working on your brand awareness be as helpful as possible, don’t just link back to your site, link to others, link to very specific posts if you have, which are related. The same is about comments – if your comment is valuable and you have high quality article written about the same issue, include it, but don’t obsess about always mentioning your brand!

Good practice is also to check how others relate to your brand! Usually if they will want to share your website to others, they won’t tell – check out this web design blog. Instead they will tell to check out 1stWebDesigner (it helps to have related keywords in your domain, of course as we have – web designer).

2. Ads Above The Fold

Google has announced that pages with too many ads above the fold are now penalized by Google’s page layout algorithm. Strangely Google itself is not following their praised best practices.

Ads above fold google

These news completely make sense in order to ensure the best reading experience, however it’s hard for blogs who want to earn some income to remove those top ads, without loosing money.

We are doing bad work on 1WD ourselves, but we are working on removing those ads slowly and once our own Labzip product will be ready, we plan on having just one banner ad on sidebar for better experience.

How to fix this problem?

Easy answer – just remove those ads! Every blog owner knows it’s not so easy to do that, as it removes any income! What you can do instead is to move some of those ads below the first page, put them on the middle or bottom of sidebar or at the end of the blog post.

Great solution is responsive websites, where on smaller screens you remove those ads completely or leave just few of them. On Codrops website, you will see ads following to the bottom of page in that way cleaning up above the fold section (scale that site resolution down, to see effect in real life).

Very good example is SmashingMagazine website:

This is the screenshot from website on 1000px width:

Smashingmag ads

This is the screenshot with 1024×768 resolution:

Smashingmag 1024 resolution ads

As you can see on the first image, you can see just 2 ads, while in second one there are 8 ads above the fold. Even then though SmashingMag also saw decrease in search traffic. My guess would be that too many people on 1024×768 still see those ads, but the trending is right. A lot more people are using tablet devices and mobile phones to browse internet and they will see little ads there.

The same is true about big resolutions, I have Macbook Pro with 1680×1050 resolution, and while browsing SmashingMag on full screen those sidebar ads do not seem to be hurting readability.

Suggestion – create a responsive website and remove as many ads as possible on smaller screen sizes. In dream world, people with 1024×768 and less shouldn’t need to see sidebar ads.

Summary: going responsive and removing some of the top ads and a lot of links from top could definitely help improve readers experience and also will make Google like you more. Removing clutter from top navigation is top recommended while planning your design.

3. Duplicate page content

This is a very popular technique used by spammers, who just copy other site content and publish it as unique. Don’t do that. Ok, I bet if you are reading this blog you aren’t doing it anyway, but also check your site for bad code, which makes your site content to be duplicated. For example I checked my SeoMoz pro and saw I have a lot of page duplicates, where on WordPress writers use images, but don’t remove default link from them. For my layout it created one more page with that image, which was taken as duplicated content for Google.

Be sure you don’t make such silly mistakes, which can hurt your rankings and make experience for your visitors worse.

If you want to read more about duplicated content and check if you aren’t making any mistakes visit those links:

  • Virante - This tool diagnoses common causes and effects of duplicate content penalties;
  • Check your Google Webmaster tools to improve your site;
  • 7 Ways to Tame Duplicate Content – read this old, but still relevant post from SEOMoz.

1wd duplicated content

Here you can check more common SEO mistakes from official Google Webmaster Central blog, check this video ( created on March 19,2012):

What should you do now to improve your search rankings?

Okay, you heard about a lot of mistakes, but what exactly do you need to do now to be friends with Google, to improve your traffic and brand?

A lot of fundamentals have never changed, Google’s changes just encourage you to work on best content, real relationships, best user reading experience and be quick to change and improve.

1. Don’t chase the algorithm, create content for users

You might be hearing top SEO advice all the time, people talking how to help you promote your content, get easy way to huge traffic and high-ranking. The truth is even if some of these spammy techniques work, they won’t work in short future. Blackhat SEO guys, make it their job to search for the holes and change all the time, but it’s a hell of the work and they must be very careful. Just very few guys are so smart, so experience that they can really work on gaming the system.

I would suggest to work on long-term white hat techniques, which will do a lot of good for you in long run. With online business it’s important to feel safe about it and know that you will earn approx the same or more money each month.

2. Track everything

Use Google Analytics, KissInsights, Kissmetrics, Seomoz Pro, Webmaster Tools to be able to keep up with trends, get information about your visitors and make sure your site follow the best techniques, check if links are working.

3. Be aggressive and quick on changes

  • If you are interested on being friends with Google, you need to be friends with your visitors. If all the sites are going mobile and on tablets, you need to create your website to be accessible on those new devices.
  • If everybody is implementing HTML5, CSS3 then use it  so your code becomes cleaner and shorter.
  • If browsers are stopping to support Flash, then you better start focusing on new techniques.
  • Responsive designs help for site to be supported on all those different resolutions, use it!

4. Social network importance

Google is pushing its social network Google+, Facebook is working together with Bing search engine, Twitter search results appear real-time. The future is in social networks, Google are getting better and better on indexing such information very quickly, they listen to social signals.

Actually those are great news because before Twitter, Facebook was completely different traffic sources, now they complement each other by showing up in search results as priority. If you want to work on search engine optimization, work on social networks! We have quite a lot of them, I didn’t mention Pinterest and LinkedIn even yet!

5. Update Your Old Content

This can take a lot of time if you have a lot of articles, pages, like we have on 1WD, but encouraged to do. If you have old posts which rank very good, its worth updating them, checking for broken links, up to date information. You will get huge benefits from that like more social signals, new comments and your posts will be kept ranking very well.

If you have written very poor content in past, then consider editing it, don’t delete those posts, but invest in quality.

6. Implement SEO basics and good on-site strategies

The most important thing is to use very simple and clean code, validate HTML and CSS to prevent any crawl errors. If you will keep your code clean, pages will load faster – load speed also affects search rankings!

While working on your website design, remember to keep your top navigation simple and short ( something we are not doing!) We were thinking that detailed navigation will help users to browse around, but in fact it’s only creating clutter, as people just want to read the latest, then most popular posts and if they want to find something they use search anyway.

7. Work on good link building techniques

These include writing guest posts, working on real relationships with influencers, with your peers where you can help each other by linking on relevant posts, writing comments and leveraging from those relationships.

Actually the same way you need to work on social relationships with goal to get more social signals, the same way you work on link building indirectly just working together with people helping each other. For example, if you would own 1WD, you would connect with similar web design blogs, interact with blog owners, link to their sites – they will return the favor one way or another just because they will consider you friend.

Tools to use for better SEO on your own site:

WordPress SEO by Yoast (free)

In past I have always been using All In One SEO, but now transferring to Yoast plugin, because it is very complete, everything in one place, easily explained and once you setup it, you can forget about it, just add what’s required to new posts and enjoy the best SEO practices.

If you invest time in researching all of this plugin features, it will be enough for you on-site SEO efforts!

Some of the popular features include:

  • Post titles and meta descriptions
  • Robots Meta configuration
  • Google webmaster tool verification, Bing webmaster tools
  • XML sitemap
  • RSS enhancements
  • Edit your robots.txt

WordPress SEO Plugin  Search Engine Optimization Plugin  Yoast

SEO Smart Links (79$ for 3 months)

SEO Smart Links – Premium Edition enhances your search engine rankings by automatically inter-linking your posts. In this way you are working on link building magically while writing new posts, which is very useful as each links also counts as vote for search engines. Start with your own site!

This is premium plugin created by Vladimir Prelovac, there are some free plugins around like this, but I cannot vouch for them.

Some of the features:

  • Enhanced content parsing algorithm
  • Advanced automatic interlinking options
  • Advanced custom keywords options
  • Advanced control over number of created links
  • Support for link redirection/link cloaking

SEO Friendly Images (free)

This plugin will come really handy for your image optimization, also created by Vladimir Prelovac.

SEO Friendly Images is a WordPress SEO plugin which automatically updates all images with proper ALT and TITLE attributes for SEO purposes. If your images do not have ALT and TITLE already set, SEO Friendly Images will add them according the options you set. Additionally this makes the post W3C/xHTML valid as well.

Seo friendly images

CommentLuv Premium (free to 67$)

Comment section is where you should spend a lot of time as blog owner, if you work on regular content then you must encourage comments. Your visitors are actually helping you to add more good content to the post by leaving valuable comments. But in order for them to do that, you need to encourage them by rewarding your visitors. How about the link back to their recent post?

Some of the best features:

  • 10 post incentives – if visitor share post on G+, Twitter or like, he can choose which post to include there
  • Control over do follow, nofollow attributes
  • Built in tracking system
  • Beautiful anti spam plugin GASP built-in, to eliminate spam. Actually a lot of options to take care of spammers wanting to just get their links.


If you want to read more benefits of using this plugin, check this awesome plugin review made by Ana, her blog posts usually get from 20 to 100 comments. Only thing missing in this plugin is beautiful design, but planning to take care of that by manually redesigning it.

Google WebMaster Tools

Must use tool where Google will directly inform and help you know what sections of your site needs to be improved, what problems it may get or is getting.

Google webmasters tool

SEOMoz Pro (99$ per month)

SEOMoz is a proven tool created by SEOMoz experts, their expertise and great blog leaves no doubt they know what they are talking about. I am using their software to get detailed analysis what kind of most common errors and warnings I have on my site, manage keywords, keep eye on search traffic where data is driven from your Google Analytics account ( ah, you should have Google Analytics installed of course).

It is quite expensive, but I really feel it is helping me to simplify SEO and social monitoring on my own website. If you take SEO seriously and want to make your life easier, consider getting this tool.

Remember they have a big team and they are regularly improving, crawling your site each week, notifying you about issues that might impact your performance.

Seomoz pro seo optimization

Xenu Link Sleuth & Screaming Frog SEO Spider (free)

This tool is helpful for checking web sites for broken links, analyze all of the SEO basics, store information locally and then if any problem arise you can check on history to help you diagnose which changes may have affected that problem.

Link verification is done on “normal” links, images, frames, plug-ins, backgrounds, local image maps, style sheets, scripts and java applets. You can download this software for Windows, Mac and Ubuntu.

Additional features:

  • Simple, no-frills user-interface
  • Can re-check broken links (useful for temporary network errors)
  • Simple report format, can also be e-mailed
  • Executable file smaller than 1MB
  • Site map

Xenu link sleuth checker

Sites to read to check on further Google SEO changes and discoveries:

Here are the blogs, video channels and articles to read to check on what’s happening behind the scenes on Google and to find further proven explanations and solutions for problems you may have.

Google Webmaster Central

This is the official YouTube channel for Google Webmaster Central, your one-stop shop for webmaster resources that will help you with your crawling and indexing questions, introduce you to offerings that can enhance and increase traffic to your site, and connect you with your visitors.

Google webmaster central youtube

Seomoz Blog

Seomoz product founders happen to own one of the best SEO blogs out there. It is a great community where you can ask questions in Q&A forum, official blog and then user submitted post blog, where you can get even more great advice and practices.

Favorite posts on Google topics:

Seomoz blog

SearchEngineLand

One more top SEO blog and while doing research on current SEO changes, I found a lot of relevant and up to date articles about this. That’s one big reason to remember checking out this site on regular basis.

Some valuable posts you should read there:

Search engine land

MySEO Community

This is an amazing website curating information about SEO, they work seriously on quality, so if you need one stop place about SEO, don’t go further.

Here is their own description about their site - MySEOCommunity isn’t a run of the mill online community. Because of the increasing popularity of search engine marketing and social media, there is a lot of content written about these subjects on a daily basis. Unfortunately, trying to manually keep up with the best content that’s being written is next to impossible to do.

MySEOCommunity blogs read

Check which links can harm your site rankings:

If you did over optimize before on your site, you should be very worried, so here are some useful articles to read about how to recover from those bad links. Check also which links can be harming your site and remove them.

Is your site affected by Google algorithm changes and how you are solving them? Would love to hear your stories and solutions.

April 16 2012

07:00

Build a Basic Dribbble Fed Portfolio Website (Part 1/2)

Follow this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this first of the two part series we’ll go through the process of designing the website concept in Photoshop, before coding up the HTML and CSS next week.

Simple portfolio website design

The portfolio design we’ll be creating is a single page design and features the very basics of a design portfolio website: A logo, an intro, the showcase of work, an about me paragraph and a contact form.

Create a new document in Adobe Photoshop. I like to give myself a large canvas to work with that resembles a large monitor resolution. 1680x2000px will provide enough space to visually build our design as it will appear on screen.

Fill the background with a warm grey tone such as #f1f0ed. Using subtle tones as opposed to black on white will help avoid any contrast clashes.

Use the Noise filter (Filter > Noise > Add Noise) to add a subtle texture to the background to give the site a warmer, more tactile feel.

Draw an 820px selection in the centre of the document and use guides to highlight the centre and edges of this main content area.

Fill a circular marquee selection with a dark grey and add your initials in a font of your choice to create a simple logo.

Right click and select Rasterize Type on the initials layer then CMD+Click the thumbnail of the background circle layer to load its selection. Inverse the selection and hit delete to remove any overlap beyond the edges of the logo.

Dab a spot of a soft black brush, then hit CMD+T to transform the shape. Squash it down so it can be used as a shadow under the logo. Move it into place and reduce the opacity to suit.

Begin writing out a short introduction to your portfolio website. In the coded version we can use Google Web Fonts to make use of the @font-face CSS3 property, which will allow us to use a cool font for the body text. Here I’m using a downloaded version of Droid Serif to mock up the text in Photoshop to gain a feel for the text sizes.

Change the colour of text that will appear as a link and add the underline effect to simulate a clickable element. Planning these features now will make it easy to just copy and paste the hex colour values into the CSS stylesheet.

This portfolio will be self-updating using your shots from Dribbble, so begin copying and pasting the design thumbnails from your profile and align them accordingly in the Photoshop document. Hold Shift while pressing the cursor keys to nudge the element by 10px increments.

Add a Drop Shadow effect to the portfolio designs to lift them from the page. Effects like this that were once only achievable in Photoshop can now be replicated with the CSS3 box-shadow property.

Make a copy of the intro text and adjust the wording to create a brief About Me section under the portfolio elements. Maintain the same font hierarchy and link styling.

Finish off the design with a Contact section at the bottom. Use copies of the existing text to mock up the wording and form labels, then draw a rectangular selection as a base for the input fields.

Open up the Layer Styles window and add a subtle Inner Shadow to give the illusion that the field is inset, then add an off-white Color Overlay to reduce the contrast between the field and the background slightly. Then finally add a #dedede 1px stroke to define the border of the input field.

Duplicate the form field and move it into place as the second input and a textarea element. The great thing about layer styles is they can be scaled to any size without being distorted.

Add a darker grey rectangle the represent the send button. Give this element a quick noise filter to match the texture of the background.

Use the same font styling to add the Send label, except change the colour fill to white, then finish off the button with a subtle drop shadow to help the element stand out.

Simple portfolio website design

This leaves our basic portfolio concept complete ready for part two, where we’ll export the few images we need from the Photoshop document then replicate this design with HTML and CSS before adding the simple code to pull in our Dribbble shots.

April 06 2012

11:00

Guide to User Flow – The “Foolishly Ignored” Backbone of Website Design

User Experience, Responsive Web Design and similar terms have made such a serious impact on the lives of web designers that they have almost forgotten the core of website design – User Flow. I hope that we, the web designers, remember that website design is not just about “how it looks” but also about “how it works”! It is easy to get sentimental with your passion – website design – which forces you to jump right into the website design phase without considering the end user expectations. Website designers concentrate so much on the information architecture of a website that they tend to forget the user flows that are the basis of all conversions benefiting the website. We can either give up on end user just for the look (and all other silly adjectives) of our website or start giving priority to User Flows in order to increase the returns from the website.

So, once you have made up your mind that you will break the shackles of information architecture, aesthetic looks, user experience, responsive design and other silly terms then you can start reading further. It is time to design user flows.

Know Your Goal!

Oh please! Can we have a new sub-heading?

Actually, I know that “Know Your Goal” thing is an obvious subheading to start with but it fits well in this scenario. See, you cannot start designing user flows unless you know what you are going to design for. This is when it becomes important for designers to sit with their client and understand the basic purpose of the overall design. Are they looking for sales or are they looking for a page which they can get the visitors to sign up for their email list?

See, web designers must understand that the questions mentioned below aren’t the reason why you are designing a website:

  • Do you like the new design?
  • How is the new layout?
  • What do you think of the latest UI improvements? Are they impressive?

Clients might target positive answers to these questions but sooner or later they will understand that their positive reactions are good for nothing. At the end of the day conversions matter for any website and if the new design isn’t bringing in conversions (in whatever beneficial format) then the newness of the website is worthless.

Henceforth, next time when you have a website design project, think of the user flow which is going to benefit the overall design. Two major pointers that will help you keep a check on actual user flow and how to design for them are:

  • The business purpose of the website – These will decide the respective action that you will want the website visitor to take in order to help the client achieve the business purpose.
  • The user’s objectives – This is more like for-the-user tactic where the user flow is all about the user. Here the purpose of designer is to understand what exactly will the user look for from the website, their desires and their needs? At the end of the day it is all about satisfying these desires of the end-user.

Your User Is Your Goal. Explore Them!

We are discussing the importance of User Flow for a website henceforth it has to be the user who will make or break the website. The job of the website designer is to understand the users and their requirements. One needs to start with a detailed study of every possible website requirement and the kind of final product that the client is expecting. Some of the example user objectives to get you started are:

  • Finding specific content.
  • Buying a product.
  • Buying a gift for someone (which is different from buying a product for yourself).

Now, the hidden business objectives for which clients would want to launch a website that covers such user based requirements will be:

  • Increase subscriber base.
  • Sell specific product.
  • Earn leads.
  • Get the product promoted on social networking sites with the help of user only.
  • Create a database of contact details.

A website designer who clearly understands the requirement of both parties (user and end client) will have a sure advantage over those designers who aren’t putting importance on user flow.

Define the Start and End of Your User Flow

User Flow is a state diagram of sorts which defines the path that the user will follow when it visits a particular website. We must understand the initial point from where the user starts and where their should end. It is these two points between which the website designer will have to carve his own space that will give the requisite comfort to the user.

Typical mediums via which a user can enter your website are:

  • Subscriber Emails – Users can come from a newsletter email that is sent to them.
  • Social Media – Users can use your links in the social media world to land on your website.
  • Paid Advertising – Google AdWords campaigns and other similar paid advertising methods are an important way to guide users to your website.
  • Organic Search Queries – Google Traffic (which results from organic search queries on Google) is an important source for website traffic.
  • Referral Links or Press Publications - Users can come to your website via various blogs ( and other similar sources) that are talking about you.

Important Questions to Consider

When designing User Flow it is important to understand that detailed analysis of the requirements is a must. In order to get a clear picture of what users will be looking for, web designers must conduct in-depth interviews of their customers. Look, anybody can collect information that is nothing but speculation, but that is not how a website user flow is designed. Making stuff up as you go will take you nowhere.

So, take a printout of the following questions and add a few more from of your own. Then start answering each of them in as much detail as possible:

  • What unique features of your website or product are most appealing to the end-user?
  • Which kind of user would want to use these features?
  • Why would they want to use these features?
  • Are there any other desires that these users have?
  • What sort of problems are they facing in fulfilling these desires?
  • What kind of questions do they have about your website or product?
  • What are their hesitations?
  • What kind of information will they want if they plan to take any action?
  • How can you touch the user emotionally so as to make them perform the desired action?

Present Crystal Clear Information

I have always preached about being “Crystal Clear”. No matter what we are up to, we must understand the importance of Crystal Clear Information. I agree that most of us are here to earn a fortune and we are all very much determined to do anything that will help us reach that goal, but this should not mean that we start deceiving the end user just for a few extra dollars.

The purpose of User Flow is to fill in the gaps that are left while designing a website. This is done by following a detailed User Flow which covers every small pointer that concerns the user. See, the goal of a website designer is to shape the thought process of the user in a manner that they are determined to perform the action for which the website was designed. It is about optimizing every step which the user will perform in order to sell your product. Below pointers will help you shape the thought process of the user:

  • Every step (or webpage) that the users visits must present a very clear picture of what the whole setup is about and how it will benefit the user if they perform the next action.
  • Give the user detailed information and give them the offer to grab extra benefits if they perform the desired action. Also, make sure that these benefits are worth the user’s time.
  • The information presented must be easy to digest and the user should not feel like they might just get tricked.
  • Minimize the amount of friction that users face while moving forward. Look, if you ask for extra information from the user then it might just act as a turn off and they might hop to another window. Get the picture? Don’t ask users to perform actions that are of no benefit to either side.
  • Present very clear approaches to next steps so that users aren’t confused of what needs to be done.

Further Reading

User Flow is a science in itself and it cannot be mastered after reading just a couple of guides. It is a time-consuming process and requires web designer’s diligence to reap positive results. Below, we present you with more guides that can help you approach User Flow in a smarter fashions:

March 30 2012

11:00

A Handy Guide to Better User Experience

In simplest terms, UX, also known as user experience or user usability is the way most basic users feel about using an application, a program, a website or anything. User Experience is based on the reactions and responses the user performs and provides. While it can seem related to gaining feedback, it is actually not the same. User Experience is meant to understand and make the user reach the “final goal” which is defined by the owner of the product. Whether this goal is getting the person to subscribe to your newsletter, or make him buy  your new t-shirt, the main goal of the owner is to make the user’s way as easy and hassle free as possible. There are many factors which can influence a user’s experience with your system/product. The following are some of the most important factors.

User’s Previous Experience and State

Image Source

User’s previous experience is probably the most important factor which can negatively affect your user’s experience with your product/system. There is simply no easy way you can teach an old man to play the latest Angry Birds game, if he sees it for the first time in his life. Same goes with user experience. While a lot of internet users are actually pretty familiar with many technologies (considering just the user side, not the internal/developer side), if you come up with something really fancy and awesome, something really unique, that there is no easy way you will get everyone in the audience using it as if they “were playing with it, since young age”. When deciding on any system, you must have the simplicity principle in mind as well. Overuse of elements may crush or lower your user-experience which will eventually lead to a loss of sales/customers etc.

System Properties

Image Source

You shouldn’t even bother about your user experience data if your system isn’t perfect… or at least near-perfection level. After the page has been reloaded, the rate of leavers is about 25% which is actually a quarter of the sales/subscribers/customers you could have achieved! Having a flawless product is really important. Many clicks in order to perform a single action, also force users to leave. No one is interested in browsing 3-4 pages in a row only for watching a video describing your service. The most important key point to keep in mind, regarding your system defections is: “Save their Time, and they will Save Yours”.

Small Details which make Big Differences

Image Source

There are several minor things which tend to create either big successes for you and your product or cause your unavoidable fail. Bounce Rate is a pretty important factor which must be taken into consideration. Bounce Rate refers to visitors who tend to leave the website before making any action, even browsing the homepage. Modern traffic analyzers, such as Google Analytics provide us such data, so we know exactly where is the problem with our system. Maybe you’ve built an extraordinary product, but you haven’t generated any sales which can create a lot of questions. It is very important that we analyze correctly the bounce rate data, so that we know exactly if there is a trouble with the system over-all or any page(s) in particular. Avinash Kaushik, a google analytics specialist says that a 35% bounce rate is concerning where a 50% bounce rate is actually worrying. User targeting is one of the most basic troubles related to bad UX. Incorrect targeting is a basic mistake which must not be performed by anyone who wishes a decent audience. You wouldn’t like to target teenagers to your site for selling car washing solutions or under-ages to websites about alcoholic drinks. This will not only make you lose your money (if you are advertising) but will also mess up all the bounce and traffic rates you may have.

Analyzing UX Elements and Details on Websites

Forms and Fields

Besides buttons, forms tend to be the most used UI elements in any website designs. You can basically see them on any website in any place: header, content area, sidebar, footer. They can be of any type and represent input fields for collecting info (such as subscribe forms), forms for messages, search forms, forms for comments etc. As you already know, our main goal is to make user experience as easy and understandable as possible. This is why, when working with forms, you should always keep in mind a few details which will make your forms more user-friendly and will help your users fill them without any problem.

Use Unified Text Fields

Unified text fields can actually be filled much faster than the regular, non-unified ones. The basic user tends to spend more time performing eye directions and imputing info from the side on regular fields, and in doing so, losing their precious time, which is definitely not our goal.

Plain Search Forms

A “button-less” search form allows users to perform easier searches. Many designers use plain forms for search, because they think that those will fit better into their designs, rather than forms with an addition of a button. It isn’t a good practice simply from the designers’ perspective; using plain/simple search forms actually makes your users perform easier site searches. Rather then imputing their search term by typing, then grabbing the mouse and performing one more click, you just let them skip 2 steps, which is again a time-saver!

Field Confirmations

One of the most UX-unfriendly situations is when you fill out a long form, after hitting refresh you actually realize you’ve imputed some wrong information. That’s where automatic field confirmations come really in handy. These types of confirmations usually flash an error message if the users have left any field blank, or any information is wrong: such as an email address without the ‘@’ symbol.

Navigation

It is a good UX practice to always set your links located on the top of your page, and especially if your navigation bar links open up in the same browser window. It is a well-known fact that you should only set external links to open in a new tab, and never let your internal links open up in a new tab or browser window as it may totally ruin your visitor’s stay on the site. A lot of people prefer links to be opened in the same tab, however, you can make an exception on external links, but never on your internal ones.

The Order of Placing Links in the Nav Bar

You have probably seen that all sites tend to put the “Home” link at the beginning of their navigation bar, and links which require action, such as “Contact Us” at the end of their link “row”. The placing of these links isn’t dummy or random — all of this has a specific logic and the user’s “ease of use” concept in mind. A lot of websites tend to put links in their navigation, either by their importance or by level of information offered. It is a common example to see the “Home” link followed by an “About Us” page because it is the starting point for offering information. The “About Us” page is usually followed by a “Portfolio” page or a “Know the Team” page, which is the 2nd informative page on most sites, after the “About Us”.

Conclusion

The key is to always think about how your users will perform. You should attempt to make their task as easy as possible, save their precious time, and try to achieve the most important goal you have: engage them!

March 18 2012

10:00

A Beginner’s Guide on How to Pursue a Graphic Design Career

Done with college? Time to opt for a real career and get out of your part-time money-earning world? It isn’t easy out there especially when you want to opt for a career option which isn’t as safe as the job of software engineers is. Don’t get me wrong, I am a software engineer myself and I know that a 9-5 job with reputed I.T. company can make you feel safe. My point here is that a career option like Graphic Design is very nice and the process isn’t as automated as it is in various MNCs. This makes it a bit difficult for the infant web designer to find a way through the newly coined term Designer Poverty.

This article will help you understand the basic pointers that are essential when it comes to career in graphics designing.

Who is a graphic designer?

Graphic Designing is a form of art. The designer has the privilege to come up with an interface which will please the end-user and leave a lasting impact on their brain. So, a graphic designer is basically a person who uses a set of colors, typefaces, imagery and animation to give come up with an end result which fulfills the pre-define requirements. This end result could be on print or in digital. At the end of the day it is the smart use of all available tools and perfectly thought layout that will result into aesthetically pleasing design.

Where can a graphic designer find a job?

Graphic designer is responsible to develop the overall look and feel of the product. Without a properly planned design any genius product can fall head first. Henceforth, the importance of graphic designer is equally important during any product development life cycle.

[Image Source]

Some of the areas (other than the usual website designing) where graphic designers can look for jobs are:

  • Interactive Media - This is one of the very widely popular niches where graphic designers can search for their fate. Basically, anything and everything that is related to text, graphics, video, animation, audio, etc. I guess this should be enough to explain that interactive media is one of the most luring niches where graphic designers can look for a job.
  • Promotional Display - Ever wondered who is responsible for various billboard designs and other similar promotional displays. Well, it’s the graphic designers like you who do all the hard work.
  • Journal - Various journals (serious or humorous) constantly come up with various designer elements to keep the audiences glued. These designs can be as small as a normal company logo or as large as a complete cover design. Depends on your luck.
  • Corporate Reports - It might not sound like a regular jobs but there are designers who have made a business out of this itself. Freelancers hold expertise in designing corporate reports that look professional but aren’t really boring.
  • Marketing Brochures - These are something similar promotional displays and once again these cannot be complete without the presence of a graphic designer.
  • Newspapers - This happens to be one medium where there is a constant need of tweaking the final layout in order to come up with something that is a professionally compiled newspaper. Graphic designers can help newspapers look like newspapers.
  • Magazines - Just like newspapers and Journals, Magazines too require the help of graphic designers before every possible publication just because a lot of visual layout is part of every magazine.
  • Logos - That is one of the most famous and sort after jobs for graphic designers. I will call this a sort after job as it is not difficult to start as a freelancer in the world of logo designers. You will easily get some contract for starters and you can take it further from there.
  • Website Designing - And, here comes the last resort for a graphic designer when he/she has been pushed out from every other field without any proper response. Design websites and you can at least earn money for your daily burgers.

What educational background is required for a graphic designer?

Although zero educational degrees will do good if you plan to be a freelancer. On the other hand if you are planning to work for some organization than a Bachelor’s degree in graphic design is a requirement set by almost ever company. Other than that you can consider the pointers below to strengthen your chances of getting into the company of your choice:

  • Familiarity with computer graphics and various design software.
  • Problem solving skills, creative vision, and good communication skills.
  • An associate degree in graphic design will usually make you eligible an assistant’s position.
  • Up-to-date knowledge of latest news from the graphic design industry is a must as this industry is pretty volatile.
  • A portfolio so as to prove that you have it in you what it takes to be a graphic designer.
  • Work experience of around 2-3 years before you start dreaming of stabilization and higher degrees.

National Estimates For Graphic Designers (U.S.A Based Data)

Once you start going through the statistics furnished by Bureau of Labor Statistics then you start feeling that life isn’t that tough for graphic designers. Here are some quick numbers (the figures are as of May 2010):

  • 192,240 graphic designers were employed around US with a mean hourly wage of $23.14.
  • California had the highest number of employed graphic designers with 26,390 employees.
  • New York was closed second with 18,970 graphic designers.
  • It is estimated that the employment of graphic designers will increase by 13 percent by the year 2018. It is estimated that around 36,900 jobs will be added around US itself by the year 2018.

Graphic Designer Salaries

If statistics provided by Designer Salaries is to be believed then graphic designers can earn above $100,000 per year from Graphic Designing and related jobs. Here is a breakdown as per stats collected between year 2000 and 2010:

  • Owner, Partner, or Principal - The salary for this niche ranges between $100,000 to $110,000.
  • Solo Designer - The salary for solo designers ranges between $52,000 to $$56,000.
  • Creative and Design Director - The salary in this case is between $85,000 to $100,000.
  • Marketing or New Business Manager/Director - Salary for these is between $75,000 to $80,000.
  • Writer/Copywriter - The salary for writers/copywriters ranges between $44,800 to $62,000.

Conclusions

The world of graphic designers might not look like overly shining from the top but at the end of the it is about your passion which you want to live. If you are good at it then you really don’t have to rely on any day job and sky is the literally the limit for you.

March 14 2012

10:00

6 Simple Tips on How to Market Your Infographics

Today, Infographics are everywhere on the Internet, there is an infographic for almost every popular subject. From serious topics like marketing to seemingly simple ones like apps and bedtime stories are made into infographics. We saw the trend back in 2010, when internet marketers were thinking of a better way to market content. Top ten lists were being overdone, and there was a huge need for interesting content, people were getting bored by the typical content marketing techniques seen up to that point.

Content was, and will always, be king. Google loves new and fresh content. But generating new and interesting content was getting tough. There were top ten lists that everyone was doing (read over doing) and there were videos not everyone could pull off or were boring. So there was a huge demand for something in between.

What makes an infographic go viral?

So, what is an infographic actually? It’s basically information graphics, where by otherwise boring and bloated information is made interesting by using graphics. Fair enough. But what makes it viral?

1. Information in digestible capsule format

Infographics always comes in an easily digestible format. Small, cute and interesting graphics make the data even easier to understand and amazing. Today, many infographics we see are otherwise boring information, that are made interesting by using graphics.

2. Data that is useful

Most infographics have informational data that is really useful to people.  Like this one.  The information is so useful that you want to print it out and hang it on your door for quick reference, this is the compelling factor of any infographic.

3. Catering to our short-term attention spans

Today, all of us have a very short attention span. We cannot spend more than a minute on anything on the internet. This is the reason why even when all the information is available on Wikipedia, we don’t read it all. But with infographics, we grasp everything even with our short-term attention span.

So, how do you market an infographic today?

That is our question today. With so many infographics being churned out lately, how can you stand out and be difference from the rest? Let’s take a deeper look.

1. Submit infographics to Infographic Directories and Blogs

There are several places that accept infographic submissions and feature all of them in a very nice way. There are no processes to get into though, all you have to do is submit the infographic and hope that it will be displayed on the site. Most directories do not have an acceptance policy which means that the infographic will be displayed the moment you submit them with a link to your original source. Some of them however take some time to review the submission and publish it in due course.

Here is a good list of blogs and directories:

  1. Visual.ly
  2. Chart Porn
  3. Flickr Infographics Group
  4. Daily Infographic
  5. Charts Bin

2. Make a paid submission to Stumble Upon

Stumble Upon is a great resource when it comes to visually pleasing content. They have a dedicated category for infographics that will get you thousands of hits every month if you submit your infographics. But getting in there can be tricky. If you make the submission from a weak account, then chances are that the infographic will be buried. But instead of taking the risk, make a paid discovery on stumbleupon. The standard Paid Discovery plan is a flat fee of $0.10 per unique visitor. There are also options for higher and lower priority serving. But its a highly effective way of marketing your content to the right people.

3. Keep the tools ready for social sharing

The basic necessity for any infographic is to make sure it can shared on social networks. When people view the infographic, make sure there are enough social bookmarking tools beside it to ensure easy sharing to all networks (or the ones that are relevant to your market). While this sounds like a seemingly basic thing to do, many bloggers and designers get caught up with making the infographic so perfect that they miss out the very basic purpose of it. Which is to get as many links from other blogs as you can and build social media traffic.

4. Submit to Reddit’s Infographic Subreddit

Reddit is where the new memes and sensations of the Internet appear first. It’s from where the rest of the social networking sites, get inspired for great content. And Reddit has an exclusive subreddit at (reddit.com/r/infographics) for infographics. Stuff posted here will probably not appear on the front page, but will be featured on many blogs and Tumblr feeds as there is a big community of infographics fans watching over the subreddit.


5. Leverage the Pinterest community

Pinterest is in the spotlight these days. With praises from funding managers and social media gurus alike, this seems to be the new thing in the valley. And rightly so, because like StumbleUpon, Pinterest gives you some amazing traffic for visually pleasing images and cool pins. Infographics is one category that always gets a lot of repins and likes on Pinterest. And for each repin and like, the chances of getting a new visitor to your site is increased. Watch out for the referral stats on Google Analytics.

6. Influential Blogger Outreach

Another powerful way to market your infographics is to get one of the influential people in social media to share your infographic. It could be someone with a lot of Twitter followers or Facebook friends, or even a page that has a lot of fans. Of course, you cannot go blindly and ask them for a tweet but if your infographic is good (which I assume it is), search for an influential social media user from the same niche as your infographic. For example, if your infographic is on “Valentine’s Day and Love” you might want to consider approaching couple of the female social influencers on the list. Talk to them and hit a deal, like two tweets at the peak hour for $50. There are many unlisted social media influencers out there who can do it for you. Just that you need to spend some time finding them.

Summary

Infographics are a great way to get some attention, build your brand, build links and get some viral social media traffic. It hits all the above points with one stone, and that’s the beauty of it. But since the idea of infographics is getting over done these days, the solution is to come up with newer illustrations, newer ideas and visualization techniques that grab people’s attention. The wow factor is very relevant here. All you have is the first 3 seconds. If you can get their attention in the first 3 seconds, you’ve won. All the best.

January 12 2012

21:00

Landing Pages Guide 101: Create Landing Pages that Work

I am by no matter an expert in landing page creation, but I am doing a lot of research on this topic in order to become more experienced myself and I invite you to join me in this journey.

In this article you will be taken through each important step in order to create a successful, landing page that converts visitors into customers, I will share the biggest takeaways here and point you to the right articles and tools – let’s call it Landing Pages 101, Science Of Landing Pages, Anatomy of Converting Landing page, whichever you prefer most.

What is a landing page and where it is usually used?

Basically a landing page is a powerful online marketing tool – it’s a unique webpage, also known as a lead capture page, where your task is to persuade visitors to complete a certain action for example:

  • to subscribe to your newsletter in exchange for an ebook or product demo
  • buy your product
  • to register for a webinar

Your main goal is to create a landing page that encourages your visitors to complete a specific action. That’s far from being an easy task, landing page creation is an art, which is very hard to master, and even when you do you still need to do a lot of A/B testing to adjust your assumptions about how your visitors think and to see what works and what doesn’t.

Landing pages are widely used to launch webinars or products, pre launches, persuade visitors to give you their email address with the help of ebooks, email courses, special discounts. And as we all known once you have a visitors email address you can communicate with them on a much more personal level, which helps to establish relationships and also encourage them to do what you wish them to do.

In this article you will be taken through each important step in order to create a successful landing page, capable of converting visitors into customers. If I didn’t succeed in explaining what a landing page is read the Wikipedia explanation or this great Hubspot blog article.

Strope inspirational minimal landing pages

(Strobecorp – beautiful and minimal landing page example)

How to use this guide?

This article is separated into sections starting from landing page structure, color usage, copywriting, how to write great headlines, tips on how to improve an existing landing page, templates, tools to use, a/b testing tools, analysis of some of the best landing page examples and more. Feel free to jump to the sections to learn what you find most important, though if you take the time to read this entire guide section by section, I can assure you, you will know more about landing pages than 99% of the rest of the industry!

Well, now that you know what to expect here, shall we start?

How to know when to create a landing page? Where are landing page used?

You can use landing pages together with:

  • ad campaigns through Adwords
  • guest writing
  • email newsletter
  • product launch
  • product pre launch
  • coming soon page
  • etc.

When you run campaigns it’s not smart to send people to your home page. Usually your Home page doesn’t explain a lot about your product, you need to make it as easy as possible for visitors to do what you want them to do. If you want to promote your latest product, webinar or ebook, make it as simple as possible. Point them to a special landing page where they can do just that! If you know where your audience comes from, learn about them and make it as related as possible.

When you run special campaigns on a website, for example a giveaway, greet them and customize your message! Make sure there isn’t any confusion what you want them to do (call to action) and build your landing page around this call to action. Simple is better, remember that!

Milk inspirational minimal landing pages

(Milk Inc. minimal landing page clearly shows how less is better).

Landing page anatomy (step by step parts in landing pages)

Before we start I’ll explain a few terms I will be using:

Visitor – visitors who come to your landing page, potential customers

Product – product in this case would mean an ebook, email newsletter,t raining, webinar, article etc.

Introduction

The best product launch is when you have a product other people will love so much that they will tell other people about it! And your product must be just like that, whether it is for a global audience or a very specific one, the first thing you need is a great product place and the landing page is the place to show it off and explain in simple words why your visitors need it!

Make your product desirable and memorable.

The Anatomy of a Perfect Landing Page

This is a great infographic visually explaining the most important sections of a landing page and how to direct visitors attention.

Anatomy landing pages

Top Page Headline

This is usually the first section a visitor will see as headlines are usually big and you need to make sure you explain what you’re offering here and what the page is about in a few seconds! What problem do you solve and why your visitors should care about it.

For example in this article the headline is:

Landing Pages Guide 101: Create Landing Pages that Work

You know straight away what to expect, you’re going to find a comprehensive guide on how to create landing pages that work! Make your message as simple and clear to understand as possible! Peoples attention spans are very short and great products aren’t used or articles aren’t read just because someone wrote a crappy headline!

Make sure your ad copy targets visitors to the right page to fulfill expectations:

Bonus tip: use the same color palette or graphics on your landing page as in your ad copy assuring visitors that they came to the right place when they clicked on ad. Example from MojoThemes campaign below.

Mojo Themes Cyber Bundle 2011

One Clear Call to Action

Build the whole landing page around your call to action, because it’s the main focus right? You created a landing page to get your visitors to complete a certain action and because of that make sure the call to action is easy to notice, whatever it is – subscribe box, buy button, form you want them to fill out.

Make sure your call to action is above the fold (basically it’s on the page visitors see without scrolling, approx 500px height). Some minimal landing pages even just put their whole message above the fold, making sure visitors don’t need to do ANY scrolling and keep their message super simple! You must aim for this goal too!

I’ve already mentioned how important it is to have one clear call to action and how you should build your landing page around it, but I wanted to emphasize this and include some more articles you will find extremely useful if you want to know how to create a memorable call to action or how to can improve your landing page to focus more on your main goal:

Shipment inspirational minimal landing pages

(Shipmentapp has no distractions, just one clear call to action).

Clear Headlines

The same way you use your headline you should use subheadlines. Use them to emphasize your message as you explain to your visitor what your product is about. Put the same attention into subheadlines as you put into your main headline, because you want your visitor to keep reading, you want to keep them engaged until he is sure your product is what he wants!

Note: continue reading the section about copywriting because the art of headline creation is really complicated and requires a lot of learning to master.

Page Content

All the page content should be focused on what your main headline says and a single, focused message and, of course, your call to action. Make sure you list the benefits of your product, not just your product features, you’re the most proud of. When you create page content, you need to think from a visitors point of view. Will they be interested in the features you offer, or how these features will benefit them?

Keep your most important content at the top of the page together with bullet points, because most visitors at the beginning tend to scan a page and you need to grab their attention to get them interested enough to read further.

For example, if:

  • feature is – Create a website without any coding skills
  • benefit is – You can save time by creating a website without any need to learn programming or spending a lot of money to hire a designer or programmer.

Make sure your 3 or 4 most important benefits are immediately clear.

You can also emphasize some of your content by making it bold or italicizing as I have done right below.

Tip: Focus on just three key benefits or ‘pain points’ you solve and no more! This will help your visitor to easily understand what your product is about, and more importantly, how it will benefit them.

Page content is also the place where you tell your story, build trust by showing your experience and address your audience by showing pain points they have and how you will solve them. When you tell this story, break your content up every 2-3 sentences to avoid the page looking cluttered. This is also why you need to use bullet points and numbered lists as I’ll discuss in the next section.

Write your content from a second person’s perspective – “You” addresses visitors much more directly than boring formal text.

Make sure you proofread and that there are no spelling or grammatical errors, your product will look much more professional and trustworthy!

Also don’t put too much text, because research shows 90% of the population doesn’t like to do much reading, which means headlines, images, video, and bullet points will get much more attention, where content may not get much at all.

Slidedeck inspirational minimal landing pages

(SlideDeck’s landing page shows how even with many elements you can still make a landing page look clean and simple).

Use Bullet points and numbered lists

Making use of this formatting will help your visitor understand what your product is about, the value you provide and what your message is. It will also simplify your layout, and simple is always better as peoples attention spans are super short.

Use Images

Images often explain more than words can – why do you think infographics are so widely popular? Infographics bring text together with images that require little to no explanation, I always encourage my readers to use images in articles, because visual relation is much more powerful than textual, as is our memory.

Stumbleupon inspirational minimal landing pages

(StumbleUpon did a very good redesign and their homepage makes great use of beautiful images).

Use Videos

And videos explain more than any single image could, you have a chance to show yourself, let people hear your voice, show them you’re a real person and it’s a great way to explain what your product is about and let your visitor just sit back and listen instead of browsing the page, trying to understand what he sees and whether he needs your product or not.

Social Promotion

If you are offering something of great value then of course visitors want to share your great product with their friends right? Make it easy for them and provide social promotion links, but remember to use just the most popular services like Twitter, Facebook, LinkedIn and nothing else. Keep it simple and try to place these links in a way that they don’t distract your visitors.

Here is a great spot to run A/B testing to make sure your social links don’t distract visitors from your main message.

Provide security

When you are asking for visitors personal information,  they will often have some anxiety about giving it to you, so you need to make sure you build enough trust!

You need to think like your visitor, why do they have that anxiety? They receive a lot of spam, scams and cold calls from sales people so you need to explain that this is not the case here, right?

You can build trust with:

  • high quality design and strong branding – for example I receive a lot of emails from people asking to check out their service, article, or help them promote it, but when I visit a site and it’s looks crappy  and has a terrible logo – I immediately close the page without even reading further! Presentation is so important, your product should look (in)credible!
  • testimonials – once you have grateful clients make sure to get recommendations from them! It’s even better if you can get testimonials from popular people in your industry or get mentioned on popular blogs.
  • 30 day money back guarantee, third-party security certification like SSL cerificate, guarantee seal.

What should call to action forms or buttons look like?

Usually your call to action will be subscribing to an email newsletter or a request to buy the product. It’s a very hard to decide how long your form should be, for example is it enough to just ask for their email, or do you need  your visitors name? It’s up to you, but try to keep your form as short as possible, the more input you require from your visitor the less likely they will go through with it. Ask for the least amount of information you need – the less information you require, the more signups you’ll get, simple as that.

It’s even harder with buy buttons because the next step is usually a request for their personal banking or credit card information. I recommend using my personal favorite, Paypal checkout, which is fast and simple and doesn’t require your visitor to share their personal financial information with you.

You can add some fields that will help you learn more about your customer, but make them optional, not required. A better option is to show these fields after subscribing -

Thanks inspirational minimal landing pages

Experiment with button and form size, usually bigger buttons perform better than smaller less noticeable ones.

Text on button

The default text is Submit, but studies show that it’s better to use something like Click Here or Go, but you can also take a different approach by making buttons more engaging and relevant to your offering like “Get Your Free Ebook Now!”, “Subscribe for news!”, “Get access now!” or “Download now”.

Posterous inspirational minimal landing pages

(Posterous has a beautiful, simple, landing page and good examples with call to action buttons).

Thank you page

Once your visitor has completed your call to action make sure you show your appreciation by simply saying thanks, offering a cool freebie or by directing them to related information on your site they may be  interested in.

On this page you might choose to give access to your product (if it’s something they can download), give more details and put the download link.

If you chose to not use social promotion on your landing page, you can use it here – ask them to share this offer or product with their friends!

Now you will usually have collected your visitors email address so keep them engaged and follow up there. I won’t get into this topic right now as we’ll have a separate section explaining how to make use of your email list.

Colors

You must also have a clear and basic understanding of colors, because different colors convey different meanings and are perceived differently. Check these three articles to learn some basics about how to use colors in web design and your landing pages.

preview-empathizing-color-psychology-web-design.jpg

How to pick the right font?

I didn’t want to go in depth in this topic, instead I found a good article for you to read if you want to know more.

Tumblr inspirational minimal landing pages

(Fonts can make or break the landing page, Tumblr does it right with professional fonts and effective use of whitespace).

Pricing tables - How to choose product price and how many options to offer

It’s a scary place to be thinking about how to price your product – you don’t want to price it too low and undervalue your product, and you don’t want to set the price too high and turn people off. How do you decide how many pricing options to offer and how to choose the actual product price?

It all depends on the exclusivity you provide, if you can make it look desirable, you’ll probably have no problem charging a higher price, but your landing page copy better be well written should be very well  to create that desire, need and rush that will convince them your product will help them change their life or business! And yes, if you charge a high price be sure you can deliver – people want to get what they paid for!

I like to think it’s better to set prices higher, and then offer discounts and experiment with your price point. As for the options – I think the best choice is to have one price, one call to action, but if you really need more, don’t have more than three plans. Too many choices will just confuse your visitor and he will turn away! Ah, and if you have more plans, be sure to offer a top choice, which should be the best value, to make it easier for your visitors to choose!

But here I will repeat what everybody is repeating a lot already – do A/B testing, don’t assume anything, just test it and know for sure what works and what doesn’t!

Here are two articles on this topic from SocialTriggers to help you make an even better decision on pricing:

..and a bit of inspiration, how a good pricing table should look and how to differentiate several plans:

preview-pricing-tables-inspiration.jpg

Tips on how to create, or improve, your landing page and some useful articles

Here I will again cover and repeat some tips you should really remember again and again while designing your landing page, and if you have already have a landing page, then check these tips to improve your page! For example did you know? “Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”

  1. Put the most important content above the fold, did you know 80% of web users spend their time at looking at information above the page fold and only 20% of their attention goes below the fold? Ok, admittedly, the research is a bit old and the way people are viewing the Internet has changed, but it’s a huge difference! Most people will view just above the fold, be aware of that!
  2. Simplify your form/ Use a simple button in order to make the page as easy to understand as possible and the call to action as easy to complete as possible!
  3. Reduce distractions - remove visual clutter, make use of white space, hide navigation, if you have one there and don’t use links which will drive visitors away from your landing pages…every little mistake adds up and results in less sales and completed action steps for you!
  4. Use white space to direct the eye to the sections you want and effective use of whitespace will also make your site look cleaner and more professional.
  5. Optimize landing page for search engines to make use of search traffic as well, which will be huge in the long run!
  6. Only have one call to action on the landing page, but repeat it several times throughout the page if your page is longer. Good practice is to always have the call to action visible as he scrolls. I also want to take this opportunity to remind you not to have long landing pages, however if you have one, then include one call to action at the top, middle and lastly, one at the bottom.
  7. Make sure your page loads fast - people don’t like to wait, attention spans are short and if you keep them waiting too long, they won’t wait at all. The same way you need to keep your landing page simple, keep your code clean and the images and video optimized.
  8. Use heat maps to see where people are clicking the most, by doing this you’ll also notice sections where people tend to click, but which aren’t clickable  - this means you should test your landing page more to make it super simple to understand and help your visitor complete your preferred action.
  9. Put email privacy information right next to the email input box, simple text – “We don’t spam and hate spam as much as you do.” can work wonders and build trust.

Instagram inspirational minimal landing pages

(Instagram’s landing page clearly shows it’s app for iPhone, it’s free and there is one call to action – download app from AppStore).

Here are some related links you should read for some really in depth knowledge about landing pages:

Copywriting importance, learn art of copywriting

The art of copywriting is actually the art of keeping your readers engaged from the first word to the last. Keep them engaged in your content with bullet points, sub headlines, the artful use of formatting. Make your content flow so seamlessly that before your visitor is even at the middle of the page they desire your product and are already wanting to complete your call to action! It’s a very hard art to master and here are several articles to help you learn copywriting. If you read these articles, when you finish you’ll know more about copywriting than most people do, and that’s a huge advantage over your competitors:

preview_large_headlineimpact.jpg

Templates to get you started:

You can find a lot of great templates online, some you can use right away that will help you kickstart your business! I think templates are great place to start, I recommend a lot of A/B testing and once you’re ready and know what you need, you can hire a designer or a coder to develop your own unique landing page that converts really well! These templates are very cheap and should are perfect to get you started!

Landing page templates from UnBounce – here you’ll find a lot of great templates, you’ll be able to edit in WSIWYG editor easily without any coding experience! UnBounce has huge experience in this market, so you can be sure you’ll be in good hands to get started.

Unbounce landing pages

Themeforest

Themeforest landing pages

Themeforest is a huge marketplace, selling everything from WordPress themes to landing pages! Even if you don’t end up buying a premium design, these are great source of inspiration! Here is a link to their landing page category, order these by sales to see the most popular landing pages on that site.

A few of my favorites:

Conversation ($10)

Conversion is a premium HTML landing page. Its great structure and clean, professional design as well as a variety of page templates allow it to fit to both transactional and reference landing pages.The main goal of a landing page is to convert visitors into customers, therefore the layout is specially designed and fitted with a variety of features that will make that happen. Coupled with a structure that’s highly customizable, this product will be perfect for your product, service or company presentation.

01_Conversion_Premium_Landing_Page.__large_preview.png

View Demo

Lista ($8)

Lista Landing Page is a premium landing page design for your newsletter or download, even just a service, your choice! Lista Landing Page makes good use of the Z Reading pattern to guide the eye around the design and ultimately convert your visitors in to subscribers or buyers.

01_a.__large_preview.png

View Demo

Integro ($8)

Integro is a Corporate HTML /CSS landing page. It has a clean, professional design with a Definitive Call to Action. Integro is a powerful Landing Page with features like Live AJAX Form Submission, Pricing Table, Lightbox, Tooltips, 2 Types of Galleries and Image Sliders. You get started with Integro within minutes & only handful of Customizations with well documented HTML / CSS / JS & PHP .

01_preview.__large_preview.jpg

View Demo

Online tools you can use to create landing pages

Ok, this is the more advanced stuff! Once you know a bit more about what you need even if you don’t really think that you can code and design landing pages yourself there are a bunch of amazing online premium tools you can use to build your own landing page in no time! Often those tools come together with helpful tips on how to design a landing page and some even include A/B testing! I did a lot of  research and these tools are the best ones I found and tested! Get started right now!

Premise

This is a handy premium WordPress plugin create by CopyBlogger Media for easy landing page creation. You won’t have any more problems creating unique pages, which look good and go seemingly with your own WordPress blog. I bought myself this plugin some time ago and I must say it is easy to use. The tutorials helped me learn a lot about landing page creation and for quick results don’t look any further.

I think this is the best tool for landing page creation without need to hire a designer to do the job, however of course for advanced solutions you still would need to search for help, but for most cases it’s enough with Premise. In their features you’ll also find included A/B testing through WordPress and even SEO tools letting you get all the data you could need from your page.

It’s a bit pricy ($85), but if you need to create a lot of landing pages, it is certainly worth the money.

Premise landing pages guide

Unbounce

Unbounce is online software you can use to create your landing pages. Everything is broken down into easy steps: build a page (choose from 276 templates), publish it, drive traffic and check results and in the end do A/B testing and optimize your landing page. This is a good site and if you need a cheaper solution, pick Unbounce – it has a 30 day free trial and the most basic plan costs only $25 per month.

Unbounce landing pages guide

KickOffLabs

KickOffLabs is another popular choice for landing page creation, they are trying to push social promotion into your landing pages encouraging you to be social, which is handy.

Their WYSIWYG editor is also very easy to use, you can easily pick from good color schemes and edit different elements easily. Only thing I think is missing here is advanced features for bigger landing pages with many elements, but if you want simple – KickOffLabs will be a great solution for you.

Kickofflab landing pages guide

Check their dashboard below – everything is there explained in 1-2 sentences, the learning curve is very small. Ah and yes, for one landing page KickOffLabs is free, but for advanced features you may need to pay as much as $20.

Kickofflabs landing pages guide

Related reading:

Importance of converting landing page and A/B testing

Once you have created your landing page, don’t stop there, you should always be testing – even if you can improve your page conversion rate by 4-5%, calculate how much it could improve your performance in the long run! Don’t make assumptions about what works, I bet you’ll get a lot of surprises through A/B testing!

With A/B testing you can test everything  –  headlines, content, bulleted lists, video placements, call to action forms, looks, colors, formatting – you get the picture. Services like Amazon have done countless A/B testing and are still doing it all the time trying hundreds and thousands of different tweaks, while this is extreme you should learn from them and keep improving yourself!

Here are several helpful resources I found to help you delve much deeper in this topic:

  • The Ultimate Guide To A/B Testing – introduction to A/B testing, basic explanations what to test, how to create your first A/B test together with Do’s and Don’ts and real studies.
  • The Guaranteed Way to Radically Improve Your Copywriting – guide from Copyblogger, beginning is little similar as previous article, but here you’ll get explained the magic of A/B testing – guessing game where simple text change increase conversations by 25%! Powerful!
  • A/B Test Case Study: Single Page vs. Multi-Step Checkout – nothing is better than real case studies showing how to do A/B testing!
  • Which Test Won? – this site runs a lot of different A/B tests, puts them online and create inspiring game from it! How good is your gut? Which version performed better – A or B? After you choose you can see actual A/B test results! Sharpen your skills here!
  • An Introduction to A/B Testing – one more explanation about A/B testing taking little bit different approach.

Tools For Landing Page Optimization ( A/B testing) – Measure Results

Ok, this is super important – I know, I know it’s too much at first – so many little things you need to know, be aware of and at the end really you still cannot assume anything! You need to test it! And to be honest for a long time this topic was like rocket science to me! I didn’t know how to get started, A/B testing felt like too complex a topic and too hard to figure out and use…

But not anymore with these amazing tools we can use these days!

These are the most popular choices:

Optimizely

Yes, I joined many Optimizely supporters and think it is the best tool available for now! It’s very advanced, yet very easy to use with everything you need built in for serious A/B testing! I just registered and right away I was ready to do an experimental test!

It is really as easy as they promise on website:

  • Enter your website’s URL below and create variations of your website in minutes.
  • Copy and paste your one-line Optimizely snippet onto the pages you want to test or measure as goals.
  • Start your experiment and learn which variation performed best!

Here you can read more in detail how Optimizely works.

Optimizely isn’t free (starting from $17/monthly), but it has a 30 day trial and I totally recommend it as a top choice for running any tests!

Optimizely ab testing landing pages guide

Heatmaps

Together with A/B testing heat maps also can be very useful to see where people click, scroll on your live version, maybe there is image on your site where people click, but it’s not a link? Maybe in that case you need to make that section clickable or change the image to avoid distractions?

CrazyEgg

This is the most popular heat mapping service, which I use personally. It also has a handy WordPress plugin allowing you to automatically add tracking code, making the whole testing process even easier!

Crazyegg heatmaps landing pages guide

If you were wondering if there are any alternatives to CrazyEgg, there is also a very popular heat mapping service called ClickTale, which is similar, but it has some interesting extra features such as visitor recording, conversion funnels and campaign tracking.

Blogs to read to get even more:

Landing page creation, optimization, A/B testing – all these little bits require ongoing learning if you really want to be ahead of your competitors and improve your conversion rates. It’s very hard to keep track of this changing world all by yourself, but it’s super easy if you know where to search for high quality content! These blogs focus just on these topics and I recommend adding these sites to your RSS reader so you are always the first to know about the newest tests, tools and techniques:

Do you know any more useful blogs or resources about this topic? Share away!

December 19 2011

21:00

The Official 2011 Nettuts+ Holiday Gift Guide

I needn’t remind you that Christmas is almost upon us. If you still haven’t bought gifts for your loved ones, this is the perfect time to start panicking. If your loved one is a developer though, we have an easy way out for you: pick a few from the list below and you’ll be off the hook!

In this mini gift guide, we’ll take a look at what we, as developers, want our stockings to be filled with. Hopefully, Santa hasn’t figured out that we’ve been feigning innocence all year!


Subscriptions and Software

Subscriptions are the gifts that keep on giving. Depending on whether you want to gift something for work or pleasure, you’ll find something here.


Nettuts+ Holiday 2011 Gift Guide

Netflix

Let’s face it — we’re busy people and can’t always catch a show at the right time. Heck, we’re the ones missing dinners with our special ones, right? And DVRing things can get pretty messy pretty quickly. This is where Netflix comes in. Unlimited movies and TV episodes over the internet? Yes please. Gift this to the geek in your life and watch him light up.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Linode / Other VPS

Show your cutting edge web developer a shared hosting plan and he’d balk. Get them a yearly subscription to a virtual private server and watch as he formulates all the sheer uses he’d eke out of it. While there are plenty of options out there, I’ve personally used Linode for a few years now and gets my recommendation.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Heroku / Platform as a Service

Or you could be a bit more forward and present them with a subscription to a PaaS [platform as a service]. Unlike a VPS, most of the sys-admin grunt work is taken care for you, including load management, letting you focus on just the code. Again, there are lots of options here but Heroku gets my vote for being so darn good.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Litmus / Browser Testing

Browser compatibility testing still remains a scourge on the workflow of a modern developer but it really doesn’t need to be. Get them, or yourself, a subscription to the Litmus service and forget about having gazillion browser windows and versions open to test things out.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Magazine

People have been harking on about the death of the print medium for years now but they’ve still been chugging on. I don’t have a specific recommendation since these tend to be intensely personal so take your pick. As opposed to gaming and tech magazines, I think people like me would appreciate something related to business, travel, lifestyle, or let’s go crazy for a second here, fashion.

Nettuts+ Holiday 2011 Gift Guide

Evernote

Evernote is awesome. There, I said it. It basically focuses on getting all your mental threads together and then syncs it all across any of your devices. If it sounds simple and you let yourself believe that, smack yourselves on the head — it’s much more complicated than that.

Evernote goes above and beyond the call and provides a ton of nifty features including extracting data from images. While the free version is more than serviceable, the premium version ships with just a few more enticing features.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Tuts+ Premium

Not to toot our own horn but our Tuts+ premium program offers one of the best ways to learn new technologies and skill sets or hone existing ones. In addition to a massive 700+ exclusive tutorial roster, you also get access to nearly 30 top selling ebooks. At $180 for an entire year of learning, you can’t do better than this!

Get it here

Nettuts+ Holiday 2011 Gift Guide

Sublime Text

And finally, don’t forget a good text editor or an IDE. They are the heart and soul of a developer’s workflow and an informed gift here will definitely elevate you in a developer’s eyes.

A lot of people will go with the Coda/Textmate hoopla but, for a change, try SublimeText. It’s cross platform, feature laden, stable and cheap for a software of such stature.

Get it here


Gadgets

The Venn diagram of web developers and tech enthusiasts is primarily largely intersecting. Be it the new all mighty smartphone or an innocuous desk toy, gadgets make for excellent gifts.


Nettuts+ Holiday 2011 Gift Guide

Tablets

Tablets have been the all the rage recently and I can certainly see why: they make for excellent consumption devices. Checking your all important work email or catching up on your silly kitten videos? Do it from the comfort of your couch and through an intuitive interface. Couple this with the abundance of games and other apps and you have a bonafide winner on your hands.

Which tablet to get is an argument in itself. The iPad’s software lineup is a definite advantage but don’t discount its Android brethren either. The Transformer Prime looks incredible.

Get it here

Nettuts+ Holiday 2011 Gift Guide

E-reader

Or if you’re feeling a little bit old school, get them an e-reader. These feature e-ink technology, making reading a lot less strenuous on your eyes [as opposed to gazing at an incandescent light bulb that is a tablet's screen] and provide an experience that’s as close to a real book as possible whilst providing superior battery life.

I personally like the Kindle but there are tons of options available in this segment.

Get it here

Nettuts+ Holiday 2011 Gift Guide

USB Coffee Warmer

It’s a well known fact that web developers account for roughly 97% of the world’s caffeine intake. And a vast majority of that is ingested in front of a monitor whilst mulling over some arcane piece of code that just refuses to work. Get him, or her, this magical coffee warmer that conveniently works over USB and win over their goodwill for the rest of your natural life.

Get it here

Nettuts+ Holiday 2011 Gift Guide

IronKey USB Drive

You can never really be too secure — specially in this digital age. Data gets swiped, accounts get hacked and passwords get broken on a daily basis.

The IronKey USB drive provides you with a plethora of features including military grade encryption, hardware level authentication, anti-keystroke logger amongst a ton of others. It’s a little pricey compared to your run of the mill USB drive but the features definitely make it worth it.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Universal Remote

The sheer number of remotes in a modern home is staggering. You need to have one for your television, receiver, speaker, settop box, DVD/BluRay and a lot more whamathingies. Not fun at all.

While universal remotes have been around for a while now, the recent ones have really started kicking it up a notch. The Logitech Harmony series deserves a special mention since they feature great build quality, support a staggering number of devices and are quite easy to set up. There are also touch screen versions if you’re into that sort of thing.

Get it here

Nettuts+ Holiday 2011 Gift Guide

MiFi

Your mobile phone probably has access to a decently quick internet connection but you’ll mostly be limited to tethering it to your laptop or, worse, no tethering support at all. What happens if you’re a technophile and travel with a tablet and maybe a handheld gaming device that you’d like to get online?

The MiFi range of devices are custom made for these specific scenarios. These connect to your carrier and provide internet access to the devices of your choice. It only supports upto 5 devices but hey, that should cover 99% of y’all.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Nerdy Desk Toys

I’m sure you can’t count the sheer number of times you’ve given up on a piece of code and sat staring at a random dent on my desk wondering where it all went wrong. Let’s get this out of the way: I can’t fix your code for you and I really can’t fix the dent on your desk. However, completely unbiased, unquestionable studies from the toy making companies state that staring at a worthwhile nerdy toy on your desk should get your creative and analytical juices flowing.

I’m pretty partial to physics based items but you can find a ton more options at the link below.

Get it here


Hardware

Moving away from gadgets and toys, here are additions to your workstation and your workplace that are worth considering. Often overlooked, these are very obvious additions that can directly improve how you work.


Nettuts+ Holiday 2011 Gift Guide

A Second [or Third] Display

Yes, it’s that simple — get them, or yourself, another display. It doesn’t matter whether it’s a 15″ TN panel or a 30″ IPS panel. A second monitor can vastly improve one’s workflow, and thus, productivity since there is no need to juggle around windows. Just keep your debugging window on the other display and you can be on your way. Having a video run on the other display is fun too!

Get it here

Nettuts+ Holiday 2011 Gift Guide

An Ergonomic Chair

Developers, like most people with white collar jobs, tend to sit for a large portion of their working day. Discounting the issues caused by being static for such long stretches, a major issue is how one tends to pick up lumbar issues quite quickly.

Ensure their safety by buying them a lumbar supportive, height adjustable, comfortable chair. I’m partial to Aaron chairs but there are plenty of options out there.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Input Peripherals

The input peripherals are how you to interact with your workstation and there is no need to be flimsy here. Be it a spiffy tactile keyboard or a touch gizmo to replace your mouse, just make sure it’s ergonomic. As someone who used to have carpal tunnel issues in the past, I can assure you it’s not fun.

I like keyboard with low travel and illumination so I’m pretty partial towards the Logitech Illuminated keyboard.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Earbuds or Headphones

I’m one of those people who tends to have music running constantly. Probably not the heart pounding, whumpa-whumpa sounding things that young people tend to listen to though. Ahh, I digress.

A good quality headset is critical to your sanity as a developer. Not to mention coexisting with the people around you. Tried working when someone blares ‘Friday’ around you?

I prefer a proper circumaural pair since it tends to be the most comfortable for me, big head and all.

Get it here

Nettuts+ Holiday 2011 Gift Guide

MOAR Storage

You can’t have enough storage space — it’s a fact of life. Chalk it upto cameras that record in much higher resolutions or faster internet speeds, or aliens, the fact remains that we’re constantly filling up our hard drives.

Cloud solutions are nice but not always optimal. In these cases, get yourself a big hunk of storage that’s network attached and call it a day. I’ve used a Drobo in the past and it’s fairly good at what it does. It’s a little on the expensive side though. Or if you do have a higher budget, get them a nice, fast SSD and watch everything load up quickly.

Get it here


Assorted Fun

If you’re looking for something generic, but fun, this is the place to be!


Nettuts+ Holiday 2011 Gift Guide

Skyrim

Yes, Skyrim. There’s a very good chance this gift will make the giftee lose his job, relationship and house but goshdarnit, he’ll be a Dovahkiin!

If that’s not an option, this year had an incredible amount of AAA releases — Assassin’s Creed: Revelations, Arkham City, Battlefield 3, Deus Ex: Human Revolution, Witcher 2, Portal 2, Modern Warfare 3. Phew. Take your pick and gift away.

And promise to throat punch any whiners on online services and you’ll have their eternal gratitude.

Get it here

Nettuts+ Holiday 2011 Gift Guide

Books

Books make for excellent gifts. They’re fairly cheap, don’t require power, can carry it around at will and you won’t get hassled during a flight.

Choosing which book to get is an incredibly intimate thing though. The best seller list at Amazon is a great place to start but don’t let it constrain you — there are tons of incredible books out there. If you’re fresh out of ideas, may I suggest the recent Steve Jobs biography? Whether you love or hate him, there’s enough material in there for you.

Get it here

Nettuts+ Holiday 2011 Gift Guide

30 Rock

Shows pop up all the time and it comes down to personal preference. That being said, if you can watch this video and not be interested in this show, I’m going to silently weep for humanity and start plotting something fierce.

Or if you’re looking for something a bit more serious, the debut season of Game of Thrones is incredibly well made and deserves a look. Be warned though — it’s made for an adult audience.

Get the first season here

Nettuts+ Holiday 2011 Gift Guide

T- Shirts

Tees makes for low profile, high humor gifts. Just choose something that the receiver will appreciate and you should be golden. Extra points if the tee’s contents contains subtle puns or jargon that no one else can understand. There are lots of places to get such clothing — I’ve linked a few of my recommendations below.

Get it here


Work Related Books

…. or you could take the easy way out and present them with one of the books below. Yes, they’ll be glad that you bought them something that would truly enrich their lives but the next time the developer in your life is late to a movie or dinner, you’ll know you have yourself to blame!


Professional JavaScript for Web Developers

Professional JavaScript for Web Developers

Author: Nicholas Zakas

“Starting at the beginning, the book explores how JavaScript originated and evolved into what it is today. A detailed discussion of the components that make up a JavaScript implementation follows, with specific focus on standards such as ECMAScript and the Document Object Model (DOM).”


JavaScript - The Good Parts

JavaScript – The Good Parts

Author: Douglas Crockford

“Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined. This authoritative book scrapes away these bad features to reveal a subset of JavaScript that’s more reliable, readable, and maintainable than the language as a whole-a subset you can use to create truly extensible and efficient code.”


Nettuts image

Pro JavaScript Techniques

Author: John Resig

“This book addresses all the points above in detail – modern browser support (including information on Internet Explorer 7), Object-Oriented JavaScript, testing and debugging, Unobtrusive JavaScript techniques using DOM Scripting, Ajax, creating and using blocks of reusable code, and looking towards the future of JavaScript.”


Nettuts image

jQuery Enlightenment

Author: Cody Lindley

“jQuery Enlightenment was written to express, in short-order, the concepts essential to intermediate and advanced jQuery development. Its purpose is to instill in you, the reader, practices that jQuery developers take as common knowledge. Each chapter contains concepts essential to becoming a seasoned jQuery developer.”


Nettuts image

Introducing HTML5

Author: Bruce Lawson

“Written by developers who have been using the new language for the past year in their work, this book shows you how to start adapting the language now to realize its benefits on today’s browsers. Rather than being just an academic investigation, it concentrates on the practical—the problems HTML5 can solve for you right away.”


Nettuts image

Professional WordPress Plugin Development

Author: Brad Williams, Justin Tadlock, Ozh Richard

“As one of the most popular open source content management systems available today, WordPress boasts a framework that allows you to easily customize and extend it through plugins. This comprehensive book shows you how plugins work, reviews the tools and APIs available in WordPress, and demonstrates how to extend the functionality of WordPress with plugins.”


Wrapping Up

I’m sure I’m missing a ridiculous number of gifts here so holler over at the comments section below. Or if you’ve already bought a gift for the developer in your life, let us know what you bought. Thanks for stopping by!


November 10 2011

10:00

Everything You Need To Know About DNS

DNS. Three letters that can make or break your website. A fault with DNS and your website can go down for 24 to 48 hours. What is DNS? From where does this 48 hour delay come from in the age of super fast Internet and high-speed technology? Why hasn’t the ever evolving technology replaced the age-old DNS and the frightening 48 hours delay? This discussion will shed some light on most of the queries about DNS. I hope that you will see DNS from a completely different perspective after this writeup.

What is DNS?

That is the customary question that we got to answer when we are discussing something as vast as DNS. Basically, DNS (Domain Name System) is responsible for translating human friendly website URLs like www.1stwebdesigner.com to computer readable IP addresses like 148.68.30.27 (just an example). You know, our mind cannot remember combination of such digits so we devised a system which helps convert these IP addresses to English names and vice versa.

Please understand that DNS isn’t a localized system where all the IP addresses corresponding to every website present on this planet is stored. If that was the case then an unimaginable amount of care would be required to keep such a huge database working. Also, having a localized DNS would be against the distributed character of the Internet.

Rather, DNS is a distributed service which is actually a collective group of name servers (which we call as “nameserver” in Internet lingo). These nameservers constantly refer to each other in order to stay updated with the changes that are rolled out every now and then. The process sounds simple but it is quite complex.

So, every website has a nameserver?

Well, technically speaking, yes! Though it’s a different case that one nameserver will be used for multiple websites. Otherwise, we would end up having 100 million nameservers for 100 million domains – which makes no sense. Like, I host a domain of mine on DreamHost.com. So, they give me nameservers like ns1.dreamhost.com, ns2.dreamhost.com and ns3.dreamhost.com. Now, DreamHost is giving these nameservers to almost every client that they have. So, these three nameservers basically have almost all the IP address to URL details of every DreamHost client.

A basic flow of request on the Internet

When you type Google.com in your browser then a lot of stuff happens behind the scenes before you get to see the Google homepage. The image below tries to explain the flow of request.

Let me try to make it bit more clearer:

  • When you visit a website URL via your browser then Windows will look for the corresponding IP address stored in the nameservers of your ISP.
  • If the IP address is found then the request is directly sent to that IP address henceforth reducing the execution time.
  • If the IP address is not found locally then the request is sent to the cloud of Internet and your browser waits for the virtual world to do its job.
  • Every website has a nameserver associated with itself. Henceforth, that particular nameserver receives that request and sends it to the respective IP address.
  • If that nameserver does not have the IP address details then it communicates with other nameservers and they with others. The request flows in the Internet till correct IP details are attained.
  • Once the IP address is known then the request is sent to the particular IP address and data is served.

What is “48 hours delay”?

Usually, when you are about to change the nameservers for your domain or when you are hosting a fresh domain then your hosting company will tell you that it might take up to 48 hours for the information to be updated. Technically speaking, they are correct. It might take up to 48 hours for all nameservers on this planet to connect with every other nameserver and keep themselves in sync. You see, it’s a huge virtual world out there. But, my personal experience says that it usually takes less than 24 hours for the global update to complete. Still, you should consider the 48 hour delay in your time plan before you make any changes.

The below image via Wikipedia will give you an idea of hierarchical DNS, organized into zones, each served by a nameserver.


How and when does caching occur?

Nice question. You got the information for Google.com request that you had sent some time back. Now, that information is saved in the local ISP’s nameservers so that next time your request isn’t sent to third-party nameservers. But, after a stipulated time period these nameservers contact other nameservers so that their information isn’t outdated. This is where the term TTL comes into play.

What is TTL?

TTL (or Time To Live) is the time period that comes in along with the IP address info. This time period information is sent by the third-party nameserver along with the IP address. The value is usually in seconds and it is more like a suggestion from the third-party nameserver that you can stay away from me for X seconds and still stay updated. Come back after X seconds and I will pass on the latest information.

Usually the TTL value is 12 hours or 24 hours. This can be set to a custom number as and when required to reduce traffic.

Other types of DNS lookups

Once DNS started to serve the IP address lookup (as discussed above), then it was time to expand. DNS was later on used for other type of lookups, two of which we will discuss below:

  • A Record – A Record lookup is something that we have already discussed. The IP address lookup is actually the A Record lookup for DNS.
  • MX Record – MX (which is acronym for “mail exchanger”) is used for email address lookups. Usually when a tool tries to send an email to mail box related to your domain then it will look for MX record of your domain. This MX record will have another domain (something like mail.yourdomain.com) as its value. Now the A Record for this MX record will be checked to get the target IP address.
  • CNAME Record – CNAME (stands for Canonical Name Record) is actually an alias for another domain name. This comes in handy when you want to use your own domain and data from another website. Like, during the ancient Internet Age (when blogspot.com was luxury), blogspot.com had a feature (they still have it) where you can use your own domain (yourdomain.com) instead of using the bogspot’s sub-domain for your blogspot hosted blog. In this case all that Google would do was ask you to change the CNAME of yourdomain.com to your blogspot’s sub-domain and the job is done. Whenever one would visit yourdomain.com then the data from your blogspot’s sub-domain will be delivered although the sub-domain won’t be visible in address bar.

Other usage of DNS

Other then the three lookups that I discussed above, DNS can be used for many other functions like:

  • As I discussed before, domain names and nameservers do not have a one-to-one matching. This gives the hosting companies the chance for shared hosting and save a lot on money invested. Here, multiple domains can result into one IP address. This means one machine can host many websites. Additionally, one domain can point to multiple IP addresses. This helps in redundancy and high availability.
  • The DNS system can be used to save and share IP addresses of blacklisted email hosts. Such databases are available for free in order to fight spam.
  • These days software makers save the version of a software in the DNS database. This way the client machine connects to find out the latest version of the software available. It connects to the software maker’s server only if a new version is available. This helps in reducing the requests that client machines get.

August 19 2011

10:00

The Complete Guide to E-mail Marketing: You won’t believe what you will learn

Think of the number of times that you have submitted your e-mail address somewhere. It seems that whenever you visit some website you will most likely leave your e-mail address there: they ask you, they force you, they trick you – they will do anything to get this tiny piece of information.  “The money is in the list” – that’s what marketers say.

Now I should probably start rambling about all the benefits of having a huge e-mail list to give you the necessary incentive to read this guide from start to finish. But I’d rather amaze you with this awesome infographic that we made for this post:


This pretty “litte” infographic is nothing else but the visual recap of what you’re about to read. If you’ve fallen in love with it from the first sight you can easily save the full version available under “click for full size” button. Ok. Enough about the infographic, let’s get to the actual post:


Your e-mail marketing campaign starts from getting people to opt-in to your e-mail list. Even if you are able to convert 10% of your visitors into sales (which is nonsense), 90% are leaving your site without a trace! That’s a huge opportunity being lost here! You have to get their e-mail and try to sell your product to them a bit later!

There is an infinite number of ways to have people tell you their e-mail addresses, however all of them seem to fall into 3 different categories: ask, force and trick.

News – visiting your website over and over for new updates might not be so handy, especially when you post them infrequently. Ask people to leave their e-mails to send the news directly to their inboxes and you’ll be amazed by the number of subscribers.

Discounts & Promotions – wouldn’t you like to receive a text message every time your favourite clothing store announces a 50% off sale? So are your visitors – offer them “e-mail only” discounts and watch your list grow.

Freebies – did you ever submit your e-mail address to receive a link to download a free e-book? I bet most of you will say “Yes”. This is where you’re giving out your e-mail to get some value in return. If you have some piece of unique content (e-book, e-mail course, infographic, spreadsheet, cheatsheet, product guide, shopping guide, video, audio, podcast) – create an opt-in form, where people have to leave their e-mail addresses to receive that content.

Report – yes, it may also be considered as a freebie, but I felt like I should make a separate point out of it. Industry reports, which can really help people in their jobs/businesses are a holy grail which people are always looking for. I personally receive about a dozen different reports, and they are extremely helpful! Reports tend to have the biggest open rates, as people are actually looking forward to receiving them. The downside is that you need to work hard to keep the quality level of your reports as high as possible.


Do you happen to sell a product with a high learning curve? You’re lucky, as you can offer your customers a “tips & tricks” campaign right on the “Thank you for the purchase” page. Once they opt-in, you’ll be able to sell them accessories or related products with just a couple autoresponder e-mails being set up.

E-mail Course – is another widely spread tactic, worth a separate mention. An e-mail course is basically an auto-responder which consists of a certain number of e-mails. All you have to do is write the actual course about a specific topic, split it into several e-mails and setup the auto-responder to send an e-mail once in a while. A catchy course title and prominent placement of a subscription form will do the rest.

Squeeze pages – a simple “free newsletter” box in your sidebar may not work very well, instead you can pitch your subscription using one of those long sales letters. Then, once in a while, as you write a blog post, you can mention your newsletter and give a link to your squeeze page, which will do the job of convincing people to opt-in.


E-mail list brokers will most likely pitch you that the ROI from purchasing (or even rental) of some third-party e-mail list will cover all your expenses, but in most cases that is not true. Just like the search traffic is your most targeted and high converting of all, your own e-mail list will work much better than any rental one. Put your money and efforts into your own list, rather than purchasing if from third parties.

Existing contacts – you might already have a large contact list of your friends/colleagues/customers, you might as well collect contact information from your payment receipts. Well, adding everyone to your newsletter may get you into big trouble, as people might simply mark you as SPAM. What you CAN do, is e-mail them a link to your squeeze page and have them voluntarily opt-in to receive your newsletters in the future.

Expiration – once you have posted some free content, you may hide it behind an log-in form after some time. This way a returning visitor, who has watched your video, read your report or used your free tool will be forced to register and leave his e-mail to get access to this content again.

Members only – there might be a “members only” area on your website, which should be really attractive and be enough incentive that people leave their e-mails to get access to it.

Contests/Sweepstakes – you may list your newsletter subscription as an obligatory condition to enter, but note that this can somewhat decrease the number of participants.

Registration – speaking about the laziness, when was the last time you clicked the privacy policy link, which is given once you register somewhere? In most cases, you agree to receiving the newsletter of that company :)

Commenters – you can easily turn your commenters into subscribers by adding a checkbox to a comment form, which is checked by default. Again people are too lazy to be attentive, that’s why they will just leave a comment and opt-in.

Testimonials/Reviews/UGC – the trick is exactly the same as with comments, but this time you’re asking for a testimonial or some sort of review or feedback and put that tiny newsletter checkbox, which lots of people will overlook; (just in case – UGC stands for User Generated Content)


Once you have some people on your list, why not to use them to grow your list even more?
Add social buttons and endorse people to share the information with their friends. You’ll have to create a web-based version of your e-mail, so that once a person clicks the twitter icon in his e-mail, his friends will land on it’s web-based version, which can be equipped with a subscription box. According to MailChimp survey over 70% of people forward/share commercial e-mails less than once or month or never, but still a 30% chance is worth it!

Surveys/Quizzes – I bet many of you got really pissed off by a request to leave an e-mail in order to get a result of a 50-question-long quiz that you just thoroughly passed from start to finish. Well, “you just got punk’d” – either leave your e-mail, or you will never know the result and half an hour of your life will be lost :)

Polls/Tools – once you participate in a poll, the system may offer you to e-mail the final results once it ends, so that you can use them for future reference. Alternatively you can create a tool, like a price calculator, and add an option to e-mail the results to a customers inbox, so that he had an access to this information once he needs it.


Now you know the most common ways to get people to opt-in to your newsletter and the second logical part would be to actually implement them on your website. Ever heard of CRO (Conversion Rate Optimization)? This is basically a number of techniques to have your website visitors do what you want them to do. Newsletter signup forms are yet another object for CRO best practices, which mainly rely on location, size and color.

Lightbox – yes, that’s extremely irritating when the website you visit gets greyed out and some message appears above the fold. Yet studies show that this thing gathers e-mails like crazy! And besides, there are some cool plugins, that allow you to control whether to show the lightbox right away, or wait till a person visits two or three pages of your website (and lots of other things can be configured actually).

Sidebar – the most common place to put your newsletter subscription forms. This way they will be highly visible and won’t irritate anyone. What’s more important, is that you can actually have a number of different opt-ins in your sidebar: one for blog subscription, one for e-book download, one for a poll, etc.

Don’t forget to enhance your newsletter subscription box with the so-called risk removals as: “no spam” & “not selling to third parties”.

After the content – once a person reads your piece of content till the very end, you can tell that he is very interested in your resource, so why not to offer them to sign up? I really like the way Neil Patel from QuickSprout does it:

The e-mail opt-in process is usually full of the so-called “gate” pages that have close to no value – “thank you for registration” page, “please confirm your e-mail” page, etc. Try to put some call to action with a hot offer to those pages and see what the results will be.

Bottom – I’ve seen some websites having a newsletter subscription box sticking to the bottom of the browser window. If you ask me – that’s irritating. I wanted to show a screenshot of that practice, but it appears that those websites are no longer using it. But you can still try and see if it works for you.

Feedburner actually allows you to get a hold of your subscribers’ e-mail addresses, so if all the above methods are too time-consuming for you, use the Feedburner plugins to grow your e-mail list.

As a part of your signup box design, try using “Mad Libs” style for a chance of 25-40% conversion increase.


“I have the list, now what?” – that’s a fair question. Getting people to opt-in is actually not as hard as it may seem (especially following the above tips). The hard part is getting some value/revenue out of your list. The strategy (as well as the purpose) of your e-mail marketing campaign is mostly being determined by your business/niche, but here are some core things to do with your e-mail list:

Traffic – an e-mail to 10.000 people will obviously grant you an instant blast of a couple thousand visitors. Whatever you need this traffic for – you have it.

Cross Promotion – I did say that using a third-party list is way less effective as opposed to using your own one. However if you have a partner in your niche with a large e-mail list, and you know that his clients might be potentially interested in what you have to offer, you can ask him to mention you in his next e-mail newsletter. What you can do in return is mention him in yours. This practice is a sort of a cross promotion and it may give some really good results.

Relationship – being helpful and informative is a great way of building trust in your company/brand. Useful advice, product tips, industry reports – those are the things people are always looking for and you will surely get some credit for sharing those things.

Lots of people like to use their e-mail box as an archive: all the important e-mails are being carefully archived, so that they can refer to them later. Your e-mails should be the ones people would want to store – use a lot of data, citations, references, useful information and people will come back to your e-mails over and over.

Lead Nurturing – once you have a person’s e-mail address, there’s one more chance to convince them to buy your product/service. Don’t send the gibberish sales stuff that everyone is already sick of – be wise and nurture your future customers carefully. People love exclusivity, make them feel like they are in a special club and you’ll make that sale!


Studies show that 70% of people will read the whole e-mail or most of it. 

Sales – once you announce a new product, you can easily spread awareness and probably even get some instant sales. Other than that, you can include a discount code in your e-mail, which will be another incentive for people on your list to make a purchase.

Pro bloggers often stuff their newsletters with affiliate links to refer people and get some money once they make a purchase. When you mention some product/service in your newsletter, maybe you should check if it has an affiliate program?

Support – There is a post of “The Dirty Dozen” Marketing Processes that every internet start-up must master. And seems like about a half of those processes require you to send an e-mail to your customer.


Most of the numbers and graphics that I am about to use were taken from a free webinar by my favourite social media scientist Dan Zarella who was granted a dataset of 9,5 BILLION e-mail sends within MailChimp.

I will mention and comment on only a few of his findings and I strongly insist that you go and spend an hour watching this webinar from start to finish.

Timing – surprisingly, the highest possible Click Through Rate occurs on weekends. This is explained by the fact that on weekends people are not overloaded by incoming e-mails as well as have some free time to explore what’s there.

Frequency – The best frequency to get a higher Click Through Rate is the lowest one. However the graph shows that it won’t hurt to send an extra e-mail. And besides, you’ll get a lot more clicks from two e-mails with a slightly low CTR than from a one with a bigger CTR (simple math here).

Number of links – the more links you put in your e-mail, the higher CTR you get. Don’t be afraid to duplicate your links in the e-mail, present them in different type/context. It’s actually a good practice to list all your links with short comments at the very end of your e-mail.

Subscriber recency – your recent subscribers are likely to leave you real soon, and unfortunately that’s inevitable. Don’t panic when you see your numbers drop within the first few days after the campaign was launched, it’s totally ok.


Most of them will leave you anyway and there’s nothing much that you can do about it. Though what you CAN do is make it easy to unsubscribe. Why? Because reports show that people who cannot find the “unsubscribe” button, or find the process too hard and complicated will simply click the Spam button, which will dramatically affect your reputation across the e-mail network. Just make it easy to unsubscribe.

Reasons – we have previously discussed that an extra e-mail will not decrease your Click Through Rate that much, but still you should be careful with sending too many e-mails to your subscribers, and here’s why:

Analyzing the graph above, you might come up with a logical solution to save a decent percentage of your subscribers. Instead of just providing two options (a) receive e-mails and (b) not receive e-mails, you can actually offer them to change the frequency of the newsletter, for that is the #1 factor that bothers them. Perhaps an e-mail once a month rather than a weekly e-mail will save you a subscriber.


This e-mail marketing guide is already quite big, but there are still hundreds of things that you need to learn in order to become a successful e-mail marketer. Test, Measure & Optimize – those are the core things that take about a half of your e-mail marketing efforts:

Don’t SPAMhere is the document I strongly recommend you to read before you ruin your very first e-mail marketing campaign. (And here’s another one for “black hat” e-mail marketers :) )

Optimize for mobile – welcome to the mobile era! Studies show that 81% of people read their e-mails on mobile devices. And here’s what you want to do:

  • avoid large images (67% of people do not “automatically download images”);
  • avoid tables/columns (or ensure they look nice when shrunk to an iPhone size);
  • avoid long e-mails (you don’t want mobile phone owners to burn their fingers scrolling);

Segment – lots of different people opt-in to your e-mail list. Why would you send the exact same e-mail to everyone? Here is just a couple of most commonly used segments:

  • buyers vs non-buyers – statistics show that people who have purchased your product once are much more likely to buy again than those who have not purchased anything. It’s bloody obvious that those two groups should receive quite different e-mails.
  • one-time-buyers vs repeat-buyers – though the difference between these two is not as big as above, you should apply a different approach to each of them.
  • engaged vs not – you can quite easily track which of your subscribers are not clicking your links and not opening/responding your e-mails. Create a special segment for them and try to catch their attention.
  • relevancy – you need to target your customers with communication, which is relevant to them. If you are able to get some more information about them (demographic, psychographic, behavioral patterns) – use it to create relevant segments.

Win-back – once you determine your “unresponsive” segment, you can try to reactivate it with a win-back or re-engagement campaign. This includes e-mailing them some special offers, offering to toggle the newsletter frequency, or asking if they still want to receive your e-mails at all.

A/B Testing – there’s nothing new about split testing the pages of your site, but split testing e-mails is not that widely spread. There are many parts of your e-mail message that you might consider for testing, here are some of them:

  • e-mail subject
  • sending time
  • the layout
  • body text
  • closing text
  • images

This definitely deserves a separate post, so I will only give you a taste. The well-known 80/20 rule can be applied here: 8 out of 10 people will read the subject and only 2 of 10 will read the e-mail itself. This fact makes it obvious that you should work really hard to polish your e-mail subject till it gets a decent open rate. In general, people will open your e-mail because your subject promises some information of an exceptional relevance to them or either persuades that there’s something exciting and entertaining inside. There’s an exceptional series of posts by CopyBlogger called “Magnetic Headlines” and blog post headlines and e-mail subject lines are pretty close – this should get you started.

Measure – there is a ton of metrics available for measurement, but if I were to choose one, I’d definitely pick MONEY. That is the only metric that shows the success of your marketing efforts – whether it’s e-mail marketing, search engine marketing or social media marketing. Configure your analytics to track how much money you get and optimize your campaign solely around this metric.

Tools – most of the tips that I have mentioned in this guide may seem like a nightmare to implement. However with such great online e-mail marketing tools as MailChimp, Aweber, iContact, and others you can actually do anything with just a few clicks of a mouse.

Reputation – these days SPAM filter gets social. Passing the good ol’ SPAM filter of a Gmail user is now only the half of the job. Since the time Google released it’s Priority Inbox feature, you need to actually get your e-mail marked as “Priority” to get noticed.
Other than that many e-mail providers are now considering all the positive and negative interactions to decide whether to mark your e-mails as SPAM or not. People who rarely open your messages, never reply to them, never click the links inside can bring your reputation down. That is why those win-back campaigns are so important. You either re-engage your subscribers or remove them from the list to avoid trouble.


Just like my other guides this one is only an “intro” to the world of e-mail marketing as there’s so much left to learn. I really hope that my job on this guide will be a perfect starting point for you.

Is it possible to grow a blog from nothing to 100,000 monthly visits in only 6 months? That is what I’m going to find out at Blogger JET – an experiment that I’ve just launched, and which is already having some success. Whether you’re new to all things blogging and internet marketing, or you’re an experienced blogger – I’m sure you’ll find some valuable tips inside as I’m sharing all of the steps I take as well as the results it brings me! Here’s one of the latest posts: “How I Got 37 Tweets On My Very First Blogpost: Unveiling a Secret Tool.

PS: Speaking of my other guides you might want to check the “Facebook Marketing: Ultimate Guide” published at SEOmoz (Top Post of 2010 by Thumbs-Up, Traffic and ReTweets) and my recent fancy “Twitter Marketing Guide: Bigger, Longer & Uncut” published here at 1WD.

PPS: I want to say thanks to @playgrey for his work on styling this post to make it look sexy :)

May 19 2011

10:00

Three Types of Friends Everybody Should Have: Mentor, Peer, and Protegé

Every writer, blogger, designer, developer, singer, actor, at some point started out confused in their chosen career. Not knowing where to go, what to do, and how to react to the things that happen. Look at where you are now: successful, or still working to become successful, but surely you owe what you are now to someone who went out of their way to teach you the basics and guide you whenever you needed a little bit of help.

As a break from the usual articles that give tips, resources, tutorials, and whatnot, why don’t we spend some time together and think of the three types of friends that helped (and are still helping) us through our chosen careers? I am certain that all of us have these people, at least two of them for now. So, are you ready?

Mentor

Mentor_

Everybody should have a mentor in life, not only in your trade. Someone who will share their wisdom when times are hard, someone who will teach you patience and things that you can never hope to understand alone. A mentor is someone who inspires you, someone whom you can hang out with anytime you need him/her. This can be your father, mother, godfather, boss, senior, you get the idea. Having a mentor is the best way to have your actions and thoughts kept in check.

Doing business online with people requires skills, and beginners need someone who will serve as a guide. The person whom I consider my mentor told me to pursue the things that makes me happy, as a result I’ve gained some pounds because I sit in front of my computer all day, typing and reading.

Everybody has one, it may be your middle school teacher, your college professor, or someone you met online. At one point in time you will certainly feel down, maybe because of a client who rejected all of the designs you presented, an article you submitted to a website got sent to the trash, the website you developed crashed, or even as simple as a hater’s comment on your blog post. This is when you need someone to turn to for advice, someone who has been there and survived the crash. Believe me, this is very important. As for me, I am not a great writer but I love writing. One time I was told that my writing is terrible, that I had no future in writing. Writing being one of the few things I genuinely love to do, the comment crushed my heart and I almost stopped. Good thing is I have someone who told me to “stop for a while and don’t start breaking the plates.”

Peer

Peer

Someone you consider your equal and who treats you as theirs. A fellow novice or master in your chosen craft. This is why forums and other support groups exist,so people that are on the same wavelength talk about the things they can’t tell others because, probably, others won’t understand. Having a friend who you consider to be of equal caliber is a great thing. You can spend all day talking about the last client you had, rant about the things that irk you, or even insult each other. This is actually healthy, because having a friend who is close to your age and skill (or slightly above you) is what will keep you evolving. Is it not obvious why self-obsessed people rarely make it to the top? It’s because they do not consider anyone to be above or equal to them, making things a little static.

I am a beginner when it comes to blogging, and I look up to my pals here at 1stwebdesigner. Most of the time, when I’m not procrastinating, I’m doing my best to learn from them and competing with them in a healthy way. That’s what keeps me going, someone whom I can run side by side with and talk about work and casual things. It’s not that hard, talking about private life too, since we’re almost of the same age. That is something you can’t remove in any age group, most people will always feel at ease when someone they work with is of the same age.

I’m pretty sure that everyone has friends either known personally or in the internet.

Protegé

Protege

Nothing beats having a younger friend to teach the important things in life and career to, someone you can guide along the path he/she really wants to take. Because you have been there once, you can easily guide someone who is about to follow a similar path. Plus young people have lots of wild ideas that may help you.

I am still far from this, but I am hoping that when the time comes I’ll take someone and teach him/her everything I know, be a mentor to a kid who’s just setting out.

For established writers, designers, developers, and others, I’m hoping that you have one or two beginners that you are teaching. Although I’m still far from being a mentor, I am sure that I will want to leave something behind with someone.

You’ve been there, you know what to do, make it easy (or hard) for them to do it. It is true that future generations are, most of the time, better than the previous. This is because the previous generation has taught things, things that should have been done and the should nots. Like leaving behind a living testament to what you were. It may seem grim to think that someday you’ll be gone, but isn’t it heartwarming to think that you’ve helped someone achieve their dreams even if you’ve already retired? But I’m not saying that you should take someone under your wing when you’ve retired already, you can start now, actually. So, who’d want to take me? I don’t bite.

For some this may be obvious, to others it might not, but you wouldn’t be where you are now if no one helped you somewhere along the way.

So, what is your story?

April 21 2011

10:00

March 30 2011

10:00

Twitter Marketing Guide: Bigger, Longer & Uncut

Let’s presume you’re already familiar with the basics of Twitter and your current goal is to grow your follower count. Want to learn advanced techniques?

Twitter Marketing Guide

Written by: Tim Soulo

Bigger Longer & Uncut.

Hi, my name is Tim and I’m pretty sure that you’ve landed here right from your Twitter account. Ok, you got me this time as the above claim does not apply to everyone, but I’m confident that this post is currently hot on Twitter! How do I know that while writing the very first paragraph? C’mon, it’s gonna
be a Twitter Guide – I’ll just use the tips below to make it go viral :)

Twitter Basics Part 1: Creating a Twitter Account (The Right Way)

Let’s presume you’re already familiar with
the basics of Twitter and your current goal is to grow your
follower count. Moreover you need those
dedicated followers that read your
tweets and, what’s more important,
retweet them to their own followers
making your content spread.
Just in case you’re not sure what I mean by basics, here’s a quick refresher.
 
Username: The very first dilemma that most business owners face while creating a Twitter account is whether to use a personal name or a business name. There are pros and cons with both, but I think that having brand name is mostly beneficial for big established brands as people already know them and are willing to follow.
Recently I did some consulting for a website builder company and offered them to switch from a branded account to a personal account of their founder and CEO, as people are most likely to follow an interesting person, who they expect to tweet valuable things, rather than following a ‘website builder’, which they assume will most likely tweet nothing but spam.
Your Twitter username should be unique and memorable. Remember that people will have to type it in order to mention you – don’t make them type too much.
 
Here’s an extra tip from Hubspot:
(though this does not seem to apply to @1stwebdesigner lol)
Bio: There are only 160 characters which you have to fill in to tell the Twitterverse about you, your company and/or what you’ll be tweeting about. Your Bio is used all around Twitter next to your profile picture and people READ the Bio section to decide whether to follow you or not. Anyone you follow will receive an e-mail with a recap of your profile including your Bio. Do you think they’ll be interested enough to follow you back?
My Bio is probably not the best, but I tried to make it stand out from the crowd. Best Bio practice is to briefly state who you are and what others will get if they follow you.
I often ask myself two questions before following someone:
  1. Who is that person?
  2. How can they be useful to me?
Some people go really far with this incentive tip and use their Bio to suggest a Free E-Book to each new follower, but this sounds kind of desperate to me.
 
Image: People on Twitter mostly use a personal photo as their avatar. I think this is because Twitter is a powerful personal branding tool and you might want your followers to recognize you.
 
My vote goes for consistency – if there’s a non-photo avatar that you use around the web (forums, comments, guest posts), I think you should use it on Twitter too so that people who have seen your avatar around the web recognize you.
Web Link: Why would you miss an opportunity to promote your website in your Twitter profile? And, besides, here’s what Hubspot says about the impact of the web link on your follower count:
Background: You can easily create a customized Twitter background, but is it worth your time and efforts? First of all your Twitter account will become more attractive – but that’s pretty obvious, right? What’s not that obvious is that with a well designed background you have a chance of appearing in one of those numerous Twitter background showcases. Thousands of people will see your creative profileand they might become your new followers.

Twitter Basics Part 2: Following the Right People

Now, that your Twitter profile is complete and following all the best practices, it’s time to follow some people. Following the ‘right people” will not only keep you up to date with all the latest news in your niche and help you to network, but it will also affect the way Twitter uses your profile in its recommendation engine. Every time you follow someone, you are being associated with them in some way. With the automatic recommendation engine Twitter uses, I have to assume you’d prefer to be associated with people who you share something in common with. It might be the place you live, the field you work in, or a circle of mutual friends and acquaintances.
Follow the people you know: this is the number one tip. You might be reading some blogs or websites on the topic that you are interested in. Most of the authors mention their Twitter profile at the end of the post. Follow them as they might tweet lots of cool stuff.
Twitter Search: Each term you search on Twitter is now being split into four independent searches: Tweets, Tweets with links, Tweets near you and people. There’s even more than that – check this awesome guide by SEJ to become a Twitter search ninja.
Twitter lists: Twitter List is Twitter’s way of allowing users to group profiles (and their tweets) together – you can check the lists that people you follow are listed in. You can also check if you are being listed and see who you are being listed with.
 
Twitter Directories: There are places where Twitter accounts are neatly organized and categorized. To name a few: Listorious, WeFollow, JustTweetIt, TweetFind. Browse them and I’m sure you’ll find some interesting people to follow. By the way, why not add yourself there?
 
Custom lists: Bloggers always used to create lists: “10 Best Books on Marketing”, “20 Coolest Design Blogs”, “15 Social Bookmarking Sites” – you all know that sort of stuff. The new trend is top people in each industry to follow on Twitter: designers, bloggers, marketers, seo experts, social media gurus and so on. Do a couple of Google searches for those lists as they may suggest some really cool people to follow. If you can’t find a list on your niche, you should definitely create one and maybe you’ll get some new followers just for being an author of that list.
 
Online Tools: There is an enormous amount of Twitter tools to help you find and manage followers. I don’t want to promote any of them, so just try them all to see which one works best for you.
(Twitterverse by Brian Solis and JESS3)
 
Play around: As I’ve said before, Twitter has an awesome recommendation engine, so once you start playing around with Twitter you’ll get lots of recommendations. Definitely check out the powerful “Who To Follow” tool, which speaks for itself.

Advanced Twitter Tactics Part 1: Getting More Followers

I want you to check out an excellent study by Ian Lurie on the quality of Twitter followers. He started collecting data after some spammy guy who had 32,000 followers retweeted one of his posts. You might expect that a retweet by a person with such a huge following will grant your URL lots of clicks and further retweets. Well, what Ian got was only three clicks.
I won’t tell you the rest of the story, for it is too cool to be rewritten. Twitter power is not about the quantity of your followers, but about the quality of your, and your followers, content. In this part of my guide I will teach you how to gain quality followers.
 
Think: Yeah, that is my first tip. But I think it’s the most powerful one. Think of the way YOU follow new people and think how many of them eventually stay in your Twitter feed. Then do the same stuff that they did to get followed by you. If you ask me I mostly follow people who blog. When I see a smart post, I will do my best to find the author on Twitter, follow him and perhaps even communicate a bit. The second way I may follow people is when they @-mention me in their tweet. I will usually check the profile of that person and if it appeals to me – I’ll follow them.
 
Follow to get followers: This is the best known tactic to grow your follower count and it’s based on the newest psychological disorder called ISFBaG (I Should Follow Back Guilt). When you follow someone, they receive an e-mail notification and may follow you back. You can mass-follow people via Twitter interface, use some online tools or even create scripts, which will auto follow people, who tweet specific keywords.
Another study by Hubspot shows that your following to followers ratio dramatically affects your chances to get a follow back. So ideally you need to keep the number of people you follow lower than the number of your followers – this way you are more likely to get a follow back.
People might think that having a large number of followers will add credibility to their account. Well from now on they won’t be able to trick you! It’s easy to measure the credibility of a Twitter account by comparing the number of followers to the number of the lists.
 
Rand from SEOmoz has one listing per 7.6 followers ( 24,368 followers / 3,187 lists = 7.6).
If the ratio is more than 10 – that’s a signal that a person is a spammer who does a lot of mass-following.
Run a contest: People love contests, freebies – such events always attracts great attention. Classical contests go well on social networks, but if you can think of some extremely unique event, it may do wonders to your social presence. There is an interesting story, I would like to share (little NSFW) how Dutch porn star attracted a lot of people to follow her! She got around 15,000 followers within a couple of days since that claim, but you should think twice before running a contest like that. :)
Know who is sharing your content: Once you publish some content online try to track who is tweeting about it. You already know that those people appreciate your work, so it’s usually a matter of a “thank you” message to get a follow back from them.
 
Promote your Twitter account: That’s probably the most popular and most obvious advice, so I’ve left till last. Use your Twitter account URL everywhere you can: e-mail signatures, social media profiles, forum signatures, blog comments, business cards etc. There’s no rocket science here, just use every opportunity you can to share your Twitter account.

Advanced Twitter Tactics Part 2: Building Relations

It’s cool to have a couple thousand followers, but do they care about you after all? You might have followed my tips to gain quality followers, but still it does not mean that they will interact with you and help you to spread your content. What you need is to build relationships with them so that they know who you are and read your updates.
Reward your followers: You can do that with a follow back or, alternatively, you can just thank them for following you in a reply or direct message. Just don’t spam everyone with those automatic Direct Messages which no one cares about. Try sending a personalized message with some information that the recipient may be interested in.
Retweet others: People on Twitter usually keep an eye on their retweets. So try retweeting someone else’s tweet and add a personal comment to it – this is a great way to get noticed and start communicating with people that you follow, and your own followers.
 
Public mentions: #FollowFriday or #ff is a nice occasion to show your appreciation to someone by publicly mentioning their account and providing a reason for others to follow them. However there is no need to wait till Friday to do that.
 
Twitter lists: When you add someone to a Twitter list, they won’t be notified about it, but they may find it out on their own sooner or later. Make respectful Twitter list names to show some appreciation to people you list there. I am really happy each time someone adds me to a marketing related list. (this was a call-to-action :) )
By following other people’s Twitter lists you can get some attention too, as people might check who else is following their lists.
 
Twitter list Ninja Tip #1: follow @listwatcher as it will send you a DM each time someone adds, removes you from their list, or changes their list. Being listed is a reason to get in touch and say thank you, ( or something else, if you were removed :) )
Twitter list Ninja Tip #2: learn how to automate your lists with Formulists online service.
 
Follow people who @mention you: This is a great way to show your appreciation for being mentioned and, besides, this will make a person to take a closer look at your profile and what you tweet about.
 
Twitter Favourites: Currently this feature is not widely used, but I think it can be considered as a form of appreciation too. Each tweet that you add to your Twitter favourites is saved in your profile under the “Favourites” tab. I doubt that the author of a tweet will ever see that, but others might find your favourites feed useful and that can be another reason to follow you.
 
TweetChats: It’s a regularly scheduled online event which is perfect for networking. For instance you can check #seochat – this is a search marketing chat which is held every week. If you fail to find a TweetChat on your topic, maybe you should launch one yourself.

Twitter Ninja Part 1: Getting Retweets

Eventually, the aim of every single tweet is to be noticed and get retweeted by others. If you think that your tweets get enough engagement, try measuring the CTR (Click Through Rate) of every link you tweet. This can be easily done with Bit.ly URL shortening service, just add a + at the end of any short URL and you’ll see the stats. In most cases you’ll notice that the engagement not as good as expected. So what can you do to improve it? Lets see…
Tweet metrics: Almost everything can be measured, including tweets. In his great study Rand Fishkin tried to calculate and improve the CTR of his tweets. This resulted in a few takeaways:
 
  • * the average CTR of a tweet is about 1.17% of the followers number;
  • * shorter tweets get a higher CTR;
  • * tweets on a topic that people expect from you get a higher CTR.
Ask for a retweet: A study by Dan Zarrella shows that you can easily increase your ReTweetability by simply asking your followers for a retweet. Only five letters can make a change – “PLS RT”
What to tweet: You already know that tweets on topics that people expect from you get a higher CTR. In addition to that, another study by Dan Zarrella reveals the fact that tweets about Twitter perform really well. (Remember I promised this post would be HOT on Twitter? :))
 
You can also use various bookmarking and news services to discover what’s hot and trending and tweet about it: StumbleUpon, Digg, Reddit, TweetMeme.
When to tweet: There are lots of statistics on this one which show different numbers, but in general the best time to get retweets in the US is 4 PM and the best day is Friday. So try to stick to these when scheduling your most important tweets.

Twitter Ninja Part 2: Miscellaneous Tips

Leverage your website: In case you have a website or blog, why not to use it to promote your Twitter account a bit? WordPress users can check this awesome selection of Twitter plugins and the rest can get inspired by the showcase of how people embed their twitter feed into their website design.
 
Use Hashtags: This feature is used to unite Tweets around a particular topic. I understand hashtags as a search tool. Instead of searching on Tweeter for “social media marketing” you can simply do a search for #smm or just click on a hashtag whenever you see it in someone’s tweet. This will list all the tweets that have a particular hashtag in it. So every time you add a hashtag to your tweet, it increases its chances to be found by random people.
 
Track Google SERP: You can easily get a daily Direct Message of your websites Google position using a twitter bot by TweetedRanks (free tool).
 
Get your website pages indexed faster: A recent experiment concluded that a tweet which gets 3 retweets or more will help in increasing the time and rate at which the tweeted page gets indexed.
 
HootSuite Hootlet: I must confess that HootSuite is a tool that dramatically improved my tweeting experience. Specifically I am obsessed with their bookmarklet tool. You just drag it to your bookmarks and when you want to share the post on Twitter you just click the bookmarklet and the message window pops up. What’s more important, you can schedule your tweets right from this Hootlet window. This is the best Twitter tool I’ve ever used.
This is it! The end of my Twitter Marketing guide, but definitely not the end of the creative ideas and ways to use Twitter to market yourself, your content, your company or your products.
I hope you all enjoyed it and I’m looking forward to reading your comments. And don’t forget that you can follow me (@timsoulo) on Twitter.
Article written by Tim Soulo, designed by Michael Burns and coded by Ahmad Hania

March 21 2011

07:00

How to Build a Basic Portfolio WordPress Theme

If you’ve been following parts one and two of this portfolio website tutorial series you will already know how to design the concept in Photoshop and build a working demo in HTML/CSS. Now let’s take the design and convert it into a basic WordPress theme so you can easily manage and update your website through the popular WordPress application.

View the WordPress portfolio theme

The theme we’re going to create is going to be made specifically for use as a portfolio website, so many of the usual features of WordPress themes will be omitted in this guide. Our website concept isn’t a blog, so this tutorial is aimed more at using WordPress as a simple CMS. With that said, we’ll still use the ‘post’ template to showcase our portfolio items, so we’re basically manipulating the core features of WordPress to suit our needs.

View the final portfolio theme demo

WordPress template files

Because we’re using WordPress as a basic CMS, we won’t be making use of some default template files such as archive.php or comments.php. However we’ll be introducing some additional template files as custom pages.

Style.css template file

Before working on any of the actual .php template files we first need to add the entire CSS styling the style.css WordPress stylesheet in our theme folder. We then need to customise the details at the top of the file so WordPress will recognise the theme in the Appearances section of the admin dashboard.

Header.php template file

The first template to work on is header.php. Paste in the upper portion of the HTML concept, right up to where the main content div begins. We then need to go through the code and swap out specific sections with WordPress template tags, which will inject dynamic content into the theme. <?php bloginfo('stylesheet_url'); ?> will automatically link up the style.css CSS stylesheet, while <?php bloginfo('template_url'); ?> can be used to place a link to the template directory in order to link up other files.
At the bottom of the <head>, the template tag <?php wp_head(); ?> is used to allow WordPress to insert other code from plugins etc.
In the navigation menu, the series of list items are replaced with the template tag <?php wp_list_pages('title_li='); ?>, which will automatically inject a linked list item for every page published in WordPress.
Our design uses a different style of header for the homepage and the inner pages. We can replicate this in the WordPress theme using a conditional tag. is_front_page() checks if the page is being used as the homepage, if it is it uses the first portion of the code. If not, the header is given the class of ‘page’ and the <h1> is filled with the tag <?php wp_title(''); ?> to render out the title of the post or page.

Home.php template file

Usually the index.php file is used as the homepage on a WordPress blog, but in our case we’re going to be using a static page, which is where the custom page file home.php comes in. At the top of the home.php file is a snippet of code which identifies the custom page. The rest of the template file is filled with lots of PHP…
<?php get_header(); ?> and <?php get_footer(); ?> at the top and bottom of the file are used to insert the header.php and footer.php files in order to render out a complete HTML page.
The WordPress loop then checks for content, which is injected into the page using the <?php the_content(''); ?> template tag.
Underneath our main content we then have another loop, this time using query posts. The <?php query_posts('cat=11&showposts=4'); ?> code checks for posts from category 11 (the portfolio category) and displays the latest 4 items. This replicates the ‘latest work’ section of the design.
For each of these portfolio items we then use the code <?php $image = get_post_meta($post->ID, 'portfolio_image', true); ?> to fetch the ‘portfolio_image’ custom field and set it up as a variable. This will then be used to insert the portfolio thumbnail into the design.

Footer.php template file

The remaining HTML from the static page is then pasted into the footer.php file. This particular design doesn’t require many more template tags, just <?php wp_footer(); ?> to allow WordPress to insert code destined for the footer (an Analytics plugin for example). The other snippet of code is just a handy page load speed indicator which can help visualise the difference when using caching plugins.

Page.php template file

The page.php file is the template file used for generic pages added to the site. The contents are similar to the home.php file, with the exception of the additional loop that checks for portfolio items. All we have is the links to the header.php and footer.php files, the WordPress loop and the tag to insert the page content.
The About page of our design doesn’t contain anything unusual, so this page would be generated using the page.php file. Others, like home, portfolio and contact all use custom page templates.

Portfolio.php template file

The portfolio.php file is another custom page. This file is very similar to home.php as it uses the query posts script to look for blog posts in the portfolio category. The main difference is the parameters of this query posts script doesn’t limit the number to 4 and therefore displays every item found. Each post contains links to that post’s individual page using the <?php the_permalink(); ?> template tag. This is simply inserted into the href attribute of the anchors.

Contact.php template file

Another custom page template used in this build is contact.php. This page contains the contact form code and links to the social profiles within the two divs that are unique to this page. The social links alone could have been pasted into the HTML portion of the WordPress page editor, but the code used for the contact form would be stripped out so it’s best to hard code it directly into the theme file.

Single.php template file

The single.php file is identical to the basic page.php template. It only needs to include links to the header.php and footer.php files, the WordPress loop and the content tag. The rest will be generated using the online WordPress editor. Usually a link to the comments.php template file would be included in single.php, but in this build we’re not making use of comments as the theme is meant to be used as a simple CMS.

Extending the theme to work as a blog

Our theme is only built as a simple CMS that accommodates pages and the odd blog post in the form of portfolio pieces. If we wanted to extend the site to add a blog, we could develop the archive.php and comments.php files. We’ve separated the portfolio posts into their own category, so a list of normal blog posts could be generated by simply excluding this category from the query posts script in archive.php.

Adjusting the WordPress settings

In order to align our WordPress install with our theme we need to tweak the settings. First we need to create our four pages of home, about, portfolio and contact and type in the basic content. Before publishing each page, we then need to select the custom page templates for the home, portfolio and contact pages in order for them to display their unique functionality and content.

WordPress by default uses the index.php file to display a list of recent posts, so we need to head over to the Reading tab of the settings and change the front page to display the home.php template.

Finally, we need to add our series of portfolio pieces as posts. Create a new category named Portfolio, then begin creating posts. Add a title, then fill out the content with text and images using the WordPress uploader. Don’t forget to upload the small thumbnail image and copy the URL. This URL will then be pasted into the custom field area alongside ‘portfolio_image’. The script in the code will then take this custom field and use the location of the image to display the thumbnail of each portfolio post. Everything in the main content area will then be shown when the user clicks the ‘see more’ link and lands on the page generated by single.php.

The final WordPress theme demo

View the WordPress portfolio theme

Our basic WordPress theme is now complete. The portfolio website is powered and updated using the WordPress engine and can be enhanced with plugins to optimise for search engines. Now the core site has been built, all updates and additions can all be made via the online dashboard, no more code editing.

View the final portfolio theme demo

March 10 2011

10:00

Cost Effective Services to Help You Launch Your Own Site

Creating a website does not really require you to have all the technical skills to create one. There are various services available, both free and paid, that will be a great help in your website building process. Whether you are a developer, a designer, or neither, you can still have your dream website, all you have to do is read through this guide. This article is primarily for people who have always dreamed about having their own site, but always thought you had to be a tech savvy person to have one. However I will also touch on and explain how to leverage rapid website building possibilities for serious entrepreneurs too! I am sure you’ve been there – you had an amazing new project idea one that you wanted to realize immediately but the painfully long process of website creation took too much time and you lost your excitement or even worse – never launched your website!

If you can relate with anything I’ve written above, then this article will be a great time and life saver for you! I’ll explain several ways to launch a new website for free or extremely cheap! Quality doesn’t need to suffer because you don’t have a few thousand dollars to spend on unique website design coding or extremely cool features. If you’re going to launch a new start-up – it’s always smart to start small, start with just core functions to see how people respond to your creation! Once you see they enjoy it and there is a market, then you can consider seriously investing  some money on improving your site. It doesn’t make sense to spend a lot of money when just you’re just starting out.

With my advice you will be able to create a new website really fast! If you have a great idea you don’t want to have to spend hours working on it before you get to test it in action! Website creation doesn’t need to be a confusing and time consuming process! The main thing is to get your idea out there! Let’s get started!

In this article we’ll focus on:

  1. Basic solutions to launch small projects online for free or really cheap.
  2. Slightly more advanced solutions for entrepreneurs who want to test their new idea fully while spending only a little money on it.

Free Solutions Versus Paid Ones

There’s always certain advantages and disadvantages in everything we do or use, this principle applies to website creation as well. Free options aren’t always bad and paid options aren’t always better. You just have to know what strings to pull to find the best deals on the internet. Well, you won’t need to pull any strings here, because I will share with you the most effective solutions.

Advantages of Free Solutions

Image representing Iconfinder as depicted in C...

Image via CrunchBase

Well, if you are on a tight budget (or even better – no budget, just a dream)  you can always count on resources that are offered for free by their creators. There are resources out there that are premium-like in quality but are free. Why free? Don’t they want to see dollars on their bank accounts? Of course they do, but the thing about giving away free softwares, logos, themes and other deliverables is pure marketing to grab attention and gain exposure.  We can seriously benefit from such freebies too regularly searching for premium free resources.

For example, I rarely buy any icons, because there are so many free ones – take FindIcons, IconFinder websites for example.

Disadvantages

There are many free resources available but with most of them you’re either going to sacrifice quality, aesthetics and with themes/templates you cannot be sure if  code is well written. If you’re getting something for free, you often cannot expect to receive good support and you cannot expect to receive the highest quality. There’s a quote that goes “if you are good at something, don’t do it for free,” and you guessed it! Beginners and intermediate designers/developers quite often provide free resources because they’re not at the level yet where they can sell everything they design or develop. The good thing about this system is that though they may not make money they build their reputation and potential customer base by providing quality resources for free.

To summarize – yes, there are a lot of amazing free solutions available and some are high quality. While free is good – you can run into problems such as overuse(everyone using the same trendy free pack of social media icons), no brand recognition, looking cheap because without the necessary knowledge you may not use resources as they are intended to be used. My opinion here is that you can surely use free graphic design resources because what you see is what you get! However you should be careful picking up free themes and templates because often they aren’t very well documented or supported and you may encounter unexpected problems as bugs, compatibility issues with different plugins or modifications you will want to do.

I still consider free solutions to be a pretty good starting point if you don’t want (or can’t) spend any money on it. To explore more about free resources and their pros and cons, read this excellent article by Jared – Can Free Design Resources Be Exemplary?

Zilch Experience in Web Dev?

For people who are not into development but want to have a website for a business or for personal use there are many options to choose from, both free and paid. Free themes, free hosting, and free anything has its downsides and would not work for a blog like 1WD or for e-commerce. Good thing the citizens of the information age, and of the internet, are good enough to offer a free taste which can work for both people who have the skill to develop a website and for people with zero experience with such.

Now, there are tons of free services out there which offer good things, but here I will focus on things that I have used firsthand.

The first thing to ask yourself is…what is this site going to be for? What’s your goal? – personal diary, portfolio site, just a fun project, serious blogging project, startup, website to support your application or software you have, forum, e-commerce site? You need to set clear goals at first!

Basic free solutions for beginners : Hosted Websites

This solution is very good if your goal is just to have some internet presence, have a personal diary or you want to build a small community for friends, work colleagues or maybe just a fan club. However I will list the advantages and disadvantages of this solution, because I really do not recommend it if you have any plans to expand. You’ll understand what I mean once you’ve read pros and cons:

Advantages

  • Well, it’s free or super cheap!
  • Updated automatically – no maintenance issues at all! You don’t have to worry about updates and any compatibility issues
  • Free hosting – you don’t have to worry about your site being online, you don’t have to solve any technical issues
  • Easy to setup and launch – it will take just a few minutes for you to launch such website, no previous experience needed!
  • Search engine friendly – many marketers use those free website solutions to promote their main site! Why? Because usually those big blog platforms have excellent rankings in search engines, you can get ranked extremely fast because of that.

Disadvantages

  • Little control over configuration, design and customization – your chances to pick appropriate templates are limited, you can use only a few supported plugins. It’s hard to build/design something that stands out from the crowd there.
  • Very hard to monetize – Well, these sites will be monetized, but not by you! It will be monetized by those big companies who own the site, because they need to cover their own expenses. Basically you’re paying them in both cases – you pay them cash or they earn some cash with ads.
    Image representing Tumblr as depicted in Crunc...

    Image via CrunchBase

  • No branding- many hosted websites will look the same. Your  website will also look cheap because of the ads the hosted website platform will implement automatically.
  • Limited resources – while hosting may be free, many platforms have limitations for bandwidth and space usage. You won’t encounter these problems early on
  • You don’t own the content – this is the most serious one – if one day the site decides to stop working and they change their policies, you could lose your content and it’s usually difficult to transfer to your own website later on.

Ok, now you know some of the things you may deal with if you choose this option!

For hosted blogging platforms I recommend you choose from Posterious, WordPress, Tumblr.

There is also a very interesting Flash website creation solution I encountered some time ago so I am going to talk about it a bit too, because it’s great for beginner users:

Flash or Not?

To help you decide, first you need to know the purpose of your website. Is the purpose to have an online portfolio so that employers and potential clients will see you and be impressed? If  that’s the case, I believe that a flash website is a good choice because it provides flexibility when it comes to creativity. If the goal is to start an online store or a blog it would be best to go for a more dynamic solution, one of my recommendations above may be better suited to your needs.

Flash Website


The good thing about having a flash website is the creative freedom. Colors, effects, and animation is not a problem. A Flash-based website will save you the trouble of learning jQuery and other languages/scripts for added effects. Here’s the rub, if you have a slow internet connection like mine you won’t fully enjoy the website. Opening a light-weight flash website on my end takes up to 30 to 50 seconds. Not fun at all.

There is a free flash website builder, which allows people without any knowledge of programming and designing to come up with a new website via drag and drop. Wait, drag and drop? Yes, that easy. Wix allows its users to create a flash-based website using a very simple process. Trust me when I say that the registration process only took me 5 seconds and I’m good to go with my website. Alright, I’m dropping it now, it’s free. But if you are the meticulous type and serious about it you can always upgrade and have your own domain name.

With Wix you get to choose from a wide selection of free layouts and edit them at your whim. Literally drag and drop, you can manage information with just a few clicks.

See their gallery for a full list of what you can do with Wix.

Quality

The quality of the design is amazing, with its wide selection of layouts you can’t help but notice the high quality while most are free to use. Many of the design elements are drag and drop, no programming or designing skills needed.

Drag and Drop

This eliminates the need to code and design, all you have to do is choose, drag, and drop. Very user friendly. Menus are easy to understand, you won’t get confused trying to figure out what things do. Anything that you can see is clickable and editable, no worries if you don’t like the color, it only takes a few seconds and clicks to change it to suit your taste!

Below is a screenshot of how layouts are edited.

Wixcp

Wix is best for people who are on a budget but need to be online. Best for portfolios and personal websites. As mentioned, there’s an option to upgrade your plan from free to premium where you will get your own domain and other features that you will love. I like this approach because you can easily switch and see benefits immediately  (no ads, own domain, hosting, support, analytics and so on).

Wix Sample Websites

Remember, you can build your website via drag and drop using Wix, no programming required!

I don’t want a flash website! What else?

Up to now I really do not know what to call it: standard website, traditional website, HTML website, etc.. Whatever, what’s important is that you know what I mean: not flash.

During my free time I am developing a website, although I’m not that good at coding. My real problem? My design skills are terrible. Free solution? Minimalist design. I’m not saying that minimalism is easy, I’m pretty sure I’d still be troubled by it. If only I had the money I’d buy something from ThemeForest or hire a designer friend.

“I have a design but I can’t code”

Relax! There is a great solution for that. If you have a design (in generally accepted image format) and you want it coded in 48 hours one thing comes to mind: Code My Concept. Although it does not come cheap, at least you are assured that your design will be hand coded in valid HTML and CSS within 48 hours. Saves you the time and effort, and it’s professionally done too.

An alternative is Code Canyon where you can literally purchase scripts. Just like Theme Forest, rest assured that the codes and scripts delivered there are properly moderated and are of high quality. All for a fair price.

Some of the things you can buy:

Many people have trust issues when it comes to these type of things, 1stwebdesigner is willing to help you find a designer or a coder among our 24,000 plus followers on Twitter. We can tweet your needs if you need it, how does that sound?

Shopping for code and plugins is very easy, very helpful too if you are on a tight budget, or time won’t allow you to hire a developer in time or it’s not within budget. Think of it like building your own computer, buying parts that will complete the whole. That’s how it works.

“I know how to code but I can’t design well”

Aside from Theme Forest where you can purchase web templates, there is Graphic River where you can choose from a wide selection of stock graphics ranging from simple icons to a sophisticated prints.

A free solution would be free stock photo sites like sxc.hu or a site like Deviant Art but you can’t expect to find specific web elements to add on your website.

Here are some free things that you can use to build your design:

Create Your Own Domain Name

Choosing the right domain name is crucial task, because you’ll build your whole branding around it. There is a problem though, it’s very hard to get a good .com domain which is still free. Actually there is a serious problem in getting any good domain names at all! To help you through this process I suggest you try this nifty website – Domainr. It’s a site to bookmark, that’s for sure!

Well, I also suggest you use the site GoDaddy to register your domain. You can get domains really cheap from as low as  7.49$ per year! They also have a pretty good suggestion system to find related domains if the name you really wanted is taken already. Their backend system may seem confusing at first, but I’ve had positive experiences with this site, so I can really recommend it.

Choosing a Web Host

Catchy “Unlimited” bandwidth and disk space, several hosting services offer monthly payments from $4 to $10 for shared hosting. What does it mean?

In truth there is no such thing as Unlimited disk space and Unlimited bandwidth, the service provider assumes that you won’t use too much (which is true most of the time) so they use the word to their leverage. Is it any good? It depends on how you will use it, of course. For a personal website or an online portfolio it is more than okay if you want your own domain. I use GoDaddy and so far I have not experienced any problems, except for the fact that their control panel is a huge mess. Hostgator is one of the cheapest and good hosting services too. Both start from $4 (as of writing this) for shared hosting and both offer VPS. Dreamhost’s record is near flawless, you can google up “Dreamhost reviews” and use your instincts to see if the review is a sham or not. I know three people who use Dreamhost and they say it’s flawless, of ourse it does not come cheap.

new eleven2.com coming at us...

1stwebdesigner is hosted by Eleven2. Is it any good? It speaks for itself. 1WD receives hundreds of thousands of visitors a month and it’s still doing fine. If your website will have great traffic in the future you may want to start with a good host to avoid the hassle of transferring to a new host when everything is in motion. You don’t want to lose even 30 minutes of uptime.

If your goal, on the other hand, entails great traffic and thousands of users every day you might want to opt for a Full-featured hosting. For a couple of months now I have seen many people cuss about their hosting services because of hours of downtime on their blogs. Probing deeper I learned that most use shared hosting. In my opinion you can’t trust shared hosting when it comes to big businesses online. A solution would be to shift from shared hosting to full-featured hosting.

Quick Review:

Hosted Website Solutions

  • For hosted blogging platforms I recommend you to choose from PosteriousWordPressTumblr;
  • Easy site builder for a flash website you can use Wix;

Website Design

  • Theme Forest offers high quality,unique and very affordable themes.

Code Shopping

Hosting And domains

  • GoDaddy -register domains with ease.
  • Eleven2 Hosting – great hosting 1WD uses for a year already!

March 04 2011

10:00

1stWebDesigner’s Bullet Proof Guide: How To Make Money From Your Blog

More and more people are trying to earn online – there are millions of  new blogs, start ups and applications already and many more are being created each day! While there are so many people working online, only some of them are  profitable ( I mean really profitable – not just making their living)!

In this article I wanted to scratch the surface about several well known, and not so well known, monetization techniques that you could implement in your own business. Even if you don’t have your own business blog yet – no problem, because even a simple understanding  how other people earn online will be a great help to boost your confidence to start! Yes, online business can be very profitable if you follow certain rules to monetize your site!

I consider there are three categories of people venturing online:

1.Dreamers

Most people just complain about their life and keep reading success stories but don’t do anything on their own! Remember that dreaming will not make your goals a reality! These people may earn some money to survive, but nothing impressive, they’re just afraid or too lazy to actually start something. If you are there – don’t worry, you are stepping out from that reality to discover a new reality! This is how I started, because I didn’t want to accept the reality everybody else had! What’s the Secret?  - Take action!

2. Average business (making a living)

Here I would rank fairly successful people, including freelancers who own blog businesses and share their thoughts and expertise to their established readership (50,000-100,000 unique visits per month). Most online businesses fall in this category, because the actual project idea is good, but there is something missing. Mostly it’s because such business owners are just hard working and have experienced in their own niche – be it design, web development, writing, but not so much in marketing, social media promotion or money management. They are just lacking motivation or expertise in some areas that are crucial for their business to grow. They probably don’t have enough money to hire people who could take on the tasks required to market a blog and take it to the next level. Most freelancers don’t have enough time to learn these new skills because they are doing everything themselves.

My answer to fix this – implement better monetizing techniques to earn more (the old saying goes ‘work smarter, not harder’) so you can afford to hire someone that has the knowledge and skills you may not! Another solution could be to change the vision – maybe you’re doing what everybody else is. Are you doing anything different, or unique,to grab more people’s attention?

3.Good, profitable business (enjoy living)

And then there is  the third category where the business seems to have everything it needs – established team, great content, social media promotion, marketing and some classic monetization techniques implemented. Most people do not make it to this level of success and those that do often stop here because they don’t know how else to improve! I myself face this challenge and I’m slowly moving forward and making improvements. I was at this stage for close to a year and I considered myself highly successful. I was comfortable, and because I felt successful I didn’t actively seek ways to improve.  I paid for this mistake – I lost a lot of loyal readers, who just saw the content wasn’t at the same level anymore.

My point?

Well, there are so many online businesses, but most of them are missing great monetization! Project ideas are great, but you need to show how the idea can make the money; what will make this new business profitable!  Ok, everybody can make money from Google Adsense, selling image banners, but this type of monetization is limited (rare exceptions)! You need to get more and more traffic to keep your income growing and that’s the problem because there are some limits in traffic growth.  For example 1WD was growing rapidly for 2 years, but then growth became much slower and when my income stayed the same for several months I started to worry!

How can I grow my business, if I cannot increase the income? All I can do is invest my money more carefully, but opportunities are very limited! Oh, and I didn’t mention that once your blog is huge you cannot increase your ad prices that much, because nobody will usually buy those ads (there are a few exceptions to this, namely the major blogs that are considerd the top of their respective niches).

How do you increase income then? Well..here are some other monetization techniques. There are a lot smarter ways to make money (like I said earlier, work smarter, not harder). I’m going to share with you some different techniques and options, explain how they work and can help you make the most of your blog.  This Bullet Proof guide will show you how to make money from your design blog! These tips were written specifically for design blogs, though the principles and methods can be applied to any blog.

Image Banner Advertising

Advertise-make-money-design-blog

Advertising, no doubt, is the most popular and classic way to earn money with a design blog. You can see a couple of banners on almost every design blog. Selling banner space is one of the main ways many blogs earn an income (they’re still the top income source for 1WD). BuySellAds is the top choice for blogs who want to sell their unutilized space. It simplifies the process of buying and selling advertisements so you don’t have to attract advertisers yourself. Instead you can just focus on the blog’s content and let BuySellAds do the work for you. However the biggest drawback is that BSA take 25% of your profit. Of course you can try to sell advertising space on your own, though it can be really frustrating and time consuming, so the majority of blogs use BSA.

Well, there are a couple of good alternatives though:

DeckNetwork

The premier network for reaching creative, web and design professionals, The Deck serves up over one hundred million ad impressions each month and is uniquely configured to connect the right marketers to a targeted, influential audience.

What makes this ad service stand out from the crowd is they accept only top design sites, ensuring that traffic is very targeted for advertisers. They also only accept high quality advertisers who are selling good products, not just any old thing. The downside in my opinion, is that if you want to use their service, you cannot use other monetizing options, for example: Google Adsense.

CarbonAds

Carbon Ads is an ad tech company behind a new kind of advertising network. Carbon connects advertisers to highly-relevant users through targeted verticals we call Circles. These circles are made up of influential publishers who lead, or are actively engaged with, their industries. To their audiences, Carbon brings well-designed, value-focused ads, displayed one per page above the fold, for quality brands, products and services that readers actually need and want.

Another promising new ad network is FuelBrandInc – very relevant for designers.

Affiliate Programs

Clickbank-make-money-design-blog

If your blog generates a lot of traffic you should really consider affiliates as a serious source of income. If you’re not familiar with affiliate marketing –  it’s the type of advertising where you, for example, with your blog send potential buyers to a direct merchant. If done right it can be a win-win situation for both you and your audience.

ClickBank

Clickbank is one of the most popular affiliate networks which we use here at 1stwebdesigner because they offer the biggest payouts if you sell something. It’s not easy to convert visitors to actual buyers, but this is the best place to start. There are also good alternatives: CJ, which is very similar to Clickbank. Basically these two networks are the biggest ones and you’ll find the greatest variety of products, some of which could be really appropriate for your site.

Why to choose Clickbank:

  • Commissions of up to 75% — much higher than other affiliate networks
  • Digital products mean instant delivery and faster commissions
  • More reward for your efforts
  • Tens of thousands of products

Envato Marketplaces

Well, at least for our site, the Envato marketplace referral programs have worked really great. Why? Because their marketplaces are extremely relevant to our site – for themes we use Themeforest, for design elements we use GraphicRiver, for code snippets we use CodeCanyon sites!

I definitely suggest you check out the Envato markeplace referral program to get started easily. In my experience the image banners from the marketplace don’t work very well. Don’t over optimize articles, but it doesn’t hurt to add few premium selections for example to big slideshow gallery article. The reason people actually go to these marketplaces is because the products offered there are extremely high quality, something worth paying for! In my opinion, free isn’t always the best option and if I find something that can greatly save me hours of work for only $10-30, I will buy it without hesitating! Learn more here:  Envato Wiki site.

Another alternative is Mojo-Themes, which is kind of similar to Themeforest selling premium themes and templates.

Amazon Associates Program

Well, I haven’t earned millions there, because at least 1stwebdesigner isn’t focused so much on hardware and physical products. I would suggest if you’re in the design niche to seriously consider promoting popular design books, bestsellers on Amazon from time to time. While such promotions won’t make you a lot of money, it definitely doesn’t hurt to keep an eye on Amazon’s products.

Amazon is different because they offer very little, only 4% as a referral fee at the beginning, if you sell enough products in a month you could maker 6% or higher. What’s cool with Amazon is that though your referrals may not end up buying what they saw on you site, they may end up buying something completely different, and you’ll still make some money. The main task here is actually just to get people to go to Amazon, and they’ll do the rest! There are several ways to make money with Amazon, learn more here.

Other Monetizing Techniques

Premium Content: Memberships

Premium content is another great way for design blogs to earn some money. You can see many design blogs offering high quality content and tutorials for money. This is a great and effective way to make money if you’re able to deliver high quality content regularly. Nowadays when you can find almost anything on the internet, people are not willing to pay for mediocre content or content they’ve seen in ten different places. You have to be able to provide unique and high quality content so that people will be willing to pay for it. In most of the blogs you can access all their premium content for a fixed monthly fee. Check out Tuts+ and WDL premium programs to see what I mean and what kind of content people are paying for.

Tuts+ makes most if its money from their membership program, not advertising, not referral programs, but their membership program!

Selling Premium File Memberships

A similar way of earning money to what we just talked about.

Similar to blog premium membership, there are websites in which you can get access to high quality design resources for a fixed monthly fee. Some of the best examples are WeGraphics and MediaLoot. WeGraphics also has an affiliate program so you can earn some extra cash if you refer new people to their site. As you can see these websites are very specialized,but that doesn’t mean you can’t establish something similar on your own design blog.

Wegraphics-make-money-design-blog

Selling Books, Themes & Other Premium Products

Another popular way to earn money is by selling themes, icons, e-books and other design related material. It’s similar to the premium membership model, but the difference is that with this method you sell one specific thing for a one fixed price.

Smashing Shop is a great example how to make money online by selling e-books. If you have the time and knowledge to create a magnificent product, this can be very profitable.

You can learn a lot from them about how to go about selling a printed book. SM just released their new ‘Smashing Book #2′ and it has sold extremely well which proves that this approach can be profitable.

Smashing-shop-make-money-design-blog

WP Plugins
is a revolutionary WordPress project, aimed at improving the quality, support for, and standard of plugins. They’re just like the App Store for the iPhone, except for WordPress. They assess, check and scrutinize every plugin to ensure that you get the highest quality product.

wpplugins-make-money-design-blog

Elegantthemes is a small marketplace selling premium WordPress themes. They differ from similar marketplaces is that here you get unlimited access to all of their themes for a fixed price. You’re not just purchasing a specific file once, you are obtaining access to a strong and healthy community, frequent theme updates as well as full access to the support services.

elegant-themes-make-money-design-blog

IconEden is a premium icon marketplace which helps you save time by offering well-designed stock icons for your projects. They’re one of the best in icon creation and with stock icons picked from IconEden, you’ll never worry about the consistency, usability or simplicity. You can buy the icon sets separately or you can access all icon bundles for a single payment.

iconeden-make-money-design-blog

Case Study:PremiumPixels

I wanted to show you the site for someone who ties his design blog to his marketplace at Themeforest. Orman Clark offers premium free PSD files on his personal site almost twice a week – visitors love him for that and keep coming back. But how does he make money offering things for free?

He also owns very successful Themeforest account, where he regularly offers new and high quality WordPress themes for sale! And his work is really amazing, definitely worth buying. He is marketing himself and his products very well by cross-promoting his premium themes through his blog in a non-obtrusive way (which I love). He doesn’t trick people into buying his themes, just reminds them about his premium themes on his sidebar and right before you download any of his free psd files! PremiumPixels is great case study for graphic designers and developers who want to make their living doing what they really love the most!

Job Boards

Job boards are a great way to earn some extra cash and increase your traffic as well. They can also be very useful for your readers, but the trick is you need to have a good user base before you think about creating your own job board, otherwise no one will use it and you’ll just get an extra headache and make no money. Before you start,  investigate what others in your niche are doing right and most importantly – what they are doing wrong! If you have a chance to create a better job board then you might become successful without a huge blog presence, but in most cases I still would suggest to have a good reader base first.

Where do you earn money from job boards? Well, you can charge people for placing their job advertisements on your job board or vice versa, you can collect money from job seekers. Once you’ve built an effective and trustworthy job board, the ads will come naturally and it will turn into a great source of passive income. Not as easy to do as it sounds though.

Freelance-switch-make-money-design-blog

Resource Bundles

Bundles are becoming more and more popular nowadays. Design bundles are premium resource packs which usually contain various apps, themes, icons, e-books and premium memberships for a price that can be as low as 10% of the bundle’s real value. BundleHunt is the most popular service offering bundles they call “treasures”. If you check out their About section, you’d see that some well-known design blogs (WebDesignerDepot, for instance) are contributing to this project.

Where is the money? Well, you may be able to sell your product as a part of a bundle. If you have something in one of these bundles, the irresistible price of the bundle and the quality of your product may drive a significant amount of traffic to your site, which may result in higher sales of other products you offer. If nothing else, at the very least you’ll be known by a much wider audience. Some bundles offer an affiliate program if you post a great article about the bundle.

MightyDeals

MightyDeals offer unbelievable deals and discounts for creative professionals for a very limited time. The deals include products and services that are heavily discounted, usually 50% to 90% off.

I like their marketing technique, how they cross-promote their deals through many popular design blogs by placing advertisements in unique spots, which get really good attention because of their placement.

BundleHunt

Bundlehunt is owned by a bunch of developers, marketers and social media experts who, once in a while, like to put together bundles of high quality software, aimed at empowering the creative community. Because we are fond of our bundles, they call them “treasures.” Some call them “premium resource packs”. Maybe because it is a premiere service within the design community offering outstanding apps, templates, icons, eBooks, hosting plans and premium memberships for usually less than 10% of it’s real price.

Well I must say their deals are impressive and this kind of thing can be done by anybody! Well, there is a trick – you need to know the right people and get those people and companies to trust you to actually get these deals.

Bundlehunt-make-money-design-blog

Do you want to know where this bundle idea started? It started with Groupon just a few years ago. Groupon’s founder just figured if companies can unite to buy something for lower price…why not use this same idea for individuals? It’s a win/win situation!

Email Newsletter

Every blog and business should have its own email newsletter and contact list! Why? Because email marketing is the most immediate way to promote your products, resources or new sites! Before you start promoting anything you of course need to provide value and build trust, but once it’s done – possibilities are limitless! Those bundle sites actually rely a lot on their email marketing, where they promote their latest releases to people who actually are interested in their deals!

Build an active list of at least 500 people and you have a very targeted and profitable business! I am just explaining the basics here though, there are a lot of hidden techniques how to make income from email marketing, how to do super successful product launches with an email list alone! Some successful examples are the SmashingMagazine Newsletter and actually 1WD is also working on building a list by offering free e-book and a seven day email course to encourage people to subscribe!

graphic-blender-make-money-design-blog

When you sign up to Graphic Design Blender’s newsletter you get access to a free ebook.

Conclusion

I hope you’ve got a little insight about how to make money with your blog. These techniques can not only make you some money, they can also increase your traffic and attract new visitors. Try not to overdo it with monetization; don’t forget about your blog’s primary goals. Relevant, high quality content is what will draw people to your site and keep them coming back, if you have the content and the readership, the money will come.

Well, if you enjoyed this article, let us know because it only scratched the surface of how some people make money on the Internet! If there is enough interest and demand I am considering doing some case studies and interviewing successful designers and developers who have turned their hobby a full time business!

Do you want more case studies? Do you want detailed guides:

  • how to set up your job board?
  • how to approach companies to get good deals from them?
  • how to build relationships?

Let us know, I would be happy to show you how to have a rewarding and successful future! I have been passionately researching and trying many different ways to monetize 1WD and I have very good relationships with some of the biggest and most successful design blogs – I believe I can teach you something and I would be happy to teach you (and learn a few things myself, no doubt) by doing case studies and interviews with successful people!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...