Progress update: New WordCamp theme “CampSite 2017”

As announced in a previous post, this year’s WordCamp Europe team is working on a new WordCamp base theme for the community. We’re calling it “CampSite 2017”. Since the announcement was made, we were able to gather initial feedback (which was primarily positive), solidify and further develop our ideas. I’d like to share our progress with you today to hear your feedback and thoughts.

Wireframes

After we heard your feedback from our introduction post, we made a list with all common pages, components, shortcodes used, etc. each WordCamp site would need. We then created and started refining wireframes of the main page templates (you can click through the different pages by opening the sitemap button on the top left of the online tool).

Homepage:
For the homepage we put the emphasis on flexibility and being able to tease to different content rather than having a very long blogroll (as often seen on WordCamp sites). This allows us to surface important content, feature relevant calls-to-action (like Call for Speakers, Buy your ticket, Call for Sponsors, etc.). We did want to include latest blog posts, but limited the number on the homepage. The layout is created mainly with widgeted areas where we allow for some additional flexibility (see “Widget Area Top 1” + “2”, where you can use one or both depending on your needs).

Attendees page:
We’re working on extending the attendees page shortcode to include pagination and a search functionality. Bernhard published a meta post about it.

Speakers page:
On the speakers page we were playing with different grids and types of information to output. Since the event organizers can include different fields / types of information for speakers, they can also decide what to output here. We’ll achieve this by extending the speakers shortcode and will publish a meta post with all the details soon.

Speakers bio page:
We’d like to include a little more information around speakers on this page. We would find it very useful to have prominent links to a speaker’s website and social profile. We furthermore feel that it would be very helpful to see the talk a speaker is giving would be shared on their speaker bio page, instead of having to click one more time to see their full talk info, as well as a link to the slides and talk video (once available). To achieve this will will create a new page template.

Footer:
Here we’d like to provide a simple footer with just the social links or an extended footer with additional widget areas for menus and other links.

General layout templates:
Furthermore we’ll create the following general layout templates that can be used for any regular content page on the WordCamp site:

The Theme Repo – work in progress

We’re using the latest version of Underscores as a base for the theme and setup a repo on Github for the theme. As pointed out in the previous post, most features implemented in the default theme were widgets areas. As shown in the wireframes, we will add some widget areas in the new theme, but with more specific positions. The new page templates will help with some special pages, like the speakers list and bio page or the homepage. A first version with the new templates will be published next week.

A11y

Accessibility will be an important aspect of the new CampSite 2017 theme. We’re planning on implementing A11y standards and once the theme is ready for testing would love the community’s help to do a separate A11y testing phase. We’ve received some feedback from the A11y team about the biggest issues of the current theme and the things that Underscores is still lacking. We will take some A11y changes from TwentySeventeen and integrate them into the new theme and ask the A11y for additional feedback, once the prototype is available.

PS: Style Guide

As mentioned in the announcement posts, the CampSite 2017 theme will be shipped with only minimal CSS so you can use it as a starter theme and add all your own CSS styles if you like. But we will also ship an accompanying style guide with full CSS styling open source. The style guide can be used as is, as a base for customization, or cloned and made fully your own. We will publish a full post about the style guide, how it works, and our vision for the future very soon.

Your feedback please!

We’re still working on quite a few things and would to hear your feedback about the wireframes, our ideas around the page templates and shortcodes, etc. This project is for you, it will benefit the greater WordCamp community and any organizer setting up a WordCamp site in the future. So we want to hear your voice!

#campsite-theme, #meta-wordcamp, #wordcamp-sites

WCEU17 design team is building improved and more flexible WordCamp theme

In the Summer of 2015, a survey on WordCamp.org tools has brought up some great ideas and suggestions for a new default WordCamp.org theme. We, the growing design team of WordCamp Europe 2017, this year 6 people strong, want to help create such a new default theme for WordCamps. The ideas voiced in the survey were pretty much in line with our vision for a new theme.

We currently use the “WordCamp Base Redux” theme for WCEU17 which is based on a very old version of _s, lacking some of the newer features. The Redux theme also has some major A11y issues we’d like to tackle.

The suggestions from the survey we felt most strongly about were “serve the many, not the few“, “flexible starter theme“, and “be a theme only“. Using a current version of _s would solve a lot of these wishes voiced by the community.

The status quo

To tackle this, we compared the Base Redux theme with a current version of _s. We wanted to identify feature that were added and might need to be implemented in a new WordCamp base theme. Many added functions in Base Redux are legacy code, including older versions of the custom post types for speakers, session, etc. As those features are now handled by plugins, they are no longer needed in a new theme.

After stripping out all old and unused functions, we identified only some additional widget areas used:

  • Two additional widget areas after the header: after-header and after-header-homepage (only on the front_page)
  • Two additional widget before the content: before-content and before-content-homepage (only on the front_page)
  • A second sidebar: sidebar-2
  • 5 footer widget areas: footer-widget-1 … footer-widget-5
  • A credit action in the footer (which was never really used)

We do see the need for some additional widget areas and will decide which widget areas make sense to add to the new default theme to add additional flexibility. Having special page templates with no sidebars (full width) or other layout options, could also be very useful additions.

In the comments to the survey, Josh Leuze came up with some ideas for a new default theme. He wanted to introduce a theme with a basic design, so any WordCamp organizing team, with limited design resources, has a good starting point for a nice WordCamp theme. Josh included some of his ideas in the GitHub repo with additional assets for visual design ideas.

A new theme without a bundled design

The Base Redux theme is a starter theme and doesn’t really include any design. When using it you basically have three options, to create a design:

  1. Clone the design of a current WordCamp also using Base Redux
  2. Adding styles to Base Redux using the “Custom CSS” functionality from Jetpack
  3. Adding styles to Base Redux using the “Remote CSS” functionality bundles in a WordCamp.org meta plugin

For the new WordCamp theme we envision to:

  1. Have a solid technical framework with improved A11y using the latest version of _s
  2. Provide more flexibility and ease in setting up the WordCamp site by providing more layout options, page templates, and additional widget areas
  3. Provide modular CSS and style guide (provided separately / not included in theme – more info below)

Other theme improvements

We’re still working on the full list of theme improvements and features we’d like to include in the new WordCamp theme, but here are some of our ideas so far:

  • More flexible homepage options to share timely announcements, calls for sponsor/speaker/volunteers throughout the life span of an event
  • Page templates for speakers, sponsors, etc
  • Paginated archives for post types
  • Improved A11y

Sneak Peek: Theme CSS and a living style guide

Designing a WordCamp website can be challenging since we can’t modify HTML or JS so it’s important to have a good CSS starting point and documentation to speed things up. Separate from the new WordCamp theme, we’re also creating modular CSS and a living style guide as a convenient starting point for WordCamp organizers to use.

We’ll be releasing it open source for anyone to use, edit, and fork to create and share new versions. The styles can easily be applied to a WordCamp site using the “Remote CSS” plugin.

We’re hoping this to be a starting point and that the style guide will evolve over time. This will give others the opportunity to release more versions of it for the community to choose from. We understand that not every WordCamp team has design resources, so we want to help with some of the heavy-lifting providing this style guide.

We’ll be publishing more info about this soon. But for now, we’d like to share a few screenshots of what such a style guide would look like:

Style Guide: Color variables and values

Style Guide: Example of components

Big thanks to my team members @kau-boy and @lucijanblagonic who helped me kick this off.

Dear community

We’re very excited about this project and we’d love to hear your feedback! Also read our intro post on WCEU.

#campsite-theme, #meta-wordcamp, #wordcamp-sites