Here at Canary we’re big proponents of tools that help us get the job done. When it comes to our CSS layouts lately we’ve been using the Blueprint CSS framework in our workflow. We’ve found that despite the trade-offs (some non-semantic html), we get a lot of benefit from the system. There’s a great CSS reset that removes all the default browser styling, it’s been cross-browser tested, pretty good out-of-the-box typography settings, and both a baseline and horizontal grid.

About Blueprint (from blueprintcss.org):

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

The grid is what I’m going to focus on here. There are a lot of CSS frameworks that provide a grid, but there’s a tool for Blueprint that we’ve been using to create custom grids. This gives us the freedom to set the page width and number of columns to whatever we need for the site, and generates the structure for us that we use in our design and development process.

Download Blueprint and set it aside for now. You’ll use this when you’re building the site.

Go to the Blueprint Grid CSS Generator and enter the specs for your custom grid. I’ve found that I can play around with this in order to create the exact grid I need for each project. Once you’ve got the setting you want, click ‘Generate CSS’. Copy and save the Grid.css and compressed.css files. You’ll use those to overwrite the default grid that came with Blueprint. Now flip over to the Grid.png tab. The script created this png file from the specs you entered. It represents one cell of your new grid. Save this file. It’s intended to replace the default grid.png file that you get with Blueprint, but we’re also going to use it as a guide in Photoshop. (It’s tiny, and a little hard to see both in the generator and below)

Open the grid.png file in Photoshop. Convert the color mode to RGB. (you may not need to do this, but I’ve occasionally had problems when I didn’t.) Now select Edit->Define a Pattern. You can keep the default name and click OK.

Now create an empty document that is the width of your grid for your website. It can be any height, but I usually start with at least 1000px tall. Fill a new layer named ‘grid’ with a solid color.

Create a new layer style for that layer and select the Pattern Overlay tab. Set the blend mode to ‘multiply’ and choose ’snap to origin’. Open the ‘Pattern’ selector and choose your new pattern. It should be the last one in the list. Now go to the ‘Blending Options’ tab and under Advanced Blending set the fill opacity to 0%.

You now have a semi-transparent custom grid that you can place over your other layers to guide you as you design!

And here it is in action. This is a little preview of our new site in progress. 10 points to you if you spot the temporary heading title!

Advanced Trick!

Set up a couple custom actions to turn your ‘grid’ layer on and off with a key command. We’ve found that really helps us quickly check our alignment as we work.

Watch out for part 2 in this series, in which we’ll divulge how we incorporate Blueprint into our Drupal theming process. [Now we're on the hook to write it!]

We’re looking for a creative and talented web designer/developer to help us make beautiful and inspiring web stuffs. You’ll be working with a small team on big projects so you’ll get your hands dirty at every stage from initial concepts to final delivery. This is an excellent opportunity with a rapidly-growing graphic design, public relations and marketing company based in Philadelphia, PA. We have excellent clients and projects (primarily in the arts and entertainment industry) that will keep you inspired and excited.

Primary Skills Desired

•  XHTML
•  CSS
•  Drupal experience a plus

Other Skills Desired

•  PHP
•  MYSQL
•  Photoshop
•  Illustrator
•  Flash
•  Actionscript

We are looking for interns for the Spring and Summer months, between April & October (flexible). A minimum 8-week commitment is required. Minimum of 15 hours per week. We are flexible and can devise a schedule that works for all. Available for college credit; a small stipend is negotiable.

Work must be done on-site at our office. Our office is located on Germantown Avenue in the Mt. Airy neighborhood of Philadelphia and is accessible by two regional rail lines from Center City (R7/Sedgwick Station and the R8/Allen Lane), as well as the 23 bus. Free parking is available in public lots or on adjacent streets.

How to apply

To apply, please familiarize yourself with our company and our clients. Email your resume to noelle@canarypromo.com Include a brief introduction about yourself and links to work samples demonstrating desired skills.

I was considering whether to spend my last dollar playing the ponies or on diapers for my baby, and as I flipped the money over between my sweaty hands I looked down. And for the first time it wasn’t the all-knowing gaze of that pyramid eye that I pondered, but this bad-ass eagle. He’s ready to kick your ass if you don’t love democracy.  That frickin’ rules, and I immediately thought it had to go on a t-shirt.

And so…

Canary just submitted our design for the DrupalCon DC tshirt contest. It’s inspired by The Great Seal of the United States.

Vote this up if you want to look like a $1,000,000!

It says E. Pluribus Drupal! You know you want to wear this!

Vote!

Also, don’t forget to register to attend DrupalCon this March. We’ll be there, so it should rock pretty hard.

It’s been our pleasure to work with distinguished author Neil Baldwin over the past several months.  Canary redesigned www.neilbaldwinbooks.com and created a custom content management system utilizing the  Drupal platform and a grid-based custom theme.

Neil was kind enough to send us the testimonial below.  For more from our clients, check out our testimonials page.

“I was petrified when www.neilbaldwinbooks.com began to receive its makeover from Canary. Intuitively I felt that I knew what I wanted, but despite — or perhaps because of — being an author, I had trouble expressing these needs to Mason, John and the Canary team. Of course, from the moment they came back with slate blue and earthy brown as the basic colors for the site (I had never even told them that blue and brown were my favorite colors), I was in the right hands & never looked back. I also admit that I was even more petrified when Mason told me — once my new site was built — that he was going to teach me (omigod, as they say…) how to go into the invisible infrastructure and make changes on my own. Yet again, John and Mason patiently talked me through the looking glass, and, before too long, I got used to the subversive nature of what I was doing. We literati develop an intense ownership over our work. Canary ‘gets’ this obsession intuitively and respects it as well. The best attribute of Canary? They combine cutting-edge creativity and inductive reasoning with infinite patience — and they are always there when I need them.”

Canary Promotion + Design is proud to be a sponsor of the first BarCamp Philly!

The first-ever BarCamp Philly, an all-day collaborative event for people involved in technology, media and creative fields, will be held on Saturday, November 8th at The University of the Arts in the Terra Building, located at 211 S. Broad Street (Broad & Walnut). Registration will begin at 8:00 a.m., and sessions will run from 10:00 a.m. to 6:00 p.m. BarCamp Philly creates opportunities for participants to share knowledge, experience and support with one another in an open, classroom-style environment.

With over 200 registered attendees, registration has been closed, but people still interested in attending may add their names to a waiting list for possible openings. For more information, visit www.barcampphilly.org.

Philadelphia’s first BarCamp, organized by JP Toto and Roz Duffy, is part of an international network of BarCamps which have taken place across North America as well as in South America, Europe, Africa, Asia and Australia. It’s also part of a city-wide movement to encourage a collaborative creative community.

“With events like BlogPhiladelphia, PodCamp Philly and Ignite Philly bringing people from all over the region together to be inspired, BarCamp seemed to be a natural next step,” says Duffy, a web producer and a founding member of Independents Hall. “The connections that are possible may lead to new collaborations, new projects, future events. Hopefully it will bring more attention to our fine city!”

Toto, owner of a small technology consulting firm called 30Points Design & Consulting, attended his first BarCamp in Orlando. “I was hooked instantly,” he says. “About a month later, I attended Social Dev Camp East in Baltimore where I met fantastic like-minded developers, creatives and community organizers. After that it was obvious to me that Philadelphia needed to hold its first BarCamp. We hope that events like this inspire other folks to step up, organize more events and help lead the city’s technology and cultural growth.”

The events’ content is provided by participants, with the schedule being determined the morning of November 8th. All attendees are invited to present at BarCamp Philly and can sign up on a schedule when they arrive. Participants include web developers, designers, entrepreneurs, software engineers, public relations, marketing and social media specialists, community organizers and students.

Through BarCamp Philly’s website, participants have been exchanging ideas on session topics, which could include entrepreneurship, product design, branding, the broader social impact of social media and new technology, community organizing through social networking, understanding open source licenses, how to develop web or iPhone applications, and the state of the creative economy.

BarCamp Philly is sponsored by The University of the Arts, 30Points Design & Consulting, Canary Promotion + Design, ChoiceShirts, Comcast Interactive Media, Microsoft, Mother’s Work, Umlatte, AlertBot, BadCat Design, Empressr, Independents Hall, P’unk Ave, Rock River Star, and Wharton Learning Lab.

The name BarCamp originates as a play on Foo Camp, an invitation-only event held by open source publisher Tim O’Reilly. The first BarCamp was held in 2005, in Palo Alto, CA. The open invite event was a huge success and thus spawned a series of BarCamps all over the globe from Boston to New Zealand to India to Orlando and on November 8, 2008 in Philly. For more information on the BarCamp concept and events around the world, visit www.barcamp.org.

To schedule interviews and event coverage, please contact:
Megan Wendell, Canary Promotion
(215) 242-6393, megan@canarypromo.com

I just did, and I feel great!

Just launched today: ClassicTowns.org. The site promotes eleven Philadelphia neighborhoods and suburbs as places to move to when you grow up, or to grow up in. Our task was to turn the designs into a easy to use and sophisticated Drupal site. Site visitors are able to easily find detailed and useful information on the towns, as well as on the classic towns program. Site administrators have a powerful set of tools behind the scenes that allow them to easily add more towns in the future and precisely edit each page while keeping the integrity of the design.

The standout feature of the site is a map of all the towns in the program. Feeding dynamic information from Drupal into Flash we were able to build a simple to use system for showing each town’s information in geographic space. The real power is reserved for the site’s administers. Once they’re logged in they just have to drag and drop a town’s icon to precisely adjust it’s placement on the map.

Classic Towns of Greater Philadelphia was designed by Paragraph Inc. for the Delaware Valley Regional Planning Commission.

More on Philly.com

Here’s just one more example of why good design really does matter. Terry Teachout, drama critic for The Wall Street Journal, recently posted his updated guidelines for getting him to review a theater company’s production on his “About Last Night” blog here. It’s a great reminder that ticket buyers aren’t the only people visiting your website and making decisions about your organization based on the site’s design and ease of use. Just as every performance on stage counts, so does every website hit - you never know who’s lurking in the audience.

Teachout says: “Web sites matter–a lot. A clean-looking home page that conveys a maximum of information with a minimum of clutter tells me that you know what you’re doing, thus increasing the likelihood that I’ll come see you. An unprofessional-looking, illogically organized home page suggests the opposite. (If you can’t spell, hire a proofreader.) This doesn’t mean I won’t consider reviewing you–I know appearances can be deceiving–but bad design is a needless obstacle to your being taken seriously by other online visitors.”

Our most recent theater company website launch: www.pigiron.org We think it’s a pretty good example, even if we do say so ourselves.

Hire Us or We’ll Smash Your Face In

Clearly they’re not concerned with presenting a friendly face to the public. You’ll hire them, or it’s shoveling time. I guess it’s shoveling time either way.

UPDATE: The image we posted became the top Google image search result when searching for this contractor. They called us and were upset that our posting of their own advertisement would hurt their business. They also didn’t like the caption, but hey, look at that dude. He’s going to smash your face in! I blacked out their identifying info. I like my face the way it is, thanks.

The Water We-Take-Your-Money Bureau

Only a city service could get away with this. The name says it all: They’re set up to collect money, providing water is not the first priority.

Last Thursday night we hosted our first (of many, I hope) Drupal meetup here at the office. We had a pretty great turnout and a room full of Philly Drupal folks who did not hesitate to dive right in to a number of detailed discussions on best practices, good and bad modules, and even some business practices for those of us who have our own businesses or freelance. We’ll definitely be doing this again. If only so we can develop a secret handshake.

Shai Gluskin of content2zero posted his photos here.