Category: Mobile Design

SEO, Part I: White Hat vs Black Hat

Today we’ll take a brief intermission from HTML5 to start our discussion of Search Engine Optimization, commonly known as SEO. SEO is the art of getting your website highly ranked in search engines, in order to increase traffic. Getting 50% or better clickthrough from users requires being one of the first seven results; in this series, we’ll discuss how to do that.

SEO is generally broken down into two types, white hat and black hat. White hat techniques are search-engine approved methods of improving your site’s rating; black hat techniques are likely to lead to a brief improvement, followed by a quick ban. In general, black hat techniques are those that increase traffic to your site but create a poor user experience, and are often considered unethical. Today we’ll discuss black hat techniques so that you can be aware of them. Again, you should NOT use these methods to increase traffic; the search engines have ways to detect them and will penalize your site.

Keyword spam
One popular technique is to place a number of keywords on the page such that the search engine will see them but users will not. Usually this is done by setting the words to be the same color as the page background or a very small font size, although there are a number of other methods. Spammers use either keywords that are related to the page (to artificially increase it’s rating) or unrelated (to suck in people for whom the page is not useful). Search engines hate this. As a general rule of thumb, don’t do anything to make the page look different for humans and computers (but there are exceptions – we’ll cover one in part III).

Cloaking
Cloaking is when, rather than display the page differently to users and search engines, the webmaster actually shows them different pages using methods such as javascript redirects and 100% frame.


Doorway pages
A doorway page is when the main page appears to direct the user into one of a number of other pages based on some criteria, but every destination is actually the same. For example, the main page may contain a link to another page of the site for each state, but the pages do not actually contain any state-specific information; the point is just to get users to load more advertisements. Again, search engines consider this to be spam; you shouldn’t have duplicate pages on your site. The term is also used for pages what are created to be visible only to search engines.


Computer-generated pages
You’ve probably seen webpages that seemed to be on-topic, but when you read them they were poorly written and didn’t make a lot of sense. Often these pages are computer-generated, pulling content from various sources. Not only do these pages tend to be fairly worthless to the user, they’re a strong spam signal for the search engine.
This isn’t even close to being a comprehensive list, but hopefully you’re getting the idea: don’t try to trick the search engines. Next time: Google-approved SEO.

HTML5, Part III: Local Storage

In the beginning, there were cookies. The cookies were tasty, and removed the need to log in to websites every time, although some people didn’t like them due to privacy concerns. But cookies were sent with every HTTP request, usually unencrypted, slowing down the session and possibly exposing sensitive information. Plus they could only hold 4 kb of data, which is fine for remembering someone’s username but not much more.

Then HTML5 appeared, and it had in its specification a new thing, Web Storage. Web storage was like cookies, but it was never sent to the remote server unless specifically requested, didn’t require a third party add-on, and was big enough to hold useful information. And this was good.

HTML5 storage is currently supported in the latest version of every major browser, but as we discussed yesterday, you can check if it’s available using the Modernizr script and the Modernizr.localstorage bool. Your size can use up to 5 megabytes to store your information, though you unfortunately have to store it as strings, which can greatly expand the size of your data.

There are two storage options you can use: sessionStorage and localStorage. SessionStorage information will be lost when the window is closed, while localStorage info is permanent (until deleted). The code is fairly simple:

localStorage.setItem(‘itemname’, ‘data’); // define and set the variable

localStorage.getItem(‘itemname’); // return the data; notice that this isn’t a complete statement as you haven’t done anything with the data. A complete statement would be along the lines of

alert(“Your data is ” + localStorage.getItem(‘userdata’);

If you don’t need the data anymore, you can get rid of it withlocalStorage.removeItem(‘itemname’);

SessionStorage works the same way; just replace “local” with “session” in the code above. You can also store content in an SQLite database and use standard SQL inside of your script:

database.executeSql(SQL command) {
// do something with the results
}

As with cookies, local storage comes with some privacy concerns. Anyone putting content on multiple sites (most likely an advertiser) could use the store to track a user across multiple sessions, building a fairly detailed profile. As with cookies, the user has the option of refusing to allow data to be stored or expiring it after a given amount of time. Additionally, it may be possible to access another site’s information through spoofing if SSL is not used. One restriction to be aware of is that multiple pages on one hostname (e.g., free website hosting such as the now-defunct geocities) share a local storage object, so any page can access and overwrite information stored by other pages on the same host.

On a side note, Google previously implemented similar functionality with Google Gears, but they are now abandoning it in favor of the local storage and geolocation options in HTML5.

HTML5, Part II: What Features Does My Browser Support?

Last week we dived right in to our discussion of  HTML5 with a quick tutorial on how to embed video, but we also mentioned that modern browsers support a subset of the new markup – no browser is yet 100% HTML5 compatible. So how can you tell (aside from running around looking up references) which features are supported?

When your computer downloads a webpage, it starts by creating the Domain Object Model (DOM), which is a collection of objects representing all elements on the page. If a browser supports a particular element or feature in HTML5, its DOM will contain that information. While you can check for each element you need individually, MIT has provided a javascript library that detects support automatically. After downloading it, you’ll need to include the following element inside the page head:

<script src=”modernizr.min.js”></script>

 

The script runs automatically when the page loads and creates an object called Modernizr that you can test to see which features it detects by checking the truth value of the appropriate boolean.  For example, to check whether the browser supports HTML5 Audio, you could use a line in your javascript saying:

if (Modernizr.audio) {

The website contains sample usage for each of the items it checks. Additionally, it helps keep things from breaking in Internet Explorer. By using Modernizr, you can serve the appropriate HTML5 code to modern browsers, while providing other content that will make sense to older browers.

Remember last week when we talked about  putting three different <source> tags inside a <video> element? Another option would be to use Modernizr to check what type of video the browser is capable of playing:

if (Modernizr.video) { // Does the browser support HTML5 video?

if (Modernizr.video.ogg) {

//play Ogg Theora video / Vorbis audio in an Ogg container
} else if (Modernizr.video.h264){

// play H.264 video / AAC audio in an MP4 container

}

}

Now that we’ve seen how to figure out what features the user’s browser supports, let’s get back to things that most browsers do. Next up, something every modern browser (even IE 8) supports: local storage!

HTML5, Part I: Video

I had originally planned to finish off my Web 2.0 Overview before getting into the specifics of each technology, but yesterday’s introduction to HTML5 got a lot of attention, so we’ll move it up a bit.

HTML5 supersedes HTML 4.0, XHTML 1.0, and XHTML 1.1; it provides new tags for handling many common web design elements that are currently handled with third party applications such as Flash, and standardizes elements that have never been formally documented.

What do you need to get started?
The latest versions of Chrome, Firefox, Opera, and Safari all support some but not all HTML5 features; Internet Explorer 8 has a few features and IE 9 is expected to add more. As always, when designing for Internet Explorer, be particularly careful about elements that compete with Microsoft’s own offerings – for example, IE 8 does not support the canvas tag, which would replace Microsoft’s Silverlight technology. In this series, I’ll attempt to focus on those elements that are supported by all of the major browsers, or at least mention the exceptions.

Show me the video!
Let’s start with how to embed video in a webpage. Traditionally this has been done with a third-party plugin such as QuickTime, RealPlayer, or Flash; now we have a standards-based method that should be supported on all platforms. Currently the <video> tag works in Chrome, Firefox 3.5, IE 9, Opera, and Safari 3; however, each browser supports different codecs and containers. Unfortunately, there is no one container/codec combo that works for all of these browsers, so if you want your video to show up for everyone using an HTML5 browser, you’ll need to encode it multiple times. Fortunately, HTML5 allows you to specify several videos in one video tag, leaving it to the browser to choose which one to display. To have the video display on all browsers, you’ll need the following encodings: (Converting video into the correct formats is one service a professional website designer will provide)

  • Theora video and Vorbis audio in an Ogg container
  • H.265 video and AAC audio in an MP4 container
  • VP8 video and Vorbis audio in a WebM container

Finally, to accommodate browsers that do not support the <video> tag, you’ll want to fall back to a Flash video.

So give me the tag details, already!
When you only have one video file, the tag works pretty much as expected; however, it has a number of optional (but desirable) attributes:

<video src=”videoname” width=”XXX” height=”YYY” controls> </video>

So what’s all this? The src part, width, and height should be fairly self-explanatory;  width and height are optional but should be used anyway. By default, the video tag does not offer the user any type of control over the video; the controls option adds a built-in set. Alternatively, you can write your own; the video element has methods play() and pause() and read/write properties volume, muted, and currentTime.

If you expect every visitor to watch the video,  the preload option will start it downloading as soon as the page loads; setting preload=”none” will tell the browser not to load the video until it’s requested. Finally, the autoplay option does exactly what you would expect; it downloads the video and starts it playing as soon as possible.

Several videos, one tag
What if you went ahead and made three encodings of your video so everyone using an HTML5 browser can see it? In that case, your code will look something like this:

<video width=”xxx” height=”yyy” controls>

<source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

<source src=”video.webm” type=’video/webm; codecs=”vp8, vorbis”‘>

<source src=”video.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<object width=”XXX” height=”YYY” type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>

<param name=”movie” value=”__FLASH__.SWF” />

<param name=”flashvars” value=”image=__POSTER__.JPG&amp;file=__VIDEO__.MP4″ />

</object>

</video>

Do you really need all that? Well, no…but if you don’t specify exactly how each video is encoded, the browser will find out whether it can play a video by downloading it and trying to play it, wasting your bandwidth and the user’s time. Better to put in a little extra effort beforehand! The object tags will be ignored by HTML5 browsers (as will any non-source tags inside the video tag) but will cause older browsers to display the flash movie.

Side note: the MP4 file format should be listed first, as the iPad only notices the first source listed and will fail to play your video otherwise.

Acknowledgements:
Video for Everybody offers a more in-depth discussion of setting up your videos to be readable by everyone,

HTML5: Up and Running (due out next month from O’Reilly) contains a fascinating discussion of the history of HTML and instructions on encoding video.

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.

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!

Building a Blog, Part IV: Update Early, Update Often

Now that you have your blog set up, the tricky thing is to keep it updated; this is particularly true if you don’t have someone whose job is simply to run your online profile. Fortunately, it’s easy to have posts go up on your blog every day without actually having to write something every morning; WordPress allows you to write a post and schedule it to appear later.

If you’re at the Add New Post screen, on the right hand side above the Publish button you’ll see the words “Publish immediately”, followed by an Edit link.   Clicking on that allows you to schedule your post to go up at some time in the future.  (Do watch out, though – this defaults to 24-hour time, and if you’re not careful you could set your blog to publish in the past instead.  That, of course, could create a time travel paradox and kill us all..)

The first three articles in this series, for example, were all written last week.  Why not just post them immediately?  Well, then you’re not giving your customers any reason to come back!  Which would you rather have: a potential customer visiting every day to read your new posts, or visiting once a week when you upload them all at once?  Additionally, if you use the SEO tools we’re going to talk about in a later article, the search engines will notice every time you post an update, which helps keep your site fresh in the rankings.  Most importantly, though, look at it from the user’s perspective.  Your readers are either using an RSS feed (more on this later), in which case they’ll only visit when you post something new, or they aren’t, in which case they get annoyed when your site hasn’t been updated!

Time for an example.  One week ago today, I launched a new blog called Good News About America; I’ll be using it as an example for many of the things we’ll be talking about.  Notice that there’s no professional artwork or design involved here; it uses a standard free template that anyone can download and a few easy-to-use plugins.  The only things at all unique about it are the header (simply a few words photoshopped onto part of a photo I took) and, of course, the content.

As you can imagine, only a few days after launch, the blog doesn’t have a ton of visitors.  It is, however, being regularly indexed by the search engines and has already started receiving some traffic.  As an experiment, I deliberately stopped posting for over 24 hours; here are the results: [1]

Pretty impressive, eh?  In the first five days, I had 34 visitors, 116 pageviews, 290 spiders, and 8 feeds.  On day 6, I had exactly one of each.  However, after posting a new article and waiting a few minutes:

The second screenshot was taken less than an hour after the first one, maybe half an hour at most after the site was updated, and already it’s been spidered four more times. By the end of the day, it had been spidered 38 times and had 9 feeds.

What should you take from this?  I’m hoping these three points:

  1. Your blog should be updated daily, at minimum
  2. You should be monitoring traffic to see how changes affect your visitors
  3. You should be letting the search engines know when you update, something we’ll discuss in tomorrow’s article.

Next time: WordPress plugins you absolutely need to use.

Footnotes:

[1] The reason there are no statistics for the day the blog launched is that the tracking plugin hadn’t been installed yet; we’ll talk more about it in the article on adding plugins to your blog.

Building a Blog, Part III: Making Your First Post

When you first start your blog, you’ll already have one post and comment; you’ll want to get rid of these samples before you start actually writing.  Click on Posts in the sidebar; this takes you to a list of your posts (currently just the one); by mousing over the sample article, you’ll get the option to send it to the trash.  Now, let’s add some real content.

In the sidebar or at the top of the page, click the button that says Add New.  This brings you to a simple form with a number of fields; the only ones you need to worry about to start are the first two boxes, which are the title and the body of the post.  The title should be something descriptive that draws people in and makes them want to read what you have to say; the body can be whatever you like.  Go ahead and type something into both fields.  Now look to the right and you’ll see a box labeled Publish.  What you’re currently working on is a draft; you can hit Save Draft and it’ll be ready for you to come back to and finish later.  Alternatively, you can go ahead and hit the publish button; this will put the post up on your website for all to see.  Not sure how it’s going to look?  Go ahead and click Preview first; in fact, I recommend always previewing your post and reading over it for errors before it goes live.  The preview function will show you the most recently saved version of your article, so if you’ve just made changes and it hasn’t autosaved yet (and you haven’t hit the Save Draft button) you may not be looking at the most recent version; when I finish typing an article, the first thing I do is save it and then read it over for errors.

One of the nice things you can do is categorize your posts, which makes it easier for people to find what they’re looking for.  By default, everything goes into the Uncategorized category (you can change this in your settings), but you can put it into any categories you want; just click Add New Category and then be sure the boxes for every appropriate category are checked.  You can further help your users (and search engines) find the appropriate articles by adding tags; for example, this article falls under our category Web World, but is also tagged as dealing with blogs.

The key to making a good blog is to write about something you’re knowledgeable about and interested in, and to avoid things that turn people off, such as spelling mistakes.  An SEO specialist would also be checking for proper keyword placement (among other things) to help the site rank highly in search engines.  For example, there are a huge number of businesses with the name “X Ear Productions”; a Google search for ear productions turns up about two and a half million websites, with names such as Broken Ear Productions, Write In Your Ear Productions, Flapping Ear Productions, Dog Ear Productions, etc.  Very little SEO has been done for Moonlight Designs Studio, but we’re still on the first page of the results.  The more unique your business is, the easier it is to get you top placement for the appropriate search terms; this is particularly true if your business targets a particular geographical area. However, building a loyal customer base has always been about providing good service, and in the case of websites, this means providing useful content.  So get writing!