Deal-breaker problems with CSS3 multi-columns

Posted by & filed under Articles.

I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. Sure, use them in experimental sites, and maybe even in mainstream sites in small doses with very particular types of content. But for most content, I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.

Balancing column heights

The first problem is how the browser should handle one or more extra lines of content if the amount of content cannot fill up each column equally. In my opinion, the extra content should come at the bottom of the first columns, so that columns further to the right are never longer than columns further to the left. This is pretty standard practice in print design, and having it any other way just looks really strange. At least to me. Take a look and you decide: (more…)

Thoughts on my first time at SXSW

Posted by & filed under Announcements, Articles.

I’ve been back from my first SXSW for a week now, and I have to say that overall I had a really great time!

I’ve heard a lot of complaining about how SXSW Interactive isn’t what it used to be, it’s too big, you can’t run into your friends, you can’t get into parties, etc. Since this was my first time, I have nothing to compare it to, but I can say that I was still able to meet a lot of the people I wanted to and make some really great connections with smart, talented people in the web design industry. My situation is a little bit different than most people who attend SXSW, however; I’m an author and speaker in addition to being a working web designer, so I think I do stand to get work in the writing and speaking areas of my career as a result of networking at SXSW. If I wasn’t an author and speaker, though, I don’t think SXSW would have been as beneficial in building my professional network. I do see how it’s both too insular and big for being as effective at that as other conferences or events could be.

The first couple days, I had a hard time getting into any sessions—or at least any I really cared about. I wasn’t terribly impressed with the quality of the presentations I did see and didn’t feel like I was learning much. But after the first couple days, I finally got into some really excellent sessions that gave me new ideas for things to try in my projects and career. I’ve felt like I’m in a bit of rut lately, since I haven’t had much client work to do, and have felt discouraged about my career. But after seeing some of these great sessions, I feel re-energized about what I do, the value it has, and where I can take it. That’s probably the most valuable takeaway from SXSW for me, so if you’re trying to decide whether to go to SXSW next year, that may be a good reason to decide yes. (more…)

SXSW stuff: book giveaway, my panel, more

Posted by & filed under Announcements.

Next Thursday, I’m flying out to Austin for my first SXSW. I’m excited and a little overwhelmed. But let’s start with the exciting stuff.

Meeting you

I’m excited to meet you guys! Please come up and introduce yourselves. Hooray for new friends! To find me, follow me on Twitter. I haven’t yet figured out which app to use for planning my schedule. (That’s one of the overwhelming things. More on that later.)

Book giveaway

I’m going to have a few copies of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, to give away. Want one? Find me and tell me why you want to learn about flexible design. iPad is an acceptable one word answer. Then presto, the book (if I haven’t given them all away yet) is yours!

I’ll probably also have flyers with a discount code for buying Flexible Web Design. Hopefully.

My panel

I’m presenting in the CSS3 Design with HTML5 workshop at 3:30 on Saturday in Ballroom F, with Christopher Schmitt and Stephanie Sullivan. Come check it out. As long as you’re not going to heckle me and post mean things on Twitter, that is.

Halp! I’m a noob!

Ok, now the overwhelming stuff. I have no idea how this SXSW thing works. If anyone has any essential tips, or links to articles with tips, I will love you forever. Some of the questions that are going through my mind:

  • How many business cards should I take with me?
  • Which of the myriad scheduling apps should I use?
  • What are the best iPhone apps to help me through? (Note: I don’t have an iPhone, just an iPod Touch. Don’t hate me.)
  • Which are the best events and parties to go to for schmoozing?
  • Which are the best parties to go to for having fun? (Note: I don’t drink. But I still like to have fun.)
  • What do women typically wear during the day? What about to parties at night?
  • Where can I eat good food for cheap?
  • Does Austin have any good bakeries, and if so, how can I get my hands on some delicious cookies? (This is always my first question when traveling. I always try to find the nearest bakery to my hotel. Sadly, most cities do not have bakeries up to my standards. At least, not cookie bakeries.)

Ok, that’s enough for now. Again, come meet me, see my panel, hang out.

More debate on designers writing HTML and CSS

Posted by & filed under Articles.

The debate of whether web designers should know how to write HTML/CSS has started up again, sparked by Elliot Jay Stocks’ tweet: “Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.”

Of course, 140 characters couldn’t capture his whole opinion on the subject, so he wrote a blog post followup. I strongly recommend reading it. I really agree with it.

Also, he later tweeted: “My new opinion, based on insight from commenters: You DON’T need to know how to write HTML/CSS. But in many scenarios it can be useful.”

I agree with this too, for the reasons explained well by Mark Boulton. A web designer doesn’t necessarily need to know how to write actual HTML and CSS. But she does need to know about the limitations imposed by browsers, the strengths and weaknesses of the medium. Writing HTML/CSS can make understanding and designing around these limitations a lot easier. But you can come to this understanding without learning HTML/CSS first.

Basically, my opinion is still the same as it was when I wrote Should web designers build their own pages? back in June 2008. Check that article out for my full opinion—including my very own architect analogy! (Seemingly a must whenever debating this topic.)

70+ essential resources for creating liquid and elastic layouts

Posted by & filed under Articles.

I often get asked for my recommendations of resources to learn how to create liquid/fluid and elastic layouts. My first answer is, of course, my own book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. Hey, is it so bad to be proud of your work? It’s the only book out there entirely devoted to designing and building flexible web sites, and the dozens of layout techniques it covers can also be applied to fixed-width design. But I’ll shut up about my book now; if you’re not the book-buying type, here are over 70 online resources to get you started creating attractive and robust flexible web pages.

Design inspiration

It’s always helpful to look at existing liquid and elastic sites to get inspiration for how to design your own. I’ve pulled together several sources of flexible design inspiration in a couple former blog posts on my site:

Templates

Even if you don’t read my book, you can download the example and exercise files from the book’s companion site. They essentially give you several liquid and elastic layout templates or starter pages that you can use to build your own liquid and elastic sites.

Here are some other layout templates:

(more…)

Roundup of Font Embedding and Replacement Techniques

Posted by & filed under Articles.

This post was last updated February 2010

Although @font-face, the CSS method for embedding and using any font in a web page, now enjoys rather good browser support, it still has some limitations that keep people from using it. Chief among these is the fact that the license of most fonts, even free ones, do not allow re-distribution over the web using @font-face. Because of this, a number of services and technologies are springing up that provide alternate ways to get non-standard fonts into your pages. I was unable to find any place that listed all of the major @font-face alternatives, so I decided to do my own roundup to provide the basic info on each.

This roundup of alternatives is not meant to discourage the use of @font-face. In the spirit of progressive enhancement, I wholeheartedly think it’s ready to use (with the right fonts, of course). But, in case you are unable or unwilling to use a pure @font-face solution, or you’re just curious what your other options are, here’s are the most popular services and techniques out there for you right now.

Note: This a rapidly evolving area of web design. These solutions are going to change and more are going to be added. I will try to keep this page updated as things change, but if any of the changes are so big that it makes the most sense to just create a new page, I’ll do that instead. Either way, I’ll post a note here indicating where the latest updates are.

Font Embedding Services

These services all make use of @font-face, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal.

Typekit

Status

Open to all.

Method

Subscription to a font library from multiple foundries by month or year. JavaScript used to connect your site with remote font library. You customize CSS to work with the selectors and tags you need, as well as create a font stack to be used as a fallback if @font-face is not supported, but the CSS is in the JavaScript, not your own sheet. sIFR and Cufón will also be used as fallbacks.

Pricing

Freemium. Free “Trial” account gives access to smallest number of fonts and can be used on one web site. “Personal” account for $24.99/year, “Portfolio” account for $49.99/year, and “Corporate” account for $49.99/month increase limits on fonts, bandwidth, and number of sites.

More Info

(more…)

333 free handwriting and hand-drawn symbol fonts

Posted by & filed under Articles.

I’m currently designing a logo where the client wants to use a font that looks handwritten and fun, but still professional and sophisticated. I’m not a big fan of most handwriting fonts, as they are often too messy or cutesy looking to do anything practical with them. It’s been a struggle to find something I think will work.

Luckily, I ran into a large source of free handwriting fonts called Fonts for Peas, part of the kevin & amanda blog. These are fonts that are meant to be used for scrapbooking, family blogs, and the like, so most of them are pretty cutesy. But, with 333 to currently choose from, you’re bound to find a few that you could use. All of the handwriting fonts are based on actual handwriting samples that readers of the blog send in, so they’re pretty diverse. I downloaded a couple dozen myself and am excited to try them in my logo comps.

(more…)

I’m on Twitter now. Yes, finally.

Posted by & filed under Announcements.

I am not embarrassed or ashamed to say that I have only been on Twitter (@zomigi) for two days. That’s right: two days.

I’m not an early adopter of technology unless it is really going to make my life easier or happier. I’m also not one to give up on something old, if it’s working for me, just because there is something newer and trendier out there. And, I’m not a fan of clutter—virtual kinds as well as physical. I have ADD tendencies, so I have to be careful to not overwhelm myself with too much “stuff.”

I started hearing about Twitter in 2007. At the time, I didn’t see any need to be on there. There weren’t that many people on there that I would have wanted to keep up with. I didn’t and don’t have the time to get caught up in people’s personal, day-to-day lives—just give me my practical articles and tutorials and I’ll be on my way. Blogs could do this for me (and still can), and they kept me plenty busy/overwhelmed as it was. Also, I was working as an in-house designer, so I didn’t need to be marketing myself very heavily either. (Plus, Twitter wasn’t this totally essential marketing tool back then.)

Now, 2008 would have been a good time for me to get on Twitter and network, since I was working on Flexible Web Design and needed to get my name out there more. But, 2008 was seriously the busiest year of my life. I was working a full-time job, writing a book, renovating my kitchen, setting up a nursery, moving/re-setting up my home office, preparing to become a first-time mom, and being pregnant and tired. Twitter would not have helped me accomplish any of these important tasks I had going on last year. So I didn’t do it. It’s as simple as that.

Now that the book is done and I’m working freelance, I have more time for Twitter as well as more need to use it. I’m going to keep my tweets mainly focused on professional things, stuff related to design, as a supplement to this blog. So I hope you’ll follow me. And I hope you’ll forgive me for taking so long to jump on the bandwagon. 🙂

Me at The CSS Summit online conference

Posted by & filed under Announcements.

I just gave my talk Designing CSS Layouts for the Flexible Web from my own little basement office for The CSS Summit online conference. Yes, yes, I’ve given this presentation before, but of course I had to do a little bit of updating and improving, especially because this is the first time I gave it online instead of with a live audience. So, here are the new and improved slides for your downloading pleasure:

Designing CSS Layouts for the Flexible Web (PDF, 5.5 mb)

Yes, it’s a big file—there are a lot of graphics in the PowerPoint. But I didn’t want to compress it very much and have all those graphics look distorted, since examining the graphics is the main point of the presentation.

There’s a little CSS in the presentation, but if you want more in-depth tutorials on the techniques alluded to in the presentation, I’ve written up many of them on this blog:

Free registration for CSS Summit

Posted by & filed under Announcements.

You have until tonight at 9 pm EDT to register for The CSS Summit online conference that’s going on tomorrow, July 18. Registration is just $179 for an individual and $479 for a meeting room (meaning, you can get a bunch of people together in one place and all attend the conference). Use the code CSSZOEMG when registering to get $25 off. A percentage of the proceeds will go to the Children’s Organ Transplant Association.

But, if $179 is still too steep for you, I’m giving away one free admission! To win, just post a comment saying what you most want to learn about  right now (in general, not necessarily a topic that is being covered tomorrow at the Summit). I’ll pick one commenter at random at 6 pm EDT tonight, so make sure you post your comment by then.

View more posts: