Navigation -- Text vs. Images
April 26, 2004 | 
37 Comments
This post is the result of a real world problem I’m facing today and it’s title comes from an actual Google search query I ran a few minutes ago. A search that turned up basically nothing of any use.
Today I began working on a brand new template for various sites down at the hospital. It’s nice because it’s something that I get to build from scratch, which is unusual of late. In this case I didn’t design the site (don’t ask), but I’m going to build and maintain it.
I’ve received the comps from the designer and I’m beginning to turn them into actual pages. As these things go the comps are pretty good, but lacking in any functional specs — that part is up to me. Luckily, I do have quite a bit of leeway with the design.
I’d decided that the main navigation, consisting on seven items of varying character and word length, would be done with text and CSS, as opposed to images. I’m using a variation of Doug Bowman’s excellent sliding doors technique, which I can’t thank him enough for. It’s saved me quite a bit of time. Thanks Doug!
I got the basic navigation bar down and working well. Aside from a few minor browser issues (IE Win, cough, cough) it was pretty easy and looks just as it is supposed to.
Until I bump the text size up a notch or two.
When I do this, the display of the navigation split into two lines, thus breaking the design visually. I’ll not bore you with all the details. The reason is that because we have so many items, because a few of the labels are long and because we have a fixed width design, there we simply ran out of room and the text needed to wrap.
We can’t have it expand out to the right, as the design is fixed, and frankly that would exceed 800 pixels anyway, which we don’t want to do.
Now the IA is solid and changing it to support a design flaw would be just plain silly, so that was out. I tried to tinker with the width and font sizes, to no avail. The design was based on a fixed with — there wasn’t anything I could do about that, and there was no point in trying to fix the font size as I know people could still override that, as well they should do, if they need to.
That left me with the option of putting the navigation into images. I thought about that for awhile, talked it over with my coworkers Christian and Karen and we decided to stick with what we had, even though it broke the design visually at larger font sizes.
Why did we do that?
Because Web design is about compromise and we felt that the pros here (maintainability, accessibility and the rest) outweighed the single con that when a user bumped up the text the design visually broke.
If we had gone with images the user wouldn’t even have the option. Now they do have it and it looks just fine for those who never have to bump the text up. Ultimately this is a bit of a design flaw, but hey, sometimes you’ve got to work within those kinds of constraints.
I guess this is a form vs. function (and maintainability) issue, and since it’s not functionally broken, function won out. Granted the ideal solution would be to have a design that allowed for this kind of flexibility, unfortunately we don’t have that option here.
What would you have done? Perhaps you can see another solution? What is your general feeling about using images as opposed to text for navigation?
Filed under: Web Design
Comments
1. Nick Chapman said:
Could you provide a means to adjust the font size of non navigation text? That way users wouldn’t have to break the design to have larger body text…
Posted on April 26, 2004 01:55 PM | #
2. andrew said:
I’ve used a combination of the CSS Sprites technique, along with FIR and it seems to work well.
It is not the most accessible method (I think it’s equally accessible as FIR) but it allows for a nice graphical nav, without losing the textual content.
I also think Nick’s suggestion for a font size changeroony thing would be a nice compromise.
Posted on April 26, 2004 02:01 PM | #
3. Chris Vincent said:
I ran into the same problem in designing Outburst. When you up the text size, the headers in those windows on the left side get bigger than the graphic. In the end, I just decided the same as you and let it be. I could have used images, especially since it was a Zen Garden entry that wouldn’t need to be updated. However, I figured that it was kind of a dirtbaggish route to go, since perhaps that was the text the user wanted resized.
I contemplated sliding doors, but I don’t see how it could have been utilized in this case.
Posted on April 26, 2004 02:40 PM | #
4. zinckiwi said:
I’d have done the same thing. Any design will break if you bump the text size up enough, especially if you’re not using IE, which caps the magnification. The trick is to make sure that it’s handled as gracefully as possible for as long as possible. Wrapping the text is preferable to having it exceed the width of a fixed-width layout, and for reasons cited images are generally a poor choice for the textual elements of navigation.
Posted on April 26, 2004 02:47 PM | #
5. Keith said:
Nick – we could do that. We have in the past, but that doesn’t really sort the issue out. Sure, for those who actually use our font sizer it’s ok, but for anyone else they’ll still be able to resize the main nav text. So, while it might help, not sure it’s really a solution. Good idea though.
Andrew – wouldn’t you still need to cut graphics for that? Part of the reason we don’t want to go with graphics is the added maintenance of having to cut graphics whenever we need to change the nav or build a new site off this template. With text it’s very easy. No graphics to cut at all.
I know it’s a bit hard to comment on as you can’t really see the project and don’t have a 100% clear idea of what I’m working with. Thanks for trying anyway..
Posted on April 26, 2004 02:48 PM | #
6. Thomas Baekdal said:
I think we all have run into that problem from time to time. When I release ICHI.biz in the beginning of May, the main navigation bar will be made with text instead of images. The advantages for doing so are many, one - and a very important one - is that it is much easier to maintain later one. Add a menu item - oh, it will take about 2 sec…
One suggestion: Consider setting the font-size with pixels. I know that is a no-no, but I think, in this case, we can make an exception. It will make the site work for most of your readers (especially if you leave the rest of the text relative) - and I think it is best to have a navigation bar that does not break.
Oh… 37signals would call it “Defensive Design :)
Posted on April 26, 2004 02:54 PM | #
7. Pete said:
Would there be any way to use javascript to decrease padding/margins for the navigation elements as the font size increases? Sorry if this sounds silly, I don’t really know js (obviously :))
Posted on April 26, 2004 02:56 PM | #
8. Jon said:
I thought the sliding doors technique was supposed to account for reasonable expansion of the text?
If you can wrap the buttons and the bg images are large enough, couldn’t the button size be specified in em’s, thus expanding in accordance with the text?
Posted on April 26, 2004 03:09 PM | #
9. Keith said:
Thomas – We’ve considered setting it in pixels. Yes, this will take care of this problem (aside from the fact that they now can’t resize the nav) for all of our IE users (the vast majority) however, setting it in pixels doens’t make a difference to anyone else. It’s worth noting though. This may end up being what we do, but to be honest, I would rather give them the option to resize….
Peter – You probably could do something, but I’m pretty sure this issue wouldn’t warrant anything like that.
Posted on April 26, 2004 03:10 PM | #
10. Andrew said:
I’ve run into the identical problem of nav tabs breaking inside a fixed width design. On our project, we’ve found a “third way”: make the design accomodate broken lines. If you can at least keep the navigation clickable, readable, and reasonably out of the way of other content, you’re golden. We just had to make sure that larger navigation tabs don’t flow into some body content.
Users don’t care about this shit: unless you’re audience is web designers, it don’t matter if your navigation is *visually* broken at large font sizes as long as it continues to *work*. (Not that you should be lazy, but there are times when you have to cut and run.)
Posted on April 26, 2004 03:11 PM | #
11. Keith said:
Jon – Normally what you say is correct. The thing is we only have so much space as the design is fixed. We’ve got say, 770 pixels width-wize. There is simply no way to fit our full nav within that space as it gets bigger. We have to either expand out to the left (not a good option and would require lots more work anyway), or down a line, thus stacking the nav. It’s a tricky one.
Andrew - exactly the same conclusion we came to. Ideally it wouldn’t have been designed this way, but it was, and we have to deal with it.
Posted on April 26, 2004 03:19 PM | #
12. zinckiwi said:
If you could figure out a way to stack the tabs vertically, then what’s the best way to arrange them in markup? Is it worthwhile to wrap half of the tabs in a div and the other half in another, and have those containing divs float? Seems that you’d want some way of controlling where the break would occur.
Posted on April 26, 2004 03:32 PM | #
13. Geoff said:
Howdy Keith.
I’m the designer that handed those designs off last week. I was hoping to follow them up with some specs as well, but it looks like you have everything sorted out. Througout the design process I was thinking about the Sliding Doors technique as an option, but did foresee the problem with enlarging the text. The FIR solution was another. It’s a tough call to make as we all try to get out of the graphic text business.
Anyway, looking forward to seeing what you came up with. If you have any questions let me know. As always I enjoy reading your site.
Cheers,
Geoff.
Posted on April 26, 2004 03:41 PM | #
14. Mike said:
If it were me, I’d just accept that, at sizes beyond a certain point, things won’t look as I’d like them to. I see it as a two way compromise - you provide the user with a design that handles larger text as well as you can, and the users accept that they may not get the optimal page-design if they modify the designer’s chosen font size. I’d still think that the site should be usable beyond your chosen specs though…
From your post, I take it that the navigation is still usable, even when it wraps… If it is, I’d just accept it and leave it. I try to make my sites work on IE/PC Largest. Beyond that we’re into specialist accessibility (and well hidden IE preferences) and hopefully the people who need that kind of provision will appreciate the effort that’s been put in to make the site usable for them and accept that they may not be getting the perfect design.
I guess it depends on your audience though. What is the hospital’s average font size?
Posted on April 26, 2004 03:54 PM | #
15. Keith said:
Geoff – thanks for the comment, and don’t worry, the design is pretty easy to work with so far, and really you don’t really have the opportunity to think about all the little things that will pop up like this text size thing. That’s my job! ;) Unfortunatley, I don’t think you guys get to see the whole picture – but hey, that’s not your problem really and what you gave us will work great!
Mike – Yeah, the navigation functions just fine, it just looks funny.
Posted on April 26, 2004 04:13 PM | #
16. Kyle Fox said:
Ok, Keith, I know you said not to ask, but you’ll need to explain this one to me. Why would your company hire an outside designer when they have someone of your caliber inside? No offense to Geoff, but that doesn’t seem to make any sense…??!?!
are you too busy or what? I don’t think there are many designers out there who could you do a better job than you…?!!?
Posted on April 26, 2004 05:21 PM | #
17. Rick Rosario said:
So, if you bump the txt up the design will brake. Humm…
My question is, if you can’t change the txt size anyways, why not take advantage of a more visually appealing navigation using images. If you break the design, in some cases you might break usability and overall branding. For accessibility concern, I would use FIR.
Posted on April 26, 2004 06:23 PM | #
18. Cameron Adams said:
I think that the problem of resizing text is probably the biggest design hurdle for a web site with horizontal navigation.
Your width is locked in at 760px – you can’t get any bigger without making the page scroll horizontally @ 800 x 600 – if you get a client who can’t decide what categories they want to keep and which to discard (to keep it at around 7 items), you’re screwed, because then it becomes a case of tweaking it just right so that everything fits. If text size increases? It explodes. If you’ve got a visual tab style or something similar that relies on navigation being in one straight line, line breaks are gonna look yuck no matter how you do it.
I personally try and make all seem fine using IE’s “Largest” or two font steps up in FireFox, beyond that, users should know that they have special problems and pay attention to special technologies (like Opera’s zoom function).
Posted on April 26, 2004 06:38 PM | #
19. Keith said:
Kyle (when are you going to get a site man?) – I was hoping to avoid that question. To be honest I’m not sure why as I had no say in the matter. I think it’s party because Geoff and his team were brought in to handle all of our print design and branding work, and there is a want to make sure it’s consistant with our Web stuff.
I’m quite sure we could have done this in house, but…umm, well I don’t know the answer and I try not to think about it to much. There is also the resource issue, I’m responsible for so much more than visual design, and I’m very busy. I do have lots to say about how it gets implemented and in that way myself and my team members are pretty much in total control, so it’s not really a huge deal.
Posted on April 26, 2004 07:00 PM | #
20. Joshua Porter said:
I’m curious Keith: do you have any evidence that users who visit this site (or related sites since this one is new) ever enlarge the text? Perhaps the default size is large enough for all, and you’re chasing a red herring…
I ask because it occurred to me the other day (as I was mulling over this very problem) that I very rarely see anyone make text bigger. I’m sure it happens, but I just wonder how often. A few people I’ve talked to didn’t know that changing text size was even possible.
Posted on April 26, 2004 07:18 PM | #
21. Keith said:
Joshua – You bring up a good point and one that I did think about. I’ve got no evidence to suggest that people do make the text bigger, in fact I’ve never seen a user do this, but I’d rather be safe than sorry.
The bottom line is that for most people it will look fine and for everyone it will work fine. I actually was able to work it so that it doesn’t break unless bumped up quite a bit.
Your question brings up another that I plan to post about – font size widgets. We had originally planed to have on for this site, but decided that it probably wasn’t worth the trouble. If a user wants to do this via the browser they can, and I tend to doubt the use of those widgets any more….but who knows?
Posted on April 26, 2004 07:23 PM | #
22. Tommy Olsson said:
I just ran into the same problem yesterday. We have two sites (one external web site, one intranet) where they want a horizontal menu, which will be positioned absolutely. Both are liquid designs.
On the external site, there are only four items in that menu, so I floated them and made them about 25% wide, which works pretty well (except in IE).
On the intranet, however, there can be anything between 3 and 11 items in that menu, and the available space is less than the full viewport width. We toyed with the idea of setting overflow:auto on the containing <div>, which will work even if it’s not exactly pretty.
Posted on April 26, 2004 10:42 PM | #
23. Chris Vincent said:
Joshua: just to spite you, I enlarged the text. ;)
Seriously though, the people who actually need to resize the text often know how to and do it whenever necessary. I have young eyes, but I do it now and then.
Those who don’t know how to resize either try harder to read the content or they give up. For this reason, I think having an on-site widget in addition to the browser feature is a good way to go, serving as a catch-all for users. However, users who don’t know how to use the browser feature might not realize the purpose of the icons (I know, I know, it’s rather obvious to us), so it may be best to include a text description of the widget (increase text size, decrease text size). But even then you run into a “chicken or the egg” problem as to whether the widget text can be read.
I ought to get some sleep. :P
Posted on April 27, 2004 12:49 AM | #
24. Chris Platts said:
In my, admittedly fairly limited, experience of watching partially sighted users, those that need to increase text size more than a couple of levels tend to use screen magnification rather than browser text resizing.
One user I know additionally uses a magnifying glass, much like a typesetter’s loupe, to view graphic detail.
Our latest subsite at www.cancerresearchuk.org/running/ also uses a variation of sliding doors, and worked until the internal client added two more tabs. Most pages were valid until the editors added markup in the CMS!
Posted on April 27, 2004 02:15 AM | #
25. Terry said:
I’d say the only choice you have is to set it at a defined pixel size (for ie users) or leave it in em’s or percent and forget about it.
Those who regularly resize a webpage’s text size are used to having the layouts break. 99 percent of websites probably go out of whack when the text is increased more than 2 increments. It won’t make your site look any less professional because the behaviour is encoutered everywhere they go.
Posted on April 27, 2004 05:53 AM | #
26. jason said:
I agree that some compromise is generally necessary, not matter what you are designing. Doug’s sliding doors nav technique does account for a nice text resize, IF you are not using a fixed width layout.
As long as you know the target audience and what they will be browsing the site with, it’s your call as designer on how to make the site as usuable for them as possible, by making these, sometimes tough, design decisions.
Posted on April 27, 2004 06:06 AM | #
27. Lou said:
Ink.com uses two sizes of tabs to solve this problem.
Posted on April 27, 2004 06:56 AM | #
28. Adrian Rinehart-Balfe said:
I had a similar problem with a website for a local church. The pages are liquid but all the computers that are in use in the church run at 800x600. Everything was great until they decided that some of the tabs needed to be renamed. News became Bulletin etc. These longer names meant that the text had to be so small as to be unreadable so I had to keep the sizes large enough to break the layout. They were adamant on the issue but actually liked it when the tabs jumped to a second line! Luckily, after some research, we found that nobody in their congregation was running at this resolution anyway (its a young congregation). Later on in the design process I was able to convince them that they didn’t need so many tabs anyway and all pages except the homepage were fixed.
Images were an option but we worried that users from different ethnic backgrounds might misinterpret them in much the same way as colors have different meanings to folks of different nationalities. One of the Pastors had some missionary experience and had come to know a significant amount about color theory, even though he had no knowledge of any other design issues.
Compromise is most often the answer and I think that you did the right thing.
Posted on April 27, 2004 08:41 AM | #
29. Joshua said:
Chris P., your experience could be a partial answer to Keith’s question. What if the majority of users who resize text did use other methods of doing so, totally bypassing the functionality provided by browsers? Probably not the whole story, but that would certainly be interesting.
Perhaps in the future some of these configuration options will be built into the DOM (variables of some sort: if thats even possible) and all compliant browsers will support a property where we can find out this sort of thing.
Keith, your comment about being safe rather than sorry totally describes my way of designing, too. Now that I think about it, I spend a whole lot of time being “safe” and very little time on the edges.
Posted on April 27, 2004 10:10 AM | #
30. ben said:
Sorry if anyone else has posted something similar to this. I am too lazy to read them all.
You can set the width of the LI, or the A (which ever you please) to a fixed number. As the font size grows, the height of the element changes, as opposed to the width. The text will break inside of the li, instead of the LIs running to the next line. Of course, this still “breaks” your layout, but in a different way than before - and it may be more acceptable.
This can get tricky, as some browsers will not repaint the background color as the height of the element changes. Depending on your font and background colors, this can cause some legibility issues.
It’s not a perfect solution by any means, just another approach.
Posted on April 27, 2004 11:17 AM | #
31. thomas said:
I’m not sure how on-topic this is, but I really like Opera’s method of catering to users with poor visibility. Instead of only resizing the text, it actually resizes all of the images, acting like a magnifying glass on the page. Works quite well, actually.
Posted on April 27, 2004 04:26 PM | #
32. Richard Rutter said:
I would definitely have gone the same route as Keith: the advantages of real text over images of text are too many to ignore.
As regards the design breaking, put yourself in the place of the user who sees the broken design. It is highly likely our user has set large text for a good reason and therefore, given the choice, would rather see a slightly broken design and readable navigation than ‘perfect’ design which is hard to use due to legibility problems.
Posted on April 28, 2004 01:57 AM | #
33. j said:
i think it’s a bad thing to be such a hard-liner against image text. calling yourself a ‘dirtbag’ for using images? jeez.
In the case of D. Keith Robinson’s site design, i think creating the nav as images–as big as they would comfortably fit –would be a good solution. you can’t control how big text is going to be especially when a user can bump up the size of their minimum text size in their preferences. assume every line is going to break onto the next line and the design will look like butt.
There’s no reason not to have images when you need them…extra work? how lazy would you have to be to complain about changing 1 or 2 images every six months. and as far as accessibility goes, use FIR
Posted on April 28, 2004 10:05 AM | #
34. Keith said:
J – I think you miss the point, and I’m not sure you actually read the post. I think under some circumstances it’s just fine to use images. It’s just that usually there are many benefits for going with text.
There was no reason to use images for the nav on my site, the text looks and scales just fine.
As to your last point. I wasn’t talking about this site, I was talking about a template that would be used for multiple sites down at the hospital where I work. The navigation could easily change for those sites on a regular basis.
You obviously have never worked on a large scale, frequently updated site with images for navigation or you’d understand how much of a pain in the ass it can be.
Posted on April 28, 2004 10:14 AM | #
35. j said:
“There was no reason to use images for the nav on my site, the text looks and scales just fine.
As to your last point. I wasn’t talking about this site, I was talking about a template that would be used for multiple sites down at the hospital where I work. The navigation could easily change for those sites on a regular basis.”
I did mean your hospital site – sorry for not clarifying. But again, really, how much is it going to change after the first initial design? your personal site looks great.
“You obviously have never worked on a large scale, frequently updated site with images for navigation or you’d understand how much of a pain in the ass it can be.”
Oh boy…I have and I didn’t mean to start a peeing match ;)
Posted on April 28, 2004 07:46 PM | #
36. Keith said:
You didn’t? ;) You seemed to imply that I was lazy. That will usually put someone on the defensive, especially when they bust their ass every day. Call it what you will, I’ll piss all over the shoes of someone who calls me lazy!
(that was a joke)
The bottom line is that images for navigation can be a pain depending on the site, or in this case the multiple sites. Roll out of these sites will be much, much easier if we don’t have to worry about cutting images with every change (and trust me, there are lots of these) or every new site / section / etc.
There are other benefits…for example, last time I checked FIR wasn’t an 100% accessible solution and well, what about perfectly abled users that just have a hard time reading the font?
We’ve been over all this, from you comments I’m not sure you got the point of the post, I hope this clears it up a bit.
Posted on April 28, 2004 09:14 PM | #
37. ShellDozer said:
“What would you have done?”
In most cases, the same. Sometimes “form” *is*
the “function”, but, IMHO, not as often as
some people think.
Posted on June 17, 2004 09:33 AM | #
Comments are now closed