With the explosive expansion in the use of tablet computers and smartphones for use in web searches, why are many SEO experts still focused on desktop development? Is it because developers do not feel the need to duplicate their efforts, or does the answer lie in the clients’ or employers’ unwillingness to tolerate the extra expense?

If more users are searching for businesses while on the go (e.g. local restaurants, car insurance claims, auto towing services, etc.) through their smartphones, wouldn’t it be worth the clients’ investment to accommodate them?

How Search Engines Work

For most major search engines (e.g. Google, Bing, Yahoo!), the process of cataloging pages for its database consists of three parts:

The web crawler, which follows links and sends HTTP queries to the millions of sites around the world The indexer, which stores all of the relevant content in its database The query processor, which evaluates a user query and compares it to the stored content.

Traditional SEO

The traditional approach to search engine optimization (SEO) has been to concentrate on keywords, tags and content in order to make a page more relevant to a potential visitor’s queries.  In both mobile and desktop search queries, the search engine query function works in a similar manner, so developers and SEO consultants have concentrated on desktop development.

Responsive Design

Developers have previously addressed the issues of duplication of effort by employing a concept called “responsive design”. The task of responsive design is for the recipient of the HTTP request to check for the platform from which the user is sending his or her request, then displaying the page according to that platform. For instance, when a server receives a request from a user on an iPhone, the server may redirect that user to a page that fits  that browser and operating system.

Splitting Searches

Many developers who create separate content for desktop and mobile site hold the mobile content either under a different domain (e.g. domain.mobi) or under a subdirectory (e.g. domain.com/mobile). While this solution accommodates the users, it may cause problems for search engines. The duplicate content between the desktop and mobile sites may draw penalties from search engines for spamming. Also, separate domains may split the page’s link equity and decrease page rankings in search results.

Smartphone Web Crawlers

Google has already taken steps to consider how to rank pages tailored for smartphones. In December 2011, Google announced the launch of Googlebot-Mobile, a crawler that employs a smartphone user agent to complement its previous mobile phone user-agents. The mission of Googlebot-Mobile is “to increase our coverage of smartphone content and to provide a better search experience for smartphone users.”

Google’s embrace of smartphone technology also extends to changing its search results to reflect URLs specifically designed for smartphones, which saves the time of a URL redirect from the desktop-specific page its smartphone companion page.

What’s the Answer?

At this stage, the question of mobile vs. desktop SEO does not seem to have a clear-cut answer. The changes at Google are an indication that SEO experts may need to shift their emphasis on mobile development. As the technology evolves and the rules change, developers and SEO consultants will need to adapt accordingly.

...

When designing the architecture and navigational structure of a web site, a sitemap can be extremely helpful. A sitemap can keep the navigation links organized by category, predict how any dynamic links will function, and keep the framework under control. Web developers are not the only parties involved in the process who can benefit from a well-structured sitemap. Many search engines, including Googlebot, can crawl through an XML file that contains the sitemap data to crawl and index the site’s content.

What is sitemap.xml?

A sitemap.xml file contains the URL of each page within a site, as well as data on all the files within that page.

Sitemap.xml Example Here is an example of a simple page with a single image and video file:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"> <url> <loc>http://www.example.com/cutekitty.html</loc> <lastmod>2012-09-09</lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> <image:image> <image:loc>http://example.com/image.jpg</image:loc> </image:image> <video:video> <video:content_loc>http://www.example.com/cutekitty.flv</video:content_loc> <video:player_loc allow_embed="yes" autoplay="ap=1">http://www.example.com/videoplayer.swf?video=123</video:player_loc>...

Welcome to the third and final tutorial in the series of creating dynamic web forms using Web2Py.

In the second tutorial of this series, we talked about editing/updating/deleting the submitted form records as well as management of those records using an ingenious function named SQLFORM.grid(), which allowed us to import and manage our form records in a pre-built environment having security features enabled.

In this third, and final tutorial of the series, I would like to shed some light on how multiple web forms can exist on a single page, how a single form can submit data to multiple tables, and finally, a hint about modifying CSS of your web form (which is a common practice in classical PHP based web forms). The reason why I am going to this extent is just to ensure you that web forms in Web2Py are no second to PHP forms, and they have everything that a PHP form can offer – our forms require even less amount of coding, which is exactly the reason why Web2Py and other Pythonic web frameworks are getting popular.

Okay, let’s go.

1. Multiple Forms on a Single Page:

As the header suggests, we are going to integrate more than one web forms on a single page, arranged serially against each other. All these forms will be linked to different tables in the database, but will be incorporated and controlled using a single controller (in our case it is form_a()) function.

We already have one form in place, so we will define two more tables for two additional forms in our default.py:

db.define_table('registration', Field('firstname', requires=IS_NOT_EMPTY()), Field('lastname', requires=IS_NOT_EMPTY()), Field('gender', requires=IS_IN_SET(['Male', 'Female'])), Field('username', requires=IS_NOT_EMPTY()), Field('password', 'password'), Field('image', 'upload')) db.define_table('personal', Field('nick_name', requires=IS_NOT_EMPTY()), Field('address', requires=IS_NOT_EMPTY()), Field('married', 'boolean'), Field('zip_code', requires=IS_NOT_EMPTY()))

Now we have two database tables named ‘registration’ and ‘personal’ having following fields:

registration:

Firstname: Lastname: Gender (Drop-down): Username: Password: Image (Upload Field):

personal:

Nickname: Address: Married (Check Box): Zip Code:

Once the database tables are defined, let’s work on our controller function to incorporate the two forms based on them:

def form_a(): form1 = SQLFORM(db.registration, deletable=True, upload=URL(r=request, f='download')) if form1.accepts(request.vars, session): redirect(URL(r=request, f='form_a')) qq = db().select(db.registration.ALL) form2 = SQLFORM(db.personal, deletable=True, upload=URL(r=request,...

It doesn’t matter whether you’re an SEO, a developer, designer, information architect or any other myriad of digital based roles, we all want the same outcome; to do the best we possibly can for our websites.

As an SEO myself, I’m interested in growing the performance of my client’s website in organic search. This is not something that I (or any other SEO for that matter!) can do single handed. We also rely on the skill of the web developer to implement and carry out our recommendations and technical requests.

With this in mind I wanted to introduce some comprehensive tips that you can inject into your projects that will improve the performance of your websites allowing them, their SEO and you as their developer maximum control and ultimately search engine performance.

On page: title tags

Fundamentally the single most important part of a page with regards to SEO is the title tag. You want to make sure you have the following covered off for maximum impact:

Each page’s title tag is editable There are no dependencies between the title, the H1 or the URL of the page Every title is unique and relevant to the page Try and keep the titles under about 65 characters which will ensure the whole thing is clearly picked up in the search result pages and seen by users

On page: meta descriptions

Although these little chaps don’t carry massive weight in terms of achieving rankings, they are still relevant:

Make sure each page has an editable meta description Each one is unique For extra punch, encourage the addition of USPs and a powerful, persuasive description. For example “Brand new range of aeroplane models from small to large now with FREE delivery and up to 20% off retail price! The best price, highest quality plane kits online!” Keep it within the 170 characters to get the whole thing showing in the results pages

On page: dependencies

Depending on the CMS being used or general technical specifications of the site in question, sometimes there are dependencies that creep in. Most commonly, these are between the page title tag and the page H1 but I’ve also seen them between the title, the H1 and the page URL too. Although you might think it would be logical to have all three elements interconnected because the context of the page content is only about one thing, it doesn’t allow full control. Try to allow each of these elements to be independently changeable to really help maximise the search engine friendliness of your site.

On page: URLs

I’m sure you’ve heard about friendly URLs in the past, in fact Jeff mentioned them back in January. In their ‘raw’ format, many CMS’ will render page addresses as a series of variables and characters logical to the platform. Unfortunately a page called www.example.com/?id=1234?ads_9c.php doesn’t have quite the same user friendly ring to it as www.example.com/our-services/! So adding in those friendly URL rewrites is not only great for SEO benefit, but users will much prefer them to.

Speed: Google Analytics

No, I’m not going to tell you that implementing Google Analytics will speed the site up, well, kind of, there are two variations of GA; the old urchin style and the new a-synchronous. Double check the site has the new version of the code on the site. It’s much more load time friendly than the old urchin code and will help keep page load times down.

Speed: Sprites and Goblins

Just sprites actually. Where possible, combining CSS imagery into a single file and using CSS positioning can really help speed things up on a page. Google uses page loading time as a factor in deciding how to rank a page (a bit like you going to a restaurant, ordering and waiting 2 hours for it to arrive on the table, you probably wouldn’t recommend it to your friends) so we need to think about this. CSS sprites can really help reduce the number of HTTP requests a browser makes when requesting files from the server. This will help keep load times down and hopefully aid those rankings!

Speed: Image optimisation

Ever been in the situation where you or another person creates a new page, puts an awesome photo up on the site, you visit it and it takes over 5 seconds to load as you watch the image render line by line? Yep. Me too. Not only should you optimise your images (Photoshop has an awesome built capability for this but there are tools I like to use on the web that effectively do the same thing) before uploading but think about having a tool within the site that automatically reduces images that are too big (I like this image optimiser for WordPress). This is great if you have users on the site that aren’t immediately aware of the problems that can be caused from uploading a 2,500 pixel width image into a 400 pixel space!

Check back next week for part 2 where we tackle some more advanced techniques.

...

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...

One thing that makes WordPress so dynamic is the ability for readers to easily post comments. This interaction between you and the readers is therefore an important element in your website and should be given the same attention as other sections of your website. So what can you do to improve the comments section on your WordPress website?

1. Removing HTML Links in User Comments

People, and especially bloggers, are always looking to promote themselves on other websites and no doubt will try to do that on yours as well. It can be a demanding and annoying task to have to go through each comment and remove links from them. By default, WordPress transforms URLs into clickable links, but you can add some piece of code to reverse this.

Navigate to the “function.php” file and add the code below:

function plc_comment_post( $incoming_comment ) { $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']); $incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] ); return( $incoming_comment ); } function plc_comment_display( $comment_to_display ) { $comment_to_display = str_replace( ''', "'", $comment_to_display ); return $comment_to_display; } add_filter('preprocess_comment', 'plc_comment_post', '', 1); add_filter('comment_text', 'plc_comment_display', '', 1); add_filter('comment_text_rss', 'plc_comment_display', '', 1); add_filter('comment_excerpt', 'plc_comment_display', '', 1);

The above code filters out links by replacing HTML characters with HTML entities.

2. Use Twitter Avatars in Comments Section

Twitter has revolutionized how website owners communicate with visitors. In addition, visitors find it much easier to add their comments when Twitter functionality has been added. The first thing you will need to do is download the plug-in from this link.

After installing the plug-in and activating it, open the “comments.php” file and locate the comments loops. Paste the entire code from the file inside the section below:

<?php twittar('45', 'default.png', '#e9e9e9', 'twitavatars', 1, 'G'); ?>

You can also adjust the values inside “twittar();” such as the avatar size, the URL to use when an avatar cannot be retrieved as well as the border color.

You can also leverage the Disqus plugin to add more functionality and features to the comments system.

3. Style Author Comments

If your blog posts attract a lot of user comments, it can be a little difficult for readers to find author comments and responses if you do not have the threaded comments feature. One of the best ways to highlight author comments is by styling them differently. To do this, locate the “comments.php” file and locate the loop below:

<?php...

Boosting online traffic is one of the main goals for virtually every website on the Internet. A conscientious site owner, seeking to optimize performance, will regularly check detailed traffic logs available through their hosting account or a third-party service, like Google Analytics.

One very big potential problem that can be quickly detected involves the unauthorized use of files from your website by another Internet property. You must be watchful for this practice, especially if your site contains a lot of attractive image files, because it can significantly inflate traffic figures very quickly.

When checking website traffic data, review the amount of bandwidth that has been consumed for the current month. Bandwidth represents cumulative file usage. The set amount per month should not be exceeded. If it is, site visitors will be treated to a page displaying a warning message that the bandwidth limit has been exceeded. They will not be able to access any areas of the site.

Needless to say, this situation needs to be quickly remedied by either increasing the existing bandwidth limit, or by purchasing more from your hosting company. The latter option can be very expansive, so it behooves every site owner to ensure that he or she is getting the ‘most bang for the buck’ in terms of visitor usage.

It can, therefore, be a heart-stopper when you log in during the first week of the month, and find out that, say, over 40% of your assigned bandwidth has already been consumed.

Given that trend, you will very likely run out before the end of the month. Further investigation is needed. First, check the stats for the Referral Sites to see if an inordinate amount of visitors came from one specific URL outside if your own domain.

Then, look closely at which specific files have been most accessed by visitors. If an attractive image file happens to be one of them, it may mean that you’ve become the victim of bandwidth theft, and that the high traffic number is partially being generated by another site that has posted a direct link to your image.

If the other site attracts a large volume of traffic, such as an active message board or social media site, it will cause a tremendous spike in your monthly bandwidth transfer total. This practice is known as ‘hotlinking’.

In short, it means that lots of precious bandwidth is being burned up with virtually no benefit to you. Instead, an unscrupulous site owner is using your image(s) to adorn his or her site. It also may be that a poster to a message board has hotlinked to your image, a development that the other site owner might be unaware of.

.HTACCESS file

The solution to the problem of hotlinking is a properly constructed ‘.htaccess’ file. This file, which is utilized to limit online access to certain site components, sits in your site’s root (main) directory.

To create the file, open a basic text editor like Notepad (Windows), or TextEdit (Mac). Copy a designated group of lines into the file, depending on your need, and paste them into an empty text file, as outlined below:

Options: 1) To stop hotlinking of any site images by displaying a replacement graphic when someone tries to do so, copy and paste the following lines.

RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC] RewriteCond %{HTTP_REFERER} !^$ RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/qX4w7.gif [L]

Replace ‘mysite’ in the second line with your own URL. If your domain ends in ‘.net’ or ‘.org’ instead of ‘.com’, change that as well.

Save the file as htaccess.txt, and place it in the first hierarchal line of the stored website on your hard drive – the same line as your index (home page) file.

Upload the file to your server, then rename the txt file to .htaccess in your online directory.

After the adjustment to the .htaccess file name, a would-be hotlinker will see a graphic displayed on his or her site that states, “Warning: Do not hotlink images and steal bandwidth”, instead of your image file.

2) To prevent hotlinking from specific outside domains only, such as facebook.com, blogspot.com or myspace.com, but allow any other web site to hotlink images, utilize:

RewriteEngine On RewriteCond %{HTTP_REFERER} ^http://(.+\.)?facebook\.com/ [NC,OR] RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogspot\.com/ [NC,OR] RewriteCond %{HTTP_REFERER} ^http://(.+\.)?myspace\.com/ [NC] RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/qX4w7.gif [L]

As many domains as you like can be added to this expression. Every RewriteCond line should end with the [NC,OR] code, except the last one.

Website owners should be vigilant about checking for bandwidth theft. Once detected, a properly constructed .htacces file will permanently prevent this issue from occurring.

...