Chrisdigital's Blog

Tech Notes, Code Tips, And Musings By Chris Carvey, NYC UI/UX Director

Powered by Genesis

You are here: Home / Archives for Chrisdigital

SASS + Codekit + WordPress Theming

August 8, 2013 By Chrisdigital Leave a Comment

SASS + Codekit + WordPress Theming: reverie-and-sassRecently I decided to revisit my interest in using SASS as a component of my WordPress theme development skillset. I began this process by looking around at my WordPress starter theme options that utilized a CSS preprocessor as part of its workflow. I briefly considered using Bones before eventually settling on Reverie (which is actually a Framework not a starter theme.) I have a specific use case in mind for the themes I’m building and I concluded Reverie stood out for its simplicity and would play nice with Gravity Forms and mobile templates after some rudimentary testing.

What’s All This Sass About?

Well, SASS is a CSS metalanguage that extends on CSS3 standards by adding sweet features like mixins, variables, includes and the like. There are a lot of benefits to using it with a CSS preprocessor or CSS framework (like Compass) that mainly have to do with trying to apply OOP (Object-Oriented Programming) principles to your theme code and leveraging reusable CSS variables throughout your projects. Here are three posts that go in-depth on the topic:

A. What is a difference in CSS frameworks vs preprocessors?

B. Cross-Platform Sass and Compass in WordPress

C. Getting Started With Codekit + CSS Preprocessors (Post includes a video.)

D. Syntactically Awesome Stylesheets: Using Compass In Sass

Designers love Sass and CompassWhat is also cool, is the emergence of GUI tools like CodeKit to help make this a real viable workflow for developers and designers alike. Having worked a bit with SASS during my stint at E9 Digital I was eager to exercise these muscles again and after some hiccups with Mac OS / Mountain Lion / RUBY configuration I was well on my way. I threw this post together to help those also starting down this road.

Getting Started

This post is a bit Mac OS-centric (Mountain Lion specifically) but nevertheless developers that use other operating systems should be able to figure this out using the information provided below. Here’s a list of steps and resources that helped me get up and running:

Step 1. You’ll need to fire up Mac OS X’s native Apache server local environment or use something like MAMP that is independent of the OS.

Step 2. Download WordPress and Download Reverie (which is based on ZURB’s Foundation.)

Foundation-responsiveStep 3. Make sure your development environment is up to date and/or install a “fresh” Ruby build and all the necessary gems and Compass.

A. Sass / Compass / Foundation / Mac Setup (Video)
This video covers some nuances of Codekit setup not covered elsewhere… (like switching the version of Compass you’re using to compile your code.)

B. Foundation Developer Documentation

C. Installing Compass

D. How to Install Xcode, Homebrew, Git, RVM, Ruby & Rails on Snow Leopard, Lion, and Mountain Lion

E. Ruby on Rails development with Mac OS X Mountain Lion

And Now For The Tricky Part

You may need to tweak Codekit settings to get your configuration just right.As you may have noticed, all the tutorials above focus on various pieces of the puzzle but don’t quite pull everything together in context. This can cause some confusion, that is now compounded by the fact that Compass, Foundation, CodeKit, and Reverie can be used independent of each other (or standalone if you prefer that phrase) where in the past some of these components were more tightly integrated and packaged together. Needless to say, it takes some patience and “massaging” to get this right especially if you’re working with pre-existing code or a theme like Reverie.

As I alluded to above, you may have to dig into CodeKit preferences to change preset folder names as I did. I made the mistake initially of trying to conform to the naming standards Compass wanted, but realized Reverie’s directory naming structure was engrained in the template code to a degree that made me change course. You might find this easier or less of an issue with other themes, but this tripped me up for a few minutes.

Sassy Starter

For example of a simple starter theme, you might want to check out “Sassy_S” which is the popular “_S” aka “Underscores” starter theme refactored into SASS partials.)

I hope this helps you fast track your efforts.

Speak Up

Have any tips to share? or any experiences with this workflow? Please share them in the comments.

Read more on ChrisDigital’s Digital Designer Blog:

1. Customizing the WordPress Admin : WPNYC Meetup Recap

2. My WordCamp NYC 2012 Recap : 800 WordPress fans assemble

3. Responsive Design: WordPress NYC Meetup Recap

Filed Under: WordPress Tagged With: CodeKit, customizing WordPress themes, Foundation, SASS

Customizing the WordPress Admin : WPNYC Meetup Recap

February 22, 2013 By Chrisdigital 3 Comments

Presentation screen : Tailoring the WordPress Admin for Clients and WorkflowsLast Tuesday, on a drizzly February night, several scores of intrepid WordPress fans came out to the latest WordPress NYC meetup, “Customizing the WordPress Admin” hosted at New Work City. I have been rather busy in recent months and I found this latest subject rather serendipitous. Why you ask?… well, you may recall that last Summer’s WordCamp New York Meetup was jam-packed with good information and as an attendee, I couldn’t experience all of it. Needless to say, choosing which seminars to attend seemed like a series of terrible sacrifices. But, I was happy to learn that Helen Hou-Sandí (Director of User Interface Engineering at 10up) was doing a reprise of her talk that I missed last June on customizing the WordPress administrator’s control panel for our group. As a sweetener, Boštjan Špetič of Zemanta walked us through a very new and hip way you can find and assess WordPress plugins.

OMG 23,000+ Plugins! What Do I Use?

Boštjan Špetič walks us through his RankWP site which features WordPress plugin search engineThe first presenter at the meetup was what I consider a bonus treat. Boštjan Špetič (CEO of Zemanta) gave us a peek at his freshly launched side project RankWP.com. He, like most people, can be easily frustrated with the WordPress.org plugin directory index and sought to re-think it completely as an experiment. So he “scraped” that entire section of WordPress.org and built a functioning demo of how he imagined it working. Thus, RankWP.com was born. To be honest, it’s pretty freakin’ cool. So much so, I thought it stunned most of the attendees as he detailed the work he put into it. RankWP.com should become an essential tool for how we all decide which plugins to use with our personal WordPress installs in the future for reasons that are self-evident; it’s much easier to find contextual and relevant results for items you’re looking for over the WordPress.org Plugin Index.

A look at Rank WP's homepageIn response, the crowd gave some great constructive feedback and I am very excited about where the project will go in the future. The crowd wanted to see the compatibility with the current version of WordPress and when the plugin was last updated in search results, among other comments. This is certainly a good supplement to my usual googling for “top” or “best” plugin lists for a required feature if I’m not interested in building it myself.

Oh, Man This Should Be Good

As most of you know, that tune in for these recap posts- I write these recaps as exercises to clean up my notes and help some of the information I have learned “stick.” This meetup’s main topic was especially relevant to me since I’ve primarily been using WordPress as a content management system for my clients for the last several months. I’ve utilized a series of plugins and self-learned tricks to integrate jQuery UI and home-brewed enhancements to the admin interface to make data entry easier and less confusing for my clients. I was very interested to learn and hear what more experienced developers were doing on this front. Since Helen Hou-Sandí is a WordPress core committer and was leading the charge on Post Formats UI and WordPress CSS standards, I was fortunate to slide into the event last minute to learn from a seasoned pro.

I’m Not Worthy

Helen Hou-Sandí speaks to 100+ assembled at WPNYC meetup re: Customizing the WordPress AdminThis presentation did not disappoint, because some of the things Helen covered I would probably not have thought up myself…. How about a tweak that doesn’t break the “featured image” association with a post until you actually want to update the post? OK, how about a page layout preview / “staging” engine entirely built in .js (Javascript) before your client hits publish? Setting up a staging environment for WordPress is a famously “hairy” and painful proposition with many approaches. This is an investment of time and resources most clients don’t even have the imagination for. But, making edits to a “live” site is not ideal and I ran across Ramp doing my own research on the topic. Which was an option Helen mentioned as an up-and-coming alternative that everyone has said good things about, but I personally have no experience with. I can see how and why she “baked” her own solution to a vexing problem, which was pretty awesome to see in action. The other very cool thing I can mention were the project scheduling & assignment screens she showed that were built on top of a feed from Basecamp and custom taxonomies. That was pretty sweet.

Customizing Post type Icons with CSS SpritesI won’t mention all the examples Helen illustrated because I’m not sure it’s appropriate (some of it was advanced client-related work), so please reference her slides. But by far her most relatable admin hack was simplifying and smoothing out media content uploads pre- version 3.4. Several months back (before 3.4) there were a lot of UI frustrations with the WordPress image uploader, so she got it there and streamlined the process for her clients. She warned that a lot of techniques covered like this one were for pre- 3.4/3.5 but they are still relevant depending on how custom an experience you’re trying to build. This was a pretty great example to see.

Helen also got into minutiae of using css sprites for your custom post type admin icons and their hover states. Use them or Helen will find you :-) Here is a cool icon template I found.

Note: A link to her slides are below.

Decisions, Not Options

In her intro, Helen dug into WordPress philosophy a bit, in particular the “Decisions, not Options” section, which states:

“When making decisions these are the users we consider first. A great example of this consideration is software options. Every time you give a user an option, you are asking them to make a decision. When a user doesn’t care or understand the option this ultimately leads to frustration. As developers we sometimes feel that providing options for everything is a good thing, you can never have too many choices, right? Ultimately these choices end up being technical ones, choices that the average end user has no interest in. It’s our duty as developers to make smart design decisions and avoid putting the weight of technical choices on our end users.”

This roughly translates into really knowing your content administrators and their needs intimately and stripping out any obstacles and challenges to their success in the admin interface. The other side of the equation is adding to or enhancing WordPress custom features that are unique to that client’s publishing experience.

Get Your jQuery On

Helen walks us through featured image meta box admin enhancementjQuery UI was a big aspect of the presentation and Helen noted that it snuck into WordPress’ core install recently, just not with the accompanying CSS apparently, so you have to style it yourself. Following up on this post- presentation, I learned jQuery UI is now native to WordPress as of 3.3.x. Here’s a great tutorial on some of the possibilities for the Admin UI, and that tutorial covers the jQuery UI integration I just mentioned. Helen specifically highlighted nice examples like adding a jQuery UI datepicker and jQuery UI slider to a form (e.g. for age range) instead of standard select elements. She also went into detail about injecting Javascript inline by echo scripts through WordPress template hooks. I prefer my method of enqueueing what I would call a “junk drawer” file named something like “application.js” that loads last and tests for user events or a DOM object and then runs the relevant scripts rather than sticking .js inline, but it’s a matter of personal taste. Her method also has the advantage of calling relevant code snippets when needed. It’s probably semantics, but it might matter depending on your specific execution, the scale of your application code base, and what you want to maintain.

[Her slides are here].

Plugins Mentioned…

Post 2 Posts

Helen discusses her appproach to A close up of media upload enhancements to adminHelen gave the example that this plugin is very useful in creating “many to many” relationships between data nodes (e.g. people –> companies –> many companies)

Advanced Custom Fields

I’ve used this myself recently and it is awesome because I know what it’s like to do this manually.

Simple Page Ordering

This one is nice, but I’ve personally use CMS Page Order and I really dig it.

*Note*– See her slides for other plugins and Github code she mentioned.

Some Other Plugins I Use To Customize The Admin…

I’ve used this premium plugin a couple times: White Label Branding for WordPress and here’s a free one that comes close to the features: White Label CMS.

Hardcore Mom Award

Special thanks again to Helen Hou-Sandí for reasons stated above and as you can note from the pictures, she is with child. I already knew she was a hardcore WordPress user from last summer’s WordCamp, but my respect for her has now been cranked to “11.” If I were pregnant, I would have found a number of other things to do on a drizzly Tuesday night than present in front of a room of 100+ people.

Some Random Items And Announcements I Noted…

Steve, Jolie explain situation with the videos and other annoucements•Helen noted in her presentation that 10Up is growing quite well with about 23+ people now and considers it to be one of the largest WordPress consulting shops in the country.

• I appreciated the dedicated time at the end of sessions for networking and Steve for pointing out how active the wpnyc.org job board is. That was very good news.

• New Work City is coming along quite nicely. They may have one of the nicest spaces for meetups and the largest presentation screens I’ve ever seen.

•The official start time for the meetups is 7pm now, no longer 6:30pm.

• WPNYC meetup is also looking for help to edit the tens of videos still left to get cleaned up from last summer’s WordCamp, synced with audio and outputted to a format ready to be put online. They are also in need of assistance getting captions placed in all videos, but specifically the meetup videos. Contact Joly for more info.

• Also, the meetup’s price is going up to $6 for a trial period. The money from the extra $1 will be split between a door prize of around $50 dollars to a lucky attendee and a donation to a WordPress developer that gives back to the WordPress community. Rules and restrictions are being discussed as we speak.

“Don’t Email Steve”…

If you want to learn more about the WPNYC group, check out on Meetup.org. When we’re not meeting up check WPNYC.org. Attendees meet up the third Tuesday of every month, some say religiously :-)

On a final note, I want to make a last shout out to Tom Harrigan of RootBuzz (go check out what he’s up to). He dropped his spot on the guest list so I can get in.

Did I miss something? Have something to say?

Feel free to add comments and additions below. Thanks!

Resources:

  • 1. Helen Hou-Sandí slides from this presentation: Tailoring the WordPress Admin for Clients and Workflows
  • 2. “The Design of Everyday Things” by Don Norman was mentioned as a source of inspiration for UI/UX design by Helen.
  • 3. Media-models.js and Backbone.js were mentioned briefly.
  • 4. Complex Meta Boxes in WordPress
  • 5. SpeckyBoy: 20 Snippets and Hacks to Make WordPress User-Friendly for your Clients
  • 6. Add a character counter to excerpt metabox
  • 7. How to Limit the Display of a WordPress Meta Box
  • 8. Add a jQuery DatePicker to Event Posts {WP}
  • 9. Creating Admin Themes
  • 10. Tuts+: How To Change Your WordPress Publishing Workflow For The Better
  • 11. Smashing Magazine: Six Revisions: How to Customize the WordPress Admin Area
  • 12. Smashing Magazine: Smashing Magazine’s How To Customize The WordPress Admin Easily
  • 13. Justin Tadlock: Uncluttering the post editing screen in WordPress
  • 14. Smashing Magazine:Useful Free Admin Plugins For WordPress
  • 15. WPBeginner: How to Improve your Editorial Workflow in Multi-Author WordPress Blogs
  • 16. Ulancer: Improving the WordPress Admin’s Workflow
  • 17. Hacking the WordPress Admin: Mastering Custom Columns
  • 18. [Video] Alan Cole’s talk last October about: Growing Pains: Experiments with Child themes and why I stopped using them.
  • 19. Tuts+: Customizing Your WordPress Admin
  • 20. Smashing Magazine: How To Improve And Refine Your WordPress Theme Development Process

Filed Under: WordPress Tagged With: #wpnyc, customizing WordPress themes, Recap, Using WordPress as CMS, WordPress CMS

My WordCamp NYC 2012 Recap : 800 WordPress fans assemble

June 12, 2012 By Chrisdigital 8 Comments

-Steve Bruner does the wrap up after a marathon of WordPressWell, it was that time of year again. The time when people’s thoughts turn to warmer weather, cool drinks, blockbuster summer movies, and ofcourse how to improve their WordPress skills. Maybe that last one is just me… or not. Recently, (during WordCamp New York City : June 9th – 10th) WordPress themers, pro bloggers, development rockstars, and newbies thirsty for knowledge got a chance to assemble from all over the world much like Marvel’s Avengers to rub elbows with WordPress core developers (and more importantly each other) in the spirit of learning.

Since I had such a positive experience in 2010, and due to the fact New York took a collective hiatus in 2011, I was looking forward to another wonderful event this time around after all the anticipation. Turns out many people were looking forward to this as well, because we easily hit in the neighborhood of 800 attendees. This year was really special for me personally, because I decided to introduce my son to WordPress. He was excited about assisting me in volunteering, and getting a window into what I do for a living. He also looked forward to being in the “beginner track” sessions, because he has dreams of running or being part of a school newspaper in the future.

[ ↓ Jump down to my list of favorite WordCamp NYC 2012 presentations ]

“Focused” And Diverse

Father and son WordCamp New York 2012 volunteers and attendees pose for the cameraIn addition, this year felt more “focused” and mature to me. That is probably a side-effect of my own knowledge, and the maturation of WordPress itself (WordPress 3.4 launched June 14th.) Also noteworthy, are the facts: like myself several people brought their kids, there were a lot more female presenters, and the topics spanned the spectrum of “improving how you blog” to “getting into the guts of WordPress and coming out the other side” figuratively speaking.

Due to my affinity for this event, I answered the call for the second time in three years and volunteered to aid the WordCamp NYC 2012 team to stage one of the most diverse events I’ve ever attended- diverse in attendees, and in presentation content.

The Fellowship Of WordPress

Shot of the crowd that was starting to develop for keynote WordCamp NYC 2012 speech on SundayIf you’ve never been to one of these WordCamp events, you really missing a treat. WordCamps are hosted year round, all over the country- supported by local Meetup groups, sponsors, and the WordPress foundation. Speaking for “our event” (WordCamp NYC), there is a real spirit of “brotherhood” and “tutelage” at the event that everyone buys into.

Since the event was held at Baruch College (mostly in their 55 Lexington Ave. location) It was always an interesting proposition navigating the hallways and watching people do the lost-freshman-first-day-of-high-school routine trying to find the room numbers of the different sessions. But as usual people made it work.

Shoutout To The Organizers, Volunteers And Individual Sponsors

WordCamp New York City 2012 Organizers take a bow at the urging of Steve Bruner during closing wordsThis year the hard assignment of organizing this year’s WordCamp went to a crack team of intrepid souls from our local WPNYC.org group. If you want to shoot them a note of thanks, Check out this WordCamp NYC 2012 organizer Twitter list. We also had 40 people step up as volunteers and 22 people step up as individual sponsors, including myself.

Why You Should Volunteer Next Time

Just a little secret… I love volunteering, especially for morning setup and lunch because they are really critical. Not only that, but you get to meet the most people which helps if you want to turn to a neighbor for clarity on a point during a speaker’s session. I also like to meet, or work with the speakers if they have to register at your table, or if you happen to be their room monitor. It’s really a great advantage, you get the see the event in a whole different perspective than just being an attendee.

The Theme Of WordCamp NYC 2012

Andrew Nacin walks the crowd through details of the query at WordCamp NYC 2012If I had to pick a theme for this year’s WordCamp New York City I would say it was: “There’s a right way to do things and a wrong way. Learn the right way.” There was a lot of head-nodding in the sessions I attended (even if it was only me doing it.) I definitely think we’ll see a lot about “best practices in WordPress” in the near future. Take a look at this developing page on CSS in the WordPress Codex for example.

The Biggest Things That Stuck With Me As A Designer/Developer:

1. Stay on top of your updates, and take proper security precautions to protect your install.
2. Don’t work against how WordPress works, if that can be avoided at all.
3. Learn the nuances of why WordPress does what it does, this will make you a better developer.
4. If you don’t like the way WordPress works then become a core contributor and patch it, or file a trac bug.
5. We all have access to a really great WordPress community that’s willing to help.

For My Teenager, His Take-aways Were:

WCNYC 2012 - Mark Jaquith speaks as Andrew Nacin deals with the hecklers from his own team during keynote at WordCamp New York1. He really got a ground level introduction to the software.
2. Really enjoyed learning about SEO and taking full advantage of the tools Google offers.
3. Loved the concept of guest blogging and different things you could do to raise your online profile.
4. He really liked the idea of learning a trade that he felt would be in demand
5. He liked learning about all the useful plugins at his disposal especially for things like video integration.

A Lot To Process

This WordCamp was “off the chain” busting out with content, 80 sessions were held on Saturday alone with more on Sunday including repeats by popular demand. It was a lot to process even for a veterans, but oh so awesome ;-)

The coolest things I learned about by far were the new debugger tools available (see slides below), and the new Theme Customizer tool in WordPress 3.4 : download the latest WordPress, (3.4 or later) is out now!

My List Of Homework / Favorite Presentations (*means I saw in person)

Daryl Koopersmith demoing a new feature coming in WordPress 3.4: new theme customizer at WCNYC 2012These are WordCamp NYC 2012 presentations I saw live or wish I saw (like the Mets no-hitter.) It was so hard making choices! This is a list of 20 out of 80! I originally just wanted to highlight 10.

It’s really hilarious and an embarrassment of riches that so much information was offered to the attendees in one place (and in some cases direct from the WordPress VIP developer team.)

I’m not going to bore you any further, or steal the thunder from any of these slide presentations, so just check them out for yourself…

1. Brad Williams – WordPress Security
2. Boone Gorges – Using Git for Sane WordPress Development [Sunday]*
3. Mo Jangda – WordPress Debugging*
4. Andrew Nacin- You Don’t Know Query [Sunday]*
5. Daryl Koopersmith – Intro To Javascript In WordPress* (and the Theme Customizer walk-through for WordPress 3.4 on Sunday)
Snapshot of WordCamp NYC 2012 schedule : lots of content6. Alexandar Sapountzis and Jeffrey Marx – Customizing the loop*
7. Sonja Leix – WordPress Responsive Design Bootcamp
8. John Havlik – The Power Of Custom Post Types*
9. Sarah Whinnem- WordPress Hierachy and Custom Templates
10. Mel Choyce – Alas, No Mind: Designer-Developer Communication
11. Jeremy Clarke = Dry CSS – Theories, Methods And Tools For Scalable Stylesheets
12. Helen Hou-Sandi – Making Plugins and Themes disappear in into the WordPress Admin
13. Jason Paul – WordPress As A Custom CMS
14. Siobhan McKeown – Killer Docs For Devs
15. Mason James – Supporting WordPress:Caring For Your Clients And Community
16. Ben Doherty – WordPress On The Command-Line
17. Jake Goldman – What Would Core Do?
18. Erick Hitter – Moving beyond the Codex: Learning WordPress from itself
19. Kathryn Presner – A Beginner’s Guide to WordPress
20. Alex Miranda – Google Loves WordPress – Blogging For SEO

If want to learn more, checkout the WordCamp NYC 2012 Website. If you want follow-up info just check the #wcnyc hashtag on Twitter. Also my Meetup buddy Jean-Pierre Welch (@jpwelch) has a running Delicious.com feed of all the available WordCamp NYC 2012 #wcnyc slides from the event and eventually the videos will be available online as well.

Sponsors

Jean-Pierre Welch and Chris Carvey chat with Austin Gunter of WPEngine during lunch on Sunday at WordCamp New York CitySpecial shoutout to the WordCamp NYC 2012 sponsors for the free swag and the support. Especially the @WPEngine guys who gave any #wcnyc attendee that was interested a free personal account for life! I got into a great dialogue with their team and they’re really committed to sponsoring and promoting WordCamps across the country. Check them out if you’re interested in a hosting company that believes in WordPress. The t-shirts were printed up by Graf-X Unlimited in Brooklyn. Please visit, support and tweet about the sponsors of our event to encourage them for the future.

Other Recaps, Please Comment

If I have left out anything important, if you see any glaring typos let me know. Also, if you have your own WordCamp recap, please comment, shoot me an email, or hit me up on twitter (@chrisdigital) I’ll update the post:

1. Zachery Hogan : WordCamp NYC 2012 Has Come and Gone

2. Sarah Gooding : 12 Fantastic Presentations from WordCamp NYC

3. Austin Gunter : WORDCAMP 2012 RECAP

4. Artiatesia Deal : WordCamp New York City 2012 Recap from a Volunteer POV

5. Content Robot @ WordCamp NYC 2012

6. Nancy Loderick : WordCamp NYC 2012 – An Excellent Adventure

7. Hal Goodtree : Top Tip from WordCamp New York City

8. Poka Yoke Design : Attending The WordCamp NYC 2012 Conference

9. Mike Toppa : WordCamp New York City 2012

Read more on ChrisDigital’s Digital Designer Blog:

1. The Importance of Social Media and Your Online Persona

2. Responsive Design: WordPress NYC Meetup Recap

3. NYC Tech Startup Tour Meetup Recap: ideeli and Skillshare

Filed Under: WordPress Tagged With: #wcnyc, #wpnyc, Baruch College, Slide Presentations, Wordcamp, WordCamp New York, WordCamp NYC 2012

The Importance of Social Media and Your Online Persona

June 11, 2012 By Chrisdigital Leave a Comment

Importance of social media audiobook narrators or any industryThis month of June got quite the kick off, as my friend Robin Miles asked me to head down to the Jacob Javitz Convention Center to participate in a speaking panel. This panel was a feature for a crowd of audiobook narrators as part of the annual Audio Publishers Association/Book Expo America event titled “The State of Audio Book Narration.” As she elaborated on the details, she felt the discussion needed an added twist. That’s where I came in.

The panel already had a noted list of industry professionals booked (listed below) and since she had particular concerns about social media, mainly that her members could benefit from some of the “geekery” floating around in my head- she pitched the idea that I should share some of our conversations about the Web with the larger group. I’m glad she did, because I accepted and had a great time.

In preparing my remarks I collaborated with the other panelists about what would best help the group. Robin and John McElroy (our moderator) were particularly helpful in shaping the conversation. Since I was a guest to this community I wanted to be a team player and “help the ball club win.” So after some back and forth, then some last minute tweaks- I was satisfied we had something that was a basis for good conversation. (See slide link below.)

Slides And Goals

Social media is big and confusingMy slides are posted here on slideshare.net. My goals were short and sweet, and goes a little something like this…

1. Communicate the importance of the Web in current American/International culture.
See slide #2 which discusses this in particular, and if you’re interested in the source of some of these assertions- Check out Mary Meeker’s Latest Stunning Presentation About The State Of The Web.

2. Stress the current trends of buying and hiring decisions were being influenced by Internet searches and social media. Those interested should check this out: New Revelations on Facebook, Background Screening, and Privacy.

3. Lay down some rules of the road for setting up your online “persona.”
See slide #3, I make references to “Me 2.0, Revised and Updated Edition: 4 Steps to Building Your Future by Dan Schawbel.”

4. Offer some basic marketing tips. These are disbursed all over the presentation, so click through to get an idea. In addition, “The Thank you Economy” by Gary Vaynerchuk has an interesting take on strategy as it relates to social media.

5. Talk about the paradox of old-school business methods working hand-in-hand with modern day networking. See slide #6 which offers some bullet points of what I mean.

The Take-Aways

World is going backwards as it speeds to futureThe Q&A was lively, the crowd was really into it, and I learned quite a bit about their industry by being there. They also really appreciated my presentation and the “on the fly” commentary on the two case studies I included. I want to give a shout out to Simon Vance that was gratified I thought he was doing several things right.

I think for a lot of attendees, I de-mystified the social media/marketing process when I told them to focus on the target audience they are trying to reach and come up with a manageable plan. Absence of a plan, especially in “social media” will mean you’re at the mercy of whatever Google can scrape off the Internet to tell a story about you. Even worse if you not “searchable” at all you will lose business to others.

In addition, I stressed trying to “talk” to their users and people they are marketing to, watch their page traffic. Get a sense of how they are perceived, and what their audience is asking of them so they can be more responsive.

There were some really great conversations after the panel. One of my favorites was with a gentleman that was quite annoyed that he had to actively participate in some form of self-promotion, which tickled me quite a bit. So I turned his mock anger on it’s head with this series of questions…

“Are there people in the industry that make you life easier? …Make you feel comfortable in the booth? …Perhaps you want to work with again? Maybe you want to talk about that?”

“I’m sure you’ll get a lot of mileage out of that, and give people a behind the scenes look of how you work. In addition, your colleagues will appreciate the positive feedback, and this will give you a bit of a theme and strategy to your social media postings.”

I saw a lightbulb go on over his head.

The Biggest Lesson

John McElroy, Chris Carvey, Dan Zitt afterwards at the mixerThe biggest lesson I tried to convey was: Be an active participant in developing your online brand. Think of others first, and how they can benefit from your posts, (e.g. tips you can share, your unique knowledge on a subject matter), and this will make you shine in the end possibly bringing you more work.

For me personally, this event was awesome. Once we got warmed up the panel really got flowing and we provided great benefit to the assembled group. I especially made a concerted effort to emphasize other panelists points and I got a lot out of it learning the nuances of another industry. Although I deal with clients with varying degrees of tech-savvy-ness all the time, it’s important to remember not everybody is “wired in” to Web-related strategy as I try to be. It was really fun talking to the attendees during the Q&A and afterwards. I will definitely do it again. Someone even came up to me and asked if I was interested in addressing a group of SAG actors :-)

The Noted Panelists:

John McElroyJohn McElroy (our moderator) is President and Executive Producer of Eljin Productions, Inc. In the audiobook industry since the early 1990s, he has produced and abridged hundreds of programs. He has won three Grammy Awards and has been nominated for two others. In 2002 he was co-recipient of the Audio Publishers Association Hero Award for his work with Stephen King on the Wavedancer Foundation. He continues to serve on the board of The Haven Foundation, the successor to Wavedancer.

 

Dan ZittDan Zitt is the Director of Audio Production at Random House Inc. In his sixteen-year career, he has produced well over two thousand audiobooks, and he currently oversees production teams in New York and Los Angeles that produces over four hundred audiobook titles a year. His team’s productions have garnered Audies, Grammys, and Odyssey Award winners. Most recently he recorded First Lady Michele Obama for her audiobook, American Grown.

 

Tavia GilbertTavia Gilbert is a multiple Audie nominee and Earphones and Parent’s Choice Award-winning producer, narrator, and writer Tavia Gilbert has appeared on stage and in film. School Library Journal has called the performances of this highly-acclaimed actress “as close as you can get to a full cast narration with a solo voice.” She has narrated nearly 150 multi-cast and solo voice audiobooks.

 

Christopher Carvey you can read about me here.

Special Thanks

Robin MilesSpecial thanks to Robin Miles (our facilitator.) Here’s a little about her… Robin began narrating audiobooks at American Foundation for the Blind’s Talking Books Studio in 1994 and now boasts over 200 titles covering many different genres. She is a regular narrator for several different commercial audiobook producers, and in addition to fiction, autobiography, sociology and children’s titles, Robin has recorded an exhibit for the Museum of Natural History in NYC, led sexual harassment training on the Internet, imparted New York’s legal codes for disabled lawyers, and she continues to provide dubbing and dialogue for dozens of feature films and television shows.

The Books

Here are some of the books I reference in the slides or mentioned in the Q&A:

Me 2.0, Revised and Updated Edition: 4 Steps to Building Your Future by Dan Schawbel

[From Book Description] There is no job security anymore, which means that the way we manage our careers has forever changed. Now, everyone in the world is your competition and the single greatest differentiator you have is your personal brand. With social media tools, blogs, and mobile applications, there are endless opportunities to become known and connect with other people.

In Me 2.0, personal branding expert Dan Schawbel gives you all the tools you need for building a powerful personal brand that WILL give you a competitive advantage in the marketplace, including:

· A 4-step process for discovering, creating, communicating and maintaining your personal brand.

· How to use all the latest social media tools, including video, blogs, and social networks for job search and career development.

· The secrets to networking effectively – both online and offline.

· Proven branding advice from industry experts and insiders.

Whether you’re looking for your first big job, want to climb the corporate ladder, or are eager to jumpstart your own business venture, Me 2.0 will help you achieve lasting success!

 

The Zen of Social Media Marketing (2012 Edition) by Shama Hyder Kabani

[From Book Description] Social media is a crucial tool for success in business today. People are already talking about your business using social media, whether you’re using it or not. By becoming part of the conversation, you can start connecting directly to your customers, as well as finding new ones, easily and inexpensively spreading the word about your products or services.

But social media marketing isn’t like traditional marketing—and treating it that way only leads to frustration. Let Shama Hyder Kabani, social media expert and president of web marketing firm The Marketing Zen Group, teach you the “zen” of social media marketing: how to access all the benefits of social media marketing without the stress!

With a foreword by New York Times bestselling author Chris Brogan, The Zen of Social Media Marketing outlines the most popular social media tools, from Facebook to Twitter to LinkedIn, and teaches you how to use them, step by step. Kabani provides proven strategies for success from the businesses she works with every day, along with shortcuts and tips to help you make the most of your time and energy.

 

The Thank you Economy by GaryVaynerchuk

[From Book Description] Here renowned entrepreneur Gary Vaynerchuk reveals how companies big and small can scale that kind of personal, one-on-one attention to their entire customer base, no matter how large, using the same social media platforms that carry consumer word of mouth. The Thank You Economy offers compelling, data-driven evidence that we have entered into an entirely new business era, one in which the companies that see the biggest returns won’t be the ones that can throw the most money at an advertising campaign, but will be those that can prove they care about their customers more than anyone else. The businesses and brands that harness the word-of-mouth power from social media, those that can shift their culture to be more customer-aware and fan-friendly, will pull away from the pack and profit in today’s markets.

Extra Credit

Trust Agents: Using the Web to Build Influence, Improve Reputation, and Earn Trust by Chris Brogan and Julien Smith

[From Book Description] Today’s online influencers are Web natives who trade in trust, reputation, and relationships, using social media to accrue the influence that builds up or brings down businesses online. In Trust Agents, two social media veterans show you how to tap into the power of social networks to build your brand’s influence, reputation, and, of course, profits.

In this revised paperback version, learn how businesses are using the latest online social tools to build networks of influence and how you can use those networks to positively impact your business. Combining high-level theory and practical actions, this guide delivers actionable steps and case studies that show how social media can positively impact your business.

Enchantment: The Art of Changing Hearts, Minds, and Actions by Guy Kawasaki

[From Book Description] Enchantment, as defined by bestselling business guru Guy Kawasaki, is not about manipulating people. It transforms situations and relationships. It converts hostility into civility and civility into affinity. It changes the skeptics and cynics into the believers and the undecided into the loyal. Enchantment can happen during a retail transaction, a high-level corporate negotiation, or a Facebook update. And when done right, it’s more powerful than traditional persuasion, influence, or marketing techniques.

Kawasaki argues that in business and personal interactions, your goal is not merely to get what you want but to bring about a voluntary, enduring, and delightful change in other people. By enlisting their own goals and desires, by being likable and trustworthy, and by framing a cause that others can embrace, you can change hearts, minds, and actions.

Contact Me

Reach out to me if you’d like me to talk to your group :-)

Read more on ChrisDigital’s Digital Designer Blog:

1. 16 Twitter rules for high performance results

2. My WordCamp NYC 2012 Recap : 800 WordPress fans assemble

3. Responsive Design: WordPress NYC Meetup Recap

Filed Under: Social Media Tagged With: apac, panel, Slide Presentations, social media, social media performance, social media strategy

Responsive Design: WordPress NYC Meetup Recap

April 19, 2012 By Chrisdigital 12 Comments

Sonja Leix and Jack Reichert talk responsive designTo say “responsive design” is a hot topic right now is an understatement. As proof, just google it, and you’ll find great resources and articles about it online. In addition, as it relates to this specific meetup (agenda listed on that page) – I was one of 60+ people that were on a waiting list for this CBS Local venue that holds 120 and I was lucky to get in.

The WPNYC community definitely wanted to hear what the speakers had to say. Sonja Liex (link to slides below), and Jack Reichert (link to slides below) were game and I thought they gave a great overview of the issues developers face with the explosive growth of web-enabled devices. This post hopefully compliments and extends what was covered by the speakers Tuesday night. Slides and video will be available so I’m just rounding out my own thoughts here.

Down The Rabbit Hole Of History

The speakers chose a topic that is very timely because as more and more end users choose to digest content from a diverse collection of devices, developers are asking themselves how can they keep up?… and still have their content look great. After all, content is king and if you don’t serve your users in a manner they expect, you’ll get left behind. One by one content publishers are taking a look at their vistor stats and making changes, Actual Insights Blog relates their experience with “responsive WordPress” and shares a great recommended reading list. I won’t go down the rabbit hole of history of this topic too much, mainly because Jared Ponchot of Lulabot (of Drupal fame) does a great job of doing that here.

Wait, This Sounds Familiar

Media queries - common resolution breakpointsResponsive design has evolved into a broad concept in product development, and it’s larger than WordPress.

‘Our understanding of “responsive design” should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.’ – Jeffrey Zeldman.

He also has another popular quote in this post that takes me back in time- ‘It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck.’

This meetup also reminded me of my experience connecting with Filipe Fortes at a Technology “Watercooler” Talk at Time Inc. last year (then of Treesaver, now of Flipboard.) I tried to get him introduced to the higher-ups at one of my previous employers but they were content to stay with Zinio. If his name sounds familiar, it should. He was part of the crew that worked on the awesome, yet killed Microsoft Courier. Recently, some of his associates made noise releasing or being associated with the release of some interesting iPad apps.

Challenging Conversation

Responsive design screen on WPNYC Meetup group pageTo prepare my mind for the meetup, I did some related research on the Interwebs and I saw that .Net magazine did a feature on “Responsive WordPress” and then ran across this interesting related dustup between Josh Clark and Jacob Nielson (the comments sections on both positions are a priceless read.) Also this post addresses some of Nielson’s comebacks.

Mostly, the Web industry is treating Nielson like the guy at the party that forgot his pants. Web professionals found Nielson’s comments about publishers needing multiple site versions curious because he skipped over the entire responsive design movement. I mention this because it may be relevant if you have some challenges dealing with clients and stake holders in your business dealings and discussion of responsive design. This stuff also plays off of some of the arguments in Jack Reichert’s presentation as I would find out Tuesday evening.

Why Are We Even Catering To These Devices?

There are a diverse range of opinions out there… take this comment by Justin Tadlock I found recently “Honestly, I’m still questioning the entire responsiveness movement. I like what can be done, but it’s steering Web design in the wrong direction. What I mean by this is that the device should know what to do with standards-based code. The code shouldn’t be catering to the device. That’s kind of backwards. Those are my thoughts. Responsive designs are definitely on my radar.”

This was something that came up in group discussion at the meetup. Some of us have clients that would rather have the end users cater to their “fixed” way of presenting content and be done with it. The counter to this is obvious ofcourse- how much are you willing to risk alienating any part of your audience due to a crappy user experience? Bringing the focus back to reality and starting to talk hard numbers– relating to who can effectively see your content and who can’t, should steer the conversation to where it needs to go.

Content.Users.Content.Users.

Sonja Leix at podiumThe presentation wasn’t necessarily WordPress specific much to the chagrin of some of the attendees but that was sort of the point. When you start to break down the genesis of “Responsive Design” it’s about content strategy as it is about design or technical implementation. (If you want to talk implementation scroll down to the stuff about themes.)

There seems to be two situations a developer will face, trying to upgrade a current site or accounting for responsive design at a site’s inception. Either way, in both situations there is homework to do and two philosophies are at the center of this homework. Graceful degration vs. progressive enhancement.

Graceful degradation is loosely described as cutting things away from a core “desktop” site depending on the end user device.

Progressive enhancement is the opposite, where content publishers focus on the “base” of their content (acceptable to all devices) and add content to extend their offering based on capabilities of the end user device that can handle the enhanced experience.

At it’s core, this is a conversation about how to best serve your content and understanding how to get it to your audience with minimum preconceived assumptions about how your users absorb it, allowing for some flexibility. After doing your due diligence you come with a game plan that divides your investment in your content into “vital” presentation items and what is “optional” per device. Here’s a great post on simplebits that illustrates my meaning.

Broad Strokes

Sonja covered formulas and techniques with the flexible fluid grid + CSS3 media queries to address styling issues per targeted device. Her explanation of all the ratio-based relationships between element and container was helpful. She discusses the “target / context = results” forumla and it cascades down the dom tree to get the desired responsive effect. Please reference her slides to get my meaning.

Jack Reichert at podiumJack got into stuff like “Graceful degradation” vs. “Progressive enhancement” and “crafting experiences that honor your content and your user.” His Camel vs. Stallion analogy about typical “design by committee” situations hit home for me. His main point was to find whats really important in the content (see the “Mobile First” philosophy) and that implementing a responsive approach does add a level of complexity to your building process but not compared with maintaining multiple versions of a site.

Principles of Responsive Design

Jack also presented what he called the “Principles of Responsive Design,” I’m paraphrasing here… please reference his slides when they are available.

1. Keep content king- respect your content, respect your users
2. Think mobile
3. Be progressive in your approach
4. Be semantic in your code
5. Labeling your dom elements is Key: Ids, classifications, microformats, ARIA
6. “C” is for cascade, hacks, know your selectors
7. Hide advanced CSS from older browsers
8. All javascript must be unobtrusive
9. Update your scripts, and gain features from the new code
10. Optimize your assets, minify, gzip

The Mechanics

When you pull back the curtain on the mechanics of a responsive design, it’s simple in theory- ideally, some kind of server-side technology (like PHP or Ruby) receives the request for data, server-side scripting “feature sensing” or “user-agent sniffing” of the client is initiated, the server decides what modules to load, re-position (or hide depending on your logic.)

There are lots of pros and cons, so there is an emphasis on early scope. Don’t over promise because your presentation won’t look perfect on every device, the idea is to have some kind of representation or version on most devices and to be practical.

Take Your Time

Start small, every content publisher’s solution should be tailored to their content and site architecture. Narrow your focus to core of content, essentials, build from there. It’s not practical to have a desktop site and use display:none to hide things as the base responsive solution. The example was given that you don’t want to download a data heavy media player to a mobile device, only to hide it because it’s not being used. Strategies must be put in place that take care with download time versus is a user missing important content.

There was also talk of client backlash rejecting responsive sites such as (old school) magazine-minded people that have a print mindset that desire their layout to be unchanging, pixel locked and the challenges involved.

Book Learnin’

Steve Bruner at PodiumA few books were mentioned by the presenters and during the back and forth with the audience, looks like good reading:

1. Mobile First by Luke Wroblewski

2. Responsive Web Design by Ethan Marcotte

3. Adaptive Web Design by Aaron Gustafson

4. Hardboiled Web Design by Andy Clarke (Someone mentioned this book during the Q&A)

Resources & Links, Stuff From Q&A

1. Apple Voiceover
2. Responsinator.com
3. Prefixr.com
4. CSS3Please.com
5. DetectMobileBrowsers.mobi
6. DIV Layer Editor Creator was in the house and gave his plugin a shoutout, check it out.
7. Mobile Detector Plugin
8. JQuery Mobile

Plugins were mentioned as a possible way to introduce responsive features to a current theme. A quick search of the WordPress.org plugin repository seems to back this up. Here are three examples:
1. Respond.js
2. Responsive 2010
3. WP Fluid Images

Using WordPress body class to show or hide content, customize presentation in one theme, across multiple sites or views, etc. was discussed. There is a lot online about this technique.

Issue of dealing with the Apple high resolution Retina display and images was posed, this post on css-tricks.com makes some suggestions.

Someone in the crowd mentioned Nicole Sullivan’s Object Oriented CSS in a question.

Examples Of Responsive Sites

CSS-tricks.com, Studiopress.com, Smashingmagazine.com were all cited as examples as good responsive designed sites.

Somebody Mention Theming?

Responsive themesBefore I get into themes, since this is as much about content strategy as it is about design- I want to sneak in this link to an interesting post about Implementing Taxonomy for Better User Experiences and this recent one I found of Mobile Interface design principles.

During the presentation there was a lot of talk about Studiopress’ Genesis and DIYThemes’ Thesis ( because of timeliness of updates and available support) but here are some responsive theme resources I found after doing some cursory searching:

1. Responsive Web Design for WordPress Theme Designers

2. What’s Your Favourite WordPress Responsive Theme Framework?

3. How to Choose the Right Responsive CSS Framework

4. 15 Responsive CSS Frameworks Worth Considering

5. Brave the Seas of HTML5 WordPress Development with Bones

6. 40 Best Responsive WordPress Themes

7. 65 Stylish and Lightweight Responsive WordPress Themes

8. 10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress

9. Responsive Web Design with HTML5 and the Less Framework 3

10. Origin: Responsive parent theme for Hybrid

Sonja’s Presentation Slides & Notes

What could possibly wrong with responsive designSonja was nice enough to post her assets online here: Sonja’s Slides, and Sonja’s notes.

Jack’s Presentation Slides & Notes

View Jack’s slides (best viewed in Safari- use the keyboard arrows, and spacebar to advance.) Read Jack’s notes.

Don’t Email Steve :-)

I’m recapping Steve’s introduction to the group here… His main point was don’t email him :-) We have 1900+ members, and our meetup is run through here: WordPressNYC. We meet every third Tuesday of the month. We will not meet in June (because of Wordcamp NYC 2012, see below for more information.) Our community is run though this Website here: WPNYC.org. Separate sites, separate logins – don’t confuse them. WPNYC.org has a pretty robust jobs board and helpful forums. Don’t email Steve :-)

WordCamp NYC 2012

Steve with Speakers Sonja Leix and John ReichertDid I mention don’t email Steve? Go here: Wordcamp New York City http://2012.nyc.wordcamp.org/ … 800 slots for newbies to pros, on June 9-10 @ Baruch college. Tickets go onsale in May, sign up for the email newsletter (below the countdown timer on the right of the Wordcamp page) to get your notice. Oh, he’s taking submissions for presenters and sponsors, so you guys can email him :-)

The Wrapup

This meetup was a collision of a lot of worlds for me. Many of the issues discussed I have backburnered or I was dealing with only in theory and this presentation brought them into the forefront. Personally, I have been trying to come up with my own “bootstrap” (my own personal base Web app starter suite.) So far, with my recent experiences with Ruby, Compass, Blueprint, and SASS/SCSS- I am really interested in working with LESS and messing with Twitter Bootstrap, or Foundation. But, now after looking at this again because of this meetup and revisiting my research, I’m releaved to know I have a lot of options if I want to leverage what I already know about WordPress into my future prototyping with a “responsive” theme. This Bones theme might be what I am after. Stay tuned.

Rumor Has It

The next meetup with be all about WordPress multisite (WordPress MU) Stay tuned for that…

Hope To See You At A Meetup

Want to bump into me at a meetup? Check out my profile on meetup.com

Please Comment, Share Your Experiences

Feel free to add corrections, links and updates to this post in the comments if I missed anything. I especially want to hear what your takeaways were from the meetup or dealing with the issues involved. Thanks for visiting.

Filed Under: WordPress Tagged With: adaptive, blog theming, CSS3, media queries, Meetup, responsive design, responsive wordpress, WordPress

  • 1
  • 2
  • 3
  • …
  • 6
  • Next Page »