Today, I wanted to take just a minute to thank a few folks who, whether they realize it or not, helped me get to where I am today.

• Chris Coyier of CSS Tricks. His Designing for WordPress series kick-started my foray into WordPress and PHP development.
• Elliot Jay Stocks, whose original Starkers theme was the foundation of many of my early custom designs.
• Trent Walton, whose article on Flexible Foundations finally convinced me to go 100% fluid and relative sizing.
• Dave Rupert, who built Foldy, the grid that I forked into Kraken and use on every single one of my projects.
• Mark Otto, whose Bootstrap framework helped me wrap my head around OOCSS.
• Brad Frost, who introduced me to mobile-first, progressive-enhancement, and got me writing my own simple jQuery scripts.
• Rian van der Merwe, who constantly makes me rethink user experience and how we interact with technology.
• Todd Motto, for making JavaScript accessible instead of scary.
• Keith Rousseau, who tells me when my stuff sucks and how to do it better.
• The entire Stack Overflow community, for helping me work through countless quirks, bugs and issues along the way.

I know I missed some awesome folks. If you’re one of them, I’m really sorry, and I promise it’s bad memory and not a deliberate omission.

It’s been exciting to see Kraken used as the starting point for other people’s projects. It’s been forked into a Ruby gem, with a Sass fork in the works as well.

But managing an open source project has also helped me write better code.

Writing code for other people

Writing code that other people are going to use forces you to be more thoughtful.

I spend more time considering how a CSS class could be used (or reused) throughout the markup. I don’t use IDs for anything any more. I abstract as much as I can. I’ve gotten much better at writing modular, reusable OOCSS.

I document my code obsessively. I’m never left wondering, “Why is this class in my CSS again?” It’s right there, as a comment in the stylesheet. This has spilled over into my personal projects, too. It’s a great habit to develop.

(If you’re worried about the bloat this adds to the code, it gets stripped out in the minified production version.)

Thanks to open source, I launch projects faster. I used to waste time copying and pasting code from old projects into new ones, and then removing what I didn’t need. Now I just fork the latest Kraken repo and get on with it. I’ve built up a wonderful library of flexible, reusable code.

Open source has made me a better communicator. When you’ve been doing something for a while, you can forget that what’s obvious to you isn’t always obvious to others.

Kraken uses uses 100% relative sizing. There’s not a single px to be found in the stylesheet. It’s all ems and percentages. I thought, “How great! You just change the size of the body element and the whole site adjusts itself.”

And then someone asked me how you figure out em values from pixels. (I wrote a tutorial on that, if you’re interested.)

Get Involved in Open Source

Getting involved is easy. Add some documentation to a bit of code you use often and add it to GitHub. It doesn’t have to be anything big.

FluidVidsJS is just 38 lines of code. Foldy (which got forked into the grid for Kraken) is only a 6-column grid. You can even remix someone else’s work. My first GitHub repo was a modified version of Foldy.

Open source will make you a better developer.

Ethan literally wrote the book on RWD, and Brad Frost does more than anyone else I know to push the web design and development profession forward. They’re both kind of a big deal, and as a result the article gained a lot of traction.

A weird thing happened, though. Based on the tweets I read, for a lot of folks the takeaway of that article was, “Less is more when it comes to mobile.” And that’s not the point I was trying to make at all.

Sometimes less is more

Oakley’s monstrous 85mb site? Less is more. The average 1.2mb+ site? Less is still more.

Five steps to go through a checkout process when just two will do? An array of social sharing buttons? Endless menus and submenus in the navigation?

Less is more.

But sometimes, more is more

That mobile site that only shows you an address and phone number (because that’s all a mobile user will ever need, right)? More is more.

The restaurant that won’t show you the full menu (or any menu)? The retail site that removes reviews, photos, and detailed product information? And my favorite, the sites that won’t show you any content because they “only work on desktop browsers”?

In those cases, more is definitely more.

But content parity on the web is not about less content or more content. It’s about just the right amount of content. Nothing more. Nothing less.

Just right content

What does “just right content” look like?

It puts user needs ahead of flash and sizzle. It provides an obvious next step towards the few different goals a user may have – without being so presumptuous as to assume what those goals may be based solely on device type.

Just right content is accessible on any device, but it’s selective about what content is available in the first place. It doesn’t remove detail (like reviews and product details), but it may require an extra click to get there.

In the age of responsive web design, information architecture and content strategy become increasingly important. What information do visitors want, and how do they find it?

As Albert Einstein said, “Make everything as simple as possible, but not simpler.”

Referenced in this article

1. Content Parity on the Web
2. Ethan Marcotte, and his book, Responsive Web Design
3. Brad Frost
4. Oakley’s monstrous 85mb website

There are performance concerns with doing so, though. Paul Irish explains…

If you’ve ever attached an event handler to the window’s resize event, you have probably noticed that while Firefox fires the event slow and sensibly, IE and Webkit go totally spastic.

Fortunately, there’s an easy fix: throttling.

Throttling Your JavaScript

JS resize throttling is a two-part approach:

1. You create a function that does whatever you need to have happen on resize.
2. Within the .resize() method, you run the function and set a timeout on it so it won’t run again for a predefined amount of time.

Here’s what it looks like:

(function($) {

    var resizeTimer; // Set resizeTimer to empty so it resets on page load

    function resizeFunction() {
        // Stuff that should happen on resize
    };

    // On resize, run the function and reset the timeout
    // 250 is the delay in milliseconds. Change as you see fit.
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeFunction, 250);
    });

})(jQuery);

You can adjust the delay based on how much of a lag you’re comfortable with. Even 100 milliseconds makes a big difference in performance. Check out this demo Ben Alman put together.

Running on Page Load

If you have stuff that you want to run on resize and page load, you can also call the function outside of .resize():

(function($) {

    var resizeTimer; // Set resizeTimer to empty so it resets on page load

    function resizeFunction() {
        // Stuff that should happen on resize
    };

    // On resize, run the function and reset the timeout
    // 250 is the delay in milliseconds. Change as you see fit.
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeFunction, 250);
    });

    resizeFunction();

})(jQuery);

Now, resizeFunction() will run when the page loads, and again whenever the browser window is resized.

As part of my new project, I’ve rebuilt my WordPress for Web Apps toolkit from the ground up.

WordPress for Web Apps is a collection of functions, templates and plugins that transform WordPress into a web app engine. It comes with the essential components you need to power your web app with WordPress:

• A login form.
• A sign-up form.
• A password reset form.
• A password change form.
• Templates for content that can only be viewed while logged in (or logged out).
• A customized registration email.
• A disabled admin bar for all users.
• No access to the back-end for anyone except admins.
• User-specific navigation.
• A logout link.

Download it on GitHub

New Add-Ons

1. Hero. Simple callout boxes and background colors.
2. Alerts. Basic alert messages.
3. Social Sharing, social links and buttons without the bloat.

Updates

1. By request, dropdown menus now close when you click outside of them.
2. Houdini collapse-and-expand widgets got a subtle fade-in effect.
3. All jQuery add-ons got updated for noConflict compatability. If you’re using them with another scripting language that also uses $ as a shorthand, just add jQuery.noConflict(); to your JavaScript file.

I can remember taking boat rides there as a kid just for the chowder and clam cakes.

You Must Be This Tall, by director David Bettencourt, is the award-winning story of Rocky Point as told by the people who were there. Something I learned: the first phone call by a president was made from Rocky Point by Rutherford Hayes.

Sadly, Rocky Point closed its doors in 1995 after years of financial mismanagement by its shareholders (source: Wikpedia). The rides were auctioned off, some of them finding homes in other parks, and the park fell into disrepair.

The land was originally planned to be turned into condos, but I just learned that it has instead been turned back into a state park. Sadly, the decaying park still stands, fenced off from the public.

Learn More

1. The “You Must Be This Tall” website
2. Rocky Point on Wikipedia
3. The Rocky Point Foundation