Category: Google

Google Adsense and Smart Pricing

You may have noticed that we don’t run advertisements on this blog. The main reason for that is that we don’t think it looks professional on a business website; also, we don’t want you to click an ad and go elsewhere. We want you to stay here and hire us!

That said, we do own other websites which are monetized with adsense and make about a buck fifty per click. This brings us to another reason we wouldn’t want to put adsense on this blog: it could drag down what we’re making elsewhere! Why? The answer lies in Google’s “smart pricing” policy.

Google wants to  make sure that their advertisers are getting good value for their money, so that they’ll keep spending; this means not putting high-cost advertisements where they’ll receive low-quality traffic. Social media traffic, for example, tends to not click on ads and not buy when they do, so a blog that gets a lot of social media traffic compared to search engine traffic will get paid less per click. Similarly, Google hates Made for Adsense (MFA) sites, which have no content whatsoever, just a bunch of ads; the hope is you’ll click on one of these spam sites and immediately leave via one of the ads. Whereas a legitimate site like this one tries to provide useful information – we want you to find what you were looking for even if you don’t hire us – a spam site just wants you to click an ad and doesn’t want anything getting in the way of that, including content.

However, bad or no content isn’t the only way to get smart priced; as mentioned, the type of traffic your site receives matters as well. This site would do poorly with adsense because we discuss topics like blogging and web design. It’s not that Google dislikes these topics; it’s just that people who want to read about them generally don’t make money for the advertisers, so Google isn’t willing to pay much for that traffic.

A little bit of money is better than no money, right? The thing is, Google doesn’t smart price websites; they smart price adsense accounts. If I was to place adsense on this site and Google decided to smart price us, the pay rate on my other sites would go down as well, which means that having the advertisements here would actually be costing me money! Fortunately, if you get caught in that trap, there’s a way out: just remove the adsense code from the offending site and your remaining sites should return to normal.

Website Usability, Part III: Text

One website that I tend to avoid if at all possible is MySpace; too much of it seems to be pages composed with horribly clashing colors, backgrounds that don’t contrast well with the text, and other things that make them difficult (and annoying) to read. I would go so far as to call the typical MySpace page an excellent lesson in what not to do. What can we learn from them?

 

Formating your text

If you want people to to read your site (rather than hitting the back button), make it easy for them. Use 12-point (or higher) resizable text, preferably dark text on a light background. Choose one font, preferably a standard one such as Times New Roman or Arial, and stick with it. Typing in all-caps has been considered annoying since the earliest days of the Internet; use appropriate capitalization!

Be consistent

As mentioned, you should choose one font to use for the entire site; common page elements should also be consistent. Navigation bars, for example, should be in the same location on every page.

Attracting Attention

A number of elements are designed for attracting attention; use them sparingly. For example, this page uses bold headers to let the reader know what each paragraph will be about; randomly bolding words throughout the document would only lead to confusion! Animation in particular should be used sparingly;  it should convey useful information that the reader needs to know immediately, or users will simply find it annoying. Additionally, use emphasis (bold, italics, etc) only on short phrases, and never use underlines for emphasis as users are programmed to regard underlined text as links.

Remember: making it easy to quickly scan webpages for important information makes them more useful to the user; avoid using attributes that can be distracting or make the page difficult to read. Strive for simplicity in design; don’t change how information is being presented simply for the sake of variety.

Website Usability, Part II: Accessibility

By law, all websites owned by the US federal government must comply with the Section 508 Federal Accessibility Standards. For private sites, such compliance may not be legally required, but it’s still a good idea; adhering to standards ensures that all of your potential customers can utilize your site.

 

The main component in designing an accessible website is ensuring that any non-text element, be it photos, music, video, etc, has a text equivalent; this can mean adding descriptive text to a photo or subtitles to a movie.  Some of the most common disabilities include:

Hearing Loss
Ensure that any audio that is required to fully use the site has accompanying text; for example, you can add captions to a video using software like Camtasia, and provide transcripts of podcasts. In many cases, audio-to-text programs like Dragon NaturallySpeaking can do much of the work for you.

Vision Loss
Designing for vision loss often means desiging for screen readers, which has the side benefit of making your website easier for spiders as well. Ensure that alt tags contain useful information, and consider that blind users may not be able to tell if part of the screen updates without a page reload. People using screen readers may also appreciate being able to skip repetitive navigation links, rather than having to wait for the entire menu to be read out every time. Finally, ensure that all elements are accessible using the keyboard only.

Colorblindness
A significant percentage of the population has difficulty discriminating colors;  avoid using color as the only way of transmitting important information, and choose high-contrast color combinations. There are tools available that allow you to view your website as it would be seen by people with various types of colorblindness; you can also read more about optimal color choices here.

Addendum
When adding movie captions, etc, be sure that related information is synchronized; captions become annoying rather than helpful if they show up too late! CSS is a great thing for designing accessible websites, as it encourages thinking about content separately from style; be sure that it’s possible to read the page and have it make sense without loading the associated stylesheets.

Ensuring that your website is accessible can be a pain at first, but your customers will appreciate it. It’s always worth a little extra effort to have your site read by the widest possible audience!

The Google Sandbox

You may have heard people speak of the Google Sandbox as a dreadful place to be avoided. But what is it, exactly, and how can you avoid going there?

Google’s goal is to return the best possible search results. They have a number of rules for webmasters that basically boil down to: don’t screw with the search. For example, Google will penalize your site if they catch you buying or selling paid links.

Suppose you have a brand new site, just registered within the last few months, and it has thousands of links to it. What’s the most likely explanation – that this site is so incredible all these people have found out about it already, or that someone is trying to manipulate the search engine results? Google will assume the second, and they’ll put the site in the sandbox, which generally means it’s not going to show up when someone does a search for the targeted keywords. Considering Google’s share of the search market, this is a Bad Thing.

While the sandbox can be triggered automatically, Google employs people who actually go out and look at sites. If you have a new site that’s been growing so quickly that it got put in the sandbox, but not so quickly that it couldn’t just be the greatest site ever built, eventually someone from Google will come out and see if the site really does have the content the links say it has. For example, if One Ear Productions was a new site and suddenly had thousands of links talking about our awesome web design, someone might come check that the site really is talking about web design and doesn’t just have some crappy computer-generated articles and a bunch of advertisements. Google isn’t going to decide whether this really is the greatest web design company ever or whether we really are offering extremely informative articles on web design;  they just want to know that this is a legitimate site and we’re not trying to jerk them around.

Cliff notes? Publish high-quality content. Don’t buy or sell links, don’t give Google a reason to think you’re doing that, and don’t put a link to your brand new site in the footer of your 10,000 page site. Otherwise, you may find yourself sitting in the sandbox all alone..

HTML 5, Part IV: Canvas

One of the hot new elements in HTML5, canvas allows you to draw graphics, generally using javascript. Remember that the canvas tag is not supported by IE8, so you’ll need to provide fallback content, like we did in the HTML5 video section, for IE users.

<canvas id=”id” width=”x” height=”width”> </canvas>

The width and height attributes, shown above, are both optional; unless specified they default to 300 pixels wide by 150 pixels high. You can set these using DOM properties or resize the element using CSS.

The canvas tag has not been implemented consistently between browsers. Notice that this isn’t a self-closing tag; text between the two tags will be ignored, so you would put replacement content there for browsers that do not support the canvas tag; leaving that space blank means that older browsers simply won’t display anything. Safari does not actually require the canvas end tag, but Mozilla does; thus the above style works for both as Safari simply ignores the </canvas>.

The WHATWG page has full documentation for this tag; unlike most other HTML, it requires some scripting to be useful. Rather than fully explore the tag, I thought I’d link to a few interesting sites that use it.

The HTML5 Canvas and Audio Experiment puts on an interesting light show (with sound, if your browser supports the <audio> tag). Notice the fallback text inside the audio tag in the page source, displaying an error message for browsers that don’t support it.

ball game – click the set of two or more balls of the same color to remove them. Can you get them all?

You can even use canvas to play a simplified game of Super Mario Kart!

Web 2.0, Part IV: HTML 5

If you’ve been reading this series, chances are you’re familiar with HTML. You may also be familiar with XHTML. For a while, it looked as if XHTML might replace HTML, but XHTML2 has been killed and HTML5, along with XHTML5, has arrived. Had enough acronyms yet?

Last October, the last call went out for comments on the HTML5 working draft, which means that the standard is essentially done. The major browsers at least partially support it, which means you should be taking advantage of the new capabilities offered. So what’s new in HTML5?

First off, we continue the separation of content from style; tags such as <font> and <center> have been dropped in favor of cascading style sheets.  We’ll be talking about CSS in the near future, but what it does is allow you to write your content without worrying about how it will look, then create a file that defines the look of all the pages that include that file. Aside from promoting better design practices, this makes updating pages a lot easier as the look and feel of the entire website can be altered by changing one file! The following elements are not in HTML5 as they represent functionality better handled by CSS; that is, they are presentational only. Browsers will still support the tags to be backwards compatible with previous versions of HTML, but HTML5 documents should not use them: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>. Additionally, any attributes related to presentation (such as align, bgcolor, etc) should not be used in HTML5 as their functionality is better handled by CSS.

Other tags that have been removed include <frame>,<frameset>, <noframes>, <acronym>, <applet>, <dir>, and <isindex>.

HTML5 supports the following new tags: (notice that many of these replace the generic <div> tags to allow cleaner markup)

  • <article> represents content that is independent from the rest of the page; for example, this could be a single article on a blog
  • <aside> tells you something that’s only slightly related to the rest of the page
  • <audio> adds an audio file
  • <canvas> is for rendering dynamic bitmap graphics
  • <command> is for a command the user can invoke
  • <datalist> specifies options for an input field and can be used for autocompletion
  • <details> allows the user to request additional information
  • <embed> is used for plugin content
  • <figure> combines the various elements of some piece of content, such as a graphic and its associated
  • <figcaption>
  • <footer> is exactly what you would expect
  • <header> is a group of navigational aids
  • <hgroup> is a section header
  • <mark> is used around a section of text that is highlighted for reference purposes
  • <meter> represents a measurement
  • <nav>, of course, is your navigation tool
  • <progress> represents completion of a task
  • <section> is a generic section marker, which can be combined with h1-h6 to indicate structure.
  • <summary> is what you’d expect, and can be combined with the details tag
  • <time> gives a date and/or time
  • <video> adds a video file

After we finish the overview and start our HTML5 series, we’ll cover some of these tags in detail. Here are a few other changes to be aware of:

  • The <a> tag can now be used without an href attribute, as a placeholder link
  • The <b> tag now represents text that should be distinct from the surrounding text without implying any additional importance.
  • <cite> is now used only for titles
  • <i> now represents text in a different mood or voice from the surrounding text
  • <strong> now represents important test

Ready to get started? Start your new documents with <!doctyle html>and you’re good to go!


According to my statistics, a fair number of people are reading these posts, but I haven’t gotten much feedback aside from spam. If you have anything in particular you’d like me to write about, please comment on this post and let me know; I’ll certainly take it into consideration!

Web 2.0, Part III: Can You Digg It?

Surfing the Internet, you’ve probably seen the buttons suggesting that you Digg the content you’re currently viewing.  So what is this Digg stuff anyway?

Digg is a social news site that was founded in late 2004; it allows people to promote articles they feel are newsworthy. Users vote to either digg or bury an article; high-scoring articles make it to the front page, after which the site owner hopes he bought a strong enough server to handle the traffic. (See also: Slashdot effect)

So if you’re trying to get lots of people to your site, getting dugg can be the way to do it. How does that happen?

First off, of course, you need good content; your site needs to be something people will want to share, something they can point their friends to and say “hey, this is interesting”. After that, you have two options. You can go to digg.com and digg your own stories, hoping people will see them and digg them as well. Or you can add a digg button to your site, allowing the people who are already reading it to give the page their vote of approval by clicking the icon.

Either way, don’t be spammy. While it’s fine to dig your own site (and is specifically allowed), it won’t be successful unless you have something people actually want to read, and if you’re the first to digg a page you’ll need to take the time to write a good description as well. But if you’ve got great content that your users are enthusiastic about, providing a digg button helps them to share your site with others.

aweb 2.0, Part II: Wik, Wik, Wiki!

These days, who hasn’t used Wikipedia? The largest encyclopedia in the world, it was created mostly by its users and, as of this writing, has a google pagerank of 9 and millions of backlinks.  Sounds like something to emulate, doesn’t it? As it happens, the software used to create Wikipedia can be yours for the low. low price of…free!

Ok, enough with the used car salesman routine.  The truth is, wikis are very useful when you have content that should be created and edited by a number of users (although they can also be used as a simple CMS – just require registration to post and don’t let anyone else register!) While there are a number of wiki implementations available, if you plan to open your wiki to the public, MediaWiki is probably your best bet because users will already be familiar with how it works through using wikipedia, wikimedia, and other MediaWiki-based sites. Access is open by default, so it you’re looking to set up a private wiki, you might be better off with a different software option.

To set up your wiki, visit MediaWiki.org to download the software, then unpack it and set up a MySQL database as you did in the building a blog articles. Like WordPress, the wiki software has a web-based configuration utility; at the time of this writing, the latest version is 1.15.4, so to configure the site I went to sitename/mediawiki-1.15.4; if your site is to be entirely wiki-based, you probably want to actually point the url to the wiki directory.

Now just follow the instructions on your new wiki page to build your site! Notice the tabs at the top of each page. Assuming you’re logged in as an administrator, one of them will be “protect”; you can use this to restrict who can edit the page. Even if you plan to let anyone edit pages, it’s probably a good idea to protect at least the main page so random people don’t come along and change it!

You can set any page to be editable by admins, by registered users, or by anyone. Further restrictions are possible – you can prevent new accounts from being created, only allow account creation by sysops, etc – but they require editing the php code; you can find instructions in the WikiMedia manual.

Now go forth and wiki!


Blogs and wikis are just a few of the services that Moonlight Designs Studio provides; check us out today!

Web 2.0, Part I: Overview

You’ve probably heard the term web 2.0, which refers to more interactive websites (although no single definition exists).  Rather than just browsing static webpages, users interact with and even change them; this is good for the site owner, because not only are interactive websites more likely to keep users coming back, users can actually add value to the site.

A number of tools have been developed that are particularly useful for building web 2.0 sites; today we’ll take a brief look at a few of them.

AJAX, which stands for Asynchronous Javascript and XML, allows for faster user interaction.  Simple processing is done on the client side in javascript without having to wait for the data to be routed to the server and back; in the meantime, data that does need to be transferred is formatted with XML. AJAX allows you to do things like updating parts of a page as new information becomes available, without ever reloading the entire page.

Flash, of course, is still very popular in spite of not being supposed on the iPad.  Many flash applications are now written using Adobe Flex.  Flash is frequently used to add animation, video, and interactivity (particularly advertisements and games) to websites.

Much of the functionality of flash is now being provided in HTML5; while it is still technically in draft status, major browsers are already being updated to be compatible with the new standards.  HTML5 has the advantage over other technologies in that it should (soon) be supported on all systems, whereas Flash and Javascript pages will not be available to all users.

Blogs, of course, are a big part of the more interactive web; we covered WordPress last week, but there are a number of other options as well. Social networking (e.g., Facebook) is huge, and users also want new ways to consume your content (e.g., RSS). PHP has long been used for coding interactive sites, particularly in combination with MySQL databases. CSS, of course, allows you to customize the look of your content without having to do any extra work on the content itself; see the Zen Garden for a nice example of what CSS can do.

In the future, we’ll be providing a more in-depth look at each of these technologies, as well as talking a bit about when you might want to use them.

Building a Blog, Part V: WordPress Plugins

So your blog is up and running.  You’ve made a few posts, sent a link to your friends or customers, and made sure everything is spelled correctly.  Then you realize you have no idea if anybody is actually reading your posts, and the comments are filled with robot spam.  What now?

Time to add some plugins to your blog!  A plugin is a small program that adds functionality to WordPress.   As of this writing, WordPress ships with Askimet already installed; Askimet is spamcatching software to filter out robot posts from actual users.  Log into your administrative panel, click on plugins, then follow the directions to active Askimet.  Congratulations!  You’ve struck another blow in the ongoing fight against spammers!

But now you notice the Add New link, click it, and are overwhelmed by the variety of plugins available.  Which ones should you get first?  Let’s start with a few of the basics.  Remember: to use one of the plugins, you must first install and then activate it.

Google XML Sitemaps Remember when I pointed out how updating attracts search engines?  Google and other engines like to crawl frequently updated websites several times per day to keep their results as fresh as possible.  Not only does building a sitemap help the search engines to find all the content on your site, but the plugin will automatically notify Google that your website has been updated, encouraging them to crawl your site immediately.

StatPress keeps track of all kinds of handy statistics, presenting them both as numbers and as a colorful bar chart, so you can see how much traffic you’re getting.  If a promotion you’re running is working particularly well (or badly), this is a good way to find out.

Broken Link Checker What’s worse than clicking on a link and getting the dreaded 404 error?  This annoys your readers and makes you look unprofessional.  This handy plugin will keep an eye on all of the links on your site and let you know if any of them no longer work.

Are there other plugins you should have?  Absolutely!  In the future we’ll be talking specifically about plugins designed for SEO, which deserve a whole post of their own.  One thing to keep in mind when trying out new plugins is that they are not all compatible with each other; sometimes you can get odd errors as a result of interaction between two incompatible plugins.   If your site used to work right and now is behaving strangely, try deactivating plugins until the unwanted behavior goes away.

That’s all for this week; be sure to check back on Monday for more, and in the meantime, don’t forget to visit our main site!