After adding a text-based Facebook link to the site, it’s seemed a sensible idea to add a similar text-only link for StumbleUpon.

For WordPress, add the following code in your templates:

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"> Stumble</a>

For other CMS platforms replace the URL and title with the proper code variables. If you’re still rocking straight HTML, change these to the real URL and titles:

<a href="http://www.stumbleupon.com/submit?url=http://example.com/your-awesome-article&title=Your Awesome Article Title">Stumble</a>

Spigot Design

Here’s a quick tip on how to crop any sized image through CSS and an extra div. This technique comes in very handy when building websites for clients who don’t have Photoshop, or understand what 360px x 240px means. In an ideal world every image is edited and cropped before it’s uploaded to the site, so that it fits perfectly where it’s supposed to. Unfortunately that’s not how it works and many sites end up with squished, stretched, or highly pixellated images.

The key to this technique is to wrap the image you want to display in a container div, which we’ll give a specific height and width. We’ll then give the image a width of 100% just in case the user uses an image that’s too small. Here’s the code:

The html:

<div class=”container”>
<img src=”http://your-source.com” alt=”alt” />
</div>

And the CSS:

.container { width: 418px; height: 240px; overflow: hidden; }
.container img { width: 100%; }

The real key there is the overflow: hidden; part. It prevents any image that is larger than the crop area from being displayed. Adding width: 100%; is only helpful when the user uploads an image smaller than the are you want cropped. The image will be enlarged to fit the area – which may result in some pixellation – so if crisp images outweigh the need for them to fit correctly, just skip that part.

Happy cropping! And leave a comment.

Spigot Design

If you love sharing your posts on Facebook (and by gosh who doesn’t?) but don’t like the look of the standard share buttons, here’s a little script that will allow you to share with a simple Facebook text link.

See it in action right over there → and click it while you’re at it!

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436'); return false;}</script><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank">Share on Facebook</a>

You may also be interested in a text-only link for StumbleUpon: Text Only StumbleUpon Stumble Link

Spigot Design

In the name of speeding up your site you may hear that minifying your CSS is both awesome and easy. I’ll agree that it’s very easy, and in the name of speed I can concede a bit to the awesomeness. But if you’re using @media or @font-face in your stylesheets, be wary of automatic minifying techniques.

I found out the hard way (Thanks Steven) that some of these techniques can strip web browsers ability to read @media or @font-face CSS code correctly, resulting in incorrect fonts being displayed, and the responsiveness of media queries rendered useless.

It turns out that I’d nonchalantly enabled the option to auto-minify stylesheets at the service I use to distribute this site, CloudFlare. Thankfully the option can be turned off and after a quick cache purge, all was well again in the Chrome world.

The lesson I’ve taken from this is that while it’s a great idea to minify stylesheets (and JavaScript for that matter), care has to be taken when doing so. Know what you are minifying. And be sure to test across all browsers to ensure that your sites are rendering as intended.

As a side-note, it was great to use old school Mini Cooper artwork for this post. I’ve loved them since I was a kid and still dream about getting one for my mid-life crisis one day.

Spigot Design

It wasn’t that long ago since our last major site rebuild, and yet here we are at it again. This time it’s both a redesign and an overhaul of the underlying structure.

Now with HTML5

While I’m no fan of Flash, the intent behind rebuilding the site using HTML5 isn’t meant to stand in opposition. We try to stay as close to the leading edge of of the web dev world as we can, and HTML5 is clearly the future. The beauty is that it’s the same HTML we’ve known and loved, but now includes even more elements. It’s a simplification of the standard while at the same time offering up an entirely new playground when combined with CSS3 and JavaScript.

We didn’t dive too deeply into all the more fantastical portions of the language, such as the canvas element, offline storage, or some of the other new API’s – but we are using the new markup. If you view the source of this page you’ll see <header> rather than <div id="header">. Subtle, yes – but the future none the less.

Responsiveness via CSS3 @Media

We’re also experimenting with optimizing the site for screens beyond the desktop. iPhone, iPad, Android – these are the screens of the future, and sites need to be viewed well on them. For the most part, they all render sites very well – sometimes just smaller. Take a look at the front page of this site and try resizing the browser window. Or check the site out on a phone or tablet. The layout should be as equally viewable as on the desktop. I don’t have an iPad yet, so hopefully I’m not blowing smoke there.

What about Internet Explorer?

In researching the proper way to implement HTML5, I came across quite a few that I really liked, but when viewed in Internet Explorer, a few popped up messages like this:

Wonder what a 'Complaint Brower' is…

Spelling errors aside, this kind of thing is unacceptable. We cannot simply blow off the 45% that use IE. Thankfully I came across http://ryanscherf.net/ – well designed and coded in HTML5. It also looked awesome in IE, and had no browser warnings. Once I knew it was possible to do, there was no looking back.

HTML5 ★ Boilerplate

The only way I’m able to do these things is by standing on the shoulders of giants. People like Paul Irish and the rest who’ve taken the time to show us the way with tools like HTML5 ★ Boilerplate and Modernizr. These tools help to ensure that using HTML5 today doesn’t mean leaving older browsers in the dust – we can progressively enhance, while remaining backwards compatible.

The rest of the tech

The site is still powered by WordPress, and I’m as excited as ever over Justin Tadlock‘s Hybrid Core Framework.

No related posts.

Spigot Design

Theme Hybrid

A big part of why it’s gone so well is due to the efforts of WordPress developer Justin Tadlock and his Hybrid Theme Framework. As a front end developer, Justin’s work and the community that he’s attracted has been a shot in the arm to my understanding of WordPress, and PHP. He (and the community) is patient with the simplest of questions and is clear and concise when explaining issues. The Theme Hybrid forums are more about teaching a person to fish than just handing one over and doing it for you.

The Framework Concept

What originally attracted me to Theme Hybrid was that it was one of the more popular ‘theme frameworks’ that have been gaining traction in the WordPress community. The premise of a theme framework is to provide a core set of functionality so that each new site isn’t being completely built from scratch. It provides a powerful set of core features that speeds up development time and helps to keep client costs down. New sites are still custom from top to bottom, but a lot of the dirty work is already taken care of.

Theme Hybrid is also built on the parent/child theme concept, which allows for ongoing improvement of core theme features without affecting the design and functionality of the site. A child theme allows you to use all the power and functionality of the parent theme, without losing any customizations when the parent theme is upgraded. This is perhaps more useful to those who are modifying a theme they’ve purchased, but there are also many benefits to those who have a custom theme built by professional designers like us, especially when using a framework as powerful as Hybrid.

When a framework isn’t a framework

Recently there has been some debate in the community over the confusion between what a framework is vs. the parent/child theme concept. The Hybrid Theme has been called a framework, and treated as such, since it’s release. And this has apparently been causing confusion because it’s not a true framework in a traditional development framework sense at least. So what is it? Well, Justin himself perhaps says it best:

What should we call the Hybrid theme? Simple. It’s a parent theme. Justin Tadlock

This distinction is perhaps of little importance to most (ok… any) of our clients. But it does matter for developers who are looking to get the most out of WordPress and build the very best websites for our clients that we can. Theme Hybrid is a few years old now, and while it’s still better than 99% of the themes out there, even Justin has stated that it’s got legacy code deeply embedded and it’s perhaps better to start again from his latest project, Hybrid Core.

From parent to child and back to parent

Hybrid Core is about creating a true framework, in the traditional sense, by putting the core functionality within the parent theme. The framework itself can continue to be developed and updated without affecting the theme and its customizations. The real advantage to developers and design firms like Spigot is the ability to create our own parent/child themes for our clients that are powerful, updatable, and using the most cutting edge technology available.

But what about rebuilding Spigot?

All this is to say Yes, I’ve rebuilt spigotdesign.com using the new framework. Starting from Justin’s theme Prototype which I’ve pulled apart and dissected and reformed into our very own. The beauty of Prototype is that Justin has created it to take advantage of most of what Hybrid Core has to offer, so it’s a perfect starting point from which to build and learn. I would have preferred a more stripped down version over a full-fledged theme, but there were benefits to having to dismantle Prototype that will pay dividends. I feel like I’ve had to start the learning curve over again, which is just going to make my understanding that much greater.

Oh, and also Custom Post Types

Rebuilding also allow me to take advantage of the new(ish) custom post types feature in WordPress. This feature has made WordPress a true CMS if ever it wasn’t by adding the ability to create custom content types. Now Spigot has a dedicated section for our Portfolio that stays separate from our blog posts. Again, for most of our clients this distinction isn’t going to matter. But in the end, it’s better.

What’s this all mean to you?

If you’re a client or a potential client of ours, what does this mean to you? Nothing really, except the knowledge that Spigot, in addition to being OK at the design end, is also continually learning and getting better at the building of your website. Call or Get a Quote today.

Spigot Design

Webkit is the experimental version of Safari and you can download their nightly build and essentially stay on the bleeding edge of what web browsers can do. You too can be on the bleeding edge, as long as you don’t mind daily browser updates.

With the recent update of this site, I noticed a minor bug with the way Webkit renders the a:visited {background: transparent;} style. In every other browser the background is rendered as expected: transparent. In Webkit, however, the backgrounds were rendering in pure black.

To fix the problem, I simply changed background: transparent; to background: white; and all was well.

Spigot Design

Well it didn’t go quite that smooth this time, and I received an error that WP couldn’t copy the wp-comments-post.php file. I could have just upgraded the old fashioned way, but decided to investigate further. Here’s what I did to fix it:

1. Logged into my server via ftp
2. Located the upgrade files in wp-content/upgrade
3. Tried to delete the ‘core’ directory and all its contents (these, I believe are the upgrade files)
4. I was denied permission to delete these files (on my own server no less), so I used Terminal (on a mac) to ssh into the server and delete the ‘core’ directory.
5. Re-ran the upgrade from within WP, and everything went smoothly.

Now it’s time to go and poke around the new version!

Spigot Design