Twenty Thirteen, the Ins and Outs with Konstantin Obenland [LIVEBLOG]

  • General process of a default theme project
  • First design mockups
  • Final designs
  • Research what didn’t make it in previous default theme
  • Theme conversion
  • Starting point Twenty Twelve
  • Ground work
  • Feature development
  • First round of theme breaking
  • Bugfixes
  • Polishing design and code / Account for edge cases
  • Introduction to core
  • Intense breaking and fixing
  • Release (Maintenance/Updates)

A talk by Konstantin Obenland, one of the two project leads for the upcoming Twenty Thirteen release to be in WordPress 3.6.

Stay tuned for liveblogging to start at 2:15pm PT.

Jonathan Dingman March 23, 20132:19 pm

Let’s get this party started!

Jonathan Dingman March 23, 20132:19 pm

Konstantin works for Automattic, but started with contributing to the WordPress Theme Review team back in March of 2012.

Jonathan Dingman March 23, 20132:20 pm

Twenty Thirteen is the first default WordPress theme to use Google Fonts by default.

Jonathan Dingman March 23, 20132:20 pm

Twenty Thirteen has a dramatically different color scheme than previous default themes

Jonathan Dingman March 23, 20132:22 pm

Default themes in general..how do they work?

Goals with yearly themes.

* Create something different than the year before
* Show off the latest and greatest features
* Support child themes and encourage customization
* Have an aesthetically pleasing design
* work for a blog or a website
* Represent best coding practices, technical excellence

Jonathan Dingman March 23, 20132:22 pm

EDITOR NOTE: I find it interesting that he calls out “..a blog or a website” and there should be a difference at all, shouldn’t blogs == websites?

Jonathan Dingman March 23, 20132:23 pm

General Process.

* Matt sets design vision and feature direction
* Designer creates mockups
* Wrangler converts mockups into a working theme
* Community tests and polishes the first draft

Jonathan Dingman March 23, 20132:24 pm

In the lat default theme, it was very different. Drew worked on both design and coding of it.

Jonathan Dingman March 23, 20132:24 pm

Looking at different aspects for a default theme, LTR language support, Multisite support, print support, you name it, we strive to support it.

Jonathan Dingman March 23, 20132:25 pm

“Who is Matt?”

See http://ma.tt

Jonathan Dingman March 23, 20132:25 pm

who is the team behind Twenty Thirteen?

Matt – project owner
Lance – project lead
Joen – theme designer
Konstantine – theme developer

Jonathan Dingman March 23, 20132:27 pm

[Konstantine talks about the timeline of developing the next iteration of the default WordPress theme]

Jonathan Dingman March 23, 20132:29 pm

Today, we are 4 days away from a code freeze for the Twenty Thirteen development

Jonathan Dingman March 23, 20132:30 pm

Design Vision.

* Back to the blog
* Beautiful implementation of post formats
* Visually very unique, maybe even a little quirky

Jonathan Dingman March 23, 20132:30 pm

Talking about how there was a lot of chatter around WordPress being a CMS…and now we’re trying to focus on WordPress as a blog.

WordPress will still ship with Twenty Twelve in WordPress 3.6

Jonathan Dingman March 23, 20132:31 pm

In the future, we will alternate CMS and blog-styled themes for the default theme a we move forward. 2014 and 2015, etc.

Jonathan Dingman March 23, 20132:31 pm

Twenty Thirteen will be the first theme to fully utilize post formats, taking full advantage of the post formats and style them accordingly.

Jonathan Dingman March 23, 20132:32 pm

Bold colors.

Page navigation, bigger arrows

(Reference: http://twentythirteendemo.wordpress.com/ )

Jonathan Dingman March 23, 20132:33 pm

Homework…

* HTML5 comment markup
* HTML5 input types for comment form and search form
* Provide context for translation in search form and comments heading
* Twenty Thirteen to be designed with accessibility as a priority
* Video Headers

Jonathan Dingman March 23, 20132:34 pm

Twenty Thirteen will be the first fully accessible theme that has been produced. Konstantine is very proud of that.

Jonathan Dingman March 23, 20132:37 pm

Things that didn’t make it….

* Navbar widget area
– this may be released as a plugin, “for responsible users”
– this feature hurt Konstantine the most, he really liked this feature
* Many small details
– Only the Title in the floating static top bar
– Right aligned image feature, will only be left-aligned to fit the rest of the theme
* Alternate header images
– Konstantine will make sure this feature gets into the plugin
* Features that were dropped:
* Custom Backgrounds
* Dotted widget background in the sidebar
* Video Headers
* Multiple color schemes

Jonathan Dingman March 23, 20132:38 pm

Color schemes were cut because of the amount of work required to accomplish. Likely to be a plugin to offer color schemes to provide this functionality.

Jonathan Dingman March 23, 20132:40 pm

[Konstantine shows some examples of people that have customized Twenty Thirteen]

Jonathan Dingman March 23, 20132:41 pm

Decisions and Principals

* No custom background
* Custom header images are decorative background images
* Intended to be used in one column layout

Jonathan Dingman March 23, 20132:43 pm

Twenty Thirteen is a very opinionated theme. There will definitely be people that don’t like it, but don’t worry, there will be more default themes in the future.

Jonathan Dingman March 23, 20132:44 pm

Genericons.

These made their way into the Twenty Thirteen theme.

Jonathan Dingman March 23, 20132:45 pm

Release…

* Together with WordPress 3.6 release
* No pre-release on WordPress.com
* No pre-release to the WordPress.org Themes Directory

This has been changed, the Twenty Thirteen will be offered through these venues to help squash all the bugs.

Jonathan Dingman March 23, 20132:46 pm

This time around, we are releasing Twenty Thirteen earlier in the year so it can be used through the year. In Twenty Twelve, this didn’t happen and it made it into WordPress 3.5 so it wasn’t available very long.

Jonathan Dingman March 23, 20132:47 pm

Konstantine talks about resources to beta test Twenty Thirteen today.

Demo: http://twentythirteendemo.wordpress.com

Beta Tester Plugin: http://wordpress.org/extend/plugins/wordpress-beta-tester/

Jonathan Dingman March 23, 20132:48 pm

This is the end of the talk…Konstantine opens it up for questions.

Jonathan Dingman March 23, 20132:48 pm

Audience: “Did Joen start on the computer or did he sketch it out on paper first?”

Konstantine: “I know that Matt and Joen had discussions early on and showed Matt what was going on.” .. Audience member: “I think he started on paper first”

Jonathan Dingman March 23, 20132:51 pm

Audience: “Responsive design..what’s the difference between Twenty Twelve and Twenty Thirteen?”

Konstantine: “Twenty Twelve was much more of a ‘mobile-first’ approach, but Twenty Thirteen was not. But the theme will still work with all the screen sizes. The approach was different, but the result is similar.”

“Media queries in Twenty Thirteen, we designed them work for smaller screens, not starting with smaller screens and make them work for larger.”

Jonathan Dingman March 23, 20132:52 pm

That’s a wrap!