blogging Archives - Page 6 of 24

Useful links: Adaptive content, troubleshoot WordPress, design principles

Notes from Karen McCrane’s talk about Adaptive Web Content at the latest An Event Apart. Luke Wroblewski took excellent notes.

Interesting tips for troubleshooting a WordPress site from Kristarella.

Design Principles for gov.uk. Unlike WCAG or some set of principles from the W3C, this document only contains 10 easily readable principles. They are,

Start with needs*
Do less
Design with data
Do the hard work to make it simple
Iterate. Then iterate again.
Build for inclusion
Understand context
Build digital services, not websites
Be consistent, not uniform
Make things open: it makes things better

Useful links: Sexism, Job Hunting, Color Contrast, Blog Takedown

A Primer on Sexism in the Tech Industry at .net magazine is by Faruk Ateş. For quite some time, I’ve been impressed with the quality of content appearing at .net magazine. I’ve linked to quite a few articles here. So here’s a belated +1 to .net magazine for being such a great resource.

How do you look for a job in an industry known for biases against women? is an informative post for women looking for work.

Here’s a wonderful addition to color contrast testing tools. Lea Verou created a contrast checker that she describes in Easy Color Contrast Ratios. Here is what this innovative tool can do:

Accepts any CSS color the browser does, not just hex colors. To do this, it defers parsing of the color to the browser, and queries the computed style, which is always rgb() or rgba() with 0-255 ranges which be parsed much more easily than the multitude of different formats than modern browsers accept (and the even more that are coming in the future).

Updates as you type, when what you’ve typed can be parsed as a valid CSS color.

Accepts semi transparent colors. For semi-transparent backgrounds, the contrast ratio is presented with an error margin, since it can vary depending on the backdrop. In that case, the result circle will not have a solid background, but a visualization of the different possible results and their likelihood (see screenshot).

You can share your results by sharing the URL. The URL hashes have a reasonable structure of the form #foreground-on-background, e.g. #black-on-yellow so you can even adjust the URL as a form of input.

You can adjust the color by incrementing or decrementing its components with the keyboard arrow keys until you get the contrast right. This is achieved by including my Incrementable library.

You’ll find a link to the new contrast checker on Lea’s site (it’s currently on github). I think it deserves a URL of its own, don’t you?

This is one of those “I can’t believe they did that” stories. Textbook Publisher Pearson Takes Down 1.5 Million Teacher And Student Blogs With A Single DMCA Notice. That’s Pearson as in Visual Quickstart Guides and a bunch more books you probably own. Pearson that I’ve worked for several times as a writer or tech editor. I hope something in this situation changes soon.

Feedburner API will be history soon. Are you ready?

If you’ve been using Feedburner to track stats, subscribers and send email to your blog’s readers, it’s time to look for an alternative. On October 20, Feedburner will end its run. Or, to put it in Google terms, Feedburner’s API will be deprecated. That API is what allows you to interact with Feedburner stats and other info. Here’s a rundown of your alternatives.

Screen capture from Feedburner

Google owns Feedburner. What Google wants you to do is move your feeds into the Google world using their migration tool, which you see in the image above. Since this change was announced months ago, many people have already chosen to do that. If, like me, you’ve dilly dallied about this, now is the time to pay attention.

There are other choices. On Beth’s Blog in Is it Time to Let Feedburner Burn? you can learn how to switch to a service called FeedBlitz. Beth’s Blog walks you through the steps and FeedBlitz provides a detailed Migration Guide.

FeedBlitz will give you the RSS services and the email services you had with Feedburner. One issue, however, is that readers must have an account with FeedBlitz to get your blog post by email. Depending on your demographic, this could be a barrier.

At MomCrunch, Cecily Kellog mentions some of the alternatives in Feedburner Feeds Vanish. (She urges you to download an Excel document of all your subscribers from Feedburner to have on hand. Probably a good idea, just in case you have migration issues.) Cecily mentions these other options,

But if you don’t want to pay for it, there are alternatives. Jetpack (a WordPress Plugin) offers a free email subscription service. You can also use companies like AWeber, MailChimp, and more. Google for other free options (I think they are sticking with the search business, at least).

If you’re using WordPress, you probably have Jetpack installed already. WordPress recommends it. The directions for using Jetpack for Email subscriptions are simple. Basically all you have to do is pull the Blog Subscriptions (Jetpack) widget into your sidebar.

I’ve seen several bloggers mention MailChimp as their choice for the email subscribers because of the MailChimp RSS to Email service. In fact, it was Brenda’s comment on this blog that alerted me to the RSS to email service by MailChimp. Depending on your volume, MailChimp can be free.

FeedBlitz, MailChimp, and AWeber have integrated Twitter and Facebook services for your blog posts in addition to the RSS and email subscription services.

Notify your readers about what you’re doing. Here’s how Schmutzie did it.. I did a similar thing here in What feed are you using to read Web Teacher? That post contains several comments you may find helpful in looking for an alternative.

Bottom line, if you’re still depending on Feedburner, now is the time to decide on what will work for you and make the switch.

Editor’s Note: Cross-posted on blogher.com in a slightly different form.

How to Put a Sidebar on a WordPress Twenty Eleven Page Like This One – UPDATED

I just changed the theme on this self-hosted WordPress blog. So – no big deal, it’s as easy as pressing a button, right? Not exactly. Not if you want to modify the theme. Not if you are in the BlogHer Ad Network and need an ad in a sidebar on both the main blog page, single blog post pages and site pages.

There’s the required ad in my sidebar.

Here’s how I got that sidebar on every page. I started with the most basic theme you can get at wordpress.org: twentyeleven. There’s a newer one called twentytwelve, too. I chose this theme for several reasons.

It comes from WordPress, made by WordPress, so I know I can trust it.
It’s free.
It has lots of bells and whistles, and it’s a responsive design. (See Should Your Blog Use Responsive Design?)
It has a very simple and clean look, which I like.

The twentytwelve theme has lots of bells and whistles, too. It is a mobile first design. (See The Mobile First Craze.) I didn’t think I needed to go that far, so I stuck with twentyeleven.

The only drawback to this theme is that the single post pages (called Single in WordPress) and the individual pages (called Pages in WordPress) did not have sidebars. No sidebar, no ad space, which means I couldn’t comply with the BlogHer Ad Network requirements for running their ads.

I had to modify single.php and page.php to add the sidebar. And I had to modify functions.php. I’ll take you step by step through the process. You can do some of this in the WordPress admin area. I also used a text editor and an FTP tool.

Step 1: Install the Theme and Create a Child Theme

Use the blog admin area where you choose a theme to get twentyeleven ready to go. Or you can download twentyeleven from WordPress and add it to your site themes directory using FTP.

Here’s the thing. You have to have twentyeleven on your server, but you are not going to switch to that theme. You are going to use a child theme.

Making a child theme is actually easier than it sounds. You add another folder to your site’s theme’s folder. I did this using FTP, but you can use your site host’s control panels to add folders, too. Just make sure it’s in the themes folder and at the same level as the twentyeleven folder.

Nothing goes into the child folder, which I named twentyeleven-child, except a style.css file and a functions.php file. I started with blank files that I made by saving text documents with those two names.

Here’s the structure you need to see on your server, according to the WordPress Codex.

site_root (www)
- wp-content
  - themes (directory where all themes are)
    - twentyeleven (directory of parent theme, Twenty Eleven)
    - twentyeleven-child (directory of child theme; can be named anything)
      - style.css (required file in a child theme; must be named style.css)
      - function.php (not required in a child theme, but needed to modify the pages to add the sidebars)

Once this child folder is in your themes folder, you will see the child theme as a option in the WordPress Appearance > Themes area where you choose a theme. Let’s do a couple of things to the CSS file before we choose it as the theme, though.

What Goes in the CSS File?

In the style.css file in the child theme, you start out with this:

/*
Theme Name:     Twenty Eleven Child
Description:    Child theme for the Twenty Eleven theme 
Author:         your name
Template:       twentyeleven
*/

@import url("../twentyeleven/style.css");

Upload this into the child theme folder.

When you use a child theme, the browser uses any modification you put into the style.css file, but it also looks up to the imported stylesheet for everything you don’t modify. So when you pick this child theme as your theme, the css file tells the browser what the parent theme is and where the parent style sheet is.

Okay. Now you can push the button in the WordPress theme admin area to choose the child theme. Take a minute and go look at your blog with this new theme.

You could do nothing more than this and your child theme would work. It would be exactly like the parent theme, so you probably want to create a few style rules of your own in the child theme that will overrule the rules in the parent theme.

Just as an example, I didn’t like the looks of the h3 tags in the parent theme. They were too small, there was too much white space around them, they weren’t in bold, and they were all caps. So I figured out which rule I wanted to change and added this to the child style sheet:

.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-weight:bold;
	line-height: 1.6em;
	text-transform: none;
}

This takes precedence over the rule in the parent theme CSS file, so now I have h3 headings that I like better.

Step Two: Modify single.php and page.php

You need to add the sidebar to pages and single blog posts. You open single.php and page.php in a text editor and upload the changes by FTP. You are going to modify these pages in the parent theme folder, not add anything to the child theme folder.

Open single.php in the text editor. At the very end of the page add

<?php get_sidebar(); ?>

It should be immediately before this line:

<?php get_footer(); ?>

Do the same thing to page.php. Save them both and upload them to the server – back into the parent theme where they came from.

Step Three: Modify functions.php

Now we come to the functions.php file. I found these directions at Twenty Eleven – Sidebar on Single Posts and Pages and they worked perfectly.

Add the following code to the up-till-now blank functions.php file in the child theme folder. Don’t do anything to the functions.php file in the parent theme.

I have no idea what this php is doing, but I can copy and paste like a champ. The author of the code says it will, “Suppress the .singular body_class from the single post or page,” so the sidebar can be added.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('singular');
// Filter the body classes
  foreach( $blacklist as $val ) {
    if (!in_array($val, $wp_classes)) : continue;
    else:
      foreach($wp_classes as $key => $value) {
      if ($value == $val) unset($wp_classes[$key]);
      }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}

Now that you have something in your functions.php file, upload it into the child theme folder again.

Anything you put into your sidebar via widgets should now appear on every page of your blog.

An Alternative

After I had done all this, I discovered Extend WordPress Twenty Eleven Theme to Include Sidebars and More Flexible Options that uses an extension to do all this and more. Sound easier? You might give it a try first. One drawback – it won’t work using a child theme. WordPress recommends that modifications to a theme be done with a child theme. But, if easier is better in your world, you might choose to ignore the recommendation to use a child theme and go with the extension. It gives you choices in the WordPress Admin area that let you select options to add sidebars.

[Editor’s Note: Cross posted on BlogHer in slightly different form.]

UPDATE: 1/25/2013.

Since writing this post I discovered a much simpler way of insuring that the sidebar appears on each single page you might want. The theme itself provides a sidebar template, which you can find in the page attributes section of the dashboard while you are editing the page.

Select the sidebar template for the page and you are good to go.

Useful Links: ySlow, WordPress headers, mobile form validation

Getting Started with YSlow is at Speed Awareness Month.

Creating a responsive header in WordPress 3.4 at Web Designer Depot uses a bit of jQuery to insert a responsive image into a WordPress header.

Steven Hoober makes a case for form validation on blur for mobile devices in Mobile Inline Form Validation.

Live Blogging What I Learned at WordCamp Albuquerque

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.

Making a App: One Game Maker’s Success Story

Naomi Kobuko was an experienced business woman. She and her husband were running a game development company called LavaMind. He did the games, she took care of the business side. That is, until she decided she wanted to make a game, too. She knew nothing about how to do it. This is the story of how she learned.

Image courtesy Naomi Kobuko

Naomi explains how she got started learning what she needed to know:

“I didn’t even know how APIs really worked,” said Naomi. “I used to blank out when anyone talked tech to me. I’d worked in the game business, but I was never one to code.”

“The thing that helped me the most was the community. I stumbled upon the computer language Lua and joined the Corona Labs community. As soon as I plugged into the forums, I felt connected, and I began to suck up knowledge. Whenever I got stuck, someone always posted something that helped me get over the hurdles.”

About a year later, Naomi completed her first game and is now the one helping newbie coders. Her game is called Beetle Bounce.

Image courtesy of LavaMind.

More than just a finished game that works on iOS and Android, it was a Top Game Pick on Nook and she was getting offers of marketing money backing.

I was fascinated by Naomi’s story of how she learned with the help of a supportive community and wanted to know more about her background. She answered a few questions for me.

Q: Can you explain your background?

A: I’ve actually had a varied career. I grew up in a small farming village in Japan. My father was a Christian pastor, which is quite unusual in Northern Japan.

I went to college in Tokyo at ICU (International Christian University). When I graduated, I worked as a financial analyst for
Morgan Stanley. Then I moved to the United States to be with my husband, and I worked in real estate.

Real estate wasn’t my thing, so I began translating for TV and film productions, and I wound up coordinating international film productions. That was a blast. I also worked translating manga (Japanese comic books) into English. I’ve translated some volumes from popular series, including “Naruto” and the “The Ring”.

Around the same time, I partnered with my husband to form LavaMind. My husband did all the coding on our first games, while I did the graphics, sound and helped manage the business. Our first game was Gazillionaire, and it was successful. So we did two more business simulation games: one called Zapitalism, and another called Profitania. These are very popular for teaching kids and adults entrepreneurship and money management. After this I worked for several startups doing business and finance.

After this, I wanted to work from home again, but I couldn’t justify hiring an engineer. It’s so expensive in San Francisco and games are risky business, so I began to teach myself to code. After a year of hard work, I’d completed Beetle Bounce.

Q: What age group is Beetle Bounce for and what’s it about?

A: I designed a game that I wanted to play myself, so I’d say it’s primarily for women (and men) who like casual games, like Peggle, Zuma, and Tetris. That said, it seems to appeal to everyone. It’s easy to play and action-packed, so even kids get into it. Girls love it!

Q: It sounds like you did this single-handedly with just help from the online forums at Corona Labs. That’s amazing to me. Are you planning to do your second game the same way?

A: Yes, I did it all myself. I like the freedom of working for myself and not being reliant on anyone else. It’s completely liberating. I had so many jobs where I had to be in an office and rush around to meetings, which is difficult when you have two boys. I really enjoy working for myself at my own pace. I also love the freedom to create whatever I feel like making. I plan to continue creating new, original games as long as my brain is still sharp!

Q: Do you blog somewhere?

A: Yes, I actually run a blog called Founders Space. It’s quite popular with startups and small businesses. That’s my main blog. LavaMind is on Twitter, too, @lavamind.

More Resources for Making a Game Yourself

Other moms who have a great idea for a game but need help with learning how to make it a reality may want to check out the community forums at Corona Labs that helped Naomi so much.

The community at Moms with Apps is also very helpful. Recently Moms with Apps published Resources for Beginning Programmers. They asked,

If you want to build an app from the ground up, and you aren’t a computer programmer, where do you start?

The resources suggested by that community are listed in the article, with Corona among other helpful sites named by mom app developers.

For someone with an idea and an interest, making a popular game that can be sold in the mobile marketplace is definitely possible. Naomi Kobuko did it, and you can, too.

[Note: Cross-posted at BlogHer.]