November 5, 2010

The Tools I Tend To Use

Weather you are a carpenter, a chef, or a graphic designer, everyone has different tools that they use to work with. Here is a list of what I use / find to be helpful in what I do in my daily work routine. (In No Particular Order)

Web Development:

  • WordPress (CMS/Platform)
  • Coda (development)
  • Versions (for SVN communication)
  • Parallels (for browser testing)
  • Adobe Photoshop and Illustrator (graphics)
  • Firebug (for css debugging)
  • Typekit (for webfonts)
  • Linotype Font Explorer (for computer fonts)
  • Lighthouse (for bug tracking)
  • Beanstalk (for external SVN repositories)
  • Harvest (for time tracking)

Communication:

  • Thunderbird (work email)
  • Skype (conversations with peers)
  • Colloqy (for IRC Chanel group discussions)
  • Cloud App (for screen shot and layout sharing)
  • Skitch (for quick image references)

Other:

  • Rdio (for music)
  • Airfoil (for air-tunes synchronization)
  • Keynote (for presentations)

What are some of the tools you use? Would love to hear about what you find to be useful and helpful no matter what the function. :)

October 25, 2010

Music Video: Baths: Lovely Bloodflow

Such a pretty video: Baths: Lovely Bloodflow Thanks Luke!

October 16, 2010

Slides from WordCamp NYC “Typography and Your Theme”

Thanks to everyone who came out to my session at WordCamp NYC! I've uploaded my slides to slideshare for you to view. Please feel free to leave comments or even just let me know what your favorite webfont is!

October 15, 2010

Speaking at WordCamp NYC!

WordCampNYC – Oct 16-17I'm so excited for WordCamp NYC this weekend! There are going to be so many talented people there it is almost overwhelming! I feel so honored to be speaking amongst this incredible lineup. If you're going, come see me speak about Typography and Your Theme. If you live in NYC or just want to come to these other incredible sessions: All you need to do is Register for WCNYC today. Make sure to find me and tell me hello! :) Here is my session description:

Typography and Your Theme:

Believe it or not, generally WordPress sites are made up mostly of typography. This makes the relationship that these typographical elements have to each other very important. The New WordPress 3.0 default theme Twenty Ten has incredible typographical elements. In this talk I will be using a child of Twenty Ten as an example of customizing the theme’s typography. I will be going over how to plan these typographical elements out, their style and color, how to make a site/brand guideline for your Twenty Ten child theme to keep consistency, what different services to look at for your non-system fonts, typographical CSS tips and tricks, and how to account for every little detail and make sure no type element goes un-styled!

October 4, 2010

Targeting Your Fonts in Firefox on Windows

Well, you can use this trick for just about anything in your CSS really. It just so happens that at a certain small weight, Museo Sans really crunches on Windows XP Firefox. Weather or not we can target specifically XP I'm not sure yet.. (if anyone knows chime in!) But we can target all Firefox's on all Window's Machines. So here is how you do it...

1. Make a css file called ff.css and put this code in there:

[code]

@-moz-document url-prefix(){
#hackery {
font-family: Helvetica, sans-serif;
}
}

[/code]

Now that you've made your little hack document...

2. fill up in between the moz brackets with whatever selectors you are trying to change.

3. call your new ff style sheet in your header.php like so:

[code]

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Windows", 0) !== FALSE) { ?>
<link rel="stylesheet" type="text/css" media="all" href=&quot;ff.css" />
<?php } ?>

[/code]

voila! Firefox targeted on only windows!

You can now fix your fonts and go from this: (crunchy liberation serif to georgia italic)

to this:

To target Window XP in particular (note that this would not cover versions before that), this should work.

[code]
<?php
if ( false !== stripos( $_SERVER['HTTP_USER_AGENT'], 'Windows NT 5.1' )
|| false !== stripos( $_SERVER['HTTP_USER_AGENT'], 'Windows XP' ) ) :
?>
<link rel="stylesheet" type="text/css" media="all" href="ff.css" />
<?php endif; ?>
[/code]

September 20, 2010

“Beyond the System Font – Advanced Web Typography” at WordCamp Birmingham

sara cannonI had the great pleasure of speaking this past weekend at WordCamp Birmingham. It was an incredible day with some incredible speakers! If you missed it, here are my slides on my session "Beyond the System Font - Advanced Web Typography." I will hopefully have a video of the talk available to you soon.

The talk covered:
– the current state of web typography/web font licensing etc
– the latest practices such as @font-face embedding
– a practical and applicable focus on how to utilize Typekit with WordPress.
– real-time typekit installation demonstration / how to change your h1
– application on mobile devices (ipad challenges)
– challenging and combating “FOUT” with js
– combating type crunch
– focus on supporting type foundries (no illegal pirating. buy licensing)

September 9, 2010

Speaking at WordCamp Birmingham

WordCamp BirminghamIf you've never been to a WordCamp now is the time to go! I'm really excited about this camp. I've even dove into the planning of it through designing, planning, pricing, and gathering sponsors. Speaking of, we now have some incredible sponsors (thank you to the platinum sponsors Vaultpress and MailChimp!) We also have some ABSOLUTELY incredible speakers. (I'm not going to miss Dougal Campbell or Andrew Nacin!) I also have the absolute pleasure to speak alongside this awesome lineup . Dan Gavin designed the WordCamp Bham W that I've put on the tshirts and badges.
REGISTER TODAY .. I'll even give you $5 off with this link!! Its going to be great! Really though: weather you are a non-profit, business, designer, developer, blogger, marketing guru, or social media connoisseur, you will benefit from this conference. My topic is geared more towards designers. Here's a description:

Beyond the System Font: Advanced Web Typography

Presented by Sara Cannon

Interested in pushing beyond the system font? Advanced Web Typography will cover:
– the current state of web typography/web font licensing etc
– the latest practices such as @font-face embedding
– a practical and applicable focus on how to utilize typekit with WordPress.
– real-time typekit install demonstration / how to change your h1
– application on mobile devices (ipad challenges)
– challenging and combating “FOUT” with js
– focus on supporting type foundries (no illegal pirating. buy licensing)

I'll post up slides after the event.. but really.. you should BE THERE!

Speaking about "WordPress and Your Brand" at WordCamp Birmingham last year.

September 9, 2010

WordCamp Birmingham Badges

WordCamp Birmingham is just around the corner! I'm so excited for this event, and have even gotten my hands dirty in planning it. WordPress Community Love!

If you haven't registered yet, you should do so NOW. Quick: use this link to get $5 off!!!
http://wcbhm10.eventbrite.com/?discount=%20wcbhm5off

If anyone is coming and wants these custom badges just grab one!

WordCamp Birmingham WordCamp Birmingham
WordCamp Birmingham WordCamp Birmingham

Props to Dan Gavin for the custom W!

August 27, 2010

Combating IE6: Drop Down Menu Plugin for WordPress “twentyten” Them

twentyten

I'm in love with the newly crafted WordPress theme "twentyten." The code is clean and the included functions are spot-on. So, I've decided to start making Child Themes based on twentyten. The one problem I would run into is in Internet Explorer 6. Now, I know that everyone hates it and that we all need to move on into the future.. but.. I have clients that I really need to continue support of that legacy browser. The problem that I encountered was with the drop down menu system. The code is so beautiful and perfect, but it just uses CSS... which IE6 can't recognize. So I decided to write a plug in (with a bit of helpful advice from some awesome geniuses) that I can install whenever I make a child of twentyten and need it to support drop downs in IE6.

WordPress Plugin Page: http://wordpress.org/extend/plugins/twentyten-ie6-menus/
DOWNLOAD from WordPress: Twentyten IE6 Menus

Here is the plugin php file: (if you don't want to use it as a plugin.. just steal the jQuery)

[code]
<?php
/**
* Plugin Name: Twentyten IE6 Menus
* Author: Sara Cannon
* Author URI: http://sara-cannon.com
* Description: Make the menu drop down in IE6 (if you care about that sort of thing)
* Version: 1.0
* License: GPL2
*/
function sara_twentyten_ie6_menus_enqueue() {
wp_enqueue_script( 'jquery' );
}
add_action( 'after_setup_theme', 'sara_twentyten_ie6_menus_enqueue' );

function sara_twentyten_ie6_menus_script() {
?>
<!--[if lte IE 6]>
<script type="text/javascript">
jQuery(document).ready( function($) {
$('#access li').mouseover( function() {
$(this).find('ul').show();
});
$('#access li').mouseleave( function() {
$(this).find('ul').hide();
});
$('#access li ul').mouseleave( function() {
$(this).hide();
});
});
</script>
<![endif]-->
<?php
}
add_action( 'wp_footer', 'sara_twentyten_ie6_menus_script' );
[/code]

Feel free to download and use and let me know if you encounter any bugs.
-sara cannon

This probably won't mean anything to you, but I wanted to document this for my reference. Here are some of the sites I visited when initially researching how to make this plug in. There are probably many more that I hit up in my research later on but I just thought I'd throw this in here considering it is on the same subject lines.

http://www.jdmweb.com/resources/jquery_to_wordpress_plugin
http://www.devlounge.net/articles/using-javascript-and-css-with-your-wordpress-plugin
http://www.lost-in-code.com/platforms/wordpress/wordpress-plugins/wordpress-build-a-thickbox-plugin/
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

August 21, 2010

Presentation: Customizing WordPress Themes / Child Themes – WordCamp Savannah 2010

At WordCamp Savannah today I presented on Customizing Themes / Child Themes. Check out the slides below if you're interested. There have been lots of great presenters today. Check out on twitter #wcsav to check out what has been going on. :)

View more presentations from saracannon.

Sara Cannon is a Design and Digital Strategy Consultant, UX/UI Designer, Creative Director, & Artist.
Have a project I could help you with? Contact me at sara@saracannon.com.

Skip to content