I went to several sessions at WordCamp Albuquerque and took a lot of notes. Consider it a live blog of the events I attended.
Designing for WordPress
@alternatekev alternate.org
(Sorry, didn’t notice it was out of focus while it was on the phone)
In designing for WordPress, forget about the canvas.
WordPress designers design for front end users and also for the back end users. WordPress has content blocks, many types of content, sidebars, custom menus. Build in the ability for users on both sides to customize. Better to lean toward customization than controls. Think about how the things you design will be intereacted with by the user within the dashboard.
Need to know what features each content type has. Some content blocks can be sticky and stay at the top.
Need to know how different numbers of menu items will be needed, what type of plugins users want, what part of the template do I build and what does the user edit.
Theme structure: home page, blog river/posts page, single blog page, category listing, author bio page, post format templates, search results, search form, sidebar(s), post s archive, 404 page, basic page template.
Posts can have different formats. Chosing a different format for a post can change the way the post looks. So could have post format for products, videos, etc.
Can have featured images. It’s a module that you see next to Insert Into Post when you add an image. There’s a plug in that makes the first image in a post into a featured image.
Pages are a custom post type, can be ordered, can be hierarchical. Pages can have different templates. Page templates for empty pages can be tied to custom post types. Use Post Type Labels to create custom post types.
Child theming. Based on a parent theme of your choice. 2011, 2012 both built to accomodate child themes. Use a comment in the index.php page to link to the parent template. Kevin was unclear about how to do this. He showed us some code but the relevant line was missing. (I was confused about this, but got it cleared up later.) StudioPress.com has a theme framework called “Genesis” and you can use child themes with it to customize. Stay away from Thesis! Carringtontheme.com has good frameworks. _s is a theme that can be customized easily (made by Automattic). functions.php will always run in the parent theme first, but can be overridden in functions.php in the child theme. An advantage of child themes is when a theme automatically updates, changes in the child theme are not overwritten.
WordPress is Just the Beginning
Kimanzi Constable @KimanziC talesofwork.com
We all want to be heard. We all want people’s attention. There are 54 million WordPress websites and 3.1 billion people online every day. So how do you get heard among all that.
Why do you want to be heard? Fame? Money? Impact? Social media creates an open door but you need to think about the quality of your audience. How many comments do you get? How many retweets. Quality, not quantity.
Quotes Peter Drucker, “People buy with their hearts, not their minds.” Connect with people through your story, emotions.
Talked about Amanda Hawking, another person who hated her job and wanted to publish a book. She self-published using only social media sold 10,000 copies in the first month. She got some book reviewers to review her books and used social media.
When Kimanzi tried it he sold 3 copies in two months after spamming everyone he knew on Facebook and Twitter. He asked himself, “Why do I want to be heard?” He refocused on the message that helped people get out of jobs that they hated. He focused on helping people. To get traffic, he tried guest posting on larger blogs. That brought in traffic and created book sales. He blogged a lot on topics that people could relate to so the traffic that came subscribed and shared.
Do companies use story? He talked about how Apple uses story and emotion to connect with buyers. Use your story. I kept thinking about that very cute Nintendo DS ad with Penelope Cruz and her equally gorgeous sister playing some Mario game as a great story example.
Be honest. Be to the point. When you use social media to tweet a link to a blog post, tap into the emotion of the post. Click through rate increases when you throw in the story. When you connect, thank people and share.
Story. Lesson. Story. Lesson.
Make your about page tell your story. Then get them to opt in and subcribe.
Use your story to network.
High-Performance Front-End Development
Ben Byrne, Cornershop Creative
Speed. Page load time makes a huge difference in making people not like your site. Google takes page load time into account when figuring your page rank.
He will be talking about what gets delivered to the page.
Enemies are DNS lookups, HTTP connections, sequential loaading, bloated DOM, bloated CSS, Payload size.
DNS lookups. Every domain mentioned on your page needs to be resolved to an IP. If you have DNS lookups for scripts, assets, images, etc, each has to be looked up. Want to keep it to four or under. Includes anything loaded to your page – script, image, css, font, etc.
HTTP connections. Site will load faster if you reduce http connections.
Can use SASS to compress files. Plugin W3 Total Cache does that on WordPress. Plugin W3 Cache also does compression. This plugin will also combine and compress your JavaScript files. Manually put jQuery plugins into a single file.
CSS sprites put all your images into a single image. There are plugins that help with this. Ben did not list them.
Lazy-load defers images from loading right when the page loads. There’s jQuery “lazyload” for images. The image loads when the browser is scrolled to where the image is needed. There are attributes “defer” and “async” that can be used with script tags that put off loading the resources immediately.
Don’t use images when CSS can do the job: gradients, rounded corners, text and box shadows, rotation. May need some fallback content for older browsers if browser doesn’t understand CSS3.
Sequential loading. Somethings load in parallel and some things load in sequence. JS files are loaded in sequence and block others. The browser basically stops everything until the JS load is finished and the browser sees what it’s going to need to do.
JS should be at the bottom of the page whenever possible. CSS should be at the top of the page and loaded with <link> rather than @import. (Did you hear that, Adobe?)
A bloated DOM with all sorts of structural elements like nested divs can slow down page loads. There’s no magic number, just don’t have elements on a page that you aren’t really using.
Bloated CSS can slow you down. Long selectors can slow you down when a short selector might do. CSS parsers read from right to left so it loops through the DOM looking for every element named in a dependent selector for everything listed in the selector. Don’t use unnecessary stuff like div#main when #main is all you need.
Reduce total number of bits by using Minify CSS and CSS and HTML, write clean code, don’t scale images in the browser, use the right image filetype. You can blur in unimportant parts of JPGs to reduce the file size.
Good resource developer.yahoo.com/yslow
Chat Me Up! Using Social Media to Promote Your Blog
Lauren MacEwen SM Cubed Consulting
No slide deck – interesting. She’s just standing there talking, no script, no speakers notes.
Numbers and analytics can tell you how you are succeeding. How many people are coming to your blog, how long are they staying there. Google Analytics, Stat Counters, and others can tell you many things – often different things – about how well the blog is doing traffic wise.
What number is success? Look at your audience. How big is your audience? Maybe 100 visitors is a big chunk of your audience, maybe 500,000 is.
She likes Scribe SEO, a plugin that helps your blog with SEO. Some ad networks may help with SEO. She mentioned adSense, but I’ll bet BlogHer’s ad networks help with SEO as well.
She says Google+ is the best website to be on for promoting your site. If you post a link on Google+, you are instantly indexed. Results coming from Google+ are integrated into search results.
Make sure your blog posts are a minimum of 300 words. Google only recognizes a post as new content if it is over 300 words. Video with text helps with indexing for SEO.
AdSense has a free keyword tool. Gives you keywords for blog posts or your whole website.
Facebook and blogging is long tail marketing. Twitter is short tail marketing. Twitter is good for SEO, especially when using hashtags. She recommends putting things on Twitter multiple times a day. A tool like HootSuite lets you schedule tweets.
Using bit.ly lets you customize your links. Then you can see specifically which tweets are getting more hits. Put the link in the first 1/3 of a tweet to get more clicks. Twitter has the broadest audience. There’s a niche for everyone on Twitter. The more you tweet, the better your results are. The bigger your audience, the more you need to tweet.
Using third party apps to post to Facebook may mean your posts don’t get the attention on Facebook.
A Chat in the Happiness Bar
I stopped into the Happiness Bar and had a chat with one of the Happiness Engineers from Automattic. He explained that you mention the name of the template that is your parent theme in the CSS file for the child theme – thus clearing up something I misunderstood earlier in the day. He told me 2011 and 2012 both have responsive design built in, so I may want to update my theme to a child theme of one of those. Can’t imagine why – I’ve only been using Very Plain Text since 2001.
