SEO Basics

One topic that confuses many is search engine optimization: SEO. So fuzzy is this term that many people have a difficult time explaining it. A simple definition of SEO is that it is the process of creating a website in a way that will show it high on the search lists for sites like google or bing. A more practical definition is that it is a method of writing a website so that it will show higher on the list then your rivals for the search terms you wish to target.

To a programmer, it means writing clean code and including the correct tags with the proper parameters. To a site owner, it means having a fundamental understanding of what people search for in regards to to you services. You can have the best bakery in all if Oxnard, but if you don’t mention ‘cakes’ on your site and in your keywords, then you will may be overlooked by someone searching for ‘birthday cakes in Oxnard’!

Meta tags: the basics of SEO

The first step in SEO is usually to male sure you have meta tags. But what is a tag? A tag in html is similar to a sentence: it is a complete idea that the computer understands. Unlike English that ends a sentence with punctuation like a comma or a period, a tag has punctuation at both ends. In html, this punctuation us the less than < and greater-than > signs. These are also referred to as brackets.

So basic meta tag would look like this:

1
<meta name="keywords" content="oxnard bakery, wedding cake, custom cake, fresh bread" />

That’s a good start! Now its also good practice to add a description meta tag. Its similar to the keyword tag, but in the form of a sentence. Google sometimes uses this as the small black sentence underneath the blue title link in its search lists. Its also used as a reference to the content to your site. A for our bakery, a decent example would be:

1
<meta name="description" content="Missy's Bakery, in Oxnard offers wedding cakes, custom cakes, daily fresh bread." />

Dating content is also important when it comes to SEO: older websites with constant fresh content are ranked higher then younger sites. For this reason you may want to use the two following meta tags below:

1
2
<meta name="Revisit-After" content="30 Days">
<meta http-equiv="Creation-Date" content="May 1, 2011">

The first ones instructs sites like Google to revisit your site after 30 days. It helps if you have new content by that time for the machine to consider your site fresh. Dating your page also helps keep it relevant. News articles with a more current date are more pertinent to a user then an old story, which is why they are ranked higher.

Be Descriptive but Don’t go Overboard

Do not fill up your site with the word ‘Bakery’ 300 times. Google will see that as you trying to cheat the system and will knock you down a page or two actually. Just write normal content, and try to use your key words to make them relevant. Do not repeat your meta description, but feel free to paraphrase or elaborate on it.

Also, make sure you use alternate text and titles to your images. Robots don’t have human eyeballs and can’t see that its a pretty cake on your website. This is probably one of the most helpful things that you can do to aid in your SEO, and its also part of being WC3 complaint.

A General SEO Rule of Thumb to Live By

Three things will help you win the SEO game: a constant stream of content, clean compliant html code, and patience. There is a lot of SEO ‘snake oil’ out there–link farms, paid commenters, ‘optimized’ html code with hidden ‘tricks’ to fool Google–but they are only temporary fixes to hide an underlying issue. That issue is the quality and helpfulness of your site. Just like with any other project in life–if you put in the time and effort into it, people will notice.

Posted in Posts | Leave a comment

The Dos and Don’ts of Web Design

Although I started my career as a web designer, most often I am given a web programmer role. Having worked both roles, I can honestly say that some designers are clueless on how to design a website.

This isn’t completely thief fault however. The rules to creating a great looking design and implementing that design are two different sets of things. Also the goals are not the same. Most cases the designer is primarily concerned with designing to please the client, while the programmer is focused on developing a fully functioning website.

Both programmer and designer are after the same goal: to create atheistically pleasing and seamlessly functioning website that surpasses the clients expectations. With that in mind, here are some tips designers to help assist with that goal.

Do:

Provide all font files. This should be a given for any project regardless if it is a website or not.

Consider all screens large and small. Many times I have had designers create an elaborate background only to have it cut off at the edges to their design file. What if the viewer has a larger screen then your design file? Conversely, what if the designer creates for a larger screen then the sites audience?

Label and organize your design files. When we “cut up” the site, generally we cut it into a header, footer, and content sections. Try to at least put your layers into that.

Note what the links should look like when the mouse hovers over it. The site is not static and shouldn’t feel like it. Also give examples of other fancy effects such as dropdowns, lightboxes, etc.

Provide the stock images or a link to where to purchase them. Its not necessarily the designer’s job to provide stock photos, but when the photos are to be “replaced later” it is good to have a link to buy them if plans change.

Do Not:

Randomly position photos outside of a grid format. There are many exceptions to this, but ideally any designer should be following an invible grid for the placement of text and images. Besides the fact that it makes your designs neat and orderly, the world of programmers is a world of rules and its faster to work inside those rules. The more exceptions there are to the rules, the more difficult programming becomes.

Neglect or leave out design elements. Like with the gripe about not having hover colors, some designers forget to show examples of form elements and heven things like header titles or footer text. Having a programer wing it on these elements can cause for some ugly blemishes on what is a good design.

Use non web-safe fonts for copy text. With html5 and javascript fonts like cufon, designers may be thinking that the websafe font debate us no longer an issue. However, not all people run html5 compatible browsers just yet and rending an entire page with javascript is a hog on computer resources. The happy medium is to dislay titles and headers in any font available, but still keep the main chunk of text in a browser safe font.

Think that the programmer will figure how to make it work. As a designer you are partly the architect of the site. Architects keep in mind the constraints of materials used in the construction of the their designs. Likewise, webdesigners should take note of what contraints are caused by programming–as well as the time and money restraints of the project itself.

So, in short…

As a designer, you are a member of a team, and often the first to pass the baton in relay that is website development. If you heed these dos and don’ts, you are guaranteed to be off to a good start!

Posted in design notes, Posts | Leave a comment

Libraries, Frameworks, Templates, and Themes!

When a developer creates a website, chances are he or she is working from a preexisting pile of bits of computer code. These sets of code are referred to with several different names– a library, framework, a plugin, addon, template or theme. Something that I’ve come across recently is that sometimes a web developer  or programmer takes their vocabulary for granted, and easily confuses the client. Although most programmers would never confuse a library with a theme, to the normal person its all just computer code.

Below are some definitions to help the non-programmers understand what part of the program developer or a programmer is talking about when they reference their code.  For example, when a web coder says, “I can make changes to the theme, but that part is in the framework and we shouldn’t touch that!”  you could possibly understand why.

A Code Library

When referring to websites, a library means a collection of instructions for a specific computer language. The collection of commands helps the programmer by simplifying a repeatable task.

For example, let’s say you want a JavaScript sideshow  of photos on your site. Although the developer could write a sideshow program entirely out of JavaScript by himself, chances are he will simply the process by using a JavaScript library such as jQuery.  Let’s look at a  an instruction the programmer might write in JavaScript:

When someone clicks this button labeled next, take the photo we’re on and make it turn invisible slowly in the course of two seconds.  While you’re doing that, take the next picture and make it invisible, then slowly change the visibility of it so that its fully visible in the course of 2 seconds.

However, jQuery already has that instruction as one of its set of commands.  If the developer is using jQuery, he would write something different:

Fade in and fade out those two photos when I click next. Thanks!

Well, you wouldn’t write thank you to the computer, but you get the idea.

Another reason for the use for libraries is because coding can be hard and takes a lot of thought. Thinking takes time. Instead of spending someone’s money trying to think of how to word an instruction, its much easier and cost effective to use a library of previously made instructions.

What is a framework?

Again, in website programming terms, a framework is in infrastructure to build the rest of the website off of.  If a library is a pile of bones, think of a framework as a skeleton.

Frameworks are used for different reasons.  Like libraries, a framework could be used to save time by having a solid foundation to work off off instead of having to make your own. Another reason would be consistency with a project among other projects.  In the future, if you need to replace a section of the website or web application among many different projects, you know that one size will fit all since they are were made from the same mold.

Content Management Systems

Content management systems are a web interface to change the site text, navigation, images, or other aspects of the website or project.  It is a complete project in itself that is designed to allow a non- computer savvy person to easily make changes to the site without writing their own code. Its kind of like the muscle of the site that does all the heavy lifting.

Plugins,  Addons, Components

An addon, plugin, or component are moderately interchangeable terms. All three represent a collection of code that is almost a program in itself that can attached to your project. Depending on the context.  For example,  maybe you want an easily update-able event calendar on your site. Instead of spending hours writing a calendar program, a developer could look for a calendar plugin and add it to your site.

Typically a developer would leave most of this program in tact, as the programmer who created the part of code may make changes and updates at a later date.

Templates and Themes

A template or a theme is the skin of your site.  Although the words are somewhat interchangeable, typically the word template refers to the layout,  size, and positions of elements of the site, where a theme refers to the colors, typography, and graphics on the site. However those definitions are sometimes swapped depending on the coder of the project.

As the template and themes are mostly cosmetic, they are often the easiest parts of the site to change.

If all this code is out there, why am I paying a Programmer/Developer?

You’re paying for the blood and the guts!  It takes a developer to sew all the pieces together, and fill the insides of your site with the organs vital to what you want your project to do. Also, the programmer might create their own distinct framework, theme, or addon specific to your project. He or she may also forgo any of these parts if  they feel they are unnecessary. Libraries, frameworks, plugins, and themes are simply tools in the developer’s arsenal to help get the project done on time.

I think this covers the basics. I hope this helps someone out there understand what their programmer or developer is talking about!

Posted in Posts | Leave a comment

Web Hosting Basics Personifed.

I wanted to take a moment and explain webhosting.  Most of my  small businesses clients, who have no experience with websites, get very confused by this.  Sometimes what they think is their website is really just their registrar.

First we have to look at how a user gets to a website. Let me explain it as if there different parties involved were people:

Your Internet Service Provider

You may know him, as AOL, Comcast, ATT, Verizon, Earthlink, or  several other names. When you can to go someplace on the information super highway, this is the guy that takes you there.  Think of him as your personal chauffeur, which is exactly what he does.  You tell him, “hey, I’d love to go see our Friend Youtube to see if there are any new silly cat vidoes around,” and he’ll take you on your merry way.

The Registrar

No matter how fast of a driver you have,  your ISP (internet service provider) still needs directions.  That’s when he talks to the registrar.  He’s best imagined as a tour guide for your journey on the web.  Your driver will let him know what street Facebook lives on, or how to get to that Netflix site.

In terms of web hosting, the domain your purchase goes through the hands of the registrar. Not only is he the tour guide, but also the keeper of the address book!  If it seems like a lofty job for one person, don’t worry–there are over 500 registrars in the world working to tell your ISP where to go.

The Webhost

If you host a website, somewhere the files themselves live on a computer. This computer is managed by the webhost.  I like to think of the webhost as your concierge once you arrive at your destination. You talk with them to check in you and your web files,  forward any incoming calls to your hotel room, and call for a menu when you’re hungry for more bandwidth.

A webhost comes in many shapes and sizes. They also maintain the computer your website lives on–think of it possibly as a hotel.  Sometimes you may stay at a four star resort, sometimes an economy suite. Please note that like with any service, you get what you pay for.

The Domain Name Server

The DNS (Domain Name Server) is another person you should be aware of. He is best personified as a bus boy.  Sure, the registrar may know where your hotel is, but the busboy know what room when you get there and check in.

A confusing aspect to the DNS is that sometimes this busboy is working with our concierge web host, and sometimes he’s working with our tour guide registrar. It really depends on what service you get, but often times but the registrar and the webhost provide their own DNS.

Same Person, many hats!

Although all these people represent different jobs people have to get you to your destination,  there is nothing stopping one person to do every job!  Sometimes, your ISP will offer web hosting with Registrar and DNS included.  The largest registrar at the time of writing this, Godaddy, offers  webhosting as well. Furthermore, it is common practice for web host of offer registration of domain names through a offered registrar.

Just know that to host a site  all you need to pay web hosting and a registrar.  To view a site, all you need is an ISP.

Posted in Posts | Leave a comment

Back soon

Just a quick note that soon ill be blogging more. (Lunch break blogging, hurray! )

Posted in Posts | Leave a comment