Categories
WordPress Themes

Introducing Popper – a new free WordPress theme for everyone

As an early present for Jul, I give you Popper, a new free WordPress theme with a focus on accessibility, mobile-first design, beautiful typography, and content-centric minimalism.

As with Simone, my theme from last year, Popper was built from _S and is the subject matter of the yet-to-be-released update to the popular WordPress: Building Themes From Scratch Using Underscores course at Lynda.com (release date tba).

Accessibility and Thumbs

Popper started out as a simple idea: Build a beautiful content-focussed theme that met or exceeded the WordPress Accessibililty Guidelines, and provided a user experience centered around how people visit the web today: with their thumbs on mobile devices.

The accessibility part was relatively easy: _S meets the Accessibility Guidelines out of the box, and extending them just means following the path already carved out by its developers. To enhance what came with _S, I also co-opted the exceptionally well built and accessible menu from Twenty Fifteen and used CSS and JavaScript to make it work as a horizontal menu on wider screens.

Popper's thumb-friendly menu
Popper’s mobile menu was designed with thumbs in mind, popping up from the bottom left to keep all menu items in reach on mobile devices.

In building the menu, I also answered my own challenge from my talk at WordCamp Miami 2015 to design the theme with thumbs in mind. To achieve this, I moved the mobile menu button, which traditionally is positioned in the top left corner, to the bottom left corner, and made the menu appear on top of the content rather than displacing it. As a result, the menu is always accessible and within reach regardless of what type of device or input method you choose to use.

Site Icon as a Home Button

A common request for themes is the ability to add a logo. In Popper, this is achieved using the built in Site Icon feature that normally populates the favicon for the site. The global home button in the theme appears as a square in the top left corner. If no Site Icon is added, the square shows the first letter of the Site Title. If a Site Icon is added, the square shows the Site Icon.

Carefully Considered Options

I am a big fan of options where options are appropriate, and Popper comes with some carefully considered options via the Customizer. In addition to the Site Icon, the site admin can change the background color and text color of the header, and add a header image as a background element.

If the header background color is set to hard white (#ffffff), the theme switches to a minimalist B&W mode that should appeal to even the most discerning minimalist.

The full header, displaying the Site Title and Description as well as the main menu and home button, is only displayed on the Home and archive pages. On single posts and pages, a reduced header is displayed to free up space for the content.

Popper has one widget area that displays at the bottom below the main content by default. From the Customizer, this can be changed to display the widget area as a sidebar either on the hard left or hard right of the view.

The theme also ships with two custom widgets: Enhanced Recent Posts which shows the most recent posts with featured image, post title, and excerpt, and Enhanced Recent Comments which shows recent comments with commenter Gravatar, name, excerpt, and a original post title.

Subtle touches

Because this theme was built as a learning tool, there are a lot of subtle touches that may not be obvious at first, but provide an improved user experience. CSS flex (a.k.a. “flexbox) is used for post navigation and widgets to create a more harmonious display of content, and when the widget area is set to default, the width of individual widgets changes depending on how many widgets are added to provide a more interesting display.

On the home page, the first post is displayed as full content with the option of truncation through the More Tag.

Featured Images and center-aligned images are displayed as full-bleed content on smaller screens and center automatically on wider screens.

Posts can have an optional deck (summary) displayed directly under the post title, powered by the custom Excerpt feature in the post editor.

 

In-content links are highlighted using a grey underline that grows on :hover and :focus.

And if a post author has a Gravatar associated with their email address, the Gravatar appears next to the post meta to show the visitor who wrote the post.

Work in Progress

Like all my themes, Popper is a work in progress, and it will continue to evolve as I come up with new ideas and issues/feature requests/pull requests are submitted. The theme is translation ready and I readily accept contributions from all interested parties in the form of issues, feature requests, pull requests, and translations. To follow the ongoing development of Popper, visit the GitHub repo.

Why “Popper”?

More than likely, you’re wondering why the theme is named “Popper”. The answer is simple: All my themes are named after famous philosophers. This theme is named after Karl Popper, who worked extensively on the philosophies of science, politics, and ethics. Popper is maybe most famous for his ideas on empirical falsification and the problem of scientific demarcation, but he also made great contributions to the study of ethics and politics as a proponent of social liberalism.

I first became aware of Karl Popper during my work on Thomas Kuhn’s Structure of Scientific Revolutions, the almost nihilistic anti-realist epos that birthed the idea of scientific revolutions and paradigm shifts. Kuhn’s work stood in sharp contrast to Popper’s positivism, and in my work with both men’s ideas, I found my own way of seeing the world, as a Kuhnian realist, or a revolutionary positivist. You be the judge.

Popper became the namesake for this theme due to it’s basic premise of building on what has been done before and moving the world forward by introducing evolutionary and empirically falsifiable theories about how to improve the user experience through accessibility and a focus on the hands of the mobile user.

And yes, you are welcome to call me a philosophy nerd.

Categories
Design

Web Design with Thumbs in Mind

Anyone with a big phone knows that the comfortable reach of your thumb when holding the phone in one hand does not extend to the top corners of the screen. Far from it. The only comfortable area of reach on larger phones is in the lower ½ to ¾ region. (Scott Hurff wrote a great piece on this which includes some pretty compelling graphics of “pain maps”. Definitely worth a look.) Even so the traditional position of main navigation and other interactive elements has been at the top of the screen, often a Hamburger icon in the top left corner.

This is design based on convention and laziness, and it ignores the reality of current user behavior – which is holding a large phone in one hand.

Observe as I use my statistically large hand to navigate a standard website on my not-quite-as-large-as-the-gigantic-iPhone-Plus Sony Xperia Z3:

Painful, and dangerous as the thumb reach makes me prone to drop my phone.

Design with Thumbs in Mind

At WordCamp Miami 2015 I presented the slide above and suggested maybe a better position for important navigation would be on the bottom of mobile screens in easy reach of the thumbs of its users. This is hardly revolutionary, but it still a rarity on the web.

This design pattern is now starting to pop up on sites all over the mobile web (I’m not taking credit for this btw. I’m just observing what’s happening). Or rather, a version of this pattern is appearing in which the mobile screen is divided into two sections: A high interaction area at the bottom of the screen and a low interaction area at the top.

On phones, the top part of the screen is a low-interaction area while the bottom is a high-interaction area.
On phones, the top part of the screen is a low-interaction area while the bottom is a high-interaction area.

What’s interesting about this is it allows us as designers to decide what type of behavior is to be considered high interaction and what behavior is low interaction.

In the examples below, from CarThrottle, Gizmodo, and Medium respectively, overall site navigation and interaction is placed in the low interaction area while the high interaction area is populated by content interaction tools like social sharing, liking, recommending, and saving:

The high interaction area is typically populated by social media and other content interaction tools.
The high interaction area is typically populated by social media and other content interaction tools.

On other sites, like Quartz below, social sharing and content interaction elements are placed in the low interaction area while site navigation is found in the high interaction area:

Quartz has flipped the script placing content interaction in the low interaction area and site navigation in the high interaction area.
Quartz has flipped the script placing content interaction in the low interaction area and site navigation in the high interaction area.

I’m tempted to infer from this something about the overall goals and intentions of the respective sites: The use of the two interaction areas is obviously deliberate and meant to make certain types of interactions easier for the visitor. Based on this we can stipulate that while CarThrottle, Gizmodo, and Medium are mainly focussed on single content items and social sharing of these, Quartz puts greater emphasis on keeping the reader on the site and getting them to dive deeper into the content.

This is of course pure conjecture.

Anti-Patterns

With these newly defined interaction areas, whether by design or by accident, one particular anti-pattern is emerging, as exemplified by Forbes and IFL Science:

Some sites choose (by accident or design) to place 3rd party ads in the high interaction area.
Some sites choose (by accident or design) to place 3rd party ads in the high interaction area.

The choice to place 3rd party advertising in the high interaction area by these and other publications creates a situation in which it is easier for the user to click an ad and leave the site than it is to interact with the content or site itself in a meaningful way. It is tempting to think that this is intentional, but I am inclined to believe this is either a matter of poorly informed design or clever advertising networks taking advantage of old design patterns. That said, Forbes also forces the user to go through a full-page ad before accessing their content, so…

Building Interfaces for People

The conclusion here is pretty obvious: If you want the people who visit your sites to interact with them, place your interactive elements in the vicinity of their interaction tools. On a computer or laptop, the natural place is either at the top of the screen with the other chrome elements or in the context of the content. On mobile screens, that is most likely along the bottom of the screen.

App developers have known this for ages, and most apps have all their major interactive elements in the high interaction area. Now it’s our turn to make the web more thumb friendly.