Back in December, we put together a three part Guide to Content (Part I, Part II, Part III), and we even made a sweet infographic! While these guides are packed full of things you should do with your content, we didn’t focus very much on what you really shouldn’t do.

Whether you’ve got a blog or a static site, here are some recommendations of what not to do with your content. Your site visitors will thank you, and so will your web analytics and customer conversions!

Don’t brag.
Your site is your outlet to get your message out to the world, but your site visitors aren’t reading your content to agree about how awesome you are. They want to know what you can do for them. By all means, emphasize your strengths and use testimonials, but focus more on what you can offer your potential customers now and in the future rather than what a great job you did on your last project.

Don’t leave your facts unsupported.
Too often we see the phrase “studies show…” without any kind of link or supporting details. If there’s research to back up your claims, link to it! Where ever possible, in fact, link to key sources to give your content credibility. EasyBib is a great resource to help you quickly create correct citations for websites or online journals!

Don’t have music or video that automatically plays.
Have you ever opened a new site when you’re in a quiet place, only to have your speakers blare some unexpected and unwanted noise? It’s enough to make you close the tab right away and never go back. Make sure any music or video is not set to autoplay to avoid making this big website mistake.

Don’t overuse stock images.
Stock images are a great resource for anyone who’s putting up a website or blogpost and doesn’t have the access or means to hire a photographer. The problem comes in when the stock images are everywhere on your site. Your visitors know a stock photo from a genuine one, and if your site is covered in photos of too many beautiful, smiling people in perfect lighting, they might internalize that your company is impersonal, too. Whenever possible, try to use photos of your real employees and customers.

Don’t forget headings.
A lot of content guides will tell you to keep your content short, with as much above the fold as possible. But sometimes that’s just not an option. If you’ve got a longer page with a lot of content, make sure to break it up with headings (that’s your h1, h2, or h3 tags depending on your stylesheet) so that people can quickly find the content they need or pick up where they left off.

Don’t write content for search engines.
Having a Search Engine Optimization (SEO) strategy is a smart way to get more traffic to your site, but some sites go way overboard. Yes, it’s important to work your targeted keywords into your copy, but remember that you want humans to read this, not robots. Don’t sacrifice readability or quality for the search engines – your readers will be able to tell who you’re really writing for.

Lastly, be sure to check out our previous content guides (Part I, Part II, Part III) for things TO do!

It’s no secret: people love being asked what they think, but all too often, websites and blogs forget about the humble survey. A simple multiple choice question can make your visitors feel engaged with your post or page, and maybe even encourage them to leave a comment. Plus, surveys are easy to build and implement on your site – so you don’t even have any excuses!

A few of our favorite survey resources include…

Survey Monkey
If you’re just getting started with surveys, Survey Monkey has a fantastic free package that includes up to 10 questions per survey and up to 100 survey participants. They’ve got lots of templates and color palettes to choose from, and the easy embed makes it a cinch to publish your survey in no time. For more design customization and unlimited questions and participants, just upgrade to the $17 per month plan, which also includes 24/7 customer support.

PollDaddy
This one also includes a similar free package, plus premium packages if you want to move up!

Formsite
Slightly more complicated, but also more powerful, this survey tool includes a payment gateway, CSS access, and more.

Survey Plugin for WordPress
If you want to manage your surveys right from your dashboard back end, try out this simple plugin for WordPress.

So now that you’ve got a few resources to choose from, here’s a few things to keep in mind when you’re creating your surveys…

Keep your survey focused.
Even if the survey is just a quick poll at the end of a blogpost, make sure the questions are all relevant, clear, and concise. The fewer questions, the more willing people will be to fill it out.

Stick with closed questions.
Close-ended questions like multiple choice, yes/no, or scales (1-5) are easier to analyze and less intimidating for the participant. A fill-in-the-blank or paragraph form question is likely to lead to fuzzy results and fewer submissions.

Actually use the results.
Don’t do a pointless poll. Once the results are in, write a blogpost about the findings that the people who participated can come back to read. If the survey is more customer feedback focused, make sure you listen to their advice and thank them for participating. Speaking of which…

Thank your participants.
A thank you page will let participants know their answers have been submitted and that you appreciate their feedback. You can also include information on this page about when/if the results will be broadcasted.

Test your survey before it goes live!
This one seems obvious, but it’s worth noting. Give your survey a few run throughs to be sure required questions are actually required, the submit button works, and the user is successfully redirected to a thank you page. Try to break the survey – if you can’t, it’s good to go! Happy testing!

Considering the speed that the web is progressing, it’s no surprise if your business’s website design feels a little tired, even if its only a few months old. If you’re not ready for a complete overhaul, though, there are a few ways to freshen up your look and increase your website’s effectiveness with minimal changes. Here’s a few ideas, plus resources to get you started!

Get new buttons
Especially for your call-to-action! A shiny new button will draw the attention of first-time visitors, and also repeat visitors who’ve trained their eyes to gloss over your action buttons. Freepik.com has tons of free vector button files you can download and pull right into Photoshop. Just add text. By People has a fantastic and free vector image pack that includes 70 buttons and 50 social media icons, not to mention shadows, background, menus and much much more. Almost everything is also a .psd, so it can easily be edited or added to in Photoshop.

Add new photos
Has the same stock photo of a smiling woman been on your front page for a year? It’s definitely time for a change. Just be sure to find a legal image. Check out our blogpost, 5 Free Web Image Resources, for our top sites to find free photos. However for your most prominent website photos, it might be worth it to go ahead and pay top dollar for a great image from iStockPhoto.

Change colors
A fresh color palette could be just the ticket to take your website from humdrum to hot. We’ve got 6 Tools for Choosing Your Website’s Color Scheme, but our favorite is definitely the Kuler Palette Creator from Adobe.

If you’re stuck with your branded color palette, try adding in another color or playing with the saturation of your existing colors to give your site a makeover. Or try adding a few striking images that are within your color palette! Find them with the TinEye Labs Multicolor Search Tool.

Simplify
Is there a lot going on your website? Try utilizing the 80-20 rule: typically in web design, 20% of the content is providing 80% of the value. For example on a restaurant website, the most valuable 20% is probably their menu, phone number, hours, and location. What do you do with the other 80%? Pare it down as much as possible, and make sure all of it plays second fiddle to the most important 20%. If your website features a call-to-action, reducing the noise on your site will hopefully lead to less distraction and more conversions!

Get more above the fold
If you’ve already simplified, you should have an easier time with this one since you’ve got less content in the first place! Move around your elements so that your most important content (especially your call-to-action/phone number) are above the fold. Try shortening your header or removing extraneous images.

Simple changes can really go a long way to make your website more appealing to your visitors and get them to keep coming back. Just remember when you’re swapping images and buttons and adding colors that the most important thing is your message, so don’t clutter it!

You’ve probably poured a lot of resources into your website to make the interface user-friendly and the design look great, but you may have neglected some of the more subtle aspects of your website. Especially if your website is your storefront (and isn’t that more or less the case for all of us these days?), it’s worth going the extra mile to ensure your potential customers have the best experience possible.

Luckily for those websites on WordPress, there are plugins to do a lot of the hard work for you. You just have to know which ones to install! That’s why we’ve compiled this list of 7 essential plugins that we recommend for any site.

Disqus
If your website allows commenting, this plugin can really boost your customer engagement. First, it allows people to sign in through more avenues; they can use Facebook, Twitter, Google, Disqus’s own network, or just your email address. It’s got a ton more moderator options, including whitelists and blacklists, and with the new 2012 Discovery Tools, you can even use Disqus to help visitors find related content and share to social media.

Contact Form 7
There are lots of contact form plugins out there, but this one is dead simple and reliable. It’s also easy to personalize the look of it in your stylesheet if you know CSS. You can have multiple contact us forms and customize the notification emails, and if you want an extra layer of security, this plugin integrates nicely with Really Simple CAPTCHA to keep out all the spambots.

Better WP Security
Since the botnet attacks that targeted WordPress accounts last month, more people are concerned with the security of their website, and you should be too! Even if you aren’t storing credit card or any other sensitive information on your site, it’s worth your while to take a few minutes to install this plugin that limits login attempts, changes your login URL, secures your administrative account, and more. Trust us, it’s much less time consuming that dealing with a hacked website!

UpdraftPlus
Now to be extra safe, though, you need a backup service – and this is definitely a good one, and free! It will backup your files and your database (most backup plugins and the WordPress exporter will only save your database), and send them straight to your email, or to a designated folder in your Dropbox, Amazon S3, Google Drive, or FTP account. If you’re looking for a service that will not only perform the backup but also store the files, you might try BlogVault, which is only $9 a month for a single website.

All in One SEO Pack
Your site is secure, backed up, and ready for comments and calls to action, but people need to find it first! This plugin automatically generates meta tags for your posts and optimizes your titles, plus connects with Google Analytics. It works right out of the box, too, so beginners to SEO don’t need to tweak the settings, but advanced users can fine-tune the plugin to their needs.

WP Super Cache
With all that traffic, you’ll need to ensure your site is running smoothly and quickly. A caching plugin will help your site load faster for repeat visitors by storing elements of the site offline on their computers. The browser will have quicker access to slower loading parts of your site, like images, so no one is stuck watching the pinwheel of death instead of reading your content! This site works right out of the box too, but has lots of options for the advanced user. Plus, it’s got an easy “delete cache” button so if you make big changes, you can be sure visitors won’t see a cached version of your site on their next visit.

WP Touch
If you take a look at your site visit analytics, we’d bet you anything that more and more of your visitors are checking out your site from a mobile device every month. That’s why it’s really important for your website to look good from phones and tablets. If your theme didn’t come preloaded with a mobile theme, this easy plugin will automatically send mobile visitors to a simplified, mobile-friendly version of your site with a drop down menu. The free version allows you to change the theme color for your mobile site, but if you want more customization, WP Touch Pro ($59) has tons of pre-made themes and options to perfect your mobile experience.

From sharing to security, we hope these plugins help your site performance, boost social sharing, and bring you the customers you want!

If you’re fortunate enough to have access to the Adobe Creative Suite, or you’ve recently purchased a subscription to their new cloud-based software, you may have worked with Dreamweaver, Adobe’s coding and website creation software. For many web development newbies, Dreamweaver seems to be near the top of the list of must-know software, but from our point of view, you’re better off spending those hours learning more about coding free-hand than deciphering the ins and outs of this over-complicated software. Here’s why…

Dreamweaver’s biggest selling point is its WYSIWYG (pronounced whizz-ee-wig) or What You See Is What You Get editor. Basically, you’ve got a split screen where one half is your code and the other half is a browser-like rendering of your current code. The problem is that the WYSIWYG editor isn’t a browser, and even the most careful coder who relies on it will need to make adjustments once they pull the website up in a live environment.

The software also features file management, pre-made templates, and code suggestion capabilities (so you type “text-a” and it guesses that you mean “text-align”), which can help someone who hasn’t memorized all the HTML and CSS properties.

So at its core, Dreamweaver is a text editor and a file manager – and a very expensive one at that. Now that you can’t buy Adobe software to install on your hard drive and it’s all in the cloud, their monthly subscription just for Dreamweaver is $20 a month, or $240 a year.

But that’s not where the problems end. Dreamweaver automatically changes coding (which sometimes you really don’t want), puts CSS in the page header, creates clunky websites, packs in tons of useless features, and takes up a much bigger chunk of processing power than anyone could need a text editor to do. Worst of all, it makes for lazy coders. It’s so much more important for a web developer to know how to free-hand code and build a file structure themselves than rely on this software. So save yourself some time and money and try one of these instead:

Text Wrangler (Mac or PC)
If lightweight is what you’re after, look no further. This dead simple (and FREE) text editor isn’t packing all those bells and whistles, but if you can code successfully in this software, you’re ready for the world!

TextMate (Mac) or E Text Editor (PC)
Another simple but powerful editor, both of these programs also feature code checking, suggestion, and file management. It’s definitely more featured-rich than Text Wrangler, but won’t leave you dependent on its interface like Dreamweaver can. TextMate is $53, but E Text Editor is free!

CoffeeCup (Mac or PC)
Like Dreamweaver, CoffeeCup’s text editor includes a validation tool for checking your code, a file manager, and pre-made templates to use as a jumping off point for your website. The interface is pretty slick too, and at only $69 (and that’s a one time fee), your wallet will be much happier, too.

Now go forth and code!

Earlier this week, we posted about the differences between XHTML and HTML, which are pretty slight. They both use the same basic vocabulary (tags), and the overall same structure, but XHTML is stricter in its syntax than HTML.

So how do you know which one is being used at all, and how does the browser know which rules to interpret the document under?

That’s where the DOCTYPE comes in. Try this: go to any website and right click anywhere on the page. You should see an option to “View Source” which will pull up a bunch of code. This is the code that the browser is reading to render the page you’re seeing. If the site is built correctly, the first thing on the page should look something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

This code tells the browser what kind of document you’re viewing, which in turn lets the browser know how to render it. In this case, the webpage is an XHTML document, which tells the the browser to hold the document to the more rigid rules of that language, instead of the more lax rules of HTML. If the document is written in HTML, the DOCTYPE might also include which version of HTML. This is not only helpful for the browser, but also for developers who may work on the site later.

Other important things to know about DOCTYPE include:

• The DOCTYPE tag is not technically written in HTML; it’s only an instruction to the browser.
• It must be the first item in the document, before the <html> tag.
• It is not case sensitive.
• Your webpage may not render correctly if you have the wrong DOCTYPE listed!

To check that your given DOCTYPE is aligned with the code you have on your webpage, you can run your site or page through the W3 Validator. This handy tool will not only tell you what problems you may have on your page, but what line they are on so you can quickly address them!

If you’re learning the ins and outs of web coding, you’ve probably started by learning HTML (and if not, we’ve got a blogpost to get you started). You may have also come across another term, one that’s related to HTML but not quite the same, XHTML. To learn the difference, we must first discuss a little bit of history…

HTML has evolved through many incarnations, and each one addresses compatibility issues by introducing and standardizing new code. Each version also eliminates support for old code that doesn’t work as well.

While HTML, a language created to display data, was progressing, another language used to store data was also developed. This language is called XML, which stands for EXtensible Markup Language. Unlike HTML, XML does not have predefined tags, so while tags like <p> and <div> are standardized in HTML, an XML coder gets to make up their own tags based on the information being stored. An email stored in XML might look like this:

<to>Kermit</to>
<from>Miss Piggy</from>
<subject>Song</subject>
<date>May 7, 2013</date>
<body>It’s not easy being green.</body>

Instead of <body> one might also (and correctly) write <message> because the exact tags are flexible, but the syntax is strict. Two of the most important rules are that tags must be written in lowercase and must also be closed. Having stricter rules ensures a better web experience.

The marriage of XML and HTML is called EXtensible HyperText Markup Language, or XHTML, which combines the rigidity of XML with the tags of HTML. The stricter rules ensure that developers use current, correct code to make the websites built in XHTML more stable. In HTML, the rules are not so rigid, meaning that the website is far more likely to break and also harder to maintain and update since errors are more difficult to spot. A few things XHTML requires that HTML does not include:

• A DOCTYPE must be specified in the head of the document.
• All attribute values must be in quotation marks.
• All tags, attributes, and elements must be written in lowercase.
• Empty elements (like <br> for “line break”) must be ended with a space and a forward slash (so in XHTML it would be written “<br />”).

Don’t worry if you don’t know what all that means yet (especially about DOCTYPE – more on that coming in an upcoming blogpost!), but this brief overview should help you know some of the most important differences between HTML and XHTML.

Now, which should you use? While there’s no discernible difference in the HTML versus XHTML user experience, XHTML is a simple step forward from HTML, it’s more stable, and it’s future ready. It’s good for developers to strive to ensure that their websites at least meet the standards set forth by XHTML, especially since it’s likely to make their website easier to maintain later on!

Last week, we covered some basics of HTML, the most fundamental of the web languages. While the Internet could function using only HTML, it wouldn’t be very pretty or as interactive. Luckily, HTML is supplemented with other languages like CSS, which is the second most-important Internet language because it determines the style and formatting of a website.

Without it, everything would look something like this:

That was the first website created on the World Wide Web 20 years ago. The formatting is basic, the fonts are default, and it’s extra, super boring. Don’t let the same fate befall your website! Learn CSS!

First, it’s important to know that CSS can be written inline or in an external stylesheet. When CSS is inline, it’s written right into the HTML like this:

<p style=”color: #FF0000; font-size: 17px;”>This is a red paragraph.</p>

That code will look like this:

This is a red paragraph.

The “style” tag indicates that everything in the quotation marks will be CSS styling. The “color” property determines the font color, and the “font-size” property is just what it sounds like! Most CSS properties describe exactly what they do. Other properties include border, text-align, and margin. There are tons of possible properties, though, and as browsers advance, more and more properties are being added to the CSS language. This means that CSS is getting more versatile all the time, which is a good thing for web design and functionality!

Inline styling can be useful, especially for unusual formatting that you only need to use once. However, if you had to style every line of HTML inline, it would take forever! Plus, if you ever wanted the change the font color, you’d have to change it hundreds of times in every line!

That’s why most CSS styling is in an external stylesheet. The top of an HTML document will often have a piece of code that looks like this:

<link rel=”stylesheet” href=”style.css” type=”text/css” />

This calls the stylesheet so the browser knows to apply the styles in that document (style.css) to the following HTML.

Depending on the website, the stylesheet might contain just a few properties or hundreds. A smaller stylesheet might look like this:

body {
background: #FFFFFF;
color: #000000;
text-align: center;
font-size: 14px;
}

p {
margin-bottom: 20px;
}

h1 {
font-size: 20px;
font-weight: bold;
}

So what we’ve got written indicates that the body of this HTML document will be rendered with a white background and black text, all the text will be centered, and the default text size will be 14. The next block indicates that all the paragraphs (<p>This is a paragraph.</p>) will have a bottom margin of 20px. The last block determines that any content in the h1 tag will be in a larger font and bold.

The advantage of writing CSS in a stylesheet (as opposed to inline) is that the whole look of an HTML document can be changed by just editing a few lines in the CSS. You can increase the font size easily, or change the color to navy instead of black in no time. And since you can call the same stylesheet from all the pages of a website, you can make those changes across the whole site with minimal editing.

While HTML may be the building block of the web, CSS is the beautifier. This is only a rudimentary introduction, and we hope you’ll be inspired to learn much more about CSS. May we suggest the W3schools tutorials?

HTML, the building block of the web, is the very first computer language any aspiring web developer or designer will study. The best part is that it’s not very hard once you learn how to read it, which really isn’t terribly difficult either. So let’s get started, shall we?

The first thing to learn about HTML (besides that it stands for Hyper Text Markup Language) is that it is built using plain text and markup tags, or more commonly, just tags. The tags describe the plain text and are enclosed in angle brackets (like these: < >). The tags also usually come in pairs, like <strong> and </strong>, which surround the text they are describing. The first tag is called the start tag or opening tag, and the closing tag, which begins with a forward slash, is called the end tag or closing tag.

Ok, that was a lot all at once. Let’s try an example.

<strong>This text is bold.</strong>

The code above will render the following sentence: This text is bold.

In this case, “This text is bold.” is the plain text, while the surrounding <strong> and </strong> tags are describing the text. Once you understand the basic structure of HTML, <tag>plain text</tag>, you’re almost good to go on creating your first HTML document! All you need to do is learn all the myriad tags themselves.

<p>This is a paragraph.</p>

Probably one of the most common HTML tags, the p tag indicates that the enclosed text should render as a paragraph. Depending on the CSS styling (which we introduced in our previous post, Web Basics: What are HTML and CSS?) the paragraph will be rendered in the main body font size, and probably have a medium margin beneath it to visually separate it from the subsequent paragraph. The browser knows to render it that way because of the HTML p tags surrounding it.

<h1>This is an H1 header.</h1>

That code will render like this:

This is an H1 header.

Unlike the paragraph, the header will render in a larger font, and sometimes even an accent font (again, depending on the CSS). The h1 tag is only one of the many possible header tags (usually there aren’t more than 6). They are numbered like this:

<h2>H2 Tag</h2>

H2 Tag

<h3>H3 Tag</h3>

H3 Tag

And so on. Now that you’ve got the basics, you’re ready to break out on your own! We recommend the W3 Schools HTML tutorials to learn all the most common tags. You’ll be a code in no time!

Web developers everywhere love using the jQuery library as a versatile, time-saving way to elevate a good website to a great website quickly and reliably. In short: it’s amazing.

A little background: jQuery is the term used to collectively refer to a large open-source library of pre-made Javascript-based scripts that work across all the major browsers. These scripts (which are free to use and modify) allow developers to add complex functionality and animation to sites without starting at the very beginning of the coding process. For the website owner, it makes advanced web features like sliders or tooltips inexpensive and easy to implement.

But there’s so much more this library can do! So, to show off the best of jQuery, we’ve put together 8 amazing, mobile-friendly, and very different jQuery plugins that can be integrated into a site design. Who knows – maybe you’ll get some ideas…

Makisu
This unraveling navigation makes the list for being so visually stunning. This is an element that a whole site could be designed around. We also love that it comes in three different options: facing left, facing right, and head on.

SuperScrollorama
This one is so fun – even the demo elicits a smile! Perhaps the demo takes it a little too far for an average website, but used judiciously, this plugin which triggers animations during scrolling could really bump your website from a snore to a success.

Scrollpath
Want to have even more fun with scrolling? Why go straight down? This jQuery plugin allows you to create a custom scroll path, so while the viewer is just scrolling down with their mouse, the website shows them going sideways, diagonal, and even topsy-turvy! This one would be great for a homepage with a story to tell.

Nested
Have a lot of content to get on the page, but still want a responsive website? The Nested jQuery plugin might be the answer. Put your content into their gapless grid, and the plugin will rearrange your elements seamlessly to fit on whatever size device you’re viewing it on.

Fit Text
This is a great one for responsive designers because it resizes header text based on the screen size. The most important text on the page will always be the best size for the viewer.

Textillate
Want your text to fly in from the right? Or bounce down from the top of the screen? Easily animate text with this plugin.

Three-Sixty
Display an object and allow a viewer to see all the sides of it by rotating it with their mouse. This would be great for a product website!

Lazy Line Painter
Note: this is not flash! That’s right, go ahead and try it on your phone – it works. If you can create a drawing in Adobe Illustrator, you can have your artwork draw itself right on your website upon the page load. Coooooooooool.

We hope we’ve given you a better idea of how amazing the jQuery library is. Are you inspired?