down-wilshire-blvd.jpg

From the monthly archives:

June 2007

I Generic zantac, f you're like me, then you obsess over getting things like images, blockquotes, and lists to display "just right" on your Web site. Through intelligent use of CSS, you can exercise absolute control over your layout, presenting the reader with articles so rich with style that Donatella Versace would be jealous.

Unfortunately, an ever-growing percentage of your readers are never going to see your code-wrangling handiwork, because they prefer to read articles through a feed reader like Google Reader or Bloglines. To make matters worse, you have almost no control over the way your posts will display across the various readers. You can't use your in-site CSS styles, and – this is the biggest sin of all – images are often displayed inline with text.

The horror, Generic zantac.

It's true...ugly feeds can happen to good people. Check out what I mean in the figure below.

Inline image in Google ReaderFigure 1. An ugly inline image in Google Reader.

You wouldn't let inline images slip through the cracks like this on your own site, and if you're anything like me, the feed reader issue drives you nuts. Generic zantac, It gets worse, though, because WordPress is not the easiest shrew to tame when it comes to properly formatting posts for display both on your site and in feed readers.

And while WordPress isn't the only CMS platform out there, the inline image problem extends well beyond the WordPress user base. Therefore, those of you on MovableType, TypePad, Drupal, Discount bactroban, etc. still ought to be able to glean something positive from this brief tutorial.

When you're done, you'll have better looking feeds that are easier to read, and you'll have the added benefit of actually being able to sleep at night, which I hear is a bonus. Figure 2, shown below, is an example of a nicely-formatted image within a feed reader—notice how the paragraph text picks up under the picture instead of beside it, Generic zantac.

Proper image display in Google ReaderFigure 2. A properly-formatted image in Google Reader.

Feed Reader Formatting Options

As you might expect, feed readers do not offer much flexibility when it comes to styling images. Essentially, you've either got a nice image like you see in Figure 2 above, or you end up with the hideous beast that I forced you to look at in Figure 1.

You're probably accustomed to using image-handling CSS classes (like left, right, and center) on your own site, but at this time, the associated styles will not carry over into feed readers1.

You might also be familiar with the align="left" and align="right" attributes, and while those will work inside feed readers, they are considered deprecated in new XHTML specs from the W3C2. Generic zantac, Therefore, if I were to teach you this method, it would be the equivalent of me teaching you the ins and outs of a 5600-baud modem—a complete waste of time, and certainly nothing that is going to help you a couple of years down the road.

So, Order ampicillin, the bottom line is that the most standards-compliant, most consistent result you can hope for in feed readers is going to resemble Figure 2 (regardless of the image-handling class used), and that's what you're going to learn here.

WordPress Post Formatting for Display in Feed Readers

Properly formatting your posts so that images display correctly in feed readers is simple, albeit somewhat counter-intuitive. To illustrate, we'll start with a very basic example—we'd like a center-aligned image, followed by a paragraph of text (just like you see in Figure 2).

For starters, you'll need to make sure that you're editing your post inside the normal text editor and not inside the Rich Visual Text Editor. Although WordPress 2.1+ allows you to switch between the two views, I experienced some problems with this, especially when editing a post after it had already been published, Generic zantac. I highly recommend that you disable the Rich Visual Text Editor by going to UsersEdit, and then de-selecting the box next to "Use the visual editor when writing."

Next, all you have to do is ensure that you treat your image reference like a separate paragraph of text, regardless of whether it's centered, aligned to the right, or aligned to the left. Done correctly, our example WordPress post entry box would end up looking like this:

WordPress post entry fieldFigure 3. A centered image should be treated as an individual paragraph.

Without the single line space between the image reference and the first paragraph of text, you'll end up with the nearly-pornographic result you saw in Figure 1. Make sure that extra line space is in there before you hit publish, and your post will hit the feed readers in style. Generic zantac, What about left and right-aligned images. To get them to display properly in a feed reader, imitrex Online Without Prescription, all you have to do is set up your img reference in a separate paragraph in your post editor, but you also need to make sure that it appears directly before the text that you want it to sit next to. The following example shows exactly how you would structure your post entry box for a right-aligned image:

WordPress post entry fieldFigure 4. For consistent results, treat left or right aligned images as separate paragraphs.

If you've done everything correctly, your post will end up looking like this in a feed reader:

Proper image display in Google ReaderFigure 5. A left or right-aligned image doesn't float beside the text in Google Reader, but at least it doesn't break the flow of the text.

Although the solutions proposed above are really quite simple in retrospect, they are the only ones I tested where on-site formatting was not compromised. The resulting code is, in my opinion, a little bloated because it contains unnecessary <p> tags, but it still satisfies the following critical requirements:


  • No text is broken or displaced in feed readers due to images.

  • Visitors to your site will not be able to tell that you've done some behind-the-scenes work to ensure that your post displays optimally within a feed reader.

  • You don't have to modify any core WordPress files in order to make this happen—you just have to know how to get the text editor to play nice.

Now go forth, and hook up your RSS subscribers with posts that are a little easier on the eyes.

1 Bloglines is the smartest feed reader that I tested, as it will actually float images left or right depending upon the CSS class used in the img declaration. However, this is the exception, not the rule, so I won't be addressing this facet of Bloglines directly in this tutorial. Regardless, the techniques described here will work like a charm in Bloglines, Actos Dosage, so proceed with confidence.


2 Check out the W3C's XHTML 1.1 img tag specs.


3 And yes, I know my image captions are "broken" in feed readers, but they look so cool on my site. What can I say, I guess a caption tutorial is next on my list.


.

Similar posts: Cheap celexa Overnight Delivery. Lexapro Online. Buying zoloft. Advair Overnight. Discount aldactone Online.
Trackbacks from: Generic zantac. Generic zantac. Buy atarax. Lamisil Pill. Inderal Without A Prescription. Cheap zyrtec.

177 comments14 retweets

Copyblogger Theme

M Desyrel Dosage, any of you probably already know this, but on March 5, I sold the Cutline Theme. It was a great ride, and I was truly sorry to see it go. In fact, when I transferred the domain over, I poured one out for my lost theme homey.

And then I got over it.

Thanks to my seemingly unending development work on Celebrity Hack so far this year, I've hardly had time to care that I no longer run an active, successful WordPress theme community. At the same time, though, I've learned quite a bit about new CSS techniques, better XHTML structure, and better in-site SEO, and it's hard not to look at such things from the perspective of a theme developer, desyrel Dosage.

Clearly, something had to give here, and thanks to the fact that the Copyblogger promised his old design out to his legions of fans, I had no choice but to develop a newer, better, more excruciatingly-detailed WordPress theme. Nothing like a friend promising out your work now, is there. Cheap elavil Online, :)

So here it is, the Copyblogger Theme for WordPress—a completely new framework that you can customize.

Maximum Accessibility

I view accessibility as a facet of Web development that good designers address on many different fronts. Desyrel Dosage, It's not just about structuring your markup to accommodate the hearing or visually impaired—that ought to be a given at this point. The "new" accessibility takes care of everyone and everything that will visit your site, including search engines.

Accessibility was my primary concern when developing the Copyblogger Theme, and each of the following elements plays into this in a unique way:


  • The typography and spacing are all set in ems, resulting in a completely elastic layout. If you're using FireFox or Safari, you can resize the text at the demo site to get a live demo of this sweet feature.

  • The text area is 468px wide (though it is actually defined in ems) and fits about 70 characters per line, which is only slightly above the 66-character ideal for maximum readability1.

  • The typography is aligned to a strict 20px vertical grid, which – assuming it remains intact – provides a more harmonic rhythm as you progress down a page while reading an article. A grid of this nature is extremely effective (and necessary) on 3 column layouts (think newspaper), and while the Copyblogger Theme is only a 2-column layout, I still think the grid has merit.

  • The XHTML markup and CSS are extremely lean, resulting in lightning-fast page loads.

  • I have "modularized" the theme's PHP files in such a way as to isolate the ones users are most likely to edit. For instance, the navigation links in the header are all contained in nav_menu.php, so this ought to simplify the process of changing that part of your site, desyrel Dosage. Also, it's ok if you make a mistake—you can always just restore the original and start over!

  • The theme comes equipped with an improved version of the custom stylesheet solution I proposed earlier this year, and the included custom.css file contains both directions and explicit CSS definitions for the elements (and their associated properties) of the theme that you may wish to modify, xenical Without A Prescription. By separating the color, font, and border color properties from the rest of the theme's core CSS definitions, I've been able to provide you with a unique design environment where you can test color and typography schemes without fear of ever "breaking" the layout.

As far as I'm concerned, ubiquitous themes of this nature have to be accessible to to more than just the people who visit your site. From my experience with Cutline, it's clear that theme users just like you want as much flexibility as possible—be it in the way of color schemes, editing menus, the use of widgets, fonts, etc. With that in mind, theme developers really have to aspire to a level of accessibility that caters to two distinctly different audiences, and meanwhile, everything needs to remain standards-compliant, lean, and intuitive. Desyrel Dosage, I've tried to construct the Copyblogger Theme as a model for this level of accessibility, and while I realize there is still much room for improvement, I guarantee that you'll benefit in some way from the accessible features that the theme offers. Atarax Overnight,

Optimization and Standards

When it comes to in-site SEO (code structure, essentially), the Copyblogger Theme offers what is, to my knowledge, the best possible structure while still adhering to some WordPress "conventions" that I'm not quite 100% happy with.

Regarding SEO, there really is no holding back—I'm not going to put out a product that is slightly less than optimal out of fear of "giving away the house." As a result, you end up with a markup structure that is every bit as good and effective as one that I would build for myself for private use.

As far as standardization goes, the evolution of the Web is slowly but surely merging the worlds of SEO and standardized markup, and as someone who is as passionate about ranking as I am about cross-brower rendering, I have no choice but to be a standards fanatic.

The bottom line here is that there are countless benefits to having standardized markup on your Web site, and if you use the Copyblogger Theme, you're in extremely good hands.

Downloads

The initial release of the theme contains two packages available for download:


  1. The Copyblogger Theme

  2. Organic custom style package (optional)

The first item needs no explanation, but the Organic custom style package is something that many of you will find both interesting and extremely useful, desyrel Dosage.

Download the Organic custom style packageAlthough it is simple in nature, the theme's custom stylesheet solution is something that is best illustrated by example, and essentially, the Organic custom style package is a fully-functioning example that makes the most of the custom.css file that comes with the theme, Discount actonel. In fact, it even comes with a .psd (Photoshop) file that the hardcore among you can use to do complete color overhauls.

You can view the Organic style package in action over at the demo site by clicking on appropriate link underneath the "Style Switcher" heading in the sidebar.

1 I chose 468px because that will allow users to accommodate a standard ad size (468x60), and I think your everyday user ought to have that option without having to tweak the theme. .

Similar posts: Zoloft Online. Discount keflex Online. Cymbalta Online Without Prescription. Zelnorm Without Prescription. Zovirax C.O.D.
Trackbacks from: Desyrel Dosage. Desyrel Dosage. Desyrel Dosage. Advair Overnight. Order keflex C.O.D. Discount stromectol Without Prescription.

187 comments7194 retweets

In Xenical Overnight, early May 2007, I redesigned Copyblogger, which was previously the home of my most popular design to date. The old layout was simple, featuring copious amounts of whitespace coupled with understated details. Problem was, Brian started receiving advertising requests, and the old template simply wasn't able to accommodate the necessary ad positions in addition to keeping the blog's subscription options at the forefront, Buy atenolol.

new Copyblogger design

Oh, and based on all the things I'd learned since the last Copyblogger update, I knew there was an opportunity to improve Brian's in-site SEO, too. Aldactone Prescription, Enter the new design, which I think features a highly-effective organization of key pieces of information. For instance:


  • Primary navigation resides in the upper left, which is some of the most premium real estate on the page.

  • Subscriptions fuel the site, and the subscription options are placed above the fold on the left along with custom icon embellishments that serve to draw the user's attention to that area.

  • Advertisers receive prominent placement on the right—this wasn't going to be possible on the old design without sacrificing the subscription options.

Although I don't think Brian really wanted to change his design, he certainly saw plenty of reasons why he ought to go ahead and do it, Buy prozac. With 18,000+ subscribers, he had reached a point where the site had outgrown its current confines, and by making the switch to a newer, Discount aldactone Online, smarter layout, he has already expanded the site and positioned it for future growth.

Similar posts: Buy lexapro Online. Buy avapro C.O.D. Buying atenolol. No Prescription nasonex. Zantac Dosage.
Trackbacks from: Xenical Overnight. Xenical Overnight. Xenical Overnight. Cheapest zocor. Cheap penisole. Cardura On Line.

31 comments7210 retweets