With hundreds of millions of users entering hundreds of billions of queries into major search engines such as Google, Yahoo and Bing, the importance of designing a site to be search-engine friendly cannot be underestimated. However, even the most experienced designers and developers can make simple mistakes that can cost their site thousands of views and (potentially) uncounted revenues.

HTML Issues

Sometimes, the “old-fashioned” methods are still the most effective. While many SEO experts have debated the degree of effectiveness of old-school metatags and how they affect search engine rankings, the common belief is that their presence is helpful, especially since spiders often crawl through much of the text content of each page they index.

Page Title

The first place most spiders crawl through is the page’s title tag. When a search engine finds a word in a title tag that matches the search terms, the results page displays that title in bold text. The bold text catches the reader’s eye and causes a nearly instinctive compulsion to click on that link. As the specificity of the search terms increase, so does the importance of the title tag.

Description Metatag

The next area of the page that the spiders will visit is the content within the “description” metatag. Unfortunately, many so-called “black hat” SEO specialists take advantage of this situation by spamming the title and description tags with keywords that are either tangentially related to the page’s content, or completely irrelevant but filled with “hot” keywords in order to boost traffic. Description content should be relevant, clear and precise.

Headlines and Subheaders

In HTML4, the header (<h1>,<h2>, etc.) tags specify the headlines and subheaders within content. Not only do search engine crawlers view the content within these tags as important, the tags also help the viewer find the the information they need without scrolling through the entire article. Wikipedia uses this technique to great effect when breaking down its lengthy and specific content.

Architecture Factors

While content is an important component of search engine optimization, the other key part lies in the design and architecture of the site itself. Spiders must be able to navigate through a site and index all its relevant pages quickly and efficiently. Also, the URLs that link pages together within the site can be used as search engine material.

Navigation

Since search engines view pages in much the same way as the least sophisticated browser, an overly complicated navigation scheme (or one that his highly dependent on user input) will hamper the spider’s ability to index pages. Most site architects believe that a site’s navigation structure should resemble that of a cake: two layers is good, three is better, four or more is too much.

Speed

Search engines also place a high priority on how fast a page loads. While Flash-heavy pages can produce stunning animations and eye-catching designs, they also slow down a page’s load speed. Search engines, like users, won’t wait forever for a beautiful presentation: they both want content and they want it now (if not sooner).

URL

Which link tells you more about a product? www.blahtech.com/product.asp?id=234 www.blahtech.com/moisture-balance-il-160.html Most developers understand how to assign a URL to a dynamic page. These links will enable the spiders to collect content and index the page much more quickly.

In a future article, we will address how the new tags in HTML5 will help with search engine optimization.

...

In part one of Baking a New Site With a Sprinkle of SEO, we covered some of the more important things a developer can do to help their sites find their way into the top positions of the search engines. This week, we look at more advanced steps you can take to really help catapult them up to the top.

Advanced: canonical tags

You may have heard about Google’s recent algorithm updates such as Panda and Penguin. Well, one of things Panda concerned its self about was not how much sugar cane it was getting, but rather duplicated content. When I say ‘duplicated content’ I mean content that gets copied across internal pages. A typical example can commonly be found on e-commerce sites. Let’s say you have a product which we’ll call aeroplane model (I am an aviation obsessive) which sits on the URL www.i-really-like-planes.com/aeroplane-model. Now like all good e-commerce sites, I can choose to filter, pick colour, size and all those good things. But each time I do, a very small amount of content changes on the page, but I get completely different URLs:

Original: www.i-really-like-planes.com/aeroplane-model Colour: www.i-really-like-planes.com/aeroplane-model&colour=red Colour and size: www.i-really-like-planes.com/aeroplane-model&colour=red&size=large

Essentially, all three pages (but in a typical case there will be many more, I’ve seen up to 200 in some instances!) are all duplicated. Well this confuses dear Google and they’d prefer you to specify a single URL to display to users in their results pages.

We solve this problem by specifying the canonical tag. This is a <link> element which sits in the <head> tag on that particular page. For the example above, the following code would sit on each of the above pages:

<link rel=”canonical” href=”http:// www.i-really-like-planes.com/aeroplane-model” />

If you can provide the ability to add canonical tags across a website in this way, you will greatly improve the effectiveness of the site as a whole by dramatically reducing issues with duplicate content. However, care must be taken to implement these carefully. Each canonical must be specific to each group of pages, so don’t go putting the same one on every page of the site – that will cause more problems than it will solve them!

Advanced: Next and Prev

Following nicely on from the canonical point above, we go onto another canonical element that deals with another source of SEO issues – pagination. This tag enables you to consolidate paginated sections across a site whether they are a series of posts or a category of products. This indicates to search engines that the pages are interconnected via a contextual relationship. Let’s check out an example:

An article series on your site may have a story divided into three parts, all linked via ‘next’ and ‘previous’ buttons. The URLs could be:

www.example.com/headline&page=1 www.example.com/headline&page=2 www.example.com/headline&page=3

On the first page you would include the following code in the <head> section:

<link rel="next" href="http:// www.example.com/headline&page=2" />

On the second page, you would implement this code onto the <head> section:

<link rel="prev" href=" www.example.com/headline&page=2" /> <link rel="next" href=" www.example.com/headline&page=3" />

And finally, on page 3 you would implement this:

<link rel="prev" href="http:// www.example.com/headline&page=2" />

Looking at the code above, you can see how this indicates the inter-page relationship to search engines. However, if you have a ‘view all’ option then there’s no need to implement the above solution. Google will endeavour to show the ‘view all’ page as the preferred page instead.

Advanced: Redirects

Ah yes, redirects, the bread and butter of any SEO’s day to day. You’re probably well aware of the types of redirects (301, 302 etc) so I won’t delve into that (ask in the comments if you’re not sure), but making sure you have the ability to implement 301 redirects and 302 redirects will be very useful for your website. You may need to implement a 301 redirect when:

You move to a new website You change the URLs of your site You delete pages on your site

301 redirects are excellent for maintaining the integrity of a site. Imagine if you will a website with lots of links, but the owner of the site hasn’t put in place any redirects or changed the navigational destinations. Lots of links across the site will result in a 404 error leaving a dead end for both users and search engines alike. To solve the issue, you would implement a 301 redirect to the correct URL (and in the case of navigation, fix it!). From an SEO perspective, this is also good for fixing incorrect links coming into the site from other websites, redirecting deleted pages that still carry weight which you can then direct to another relevant page. David Gitonga did a great post on redirects using Htaccess which I recommend. On a final note, I’ve always found it a challenge finding a suitable solution implementing redirects on a Windows server, so it’s worth bearing that in mind. Additionally, you want to check anything that should be a permanent redirect (via 301) isn’t actually redirecting via 302 (temporary redirect) instead as this may impact how search engines view the page. A great tool for checking these redirects can be found here.

Advanced: Sitemaps

The XML sitemap on your site (and if you don’t have one, I recommend you get one) is the road map to your content. Having one of these in place will help Google find and index your pages to enable them to show up in their search results. It’s not essential, no, but recommended. Google may well find all your pages just through the navigation and external links, but why rely on that when you can physically tell them what you want them to look at and where they can find it.

Besides having a sitemap.xml I recommend you also try to do the following:

Make sure the sitemap.xml can be easily edited If you have an automatically generated one, ensure you can make exceptions to avoid getting stuff listed that you don’t want in the sitemap.xml (like development pages, duplicate pages and pages with unfriendly URLs if you’ve implemented friendly ones) Check that your sitemap.xml removes the pages as well as adds them if it is automated Check with your robots.txt that no URLs in the sitemap.xml clash with them. In other words, you’re not telling search engines not to index certain pages in the robots.txt and then telling them to in the sitemap.xml!

As with web development, there are many many facets, tactics and techniques that can be implemented to improve rankings and general site visibility. I hope to be back soon with more, but I’d love to hear your feedback and what else you may specifically be interested in learning more about in the comments below!

...

With the progress element, HTML5 pages can display the progress of a task, for example a download or background activity. In this tutorial we will demonstrate how to use the progress element in your pages, with a simple JavaScript function updating the element as the task executes. At the moment the progress element is only really supported in Firefox, Chrome and Opera, with support developing in Internet Explorer and Safari, so you can’t rely on it just yet.

For demonstration, we are simply going to update the progress element using a JavaScript timeout. We will allow the user to start the task by pressing a button, which we will disable while the task executes, updating the progress element and a textual indicator throughout. When the task is complete, the button will be enabled again and the user can start the task over again if they wish. This is how the progress bar looks in my installation of Firefox while the function is executing:

Create a Page

Create your HTML5 page using the following outline:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

We will place our JavaScript function in the script section and the page elements in the body next.

Add the Progress Element

Add the progress element to the body section of your page, together with a little informative text:

<p>Task progress:</p> <progress id="prog" value="0" max="100"></progress>

We are starting our task progress at 0. Since the maximum value is 100, when the task is complete the value will also be 100. We will update the value from JavaScript, so this markup is purely for the initial display of the progress element when the user browses to the page.

Provide User Interaction

Let’s allow the user to start the progress of the task by pressing a button. We will also indicate the percentage of progress in a textual element:

<input id="startBtn" type="button" value="start" onclick="startProgress()"/> <div id="numValue">0%</div>

The input element will start the task executing, which will cause the JavaScript function to update the progress element. We will also update the div with the percentage indicator as the task progresses.

Implement the JavaScript

Let’s now complete the JavaScript for our task progress. In the script section of your page head, add a few variables to track progress:

//current progress var currProgress = 0; //is the task complete var done = false; //total progress amount var total = 100;

Now add the function outline:

//function to update progress function startProgress() { }

Inside the function, first retrieve references to the page elements we are working with:

//get the progress element var prBar = document.getElementById("prog"); //get the start button var startButt = document.getElementById("startBtn"); //get the textual element var val = document.getElementById("numValue");...

From family photos to business documents, file uploads power many of the major web applications. A typical HTML form that allows the user to upload a file may look like this:

<html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> File Name: <input type="file" name="file" id="file" />  <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html>

In this case, the only field displayed on the form is the “file” field.  This field allows the user to browse their hard drive for the file they wish to upload. The enctype “multipart/form-data” specifies that the field should be filled with binary data, as from a file, rather than typed input from the user. PHP applications allow users to upload files through its $_FILES object. Developers can use the $_FILES object to check on the properties of an uploaded file:

$_FILES["file"]["name"] – the name of the uploaded file $_FILES["file"]["type"] – the type of the uploaded file $_FILES["file"]["size"] – the size in bytes of the uploaded file $_FILES["file"]["tmp_name"] – the name of the temporary copy of the file stored on the server $_FILES["file"]["error"] – the error code resulting from the file upload

For files that upload successfully, the value of $_FILES["file"]["error"] is 0. However, some developers may want to place restrictions on the files users can upload.

File Type

Developers can use the $_FILES["file"]["type"] property to limit the types of files uploaded to those in use for specific applications. For instance, businesses may wish to restrict file types to documents, spreadsheets and presentations, but not allow users to post photos, videos or executable programs.

<?php if (($_FILES["file"]["type"] != "application/msword") || ($_FILES["file"]["type"] != "application/vnd.ms-excel ") || ($_FILES["file"]["type"] != "application/vnd.ms-powerpoint"))   {   echo "Invalid file type";   } ?>

File Size

Network administrators may also choose to limit the size of files users can upload to a server in order to reduce bandwidth usage. Developers can set limits on the size of a file a user can upload.

<?php if ($_FILES["file"]["size"] < 25000)) // Max File Size: 25KB   {   echo "File size exceeds maximum.";   } ?>

Upload Timed Out

Another method that administrators use to conserve bandwidth is to limit the time that a page can use to upload a file. Most PHP applications time out after 30 seconds, but the developer can set the time to as little or as much as needed by changing either the php.ini file on the server or setting the time in the application itself. PHP.INI File max_input_time 300

PHP Script

<?php // code to upload file to temporary directory ini_set('max_input_time', 300); // code to move file to new directory ?>...

In my last post, I introduced Sass (Syntactically Awesome Stylesheets) and getting Sass set up on your machine by installing Ruby, installing Sass, watching a file and compiling via Terminal.

Now, we will look at a much simpler way to get set up with Sass. CodeKit. I’ll be upfront, I’m a user of CodeKit and I recommend the software to any web developer who works in Sass, LESS, Compass, JavaScript, or any other web language, however neither I nor Developer Drive has any relationship (personal or financial) with CodeKit, and my post does not necessarily signify an endorsement by Developer Drive for CodeKit.

That being said, let’s learn a little bit about it and how to get it set up.

Download CodeKit

To get started, first download CodeKit. It is a commercial product ($25), but you can download a fully functional trial version which is good for ten days.

Once downloaded, fire up CodeKit and you’re greeted by a friendly, but blank app screen.

To start, either drag your project folder (wherever you’re storing your Sass or where you plan to store your Sass) to the window or click the small plus (+) sign in the and locate the folder in the browser window that comes up.

CodeKit will automatically detect all of your Sass files in your folder (as well as all of your other files). It can also automatically detect which files should be compiled to CSS files based on the contents of the Sass. If you have a style.scss file that imports other Sass files. Once you open one of your Sass files that is being watched by CodeKit, it’ll automatically compile to CSS whenever you save. [Additionally, and pretty sweet(ly), CodeKit has an auto refresh feature where you can see your code deploy live in the browser without having to go click refresh everytime.]

Writing your first Sass

The standard extension for the latest version of Sass is .scss (this is as of Sass 3). The .scss extension is completely valid CSS (just like LESS is), so you can write standard CSS while mixing in your own Sass as well. Fire up your code editor and let’s write some Sass (I useCoda 2 which has a default color profile for .scss syntax and it comes in handy).

The code shows some variables and a paragraph declaration. Don’t worry about the syntax now as we’ll cover variables, mixins, nesting, selector inheritance and much more in later posts. For now, we’re still focusing on getting Sass to work with .scss files and the Terminal.

/* Sample Sass */ $blue: #00214D; $font-size: 16px; p { color: $blue; font-size: $font-size; }

Once you save this Sass, CodeKit will automatically detect it, create a corresponding CSS file in a CSS folder in the project folder you’re using.

Pretty awesome, right?

So next up, we’re going to go in-depth into nesting with Sass. In my opinion, the nesting functionality is easier and more powerful than nesting in LESS, although they share the same basic principals.

...

We’ll finish our Learning LESS series today as we talk about putting your LESS into action on your web projects. Today’s post will be slightly different than previous posts, as we won’t really showcase new techniques and code examples as much as we’ll talk about how to use LESS, projects you can work on to jump start your LESS development and more.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Coding With LESS

If you read our introduction to the Learning LESS series, you saw that I recommend compiling all of your LESS locally, and simply linking to one CSS stylesheet. Two of the top programs to do this is LESS.app and CodeKit, both from Incident57.

LESS.app

LESS.app is a free application that will detect all of the LESS files in your web folder, and compile them to CSS. You can set specific output folders and select which LESS files you actually want to compile (this comes in handy if you’ve divided up your LESS into smaller modular files and import them all into one stylesheet). Additionally, you can minify your CSS from this application, saving your precious file size (but don’t even think about editing your CSS file).

CodeKit

CodeKit is the next generation of the LESS.app and has a $20 price tag attached to it (to help the creator pay off his student loans, so in reality, it aint that bad). CodeKit compiles LESS perfectly, but does a lot more. It also compiles Sass, Stylus, Haml, Coffeescript, JavaScript and Compass files. Granted, I don’t know much about those other file types (other than JavaScript), but … CodeKit can compile them! Additionally, CodeKit has a pretty awesome feature where when you save your code, your browser will automatically refresh to reflect the changes, and it does it with some cool CSS3 animations.

LESS Projects

If you want to get a jump start on using LESS in your projects, I’d recommend grabbing an open source project that already utilizes LESS. It’s the best way to dig into the techniques and tricks that experienced and expert web developers use on their projects. I’ll run through a series of projects that I utilize on a daily basis that uses LESS.

Bootstrap, from Twitter

Bootstrap, from Twitter is one of the most popular open source projects on the web right now. Developed by Mark Otto and Jacob from Twitter, Bootstrap is a set of HTML, CSS and JavaScript components for baseline user interface components and interactions, including a responsive design, UX items such as buttons, forms, and more.

Bootstrap uses LESS as the basis for all of their styles, and really divides up their code into small, modular files, which becomes extremely maintainable and easy to understand.

Responsive Bones Theme for WordPress

If you’re into designing and developing for WordPress, might I suggest starting with Bones? There are a lot of WordPress starter themes out there, but in my opinion, not much do it better than Eddie Machado’s Bones.

The responsive version of Bones uses LESS to structure a responsively designed WordPress site, using CSS3 media queries to determine which LESS file is loaded into the compiler. It’s a pretty nifty system, and definitely worth a look if you’re looking at working with WordPress.

320 and Up Project

320 and Up is the ‘tiny screen first’ responsive boilerplate. This project is a perfect starting point for those looking to create a responsive website, but not building it straight into a CMS. If you’re just looking for a website, or will be looking to import it into another CMS like ExpressionEngine, 320 and Up is the place to be.

The project uses LESS to create a responsive framework for you to style up, starting with the smaller screens and working up, as opposed to designing for a desktop and scaling down. It’s an interesting concept, and definitely one to check out!

Conclusion

That wraps up our Learning LESS series here on DeveloperDrive. Thanks so much for reading, commenting and discussing. Do you have any other projects you know that use LESS that you use? Leave them in the comments below.

...

We’re getting to the end of our Learning LESS series, and this is one of the posts I’m most excited about. One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler).

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Grab a cup o’ joe, your favorite text editor and let’s learn how to divide up our LESS and keep things neat and tidy.

Setting Up Your Project

Whenever I’m about to start a project from scratch using LESS, I set up a simple folder structure.

As you can see, my LESS and CSS are separate folders. My next step is I always add my site to LESS.app (or CodeKit if you prefer). LESS.app will automatically search for all LESS files in your site folder and set up to compile.

Before we do that, let’s create some LESS and learn how to modularize your code and then how to bring it together at the end.

Creating A Few LESS Files

The absolute first LESS file I create in any project is simply style.less. This is the file that will be compiled to be style.css, and act as the master CSS file for my entire project.

It is important to remember that comments in LESS are double backslashes (//) and are not compiled in the final CSS. Normal CSS comments (*/ … /*) are compiled as comments and can be used for organizational or normal comments.

That said, let’s take a look at my starting point for style.less.

// Style.less for Project LESS // --------------------------- /* This is a project/blog for DeveloperDrive.com written by Alex Ball. Version 1.0.1 These are regular CSS comments that will be compiled normally. */

So, not much going on in that file … yet. Moving on to our next LESS file, I typically head to Andy Clark’s 320 and Up project and snag the LESS reset file he has developed.

// ========================================================== // 320 and Up by Andy Clarke // Version: 3.0 // URL: http://stuffandnonsense.co.uk/projects/320andup/ // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 // ========================================================== /* Reset */ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,...