Tag: conference

Write the Docs: David Hooker – What I have taught developers about writing

I’m at Write the Docs today in Budapest and will be post­ing notes from ses­sions through­out the day. These are all posted right after a talk fin­ishes so they’re rough around the edges.

David wrapped up day one of the conference. He works as the writer at Prezi and handles the knowledge base, the engineering blog, and pretty much anything you see with words and Prezi.

In some way, shape, or form communication can let us down. A belief in documentation is a belief that communication can be improved through writing. You’ve created something you’re proud of and you want to share it with the world so that they use it.

The best way to engage someone’s interest is to hook on to emotion. Your words are what allow you to do that.

David outlined 4 rules for drawing upon someone’s emotions:

  1. Start with the good shit. Don’t start with the backstory, start with what’s interesting.
  2. Keep it simple. There’s lots of places where complex writing can go wrong.
  3. Write what people actually say. Usage trumps any of the rules; formal language rules are just that, formal.
  4. Don’t repeat. Repetition in speech sounds great, but the eye doesn’t like it.

You can choose to make your writing exciting. No one needs to be able to tell that an engineer wrote your documentation.

WordCamp Portland: All about post formats

Today I gave a talk at WordCamp Portland about post formats and how they make your site awesome. The slides are posted below and some handy links are included as well. Enjoy.

The WordPress Codex has some terrific information on what formats are and how they can be implemented in case you need more details after this talk. Ian Stewart also gave a great talk about this at WordCamp San Francisco which I wrote some notes about before.

WCSF: How the web works with Jeff Veen

Jeff Veen opened Sunday’s sessions with a talk about how the web works. He started with a story about beer and how 200 years ago the only way you could have a cold beer was if it was winter or if you were rich and could transport and store ice.

Frederic Tudor was an entrepreneur who turned ice into a business. He became quite profitable and later realized that he could make a greater fortune by shipping that ice to the Caribbean and all over the world.

Technology marched on and people found ways to create ice in warehouses that did not need to be shipped. It could be stored and created locally. The companies that were successful warehousing ice did not successfully transition to ice in the home. Newer entrepreneurs eclipsed the traditional businesses.

A similar thing happened with gold transportation. Wells Fargo and American Express were experts in the stagecoach business. However, they anticipated the changes coming and restructured their businesses around the conveyance of information instead of the shipping of physical goods. They made this transition rapidly too, needing only a few days.

So the question is, are we building companies like the ice warehouses or like the gold businesses? How do we know which path our business will take?

We’re in a similar situation now where incumbents are losing ground to services like Hulu, Spotify, and Pandora who are native to the web. The same thing is happening with typography.

The ability to embed web fonts has revolutionized the model that foundries have relied upon as their business. This is what Jeff is doing at Typekit. They’re trying to help foundries be like the gold companies and less like the ice warehouses.

So as we look back we realize that the ice industry was less about ice and more about health. The gold industry was not about moving bullion from San Francisco to New York but was about transforming wealth into data that could be communicated. Likewise, media is not about selling assets but is rather about services that make consumption seamless.

The qualities that contribute to the success of the web are also what will make us successful.

On the web the thing that wins is that which generates rough consensus and has running code. It’s the code in people’s hands that ultimately is successful. The first person out with running code in front of users can generate momentum.

Jeff also quoted Jeff Atwood who says:

The velocity and responsiveness of your team to user feedback will set the tone for your software, far more than any single release ever could.

Jeff Veen uses Twitter to see if the code deploys they’ve made that day are impacting the experience of users in a positive way. Iteration will get you closer and closer to perfect.

In other words, “The speed of iteration beats the quality of iteration.”

We’re putting our most valuable memories on the web with Flickr. We’re also creating a collaborative record of human history with Wikipedia. The web is not dead, in fact it’s never been more vibrant or successful. To keep it that way we need to protect and advocate our open systems and avoid the walled gardens sold on a broken concept of safety.

Geocities is an example of these walled gardens which can just be shut down by a single company. As Jeff said, “There are literally people who don’t give a shit about the web.” That’s who we need to protect the web against.

WordCamp St. Louis: It’s about time. It’s about type!

Mary Baum was one of the last sessions of the afternoon and was talking about typography on the web. Mary has a long history in design and typography and believes it’s about damn time we have full access to type on the web.

The web-type drought

Up to recently we have all be frustrated by the limited typographical options we’ve had for 15 long years. 5 choices is not enough, it’s time we had more.

Mary pinpoints the web-type drought ending on the day Paul Irish posted his work on @font-face in September of 2009. He saved us. 🙂

We came from a time of Times, Georgia, Verdana, Trebuchet, and Tahoma. Now we thankfully have tons of options with different typefaces. Embedded OpenType has been around since 2004 but it’s only till recently that type foundries have opened up licenses for use on the web.

Background with WordPress

Mary just got started with WordPress within the last year but in that time has put hundreds of hours into learning WordPress themes and just enough PHP to be dangerous. She got started with the Thematic framework but is now working with the Genesis framework but also uses Elegant themes for some sites.

Type options

Cufón, sIFR, Typekit, fonts.com, Google web fonts are all options that we have now for using typefaces in our sites. There’s plenty more but those are the ones Mary pointed to as worth using and, in some cases, paying for.

All those hosted solutions are good but Mary still prefers going the route of using your own fonts on your own server using @font-face. One thing to be careful of though is uploading the license information to your own server as well so that it’s clear you have the rights to use that font on the web.

When using @font-face you want to be careful to make sure you have a bulletproof CSS set up for your font. Fontspring posted an updated version of bulletproof CSS to use that will cover all the way back to IE6.

WordCamp St. Louis: The Anatomy of a Premium WordPress Theme

Brian Fegter gave a talk in the afternoon discussing WordPress premium themes. Brian runs Mister Nifty where he works with churches of all sizes on their tech needs.

He got started by covering the truth about commercial themes. As he says:

There is not one single theme that does not require support. You must build a support system

Brian also believes that software development needs to be for the customer. This is why support and documentation are so important. As he pointed out, a purchased theme rarely stays in its original condition.

Having a solid template architecture is also fundamental to creating a good premium theme. Brian pointed to the WordPress Codex for information on theme development and template hierarchy.

Brian set down a credo for properly developing a theme. He believed that you should:

  • follow template hierarchy patterns
  • clearly name supporting files and folders
  • never, never, ever, never, ever nest a plugin inside a theme
  • clarity over cleverness

WordPress assets are your friend when coding a theme. There’s a lot that is built in to WordPress which will let you easily enhance a commercial theme without a large code footprint. The main things discussed were:

  • clearly named sidebars
  • custom post types only when necessary
  • define theme locations for menus
  • localize your strings
  • set WP image sizes vs image resizing scripts
  • leverage the power of CSS with body_class() and post_class()

He also showed off some cool functionality in the UpThemes framework that’s available on Github. There’s lots of sweet stuff built in there for Google fonts and more.

In some ways code is narrative. Your theme tells a story and has an intended result. The back-end code should clearly narrate the story of the front-end display. All this helps because clean code leverages the brain to quickly identify and associate words with functions.

Functions though need to use prefixes and should only try to accomplish one thing. If any function includes things that can be spun out into a separate function then they should be spun out that way. For code comments with functions Brian says that:

If it’s necessary to comment about how a function works, your code stinketh.

It’s also a good idea to use built in functionality for things like browser detection and content filtering. This keeps you from having to add lots of server overhead and user frustration. In other words, we should be creating useful code, not duplicate code.

WordCamp St. Louis: WordPress for Writers and More

Shawntelle Madison gave a talk at WordCamp St. Louis titled “WordPress for Writers, Publishers, and other Content Providers.” Shawntelle is an urban fantasy writer with a new book coming out. She also works with design firms in St. Louis and has been working with WordPress for over 5 years.

With her book coming out Shawntelle has seen both sides of the coin with what publishers require from author websites.

WP in the publishing community

It’s a lot more prevalent than you first think. Shawntelle polled 47 authors from various genres and 85% were using WordPress. The user-friendly Dashboard, ease of theme changes, and flexibility with widgets and plugins were favorites.

They also like it because it’s far easier than coding a site from scratch. When your job is writing content you don’t want to be spending all the time coding and designing your site.

Branding

Shawntelle said that “branding is very important for authors.” The design is what readers first see and it should really fit with the genre of your writing.

A great example is Scott Westerfeld who has a site which fits his steampunk style writing quite well.

What’s common

Authors expect a few key features for almost every site. They like having things like:

  • Newsletter integration
  • The ability to add a backlist of books
  • Integration with social media
  • Other basics like ad management, contact forms, and a well-designed blog

Most authors Shawntelle works with already have had some experience with WordPress. They don’t want a complex front-end layout and prefer to keep things simple.

Determining who is responsible for site maintenance is key to any project you work with an author on. Many won’t keep the site updated so figuring out who will be responsible for that going forward is crucial.

Shawntelle also mentioned some of her favorite and most useful plugins from projects with authors.

Publishers

Out of the 6 big publishers 2 are running WordPress in their work.1 Random House and Hachette use WordPress to power parts of their imprint on the web.

For example, Random House uses WordPress to power their At Random site. There’s tons of reader guides, audio and video, as well as links to the books in the Random House catalog.

Data from the existing Random House catalog was used to power things like the New Releases slider and more on the site. They also link up to services like Goodreads, Shelfari, and LibraryThing.

  1. The big 6 are Macmillan, Random House, Penguin, Simon and Schuster, Hachette Books, and HarperCollins.

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.