I’ve been working on a responsive project with lots of content that will need to be updated frequently. Rather than using a more traditional HTML & CSS column/grid approach, I opted for column-count to keep everything extra efficient & scalable. The trouble is, sometimes content gets split across columns awkwardly. For example, In webkit browsers I noticed numbered list items were being split in half, which is less than desirable. Then, I found CSS column break properties. It saved the day:
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.
When you’re enjoying the Super Bowl this weekend, be sure to check out sb46.twitter.com. Last month, Paravel had the privilege of working with Twitter and Mass Relevance to build the responsive site. You can track TPM (tweets per minute), and total tweets for each team as well as follow tweets from coaches, players, analysts, and fans.
I’ll never look at my 1 year old’s car seat the same way again. My wife and I lugged it (along with suitcases, diaper bags, and of course the kid himself) from airport terminal, to cab, to train station, to our hotel in Nottingham to be at New Adventures Conference this year. But without a doubt, those hours of travel were more than worth it. It’s amazing how irritability and exhaustion fade away when you find yourself surrounded by people who do what you do, who love what you love. New Adventures Conference was many things for me, but most of all I found it nourishing.
It’s what happens when conference organizers look beyond logistics and put love into every component. Simon & Greg’s careful consideration & ordering of speaker topics combined with their overwhelming hospitality set a great tone that seemed to be amplified by all who partook in the week’s activities. On a personal note, I loved introducing my wife and son to industry comrades and dear friends. Seeing little Henry passed around Simon’s house was pure magic. So was watching him flirt with Aymie, Denise, and Naomi. I’ll be sure to have a sit-down with him about not laying it on too thick one of these days.
Along with speaking, I had the privilege of guiding a workshop. We looked into the basics of setting type (responsively), some of my favorite CSS properties for type, and of course Lettering.js and FitText. During the last hour of the workshop, participants were let loose to build their own stuff. I provided a handful of screenshots from The Movie Title Stills Collection, curated lovingly by Christian Annyas, and challenged everyone to recreate them with HTML, CSS, and Lettering.js. I was amazed to see what people came up with. Here are some samples of their work. I’ll be updating this post as more come in. Also, I’ll post links to video & slides from my talk as they make their way online.
Our pals at United Pixelworkers asked us to design a t-shirt to accompany the launch of their lovely new responsive site. Reagan came up with this design inspired by old union logos, and kindly let me slap some texture on it before sending it off to print. You can get your very own shirt here.
I’ve been tinkering with the font-size and the media queries that trigger width-based changes for this site regularly over the past month. I thought that maxing out at 20px for body copy at widths above 900px would be my final answer, but I decided to drop in one more increase last week:
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 web_page_ 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.
The time for New Adventures is nearly upon us! I’ve been building slides for my talk as well as prepping materials for my workshop on controlling web typography. The plan is to spend some time exploring the finer points of using web fonts and setting type on the web, then experiment with newer CSS properties and Lettering.js. Throughout the workshop, we’ll discuss fluid content and responsive web design as it applies to our typographic explorations, which I’m particularly chuffed about. Chuffed? Did I use that word correctly?
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.
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.
Yesterday Issue #2 of The Manual arrived. I cracked it open to read just one article before bed and wound up reading the entire thing straight through. I really do love that this publication exists. Sure, these articles would make fine blog posts, but there’s something about reading The Manual without the glow of a window-filled monitor or sound of email notification dings to stifle your attention. It gives one the space to think about their work beyond the tasks directly in front of them. Plus, it’s nice to read a string of articles that feel lovingly pulled together and beautifully presented.
I’m honored to have been a part of this Issue alongside, Alex, Mark, Karen, Cennydd, and Josh. Also, it was thrilling to see something I’d written elevated by the illustration work of Paul Blow.
Gosh, what an across-the-board privilege. Thank you to Andy, Carolyn, and Jez for the opportunity. Be sure to visit alwaysreadthemanual.com and snag yourself an annual subscription.
Yesterday must have been an exciting day at the Twitter offices. They released lots of new stuff, including a way to embed tweets. I thought I’d test it out in a responsive setting, and it works like a charm.
Another amazing release today that deserves your attention: Embedded Tweets!dev.twitter.com/docs/embedded-…Put Twitter EVERYWHERE!!!
