In web design, one of the most important elements involved with providing the client with a website that their customers/audience are going to really spend time at is pay attention to something known as ‘user experience’. This is simply the study of what the user of a website goes through (or experiences) when they visit said website. Today we are going to talk about how to apply some lessons of user experience to our website through the layout of our content.

Website Elements

One of the first things to consider is what different elements we are going to be working with. There are a few things that every website must have in order to function as a website is supposed to. These are the header, navigation, content, footer, and in some cases a sidebar.

Header

The header of a website usually contains a few things. First of all, what the title of the website is, or often the logo of the company or organization that the website is for. Another thing the header may often contain is a subheader that has some basic information about the website. This can sometimes be a tagline for a company, or just a description of the website.

Most users will expect at least those two pieces of information to be in the header of the website, and since the header is located at the very top of a website, it is seen as very prominent and important information. Choosing what is placed in your header very carefully can have a great impact on the experience the user gets out of the website, especially in those first few moments from when the user arrives.

Navigation

Navigation is quite obviously an essential part of any website. Typically a website will contain multiple ‘pages’ with different categories of information and content. Most often, the navigation of a website will be in a list form, containing each different page of the website (typically, though sometimes external links are included as well). One other thing to note is that the navigation is (typically) placed directly under the header, or at least not far from it.

The first thing we can consider with navigation is that it should be noticeable. Now you also need to make sure it doesn’t become obtrusive either. The navigation, being an important part of the websites essentials, needs to be easily found (preferably without even trying), but it is also not as important as the content itself, so it must not overtake the main areas of a website.

Content

The content is always whatever that page is made to display. Most of the other layout elements are often pretty consistent throughout all pages of the website, whereas the content section changes every time. What goes here depends on whatever that page is made specifically for. From this we can conclude that this area should have the most prominent of importance among all the elements.

How you style the content area is important because that content is what the user came to the website initially to get to. Making sure there is enough space allocated for this area is a must, and also placing it in a very visible place, preferably viewable without scrolling. Keep all this in mind as the content is the purpose of a website and it gets a majority of the attention when a user goes to the website.

Footer

Footers are something that most websites have, but are not always paid attention to, or even noticed at some points. This isn’t to say you can’t make your footer noticeable by adding more to it, but typically footers contain solely copyright information, which most users are not concerned with.

So when designing a footer, keep in mind the unobtrusiveness that it should have (unless there is more there that needs attention), and remember why it is called a ‘footer’. Almost always, the footer will appear at the very bottom of the page.

Sidebar

Sidebar’s being optional depending on if the content of the website needs to have any sort of aside, or side information. Sometimes the side bar will contain the above-mentioned navigation, and other times, it will offer an extended navigation (categories on a blog, with main navigation holding pages), and lastly, sidebars will contain side information for the main content area.

As the name suggests, the sidebar is often place to the side of the content, and is usually in the shape of a vertical bar (i.e. – not taking up more than a third of the horizontal page real estate in comparison with the main content). The sidebar can often be very important, so is usually very noticeable next to the content, but again, we don’t want to steal away too much from the core of the website.

Layout Priorities

In any layout, the position and specific design of each element plays a role in determining what kind of importance, or of how high a priority it is in comparison to the rest of the page’s content. Things such as size, position, contrast, spacing, and font-sizes, as well as many other things, can all contribute to something appearing either more important, or less.

Making sure you arrange and design elements according to their importance to the website is of utmost importance when designing for user experience. Keeping in mind that the use is supposed to guided to the information they are seeking, they are not supposed to have to struggle searching for it. The first step to accomplishing this is understanding what the user is coming for.

Keeping content easily scan-able for headlines, lists, excerpts, etc, can help a user navigate through long content to find what they need. Even offering a click-able table of contents for specially long pages is often a good idea as well. But no matter what, remember to keep information unburied. As in, if there is information on your website, it should be able to be quickly noted by the user, and be able to be found in as short of time as possible.

Conclusion

All in all, user experience is very important to a website’s sucess, and the best tip there is to give is to think like the user. Imagine all possible paths that a user may want to take upon arrival at your website. Applying this in combination with a proper website layout and keeping content priorities in mind can result in a great user experience, and a good impression on you or your company.

Search Engine Optimization, or SEO, is something that is of great importance to web designers (or at least should be, haha). It determines whether or not your new website will even be found on the web! What good is a great looking website if nobody ever comes across it? It goes without saying that as web designers, we should be focusing on SEO to ensure our clients are getting the attention they need, and the same for ourselves.

SEO recently very quickly became something I paid much more attention too, and it has been paying off this far! Here is a few different things that I’ve learned along the way that have helped me in a great way, and hopefully they can do the same for you.

Now if you are running a WordPress blog, a lot of these techniques are made easy for you through the form of plugins. Particularly the All In One SEO Pack for WordPress is definitely a must have for all WordPress users. It lines out many elements of SEO in a simple to fill out preferences page.

So without any more delay, here are my SEO tips:

Page Titles

Page titles are a very important part in search engines finding your website. The keywords in the page title are of some of the most important thoughout your whole website. The thing here is that you also want to keep it simple and to the point. Don’t drag it out too long, but make sure you include what it is that your website is about, along with the name of the website.

My recommended format is ‘Page Description | Website Name’. This puts the important keywords that your industry determines first and then your own brand name afterwards.

Keeping a consistent format thoughout your website can help quite a bit as well. Either just adding a Page title in front of the format I recommended, or just replacing the page description with a page title would both work well.

Headings & Lists

The next most important thing involved in SEO for your website is obviously the content. The robots scan your website for all the keywords it can find, but it does indeed SCAN your website. Headlines and lists are the most prominent in importance to the search engines, they check these first and dig deeper in to the paragraphs later on.

An easy way to make sure your website stays SEO friendly without trying too hard to cram in keywords everywhere is the just keep scanability in mind. Most users on the internet do not read everything that is on the screen, they look over headlines, lists, excerpts, pullquotes, etc, and read further when something catches them.

Search robots can work the same way. Keeping the important information about your website in the areas that are most likely to be seen can be an easy way to make sure everything is working together nicely, and can guarantee nicely written content.

Links

Links can have a lot to do with your SEO ranking. The content of a site that you link to can add strength to your website. You don’t want to overload your website with outbound links though, it’s neccessary according to search engines ( and myself as well ) to include your own content on the website as well as links.

Providing relevant title tags on the outbound links and ensuring that the content being linked to is relevant to your website will both help your search ranking quite well. What is more important than outbound links, are inbound links. The more websites on the internet that link to your website, the more prominence you have in search!

Some easy ways to get your website and brand out on the internet more without spamming everyone are available using social media. Advertising your own blog posts on Twitter is always a good idea, and submitting to news or design news collection websites such as Script & Style.

One other tip is to simply communicate! Participate in discussions in your industry’s community, reply to blog posts, help people on Twitter, whatever it takes to spread the word. Keeping up in discussion on any design (or other industry related) blogs allows you to post a link back to your own website, which is just more inbound links.

Summary

So all in all, participating in the community and replying when you can pays off in more than just moral satisfaction, but in search ranking as well! Practicing these tips and others will definitely help your SEO, so start trying them for yourself!

jQuery is probably something I would consider a designer’s best friend. It turns a complex language like javascript into something that can be utilized for great visual effects on web pages with simple syntax. Creating something like a collapsible panel, or a section of a website that can be toggled on or off, requires minimal coding.

Today we will be building a simple collapsible panel. The code being used here is very minimal and not complicated in any way. This is a great tutorial for beginners with jQuery, but still shows jQuery’s great ability to make simple code into quality interactivity on a website. Now here is our code:

The HTML

<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Seth Etter's Testing Website</title>
	<link rel=stylesheet href="css/reset.css" type="text/css" media=screen>
	<link rel=stylesheet href="css/style.css" type="text/css" media=screen>

	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="js/scripts.js" type="text/javascript"></script>

</head>

<body>

	<header>

		<h1 id="logo">Collapsible Panel</h1>

		<span id="navControl"><a href="#" class="showNav">Show Navigation</a> | <a href="#" class="hideNav">Hide Navigation</a></span>

	</header>

	<div class="clear"></div>

	<nav>
		<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
		</ul>
	</nav>

</body>

</html>

The CSS

It should also be noted that I have a separate CSS reset file here that I am not referencing, but you should ALWAYS reset your style sheets!

.floatleft {
	float:left;
}

.floatright {
	float:right;
}

.clear {
	clear:both;
}

/* TYPOGRAPHY */

h1, h2, h3, h4, {
	color:#02635C;
}

p {
	color:#444444;
}

/* LINKS */

a:link {
	color: #777;
	text-decoration: none;
}
a:visited {
	color: #777;
	text-decoration: none;
}
a:hover,a:focus {
	color: #94C09F;
	text-decoration: none;
}
a:active {

}

/* BOXES */

body {
	background:#222;
	width:960px;
	margin:0 auto;
	font-family:Helvetica, Arial, sans-serif;
}

header {
	height:30px;
	line-height:80px;
	position:relative;
	width:960px;
}

	h1#logo {
		float:left;
		color:#fff;
	}

nav {
	height:50px;
	width:958px;
	line-height:50px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #999;
	border-bottom:none;
	background:#fff;
	display:none;
}

	#navControl {
		padding:80px 50px 0;
		float:right;
	}

	nav ul li {
		list-style:none;
		height:50px;
		padding:0px 55px 0px 20px;
		font-size:1.1em;
		font-weight:bold;
		border-right:1px solid #999;
		display:block;
		float:left;
		text-transform:uppercase;
	}

The jQuery

$(function() {

	$('a.showNav').click(function() {
		$('nav').slideDown(1000);
	});

	$('a.hideNav').click(function() {
		$('nav').slideUp(1000);
	});	

});

Code Explanation

To be entirely honest, the code is pretty straight forward. As far as markup and styling, we have a simple horizontal navigation panel with a inline-styled list. Then we have a span with two options, to hide and show navigation panel. Each option has a separate class of showNav, and hideNav, and each does as it is named.

Next in the jQuery, we have our selector, ‘a.showNav’, which when clicked, tells the panel with the class of ‘nav’ to slideUp over 1000 milliseconds. That should explain the syntax a bit, as I said it’s very straightforward. We use our CSS class or ID names to select objects and tell them their function.

The same code is then repeated for ‘a.hideNav’. The animation name this time is slideDown, as you might have guessed. After all that, we have a working collapsible panel!

It is obviously an extremely simple process, and it covers much of the basics of jQuery, this is a great exercise for beginners, but also shows the ability of jQuery to make simple code into great website interactivity.

There are several different CSS frameworks available that all employ a very useful grid system. This allows a person to make column based layouts that are evenly spaced and very clean looking. While some prefer not to use CSS frameworks, none can deny their ability to greatly increase production time on lengthy projects. Here we will be comparing a few different CSS frameworks to determine which may be the best for you.

The ones we will be covering are the 960 Grid System, Blueprint CSS, and Baseline CSS, and we will be comparing by building the same simple website layout with each one and determining each frameworks’ individual pros and cons.

960 Grid System

Link: http://960.gs/

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

The 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

The 960 grid system uses a total page width of 960 pixels, allowing you to use the rule of thirds in your designs. It also offers the ability to use either a 12 column or 16 column grid. This is good for flexibility, but it makes reading the source code and learning the syntax a little bit different, but not too much more difficult.

It comes with a nice typography style sheet, along with a good reset as well. As with most grid frameworks, the syntax is fairly simple, and made to be user friendly. In the 12 column grid, you simply specify your wrapper to be have a class of container_12, and then specify the width of each element by columns, such as grid_6, grid_8, or grid_12 to stretch the entire width of the container. The same rules apply to the 16 column grid.

Basic HTML Layout Using Grid System

Basic Page Structure



Home
About
Services
Contact


Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Content copyrighted. All rights reserved.

Further Reading

Check out NETTUTS post on Prototyping with the Grid 960 CSS Framework.

Blueprint CSS

Link: http://www.blueprintcss.org/

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

The Blueprint CSS framework is also very effective in building quick layouts that are nicely aligned and evenly spaced. It uses a grid of 24 columns, 950px total so each of 30 pixels with 10 pixel margins between columns. This allows for a little bit more flexibility as to how big or small your columns are in comparison to the 960.gs, minus the 960’s ability to go between 12 column and 16 column. Overall, the grid works great, and is personally my favored grid out of most CSS frameworks.

Blueprint is nice overall, it has some features like the colborder class which adds a divider between columns. For the most part, Blueprint is just as quick at prototyping layouts as 960 is, but each has their own ups and downs.

Basic HTML Layout Using Grid System

Basic Page Structure



Home
About
Services
Contact


Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Content copyrighted. All rights reserved.

Further Reading
NETTuts has great coverage of the Blueprint CSS framework in A Closer Look At The Blueprint CSS Framework.

Baseline CSS

Link: http://baselinecss.com/

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

Baseline CSS is great for a couple different reasons. First it is the only framework fully compliant with HTML5 so far, and second because of it’s typographic properties that allow everything to align to the baseline of text (allows for great looking typography). Other than these two things though, I feel that the baseline system far lacks in ability compared to our other two frameworks. The grid is a little limited in only using a maximum of 8 columns (as opposed to 12, 16, or 24).

Basic HTML Layout Using Grid System

Basic Page Structure



Home
About
Services
Contact


Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Content copyrighted. All rights reserved.

Further Reading
Most of the information you will need about Baseline can be found on their home website.

Overall Summary

We can see here that each of these frameworks is wonderful in itself, and each has it’s own pros and cons. Personally if I had to choose one to use most often it would probably be blueprint css, as it seems the most flexible to me, and also allows for the most customizable column layouts with 24 columns to spread across. Though for typography and great alignment, Baseline may be the way to go. Overall, it comes down to preference, so give each one a try and decide for yourself!

One big question in design that I’ve seen come up on numerous occasions is “should there be creative self-expression in graphic design?”. Graphic design, or commercial art is done typically for a client, and if your job is to express the feelings of the client, then it would seem self-expression is not something that should be included in the design. Typically, it is said that a good quality in a designer is the ability to alter his/her style to fit the current project, or that a graphic designer shouldn’t have a consistent style.

While it may be commercially advantageous to have this trait/ability (to manipulate your style), I also disagree with it being a necessary asset to a graphic designer. While all graphic designers can not quite be entirely self-expressive in each and every work (some justice must be done for the client), I think it is almost utterly impossible to give the task of designing a certain element to a single person (or even small group) without some sort of personal influence coming out in said design.

Design Still Has Some Boundaries

Each graphic design project that may come your way will each have it’s own varying set of boundaries (media, size, color restrictions, client ideas/desires, etc), but if there wasn’t any room for creative decision, then there would be no need for a designer in the first place. I personally enjoy having some sort of rules to abide by, or at least a general direction. In a pure art project, you get to decide the direction, the boundaries, and can change any of those things at any time according to your own desire.

Your Opinion Still Shows

Regardless of these boundaries, like I previously said, there is still room for creative decisions and expression. Without these there would be no need for the designer. If two different designers are given an identical project with the same boundaries and said direction, the two will still produce different results, almost guaranteed! This is obviously an example of a comparison of creative expression of the given direction and boundaries for the project. So in a sense, there will be self-expression in graphic design no matter what!

What do you think? What’s your approach?

Many different people have conflicting views on this subject. I’m interested in hearing what you think about it. Do you believe it is a necessary skill to learn to adapt your style according to the project? Or should one accept the fact that creative self-expression will show through in design regardless? What is your general opinion on self-expression in design vs in fine arts?

Recently, I’ve noticed that my attempts to get up to par with jQuery have been repeatedly derailed because of several other things going on in my life at the moment. Despite the interest I’ve taken in it, and how simple it seems to be, and how useful it is overall, I still continue to have to keep starting over and learning it again and again. Now I’ve decided to add some extra initiative to my learning by writing a quick post about it. Mostly this is a round-up of resources, tutorials, tips, etc on everything jQuery, for those who are in the same situation I’m in. Now go try it out!

Tutorials

• How jQuery Works – Great tutorial from the jQuery website on how it works.
• Quick And Easy Filtering With jQuery – Great tutorial for a simple technique for filtering list items with jQuery.
• jQuery in 15 Minutes – Great slideshow presentation on the basics of jQuery.
• jQuery For Beginners: Selectors, Hierarchies, and Attributes – Good quick overview of jQuery.
• jQuery For Absolute Beginners Screecasts – Great series of screencasts covering pretty much everything!

Tips

• Improving Your jQuery: 25 Excellent Tips – Amazing list of 25 things to do to improve your jQuery coding.
• jQuery Techniques For Good User Experience – Good tips using jQuery to improve user experience.
• Things You May Not Know About jQuery – Good read on some things that are often overlooked.
• 10 Ways To Instantly Increase Your jQuery Performance – Great list of tips, definite read.
• 5 Tips For Better jQuery Code – Another good list of 5 things you can do to better your code.

References

• jQuery Visual Cheat Sheet – Great cheat sheet for jQuery.
• Another jQuery Cheat Sheet – Just another good jQuery cheat sheet.
• Learning jQuery in 30 Minutes – Great slideshow serving as a crash course in jQuery, also good for reference.
• jQuery For Designers – Just a good website with lots of resources on jQuery, targeted specifically at designers.

So I’ve recently began messing around more with CSS3, and HTML5, mainly to acquaint myself with the new syntax, and just the differing process of building in HTML5. Along the way, I’ve noticed a few differences that could be very useful to SEO! Particularly the way different areas of the web page can now be identified as, thanks to tags such as “header”, “article”, “aside”, “nav”, etc. This opens up a few possibilities for us, and also allows us to drop a couple work-arounds that we used to use!

New Identifiers

In HTML4, we found ourselves using an ungodly amount of divs, all with different names, but deep down, they are all still just generic divs, no one was more significant to the other, they were simply styled and named differently.

Now in HTML5, we can do without the div (for the most part). There exists now in HTML5, tags such as “header”, “footer”, “aside”, “nav”, and they are all going to be of different significance in SEO! Now that div that was once simply named “header” will actually be treated as such by Google, Yahoo, etc!

This is great news! As your header is not the only actual “header” on your website. Different sections may have they own header on the same page (such as section titles), and these can now be scanned as headers as well.

Less Classes & ID’s

With these new tags identifying page sections, as headers, footers, articles, asides, and the like, we no long have to give our own names to every div on the page. This makes code a bit more universal, in the sense that we no longer have to worry about two different developers referring to their “header” section as “head” and the other as “header” thus stopping some code from working.

Whether this is something crucial or not is up to you. But it seems that they are definitely standardizing page layout design in the markup side of it at least. Regardless, it will make the code much neater to have simply named sections instead of countless divs everywhere. The problem with divs is that the names you give them in your CSS are not recognized in SEO, and with the new features of HTML5, they can now be given their proper credit.

No More Header Image Hack!

Out of all the new tags, the most useful to use in terms of SEO is by far the “header” tag. Before now, we had to use a -text-ident hack in CSS to replace the text inside of a h1, h2, etc.. tag with an image. Apparently though, this is very frowned upon by search big-wigs such as Google. It seems this method can sometimes get you labeled as spam and thus not listed!

Thanks to the new “header” tag, though, we no longer have to worry about using this hack! Placing an image inside of a header tag will make the ‘alt’ of the image searchable as header information! YES! Awesome news for SEO lovers. Now we can put whatever information we want inside of a header tag, namely images, and still get all the search credit that is deserved.

It seems that one thing these new tags have done is made SEO a little less strict on readable text, and allowed for us to use more graphic elements and still categorize them accordingly based on what section of the website they are in, as notated by it’s specific tag.

When Can We Start?

HTML5 is supported by most new current browsers, reset style sheets and cheat sheets can be found everywhere, and lots of major developers are already experimenting with the new syntax. Why not start now? Mess with it for awhile before really using it on any major projects, but start learning by all means! One thing that has been made a million times simpler is the doctype, which is now simply !doctype = html. New browsers will recognize this and import the standards themselves. You can even run HTML5 validations!

So what are you waiting for? Start checking out HTML5, and experiment with some CSS3 while you’re at it.

Marketing today is much different than it was in the past. The internet has taken over as the primary source of attention for a company, whether most companies fail to recognize that or not, it is still very true. While having a good looking website and an appropriate brand, etc, are all very important aspects of establishing your online identity, there is still one other thing that is becoming more and more crucial to being successful in the online world. That would be building a network, typically using social media tools.

Social Media Tools

I’m sure most of you can guess right from the start what the first thing I will be discussing is: Twitter. Regardless of the predictability, Twitter remains one of the most powerful tools in social media currently. It’s simple system allows for easy use no matter who you are or what your technical level is, but it harnesses a power to reach out to an extremely wide audience. Building a network of followers on Twitter shows that people want the information that you are providing, and also that they have at least a small sense of trust in what you have to offer. You can see that these are two important qualities that every business should have, and both can lead to success!

Some tips for building credibility and a reliable network of followers on Twitter are:

1. Find information that is useful to you and share it.
2. Provide information that is useful to the audience you wish to attract.
3. Follow people who are in the network you wish to tap.
4. Hash tags are a great way to allow non-followers to find your info.
5. Respond to people, and be generally active online.

Outside of Twitter, there are various other social networks that one can use to network. Unfortunately, Twitter is the primary one that I use. The next best in line would most likely be Facebook, depending on who you are talking to, though that is up to you to decide. Each network has it’s own community and it’s up to you to find which one(s) suit you the best!

Blogging!

Now this is an area that I am still working on at this point. Blogging is something that has become extremely powerful on the internet today. Being able run your own content centered website alongside using social media tools such as Twitter to advertise your blog posts to an audience allows one to build a name for themselves on the web. Now Blogging isn’t quite as much of a walk in the park as social networks are.

Picking your topics wisely and marketing your website/blog to the correct audience for the topics and content are crucial matters when starting a blog. It’s also important to pick a topic that you are interested in as well. There’s nothing worse than trying to write articles about something you are not interested in. So keep it interesting! For yourself and your viewers.

Participate in the Community

Running a successful blog on top of using social media to spread your word can quickly get you the attention you want online. But to really be a part of the internet community, you have to participate in off site discussions as well. Visiting other blogs of specific (or not) topics and commenting on articles, and simply being a part of any discussion via Twitter, Facebook, etc, can help you be more well known, and thus generating a bigger following and a larger network.

It’s always important to give back to the community. So always offer help to those in need, answer questions, give advice, and share whatever knowledge you find useful and whatever has helped you along the way in whatever it is you may do. Just keep in mind that it is a sharing thing, nobody has an interest in someone who is going to keep everything to themselves. So help others out, and you will receive the same in return.