• Home
  • CSS / Markup / Code

Category Archives: CSS / Markup / Code

How to configure W3 Total Cache to work with HTTPS and SSL

We’ve worked with a few sites recently that use HTTPS to secure certain parts of there site. Some of the pages are SSL protected due to the data captured (pages processing registration or financial information, for example).

When using a CDN in conjunction with HTTPS / SSL, customers often find that the CDN product they use lacks an HTTPS endpoint, or the one provided is different from the standard, non-HTTPS one.

One simple solution to this would be to force the loading of your CDN assets via HTTP like so:

How to configure W3 Total Cache to work with HTTPS and SSL

This leads to one other issue, however…

Why dont I see the Blue/Green Bar?

https When a page and all of its assets are served over HTTPS, modern web browsers provide a visual indicator—usually in green or blue. This is designed to provide visitors with the confidence to shop or register on your site.

When your HTTPS pages are served with “mixed content” (as it sounds, this is a situation in which HTTPS and HTTP assets are both being loaded on a single page, this indicator does not appear. This could happen for any number of reasons — all beyond the scope of this article — but there’s a simple solution for addressing this with only a few short lines of code.

Disabling CDN on HTTPS pages only

W3 Total Cache ships with documentation (Performance > FAQ) that provides instructions on disabling each of the caching types. Combined with a simple PHP function and WordPress hook, we’re able to conditionally disable the CDN for pages that utilize HTTPS.

Add the following code snippet to your theme’s functions.php file:

add_action('wp_head','nocdn_on_ssl_page');function nocdn_on_ssl_page() {if ($_SERVER['HTTPS'] == "on") {define('DONOTCDN', true);}}

This of course assumes that you have W3 Total Cache active and that the only assets being served over HTTP are originating from your CDN (otherwise, you might need something like this). When you reload a page being served over HTTPS, you should notice that the familiar green / blue indicator appears in your address bar.

Note: we’ve found that MaxCDN‘s SSL support and easy integration with W3 Total Cache provides a solid solution for many customers.

K.I.S.S. Your Way to an Optimized Site

A “valid” site is not always the best site for users that visit it. Even amongst the savviest of coders and developers there has always been a common misconception about the value of web standards themselves. The idea of “keeping it super simple” (or other popular variations), when it came to the world of markup once revolved around spacer images and table-based presentation oriented markup. It seems that either as a beginner or a seasoned web professional the role of standards themselves became overrated, since even the less markup of yesteryear still validated. The balance of the confusion over the value of standards begins with the fact that web standards are not consistently supported amongst popular user agents, why should we bother working with them — why all the fuss? Regardless, the true value of web standards is as a stepping stone and the leverage it contributes to a well-conceived web site inside and out.

Think Outside the Design
The value of web standards really amounts to recommended use of markup to semantically describe content. Once mastered, the web developer is able to make intelligent and conscious decisions on the “right” compromises to be made for a given project. We are constantly working towards standardization and have had dialogs about the best practices for markup in various situations, it’s the World Wide Web Consortium’s role to define the purpose of markup; the platform for web site optimization. Web site optimization has little to do with search engine optimization or any of the W3C’s validation tools. Instead web site optimization deals with steps taken to improve user experience by:

  • reducing page weight
  • re-factoring of markup, CSS and/or Client Side Scripting
  • making content accessible
  • making content semantic
  • reusing imagery
  • optimizing the weight of imagery
  • caching and deferred loading
  • reducing latency to reduce download or render time

In short, the goal is to use the minimum code to achieve the desired result. Unfortunately, clients may not always afford us the proper time or resources required to give the most polished result possible.

Think it Through
Web standards in and of itself does not necessarily contribute to reduced file sizes, however what it does do is endorse healthy use of semantic markup that does give way to reduced page weight through table-less markup and a focus on cascading styles sheets for presentational material. By using document object model scripting, procedural code no longer needs to live inline in the html document itself. Take advantage of your page’s semantic structure to use the DOM to the fullest.

Code becomes art when we take our code to the next level by re-factoring it to maximize it accessibility, by reducing our dependency on the markup for presentation and procedural user interface components. What remains to be done when all of the content in a document is rendered as the design calls for, content properly described with your tags, images optimized for reuse and weight? Now, we consider scale, what happens when this site we’ve worked so hard to optimize becomes highly trafficked (think: Digg Effect) — or if the site already is, let’s make sure to optimize the server’s role in the user experience.

Caching is one of the chief techniques to be leveraged to improve user experience both on the client-side and the server-side. Making objects like cascading style sheets and JavaScript files external can also benefit from the technique of combining files to reduce latency. It’s much less “work” to download a larger file once than it is to download (or check for freshness of) several files. Unfortunately, many of the most visited sites could benefit greatly from even a dash of web site optimization. Issues like multiple CSS file or JavaScript files demonstrate little regard for the benefit they could provide their visitors as well as their own bottom line.

Move on to compression; consider pre-compressing your CSS and combined JavaScript files to reduce server load for high traffic sites. Go a step further and create a proxy that makes sure to return the “not modified” codes to user-agents checking for freshness of objects in your site after first download.

Without getting into code for each portion, let’s consider the typical components of a “well-designed” HTML document:

  1. masthead
  2. navigation
  3. breadcrumbs
  4. body
  5. sidebar
  6. footer

Within each there are a myriad of possible methods to semantically describe the content of the components. Let’s have a look at a few basic cases:

  • Unordered Lists for navigation, breadcrumbs and copy in list items.
  • Non-tabular layout for forms and use of labels and access keys for accessibility
  • Use of <p>, <em>, <strong>, <dl>, <h*>, <table> tags for content

Diving into a single common challenge can show how understanding of web standards cascades into an optimized user experience, let’s look at a technique that combines several techniques by several authors, each of which contributing to many fundamental factors of web site optimization; specifically: image reuse, semantics, presentational separation, caching, latency reduction, image optimization, and accessibility/platform independence. Anyway, on to the challenge — image based main navigation with hover effects. Without being distracted with pseudo-code let’s have a look at how using what we know about web standards leads naturally to web site optimization and a very desirable result for the user:

  1. Start with an unordered list, in the case of drop down menus, let’s make that a nested unordered list
  2. The unordered list is styled as required using CSS such that any copy is moved out of view by hiding overflow and indenting the copy out of view of user agents that support CSS, but still leaving it accessible to screen readers etc
  3. Now imagery is added for each of the tabs for the various states (hover, visited, active etc) as necessary

Normally this is where things would end. At this point we have the desired result, but it’s not an optimal experience for the user. Again to the credit of numerous designers and developers turned authors out there additional techniques can be applied to optimize the menu quite a bit:

  1. Combine all of the images for each button in the navigation into a single file
  2. Combine all of the image states the navigation into a single file and use CSS to shift the desired portion of the image into view when required
  3. Put any JavaScript required for desired effects; e.g. transparency, sliding effects support for browsers that don’t support standards as we would like etc an external file

In the previous three steps, we’ve:

  1. Reduced the latency required to load the main navigation imagery and the overall render time for a given page
  2. “Pre-Loaded” and cached the other anchor states for the navigation without using any client side scripting
  3. Cached the JavaScript for the navigation by making it external (the same is obviously true for the CSS), improving the render time for subsequent page views

Now apply a few more techniques to the site as a whole:

  1. Take advantage of the compression support of popular browsers and compress JavaScript and CSS so that it can be sent instead of the larger uncompressed versions
  2. Combine our CSS files and JavaScript files respectively, similar to the combining technique for the navigation imagery to reduce latency Cache these compressed versions of the combined files on the server so that
  3. Cache these compressed versions of the combined files on the server so that every page view requested doesn’t require the web server to have to prepare the same files over-and-over on-the-fly. Instead the server can send static files immediately (which it can do with tremendous ease).

With the various techniques we all apply to our projects just adding a few more steps of optimization greatly improves the user experience.

Make it Your Own
Standards simply help us agree on what markup is intended to do and how it’s elements work together for describing content, web site optimization picks up where web standards leaves off. The W3C encourages us to use markup to describe the content and separate the presentation and functionality from markup as much as possible. Once we get used to the idea our time is best spent optimizing our code to work in the real world. I’ve intentionally left out the “how” because that’s an ongoing debate whose conclusions are at best situational. There are quite a few frameworks out there that help developers apply many of these principles to their projects right out-of-the-box, but it’s not too difficult to build your own framework for your own style of work.

So what’s the final word? Well, similar to the stance that Ethan Marcotte put forward I suggest that web standards be the baseline that we use to optimize sites to perform for the targeted user agents. One day it may be easier to leverage standards to achieve a predictable user-experience across all user-agents, but for now it’s best to have more skills and mastery than are required to render a job well done.

Keys to Consistent CSS

Eric Meyer has done it again (yes I’m a cult follower). It was awesome to sit through the live walk through of most of the principles that Eric presented in his final version.

What Eric has decided to do with the support of many interested participants is create a baseline for many of the HTML elements that behave inconsistently from browser to browser. The result being a fantastic snippet of code that removes the subtleties that often cause anomalies in the render of pages in Internet Explorer 6/7 (and in other browsers too).

For those that just want to see the code:

You can see that nearly every element is considered above and is “reset” to values to provide sure bedrock for styling a document.

I suppose I should go to mention another great tip from Eric, while on the topic of consistency and this one points to to consistency between the CSS “functionality” of internet explorer 6 and internet explorer 7. Dean Edwards put together great javascript code which enables coders to focus on CSS production for IE 7 and not have to worry support for behavior that doesn’t exist in IE 6 — definitely worth a look.

Interweb Evolution

Many of you out there have seen this already, but I had to point to something at good old you tube that’s simply well done and insightful. With all of the confusing content out there and controversial definitions, it’s great to be able to sit back and watch the story of the interweb evolution unfold in such a meaningful presentation (it reminds me quite fondly of the evolutions web designers themselves made as we embraced web standards and CSS based web design). Check it out below or at YouTube.

W3C Open Standards

The World Wide Web Consortium (W3C) has developed a set of open standards to increase the stability and durability of the Web and your site. Is your site open standards compliant? Here’s your chance to find out with our look at the latest from W3C.

Page Weight, Download Times and Your Conversion Rate

In many ways, cyberspace is as wild and untamed as the Old West with snake oil salesmen, gunslingers and assorted desperados aiming to part you from your money. That’s why some organizations are trying to bring law and order in the form of open standards for everything from site design to SE algorithms. Check out how using open standards in the design and development of your site can save time, money and hassles today and down the road.

XHTML, XML, W3C and the Importance of Open Standards

We live in an impatient society where even a few seconds matter – a lot. For example, 84% of visitors to your site will sit through a 10-second download. That number drops to 5% with a 30-second download. The key to converting visitors to paying customers is to help them get through the front door. Here’s how to do just that.