2011 was a very interesting year for the web. The App Internet continues to march on while web consumption continues to fragment into a myriad of devices with different browsers and form factors.

Out with the old

As Jeffrey Zeldman recently pointed out, the days of a single fixed width layout are over and web designers once again find themselves in uncharted territory with few standards to guide them. What is the new ‘best practice’ in web design? Responsive design? Adaptive? A return to fluid layouts?

It’s easy to complain about the lack of guidelines and the seemingly daunting task of crafting a great user experience across so many devices. It’s a lot more fun to start experimenting in search of a solution.

It was with that spirit I set out to redesign my personal site a few months ago. I wanted to create a proof of concept for a mobile-first, adaptive design where every page looked great no matter what device you happened to be using.

Simplicity

My first goal was to keep things as simple and lightweight as possible. Mobile-first design treats mobile and desktop as equals, so pages had to be small enough to load quickly, even at 3G speeds. Frills were cut, and a minimalist style was adopted.

Hot tools

I looked at many responsive and adaptive grid systems before settling on Joni Korpi’s excellent Frameless. The Frameless grid frees you of pixel-based thinking by using LESS to calculate em based columns that give you more control over which elements adapt and which do not.

FitVids, a jquery plugin for adaptive video players, works flawlessly for scaling videos.

Results

I’m very happy with the results of this first step into full-scale adaptive design.

The site adapts well to every smartphone, tablet, and desktop display out there, while remaining very lightweight. Grab the corner of your browser and resize away. The content will scale to fit any size.

The future

So, what’s next for the web?

Will standards start to emerge? Will the app internet make the web irrelevant?

Who can say. As always, the only consistence is change. I’ll just continue to have fun navigating it.

Mortal Kombat Mobile Moves List is an MK9 moves list for your phone or tablet.

It’s a free web app, optimized for iPhone, iPod touch, iPad, and Android.

Features:

• Fatalities, Stage Fatalities, and Babalities for all characters.

• Console specific buttons.

• ‘Add to Home Screen’ on iOS devices for a full screen view, and offline access.

The app was built using Mobile Boilerplate, jQuery, and HTML5.

Visit bit.ly/mk9moves on your mobile device to check it out.

Toasty!

Yes, barackobama.com has both HTML5 Boilerplate and Pokemon.

This is what happens when the BBC uses the internet to crowdsource a documentary about the internet.

Chris Hedges did.

The Pulitzer Prize-winning journalist, author, and tech-pessimist, recently gave a lecture at the University of Mississippi about the decline of newspapers. Which, in his view, inevitably leads to the death of journalism, literacy, and even democracy. You can read or watch the lecture on the University’s blog.

Talk about a slippery slope.  Yes, the medium, business model, and definition of “news” is changing rapidly, but I fail to see how this signals the journalistic apocalypse.

Some of his views seem to be based on misconceptions about the internet. Here are a few:

Read More »

If you ask me, Mozilla couldn’t have picked a better name for their new experimental web-based IDE.

The idea behind Bespin is also pretty cool.  Since most web projects don’t require a huge codebase, why not use a simple IDE in the cloud?

The project has a long way to go to be sure, but I’d say it’s off to a great start. Try it out for youreslf at bespin.mozilla.com.

I’ve been working on a new site design for the last couple months, and now it’s live.

Aesthetically, I was going for a look with bold typography, clear separation of content, and simple, easy to navigate layout.  I mixed a tech theme (circuit board and sharp edges) with an arts & crafts feel (large type and cut-out borders) to reflect my work as a web developer, and my interest in all things creative.  I decided on a green color scheme to stand out from the typical blog, and because I’m a fan of Kermit the Frog.  Emphasis is still on the content, but I think the new theme gives the site the extra flavor I was looking for.

I’ll be using this personal blog to post quick thoughts, cool videos and links, and the occasional music or film review.  Enjoy!