Show 97: FoWA
Posted in Podcast on: Tuesday, October 9, 2007 by Paul Boag
On this week’s show: Paul proposes tactics for overcoming design by committee. Marcus talks about extracting a budget from clients and Dan Cederholm compares pixels, ems and percentages.
Podcast: Play in new window | Download (27.0MB)
News and events | Extracting a budget from your prospects | Avoiding design by committee | Dan Cederholm on ems vs pixels vs percentages | Question of the week
About 100th episode
We really want the 100th episode to be as interactive as possible while keeping the format of the normal show. So with this in mind here is what we have in mind for our live show…
- News – This will be the top 4 news stories that have most effected web design since the shows launch in August 2005
- Marcus – Most unreasonable client
- Paul – The worst web design mistakes of all time
- Ask the expert – Ask Paul and Marcus any question you want whether it is related to web design or not
You can either turn up on the night and contribute or send us an email or MP3 with your contribution to any of the above areas.
News and events
Gossip from FoWA
I wanted to share a little about the FoWA conference I have just attended. It was absolutely superb and I am extremely glad I attended. The speaker line up was excellent and the subject matter was inspiring. There was a good supporting expo which was great as it prevented the problems that have occurred previously of sponsors touting their wares in the speaking slots.
However, I am not bringing it up simply to gloat that I was there and you weren’t. I got to speak to some great people and leant a few things that is worth passing on. Firstly, it is very apparent that the power of podcasting as a marketing medium is really on the rise. I had a long chat with David Prager and Jay Adelson about Revision 3 the company that produces Diggnation among other shows. It sounds like things are going great for them and they are pulling in some big name advertisers. However, the advertising model is not the only approach that is working within podcasting. The other is the promotional approach where you showcase products that subscribers can then buy. This is perfectly demonstrated by Wine Library TV hosted by Gary Vaynerchuk that allows you to purchase the wines reviewed in the show. I was fortune enough to meet Gary at FoWA and it is obvious that it is passion for the subject and strength of personality that makes the show work.
Of course the real power of podcasting was demonstrated in the live taping of a diggnation episode. I estimate that approximately 1200 people turned up for the recording and it was more like a rock concert than a geek conference. Kevin Rose and Alex Albrecht (the hosts of the show) were pretty much mobbed after the show by insane fans. It was almost scary and drove home the power of the medium.
I could talk about some of the great speakers I got to hear including a stella performance by Daniel Burka who gave his first ever conference presentation. However, I don’t have the time to cover it all so want to share instead a couple of rumors surrounding Google. The first is that the fabled gPhone from Google is in fact going to be an operating system rather than a specific hardware device. If this is true it could well introduce yet another platform for creating cool web based mobile applications. Finally I wanted to mention the imminent announcement of Google in relationship to its APIs. It would appear Google is about to open up its many online offers from Gmail to Docs allowing third parties to build web applications based on them. This will really open up the opportunities for developers to really innovate.
The average website visitor
The next news story of the day is yet another list from Smashing Magazine (this is getting boring now). This one attempts to bring together some general stats on website users from various sources. Although the article acknowledges that really you need to look at your own stats it does explain that from time to time you want a more general picture of the average web user.
The post therefore lists 8 facts you should know about the average user. These include (but are not limited to)…
- The most popular browsers (bet you can’t guess!)
- Most common screen resolution
- Most popular operating system
- Most popular browser family worldwide
- Most popular browser in Europe
- Most common browser size
Getting started with Photoshop
We know that not everybody who listens to this show are web designers. Some of you are developers, clients or students. Some of you are just starting out in web design. If you fall into any of the above but want to get a better understanding of a key tool of the web designer then you maybe interested in a new article by Sitepoint. This detailed tutorial is an introduction to using Photoshop.
This is an amazingly detailed introduction that covers everything from the user interface right the way through to working with Alpha Channels. As you can imagine it is a long read but if you have the time I cannot think of a better introduction to this hugely powerful image editor.
Waking the sleepers
Last up today is a post by the guys over at 37 Signals. The post is primarily written for those running web applications but actually the principles apply to a much broader audience. It is looking at the subject of sleepers. Sleepers are those users who sign up for your service but never use it (or stop using it). This clearly applies to web applications but is also applicable to ecommerce sites or even sites that offer newsletters or other registered features.
It asks how these users can be reinvigorated and encouraged to become active again. Using an email from StumbleUpon as an example the post suggests so good ways of breathing some life back into your users.
If you are struggling with an apathetic user base this is worth a quick look.
Marcus’ bit: Extracting the budget from clients
So here’s the situation: I receive an invitation to tender in my inbox from a potentially good client. The brief is well written and, for the most part, the requirements are clear. The first thing I do is check the timescales, second is to see what the budget is. But what if the brief does not include a budget? How do you extract the budget from the client?
Paul’s corner: Avoiding design by committee
So I have now reached chapter 4 of my book writing marathon and in line with my commitment to recycling I want to share with you some of the content from my initial draft. Chapter 4 focuses on the role of the client in the design process and one of the big challenges that they face is design by committee. Of course, avoiding design by committee is something designers want to avoid too which is why I thought it would be a good subject to cover on the show.
Ask the expert: Dan Cederholm on ems vs pixels vs percentages
Paul: So one of the most common questions that I seem to get time and time again as far as CSS is concerned, revolves around working with ems and pixels and percentages and what to use when and how to work out what you should be using and all of that kind of thing. So, I thought, “Let’s get an expert in.” And so, I have Dan Cederholm joining me. (Dan Snickering) Hello, Dan.
Dan Cederholm: Hello Paul!
Paul: Don’t snicker! You are the expert for today.
Dan Cederholm: (laughing) I’ll try to be. I’ll put on my “expert hat”.
Paul: Just go with the flow, its fine.
Dan Cederholm: I will. (laughs some more)
Paul: Okay. So Dan, like I said, this is a common question that we get asked and I’m just interested in your opinion about “When’s the right time to use what combination? Should we mainly be using ems? Should we mainly be using percentages? Should we be going pixels?” What’s your take on the discussion?
Dan Cederholm: Well I think it, in a very politicianesque way, I’d say it depends. (Paul laughing) And this call is over. I could just hang up now (Dan laughs).
Paul: Okay
Dan Cederholm: No, I’m just kidding, it depends.
Paul: Depends on what then? (Paul laughs)
Dan Cederholm: Yeah, so it depends. Now are you referring to strictly font sizing or units in general for boxes and things?
Paul: I mean, there’s lots of different things isn’t there? (Dan: Yeah) There’s kind of, do we make, you know, when we design a whole web site, should the web site be fixed width? Should it be hybrid? Should it be fluid? Should it be built so its elastic? Let’s start with that as the discussion.
Dan Cederholm: Okay. Width in general… Well, I think, like I said, it does depend. It’s a tough decision to make depending on the site and depending on what’s in the site and the design and that kinda thing. It can be tricky. I love EM based design. And that’s what I use currently on SimpleBits and a few other sites that I’ve done recently. But, I’ve actually been sort of re-thinking that because its difficult to do… to drop in say an image or something that’s fixed width in that design and still account for that fixed element to be cut off or to look odd when the text is re-sized or if the text, the base font size is different. To me, the difficulty with an em-based layout is sort of the fixed image problems. So, for instance, on SimpleBits, for my blog posts I’ve been wanting to do more visual stuff like drop in an image from Flickr or a photograph or something.
Paul: Sure.
Dan Cederholm: But that becomes difficult because its em-based. If the image is a fixed pixel width, obviously its hard to just drop that in and design around it so that it looks like its meant to be there, you know?
Paul: Mmm Hmm
Dan Cederholm: And now there are tricks that people have experimented with, with em-based and setting the image width as well.
Paul: Right
Dan Cederholm: But that, of course, gets tricky when if the image is blown up it looks, you know, it will look terrible or shrunk down or won’t look as nice as it would if it was re-sized properly. To me, that’s the biggest drawback to em-based layouts. So, depending on the site, if the site is not image heavy or if you’re not going to be doing a lot of that sort of image stuff, then em-based styles can be excellent and they can provide, sort of that flexibility, almost like zooming in and out just by changing the font size.
Paul: So would your recommend that over, say, a percentage-based layout?
Dan Cederholm: Well I think that… I like the… They each have their own, sort of pros and cons. The percentage-based layout is great as well. So that’s fluid, or liquid, right?
Paul: Yeah.
Dan Cederholm: And that, that gives a little more control to the reader, because they can stretch their window out. Now, the main problem there is the “max-width” and “min-width” in Internet Explorer 6 and below. So, the common problem with that, or why people don’t use liquid layout is if you stretch the window out really, really wide, then line length becomes a problem with readability.
Paul: Mmm Hmm.
Dan Cederholm: But, that can be solved by setting a max-width to certain things. So in IE 6 and below, that’s not supported aside from some javascript hack or something. But, liquid layouts do offer that extra control for the reader. Some people… its weird, its like a religious sort of divide. Some people hate liquid layouts. Some people love them or swear by them. Its interesting how people can get. It can be a heated debate with designers. I found… it’s interesting with uhm… so, the iPhone came out over here in the US and I found liquid layouts actually look far better in the iPhone because of that small window width and that becomes even more of an advantage on a smaller screen. As opposed to fixed-width layout or even an em-based layout, the viewport isn’t necessarily computed correctly and you don’t take advantage of the full screen, whereas with a liquid layout, it does.
Paul: So when you do, say an em-based layout or a full liquid layout, what about things like margins and padding? Do you do those in the same settings or do you do those using pixels, or how do you work with those?
Dan Cederholm: Yeah, that’s a good question. So, one of the … the tough parts of a liquid layout or percentage-based IS margins and padding, because often times you need to add extra elements to add padding around, say if you want a fixed gutter width between columns. Unless you’re specifying percentage, like let’s say its a simple 2-column layout. The left column is 70% and the right column is 30%, which equals 100%. You can’t say the 70% block has a margin right of 10 pixels because now its 100% plus 10 pixels, which doesn’t work.
Paul: Yeah.
Dan Cederholm: So, you could either… there’s a couple choices… You could do a percentage gutter, so you have like 70, uh sorry, 65% with a 5% right margin and then 30% on the other side. Or, the other option would be to add another element sort of like a div that’s inside of each and the add a pixel amount to that without a width at all. So, there’s extra markup involved there. One of the things I like about ems is that instead of worrying about percentages, ems are… you can add… its easier to add gutters and padding with ems because the math works. (Dan Laughs, Paul agrees) So, you’ve got a whole width for the layout of say, 70 ems, or whatever it is and then you can break that up doing the math properly with the width of the columns and the width of the gutters as well. So, percentages are tricky because you can’t go above 100% and you can’t take away from a percentage with a pixel amount.
Paul: Yeah.
Dan Cederholm: Take away, or add with a pixel amount. So if you want fixed width gutters with liquid layout, it often requires extra markup to do that.
Paul: What about when it comes to typography? Are you suggesting always go with ems in situation like that? Because you’ve then got to add just more complexities too. You’ve got keywords that you can kind of throw into the mix there as well.
Dan Cederholm: Right. Right. Yeah, I prefer… in my own work, I prefer to use the keyword as a base. So, I’ll use “small” as a base on the body.
Paul: Right.
Dan Cederholm: And then use percentages for going up or down from there. So, headings may be 120% for a heading or whatever and then paragraphs would be 90 or that kind of thing. I like that because to me its sort of, ok, this is a base line. I know its not going to be the exactly the same in all browsers but I’ve had good luck with getting pretty damn close cross-browser sizing that way. The other way to do it is with ems and there’s a great article by Richard Rutter, actually, about sizing text with ems that he wrote a few years ago. And he explains a way of using a percentage as a base to knock it down to.. oh, are you familiar with it?
Paul: Yeah.
Dan Cederholm: And then that sort of… you can relate em units to pixel amounts. So, if you’re used to sizing text with pixels but want to use ems, he explains a way of sort of knocking down that base so that the math becomes simpler and using… specifying ems but thinking what that would be in a pixel amount.
Paul: Yeah, which is the approach that I normally use. The only thing that kind of (Dan: It is? Okay.) does my head in about that is that obviously ems inherit from one another.
Dan Cederholm: Right, exactly.
Paul: And that’s where it gets really confusing.
Dan Cederholm: It really does, doesn’t it? I mean especially if you’re nesting more than one level deep. Then the math becomes mind boggling.
Dan Cederholm: And so that still happens with the keyword percentage model that I use often… the same problem… so when you’re nesting percentages, things start to get a little weird. It becomes a little difficult to do the math but I found that I’m not often nesting too far… you know, more than maybe two levels or so when I’m sizing things. And if I am, then unfortunately, I have to do the math or try a different approach but, yeah, that is a tricky part of ems or percentages. In a perfect, ideal world, I think the designer could specify pixel, right, and then the browser would resize it from there but, you know, IE actually 7 and 6 and 5 don’t let you resize the text and I’m kinda baffled why its still a problem in IE 7. So, that would be ideal because the designer can say, “Look, this is what I intended to be as a base and this is gonna look the same across browsers for the most part for most resolutions and then the user can always over-ride that.” I mean, the user should always be able to over-ride that. But, unfortunately, for baffling reasons, they chose not to let someone do that in IE. So, that goes back to, I guess, your site statistics and if IE is a low percentage, which is probably not going to be the case for most sites, you could sort of weigh that and can say, “Well, I’ll go with pixels.” And, I mean, a lot of people do go with pixels now anyway, and just not worry about it. But I tend to, you know, I bump up si… I don’t wear glasses, for instance, and I bump the text size up on a lot of sites.
Paul: Yeah, I do too.
Dan Cederholm: And so, if I’m doing that, and I have pretty good eye-sight, I imagine a lot of people would as well.
Paul: Ok so what…
Dan Cederholm: Having that control is important.
Paul: Yeah. So, one last question before I let you go (Dan: Yeah) and get back to your normal work… You were talking about browsers there. And so, Internet Explorer 7 has come along with sort of this zoom page functionality.
Dan Cederholm: Right.
Paul: How does that enter in all of this? Does it change the landscape in any way?
Dan Cederholm: I think it definitely helps. That’s what sort of baffles me even more. I’m using the word, “baffle” a lot today. (Paul laughs, Dan chuckles) Why they would add the page zoom to IE 7 but not allow you to re-size font set in pixels. So, I think it helps in a way but the problem there is that it will… your viewport stays the same. So, when you zoom the layout, you’ll start to get horizontal scroll bars and you’ll have to sort of navigate the page that way, whereas just zooming the text, the viewport stays the same and you can read the page a little easier, I find. I mean, it’d be interesting to talk to someone that has low vision and uses, you know, zoom or text bumping up on a regular basis. I think that that’s sort of the… the downside I see to it is that its, it can help but, let’s say that you’re looking at a block of text and you use the page zoom feature and you’re window is small. Let’s say you’re on a small screen device or something or at least you’re monitor is small or whatever. So, zooming in will make it easier to read but you might have to do some extra navigating of the windows to keep reading that. Whereas bumping up the text, you shouldn’t have to do that. It should stay within it’s container and the window should just… yeah, you’d be scrolling down but you won’t be scrolling horizontally.
Paul: I mean that’s a particular problem, isn’t it? With fluid designs, I’ve noticed, with a zoom function that as soon as you start zooming on a fluid web site,
Dan Cederholm: Oh, right.
Paul (continues): you immediately get horizontal scroll bars. Which to me, is ridiculous.
Dan Cederholm (laughing): Right, right. Exactly! Right, so in bumping up the text in a fluid design, should be, I think, should be a lot more… better an experience. That brings up a good point though, with em-based design. Now, when you’re bumping the text with an em-based design, the entire layout, if they layout is set in ems as well, the whole layout will expand. Sort of like zoom, but… So, that’s something to consider as well. Where the layout could go beyond the viewport, you could get horizontal scroll bars as well there. So if you have an extra wide layout in ems, that can be an issue. Just bumping it up one notch or two notches could cause that sort of scrolling problem.
Paul: Yeah. So, the long and the short of this, is there’s no right answer, is there?
Paul: There’s no perfect solution here.
Dan Cederholm: Yeah, there really isn’t.
Dan Cederholm: I mean, like a lot of things in web design, there’s not… yeah, it sort of just depends on a case-by-case. I mean, people fall into sort of things that work for them, you know, like I use the “keyword/percentage” thing and that just seems to work. Other people like the em-based approach to text sizing. But neither one is really right. I think you’re correct in saying there is no real right answer at this point. It will be interesting to see how CSS evolves and affects the way we layout pages. Just the other day, I was looking at the CSS 3 grid layout draft.
Paul: Bleh!
Dan Cederholm: Yeah. (laughs) Which is pretty amazing. And maybe we’ll be able to use it in the next fifty years.
Paul: Well on that cheery thought, (Dan (laughing): Sorry) I’ll have to grapple with CCS 3.
Paul: Thank you so much for your time, Dan. I appreciate you coming and explaining the different options that are available.
Dan Cederholm: Ahh! Its my pleasure. Thanks for having me.
Question of the week
Pxels, ems, percentages… which do you use the most? Answer in the comments.
17 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Ems Person!
px and %
Ems for typography and some divs etc. e.g. #article {max-width: 45ems;}
percentages and some pixel widths for elements such as nav bars.
Using a mac to write this and just discovered how unintuitive it is to find the # key! Ah well, you learn something new every day.
I enjoyed your chat ems vs pixels vs percentages.
My preference is to using em for font sizing. Nesting of em elements have caused problems in the past. To get round this I use this handy em calculator.
http://riddle.pl/emcalc/
By setting you base font size of 75% 12px
body{font:75%/1.5em arial, Helvetica, sans-serif;}
You can then use the calculator to work out the em cascase for each element level and apply the correct font size.
I am a pixel person.
Originally a pixel person because that is all I knew and understood in the world of typography and print design.
But my new effort in creating my first fluid design for a client, I had the chance to toy with using % and ems.
Nice to hear that there is no right or wrong way of doing it!
Thanks Dan and Paul!
I agree that em’s inheriting font-size from parent elements is actually more annoying than useful.
That was an interesting discussion.
I mix it up a bit. I like to use ems primarily (probably learned that from Dan’s bulletproof book) but sometimes a fixed width outline requires a bit more specification using pixels.
Been stuck with the 62.5% thingy on body, then using ems on everything. I think I have an above average IE userbase on the sites I make, so I owe them that much. Obviously annoying with the inheriting issue on ems, and I can’t be sure whether or not the user has changed the browserdefault 16px font-size.
For layouts I usually end up with pixels and fixed-width. At least when doing client work. For myself I like to mix things up a bit.
Nice podcast as always!
I prefer ‘em’s because its more fun to deploy it.
My solution for ems and weird font-size ‘problems’ is to set:
body{
font-size: 10px;
}
and then
p{
font-size:1.6em;
}
means 16 px on every paragraphs.
I think its makes more easily to ‘remember’ and set ems than calc ohh how much is 12px*3.4 for example.
Good Interview.
Pixels and percentages mainly.
I’m an em guy out of nostalgia, mainly.
I used to manually lay out newspaper pages on those big sheets of blueline paper using wax and border tape, and everything was in ems and picas. Pixel? What’s a pixel?
I like the anachronistic element, I guess.
Very good interview!
I like the part that Dan talk about EM layouts… So we have many difficulties in Web Design and one or another method depends by the needs of each project that you are in development.
Sorry about the late (and long) posting, but I just got around to listening to the show for last week… and it made me think that perhaps someone out there has an a resource for something I run up against from time to time. I tend to use ems for typography – so that site visitors can set the size they are comfortable with. The only thing is that some elements in the layout will eventually “break” if the user sizes up enough (or at least with some of the layouts I use). In particular I’ve ran into this in the past with navigation elements. One instance in particular I had a client that had there text sized all the way up it would go so that there systems administrator could read directions across the room…. problem is he did not set the text back to normal and my layout was broken when the client looked at it. My question is this… does anyone know of a way to “reset” users browsers to default type size when they arrive on your site? I’d really like the idea of users seeing my intended layout first and then resizing text as a more conscious decision… as opposed to arriving on one of my sites without realizing that their browser is set to a larger text size and seeing a distorted or broken layout. I know the argument could be made that users having all sites display larger text is the whole point, however I think it is very possible for users to not realize that there text options have been adjusted.
Thanks for any help!
Em, I’m not sure ;)
I use ems for Font sizing and mainly pixels for widths, divs etc. I’m quite keen to try ems for divs and setting the width of columns etc. Good to hear the interview with Dan Cederholm, his books are required reading for all web designers!
Cheers!
Thanks Dan and Paul! Nice to hear that there is no right or wrong way of doing it!
So I’m about a good solid year off in posting on this but I only just started listening to the show and I’m getting caught up on episodes…
I believe that there is room for both theories, but the need should be dependent on the needs of the client just as much as the needs of the user, ultimately coming down to how much content the clients wants to inject into the site.
Say you have a client who has little in terms of written and visual content to provide, or even wants to provide (baffling, yes, but if you’ve had that client then you know it happens). In a fluid design you can squeeze the information to your hearts content, but if you expand too far the site looks visually shallow. This is the best time to use a fixed site because you can visually control the content and convince the user that your client has a lot to say without saying very much at all – a designer’s bluff you might call it.
If your client is very content heavy, this provides the obvious, ideal situation for fluid design to manage loads of content in any situation while keeping viewers visually acute.
In terms of px vs. % vs. em I’m still on the fence. I’m currently developing a site for a potential client using fluid with Ems so I’ll have to see how that goes.
For my first big client I designed a psudo-fluid design which I was quite proud of that I still like the idea of… of course, I did it awhile ago now so I hate seeing I did it in tables (100% div convert now). Basically, I used the minimal content they had in a fixed style, and used visual elements to give the fluid experience. Works quite well in that respect I must boast. http://www.greenheronflooring.com