Because of this mess a few creative practitioners taught us to separate our content, presentation and behaviors. But, this ideal paradigm is incapable of fulfilling the needs of the web today.

So along came what I will call divergence; or convergence if you look at it from another perspective. Divergence in web development is the braking apart semantics, presentation, and behavior. However, it is not complete separation of the layers.

In divergence you can use presentation with semantics, as long as it’s semantic (not likely to happen because presentation is rarely semantic).  And, you can use behavior within semantics as long as it’s semantic. And, you can use behavior within presentation as long as it’s presentational.

This is basically a conditional AND, not OR, statement versus the boolean ideals behind separation.

For example, in HTML5 we have type=”email”. Attached to this semantic value is form validation, or a behavior; it’s ok to use under divergence.

This is true because the value email is semantic when in use and the behavior supports its semantics. However, if we were to use the font tag we would not be diverging because the font tag is not semantic and presentational, it is only presentational. And, so, we diverge font styling into our CSS only.

If we want to apply JavaScript to our HTML we can’t add it into the HTML body because it is not semantic and behavioral. The JavaScript would need to diverge. And, if we wanted to use behavior within CSS, our presentation, it needs to be both presentational and behavioral.

Under this methodology we keep our semantics, presentation, and behaviors intact while working with new technologies.

More to come later…

A few purists, I’m sure, will be outraged by what I’m saying. But, if the truth be told, the pseudo class hover has been triggered by user action for quite a while. That is, behavior within presentation.

From the CSS specification, “Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases.”

This has made me question the principle behind separation of content, presentation and design. And, as I have investigated the idea behind separation, inspiring as it is, I have not found it to be practical.

Separation is a novel idea. It has guided the design style of many amazing programmers and artists. It has led to numerous beautiful and functional websites. But, this segregation of content, presentation and behavior is, as I have found it, much like XHTML 2: little more than an idealistic view worth stemming from.

It is time to leave this ideology behind us. It has served its purpose practically and well. Times are changing and new technologies are piping a different tune: divergence.

It is time to start diverging, not separating.

Part Two: Divergence explained

Now, I know when you’re new it’s hard to get clients to give you anything, content or cash. But, they don’t know what design is, and they don’t know that they need it. It’s not their job, it yours, and you need to inform them.

Doing design right

As I learned, design was not about picking up a brush and hoping something nice came out (This is what most new website owners assume). It was about understanding, communication and art.

I had the process all wrong:

1. design a site
2. plug in content
3. and market the content

Instead the process is quite the opposite:

1. understand the market
2. develop content based on that information
3. and let the content inform the design.

Market awareness

Marketing is the first step to design. For a writer, marketing is a story. For us, it’s the story of those we are working with. But we can only begin to write once we understand their story.

Content

Every story has characters. Who are the characters of the brand you are working with? What is their history? What is their personality? What do they do for fun? Are they goofy or proper?

Writing is hard if you don’t know these things. In the end writing is about bringing an idea to life. It’s about painting a picture in the mind’s eye; and it’s our job to communicate what that painting is emotionally.

Design

Communication is emotional. It is where most relationships break down too. If a design is not communicating correctly, how can the design stand? Well, it doesn’t. It never will. It’s like a person who smiles on the outside and wages war within. Bad design is like a volcano waiting to erupt without warning, and volcanoes erupt.

Design is informed by content. If it’s not, it’s not communicating.

What is your story?

So, what is the story you need to communicate? Have the characters already been given to you? Or, will you pretend that you can design the cover of a book without pages?

First, if you are having trouble getting your site indexed try submitting the URL to a site that gets indexed frequently. When you submit your domain name to these site be sure their reputation is good. Search engines will rank your site based on how reputable the sites that link to you are. Twitter is an excellent example because they are both reputable and indexed often.

Google URL Adder

If you didn’t know, Google has its own tool for adding URLs to its index. If you’re not sure Google can find your domain, try applying for Google spider to crawl your site on this site by using the tool. Google uses spiders to index websites so they appear in their search results. If you’re confused about how Google works check out this video, or visit their page all about it.

Web Design Agency

Normally, if your relationship is good, the design company that is making your site will add your domain to their portfolio. If their site gets indexed often yours is bound to get picked up. Be warned that not all websites are added to design company’s portfolios. Many only show their best work so they don’t overwhelm new clients coming to their domain.

Be sure to recognize the decisions made by those you are working with. You never know what their situation is like or how many clients they are working with. However, chances are, if you’re a really good client they will do you a favor and get you indexed anyways.

Just think for a second here. If you know that Facebook has 4,000,000 active accounts, that there are millions of Tweets per day, and Google searches are the most popular place to find out about local business online; would you think they were important? Would you think a website was important?

In fact, most small business don’t yet. According to Vanessa Fox, Author of Marketing in the Age of Google (HIGHLY recommended), “Only 44% of small business even have a Website.”

Most small business don’t want to spend the money

This is huge! Most small business don’t think they can afford to connect with customers outside of traditional marketing. That 56% if you missed it.

56% of small businesses are not thinking about the web yet. On Google, that means most small business can get ahead of their competitors 56%.

So, how much will that website cost you? Well, it depends on what you want, who you get your website from, and what their rate is.

Now, You can probably find someone who can build you a site for under $300. Just remember, what you put in is what you get out, and I’m not talking time. Its more like, garbage in garbage out.

Before I close here, I don’t want to leave a bad taste in your mouth. I want you to get pumped! This is an amazing opportunity. There is simply no reason to be overwhelmed.

Here are a few suggestions

1. Start small! Do not go in all at once. Facebook Pages and Twitter are free. Try them out right now! Go ahead, Google them… Google how to make a Facebook Page.
2. Find a consultant. You don’t need to be the expert. Its important to find a good consultant for digital marketing.
3. Don’t be cheap if you can help it. Have a defined budget. Know what your online brand is worth. It might be more than you think.
4. Read blogs on the topic. Find a good marketing blog and follow it. Some of the most relevant people in the industry, Chirs Brogan, Mitch Joel, and Seth Godin, give their knowledge away for free.

Download all examples to get started!

Let’s get to know the CSS background-position property. When you decide to use a background attachment, such as an image, background-position specifies its initial position.

Basically, the property tells your image where it should appear within the element we are working with. The default position for the image will always be the left top corner of the element.

If you want to change that position you need to declare the property in our CSS and add two values. The first value plots your image on the horizontal x coordinate and the second on the vertical y coordinate.

.object {
height: 150px;
width: 150px;
background-attachment: url(bg.gif);
background-repeat: no-repeat;
background-position: 0 0; }

(View Example)

Even though we declared the position in the example, to (x)0px and (y)0px, you do not need to declare this position. Remember, if no position is declared the browser will assume (x)0px and (y)0px by default.

The Values

So, background-position can use up to two values. The values can be keywords, percentages, and lengths (e.g. px, em, etc.). If you declare only one value the second, the y coordinate, will always be 50%, or center.

.object {
background-position: 100%; }

(View Example)

To keep things simple I personally avoid keywords because they have percentage equivalents. I also, reject the notion of ems, because they are not necessary and add unneeded confusion. Remember, if you have a nail use a hammer.

Pixels

Pixels are a bit odd and not because of rendering, your browser is the real issue here.

Browsers use a vertically flipped x/y graph to plot pixels. They do this for a few reasons, but that is for another time and place. All you need remember is that the positive side of the chart starts at the left top corner and works its way to the right bottom.

When declaring your position with pixels the image anchor point will be the left top corner, not be be confused with the default image position.

.object {
background-position: 0 -25px; }

(View Example)

Percentages

If pixels are not working for you percentages might do the trick, if you don’t get tangled in their web.

When you declare a percentage as the value of the background-position property, it’s lined up based on two points.

1. The percentage of the image, as declared
2. The percentage of the element, as declared

This is hard to explain, but basically, when you declare a percentage it takes that percent, say 75%, and lines the axis of the image, at 75%, to that of the element, at 75%.

Let’s imagine together that we have a long and short stick. There they are, on a table, horizontal to your shoulders and parallel to one another, separated by about an inch.

I hand you a brand new vibrant red sharpie.

Now mark the long stick with the red sharpie, about 75% down from the left side. Next, pick up the small stick and measure down from left side, about 75% of its width, and mark the spot with the same sharpie.

Perfect! Now take both sticks and line them up so the marks are next to each other. That is how the browser lines up background images to their elements.

It does not matter if the image or the element is bigger, it doesn’t matter if they are the same size. That’s how it works, nice and simple… just hard to explain.

.object {
background-position: 75% 0; }

(View Example)

The only time percentages get really confusing is when you declare say… 200% or -10%.

Defaults

• If you only specify one value the second is set to 50%, or center
• Images always assume their position at the left top

Reminders

• x/y graph is flipped on its head
• Percentages apply to both the image and element and line up at their respective percentages
• When declaring values the horizontal plot is first, the second is vertical
• If you want your image to be in the left top corner you do not need to set the property
• Avoid, keywords and ems

Learn More

• Sitepoint Reference: background-position
• Snook: Background Position X and Y
• Background Image Parallax Effect
• CSS Background Sprites

First, when writing a proposal, include a friendly word of thanks to the prospective client. Let them know that you greatly appreciate their interest. This set the tone for the rest of the proposal.

I’m awesome, brilliant

Next, you may or may not want to include the classic “why we are so great” speech. Including this part can be important when trying to earn the clients trust, but don’t let it become a sells pitch, and don’t go over board. The keyword here is genuine. Remember, you can always demonstrate your ability to deliver throughout the proposal.

Break it down

In the next section of the document you need tell the perspective client what you plan to offer them, the deliverable. You should break everything down so the client can understand what you are talking about. Don’t use to much jargon.

If you are proposing a new website include all the items you plan to create: pages, designs, and everything else.

You will want to describe what each item is, why they need it, what you plan to do, and how you will deliver your promise to them. The client doesn’t want to trained on how HTML works, they want to know how it will make them profitable.

For example, if you are proposing a new contact page:

• Describe the contact page. What is it for?
• Describe why you think it’s important. What is its value?
• Describe what you plan to do. Do you plan to redesign the form, or implement Ajax for usability?
• Describe how you plan to do what you have described. Will you use a retro style, or use jQuary?

You can do a number of things when breaking down and itemizing your proposal, just be sure the client know what they are getting.

Money

Near the end of the proposal be sure to include a complete list of the items you have proposed. This will give your client a better look at what they are getting. More items is not always better. If you want include estimated prices in your proposal.

Summary

Finally, at the bottom of your document include a complete and brief summery of what you are proposing. Keep it short, keep it simple and keep it genuine.

Resources

If you have any resources or advice feel free to share. Here are some of mine:

• Charm Client, Win Pitches
• Boagworld – Briefs and Proposals
• Make That Sale … Without the Sleaze!

Their posts covers the dreaded “trolls” that loom around your site waiting to get a rise out of someone, including you. Alyssa Gregory does an excellent job of covering the basics, and she isn’t the only one talking about it on Sitepoint. However, too many times the trolls succeed no matter how hard we try.

I believe this is due to poor social interface.

I scratched the first draft of this post. I found it stated the obvious things, who, where, when, and why. But that’s not what I want to talk about. I want to talk about social interface and how we can use it to create better communities.

Facebook has an excellent social interfaces, I have yet to encounter a troll. Unlike MySpace, Facebook has done something amazing that I think every site should tap into.

Making better communities

First, Facebook did something radical when compared to MySpace. They took a lot of user control away!

Second, they redefined the social culture in a way that’s hard to explain. They created a site were self expression was key and connecting with friends means everything.

Twitter has a different approach. Share what you are doing to the world.

The difference is huge and so are the implications. On Facebook people always know who is specking, they made you their friend. On Twitter anyone can speak to you, or attack you.

Twitter’s approach may smell like bad social interface but its not; its a different type of tool. With Twitter its about who you are in the world not just among friends.  Your reputation is still on the line and if you troll you get blocked or reported.

Whats the key to it all?

Reputation! In both Facebook and Twitter your reputation is on the line, it is critical.

Why? Because people are listening to your “brand” or “name”. They are communicating with you on a personal level; not an anonymous commenter on a blog or forum.

What does this have to do with trolls?

Trolls don’t want or care about reputation. Building a site that requires it will always prove cumbersome to trolls. Like Facebook and Twitter, if we build reputation into our social interfaces we will have a lot less moderation to do.

This is so true that Stackoverflow has built their site around it; and its the biggest programming Q and A website around because of it.

Making a site that puts users on the line sounds scary but it works; and if you have a site with killer content they will be willing to take a chance.

First off, I’m going to assume you know how to get PHP on your machine. If you don’t, check out my tutorial on setting up a testing server and come back here if you want PHP5.3.

Now, on the PHP Installation website they explain how to get MySQL working with PHP5.2-. There is a file named libmysql.dll; its included in the Windows PHP distribution and in order for PHP to talk to MySQL this file needs to be available to the Windows systems PATH. If you are running PHP5.3 you will not find a file named libmysql.dll.

PHP5.3 doesn’t need the file. The new MySQL Native Driver called mysqlnd is enabled by default. The is a nice because it removes one more step in the configuration process, its not a bed of roses.

You need to use 127.0.0.1 instead of localhost in PHP5.3 to connect to MySQL.

‘So I guess this is a windows bug rather than PHP?’ No, it’s a bug in the PHP stream transport. (mysqlnd is using PHP
streams for the connection)

If PHP is asking the OS for the IP for the host “localhost”, it gets a
list with 2 addrinfo structures (one for ::1 and the other for
127.0.0.1), but PHP is only trying a connection to the first one. Well,
the MySQL server doesn’t know IPV6, and thus the connection fails.

Regards,
Carsten

Because PHP5.3 uses IPv6 for its first argument it crashes! Just run the command php -f on a file that connects to MySQL from the command line.

If you don’t know this you might find yourself wanting to kill, and it will make you want to kill.  I should tell you I’m only joking about wanting to kill?

So, if your trying to install WordPress like me today don’t use localhost! Override it with 127.0.0.1 and you will get what you are looking for.

If your not happy with having to use 127.0.0.1, like me, or don’t plan on waiting for MySQL to support IPv6 there is a solution.

Editing Windows hosts file

To keep this bug from popping it ugly head up you will need to edit your hosts file. On Windows7 64bit go to the file path C:\Windows\System32\drivers\ext\. Here you will find a file named hosts; but before you can edit it you might need to change your permissions.

Once you open the file you will either need to remove the comment on IPv4 or add one to the IPv6 line.

Recourse

Ok so, You can see the whole story here; also, you can see the my full documentation on Stackoverflow, thanks to the folks on forums.iis.net and Sitepoint I was able to clear this up.