Tag: WordCamp

Challenging Traditional WordPress Design

Catherine Winters had the second session in the afternoon UX track. She talked about how to expand our conception of what a WordPress site is.

“Oftentimes many of us can tell, at a glance, when a site is using WordPress.” It’s the ones that surprise us that make things interesting. What is good for a blog is not necessarily best for other sites.

The assumption is that people making websites already know what they’re doing. This isn’t necessarily true. Elements taken as a given on a blog (sidebar archives, blogroll, etc.) should be reconsidered. Many times they aren’t necessary to the overall functioning of the design.

Catherine argues that we should try to limit things in sites that are necessary to the site itself. By doing this we’ll be able to avoid what Jakob Nielsen refers to as banner blindness.

She points out that “The blog post is the pitch.” The content of a site is what people will stick around for. Badges and widgets in the sidebar distract from this central purpose.

Similarly, page navigation and forcing users to click-through to see full content only creates a drop in the percentage of users who do stick around to read things.

Looking to the design of apps like Readability or Instapaper that are centered around reading can serve as effective guides for sites. She also pointed to Dustin Curtis and Jason Santa Maria as examples of effective content design and direction.

Others, like the ADDitude site that Catherine mentioned are examples of all the things to avoid. 9 column grids with busy design that provides no sense of hierarchy just overwhelm us.

wp-Typography was also mentioned as a way to align a site with basic typographical principles. This provides some basic tools for hyphenation, bullets, and other typographical tools.

Making Custom Theme Options Easy

Toby Mckes, a WordPress developer at I Can Has Cheezburber, gave the second talk at WordCamp Developers on the theme options panels their sites use. CheezCAP is the custom theme options panel they’ve open sourced.

Cheezburger runs over 50 sites on WordPress.com VIP. CheezCAP, which stands for Cheezburger Custom Administration Panel, makes their deployment process for themes really simple.

Background

The internet is a series of tubes filled with cats. Toby started on the farm team at Cheezburber where they were putting out many sites every week. The goal was “OMG moar sites plz.”

Their initial theme deployment process was terrible. Toby had to spend half his time as a server admin. On Thanksgiving 2009 one of their sites was posted to the Guardian UK and hit 700,000 pageviews. He got to spend his Thanksgiving rebooting the server.

They also didn’t have version control. There was no way of tracking what was being changed and many sites were hacked together to the point of looking pretty bad. It was easy to make new sites but difficult to update and maintain them. They switched to a unified theme on WordPress.com.

Early on they had 10 sites running this unified theme and one file which contained all of the customization options for the sites. CheezCAP was the solution to make this easier.

CheezCAP

Licensed under the GPL v2 CheezCAP adds an options panel to make customization easy. There’s a pre-configured config file that you can customize to your liking. Its core contains a few key aspects:

  • Boolean options create as basic toggle switches.
  • Text options can represent alphanumeric strings to be inserted.
  • Dropdown options serve as more complex options.
  • User caps to limit editing ability to specific user roles.

All of this goes right into your Dashboard and lets you get new sites set up and running with custom options that require minor configuration changes. Google Analytics integration, A/B testing, custom 404 pages, and much more can all be configured with CheezCAP.

The killer feature of all this is import/export. All of these options can be exported from one site and seamlessly imported into a new site. Setting up development sites is super easy using this.

Update: Toby gave a similar talk at WordCamp Seattle and will be updating the slides from that talk.

HTML5 and CSS3 with WordPress

Ray Villalobos, who flew all the way out from Florida, opened the development track at WordCamp Developers with a talk about HTML5, CSS3, and WordPress integration. He posted his slides before the talk as well.

Ray is an author at Lynda.com and runs a course on iOS 4 and web applications. The WordCamp presentation grew out of this course. He works for Entravision Orlando full-time, which manages many Univision stations.

The talk covered core HTML5 and CSS3 concepts and how they can be implemented into your WordPress development.

Core concepts

Ray described HTML5 as a bit of a rebellion against XHTML 2.0. In other words, “XHTML 1.1 makes humans code like machines.” With its flexible parsing rules, support of existing code structure, and common tags HTML5 respects users, browsers, and lets people write code in a more fluid manner.

HTML5 brings support for semantic elements (header, footer, asides, etc.) along with rich media and new form elements.

The semantic tags in HTML5 were created by analyzing the tags people were already using in their markup. The goal was to make things easier and provide for more rapid prototyping.

CSS3

Mobile browsers have great support for CSS3. Mobile app development allows for more universal support of both CSS3 and HTML5.

Ray warned to be careful when using gradients, custom fonts, transformations, and animations. Browser support for these elements can be dicey and relying on any of them for mission critical features isn’t a great idea.

One of the cool things with CSS3 is the media queries that allow for responsively designed sites. Ethan Marcotte also wrote a stellar article at A List Apart on media queries in May of last year.

Before adding new elements from HTML5 or CSS3 Ray cautions to look at your target platforms. Analyzing your site metrics will give you a better idea of what browsers your users are on. This helps you determine where to add enhancements and how vital it is to provide alternative versions.

To add support for semantic selectors in Internet Explorer and other browsers that don’t natively support them Ray suggested using html5shim or Modernizr.

Ray recommended Browser Labs from Adobe to test sites in multiple browsers side-by-side. It’s free right now but will eventually be a paid tool.

Using cache manifests and .htaccess rules you can easily set up offline storage of files on devices. These provide a great way to store images and other data for use in offline or airplane modes.

Status

Up in Vancouver today for WordCamp Developers. Getting ready to watch the keynote interview with Lorelle and Nacin.

Somewhere North of Seattle

Traveling up to WordCamp Developers and snapped this somewhere north of Seattle.

It’s an 8 hour train ride from Portland but taking Amtrak seriously beats flying. Power outlets, great leg room, and no security or liquids to hassle with.

WordCamp Seattle Slides

I posted my slides from the Edit Flow talk I gave at WordCamp Seattle the other weekend. The talk was a 5 minute Ignite presentation. It was a lot of fun condensing a plugin like Edit Flow to 5 minutes.

WordCamp and journalism conferences

This weekend Alex and I drove up to WordCamp Seattle. It was the third WordCamp I’ve been to and while driving home I started relating those WordCamps to the journalism conferences I’ve been to over the past few years.

WordCamps ground themselves in software, so an iterative approach is a natural fit. They are about answering the question, what are you working on right now to make things better?

That question is not limited to code. The writers in attendance focus on concrete tips for making their writing more engaging, their communities more active, and their publishing business more successful. Aaron Hockley, for example, gave what sounded like a really great talk about the basics of making money with your blog.

The code-focused speakers were covering everything from approaches to using AJAX in plugins to Swiss Army Knife-style theme options pages. Each talk gave you a tool you could take home with you and implement in your next project to make it better.

The journalism conferences I’ve been to have been decidedly different. In the past couple years I’ve been to the Associated Collegiate Press Conference, a couple of SPJ conferences at the University of Oregon, and other smaller conferences and presentations around Portland.

With the exception of the talks Marshall Kirkpatrick gave at the SPJ conferences, these journalism conferences are far less about doing things. They are filled with self-referential discussions about news. I’ve come away with a strong sense of what’s broken but not a good feeling about what is being done to fix it.

When you speak at a journalism conference I want to hear about what the top idea in your mind is. I want to hear about what experiments you are trying, how you are measuring them, and how they are affecting your success.

At the end of the month I’m heading out to Philly for Bar Camp NewsInnovation. I’m excited, it should be a great WordCamp-style journalism conference. We need more of these discussions to iterate and make the news information business better.

WordCamp Seattle

I’m driving up to Seattle early this morning for WordCamp Seattle. There’s a great set of speakers lined up for the main part of the day.

At the end I’ll be giving an Ignite talk about Edit Flow. You should catch the live stream of talks throughout the day.

Looking forward to meeting everyone and catching up with Andrew, Max, and more.