Categories
Web Design

What is a WordPress theme in 2020?

When I use WordPress as a CMS, I tend to write a custom themes. To me, the default themes always felt very rigid and… well, dull. But after taking a look at the latest release, I’m going stock with just a few mods. Here’s why.

WordPress recently released version 5.3 “Kirk” with the new Twenty Twenty theme. Another boring WordPress core update, right?

Not this time!

For one, this is the first core theme that feels like it was actually built with the recently introduced WordPress Block Editor in mind.

Instead of providing a collection of static templates, Twenty Twenty embraces the modular approach with a simple design that enhances block content without getting in the way. The result is a design flexibility that was previously not possible.

Twenty Twenty is actually based on Chaplin, a free theme by Anders Norén who was also the design lead on Twenty Twenty.

He seems to have taken the right approach to building a default theme, and understands how to make structural design choices while still leaving a lot of room for design flexibility.

“The responsibility of a theme is to empower users to create their inspired vision by making the end result look as good, and work as well, as the user intended.”

Anders Norén

New theme, new font

Twenty Twenty also uses a brand new typeface called Inter, designed by Rasmus Andersson.

It’s a modern font family designed for sharpness and readability on screens of all sizes. It’s also optimized for minimal request overhead.

A modern font goes a long way to make all elements of the modular design looking sharp and consistent.

It’s good

All this to say, I think Twenty Twenty is a huge win for anyone still hosting their own blog or personal site.

Remember, Facebook doesn’t have to own your content.

Categories
Web Design

A new website for the New Year

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.

Categories
Games Web Design

Mortal Kombat 9 Mobile Moves List

Update: The app has moved to mobilemov.es/mk9.

Mortal Kombat Mobile Moves List is the best 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 mobilemov.es/mk9 on any mobile device to check it out.

Toasty!

Categories
Games Web Design

Cool things at barackobama.com

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

Categories
Web Design

What is the Internet?

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