July 26th, 2010
In a post I wrote back in November 2008, I taught you how jQuery can be used to make links open in a new window in a standards compliant way, using the “rel” attribute in your link tag. In my efforts to build and run a photography news website recently, it quickly became clear that I didn’t want to mark all my external links with “rel=external” , because every single post has an external link. Being thusly motivated, I started looking for wordpress plugins that would scan the link, determine if it was external, and do something to it in a standards compliant way that would make it open in a new window. Coming up with diddly-squat on the search, I realized I was being dense. Again. I could let jQuery do that for me, and not have to install a plugin to do it. Here’s the relevant code:
<script type="text/javascript">
$(function() {
$("a:not([href^='http://www.phototimes.net'])").attr("target", "_blank").addClass("external-link");
});
</script>
This little snippet does several things all at once. The first thing it does is find all links whose href attribute does not begin with http://www.phototimes.net. This selects links that are off-domain, which we want to open in a new window. The next part sets the target attribute of the link to _blank, so that it will open in a new window, and the third part adds the external-link class to the tag. The external-link class allows us to style the link differently that other links on the site, like adding one of those nifty little arrows that visually indicate that the link is offsite, and was popularized by Wikipedia. jQuery, I think I love you.
Posted in Web Design, Web Standards, jQuery | No Comments »
October 14th, 2009
A lot of web developers tend to overlook or ignore the file sizes of the files that compose their websites. I’ve seen many websites that are well over a megabyte for just the home page with all its components. I’ve even seen a few that were over 3 megabytes. While most americans have broadband of some fashion, there are still a significant portion (~20%) that do not have broadband, and even those that do will get impatient waiting for a page to load, and may click off before you have a chance to wow them with your content.
I tend to use several techniques to keep my overall document size reasonable:
- Compressed Images – JPEG (for complex images) between 40 and 65 percent quality, depending on where compression artifacts become too noticeable; GIF (for simple images) color palette restrictions between 8 and 128 colors, depending on where the artifacts become too noticeable. Of course I also use PNG images where a really good alpha channel is needed, but I use them sparingly, as full alpha transparencies dont compress well.
- Minified Javascript and CSS files. I like the YUI Compressor for this.
- Server-side compression. Even minified files can be squeezed even smaller with the use of server-side compression.
Server-side compression is super-simple to implement, as long as you have access to an .htaccess file or a friendly server administrator. Here’s a syntax that works for me on a couple of servers I run (This is Apache specific, for other servers find a mod_deflate equivalent):
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE text/x-js application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
The two AddOutputFilterByType lines can be combined into one or split up however you choose if you’re a stickler for keeping your text in configuration files readable. This can be inserted in the virtualhost definition or in your .htaccess file. Using this alone, I consistently shave off between 60 and 100 kilobytes off my download size. Enjoy!
Posted in Cogitatio, Web Design, Web Standards | No Comments »
October 8th, 2009
One of the things I often use when building a website is a grid template. This is basically just a set of guides and an overlay I use in photoshop when mocking things up. I’ve come to learn that sites that are built against a grid have a structure that is felt more than seen. They make a visitor feel like things are just well put together, and comfortable to use. This certainly doesn’t mean you can’t get really creative, and it doesn’t impose any sort of limitations on what you can do, in fact I think that they make life a bit easier.
My favorite template currently is a 12 column, 900 pixel wide layout. You of course don’t have to use 12 tiny columns, but it gives you the flexibility to split those columns into various configurations, like three 300px columns; one 600px column and one 300px column; one 375px column, one 225px column, and two 150px columns; a page broken into three vertical sections, each having a different column configuration… whatever! This one has 6px gutters and guides for the edges and middle of the gutter, depending on how you want to line things up.
Se here you go, my 900px 12-column Photoshop Grid Template. Enjoy!
Posted in Web Design | No Comments »