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.

...

Responsive Web Design took a big step forward on June 19, when a highly influential W3C Working Group published a draft recommendation stating that an additional slate of media queries should be incorporated into web browsers.

The CSS Working Group’s proposal would enable browsers to render web design layouts in a much more flexible manner, based on factors such as screen size, color depth, and device orientation.

Media queries consist of a media type (ex. screen or print), combined with defining expressions that pertain to specific media features, like height and width, in the following general format:

@media type { HTML tag { expression: value } }

The growing influence of Responsive Web Design has ushered in more fluid design styles that can automatically adapt page content to a user’s viewing device. It is most commonly associated with the industry mandate to develop websites that are compatible with desktops and laptops, as well as on smartphones.

Media Query Support

Established W3C standards, like HTML4 and CSS2, already support style variances based on media types.

For example, a stylesheet can specify that different fonts be utilized for screen viewing and for print.

In CSS format, this looks like:

@media screen { body {font-family: tahoma, sans-serif; font-size: 14px;} } @media print { p {font-family: times new roman, serif; font-size: 12px;} }

The above command directs a user agent to display a 14px Tahoma font on screen, but if the text content is printed the designated font will be Times New Roman, at 12px.

The HTML directive to use a certain stylesheet, based on the desired media type, is expressed as:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">

In general, ‘sans-serif’ fonts (like Tahoma and Verdana) are more readily viewable on a computer screen, while serif fonts such as Times New Roman are typically utilized for printing purposes. This is reflected in the stylesheet designations above.

Media Query Specifics

As defined, a media query will only be deployed when the user agent determines that the answer for a given directive is ‘true’.

A query can address more than one feature in the same expression – for instance:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Limiting statements, such as ‘not’ and ‘only’ can also be utilized:

<link rel="stylesheet" media="not screen and (color)" href="example-1.css" /> <link rel="stylesheet" media="only screen and (color)" href="example-2.css" />

Media Features

‘Features’ act as qualifiers for media queries, and describe the requirements for an output device.

One such feature is ‘device-aspect-ratio’, which correlates with device orientation, and would be shown as:

<link rel="stylesheet" media="device-aspect-ratio: 16/9" href="widescreen.css" />

In a mobile device that allowed for both landscape and portrait views, the above stylesheet command would ensure that if the widescreen orientation was selected (landscape), then a browser would render web pages according to the correct set of style rules.

Other features have a ‘min-’ or ‘max-’ prefix, and are tied to a specific measure, like:

<link rel="stylesheet" media="max-device-width: 500px" href="mobile.css" />

In the above case, a mobile device possessing a screen width of less than 500px would be targeted by the mobile.css stylesheet.

Say, for instance, you wanted to target devices with a minimum color-index of 256, the command would look like this:

<link rel="stylesheet" media="screen and (min-color-index: 256)" href=”color.css" />

In another example, if you desired to ensure that a document was printed by an output device of least 300dpi capability, the CSS media query would be in the following format:

@media print and (min-resolution:...

If you have started to dive into the wonderful world of CSS preprocessors (LESS or Sass), you might have also heard of Compass. If you haven’t decided on either LESS or Sass, I would make the investment and learn one, or both, of the technologies. It’s well worth the time and will make your coding and development life a lot easier.

Today, we’re going to look at Compass, an open-source CSS authoring framework built on Sass. Similar to Sass, it is installed via the command line (Terminal in Mac OS X) and is run off of Ruby.

Installing Compass

Compass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed. If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to install Compass and start working with it.

Now that we know we have Ruby running, we can install Compass. To install Compass, jump back into the Terminal and run this command:

sudo gem compass install

This will install Compass and you’re all set. Next, we’ll create a Compass project.

Creating a Compass Project

The creation of a Compass project is fairly unique. Again, we use the command line to set it up, but the commands can be a little different depending on what you want to call your project. Head on over to compass-style.org/install and run through their project creation ‘wizard’. It will help you set up either a new or existing Compass project, as well as naming the project, determining whether or not to set it up with Blueprint’s or Compass’s default stylesheets, and more.

For example, the project that I’m creating uses this command:

compass create developerdrive

This creates a new folder called developerdrive in the directory where I run the command line. [Hint, use the command line's "ls" and "cd" commands to list the files and change directories to make sure you install your files in the place you want them.]

So now that you’ve got those files installed, let’s look at how we can use some of Compass’s features.

Using Compass

So Compass, which as we’ve mentioned is a form of Sass, uses a set of mixins and functions that can help you powerfully and quickly create websites, web apps, and more.

To get started, visit Compass’s website and check out the References section. This will give you an extremely detailed look into all that Compass can provide.

Let’s first look at a CSS reset, which many people include in every one of their projects. Many of the resets are very robust, and usually you have to head over to Eric Meyer’s website to get the reset. But if you’re running a Compass project, including a CSS reset is as simple as

@import "compass/reset";

in your Sass file. That one line in .scss will compile (via CodeKit or the command line) to output

@mixin global-reset { html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { @include reset-box-model; @include reset-font; } // Unlike Eric's original reset, we reset the html element to be compatible // with the vertical rhythm mixins. html { @include reset-body; } ol, ul { @include reset-list-style;...

Since CSS2 developers have been able to use HTML element attribute values to identify Web page items for styling properties. With CSS3, this is extended significantly with the addition of substring matching within attribute selection. This allows you to define styling rules in a more dynamic and efficient way than before, by identifying elements with one or more chained substrings defined in your CSS code.

In this tutorial we will outline how to use these new substring matching attribute selectors. You are most likely to find attribute selectors of this kind useful when styling links, so that is what we will focus on here. There are three main attribute matching additions to CSS3, allowing you to specify substrings to match at the beginning or end of an attribute string, or anywhere within the entire string.

Create a Page

Let’s create a page to use our attribute selectors with. Use the following HTML5 outline:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

We have a style section for our CSS3 code and will place some HTML content in the body section.

Create Some Links

Add the following sample links to your page for demonstration:

<div class="links"> <a href="http://developerdrive.com/section">Site</a> <a href="https://developerdrive.com/secure_section">Secure Site</a> <a href="docs/document.pdf">PDF Document</a> <a href="http://developerdrive.com/files/data.xml">XML File</a> </div>

These do not link to actual resources, so you may wish to replace them with your own. Let’s add some default link styling in the page head style section:

.links a:link { padding-top:15px; padding-bottom:10px; padding-right:35px; margin-right:30px; font-weight:bold; text-decoration:none; font-family:sans-serif; }

You can of course alter this code to suit yourself.

Apply the “Begins With” Substring Matching Attribute Selector

Let’s use the “begins with” selector to apply particular styling to any links connecting the user to secure URLs. We can do this by matching the “https” at the start of a link element’s “href” attribute value. Add the following to your CSS code:

a[href^="https"] { background: url(secure_icon.png) no-repeat right; }

You can use the following image:

The “^” character indicates that we want to match any “href” attributes for anchor elements starting with the specified string: “https”. We display the icon after the link text as we have the padding properties set to allow this.

Note: You can optionally use the “:after” pseudo-selector together with the “content” declaration, but I have personally found this to be a little unpredictable in certain browsers.

Test your page in a browser, this is how the secure link appears in Chrome:

Apply the “Ends With” Substring Matching Attribute Selector

Let’s use the “ends with” selector to style links to PDF documents using an icon, as we did with the secure link. Add the following to the style section in your page:

a[href$=".pdf"] { background: url(pdf_icon.png) no-repeat...

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.

...