For that, I used the fantastically simple mac app, Glyphs. It gets an A+ for suiting my needs perfectly. I put in a B+ amount of effort for results I’m pleased as punch with, though as I learn & test I may shoot for minor improvements from time to time. The font icons may render a tad on the jagged side for older machines, but it’s a fair tradeoff when you’re browsing from a retina iPad.

In addition to Icon Fonts are Awesome, check out Displaying Icons with Fonts and Data- Attributes from John Hicks for help with implementation. If you’re looking to create custom web fonts, check out Shifticons.

ol li{
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
}

The -o and -ms prefixes are wishful thinking, but I believe IE10 will offer support. Here’s a JSFiddle with a general idea of what I was getting at: http://jsfiddle.net/Cut3V/, and here’s an example without the column-break-inside code: http://jsfiddle.net/6vsgf/. Browsers still handle column-count in a variety of ways, so implement with the appropriate level of consideration.

media screen and (min-width: 1234px) and (min-height:700px) {
body {font-size: 137.5%;}
}

This bumps body copy up to 22px for those bold enough to view the site at least 1234px wide. Why 1234px? Just because that’s where, with all % values for widths & container padding, my site hits its max-width.

What’s with the vertical media query? I used min-height to target screens that are wide enough to trigger the change, but not tall enough for it to make sense. As an example, my wife has an 11” MacBook Air that has a screen resolution of 1366px X 768px. With the menu bar & browser window, the screen is not tall enough to trigger that final bump up in font-size unless you enter into full screen browsing, which to me is a good thing.

But maybe vertical media queries could do much more than this. For projects where the fold *gasp* is a concern, perhaps setting min/max-height could be a new way to control how content is served up to screen widths and heights of any size. If you just have to get that sign up button in view without a scroll, you could trigger a smaller banner image or nav bar to make room when necessary on shorter screens.

For what it’s worth, it’s stuff like this that gets me excited about the future of web design. We’re leaping past any point where the word webpage makes any sense, and into a a world where what is seen at any one screen size (or Photoshop comp) only captures a sliver of the display capability responsive websites muster.

For those planning to attend, please feel free to comment below with anything in particular you’d like to cover. There’ll be plenty of resources at your disposal as well as time for discussion and collaboration. Also, please bring your computer and be ready to do some light coding. See you in just over a week!

Fine control remains elusive – kerning, character spacing – controlling these aspects are both difficult to specify for numerous reasons. This is frustrating to designers who love typography and want to have that finer control.

Huzzah! I couldn’t agree more. As web designers, now that our type options have drastically expanded, we want the same level of control over them that print designers do. That includes kerning as well as more interesting & intricate typographic arrangements. The key here is specificity. If we can target letters and words with CSS the sky is the limit. For further reading here are some posts that my friends and I have written on the topic:

• Controlling Web Typography: An older post I wrote summing up Lettering.js and explaining why we hope CSS makes it obsolete
• A Call for ::nth-Everything: This is Chris Coyier’s take, but much more comprehensive and clearly reasoned than mine.
• Lettering.js: I like to think of the gallery as a series of case studies for how enhanced selectors would be useful.
• Dave Rupert’s original Lettering.js post: A great introduction to how Lettering.js came about and how to implement it.

One interesting potential issue with finer control could be what happens if we target specific letters or words on a multi-lingual site. Something as detailed as this might make no sense, or break visually in another language. This was a point Christian Heilmann raised last summer at ConvergeSE, and something I don’t yet have a good answer for.

Overall, I think that the fewer situations where web designers have to resort to image replacement for text the better.

To take things further, I added in a CSS transform to get that skew, then dropped in FitText to make it all scalable for use in your fluid/responsive layout. Get a copy of Issue 221 & check it out for yourself!

After a morning of team planning and intensive YouTube research, we settled on building a page for a fictitious gameshow on the Knuckleodeon Network called Triple Dare. Reagan put together some fantastic illustrations, and I designed them into a layout that I hope leaves lots of room for code-out interpretation. There are quite a few places where interesting animations, transitions, transforms, and interactions could be built in. Heck, this thing could also be built responsibly... I mean responsively... I mean both ;)

Be sure to read Reagan’s post to get the low down on his illustration process. We’re all very excited to see what people come up with. Happy front-ending!

p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

During a day or so of road testing I noticed some pretty funky widows, so I fine-tuned my stylesheet to only target narrow columns, like the ones on my info page, which is a scenario where CSS hyphenation really comes in handy. Overall, I’m not sure what to think about fluid columns and widows—they’re bound to show up at varying widths. I try to avoid them at my defined max-width, but have plans to test the wp-Typography plugin in a responsive setting once we perform some server upgrades for the blog (taking our old Media Temple DV from php 4 to 5). I’ll be sure to report back when we get there.

Update (9/21/11): I’m happily using the wp-Typography plugin to prevent widows now that our servers have been upgraded. Things seem to be reflowing smoothly in my responsive layout. This plugin has loads of features, hyphenation, spacing control, character replacement, etc., that I’ll be experimenting with further soon.

Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.

As I step into my 3rd responsive project with Paravel, I’ve made a habit out of picking apart media-queried sites I happen across, noting how things get rearranged at various widths. At times, it seems as though all of the site architecture & planning goes out the window as content reflows. I’ve also found that what might work very well for one type of content or site might not work so well for another.

Content Stacking

This is unavoidable. Take a 4 column site at full width: as the view narrows, 4 will become 3, then 2, and 1. The most common solution is to stack them on top of each other in chunks (fig. a). Simple enough, but what happens if the first column is really tall? Is the content in column 2 less important than all of the content in 1? It probably is for something like a full-length article, but I can’t help but think that in some cases, this method throws off the hierarchy.

Another approach could be to interdigitate content by folding elements into each other as the view narrows (fig. b). In real terms, what happens if a main column is a tall grid full of product thumbnails, and the sidebar features a coupon or promotion? When those columns are combined, it might be nice to slide the promo in between two product rows instead of shuffling that important piece to the bottom of the main column.

The Content Change-up

Another thing I’ve noticed is that media queries are being used to significantly redesign pages. I’ve seen background colors change and top-level elements move from left to right. If critical thought is applied here those choices may be spot on. But what happens if a user visits at full-width one afternoon and revisits your site in the evening on a tablet, and everything looks completely different? It’s annoying—like someone rearranging the groceries in your pantry every time you closed the door. The power of media queries can be intoxicating, but just because you can doesn’t mean you should.

De-compartmentalize the Workflow

The production model of passing a site down the assembly line from design to development to launch seems to be an inefficient approach for responsive & adaptive site design. I think the Paravel method of gathering around a table & slugging every decision out until launch lends itself to the level of reiteration necessary for these projects. We’ve found that the best way forward is to pull all members of a team together to design, build, test and then evaluate in multiple quick rounds.

Of course, the alternative would be to create designs for every media query you plan to include, but that kind of thinking seems inefficient and fails to take advantage of the device-agnostic approach that responsive web design offers. In my mind, it’s best to build something that works on any possible width or device instead of something that works on all current widths and devices.

Balancing all of these new facets of the web designer’s role may seem overwhelming, but that’s the nature of the profession and one of the reasons why I love it. Honing the craft of content choreography will help us to orchestrate the best experience possible at any screen size or resolution. In time, I believe knowing what works best will become second-nature to us—just like designing progressively enhanced CSSed pages without tables or superfluous markup is now. The best thing for us to do? Practice!

Note: If you’re on any responsive width other than 100% (full), the masked shadows won’t line up. That got me thinking: wouldn’t it be cool if you could scale masked images like you can background images? Maybe it’d look a little something like: mask-image-size:100%;

Thanks to The League of Movable Type and Tyler Fink for providing Ostrich, the font used in the design.

]]> http://trentwalton.com/2011/06/01/more-css-mask-image-text/feed/ 6