In previous years, many of the major search engines were not fully equipped to read anything on a page aside from the text within the tags. Most of the “spiders” that “crawled” through web pages only viewed information at the most basic level. As technologies such as Javascript took over the web site design field, the search engine programmers found that their creepy-crawlies had to evolve in order to extract the most pertinent information from the sites they visited.

Here are some DO’s and DON’Ts to ensure that pages that utilize Javascript are still designed with SEO principles in mind.

DO keep it simple.

Although search engine spiders are now equipped to read Javascript code, they still cannot perform many of the major tasks that a full-service browser can when implementing that code.

<script language=”Javascript”> document.write(“<h1>Here is the SEO content.</h1>”); </script>

The spider can now read the contents of simple Javascript methods as HTML.

<script language=”Javascript”> window.open(“http://www.developerdrive.com/author/gerald-hanks/”); </script>

The spider will execute the method and follow the link. However, the spiders tend to slow down when methods introduce multiple parameters.

DON’T put lots of Javascript code on a page.

From an application development standpoint, any heavy Javascript code sections should be placed in a separate file for easier management. From an SEO standpoint, the separation of code-heavy Javascript files from the page undergoing the indexing process will save the search spider time and prevent it from indexing keywords that are not relevant to your page. The harder the spider has to work, the lower your potential search engine rank.

DO replace Javascript menus with CSS menus where possible.

One of the most prevalent uses for Javascript has been the creation of dynamic navigation menus. As we saw in an earlier article, CSS can accomplish many of the same dynamic menu displays as Javascript, while CSS is also much more search-engine friendly than Javascript.

DON’T sacrifice Javascript functionality for page rank.

On the one hand, a client may offer a Javascript calculator that they wish to use as a marketing tool to draw visitors and convert them to customers. On the other hand, the spiders won’t read a lot of complicated calculation routines, and they certainly won’t index most of these routines into their search databases. The solution is to create the marketing content within the page that describes the calculator’s functionality, while placing the code in an external file.

DO turn off Javascript when testing pages.

If the developer is not sure if their Javascript content is crawlable, the best option is to remove as much of the searchable content from the Javascript methods as possible. Barring that, the testers can turn off Javascript in their browsers and view the results. The Javascript shutdown will give users a true insight into what the spiders see (as opposed to what users see).

DON’T forget the spiders.

Many developers and site designers get caught up in the various technologies (Javascript, AJAX, Flash) that can produce fast results and spectacular visual effects. They want to give the audience a memorable experience with each visit. Developers must cooperate with SEO experts to insure that their beautiful and efficient creation attracts the audience that it deserves.

...

The move towards developing responsive websites has introduced a set of new tools that help can developers learn the ropes fast and start producing cross-browser and non-device specific websites quickly and more efficiently. Let us see some of these tools and resources that you can leverage as we get deeper into responsive web design:

Adaptive Images

Your website is increasingly being viewed on smaller screens that consume low bandwidth. In addition to other challenges associated with developing for small screens, image resizing is one of the things to take into consideration. Fortunately, Adapative Images, a PHP script that works on any website, can help in this regard. Adaptive Images detects screen sizes abd re-scales versions of your HTML images, ultimately helping you deliver small images to small screens.

FitText

Have you ever desired to have scalable headlines that fill the width of parent elements when developing fluid layouts? The JQuery plugin will allow you to resize your fonts and ensure that they fit where they are supposed to regardless of the device or browser.

PhotoSwipe

Did you know that you can deliver fancy image galleries common on desktops to mobile devices? This free HTML/CSS/JavaScript library enables developers and designers looking to add the look and feel of native apps on their websites the ability to provide visitors with an intuitive interface to interact with images on your mobile website. It is compatible with all popular Javascript libraries and frameworks.

Less Framework

When building websites with multiple layouts, it is important to maintain consistency. By having a layout based on the same grid, it is possible to reuse elements by simply adjusting widths, font sizes or other small detail. This is the whole idea behind Less Framework. Having a common baseline grid allows everyone the freedom to keep writing code their own way while ensuring consistency.

Check out our series on Learning Less from Alex Ball.

Skeleton

By use of CSS files, it is possible to design responsive sites rapidly. Skeleton makes this possible by use of a lightweight 960-grid as its base that allows elegant scaling down from laptop browser windows to mobile window screens in both landscape and portrait format. It comes with lightly styled forms, tabs, buttons and other elements that form the basic foundation of any mobile website.

Responsive Testing Tool

Now that you have your responsive site under development, how do you test during development? It turns out that browser security will not allow you to navigate through frames. Matt Kersley, a designer and developer, has designed a testing tool to help you with that. The tool can be downloaded from Github and installed on your website hosting to allow testing during development.

Inuit CSS Framework

With HTML5 support, inuit.css comes with a custom grid builder for developing fluid grids. The framework is progressive and flexible; it sets sensible boundaries to what you can do while giving you total controltfo what you can do.

Please feel free to share some of your favorite tools for developing responsive web sites as well.

...

Development teams and design strategists spend countless man-hours converting the ideas for a website into a crucial tool for business development. They build database tables, track user navigation paths and create stunning graphics to bring a company’s products to life on the screen. While the fruits of these efforts are often both visually stunning and technically proficient, they can all count for nothing if no one can find the site in their search results.

What is SEO?

Search engine optimization (SEO) is the practice of optimizing a site’s design so that it will appear at or near the top of a search engine results page when a user searches for they keywords related to that site’s products. Major search engines, including Google and Yahoo, have algorithms that determine how they rank keyword query results. Although some external factors, such as inbound links, contribute to a page’s ranking, several design facets can also increase a page’s status in search results.

Method #1: sIFR

Scalable Inman Flash Replacement (sIFR) is a technique that uses a combination of JavaScript, Flash and CSS to target specific text elements within a page. The sIFR technology is especially useful for headlines with custom fonts; it allows the use of nearly any font type, size and color, while presenting the code in a search engine-friendly manner. The sIFR text will also render in browsers without Flash capabilities, making it more accessible.

Method #2: CSS Sprites

Instead of using several images to create navigation menus, CSS sprites allow the designer to create one unified image and define which portion of the image to show at any given time. This technique reduces the number of HTTP requests used in traditional JavaScript rollover menus, and it increases the page’s load speed. Since Google and other search engines are now using load speeds as criteria for search rankings, the reduced load times provided by CSS sprites will allow the page to maintain its graphical functionality while increasing its search engine visibility.

Method #3: CSS Pagination

Developers must often strike a balance when it comes to pages with lengthy content: do they split the page into several sub-pages (requiring more HTTP requests) or do they keep it as a long, scrolling page (and risk losing readers)? One method to solve this dilemma is CSS pagination. The designer can create the content block to meet specific dimensions, then add the pagination links in the desired style.

Method #4: External CSS Files

As another factor in favor of increasing page load speeds, the use of external CSS sheets can be a key element in improving search engine results. One mistake that designers can make is to insert their CSS code within each page. When a user loads a new page, the CSS code must also reload. With external style sheets, the browser caches the data after loading the first page and holds it throughout the session.

Method #5: CSS Menus

Many of the methods previous used to embellish navigation menus in JavaScript (such as hovers and dropdowns) are now available in CSS. The technique employs unordered lists (another good source of SEO keywords) to list the links. Each link in the menu contains an “id” tag, which corresponds to the CSS element. When the user’s cursor hovers over the link, it activates the “hover” qualities in the CSS sheet and makes the dropdown menu visible.

The power of CSS allows these methods to take the place of many techniques that JavaScript implemented in previous generations, while allowing search engines to read the code effectively. The improvements in appearance, load times and search engine results will give both users and site owners a much more enjoyable experience.

...

The scrolldeck.js library is probably one of the best ways out there to implement a scrolling presentation deck. All you have to do is build a web page with each slide as a div. It requires JQuery, Scrollorama, scrollTo, easing & scrolldeck  JS scripts to function. After linking all of the above scripts, create the slide deck on the document ready event and configure the settings as shown:

$(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide', duration: 600, easing: 'easeInOutExpo', offset: 0 }); });

From here, all you have to do is add the animate classes to your slides elements as shown:

<div class="slide"> <p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p> <p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p> </div> <div class="slide"> <p>This slide is ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p> <p class="animate-build" data-build="1">This is the default fade in animation)</p> <p class="animate-build" data-animation="space-in" data-build="2"> This paragraph will fade in while its letter spacing...

It’s been sometime since I’ve updated this HTML5 Canvas series, but this article should round out the tutorial series as article 6. We’ve covered creating 2D shapes, images, how to animate said shapes and images, and WebGL basics. In my example from Part 5 we coded together a basic cube with materials. With these foundations set in place we can start diving deeper into WebGL through animating the objects and even piecing together particle effects. If you have any questions please take a moment to revisit my previous articles concerning Canvas:

Part 1: Getting Familiar with the Basics Part 2: Creating Gradients and Patterns Part 3: Working with Images and Text Part 4: Animation Part 5: Building 3D objects

One of the basics in learning how to work with basic motion in an animation setting, you learn about the physics and force that cause a basic bouncing ball. In the case of creating our particle effect, you can create falling particle that might mimic snowfall or simulate a dynamic ball pit. When we begin coding out our Canvas the pattern we’ll create will seem rather chaotic at first, but we can wrangle it all in to make something amazing. Hopefully by the end of this we can create a group of soft glowing edge particle with random paths that resemble fireflies.

Check out the results of the code in this article here.

Let’s put our canvas in place with the HTML:

<canvas id="myCanvas" width="640" height="480"> Im sorry youre browser doesnt seem to support the CANVAS element. Try upgrading to a modern browser like <a href="http://chrome.com">Chrome</a>. </canvas>​

You can proceed by either writing your corresponding Javascript in an external JS file, for all intensive purposes of this article, I’ll be writing the Javascript in the section of the HTML file.

var canvas = document.getElementById('myCanvas'); var context = canvas.getContext("2d");

Although the dimensions of our canvas have already been defined in the tag in our HTML, we need to define the dimensions with the Javascript as variables.

var W = 640; var H = 480; ctx.fillStyle = "#333"; ctx.fillRect (0,0,W,H);

We’ve filled the space with a dark gray, something to make our particle pop against the background. And we’ve positioned the canvas on the page at a left and right of 0. You’ll notice that the variables for our width and height have already been used, this will allow us to dynamically change the dimensions. Getting down to the meat and potatoes of the article we’ll begin adding our first particle against the background.

ctx.beginPath(); ctx.fillStyle = '#FFF'; ctx.arc(100, 100, 15, Math.PI*2, false); ctx.fill();

The arc method helps us create a circle element with the x and y coordinates at 100 and it has a radius of 15. For a more in depth explanation of the arguments for the arc method, read Part 1 of this series. The last method tells our canvas to fill in the particle we just created. Now that we’ve created the particle, let’s bring it to life with a little animation. Let’s wrap our particle in a ‘draw’ function.

function draw { ctx.beginPath(); ctx.fillStyle = '#FFF'; ctx.arc(x, y, 15, Math.PI*2, false); ctx.fill(); x++; y++; } var x = 100; var y = 100; setInterval(draw, 110);

By using setInterval we’re telling Javascript which element we want to animate in our first argument, and the speed of acceloration in the 2nd argument. If we increase the interval number, you can begin to see the particle slow down. Adversely if we decrease that interval number, the speed of our particle increases. For the time being ’110′ seems to be an ideal speed. We’ve also introduced 2 new variables for the x and y properties of said particle.

From this point we’ll need to create an array above our draw function to help create multiple particle on the canvas like so: var particles = []; for...

Since 2010, mobile searches have seen a 400% increase and it is estimated that by 2013, there will be more mobile Internet users than desktop users. A mobile-friendly site can thus help you connect with your customers and drive conversions. Just because your website can be seen on your mobile phone does not however mean that its mobile ready.

Mobile sites are designed with mobile users in mind and fit well on small screens. They are supposed to offer simple navigation capabilities and take advantage of the natural mobile phone features such as maps, location information and click-to-call. How though can you turn your desktop website to be more mobile-friendly and offer visitors the same experience as your desktop version? It turns out; you don’t have to create an entirely new mobile website. You just need the right tools to work with and you can come up with your very own mobile ready site.

Mobilize Using Plugins

Do you own a WordPress website? You are in for a good surprise because with just a single plug-in, you can automatically enable mobile users on your website to access a mobile version it. There are many plugins on the market to choose from. The MobilePress plugin, for example, can help render your WordPress-powered website on mobile phones by configuring specific themes for specific browsers or devices. The plug-in makes it possible for developers to create customized mobile themes as well.

Mippin is another plugin that detects mobile devices and redirects visitors to the mobile optimized pages on your website. Mippin even renders your blog better and faster on an iPhone compared to the desktop version. Mippin uses the RSS feeds approach to render raw content on a phone by converting videos, on the fly, to the 3GP format while scaling photos horizontally.

Online Tools

With Google having a designated bot that looks for mobile versions of your site, it seems logic to have a subdomain with your mobile version. This will also allow you to optimize separately your mobile website for SEO and landing pages. One of the easiest tools to transform your website into a suitable mobile version is the Google Mobile Optimizer. The tool allows you to test your site and contains plenty of resources to get your site mobile ready.

MobiReady is a free tool that helps test the mobile usability of your existing site and offers detail free reports on potential problem areas and how your site displays on mobiles. With this information you can use other tools to optimize your site for better mobile visibility. DudaMobile is another free online tool that helps you get a mobile version of your website with one simple click. The mobile version automatically syncs with your regular website and offers dozens of mobile templates that will surely WOW your visitors. Additional features include the ability of site visitors to easily send text about your business info and a click-to-call button that makes it easy for site visitors to contact you.

While we review just a few of the tools that can get your site mobile in a short time, there are many other more tools on the Web that can offer similar or added functionality.

What tools have you used to make your site more mobile friendly? Share your comments below.

...

A few weeks ago, I was working with a fellow developer and trying to figure out how we could enhance the functionality of a WordPress website that required managing visitor logins. The site, which was for poets and writers, would allow visitors to set up accounts, submit content, interact with others on the website and share content to outside circles on Facebook and Twitter. After scratching our heads for a number of days, we came to the conclusion that BuddyPress would provide the needed solution. A couple of weeks later, we can see our decision was not misguided.

In our case, BuddyPress worked because it accomplished what it was created to do: enable people with similar interests to connect and communicate. The BuddyPress package however is more than a social networking tool. Companies can use it as an internal communication tool and some universities and colleges have used it to deploy a wide social network on their website. While most institutions are powerless to control and monitor Facebook interactions, BuddyPress provides a safe and secure environment with similar functionality but with the ability to monitor student activity.

BuddyPress is open source and makes available its core code online. In addition, users are free to use its themes, plug-in extensions and contribute their time and knowledge to the project.

The BuddyPress Core

Since BuddyPress is essentially an enhanced WordPress plug-in, it is written with the same primary technologies that power its parent base i.e. PHP and MySQL. Most users will therefore find it real easy if they have previously been working on WordPress. The package extends the integral functions of the WordPress engine to include themes, plugins and widgets effectively inheriting what has been there all along.

BuddyPress Features

In order to allow the creation of social networking applications, BuddyPress comes installed with some basic functionality that includes Activity Streams, User Profiles, Group Creation, Friend System, Bespoke themes and Blogs per user. Even with its own login functionality, BuddyPress integrates with the underlying WordPress platform in such a way that only a single sign-on is required to the system for users thereby providing seamless experiences across the board.

With most users already on social networks, BuddyPress offers a solid strategy of helping you attract new members by allowing you to link user profiles to their other social networks like Facebook and Twitter. Using a code snippet or a plug-in, users can easily share their activity on social networks as well as allow others to check out their other profiles on these outside platforms. Members can even share their profiles on social networks if they want others to join them in their new ‘social network’.

Group Forums

Groups and group forums are popular on the Web and within communities, and BuddyPress offers communities an easy way to post and reply to forum posts. Members have the freedom to search all public forum topics from the Forums Directory and even post a reply or start a forum topic in a public group even when they are not group members. Any time a member adds a post or replies to a forum post, he or she auto joins that group. Group forums in BuddyPress are made up of Forum Topics and Discussion Threads. Forum topics are proposed discussion subjects while discussion threads are the conversations and replies that result from a particular topic.

Users can easily search and filter forum topics and groups using various parameters as well as create new Forum Directory topics in the same way.

BuddyPress also offers other enhancements that include site-wide forums, avatar uploads, a friend messaging system and a bunch of interesting plugins and themes.

BuddyPress can be installed directly through the WordPress dashboard plugins page or downloaded manually from the plugins repository and uploaded to your website. The latest BuddyPress build can also be downloaded from the SVN repository for developers who want to get their hands dirty.

...