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.

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

Howdy, folks! Welcome to the new incarnation of Smashing Magazine’s Q&A. It’s going to work like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you are having, or it could be a question about philosophical approach. We’ll take all kinds.

We’ve done a bit of this before with a wider scope, so if you enjoy reading the Q&A, check out my author archive for more of them.

Box Sizing

Question from Brad Frost:

What are your thoughts on Paul Irish’s idea to apply box-sizing: border-box to every element on the page?

Using box-sizing is super-helpful, especially for mobile and responsive design (for example, getting fully fluid form fields with fixed amounts of padding is awesome). But I’m leery of applying it to everything.

Besides browser support (I’ve already run into issues with some less-than-smart mobile browsers), can you think of any downsides to this technique?

An armchair critic of this technique would whine about the performance of the universal selector (*). This whine has been largely debunked. While this selector technically is “slowerâ€� than something like a class name selector, the difference is negligible, except in extreme cases of overuse or on pages with zillions of elements. Doing something that reduces one HTTP request makes at least an order of magnitude bigger difference than optimizing selectors.

For the record, the complete and recommended syntax is this:

* { 
   -webkit-box-sizing: border-box; 
   -moz-box-sizing:    border-box; 
   box-sizing:         border-box; 
}

With this, you essentially get perfect browser support in everything — even the vast majority of mobile Webkits. The notable exception is IE 7 and below. I don’t want to open a can of worms, but IE 7 usage is already low and dropping much faster than IE 6 did, so supporting only IE 8+ will be commonplace very soon.

Here’s a quick primer on why using this box model is nice:

• Now, when you set a width and height, the element will always be that width and height, regardless of padding and borders.
• This makes math a lot easier. For example, you could easily make a four-column grid by making the width of each column 25% and floating them. You could make gutters out of pixel padding and not worry that they will expand the columns and break the grid.
• It’s also extra useful for text areas that you want to fill to their parent’s width, which you can only do by setting their width to 100%. But then you wouldn’t be able to have padding unless you used this box model, lest they expand beyond the parent’s width.

You mention a problem with a mobile browser but not exactly what the problem is or which mobile browser. It would be interesting to know which browser and what the problem is, so if you could follow up in the comments, that would be great.

For me, I’m using it on everything I build from here on out. It’s been fantastic so far, and I see no reason not to go with this empirically better box model.

CSS Sprites Workflow

Question from Matt Banks:

What’s your preferred method for creating and managing CSS sprites? Do you use Photoshop to manually create your own sprites, a Web service or an app like SpriteRight? For updating sprites with new images, what workflow is best and easiest?

I have an article from 2010 about my workflow for CSS sprites, in which step 1 is this:

Ignore sprites entirely. Make every background image its own separate image and reference them as such in the CSS.

Of course, I’m not suggesting that you don’t use sprites. Quite the contrary: I think using sprites and having a good workflow are paramount to being a good front-end coder and often the number one thing you can do to optimize Web performance. What I was trying to say is don’t pre-optimize. Pre-optimization is quicksand for developers: you spend a lot of time flailing your arms but not getting anywhere. You know that sprites are good, and so you start building with them right away, spending all kinds of time tweaking and adjusting and calculating the sprites to be just right during development.

(Image: electricnerve)

This is a waste of time. Instead, ignore sprites on new projects until you have reached a comfortable level of maturity with your CSS or are just about to go live. Then, take the time to go through and get yourself all sprited up. It will be easier and quicker.

In terms of workflow, I’m still a fan of SpriteMe, which is a bookmarklet that finds images in use on your page and suggests or creates a sprite for you and even helps you with the CSS. SpriteMe only works on one page at a time, though, which might not be good enough for complex apps. I’m also a big fan of SpriteCow, in which you handcraft your own sprite (in Photoshop or some other image-editing program), and then it helps you identify the parts with a really great UI and gives you the CSS needed to use a particular image inside the sprite. I think the SpriteCow workflow is a bit better because you are working from a sprite that you made yourself by looking through your images directory, so it’s more comprehensive and to your own style.

To take things to the next level with your CSS sprites workflow, you should really check out how Compass handles it. RailsCasts has a screencast that teaches you about it. It’s pretty awesome. You just use individual images as normal (remember, with no pre-optimization) and drop them into an images directory. Compass will see the new image and automatically add it to a master sprite image. It creates a class name for the new image, with all of the correct sizing and positioning. Then, anywhere you want to use this new image as a sprite, either use that class in your HTML or @extend that class in your CSS. Efficient, easy and super-fancy.

Triangles

Question from Jakob Cosoroaba:

All boxes are square to the browser. What’s the best way to fake a triangle box?

To set the stage here, you can “fakeâ€� a triangle in a number of ways. The most common is by exploiting the fact that borders end at an angle when they touch each other at corners. So, by collapsing a box to a width and height of 0 and setting the color for only one border, we can make a triangle. A lot of examples of this are on Shapes of CSS. We could draw a triangle with SVG or canvas. We could even make a triangle, with linear-gradient as the background of an element, as easily as this: background: linear-gradient(45deg, white 90%, blue 90%); (with all of the vendor prefixes, of course).

But none of these techniques will help us here. In his original question, Jakob Cosoroaba lists two techniques that he has tried. One involves rotate transformations and the clip property; the problem being that IE 9 has too large of a rollover area (i.e. it’s not limited to the triangle). The second technique uses slightly less markup, using only rotate transformations; the problem here being that you cannot add content inside. This made clear what he needs:

1. The ability to put content inside;
2. The ability to make the triangle (and only the triangle) a link.

Jakob, you should have taken your already clever work just a step further! By combining your two techniques, you could make the link the correct size (even in IE) and put content inside. Just make the link sit on top with z-index.

Here’s a demo of the combined techniques.

Yep, doing this with markup feels a bit hacky. This is just one of those things that CSS isn’t great at right now.

Server-Side Optimization

Question from Patrick Schreiner:

I was wondering if you could provide some insight into what one should keep in mind for server-side optimization and performance when it comes to CSS? Are there any red flags to look out for? What’s your approach to making sure that code performs well and that it’s optimized for heavy server-side optimization?

I’m not a great server-side guy, but I can list some tips that might be helpful. Perhaps some server folks can help out in the comments.

• Just serve CSS straight up.
  … Not PHP that has to be run and that then serves as a CSS content type, and not LESS that needs to be interpreted client side — just plain old CSS.
• Serve it compressed.
  There is no reason for CSS to be optimized for human readability. Strip out all non-relevant white space and comments.
• Gzip it.
  If you’re running an Apache server (fairly likely), you could put an .htaccess file at the root of your website that tells the server to serve your CSS Gzip’ed. Check out the code starting at line 162 in HTML5 Boilerplate’s .htaccess file for how to do that.
• Cache it.
  The fastest file is one you don’t have to serve at all. So, when you do serve a CSS file, tell the browser to keep it around for a long time (a year is a good rule of thumb). Then, if you change the CSS, you can break the cache by changing the file’s name (for example, global.v23453.css). Check out the code starting at line 267 in HTML5 Boilerplate’s .htaccess file for how to do that.
• Keep it small.
  If your CSS file is 2 MB, you’re doing it wrong. Maybe you need to get a bit more OOCSS in your approach, doing things more modularly with very reusable bits of style.
• One, two or three
  That’s how many CSS files should be loaded on any given page. One if the website is one page. Two for websites of medium complexity, using a global CSS file that all pages need and a second file for subsections of the website that are different enough to warrant one. Three for fairly complex websites that need global, section-specific and page-specific styles.

Onward!

Keep up the great questions, folks! Got a good one? Send it in, and we’ll pick the best for the next edition.

(al)

© Chris Coyier for Smashing Magazine, 2012.

Emergency car shopping is no fun. This past month was the second time I had to shop for a car in a short timeframe without advance warning. Like most informed shoppers, I went online to get a feel for my options, armed with knowledge of what I was looking for: apart from safety, gas mileage and reliability, it had to comfortably seat six and not require me to take out a second mortgage.

I felt like a persona out of a scenario that I had role-played a few years ago when our UX team at Capgemini conducted a global UX benchmarking project for General Motors. That year, a JD Power consumer satisfaction study revealed that 68% of GM’s US websites were below the industry average, with two in the bottom 10%. Heuristic evaluations were one method we used to identify the causes of dissatisfaction while evaluating over 50 of GM’s B2C websites, along with 75 competitor websites, across various countries and brands.

Each website evaluation captured over 600 points of data across 16 automobile website features that affect the online car research and shopping user experience, including vehicle information, comparison and configuration. This time, though, the experience was personal and made me think about the lessons to be learned from the experience of shopping for a car online that could be applied to any website.

“Online Car Shopping UX Journey� (Large version)

Awareness

Without a preferred vehicle or brand, I started my search on independent websites such as Kelley Blue Book (KBB) and Edmunds. KBB greeted me with a featured article that hit the spot, showcasing “10 Best 3-Row Vehicles Under $30,000,� while Edmunds’ “Car Finder� tool offered common filters to narrow my search and compare shortlisted results. Some of the links in the research process deep-linked to pages on car manufacturers’ websites that were no longer available.

Takeaways

Don’t expect users to always start on your home page; deep links from search engines and third-party websites can drop them many levels deep onto your website. Design for these out-of-your-control scenarios with the following:

• Clear navigation, breadcrumbs and search to help them get their bearings,
• Useful 404 pages to guide them to the main areas of the website,
• Standard and intuitive ways to go to the home page.

Consideration

Back to car shopping. With the search narrowed down to a handful of vehicles, it was time to visit the brand websites of the shortlisted vehicles for additional research and planning the next steps.

While broadband speeds have increased, car website home pages have also bloated, many taking over 10 seconds to crawl from zero to done. Websites such as the one for Kia made the wait seem longer with static screens and slow transitions. Downloading times for most websites on personal computers average about 6 seconds worldwide and about 3.5 seconds on average in the US. While car manufacturers are selling a lifestyle decision and are expected to market their brand and their cars, a few broke a golden rule by auto-playing video and animation with sound.

Kia greets the users with several animations right away.

Most car websites showcase their models by body style (sedan, SUV, crossover), but that can be confusing because one brand’s SUV can be another’s crossover. Mazda guides users to the appropriate shopping tools depending on where they are in the process; for example, if you are trying to find the right model, Mazda has a model selector with feature-based filters.

Mazda USA’s model selector has feature-based filters to help users find the right model.

Takeaways

• Make it easy for customers to find your website, using a combination of online and offline marketing techniques. Search engine optimization (SEO) becomes more important when you don’t own the domain name that users would expect to find you at (as is the case with Nissan.com).
• Load the home page quickly.
• Give users control of the user experience, especially if they have not explicitly asked for multimedia. Do not auto-play video, and give users the option to turn audio on and off.
• Provide users with the tools to find the right product, especially when dealing with a large product catalog or products with multiple variations. These tools include search, filters and wizards.
• Search results should offer an appropriate summary of key product information. Apart from the name, thumbnail image and price, briefly summarize a couple of distinguishing features (No, “far-reaching funâ€� for a car does not count).

Preference

All car websites presented detailed model information, including features, specifications, pricing and incentives. However, jargon and marketing terminology were not always clarified (what exactly is included in “anti-theft features�?), which could drive users away from the website in search of an explanation.

Comparing trims within a model and against competitors was not always apparent (why should I spend more on a grand trim instead of a sports trim?). Dodge’s comparison seemed a nonstarter, not intuitive and without clear next steps.

Dodge’s vehicle comparison lacked prominent next steps and call to actions.

Kia was one of the few websites to highlight its competitive advantages

Takeaways

• Support users’ tasks and goals on your website, including product research. Provide appropriately detailed information for the product category. While not required for commodities such as paper and books, 360-degree views and video are appropriate for cars.
• Products that are complex, expensive, configurable or high-touch in nature should be accompanied by additional guidance to help users select the right product, ranging from educational guides (e.g. what to look for in a diamond) to recommendation engines.
• Comparisons between competitors are best offered with a preconfigured set of comparison options (with the ability to change them), supported by content from a neutral and independent third party. A related best practice is to highlight the differences and benefits of the primary product.

Purchase

A few years ago, vehicle configurators were not common or sophisticated, but that has changed. Websites now have wizards guiding users through the steps of customizing a vehicle, followed by concrete steps such as finding nearby inventory, scheduling a test drive and requesting a quote. Some websites did better than others (for example, offering one click to get quotes from multiple dealers), while some websites, like the one for Dodge, were a letdown after building expectations (seven matches within a 10-mile radius turned into no exact match but 112 low matches within a 25-mile radius). Dealer websites themselves were less sophisticated than manufacturer websites and were often difficult to navigate and lacked crucial inventory information such as what trims were in stock.

Dodge did not return the promised results in its inventory search.

Most websites offered collateral with clear labeling for downloading or delivery by mail. Interactive online brochures like Kia’s were the exception, but most downloadable brochures were PDF files.

Takeaways

• Make call-to-action options prominent and clear. For most online shopping websites, this means an “Add to cartâ€� button, but in other cases it could mean bringing the user to another channel such as a store or showroom or getting them to fill out a form for more information.
• Don’t overpromise and underdeliver. As seen with Dodge’s dealer inventory tool above, some websites allow users to add a product to their shopping cart, only to inform them during checkout that it is not available.

Loyalty

Special sections on websites for car owners are now commonplace, unlike a few years ago, but websites could do a better job of giving users a taste of the features in store, as well as the benefits of registering after buying a vehicle.

The benefits of Dodge’s website for owners are hidden below the fold, and the FAQs linked to above the fold are not relevant.

Takeaways

• Sustain an ongoing relationship with your users. For retail websites, this could include features such as order status, tracking information and easy reordering.
• Support buyers with tools and features to manage their purchase while building loyalty. These could include product updates, alerts, reminders, guides and manuals.

Then And Now: Business To Personal

Our heuristic analysis from the study a few years ago drove improvements to the user experience on GM’s websites. This significantly increased customer satisfaction and was reflected in JD Power’s subsequent ranking: GM was number one in customer satisfaction, all of its US websites ranked above the industry average, and three of the top five spots belonged to GM brands.

The overall online car-shopping experience is much better now than it was a few years ago, but there is still room for improvement, as shown here. This time around, the websites helped lower the stress of shopping for a car, and I am enjoying my new car smell as I write this. Now for the final user experience test: seeing how easy it is to get off the phone, email and mailing lists of the dozen or so persistent dealers who think I am still in the market for a vehicle.

(al)

© Lyndon Cerejo for Smashing Magazine, 2012.