This is a Post on a WordPress Design Blog that Talks about Super Mario Bros.

Sounds silly, I know, but here’s a nice quote on “Great products are triumphs of taste” by 37signals:

Want to build a great iPhone app? Go listen to Billie Holliday. Trying to design a piece of hardware? Visit a Frank Lloyd Wright house. Aiming to write great marketing copy? Read Aldous Huxley. Need a color scheme? Go to the museum and check out some Mark Rothko paintings.

So. Super Mario Bros.

I’ve been reading this series of interview between Satoru Iwata, the president of Nintendo and Shigeru Minamoto, the guy who created Super Mario Bros, along with other guys who contributed to the game. The interviews are a goldmine of video game design lessons, and I’m going to list some of the brilliant thoughts that go into the making of one of the best game ever, Super Mario Bros.

The real reason why Mario wears hat and overalls.

About the hat:

Iwata:
There’s absolutely no way that you would have had enough pixels, right?

Miyamoto:
Right, there weren’t enough. Before you know it, you’ve used up 8 X 8 pixels. But if you draw a nose then a moustache, you don’t really know if it’s a mouth or a moustache, and it saves pixels.

And the overalls:

Miyamoto:
[...] When Mario is running he moves his arms, but in order to make that movement easier to see, I thought it would be best to make his arms and his body different colours. So I wondered whether there was a type of outfit which was like that…

Iwata:
And that’s how you came up with overalls! (laughs)

Whatever you do, you’ll get that first mushroom.

Mario will always get that mushroom

At the time, mushroom is an item of unknown use for players. Pac Man gains power by eating the big dots, but a mushroom? What could it be? It also didn’t help that Mario’s first enemy, the Goomba, was shaped just like the mushroom.

So, to show that it is a useful and harmless item, Miyamoto designed the layout in such a way that whatever you do, you will always get that mushroom. See that pipe right there? It’s there for a reason, namely so that the mushroom bounces off and goes toward the direction of the player. They also have a video that shows it here, under point 4, “Letting Everyone Know It Was a Good Mushroom”.

Miyamoto:
Right. There was one problem, however. When you play, you encounter a Goomba right at the start and it’s shaped like a mushroom.

Iwata:
It does look very similar.

Miyamoto:
So when you hit a box and something that looks like a Goomba pops out…

Iwata:
You run away.

Miyamoto:
Right, you run away. This gave us a real headache. We needed somehow to make sure the player understood that this was something really good. That’s why we made the mushroom approach you.

On Turtles.

Ever wondered why Mario had to deal with turtles? It was originally started from Mario Bros. (a different, earlier game), where you have to hit an enemy from below to beat it:

Defeating a turtle in Mario Bros.

Miyamoto:
That’s when we thought about what kind of creature could withstand being struck from below and would eventually recover. We racked our brains thinking what we could use…

Iwata:
And that’s how you came up with the turtle! (laughs)

Miyamoto:
The turtle was the only solution! (laughs) Strike it from below and it flips over! Leave it for a while and it rights itself!

Can’t Unsee This: On Clouds and Grasses

Take a good look again at this picture.

Mario will always get that mushroom

Yup. The clouds and the grasses are the same thing, colored differently.

Nakago:
Right. That’s why we strived to make the items take up as little space as we possibly could.

[...]

Nakago:
We’d use the same image for both clouds and grass, just changing the colour.

Iwata:
The clouds and grass look like separate objects, but actually they both use the same graphical elements.

Conclusion?

To be truthful, I’m linking to the interview series simply because it’s a fascinating read in itself. You get to dive into the mind of the designers behind a truly good game that’s loved by many. If we have to draw a conclusion for all this, though, it’s that in a truly great design, everything is there for a reason.

Mario’s hat, overalls, the way they re-used the graphic for cloud and grass, they’re all there to save memory. Having turtles for enemy, it turned out, had a reason as well, a funny but perfectly logical choice. Even the very first screen of the game had a lot of thoughts put into its design.

This maybe is the key to the popularity of Super Mario Bros. even to this day. We may not realize why it’s so damn enjoyable to play, but now we know that underneath, there are a lot of thoughts, considerations and brilliant ideas put into its design.

That’s what I believe to be the best kind of design: Subtle, probably goes unnoticed by many, but quietly adds to the overall quality of a product.

And that, my friends, is why you need to read an article about Super Mario Bros. in a WordPress design and development blog.

Latest Links More →

Classy Plugins

Eric Mann uses classes in his non object-oriented WordPress code. Here’s why.

Playing Nice with the “the_content” Filter

This great article could be useful if for some reason you have a need to filter the_content in your theme.

Google Goes After Links In WordPress Themes

New post from the Search Engine Roundtable: Someone “…received a response from Google to a reconsideration request that the only way his site will be reincluded in Google is if he removes all or most of the links in those WordPress themes.” The problem is that those links are in the form of sponsored links on footer (a practice I saw a lot in the past, not so much in the present).

I don’t think it will be easy, or even possible, to do what Google requested. If a theme contains an upgrade notification feature it might be possible to do, but even then the users might choose not to upgrade.

Secondly, if this is true, I wonder whether Google differentiates between credit links (“Designed by…”) and sponsored links. I would say they should, but then again I’m not a SEO guy.

Theme Options Gallery

New favorite blog: Theme Options Gallery by Konstantin Kovshenin, discussing “the best (and the worst) theme options screens around”. Loving the in-depth article and discussions already available there.

Dive into Responsive Prototyping with Foundation

Pretty safe to say that if it shows up on A List Apart, it’s going to be the de facto standard. Time to learn some Foundation.

Google HTML/CSS Style Guide

Couple of days ago we got Starbucks’ style guide, and now here’s another by Google. I think the interesting thing is the rule to “\[o\]mit the protocol from embedded resources“. So instead of typing <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>, they recommend to type <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> instead (without the http part). Never heard of that before.

“I Woke Up but My Server Wasn’t There”

Robb Shecter’s WordPress site got popular overnight thanks to Reddit and went down immediately. The interesting aspect is that the site was new and it’s on a relatively high-powered server. The author then found that the theme he used in particular was doing too many (47!) server requests at a time, and the site ran along very well after switching back to Twenty Eleven.

I think it’s an important read for any theme developers out there.

Read the story here

Modern Web Development – Part I: The Webkit Inspector

A superbly detailed article, part one of a series about web development toolchain.

Crayon Syntax Highlighter plugin

I’ve always been on the hunt for that perfect syntax highlighter plugin. Currently I’m using WP-Syntax, which does its job very well. However I’ve just found this plugin called Crayon Syntax Highlighter, which could be a good contender for the best WordPress syntax highlighter plugin out there.

It looks good, and I like the little toolbar on top of the code box, with the small icons. Additionally, it also offers a lot of customization options. Lastly, it seems to support the same pre tags to wrap the code, similar WP-Syntax, so if I do make the switch, my old codes will still be highlighted correctly.

Starbucks Style Guide

The Starbuck website has its own style guide, accessible for public. I think its a neat idea, wouldn’t it be cool if themes have their own style guide? Pretty sure it will be helpful both to users or developers alike, if time consuming to write.

Also, I wonder what they use for the various toggles panel on the top right corner like on this page. It shows background, baseline, boxes, can be used to change windows size as well. Looks like it’s custom coded, imagine how super useful it can be if it’s a jQuery plugin.

NHP Theme Options Framework

I love theme options frameworks. And I want you guys to check this new framework called NHP. It passes my “does its UI look like the rest of WordPress enough?” test (screenshots here), it has tons of field types, and even offer validations, too.

Can’t wait to test and probably use it too in my to-be-released theme hint hint

What Dev4Press thinks WordPress needs…

This post at Dev4Press outlines what MillaN, its author, thinks would be a necessary addition to WordPress.

Based on the comments, it appears that a lot of people agree with this list. Some of the items mentioned can be achieved with plugins (e.g Tax Meta Class to add meta data to taxonomy items, Custom Post Types Relationships for, well, creating custom post type relationships), so expect there to be a bunch of debates about what should and shouldn’t go to the core.

I like his list, but I disagree with his assessment that we don’t need new core themes. We do, especially to bring about the standard for how a theme options should be designed. This is the aspect that desperately needs to be standardized. Different theme companies and individual theme designers have their own idea of how the theme option UI should look, and it’s hurting the users.

Upgrading from WordPress 1.5

I recently spotted this interesting Ask Metafilter thread where user gd779 tries to find a way to upgrade his old, WordPress 1.5 install. One of the answer is pretty detailed:

I think the right approach is going to be:

  1. Do a full backup of your WordPress files
  2. Do a full database backup (mysql dump using phpMyAdmin or similar)

Then, from your 1.5.2 install:

  1. Upgrade to 2.0
  2. Upgrade to 2.5.1
  3. Upgrade to 3.0
  4. Upgrade to 3.3.1

It is quite fascinating thinking about the solution to this. There’s an official Codex page called Updating WordPress, but it doesn’t seem to go that far back in time.

Smashing Special: What’s Going On In The WordPress Economy?

Siobhan McKeown wrote this awesome, birds-eye view of the whole WordPress economy. Make sure to read this two-part article so you know what’s up with WordPress and identify what opportunity lies ahead.

I agree with Matt’s prediction on that article:

I think the next big opportunity is around agencies and consulting—there will be five to six companies as large as Automattic, just providing high-end consulting and services to the large customers who are adopting WordPress en masse.

Start with Part I of the article.

Automatic responsive images for WordPress

The one issue with creating responsive web design is in displaying images, especially getting the most appropriate size in a particular screen size. One solution for it is the Responsive-Enhance jQuery plugin. It works by loading small-sized images by default, then checks the screen size and loads the bigger version if necessary.

According to its creator, Josh Emerson:

This results in a faster perceived page load speed, but a slower actual speed. I’m happy with this solution as I care more about perceived speed than actual speed.

This tutorial by Keir Whitaker takes the whole thing further by teaching us how to apply Responsive-Enhance in WordPress.

The WordCamp Central Site Redesign

The WordCamp Central has been redesigned, now sporting pleasant shades of blue. I particularly like the individual WordCamp page like this one for San Francisco, which features date, location, and archive links to past WordCamps there.

A little peek under the hood shows that the site now uses a Twenty Ten child theme called “WordCamp Central 2012″. The site uses a plugin called WP Event Ticketing for ticketing purposes, and WP Super Cache for speed.