BlogmyQuery – BMQ

It’s been a couple of years now since the concept of responsive design took the Web design world by storm, and more and more websites are going responsive. But there are still some barriers and potential problems, not the least of these being the challenge of reducing the size of files that you’re sending to mobile devices.

In this article, we’ll look at how to use WordPress’ built-in featured images capability to deliver different-sized image files to different devices. “Featured images,� sometimes referred to as thumbnails, is a feature of WordPress that has been vastly improved since version 3. It enables you to specify a featured image for each post and display it with the post’s content. The fact that the image is stored in the post’s meta data, rather than embedded in the post’s content, means we can use it more flexibly, as we shall see.

Why Worry About Image Size?

OK, so a lot of people do use their mobile devices to surf the Web while sitting on the sofa, hooked up to their Wi-Fi, one eye on the phone and one on the TV. And many browse for information sparked by a conversation with the people around them. This type of website visitor is becoming more and more common. You might even be reading this article in this way right now.

But there are and will always be people who use the Web from a mobile device while out and about, possibly using 3G in an area with a dodgy signal or on an expensive data plan. We Web designers and developers tend to invest in data plans with all the bells and whistles; but, believe it or not, plenty of people out there don’t use the Internet as much as we do and so choose a limited plan.

These people won’t thank you for using up their data by sending huge image files to their devices. They may well abandon your website before looking at it if the image downloads are slowing everything down. Moreover, mobile visitors might only check your website quickly in the middle of doing something else, and a slow website could harm your search engine rankings. Taking all this into account, surely reducing file sizes for mobile devices is a no-brainer.

Responsive Images: What’s It All About?

By now, you probably know what responsive design is: it uses a combination of a fluid layout and media queries to define breakpoints at which a website’s layout or content changes to fit a particular screen size. Most responsive websites use media queries to target phones; some target tablets such as iPads as well.

In the early days of responsive design, making your images responsive meant using CSS to ensure they stayed nicely inside their containing element, with this code:

img {
   max-width: 100%;
}

This technique makes the images look tidy, but all it really does is shrink the same large image to fit the layout. It does nothing to alter the actual size of the file, which could lead to huge image files sneaking onto your mobile design and seriously slowing down the website. Displaying large images that have been shrunk with CSS is discouraged by the W3C, and it uses processing power and data, so it’s a particularly bad idea on mobile devices.

When we do responsive design now, we generally include some way of making the image’s actual size smaller, using one of a variety of established techniques.

More Than One Way To Skin This Cat

If you’ve taken an interest in responsive design, you’ll have noticed that quite a few methods of delivering truly responsive images have emerged. Here are some of those methods:

• Replace images in the markup with background images, using images of different sizes depending on the device. This method has serious accessibility and SEO drawbacks because the images don’t have alt tags for screen readers to read or search engines to index.
• Use a smaller image in the markup and a larger image as the background of the containing element in the desktop version of the website, and then use CSS to hide the smaller image on larger screens. This method, described in detail by Harry Roberts on CSS Wizardry, is better than the first one, but it does require that you manually create two images and then, in the style sheet, define the background image for every single image on the website. I don’t know about you, but I certainly don’t have the time or patience for that!
• Use a JavaScript-based solution that employs URL parameters or data attributes. This avoids the repetitive work above, but it involves more processing and can slow the website down—the opposite of what you intended.
• Use a solution such as Matt Wilcox’s Adaptive Images, which does the work for you. This is the smoothest option I’ve seen, but it requires that you separate the images that you want to be resized from those that you don’t—a potential problem when handing over a CMS-based website to a client or editor who isn’t technologically savvy.

The fact that Adaptive Images uses PHP got me thinking about how this could fit WordPress, which, after all, is written in PHP. Is there a way to use WordPress’ built-in functionality to deliver responsive images in a way that the client would not be able to break?

The answer is yes… with the addition of just one free plugin.

WordPress Responsive Images: Making It Work

I’ll demonstrate this technique using a website that I recently developed for a client, What’s a Mayor For?. This website is responsive and gets a significant portion of visits from mobile devices. At the moment, it uses max-width to resize images, but it doesn’t send different image files to mobile devices.

This is what the website looks like in desktop and mobile browsers:

Click on the images for a large preview.

As you can see, the images scale to fit the layout. But what you can’t see is that the image’s actual size stays the same. We need to change that.

The solution we’ll follow here uses the following elements:

1. A free plugin called Mobble, which detects devices and provides conditional PHP functions that you can use to deliver different content to different devices in your theme’s files;
2. The single.php and page.php files, which we’ll edit to display the post or page’s featured image, but altering the image’s size according to the type of device;
3. The featured image functionality in WordPress’ dashboard, which we’ll use to define the image used for each post and page.

Let’s get started!

Download the Mobble Plugin

First, download the Mobble plugin. This will check the browser’s user-agent string to determine which device the user is on. These checks are wrapped in WordPress-style conditional functions, such as is_mobile(), which is the one we’ll be using. Purists will balk at this approach, but in my experience it’s very reliable, and the plugin does get a high rating in WordPress’ repository.

Download and activate the plugin.

Edit the single.php and page.php Files to Call the Post’s Thumbnail

Using a text editor or WordPress’ editor, open the single.php file. Find the following code or something like it:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<section class="entry-content">

In our example, the image needs to be displayed immediately after the heading and before the content, so our code needs to be inserted between the h1 and section tags. If your website’s theme doesn’t use HTML5, you may put a div there instead of section.

Here is the code that displays the featured image for a given post:

<?php the_post_thumbnail(); ?>

The function has some parameters that we can use, the most relevant being image size. You can use any of the sizes defined by WordPress:

• thumbnail
  Thumbnail: by default, a maximum of 150 × 150 pixels
• medium
  Medium resolution: by default a maximum of 300 × 300 pixels
• large
  Large resolution: by default, a maximum of 640 × 640 pixels
• full
  Full resolution: the original uploaded size

This is where our conditional function plays with the image’s size. Here is the full code we’ll need:

<?php
   if (is_mobile()) {
   the_post_thumbnail('medium');
   } else {
   the_post_thumbnail('large');
} ?>

This code does the following:

1. Checks whether the website is being viewed on a mobile device: if (is mobile());
2. If so, outputs the medium resolution of the post’s thumbnail (or featured image): {the_post_thumbnail('medium')};
3. If not (i.e. else), outputs the large resolution: {the_post_thumbnail(large)}.

Having set up the single.php file, let’s do the same for page.php. Then, we need to change any embedded images to featured images via the WordPress dashboard.

Use WordPress’ Featured Image Functionality to Display the Images Correctly

Adding featured images in WordPress has been very simple since the functionality was incorporated in the user interface in version 3.0. Just follow these three steps:

1. In the WordPress dashboard, open the editing screen for each post and page.
2. Delete the existing image (it will remain in the gallery for that post or page, which will be helpful in a moment).
3. Click “Set featured image� in the bottom right of the screen.
4. In the “Set featured image� pop-up, click the “Gallery� tab. The image you just deleted will be displayed. All you need to do now is click “Use as featured image,� and then click the little cross in the top right of the window. Don’t insert the image into the post or else the image will be displayed twice.

   
   Large preview.

5. Finally, click the “Update� button to save the changes that you’ve made to the post, and test it.

Summary

As you can see, using WordPress’ featured images functionality to make responsive websites faster on mobile devices is a fairly simple process. All it takes is three steps:

1. Install the Mobble plugin.
2. Add conditional tags to the single.php and page.php files to call different versions of the image depending on the device.
3. Replace images in the body of the content with the featured images.

Of course, this method isn’t perfect for all situations. It only works if the image should appear above (or below) the rest of the content, and it does require that anyone who adds a post or page use the featured image functionality instead of just inserting an image in the body of the content. All you need to do now is educate the editors of your website to use featured images instead of images within the content. But how you do that is for another day!

(al)

© Rachel McCollin for Smashing Magazine, 2012.

The WordPress community recently reached a huge milestone in its development, having earned its 60 millionth user on November 2011, according to WordPress founder Matt Mullenweg in an interview at the GigaOM RoadMap conference in San Francisco last year.

Backing up that huge global community of WordPress administrators is a rapidly growing band of developers who create plugins and themes for the software, currently over 15,000 plugins according to Mullenweg’s statement at State of the Word 2011. This community of developers has created one of the most extensive array of themes for the WordPress content software, with numerous websites sprouting up around the Internet solely to offer their unique designs to customers who would rather not learn the ways of CSS, XHTML, PHP or even search engine optimization (SEO).

The Truth About Themes

Every theme comes with a sales pitch, and most WordPress themes promise not only to be highly usable and attractive, but to boost the website’s rankings in the major search engines and thus drive increased traffic to the website itself. That’s a great claim and, if true, certainly a major selling point for any great WordPress theme.

But not all claims of SEO support are arrived at equally, and WordPress administrators are finding that many themes have no impact on their website’s SEO at all. In fact, some themes employ underhanded or outdated methods of SEO that could actually damage a website’s reputation with the major search engines or cause them to get banned from search results entirely.

SEO ≠ Rocket Science

SEO isn’t rocket science. There are some expert ways to boost a website’s ranking on the major search engines that are not only easy to do (and easy to look for on WordPress theme websites), but well-publicized by the search engines themselves. This means that, with minor modifications, WordPress users can turn their template into a treasure trove of search-driven visitors, even if the theme natively supports outdated or erroneous SEO techniques.

When shopping around for a free or premium WordPress theme that makes strong promises to execute expert SEO, here’s what to keep in mind, what to look for and how to edit files in your quest to elevate your website’s ranking.

Absolutely No Flash-Based Templates Ever, For Any Reason, Period

For several years, developers were big on Adobe Flash in their attempts to create visually stunning websites. They employed it in website headers and mastheads and to display headings in non-native fonts, and they even designed single-page websites entirely in just one Flash animation window or content area. This approach to Web design no doubt did (and still does) lead to visually stunning results. The problem with Flash is that it is not treated like standard XHTML when browsed and ranked by search engine spiders. Indeed, Flash is often detrimental to a website’s ranking because search engines simply can’t process all of the content contained within it. Most search engines can’t index Flash content because it’s more of an embedded computer program than plain text.

Flash is not treated like standard XHTML when browsed and ranked by search engine spiders.

That being said, Flash is not as detrimental as it once was. Adobe has released new versions of the software and API in recent years that enable search engines to read any text processed by an Adobe Flash file, rather than treat it like an image (as search engines did just a few years ago). When reading a Flash-based website, however, search engines don’t really “scroll� through the content because scrolling is not natively supported in most Flash-based designs. Instead, they take only what can be seen on the website’s first page, or “above the fold,� and base their search engine rankings on the content’s volume, authority and user interaction.

Combining that with how expensive Flash-based templates generally are, most WordPress website owners will find themselves in the precarious position of having to spend a great deal of money on their new theme with minimal improvement to their ranking in search engine results. Established websites might even experience a decline in ranking by switching to a Flash-based theme. Steer clear of Flash, and always choose XHTML-based WordPress templates. If you need embedded fonts, native animation and other slick features, then choose an HTML5 theme, which will ultimately be friendlier to search engines. Although HTML5 templates have just entered the market and so are not yet as common, the demand for these consumer- and search engine-friendly templates is growing rapidly.

Frames (Inline or Otherwise) Are Not Used

A lot of design-based trends over the years have found their way onto WordPress websites by way of stock templates and custom solutions. A few years ago, the biggest trend in Web design was to use inline frames to display content from external websites (or to display a different template) without sending the user away. Combined with non-inline frames used for “permanent sidebars� and pages that do not move when the user scrolls, this turned into the biggest Internet design phenomenon of the early to mid-2000s. That has changed significantly, and for good reason.

Frames of all types are difficult to use and are simply not intuitive. Users don’t understand why content they click on doesn’t move or loads within the website’s XHTML construction or looks completely different from the main content area where there are no frames to speak of. This confusion causes new visitors to leave and never return and impairs the website’s authority in the eyes of all major search engines. Switching to a frame-based layout, either inline or external, will also discourage visitors from coming back.

The second and perhaps most important effect of frames is that they confuse search engine spiders that crawl the content and rank the website based on what they find. When a website is a single frameless page, all of the content is simply printed onto that page and is part of the standard XHTML that appears to spiders. When frames are used, the website has no discernible “home page,� and it cannot highlight its content or keywords in a way that search engines can identify, track and rank. Instead, spiders perceive the index page to simply not exist and treat every part of the framed website as a secondary website or subsite. Those websites are naturally recognized as “less than� index pages, and the website’s purpose or authority is never transmitted to the search engine.

In recent years, the World Wide Web Consortium (W3C) has approved a number of great ways to achieve the look and feel of frame-based websites without the usability problems or compromised ranking in major search engines. These new tools use existing XHTML tags to include internal or external websites in something similar to inline frames. According to the specification, a website may keep certain elements, such as the navigation or log-in area, at the top, bottom or side of the page, just as with traditional frames, using XHTML or HTML5 in combination with CSS. This approach is the perfect replacement for frames, because it communicates the website’s mission, authority and keywords to search engines without the confusion of frames or the apparent structure of subpages.

Alternate Text and Title Tags in XHTML Are Present

The Internet’s design standards body and developers of SEO techniques seem to agree on at least one thing: Using alt and title tags in XHTML is absolutely essential to increasing a website’s standing among readers and the search engines that bring them. There are a number of reasons for this, and those in the market for a theme that does a great job at SEO should understand why such tags are so essential to the daily operation of their website.

First, using these two tags is a great way to improve the accessibility of a website in general. Users who browse a website with screen reader software or who turn off JavaScript or CSS will rely on image titles and alternate text to paint a picture of what’s going on with the content, including the headers and sidebars. The alt tags are read to the visitor by the screen reader software and are, therefore, absolutely essential to good design. A good theme developer knows this and includes them perhaps for this reason alone.

The more advanced developer knows that alternate text and title tags can be extended to links so that both links and images pull in search visitors and improve the website’s rankings in major search engines like Google and Yahoo. Alternate text gets read by search engine spiders and contributes to the website’s keywords and relevance. Therefore, a website that is heavy on images won’t have to sacrifice its search engine rankings due to a lack of textual content. Indeed, the alternate text in these images could literally tell the website’s story.

Using alternate text and title tags in XHTML code is absolutely essential to increasing a website’s standing among readers and the search engines that bring them.

The same could be said of the alternate text (or title text) placed in a standard link code. The anchor text between the <a> tags tells a search engine what a link does or where it goes, but the alternate text puts that link into context and tells the search engine why it is there, which keywords it is recommending and why the link is important to the website’s overall function and authority.

Luckily, even if a theme does not include these tags, adding them to all images and links yourself is pretty easy. The image tag will look like this when done:

<img src="image.gif" alt="This is a picture of a money-making business"
title="Money-Making Business Image" class="seo-image" />

The links scattered throughout a template’s header, footer and sidebars could be treated similarly. Make sure search engines don’t ignore them by putting the links into context, like so:

<a href="profits.htm" alt="We can help you earn higher profit. Clicking here for details."
title="Profit-generating link" class="seo-link">Keyword-rich anchor text</a>

Of course, modification should be the last resort for optimizing a theme for search engines. The best WordPress theme designers already apply these techniques to all non-textual links, so administrators can simply upload the design, activate it and be on their way. Knowing how to make these changes is good, though, because a website owner will want to add many of their own links to the ones built into the template.

Meta Tags Are Not Relied on Too Heavily

At the dawn of the SEO era, nothing was more important to search engines than meta tags. This development was advanced by the standardization of tags that enabled website owners to include keywords, descriptions, character sets, languages, countries of origin, real author names and all kinds of other information without explicitly advertising that information to the website’s readers. This was fine, and it worked somewhat well, but then things went downhill. People abused these tags and began to create “link spam,� leading to fraudulent and malicious search engine results.

Google and Yahoo, among other major search engines, decided that this was no longer the best way to gauge a website’s reputation, authority and content, and so they basically deprecated meta tags as a form of SEO. Over the next few years, they revised their methodology, putting more emphasis on a website’s actual content, its perceived authority and number of visitors (or clicks), its keywords and its links. Today, meta tags are still used and included in almost every WordPress template, and certainly nothing is wrong with that. But no matter how thoroughly they fill out these meta tags with useful information, website owners should not expect them to improve their website’s standing in major search engines. Rather, they should regard them as tools to help minor search engines, website indexes and fellow developers.

Administrators should look for themes that use descriptive content in the actual design itself instead of in outdated meta tags. We used to describe our websites in full sentences and even paragraphs in those meta tags; today, such descriptions should be placed prominently on the home page, rather than relegated to the head tag. Any good WordPress theme ships with placeholder boxes for things like the author’s biography, an explanation of the website’s purpose, and justification for its authority on a subject matter. Website owners can fill in those areas with keyword-rich information that will elevate their website’s standing far better than any meta tag.

Nowadays, meta tags are more of a nod to a bygone era than a way to optimize a website’s ranking. Look for places to add genuine user-visible content, full of keywords, to replace these long-deprecated SEO tools.

A Solid Site Map

If the Internet is the “information superhighway,â€� then site maps are the “Internet’s super-atlas.â€� A site map, composed of either XHTML or XML, guides search engine spiders to the content that is most relevant to the website’s mission and subject. Google has released its own XML-based site map standard, which has been adopted by a number of its leading competitors, including Yahoo. The XML site map is the first thing a search engine spider sees — if it exists, that is. Sadly, XML site maps are exceedingly rare in WordPress themes in general, let alone those offered for downloading or purchase.

A site map, composed in either XHTML or XML, guides search engine spiders to the content that is most relevant to the website’s mission and subject.

Unfortunately, even a great SEO-focused theme might not include functionality for automatically generating an XML site map and updating it every time an article or page is published. This is because, generally speaking, a site map file exists independent of the actual theme, so it has to be controlled by separate plugin (downloaded from WordPress.org), rather than by an add-on to control panel placed in the theme’s functions.php file.

The important thing about site maps is that they help search engines distinguish between fresh content and static pages. Furthermore, when a site map is updated, it automatically notifies search engines that fresh content is available for indexing, and this “freshness factor� boosts the website’s ranking for the relevant keywords. A site map can be thought of as a guide to new articles, as well as the primary way to inform search engines that new content has been posted and that the website is active and not stale.

Again, most WordPress themes do not have this functionality built in. That being said, many themes ship with their own control panels to help with several optimizations. Always look into exactly what functionality does and does not come with a theme. And remember that SEO should be applied to all of your pages all of the time, independent of the theme, for maximum effectiveness. For this reason, seek out plugins that are widely compatible with themes.

Dashboard-Based SEO Controls for Better Rankings and Content Management

Theme developers have the option to use the theme-specific functions.php file to include a customized control panel in the standard WordPress dashboard. The control panel could certainly be set up to control the appearance of the theme, and there’s no reason for website owners to shy away from themes that focus on this. But those interested in SEO should look for a theme whose control panel helps them point and click their way to better search engine rankings.

A handful of themes perform this function adeptly, perhaps the most prominent among them being Genesis, which costs a few dollars. The cost is well worth it, however, because its SEO options in the control panel are excellent, enabling the administrator to control everything from the home page to the doctitle element to the standard link code.

A control panel with great SEO functionality will help users control their keywords and highlight them in new areas of the website. It will help them optimize their link code and replace unhelpful titles and keywords with nofollow links and code that boosts the website’s rankings. Themes such as Genesis ship with control panels to manage links, the home page’s title (which should always be rich in keywords), the document’s head, the doctitle element, nofollow links and referral agents.

Themes with an SEO-focused control panel are among the best performing themes with search engines. Let’s face it: a developer who creates a control panel for SEO is obviously well aware of what search engines look for and ignore in content, and the flexibility and adaptability of the theme will undoubtedly help elevate the website’s ranking.

Of course, you should not disqualify a theme simply for lacking an SEO-focused control panel. In fact, many WordPress users prefer all of their optimizations to be in a dedicated plugin, and not in the theme’s functions.php file. The advantage of this is that optimizations will continue no matter how many times the owner changes the theme.

So, look for a theme that will help you manage keywords and make other optimizations, while also keeping an eye out for plugins with dedicated control panels, which will make your efforts more consistent and predictable.

No Hidden Text

If there is one thing that elicits a collective sigh from almost anyone in SEO, Web design or XHTML development, it is the use of so-called “hidden text� to fool search engines into ranking a website highly. This method used to be a perfectly effective way to ensure a high ranking in major search engines until about last year or so. At that point, the major search engines declared it to be a misleading way to draw visitors, generate clicks and earn revenue from content that simply does not exist as far as end users are concerned.

Like meta tags, hidden content is being completely ignored by search engine spiders. In fact, major players like Google and Yahoo have gotten so serious that they’ve begun to ban websites that attempt to fool them into ranking the website higher than it deserves. And once a website has lost the trust of Google and Yahoo, earning it back and being re-added to their indices is nearly impossible.

Despite this new standard, many SEO-targeted theme galleries still offer templates that instruct users on how to hide content, nudging them to craft large blocks of text full of nothing but spammy keywords. In fact, some themes even ship with this information filled in according to the type of website being built (i.e. business websites get one kind of content, music websites get another kind, and so on).

Be warned that these themes will do absolutely nothing to improve your website’s standing and will, more than likely, simply lower the website’s reputation and ranking while risking banishment from the major players. The content read by spiders must be the same content read by ordinary visitors. Anything shady will be punished by the big names in search, and deservedly so.

RSS and Atom Syndication Are Not Forgotten

FeedBurner could significantly harm a website’s overall traffic. Avoid any theme that ditches WordPress’ conventional PHP-based feed templates in favor of a remotely hosted solution.

An unfortunate trend has emerged in recent years among some of the Internet’s leading blogs and magazines. Rather than self-host their own RSS and Atom syndication feeds, they’ve outsourced the job to third parties such as FeedBurner. FeedBurner has a pitch-perfect marketing campaign that pulls in consumers and companies alike. It promises to make your RSS feed more readable and accessible to a wider pool of users, who will use FeedBurner’s website, rather than yours, to browse your feed and subscribe. And this will boost your website’s search rankings as users flock to your content in greater numbers. Sounds great, right?

Wrong. FeedBurner could cause a significant decline in your overall traffic, so avoid any theme that ditches WordPress’ conventional PHP-based feed template in favor of a remotely hosted solution. There are a number of reasons for this. First, the RSS link that is generated will point to FeedBurner, not your website; the result is that any authority you would have earned from new back links to your website are now diverted to a third party.

Secondly, a website that has its own RSS feed, hosted on its own servers and offered for auto-discovery with a proper meta tag is ranked as more authoritative than websites whose content is syndicated through a third party or not at all. This is important, especially because new search algorithms such as Google Panda are increasingly ranking websites based on their authority and expertise. An RSS feed enhances this, so shunning it or outsourcing it to a third party forces you to work harder for your reputation.

A theme that is strong in SEO is fully robust, with a template for every aspect of the website. Each of those templates will, in some way, help the website earn the ranking and respect that the website deserves from search engines. Always look for the “feed� templates in your WordPress theme. When in doubt, look for three file names in particular:

• feed-rss.php
• feed-rss2.php
• feed-atom.php

These templates are responsible for producing the three key RSS feeds that syndicate posts, pages, content, comments, categories, tags and archives. They produce RSS 1.0, RSS 2.0 and Atom feeds that can be read by search engines in real time and that notify spiders of new content, which will only help the website in the long run. Do not overlook this important (and practically required) reputation-building tool.

Categories Are Favored Over Dates for Archiving

Organizing WordPress content is made relatively easy by the three techniques done in the dashboard interface: categorization, tagging and date-based archiving. Choose a theme that makes all three of these methods available both to end users and to search engine spiders. However, a theme that is strong in SEO favors category groupings over date-based archiving.

The basic idea is that technologies such as Google Panda assign higher rankings to fresher content. When a website heavily emphasizes its archive (even the word sounds dirty to most SEO professionals), it’s essentially inviting Google to look at content that is old and probably not reliable any longer.

When those same entries are placed in keyword-rich archives, Google is likely to look less at the date and more at the nature of the content, the keywords and how many people have clicked through and found the content useful. This will no doubt lay a great deal of work on the shoulders of the website’s administrator, who will be responsible for creating a vast number of keyword-heavy categories and children; however, with the right theme selected, this work will pay off. It’s a way to sneak in extra keywords, boost credibility and draw Google’s attention away from dates toward titles, content and keywords.

Robots.txt File Is SEO-Friendly

Perhaps the least known file on any Web server (except maybe for .htaccess), robots.txt is one of the most important aspects of a well-rounded, SEO-friendly design. This file directs search engines to the most relevant content, categories, pages and folders and prohibits them from indexing pages that would be of little use to readers and that wouldn’t improve the website’s ranking.

Most themes with great SEO alert search engines to a robots.txt file that contains some broad rules guiding search engines to categories, tags and pages and away from archives, search forms and static custom templates. Administrators should keep an eye out for this file and read the developer’s description of it to ensure that their content is being used in the most efficient way possible.

When combined with an up-to-date XHTML or XML site map, a robots.txt file is the icing on the cake. It could mean the difference between holding the top spot on Google and languishing on the second page, held back by a number of static, irrelevant, keyword-light pages.

An SEO-Friendly Theme Only Goes So Far

It cannot be overstated that picking a great theme is only half the battle — indeed, maybe slightly less than half of the battle. While an SEO-friendly theme will certainly help, it alone can’t turn a last-place website into a winner.

Website owners must also pay careful attention to the way they buy, write and advertise content. In recent years, search engines have gotten increasingly sophisticated in distinguishing between spammy content and what is actually intelligent and of high value to users. If they detect a half-baked effort or more keyword spam than genuine content, then they will send those websites to the back of the line again and again.

The goal of SEO should not be to draw users to the website once and get them to click on an ad, but rather to draw them in with helpful search engine results and keep them hooked with a wealth of well-written, authoritative content. Search engines equate time spent on a website and deeper page clicks with greater authority and expertise, so a website that achieves this will reap greater rewards.

Remember to write stellar content, set up keyword-rich categories and use SEO-friendly XHTML code in any content that requires a link or image. If the core of a website’s content is rock solid, then a properly optimized theme will showcase it and take the author to the next level of relevancy and income, without desperate tactics like keyword spam, hidden content or bloated and outdated meta tags.

Speed Matters

Not only do statistics show a correlation between a website’s speed and the owner’s revenue, but Google has recently started taking speed into account in its rankings. A slow website could find itself lower in ranking, while faster websites could rise — and get more revenue in the long run.

As an owner, then, you might find yourself asking, “What can I do to improve my website’s speed?�

Before improving the speed of your website, you need to find out how fast it currently is. Free tools such as Google’s Page Speed and Yahoo’s YSlow evaluate a website’s performance and provide ways to improve it. Solutions such as caching and better hardware can further improve your website’s search rankings in the long run.

Free tools such as Google’s Page Speed and Yahoo’s YSlow evaluate your website’s performance and provide ways to improve it.

You can find the actual “Site Speedâ€� metric that Google uses under Content → Site Speed in Google Analytics. Website owners usually cannot tell the difference between this metric and the “Page Speedâ€� score.

Finally, Don’t Sacrifice Usability for Visibility

The overriding criterion for a theme should be the usability of the website itself. As critical as SEO is for Internet search today, even a well-optimized website will fall flat if users cannot easily navigate the content or find the information they need. The user’s arrival on your website counts for something, but their continued interaction and deep digging are actually more valuable for reputation and revenue.

In Conclusion

With all of these considerations in mind, website administrators should be able to pick the best theme for their business, the one that best combines SEO, XHTML standards, CSS styling and aesthetic beauty, the one that ensures their long-term success in content creation and search placement. With over 15,000 people creating new themes and plugins for the WordPress ecosystem every day, the options are robust and expanding at a lightning-quick pace.

(al)

© Rochelle Riva Bargo for Smashing Magazine, 2012.

Without any doubt colorful and high quality vector icons are one of the most desirable resources in field of design. Even though the World Ecology Day is far ahead of us awareness still needs to be raised around the world. Today’s freebie collection contains 20 vector icons designed in this theme. This exclusive ecology icon set of vectors has been designed by Jasmina Stanojevic, one of our regular Illustrator experts.

So take a look at the set in the preview below, and hopefully you will have a need for these fun and fantastic new freebies we have for you as a way to show our appreciation for the continued support of our blog and mission.

The Icons

This ecology icon set has been created in Adobe Illustrator CS5 as scalable vectors, making it possible to use them in different sizes without quality loss. Beside the scalability icons are completely editable, which makes them perfect for any use. The download contains a .zip file with the original .ai file and an .eps version as well. Icons are available for use in personal and commercial projects.

Download

Designer Bio

Jasmina is a self taught vector illustrator from Serbia who has been working as a freelance designer for over five years now. Her biggest passion is in vector illustrations and motion graphic design. In her spare time she likes to read comic books and playing Call of Duty 2. You can check out her portfolio for more and also follow her on Twitter.

(rb)

Without any doubt colorful and high quality vector icons are one of the most desirable resources in field of design. Even though the World Ecology Day is far ahead of us awareness still needs to be raised around the world. Today’s freebie collection contains 20 vector icons designed in this theme. This exclusive ecology icon set of vectors has been designed by Jasmina Stanojevic, one of our regular Illustrator experts.

So take a look at the set in the preview below, and hopefully you will have a need for these fun and fantastic new freebies we have for you as a way to show our appreciation for the continued support of our blog and mission.

The Icons

This ecology icon set has been created in Adobe Illustrator CS5 as scalable vectors, making it possible to use them in different sizes without quality loss. Beside the scalability icons are completely editable, which makes them perfect for any use. The download contains a .zip file with the original .ai file and an .eps version as well. Icons are available for use in personal and commercial projects.

Download

Designer Bio

Jasmina is a self taught vector illustrator from Serbia who has been working as a freelance designer for over five years now. Her biggest passion is in vector illustrations and motion graphic design. In her spare time she likes to read comic books and playing Call of Duty 2. You can check out her portfolio for more and also follow her on Twitter.

(rb)

If you like to spread your CSS over multiple files, as many people do (but I don’t), it is generally a good idea to concatenate them before deployment to reduce the number of HTTP requests.

There is one thing to be aware of when doing this – if you use any @import rules they must precede all other rules in that file, as per the CSS 2.1 specification. So if any other than the very first of the CSS files you concatenate has an @import rule, the combined file will violate the specification.

Read full post

Posted in CSS.

Copyright © Roger Johansson