My apologies to my readers for not posting this earlier. With Posterous closing down April 30, 2013, I moved this blog to my self-hosted WordPress site at Lireo Designs.
There are many older posts that didn't transfer correctly, and I'll be slowly updating the posts.
Thank you for reading this blog and for your comments over the past several years.
I loved using the Posterous platform; as one of the taglines said in the early days, "it was dead simple to use." I was excited when Twitter bought Posterous last year, thinking Posterous would get some wonderful new features. Then the sad news came that Twitter was closing Posterous down.
This week's roundup includes a tutorial on creating a grid of diamonds using CSS, a re-introduction of a user experience tool many have forgotten, notes from this weekend's WordCamp Vancouver, and many other resources.
For long-time readers, yes, I thought this blog would be moved to WordPress this weekend. I'm waiting for one more plugin to be sent to me before moving the 300+ posts. The plugins I'm using are beta versions, but have received good reviews from others who've used them to move their Posterous blogs.
My fingers are crossed I can move the blog before I leave for WordCamp Phoenix later this week.
- Who says the web is just for squares?: Cool use of CSS3, Modernizr, Sass and Compass to create a grid of diamonds.
- Typesetting Responsive CSS Columns: Tommi Kaikkonen uses this proof-of-concept page to explain how he created a responsive page with CSS columns. Easily modify the display by enableing/disabling options for columns, full justification and hyphenation.
- Build a basic responsive site with CSS: In this tutorial from net magazine, Jason Michael explains the principles behind responsive web design and points out that responsive design is not just mobile nor it is about just adding media queries.
- The harsh truth about HTML5's structural semantics (part 1): Luke Stevens, author of The Truth About HTML5, shares history about HTML5 structural elements as well as his concerns. If you haven't read the book, I suggest reading it. It's opened up a lot of discussion about HTML5.
- What are your favorite customer support sites and why?: Can you help? Michael Angeles of Konigi is doing a review of customer support sites and needs your help. He wants to know which sites you like for providing good search results, documentation, and tutorials.
- The Power of Faces in User Experience: From UX Matters, two case studies from National Geographic and Oxfam show the impact face images have on content and trustiworthiness of your site.
- Reintroducing Page Description Diagrams: One of my favorite tools for helping to prioritize features, without getting involved with the design issues of "can you make the button bigger?" Do you use page description diagrams?
- The Power of Sketches: How We Sold a Huge Project Shift with 5 Index Cards: Love this story from Nathan Curtis of EightShapes of their process with sketching that led to their developing The Guide to the Constitution application.
- University student perseveres in world with no sound, light: Touching story about 24-year-old university student Miyuki Ara and her life journey in the past two years, Ara, continues to take classses as she manages the loss of both sight and sound from a rare genetic disorder.
- Layout tables and repair techniques: Gez Lemon discusses how to use the ARIA presentation role to remove table semantics on pages designed using table layouts.
- The Harsh Truth about HTML5 (comment): Yes, I know I shared the same link above in the HTML5 section. But what I'm highlighting here is the thoughtful response about accessibility and semantics in the comments by Sina Bahram
- Using Videos—An Accessibility Angle: Graham Armfield (@coolfields) leads a discussion on Make WordPress Accessible promoting videos to help WordPress developers better understand accessibility issues faced by users.
- Claim Google Authorship for Your WordPress Website in Three Easy Steps: Did you know about Google Authorship? It connects your content with your Google+ profile and adds your photo to search engine results for content you've written. It's how Google identifies
the author of a piece of content to factor it as a signal of content quality.
- A Comprehensive Beginners Guide to the WordPress Loop: With references to the WordPress Codex, this post by Zac Gordon of Treehouse walks you through the WordPress loop explaining the logic, key functions, and sharing loop examples. Good beginners guide.
- 5 Things to Look for in 3.6: Revisions, Menus, Editorial Flow, More: John Saddington of WPDaily highlights five new features expected in the upcoming 3.6 version. Based on my consulting work with clients, I'm looking forward to improvements in the menu interface. Many clients just don't get how the menus work.
- WP-Mix: Jeff Starr, who co-wrote/manages Digging into WordPress book/website with Chris Coyier, launched his new WP-MIX website in December. It's a great resource site for code snippets, mini-tutorials, and more.
- WP Daily: Another great WordPress resource site, WP Daily launched in late 2012, publishing daily updates on plugins, WordPress news, and more. Led by John Saddington, it's an excellent resource for developers, designers, and bloggers who want to stay current on WordPress news.
What I Found Interesting
- January 7: The Pastry Box Project: Clearleft's Andy Budd shares his thoughts on clients, time and design projects in this quick read.
- Tumblr: David Karp's $800 Million Art Project: Are you a Tumblr fan? This is a long read from Forbes, but worth it to learn more about the 26-year-old founder of Tumblr.
As 2012 comes to a close, we’d like to take this opportunity look back at the past for inspiration. In the Bay Area, we’re lucky enough to be surrounded by brilliant people doing amazing things. But none of their achievements would be possible without the dedication and resourcefulness of those before them.
We at New Relic recognize that women have been consistent and frequent contributors to technical innovation. (And we’re doing our part to see this trend continues into the future.) So, our thanks to these and the many other women nerd superheroes. You’ve truly helped make the world a better place.
Love this infographic highlighting women nerds, the first in a series of infographics from New Relic. I know many people are familiar with the work of Grace Hopper and Anita Berg, but wonder how many know about the accomplishments of Janie Tsao and Radia Perlman.
Do you have a favorite women nerd?
At last night's Ann Arbor SPARK Marketing Roundtable, Chad Wiebesick, Director of Social Media and Interactive Marketing at Michigan Economic Development Corporation, shared social media and digital marketing insights from his work on the Pure Michigan campaign.
In discussing the success of the campaign, Chad highlighted awareness, consideration, and action in all marketing channels. Here are my notes from his talk:
Background on Pure Michigan
- The Pure Michigan brand was born six years ago.
- Currently spend about $25 million/year marketing Michigan, within state, nationally & internationally.
- Majority of budget is TV commercials, radio, print, billboards to generate awareness.
Map Your Marketing Communication Approach to Your Customers' Buying Process
- Once people understand what Michigan is, Pure Michigan drives people with their tagline: Your trip begins at puremichigan.org
- After people visit the Pure Michigan website, social media is used to further their consideration of traveling to Michigan.
- Search engine marketing is the call to action: it's an immediate and direct response.
- In the past month, Pure Michigan launched its largest winter ad campaign. One of the features is a YouTube video, a "Choose Your Own Adventure" style commercial that will only be seen on YouTube. At the end of the commercial, there are several activities you can choose to learn about, from ziplining, snowboarding, skiing, and more. <- Good technique for any business to use.
- All ads drive traffic to the Pure Michigan website.
- For fifh year in a row, Pure Michigan is the nation's most visited state tourism website
- 8.6 million web visits/year, 26,000 visits/day
- With 20% of website visitors on mobile devices, Pure Michigan began reviewing their corporate website, identifying what was needed.
- Mobile apps are great but you need a separate application for Android, BlackBerry, iPhone, etc.
- Had a mobile website in the past, but required separate code
- Decided to have a responsive website built
- Discovered WordPress could support all needs for their responsive website.
- New website launched last year. Displays well in all devices, whether a smartphone, tablet, desktop, or large 21" screen
- Since it's one website, you only need one set of code. Because it's one set of code, it helps with your search engine rankings.
- Align your social strategy with your business objective
- Pure Michigan's business objective is to promote Michigan as a majestic, mythical, and magical place to visit. And one of the ways they achieve that is by highlighting photographs of Michigan.
- Social media can be used to:
- Drive traffic to your website
- Manage customer service
- Generate business leads.
- Pure Michigan uses photos people have shared online. Excellent example of user-generated content.
- Their strongest social channel is Facebook, with 300-400 fans added daily. 470K fans as of Jan 2013
- Photos are posted regularly on Facebook: research has shown photos get more likes, shares, and comments. Posting photos gets more engagement.
- The Pure Michigan blog is the hub for their social channel.
- For any business, a blog is great for driving traffic and showing thought leadership. Pure Michigan uses Facebook and Twitter to share blog posts.
- Recommendation from Chad: blog about problems facing your customers and write blog posts that provide solutions to their problems.
- Want to boost your website traffic? Move your blog to your own domain. Advantages include:
- All traffic is driven to your website
- Easier to remember
- Easier to share
- The more active you are on social media, the higher your search visibility. And the higher your Google rankings.
- Paid search is one of the ten biggest sources of traffic for Pure Michigan. Effective and cheap way to drive traffic to your website. In addition, it's easy to measure.
- Google Sitelinks: help users to navigate your website. Additional way to drive traffic to your website. (Note: sitelinks are currently automated by Google.)
- Google Social Extensions: Allows people to like your Google+ page in the search ad without having to link off.
- New Google beta feature: Communication Extensions: allows people to subscribe directly to your newsletters through your Google Adwords search ad.
- If a user is already signed into their Google account, their email address is automatically populated in the subscribe form. All the user has to do is click the subscribe button.
- Using Communication Extensions, Pure Michigan has added several hundred new subscribers to their newsletter.
- Optimize your entire web presence.
- Think of how to optimize your social profiles, YouTube, Facebook, Twitter, etc.
- You want all your sites to show up in Google.
- For every dollar invested in the campaign, the state of Michigan gets $4.90 in tax revenue.
This week's roundup of resources includes an excellent collection of information design infographics, an explanation of how browsers interact with screen readers, an exciting new WordPress resource site for designers and developers, and many more. Let me know what you think of the resources in the comments.
Yes, as you can tell, the blog hasn't moved to WordPress. Yet. I spent five hours trying to import almost 300 posts and all the images associated with the posts into WordPress. It didn't work as planned. I'm expecting to find a solution this week. And I'll likely blog about the frustrations and the final solution.
- Cross Browser Compliant CSS Rule Generator: Given recent browser updates to support CSS features, Brad Dalton suggests you use Prefixr, an online app to quickly check your CSS code.
- Pseudo Element Animations/Transitions Bug Fixed in WebKit: If you've been annoyed with not being able to animate or use transitions on pseudo elements, be frustrated no more. The latest Google Chrome Canary finally has support. And if you're interested, Firefox has supported both for a while. IE 10 has support, but with a gotcha. Neither Safari nor Opera have support.
- HTML Validation Resources For Web Developers: A collection of HTML online validators, including several I didn't know about. I'm a longtime fan of the W3C validator; I was surprised the post didn't include Robert Nyman's HTML Validator extension for Chrome.
- A Look Into HTML5 Basic Elements: < header >, < nav > & < footer >: Third post in the series on HTML5 from Hongkiat, this post is a quick introduction to the three elements. I like that author Thoriz Firdaus refers to the HTML5 specification in describing the elements.
- A Year's Worth of Information Design [INFOGRAPHICS]: From Empathy Lab, an impressive collection of information design infographics created by their Experience Design team. My personal fave? "The Many Facets of UX Design."
- The Pursuit of Tappiness: Six Easy Ways to Make Your Website Tablet-Friendly: Make it easier for users to navigate your website and improve your conversions with these basic tips. Check the comments for additional suggestions.
- Stop Explaining UX and Start Doing UX: In her UX Magazine post, Kim Bieler argues for a different strategy for user professionals to gain respect and understanding for their work. We need to create opportunities to demonstrate our value, which in turn lead to more opportunities.
We need to have the conversation about value after we've proven that the UX process works, not before.
- Five Big UX Topics in 2012: The work of University of Michigan's Mark Newman, who I saw present at the 2011 World Usability Day event at Michigan State University, is highlighted in this post on expected user experience trends for 2013. Loved his mapping of the 2012 U.S. Presidential election data.
- Design Mobile First? Not necessarily…: Joseph Dickerson takes a contrarian approach with his comment that designing for mobile first may be a bad idea. Dickerson explains his reasons for his opinion, including that “mobile first” focuses too much on the platform, and not on solving user problems.
- Headings: Who needs 'em? Roger Hudson highlights the importance of meaningful headings in this story about meeting WCAG Level compliance.
- Understanding The Impact Of Usability And Accessibility On Your Conversion Rate: Without considering how the customer uses a website, a company's approach toward their website design can easily lead to frustrated customers and poor accessibility.
- How Browsers Interact with Screen Readers and Where ARIA Fits in the Mix: Given browsers have different accessibility APIs, programming accessible interactive components is challenging. Brian Garaventa recommends providing support for the most widely used screen readers and cautions developers to not program for specific assistive technology/browser combinations.
- WP-Mix: Jeff Starr, who co-wrote/manages Digging into WordPress book/website with Chris Coyier, launched his new WP-MIX website last month. Look for code snippets, mini-tutorials and more resources for web developers and designers. Initial look: another great WordPress resource site for you.
- How to Make a Site Private in WordPress Multisite: Using the More Privacy Options plugin, you can easily add three more privacy options for multisite blogs:
- visible to anyone logged in (Network users only)
- registered users (blog members only)
- visible only to administrators (Admins only).
- Learning How to Contribute to WordPress: Getting Started: Aimed at developers, Japh Thomson shares his tips on how you can get involved with contributing to WordPress core.
- Imposing SSL and Other Tips for Impenetrable WP Security: This tutorial from WP Tuts shares 10 tips for improving security and protecting your site against intructions, breaches, and threats.
- Jetpack Moves to 2.1, Big Bug Fix Release, Tiled Galleries: The newest version of JetPack is out, with a long list of bug fixes and enhancements. Glad to have the bug fixes, but what impressed me most was the cool new tiled gallery feature and custom CSS option for zoom. Thanks John Saddington for sharing the tip for content not expanding to full content-width.
What I Found Interesting
- PowWow: Only for the Mac, PowWow is an application that allows you to screen share and work within any application with your coworkers. Simultaneously interact with the same application by having multiple mouse pointers for each user. Needs to be installed locally on every machine.
- Fun on the International Space Station as Commander Chris Hadfield tweets from space.
@wilw Wesley, we've talked about you being on the bridge. I believe you're needed in Engineering. :)— Chris Hadfield (@Cmdr_Hadfield) January 5, 2013
- 5 Tips for Responsive Builds: From suggestions for text-sizing to pattern libraries and more, front-end developer David Bushell shares some quick tips for managing responsive builds.
One of my favorite ways to celebrate the new year is a walk through the quiet woods. It's peaceful and easy to clear my mind and enjoy time with my family.
The year has gone by quickly, with many changes in my work and life. In February I completed my special project work at DTE Energy, attended WordCamp Phoenix, and accepted a job offer to return to Washtenaw Community College as a web developer. Here's a recap of my favorite events and activities:
A warm spell the first week of the year surprised me with blooming snowdrops in my front courtyard. What a surprise! Where I live, snowdrops typically bloom in late February/early March.
February 2012I was fortunate to be one of the more than 200 people attending the first World IA Day Ann Arbor at the University of Michigan, honoring the 14th anniversary of the publication of the "polar bear book" Information Architecture for the World Wide Web, written by Lou Rosenfeld and Peter Morville.
March 2012As I bicycled the White Pine Trail in northern Michigan, I glanced along the trail and saw these skunk cabbage popping through the shallow water.
May 2012It was a beautiful day to attend the 2012 Washtenaw Community College Commencement ceremony celebrating 3,000 graduates.
June 2012The Classic Car show at the annual Canton Liberty Fest never fails to impress me. The interior in this Mercury was amazing; first time I've seen a Mercury god logo on the upholstery.
July 2012Stunning. Only one word can describe my view of the sunset at East Bay Park in Bay Harbor, Michigan.
August 2012Watching the Western & Southern Cincinnati US Open Series tournament is one of my favorite summertime treats. Nothing can beat seeing Roger Federer, Venus Williams, and Serena Williams on the court.
September 2012For the second time this year, I was happy to have a nationally known web professional accept my invitation to speak to our Refresh Detroit group. In September, Brad Colbow, Cleveland-based designer and creator of "The Brads" comic strip, spoke about designing interfaces for mobile devices.
October 2012For two years in a row, I joined several other local WordPress professionals to organize WordCamp Detroit. This year's WordCamp was a one-day, two-track event that attracted local bloggers, developers, and business people. My higher education colleague Curtiss Grymala, shown in this photo, gave an excellent presentation on WordPress Multisite.
November 2012While many people in southeast Michigan enjoyed the unexpected sixty-degree weather on Thanksgiving with a walk and pickup games of football, I enjoyed picking fresh cilantro from my garden.
December 2012For our holiday vacation, our family took a week-long vacation in Florida before Christmas and enjoyed warm weather as well as Disney World, Daytona Beach, and Winter Park. I was surprised how friendly the birds were, including this white ibis.
My last post for 2012 highlights Flexbox, the new CSS3 layout mode, useful HTML5 tools, top user experience trends for 2012, a simple online goal tracking application and more. Hope you find the resources useful!
This is one of my last posts on Posterous. With the new feature released this week to download posts and the lack of any new development on Posterous, I'll be moving all the posts on this site to WordPress. I'll share the new location once the move is complete.
Thank you for your readership over the years. See you in 2013!
- Dive Into Flexbox: Flexbox is a new CSS3 layout mode that finally reached W3C Candidate Recommendation status last September. Now's the time to learn what it's about and how you can use it in your projects.
- Four Custom Icon Font Generators Compared: Joshua Johnson of DesignShack reviews Fontello, IcoMoon, Pictonic, and Pictos font generators based on cost, downloading, selecting icons, and ease of use. Are you using a font generator? Which one do you prefer?
- Getting to Know CSS3 Selectors: Other Pseudo-Classes: Excellent walkthrough by Emily Lewis of the CSS3 pseudo-classes: :disabled, :enabled, :checked, :target and :not(x). Emily reviews the syntax, shares markup using the pseudo-classes, and explains why you want to add pseudo-classes to your CSS toolbox.
- Simple Tools for Front-End Developers: Louis Lazarus of Impressive Webs has gathered a great list of tools including a CSS menu maker, image to CSS converter (but watch out for the generated code), and the best of all, The Toolbox, a collection of apps, tools, and code generators.
- How To Deal With Vendor Prefixes: Using the correct vendor prefix can be problematic—how do you make sure you're using the correct prefix? Chris Coyier shares his tips, apps/tools recommendations, and advice.
- 6 Useful HTML5 Tools: Need help understanding HTML5 or want to know how to create an HTML5 website? Check out this collection of tools, compiled by Sonia Jackson of Sitepoint.
- Design is not veneer.: Aral Balkan, well-known experience designer and developer, responds to Anna Powell-Smith's How to Make Your Site Look Half-Decent in Half an Hour post on 24ways. Aral argues there are no shortcuts in design. Every element added to a design, whether by designer or a developer, should have a purpose.
Design is as much about asking the right questions as it is about answering them. It is about worrying about the right thing: solving your user's problems not your own problems.
- The Top 5 Website UX Trends of 2012: UX Magazine highlights the top five user experience techniques of 2012. The one I really like? Sticky top navigation. I'm wondering what took us so long to figure out that users like persistant navigation.
- 6 Mind-Blowing Things I Learned about UX in 2012: From Jenna Curry of A Better User Experience, check out this post of what she learned as a newcomer to user experience. Wonderful to read her comments about the UX community, how supportive we are in sharing information and knowledge with each other.
- Enlightened Key: I've been a fan of Vishal Mehta's blog for a while. Loved his post this week about a "key with a unique usability element" that changes an everyday action into a pleasurable user experience.
- Santa Claus Uses Sign Language with Boy, Makes Family's Christmas Special: What a lovely story. A hearing-disabled boy visits Santa Claus at the mall and Santa uses sign language to talk with him.
- IDEAL Accessibility Installer: Downlaod this free Google play application to install current versions of Google's Android accessibility applications, including TalkBack, KickBack, and SoundBack.
- One Accomplishment, One Resolution: Terrill Thompson, who works at University of Washington AccessComputing, talks about the impact of the IT Accessibility: What Campus Leaders Have to Say video and encourages higher education professionals to start discussions about IT accessibility on their campus in 2013.
- Schedule for CSUN 2013 Conference: The preliminary schedule for the Annual International Technology & Persons with Disabilities Conference (February 27 to March 1, 2013) has been posted.
- W3 Total Cache – Beware The Surprise In This Christmas Gift: If you haven't heard, a serious issue was reported earlier this week in the popular W3 Total Cache plugin. Lots of advice and recommendations have been posted. Today, the developer posted a new version that fixes the issue. If you're using W3 Total Cache, update immediately to version 0.9.2.5. The developer recommends you empty the database cache after performing the update if you use database caching to disk.
- How to Add Google+ Hangouts Event Countdown in WordPress: Google+ Hangouts are an excellent way to connect with your blog readers or give a tutorial. WPBeginner shows you how to set up a Google+ Hangout event countdown on your site.
- Happy Holiday Sale: Get 30% off all WordPress products from WooThemes until December 31, 2012 with discount code "JOLLYGOOD." Note: the discount is not valid on their theme club memberships.
- 35% Off Site-Wide Through Dec. 31, 2012: Hey, if 30% off from WooThemes didn't entice you, get 35% off WordPress themes, plugins and training from iThemes. Note: the coupon code is good through 11:59CST on December 31, 2012.
- Using Conditional Tags In WordPress: Brad Dalton of wp sites walks you through how to add conditional tags to your custom function and shares example code.
- Using bbPress as a Support Forum: Excellent tutorial form Pippin Williamson on how to create a support forum using bbPress. At the end of the post, Pippin shares several additional plugins that extend the forum to include ability for moderators to leave notes for each other, track read/unread topics, and allow users to quote other users in replies.
What I Found Interesting
- Joe's Goals: A simple online application to track your goals. What I liked: it's not fancy. Simple interface, easy to use.
- My Hard Drive Crashed... (And What I Learned From It): Ben Gremillion tells the story of his Mac hard drive crash and subsequent loss of application preferences, bookmarks, browser history, plugins. And then Ben walks us through finding out which backup service worked best on his own test machine. Ben chose two online services, BackBlaze and CrashPlan and shares his experiences with setup, backup and recovery. Note: I'm a BackBlaze user and love it!
- The Social Media Cheat Sheet for Business: Interesting infographic comparing nine social media channels by time commitmen, quality and fun. What I found useful are the tips and review of the infographic by Oli Gardner for each social media channel.
One of my favorite applications, Buffer has several cool features for social media sharing that I had not heard of. Late Christmas present!
Our trip to Florida brought with it a return to blooming flowers, something we won't see in Michigan for a few months. One of my favorites is the Bird of Paradise, Strelitzia reginae, that I saw blooming on my early morning walk.