Saturday, July 11, 2009

best resources for free icons on the web


styling CSS for printer-friendly page

To help you write the CSS styles for a printer-friendly page, change the media of the regular style to "tty" and the media of the print style to "screen." From the simple stacked layout of the "tty" page, you can hide and show the appropriate divs in order to create a clean, simple print page.

[link href="css/sidebar2.css" rel="stylesheet" type="text/css" media="tty"]
[link href="css/print.css" rel="stylesheet" type="text/css" media="screen"]


When done styling the "screen" page, change the "tty" page back to "screen" and the "screen" page to "print." And follow-up with writing the HTML codes to share your "printer-friendly" page!

Voila! :)

html for printer-friendly page

Found this great article on how to code HTML for printer-friendly pages, and it works!

Here's the important snippet on how to code the HTML for a printer-friendly button option:

If you also want to add a "Print this page" button your blog, add the following HTML snippent anywhere on the page.

[a href="javascript:window.print()"]Print Page[/a]

Remember that the above creates a printer friendly version only in memory and directly submits it to the printer. The user is not able to see the electronic version of the print version unless he prints it to PDF using Acrobat or other PDF creation tools.

If you want to build a functionality like The New York Times or Wall Street Journal paper where readers have an option to convert any HTML page into a text only version which can then either be printed or saved an HTML text file for offline reading, stay tuned for the next part of this tutorial. It involves HTML forms and query parameters.

Saturday, June 20, 2009

the mailto command & its html coding

Found this article on the About.com site. Perfect for a project I'm working right now for MFO!

THE MAILTO COMMAND

by Jennifer Kyrnin

If you want people to send you email from your Web page, you can use the "mailto" tag. Then, when your readers click on the link, an email browser opens up to allow them to send you email.

Setting up a Mailto Link

To write an email link just create an anchor link like you would normally, but instead of "http://" write "mailto:" and then your email address. For example, to set up a link to email me, you would write

If you want to send to multiple people, separate the email addresses with a comma:

But there is so much more that you can do with the mailto links. Most current Web browsers and email clients support more than just the "To" line. You can specify the Subject, send carbon copies, and blind carbon copies.

Advanced Mailto Links

When you create an email link with extra features, you treat it similarly to a CGI script that uses a GET operation (attributes on the command line). Use a question mark after the final "To" email address to indicate you want more than just a "To" line. Then you specify what other elements you would like:

  • cc - to send a carbon copy
  • bcc - to send a blind carbon copy
  • subject - for the subject line

You treat the elements as name=value pairs. The name is the element type listed above that you want to use, and the value is what you want to send. To send a letter to me and cc the Web Design Guide, you would type:
Web Help

To add multiple elements, separate the second and subsequent elements with an ampersand (&).

Finally, when adding a subject, keep this in mind, while you can use spaces, they may not come to your email address as spaces. Well, technically they are, but they are sent as URL encoded spaces, so while your browser would know they are spaces, they look like code to you. It's better to separate your words with underlines rather than spaces, as this make it easy for you to read without worrying about how the browsers will interpret it:

Putting Mailtos Together

results in testing mailto.


Tuesday, June 9, 2009

the way i work: essie weingarten

The Way I Work: Essie Weingarten, Essie Cosmetics

"God gave me an innate ability to pick colors."

From: Inc. Magazine, April 2009 | By: Liz Welch


In 1981, Essie Weingarten boarded a plane bound for Las Vegas with a suitcase full of nail polish and a plan. She wanted to sell her chip-resistant line of varnish -- in 12 unconventional colors, with names such as Baby's Breath and Bordeaux -- to every hotel and beauty salon in Sin City. Back then, there were fewer than 200 nail salons nationwide, and the few cool colors available were for sale only at high-end department stores. Today, Weingarten's company, Essie Cosmetics, sells to more than 250,000 salons and spas worldwide, from Denver to Dubai, and shoppers spend $150 million a year on Essie products. As a small army of sales reps and distributors touts the line salon to salon, Weingarten, 59, jets around the globe, attending fashion shows in Milan, a sales meeting in Santo Domingo, a speaking engagement at Harrods. All the while, she has her eye out for next season's trendy colors.

I usually get up around 5:30 a.m., put on the news and get a little depressed, and then go back to sleep for another hour or two. I'm up by 7:30, and then it's nonstop all day. I met Max [Sortino], my better half and business partner, 21 years ago at a trade show. He owned a company with his ex-wife that sold jewelry for the nails. Remember that? It was very hot in the '80s.

Max and I have breakfast together. He gets up at, like, 4 o'clock in the morning and is an e-mail freak. I am a phone freak. I like to talk; he likes to write. But I must have freshly brewed coffee first. I have a little coffeemaker that only makes four cups, and a mug is two. That's the way we do it. I'm a maniac. If I smell coffee that's not fresh, I won't drink it. I love cappuccino, but I took my machine out to our beach house in the Hamptons, because we were getting addicted! Now, it's a weekend treat.

I'm one of these germ freaks. I shower in the morning and at night. I wash my hair every night and blow-dry it and then blow-dry it again in the morning, because it's curly. Then I have breakfast. If I'm being good, I eat fresh fruit with rolled oats. Sometimes, I'll put a piece of Melba toast with American cheese in the toaster oven or a piece of sourdough with Muenster cheese -- it's almost like a pizza.

I work from the house in the morning, taking care of the important phone calls, because it's quiet. We live on the Upper East Side of Manhattan, and my office is in Astoria, Queens, close to where I grew up. My father died in 1965, one week before I turned 16. My mother had five kids and never worked a day in her life, and yet she took over his party rental business. Back then, there were no women in business, so she was a great role model for me. She's also the reason I went into the nail polish business. If I was a good girl, she would take me to the beauty salon with her every Saturday. That started when I was 6 -- there were only a few boring colors, and I remember wondering, as a kid, Why can't I paint my nails blue?

I arrive at the office around 11 a.m. Sometimes, I will drive in with Max, though he often comes in later. He prefers to work alone from home, but I like being in the thick of things. My office has glass walls, so people can always see me. I have an open-door policy -- if people have questions or concerns, they know they can walk right in. I always say, "If in doubt, just ask." It's safer that way.

I don't have a personal assistant. People think it's funny that I answer my own phone -- I often pick up on the first ring. But that personal touch is important to me; I like to know what people are saying. When your company grows, it can become impersonal.

I rarely have a set office schedule, unless I am traveling. People pop their heads into my office every day, whether it's Elizabeth, my VP of marketing, saying we need to meet to talk about the spring launch, or Tiffani, my head of PR, wanting to discuss interview requests or public appearances.

God gave me an innate ability to pick colors, which is a good thing, because we produce six colors a season, four times a year. I never know when I'm going to see something that might translate into a nail polish. It could be a fabric or a pincushion that just may have the right intensity of pink. Sometimes, I buy a pair of shoes, even if they only have a size 11, because the color is so perfect. Then I give the item to the chemist, who is out in New Jersey, and he matches the color. Sometimes, I imagine a color but cannot find it, so I keep a Pantone color wheel at my desk. I meet with Michelle, my color engineer, and we often actually mix the colors. It's like a kid's art class. We tweak until we arrive at the right color.

I try to go to as many fashion shows as possible -- New York, London, Milan, Paris, Berlin. I see everything, from Oscar de la Renta to Zac Posen and everyone in between. Spring was totally black, white, yellow, and maize -- boring. I came back to my office and told my team, "We have to have colors that are going to put a smile on everyone's face. This country is in a funk." So, I went brighter and fun. I decided to use uplifting names and colors -- there's a bright red called One of a Kind, a pale coral pink called Eternal Optimist, and a bold blue called Mesmerize. I wanted to call that one Obama Mama -- he's our savior -- but we already have Bahama Mama. We thought it would be confusing -- which Mama do you want?

Every day, someone asks, "How do you come up with all the great names?" I keep a list going at all times -- I jot them down in my Mont Blanc notebook, which is my lifeline. I'm devastated, because they don't make this size anymore, and mine is pretty beat up. I love it, because it fits in my clutches and my small bags, so I can always bring it with me. It is jammed with my scribbled notes. When we are ready to name the new line, I sit down with a few people on staff and pass around a list of roughly 16 ideas. People put little check marks next to their favorites, and nine times out of 10, my favorites win. But some don't. No one liked No Pre-Nup.

In the early days, I would drive around Manhattan with a box of nail polish in my trunk, searching for new salons to drop off samples. But in 1983 and 1984, as nail salons started proliferating, I hired sales reps: one for Manhattan, one for Queens, one for Las Vegas. Since then, the whole business model has changed. Now, we work with distributors. They sell our products for us, which means we have to sell our products to them. Either I go, or I send someone, to these sales meetings, where we get 15 minutes to sell them on our product. Then, their salespeople go out and sell to the salons.

That's why we need to get to the consumer directly. We have been doing trade advertising for 15 years and just started consumer advertising five years ago. We get e-mails and phone calls from people in places we used to call flyover states who say, "I saw your nail polish advertised in Cosmo. Where can I find it?" Some people e-mail and say, "Why isn't Essie in our town?" And that gets brought up in our sales meetings, which I have weekly.

I get detailed reports once a week from all the outside salespeople and the 12 in-house staff members who support the field team. I'm in constant touch with my reps in the field. So if my Southeast guy is in Georgia meeting with distributors, he'll stop by salons or spas to take photos of how our product is being displayed so I know what we look like. If a retail outlet is not using shelf talkers -- those little strips that say, "As seen in InStyle" or "Winner of Allure's Best of Beauty Award" -- we can send them a package.

I used to do all the trade shows. But then my knees started to give in. It's such a great way to meet the people who sell our product and form relationships with them. I still go to as many as possible.

I am, like, a numbers freak. I used to look at them every day. It became an obsession. Then Max said, "Why don't you just look at them every month?" That was hard for me. But then I realized, if you have people you trust, you can let go. Now, I ask my VP of sales once a week how we're doing. Or, if we are having a particularly good week, he'll hover around my office, waiting to be asked. He keeps me posted.

I go out for lunch a few times a month, usually meeting with a magazine or if a customer is in from out of town. But if I'm in the office, I don't have lunch until 4 o'clock. I get so wrapped up, and then suddenly I'm starving. I love to cook; it relaxes me. So I'll run across the street to this great market and buy things to make lunch. When we bought the building, 10 years ago, we did a renovation, and I had a kitchen built adjacent to my office.

I f I have appointments in the city, either with designers, beauty editors, or sales reps, I always make a point of popping into random salons to say, "Hi; I'm Essie." And they say, "Manicure? Pedicure?" And I say, "No. I'm Essie." I take out my business card, and then they get all excited, and they start speaking in their native tongue. Who knows what they're saying about me? I ask what colors are really doing well, what's hot. We recently added new products to our line, so I ask if they're selling the cuticle pen or our hand and body lotions.

I've been going to the same manicurist for 20 years and get my nails done every Friday at 5 p.m., unless I'm traveling. She's in a salon on 65th between Madison and Park and has an incredible clientele: high-powered working women. I often find myself networking when I'm there. I was looking to do a charm, a little ballet slipper to put on our color called Ballet Slippers, and, sure enough, I met this woman there who recommended a jeweler, and I had the cutest ballet slippers made.

Media requests come in daily. Usually, it's a quick phone call, though occasionally my PR rep will set up an editor meeting or lunch. Getting product placement or editorial write-ups is even more powerful than advertising, so these meetings are incredibly important. We'll meet in the city at a restaurant or do a deskside meeting with an editor, depending on what we're launching. Our launches are very controlled. We know what the launch date is, 90 days before on long leads, so we do a marketing calendar and a publicity plan.

I also spend a lot of time thinking about marketing. Part of our strategy is to put the voice behind the brand. A lot of people didn't even know there was an Essie! Or they think I am Asian! So we teamed up with an advertising agency to help us with branding and started coming up with a new tag line for each season. The first one was, "Hi. I'm Essie, and I'm a color-holic." The agency came up with that one. But I love coming up with them, too. My favorite was, "From the bedroom, to the boardroom, to the ballroom." And then for a color in this past winter's collection, I came up with the name Rock Star Skinny, and the agency came up with the line, "All of the color, none of the calories."

I often work until 8 or 9 o'clock at night. When everyone leaves, I get a lot done. That's when I do what didn't get done -- e-mails, calls to the West Coast. I need quiet to really concentrate, because I'm a little bit scatterbrained; I'm doing a lot of things at once. I get home late, so Max and I might go out for dinner. Or, if we have had a big lunch, then I will throw together a salad and call it a night. I do my cooking at the beach house on the weekends. I like to read before bed -- Danielle Steel and Sidney Sheldon are my favorites, but often I am so tired, I conk out. If we're up, Max and I both love David Letterman, but I am addicted to Dancing With the Stars. I'm a frustrated dancer. I thought I was going to be a prima ballerina.

The end of last year was the first time our monthly sales were down. It was devastating. We're used to a double-digit increase. We were going to close almost 20 percent ahead for the year. Max tracks that with our accountant -- I used to. Now, I don't even look until the end of the month. And while I'm not happy with the way the economy is falling out, I always say, "We still make women feel good for very little money." We're the affordable luxury. Even if you're out of a job, you still have to look perfect. So, we're in a really good spot in a bad economy.

the way i work: matt mullenweg

The Way I Work: Matt Mullenweg

Matt Mullenweg, founder of Word Press and Automattic, manages a successful Internet business where everyone is working from home.

From: Inc. Magazine, June 2009 | By: Matt Mullenweg, as told to Liz Welch


As a high school student, Matt Mullenweg worked on open-source software projects in his bedroom. Seven years later, he still does most of his work from home. Mullenweg, 25, is the founder of Automattic, the company behind the open-source blogging tool WordPress and a handful of other software projects. WordPress.com powers 12 million blogs, including those of The New York Times, which invested in Mullenweg's company last year. Although Automattic's headquarters is within walking distance of Mullenweg's San Francisco apartment, he rarely visits the place. Instead, he spends his days either traveling the world to meet WordPress fanatics or holed up in his home office, where he often blasts Jay-Z and writes software code into the wee hours.

In the morning, I have certain aspirations. One of my goals is to avoid looking at the computer or checking e-mail for at least an hour after I wake up. I also try to avoid alarm clocks as much as possible, because it's just nice to wake up without one. I leave my shades up a bit, so I usually wake up about an hour after the sun rises. I usually don't eat breakfast, and I avoid caffeine. I've got enough stimulating things in my life already. I also avoid morning meetings: The earliest meeting I'll do is 11 a.m.

I like to read first thing in the morning. I'm addicted to the Kindle. I read a lot of business books, because I feel like I should figure out how to be a real businessman before someone figures out that I'm not one. I really enjoy reading classics as well, which I try to work in once every two months. Reading is my break. Otherwise, I go to sleep and wake up thinking about WordPress.

I travel a lot, but when I'm in San Francisco, I usually work from home. Everyone else works from home, too. We're a virtual company. We recently got an office on Pier 38, a five-minute walk from my apartment. I'll go to there once a week, usually Thursdays, and for board meetings, which happen about once every two months. We leased it so we wouldn't have to keep borrowing conference rooms from our VC partners. It's kind of sad; we have this great space right on the water -- and six days a week, it's empty. Of the 40 people working for the company, eight are in the Bay Area, but that's just a coincidence. They could be anywhere in the world.

We all communicate using P2, something we launched that allows users to publish group blogs in WordPress. It's a bit like Twitter, but the updates come in real time. With P2, we can share code and ideas instantly. There is a dedicated channel for each part of the company, and when there's a new message, it shows up in red. It may be someone talking about development or what he or she had for breakfast. I also use Skype for one-on-one and mini group chats.

In my home office, I have two large, 30-inch computer monitors -- a Mac and a PC. They share the same mouse and keyboard, so I can type or copy and paste between them. I'll typically do Web stuff on the Mac and e-mail and chat stuff on the PC. I also have a laptop, which I have with me all the time, whether I'm going overseas or to the doctor's office. I'm pretty rough on my laptops. I go through about two a year. I keep a server for my home network in the closet. I really enjoy computer networking. I sometimes do tech support for our employees who live in the Bay Area.

One of my favorite programs that we didn't make is Rescue Time. It runs in the corner of my computer and tracks how much time I spend on different things. I realized that even though I was doing e-mail only a couple of minutes at a time, it was adding up to a couple of hours a day. So I'm trying to reduce that. I have a WordPress plug-in that filters all my messages based on the sender's e-mail address -- so high-priority e-mails go into one folder and the rest go into others. Tim Ferriss, who wrote The 4-Hour Work Week, advocates checking e-mail twice a week, but that is too severe for me. Instead, I'm trying to implement Leo Babauta's approach from The Power of Less. He suggests small steps, like checking e-mail five times a day instead of 10. It's like dieting: People who binge diet gain it all back. That happens to me with e-mail.

I listen to music every day, a lot of jazz -- Dexter Gordon and Sonny Rollins. I also like Jay-Z and Beyoncé. I have an analog stereo that was hand built in Japan by a guy who makes a few systems a year. The aural experience is mind-blowing. Music helps me when I'm coding, which is still my priority. When you're coding, you really have to be in the zone. I'll listen to a single song, over and over on repeat, like a hundred times. And I turn off instant message and e-mail. If you are taken out of the flow, if that little toaster pops up that says you've got mail -- and you look at it, you've lost it. You're juggling variables and functions and layouts. The moment you look away, it all falls to the ground, and you spend 10 minutes getting it all back in the air again.

I also manage the support, usability, and product development people who are scattered all over the globe, from Alabama to Ireland to Bulgaria. My management strategy is to find extremely self-motivated and talented people and then let them go. There's no manager looking over your shoulder every day, so you need to be able to completely direct yourself. For every person we hire, we might get 800 applications. We always start people on a contract basis. And many of the people we've hired are contributors to the open-source project. It's what they were doing for fun at night after they'd already worked for eight hours a day, only now they'll get paid for it.

I'm also the primary person on Akismet, Automattic's anti-spam software for websites, which we created from scratch. We just added the first engineer six months ago, but for the past four years, it's been just me. I decided to do it because I was worried about my mom. She hadn't started a blog yet, but I had this crazy fear that when she did, she'd be bombarded by spam for Viagra and think that had something to do with what I did all day.

I go out for lunch whenever I can. I really enjoy lunches. There's something very personal about sharing food with someone. It's a chance to develop personal connections with folks. Often, I'll have lunch with Toni Schneider, my CEO. He and I get along superwell, which is one of the reasons I think the business has worked. He brings the gravitas because he's a digital native -- the former CEO of Oddpost, a webmail company Yahoo acquired in 2004. We'll go to lunch at 12:30 and stay until 5. If I'm in town, I'll get together with Toni as frequently as we can, because we really enjoy each other's company.

I'm very disorganized. I'm wildly late all the time and really bad at keeping a schedule. That is one of the many reasons I love Maya [Desai]. Her official title is "anti-chaos engineer," which is another way of saying office manager. She does a bunch of things for Automattic, including streamlining my schedule and arranging my travel. Last year, I was on the road for 200 days and clocked 175,000 miles. That's seven times around the globe. The bulk of my travel is to WordCamps. We did the first one in San Francisco in 2006. We invited people from the local tech community to come talk about open source. Later, we decided that, rather than having everyone come to us, we would go wherever people want to have the camp. So instead of paying thousands of dollars to go halfway across the world, it's 20 bucks to go down the street. And for that, you get a full day of great speakers, a T-shirt, lunch, and an open bar. Since then, there have been hundreds of WordCamps in countries such as Argentina, Japan, and China. We host one annually in the Bay Area, but the rest are organized by local tech communities.

Of the 45 or so WordCamps a year, I go to about half. If I went to all of them, I would be traveling practically every weekend. I open up each event with my "State of the Word" speech, which gives a broad overview of WordPress and the history of open source. I feel it's my responsibility to spread these ideas, because they have had such a profound effect on my life. The smallest gatherings have 50 participants, and the largest have about 500. In the Philippines, people treated me like I was a rock star. After the camp was over, I spent two hours taking pictures and signing autographs. People were like, "Will you sign my laptop?" "Will you sign my badge?" "Will you sign my body part?"

I use my camera when I travel to document my day. The photos are autobiographical -- because my memory's so bad, I'll often forget everything about a trip. Then, usually on planes, I process, upload, and edit those photos on my laptop and then craft a narrative of what I've seen throughout each day. It's like a visual diary. But it's hard to keep up with: I have photos from 2005 I haven't posted on my blog yet. On a trip to Vietnam last February, I took 2,000 to 3,000 photos. They say the difference between an amateur photographer and a pro is the amateur shows you everything. I'm somewhere in between. I'll post maybe a quarter of how many I took.

I used to think constantly about building an audience for my blog. But now my attitude is, If I'm not blogging for myself, it's not worth it. So I don't post once a day, only when it feels natural. Some people complain -- they say, "Write more about WordPress; we don't want to see photos of kids in Vietnam," but I don't really care. I really like posting photos of places I've been. For my 25th birthday last January, I published a list of 2009 goals on my blog. It included learning Spanish, learning how to cook, and posting 10,000 photos. The Spanish is going all right, but I'm failing the cooking one. I go out for every meal. If you open my refrigerator, you will find Girl Scout cookies and barbecue sauce. But I will reach the photo goal. By March, I'd taken about 6,000 photos and posted 2,000 of them.

People write a lot of comments on my blog, and I actually read and manually approve every comment before it gets posted. I think the broken-windows theory -- that a broken window or graffiti in a neighborhood begets more of the same -- applies online. One bad comment engenders 10 more. I'll happily approve a comment from someone who completely disagrees with everything I believe in, but if I get a positive comment with a curse word in it, I'll edit it out. My blog is like my living room. If someone was acting out in my house, I'd ask that person to leave.

I look at our numbers every day -- usually after 5 p.m. -- via an internal dashboard, where we track 500 to 600 statistics, from the number of words people are posting to how often they're logging in to WordPress.com. I wrote a lot of the software, and I'm most interested in the activity numbers -- how many people use the site every day. All the numbers update instantly.

I do my best stuff midmorning and superlate at night, from 1 to 5 in the morning. Some people don't need sleep. I actually do need sleep. I just sleep all the time. I'll catch naps in the afternoon, or I'll take a 20-minute snooze in the office -- just all the time. Our business is 24 hours. Our guys in Europe come online at midnight. Sometimes, I will go out at night, come home from the bar at 2 or 3 a.m., and then go to work.

For WordPress, we're trying to set up a community that will be around 10 to 30 years from now, that's independent from the whims of the market. I feel like the nonelected benevolent dictator: It's my responsibility to meet as many users as possible and direct the software project in a way that reflects their interests. Last year, I probably met 2,000 or 3,000 people who make their living from WordPress. We want to be like Google, eBay, Amazon -- they all enable other people to make far more money than they capture. And that's ultimately what we're trying to do. We're trying to create a movement.

My mom started a blog a couple of weeks ago. Six years into this, and we finally made it easy enough for my mom to use.

Wednesday, May 20, 2009

making a holga photograph without the holga camera



Great Photoshop tutorial! Especially if you love the Holga look and don't have that cute Holga camera.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

HOW TO FAKE A HOLGA PHOTOGRAPH

If you don’t already know, the Holga camera is a $15 plastic toy camera, made in China and celebrated by many photographers for it’s blur, vignette, light leaks and low-quality aesthetic.

I’ll assume that you don’t want to go through all the hassle of using film, developing it, dealing with negatives and printing and storing and all the rest, so I’ll show you the best way I know how to fake a Holga image using Photoshop.



1. Crop it square. Holgas have square negatives, like many other medium format cameras. Use the crop tool, make sure you don’t have any sizes entered and hold shift to keep it perfectly square.

2. Use Filter > Distort > Lens Correction to darken the edges. Under where it says Vignette, drag the darken/lighten slider almost all the way to the left. Now pull the midpoint slider just a little to the right. Don’t worry about copying my numbers exactly, just make sure yours looks good.

3. Copy your Background layer and rename it Sharpen. Use Filter > Other > High Pass… at a low value (I used 2.2) to sharpen it up a little bit, set the layer blending mode to Hard Light and the opacity to 20%.

4. Copy your Background layer again, drag this one above the Sharpen layer and name the new copy Blur. Use Filter > Blur > Guassian Blur… at a fairly low value (I used 3.0) to get the image nice and fuzzy. Set the layer mode of this layer to Overlay and the opacity to 60%.

5. Create a Curves adjustment layer. Create an S in the line (see the screenshot) to give the picture a good amount of contrast.

6. Select the layer mask for the Curves layer and use a big brush with 0 hardness and low flow (0 - 20) to paint black on most of the middle part of the picture. You’re basically just enhancing the vignetting with this, so you want a little left around the edges.

7. Since most people usually use black & white film with these cameras for ease of home developing, I usually use a Black & White adjustment layer to complete the effect.

And there you have it, you’ve holga-ized your image. Good job! Here’s another picture that I ran through this same process. Fun, isn’t it?

Stay tuned to for cross-processing, lomography, light leaks, fake tilt-shift and more!

Thursday, May 7, 2009

making modular layout system

By Jason Santa Maria

For all of the advantages the web has with distribution of content, I’ve always lamented the handiness of the WYSIWYG design tools from the print publishing world. When I set out to redesign my personal website, I wanted to have some of the same abilities that those tools have, laying out pages how I saw fit, and that meant a flexible system for dealing with imagery.

Building on some of the CSS that Eric Meyer employed a few years back on the A List Apart design, I created a set of classes to use together to achieve the variety I was after. Employing multiple classes isn’t a new technique, but most examples aren’t coming at this from strictly editorial and visual perspectives; I wanted to have options to vary my layouts depending on content.

If you want to skip ahead, you can view the example first.

Laying the Foundation

We need to be able to map out our page so that we have predictable canvas, and then create a system of image sizes that work with it. For the sake of this article, let’s use a simple uniform 7-column grid, consisting of seven 100px-wide columns and 10px of space between each column, though you can use any measurements you want as long as they remain constant.

All of our images will have a width that references the grid column widths (in our example, 100px, 210px, 320px, 430px, 540px, 650px, or 760px), but the height can be as large as needed.

Once we know our images will all have one of those widths, we can setup our CSS to deal with the variations in layout. In the most basic form, we’re going to be dealing with three classes: one each that represent an identifier, a size, and a placement for our elements.

This is really a process of abstracting the important qualities of what you would do with a given image in a layout into separate classes, allowing you to quickly customize their appearance by combining the appropriate classes. Rather than trying to serve up a one-size-fits-all approach to styling, we give each class only one or two attributes and rely on the combination of classes to get us there.

Identifier

This specifies what kind of element we have: usually either an image (pic) or some piece of text (caption).

Size

Since we know how our grid is constructed and the potential widths of our images, we can knock out a space equal to the width of any number of columns. In our example, that value can be one, two, three, four, five, six, or seven.

Placement

This tells the element where to go. In our example we can use a class of left or right, which sets the appropriate floating rule.

Additions

I created a few additions that be tacked on after the “placement” in the class stack: solo, for a bit more space beneath images without captions, frame for images that need a border, and inset for an element that appears inside of a block of text. Outset images are my default, but you could easily switch the default concept to use inset images and create a class of outset to pull them out of the content columns.

The CSS

  1. /* I D E N T I F I E R */
  2. .pic p, .caption {
  3. font-size: 11px;
  4. line-height: 16px;
  5. font-family: Verdana, Arial, sans-serif;
  6. color: #666;
  7. margin: 4px 0 10px;
  8. }

  9. /* P L A C E M E N T */
  10. .left {float: left; margin-right: 20px;}
  11. .right {float: right; margin-left: 20px;}
  12. .right.inset {margin: 0 120px 0 20px;} /* img floated right within text */
  13. .left.inset {margin-left: 230px;} /* img floated left within text */

  14. /* S I Z E */
  15. .one {width: 100px;}
  16. .two {width: 210px;}
  17. .three {width: 320px;}
  18. .four {width: 430px;}
  19. .five {width: 540px;}
  20. .six {width: 650px;}
  21. .seven {width: 760px;}
  22. .eight {width: 870px;}

  23. /* A D D I T I O N S */
  24. .frame {border: 1px solid #999;}
  25. .solo img {margin-bottom: 20px;}
  26. Source: /code/modular-layout-systems/1.txt

In Use

You can already see how powerful this approach can be. If you want an image and a caption on the left to stretch over half of the page, you would use:

Or, for that same image with a border and no caption:

You just tack on the classes that contain the qualities you need. And because we’ve kept each class so simple, we can apply these same stylings to other elements too:

Caveats

Obviously there are some potential semantic hang-ups with these methods. While classes like pic and caption stem the tide a bit, others like left and right are tougher to justify. This is something that you have to decide for yourself; I’m fine with the occasional four or left class because I think there’s a good tradeoff. Just as a fully semantic solution to this problem would likely be imperfect, this solution is imperfect from the other side of the semantic fence. Additionally, IE6 doesn’t understand the chain of classes within a CSS selector (like .right.inset). If you need to support IE6, you may have to write a few more CSS rules to accommodate any discrepancies.

Opportunities

This is clearly a simple example, but starting with a modular foundation like this leaves the door open for opportunity. We’ve created a highly flexible and human-readable system for layout manipulation. Obviously, this is something that would need to be tailored to the spacing and sizes of your site, but the systematic approach is very powerful, especially for editorial websites whose articles might have lots of images of varying sizes. It may not get us fully to the flexibility of WYSIWYG print layouts, but methods like this point us in a direction of designs that can adapt to the needs of the content.

View the example: without grid and with grid.

PS - This article reminds me of The Grid System Leon talked about the other day.