So I’m aiming to start up Chosen with all pistons firing. I’m asking for the help of my readers, my family, my friends, or others that just feel generous. I have started a campaign to raise funds for a new computer. This computer will help me reach out and work efficiently, as well as bring more goodies and tutorials to my blog and others. If you feel so inclined to help me in my endeavor, please check out my campaign and donate.

Thank you all for your loyalty and support in the lifetime of my blog, and wish me luck!

- Clay

Doing your time

Regardless of having one writer or multiple writers for a blog, it’s going to take a hefty amount of effort and time to build up your blogs content and traffic. One of the areas I attribute a lot of the success of this blog to is the time dedication I’ve had. I dropped other hobbies like playing guitar and watching TV to start blogging and reading more. This has been the key to my growth as a person and having one leg of my stool strong as steel. To make sure you put in the right amount of time, trying pacing yourself, or joining in a group like project 52, where you dedicate to writing one post per week. Just remember one important rule.. too much will cause readers to flee and too little will fail to attract them. I think once a week is a good frequency for a new blog.

Putting in the effort

You may be thinking, “isn’t putting in time the same as putting in effort?” .. and the answer is NO. Putting in effort usually means research, capital, and marketing. To run a successful blog, you need a few ingredients to help you along the way such as a professional design, an understanding of SEO, and the right marketing tools such as twitter and facebook. Putting in effort is somewhat misleading, because some of the effort is external, but it all comes back to you. Any money or learning you put into your blog is an effort that will help you keep this leg balanced. As I mentioned with time.. a weekly schedule to teach yourself something new will really help you along.

Remaining Consistent

I see two very common mistakes relating to consistency:

Scenario A involves traffic, a blogger (whether new or veteran) sees the blog as a failure because traffic is low and doesn’t seem to be climbing. The worst thing you could do in Scenario A is give up on it. Think of a blog as real estate or stock.. it’s value may fluctuate significantly, but if you look at the course and direction of the internet as a whole, it’s value is always increasing. If you look at the short term, you’ll see failure, but dedication and consistency will almost always prove successful (combine that with a good exit strategy and you have yourself a business plan).

Hype is like dessert: most of the time it’s incredible, but too much will make you sick

Scenario B involves lack of time or effort. Yes, I’m aware I’ve already mentioned these two points, but bare with me. If you’re putting a lot of time into your blog and it’s not growing you may be focusing on the wrong areas. I see lots of blog focus on social media or spend loads of money on advertising, and they feel highly successful because they see their numbers jump.. for a while. The problem is people get bored with hype, it’s like dessert: really great, but too much or too often will make you sick of it. People need meat and potatoes in their diet. Many loyal readers will favor quality over quantity. My site for example rivals others that have 300+ posts and write daily.. yet it only has around 60 posts.

Put it all together

The last piece is a not-so-secret ingredient, and doesn’t need a paragraph to explain.. you have to be passionate about what you share. Blogs can definitely be profitable, but if you content doesn’t communicate passion and true interest, people aren’t going to be interested in what you have to say. Write to share about what you love, not to make money. Once you’ve built up a successful blog of loyal readers, then try and strategize the financial successes. I’m sure other bloggers would tell you differently, but I’m telling you from my experience that heart has more value than profits. If you enjoy what you do, there’s no price that can replace that.

jQuery.fn.modal = function() {
	return this.each(function(){
	var ah = $(this).height();
        var wh = $(window).height();
        var nh = (wh/2) - (ah/2);
 
        var aw = $(this).width();
        var ww = $(window).width();
        var nw = (ww/2) - (aw/2);
 
        // Trim body height, append overlay, and disable scrolling (this can be undone with a custom close button)
        $("body").height(wh).css('overflow','hidden').append('<div class="overlay"><\/div>');
        $(".overlay").fadeTo("slow", .8);
        $(this).css({'top':nh, 'left':nw}).fadeIn("slow");
	});
};

This code is what i use for the overlay, you can customize as you’d like. The actual div is appended to the body with JavaScript.

.overlay {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 110%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.8;
	filter: alpha(opacity=80);
}

This is an example of a modal/lightbox i did using this plugin. Very simple CSS:

.modal {
	background: #00121b;
	min-height: 54.5em;
	width: 56.5em;
	border: 1px solid #111e24;
	box-shadow: 0 0 1em #000;
	-moz-box-shadow: 0 0 1em #000;
	-webkit-box-shadow: 0 0 1em #000;
	display: none;
	position: absolute;
	z-index: 1002;
}

Love it or hate it, I re-designed the Chosen Development website. I was growing tired of the Organic theme that I had developed for it originally. Even though it was highly creative and artistic, it was too busy and the colors were too bleh. I decided to go with a VERY simple layout, color scheme and dark, web 2.0 style. This a typical style for me, but I’m proud of that. Chosen development consists mostly of the work of myself and my business partner, Shane and he loves the new design as well. I’ve also integrated our new Creative Brief Interview so that we can automate the initial research and gathering phase.

So check it out, and give me some feedback either way!

So blog this if you like it and support it, and give some credit to the maker of this video, svdomer09.

Can anyone say, “Misleading title” ?? While this title may be misleading, there’s a good explanation for it… it’s called Search Engine Optimization (SEO). SEO is a process of structuring code and content in a way that Search Engines and other tracking software can easily recognize, categorize, and parse. It’s an important tool in marketing a website and getting your rankings higher on google.

SEO in Lansing Web Design

As a freelancer and web developer, I have to market myself well. Part of my marketing strategy is to target specific areas and locations so that I can use keywords that may not be as common in that specific area, but that are important and strong keywords related to what I do in the web industry.

My Goal

Plain and simply put, I want this page to boost my SEO and target specific keywords AND teach those that are interested something too. Rather than go into detail about WHY I structure, write and target the way I do, just look at my source, read through this post, and follow up with some other blogs to see what SEO is all about. I think learning by example is the easiest, and hopefully people will be able to reference this page and see how and what I’m targeting.

Web Design and Development

I’ve been freelancing as a Web Designer and Web Developer in Lansing, MI for some time now, and it’s about time that i put myself on the radar for SEO. I held off for a while because I didn’t want to compete with other Web Design Agencies in Lansing or Michigan, because many of them were my source of work. However, now that I’m growing as a freelance web developer, and my Creative Advertising business is taking off, I figured it would be best to market myself as such.

Web Design

If it’s not obvious already, I work as a freelancer and manager of a Lansing Web Design Company, Chosen. Chosen is a Creative Advertising Agency specializing in marketing and advertising using tactics that are out of the box and extremely creative. At Chosen we aim to be trend-setters and on the cutting edge of both design and technology, so come to us and make “what if” a reality.

It’s exciting to be a part of such a successful business in Lansing, and though we have offices in Saint Johns, MI and Los Angeles, CA already, I would like to eventually branch down to the Southern Kentucky or Northern Tennessee area. Those areas are ready for a professional web design company to come in and grow the community.

Lansing Web Design

As you’ve read, Chosen is run primarily out of Lansing, MI but I personally live and work in Saint Johns, MI which is where our main office is. Having a Web Design company in a smaller town like Saint Johns might seem like a bad area to market web services, however I’ve found that the internet is not bias and allows me to be anywhere at any time globally. So Chosen and myself are best represented as being located globally with our office on the web. That’s the way we play the game, so check us out, and stop in to say hi!

If you’re reading this post and getting excited to learn some secrets on how to make your site look cool, you’re in the wrong place. While I am aiming to share some cool scripts, I want to make sure that you will be using them appropriately. Refer to my first post in the series to get started in analyzing usability and layout before reading on further.

I should also address that my aim in this post is to have it teach on a broad level for the novice, but give details and references for the intermediate or advanced developer that wants to get deeper with javascript and AJAX.

Javascript Libraries and Frameworks

First I must address JavaScript Libraries and Frameworks for those that are not familiar with them already. Basically a JavaScript library or framework is a library or core of pre-written code that creates easier functions and methods to call/manipulate and control code. There are many libraries available and all aim to meet very specific needs, some are very common across a broad level of sites and platforms, such as jQuery, prototype, and mootools.

These libraries are a great way to get started with learning javascript, as they simplify the language and development time, as well offering a large community of developers that run forums and are willing and eager to help you learn. Personally I prefer jQuery because it is a medium-weight script that does everything I need it to do for AJAX, animations, and CSS editing as well as being a very modular framework which makes writing plug-ins and finding plug-ins a breeze. Prototype is also a really nice framework for those same reasons, and I love that prototype comes standard in development with Ruby on Rails (server side programming language and framework).

If you really want to get down and dirty with code you can write your own applications, but I’m guessing the average Joe wants to see what’s already out there and available to download, so here’s the list of my favorites image galleries, lightboxes, carousels, and other animations.

You can also refer to some other great resources and cheat sheets

Image Galleries

• ImageFlow
• SlideViewer
• Pamoorama
• PhotoMorpher
• PhatFusion Slideshow
• Slideshow 2
• FrogJS
• MooPix

Lightbox

• HighSlide
• Floating Dialog
• SqueezeBox
• Modal Message
• jQuery Lightbox
• Slimbox
• Lightwindow

Time

• TimeTable
• Vista Skin Calendar
• jQuery Timer
• Simple Clock

But regardless, I want to showcase some of my front-end and design talent, as well as reference some of the clients and projects I’ve worked on. Please note, that I did not do the Graphic Design for these, any sites I designed and developed will be under my Graphic Design page or see my full web development portfolio.

Ciplex Lite

This site was small but challenging. All I can say is THANK GOD they don’t want to support IE6! This would’ve been a nightmare with all of the PNG’s on the site.

Apparently I’m unable to reference clients from my former employer, so this blog is much shorter than originally intended. I’ll post some more here later.

In the early design phase, I had a really vague idea of what I wanted my site to be, but I didn’t want it to be “typical” and I hadn’t really seen a site that matched what I was going for. I still started first by looking around at what I liked in other sites, and thinking of how I could incorporate that into my own. Then after the first week I happened to come across a theme that was absolutely gorgeous, by Darren Hoyt and Matt Dawson and used it as my base for development. I love the grid, the structure and the User Interface that this layout has. My approach is once you’ve established your frame, UI, and grid; you can slowly add creative enhancements as you go (at least that’s my preferred approach, some designers and such may argue it, depends on the scope really).

After I applied the new theme, I began my breakdown approach by changing the color scheme, and re-adjusting some of the positions/sizes/padding/etc on the elements of the page. For example, I wanted larger font sizes, better font spacing, a different color scheme, etc. Once i had the theme, I started making the modifications to the style sheets. Most themes will use just one or two stylesheets, editable within WordPress itself under the Design tab, or within the wp-content/themes/yourtheme if accessing the site via FTP. Style are typically labeled style.css or separated into different layout styles like nav.css, type.css, posts.css and so forth.

HTML and CSS

For those of you that are just starting out, I want to go over some basics so that I don’t lose you further down the road. I’m sure if you’ve been reading anywhere on how to make a website you’ve seen the acronyms HTML and CSS. These are two extremely important pieces to front-end development. They define structure and how to present structure.

HTML stands for HyperText Markup Language, which basically means it’s transferable content. HTML serves as the structure of a website. If HTML were part of a building a house, it would be the lumber, doors, windows, drywall, etc.

CSS stands for Cascading Style Sheets, which means transferable/reusable styles. CSS serves as the display of a website. If it were part of building a house, it would be the overall blueprint and floor plan, as well as the paint, trim and furniture.

Hopefully my analogies make sense.. moving forward.

Using CSS to layout your site

So if you downloaded a theme and opened the main CSS files, you’ll see that some of it just clicks. Things like “background-color” are literal to what they’re styling. The hardest part to CSS isn’t colors and fonts, but more in layout like sizes, margins, and paddings. I’m not going to define all the style definitions, but like I said before, CSS is both the blueprint and the paint, so some styles relate to structure and some relate to skin.

The best way to learn CSS is to mess around. The basics that you need to know are elements, classes and ID’s. Elements are HTML defined content, such as <p> paragraph tags, <div> structure tags, <ul> lists, <h1> headers, etc. Classes can be attached to these tags like <p class=”redtext”> in HTML and to style that in the CSS you would define the paragraph tag with the class redtext be writing p.redtext { color: red; } in the style sheet. The period represents the class and the p represents what element that style is attached to. To style all paragraph tags we could simple drop the class and write p { color: red; } because then we’re simply targeting the paragraph element. This principles works the same with id’s which are represented with a # symbol. The difference between an id and class is that a class can be used multiple times in a single page and an ID can only be used once.

Homework

For this next week, try to learn some CSS basics. If you’re a beginner, work from a theme that someone already did the hard part of laying out, and just change colors or adjust sizes slightly and tweak it until your happy. Try and get the site styled with the colors you like and sizes you like. If it looks boxy and boring, that’s GOOD. We don’t want to focus on the creative elements more than we focus on the layout and structure yet.. that comes with time.

***Please direct all comments and questions through this blog post rather than emailing me, that way others can review and build off communication back and forth***

Prerequisites

There are two main phases to web development and they are the most crucial. An application or website needs to have a good User Inteface (UI) and remain highly reliable/functional. These two phases are usually labeled as Front-end development (which covers everything from Graphic Design to coding in XHTML, CSS, Flash, and JS) and Back-end development ( which involves a server side programming language such as PHP, ASP, or Ruby and a database such as MySQL, MS SQL, etc). I’m going to use this terminology often throughout this tutorial, so it’s best that you research these terms now if you don’t know what those technologies are.

Part 1: Design

Lets get started. First I want you to draw a design. You can do this however you want, a lot of people jump right into Photoshop and start designing. I personally like to bust out a pen and paper and sketch first. I like to get a feel for layout, grid, and flow before I get too heavy into a designed mockup. This method may prove useful for those of you who don’t know photoshop, as it will help you understand and learn the process of creative and UI thinking and give you a blueprint to reference if you design without a PSD to breakdown.

Spend some time on this phase. Like I said its the most important phase. Often times, in the professional world, a designer will create 3 completely different mockups or wireframes presenting the same content. This allows and forces the designer as well as the client to see and think with three completely different concepts and ideas for presentation. I recommend that you do such as well. After you develop 3 completely different ideas, sit down with someone else and circle things that you like and dislike about each and try to chose the one that best presents the concept. If you can or want, merge ideas from the other concept designs with the base that you choose. Then refine it like crazy. Many iterations are often necessary to reach a design that you’re completely satisfied with.

The next tutorial will follow in 1 week. This will force those who are following my posts in real time, to spend the amount of time necessary to refine. Feel free to leave comments, ask questions, or make suggestions in the mean time.