of People and Pixels - Web Design

OmniTI

2011-07-01T03:40:45Z

OmniTI Computer Consulting is the amazing company I work for. We specialize in websites and applications that need to be secure and/or scalable. We've worked with many companies from National Geographic to Etsy to AlliSports and many, many more. We also built FontDeck and Circonus .

Bottom and Middle Vertically Aligned Titles with CSS

2009-02-12T20:57:07Z

One thing I’ve really missed since migrating to standards-based (i.e. table-less) web design is the ability to vertically align elements, such as bottom-aligning text inside a block space, so the text will stay bottom-aligned when the browser’s text size is changed. With tables, it’s easy, just add valign="bottom" and you’re done. But with CSS and semantic HTML, it’s unfortunately not that easy yet.

I have taken inspiration from reading Eric Meyer’s writings about the One True Layout, especially about performing math with CSS properties.Then I thought, “why could we not use the concept of ’CSS math’ to do other things?” So I did!

The concept is simple: use the padding and margin of two nested elements to add and subtract different units (make sure both are set to display: block;). The key here is that you have to use the padding as the number to add and use the margin as the number to subtract. If you reverse them, then your text will disappear behind the top of an element’s bounding box.

The only caveat is that this technique is dependent on the number of lines of text remaining the same (except at extremely large text sizes, at which legibility is really the only concern). Thus, it works best for situations where your titles are determined ahead of time or are guaranteed to be short. It’s not really great in situations like blog entry titles where you typically don’t know how long titles will be on future entries.

Bottom Aligned Titles

For bottom aligned titles, the first step is measuring the distance between the top of the element and where you want the baseline to fall. By measuring to the baseline of the text, we ensure that when the browser’s text size is changed, the text resizes upwards instead of downwards. In figure 1 below you will see that our sample distance is 100 pixels. Set this distance as the top padding of your block element (padding-top: 100px).

figure 1

Now we get to use the magic of ems for the second part. Those of you who haven’t explored the unit “em” need to do some more reading, because it’s an awesome thing. Basically, one “em” is equivalent to the current text size, and it changes whenever the text size changes. The benefit here is that we can move up our titles using “lines of text” as the unit. If your line-height is 1 em, then 1 em is your “line of text” equivalent. Thus: 1 em would be one line of text, 2 ems would be two lines of text, etc. So in the case of a single-line title, we give the inner element a top margin of -1 em (again, make sure it’s set to display: block;), as you can see in figure 2 below.

figure 2

Voila! Your text is magically bottom-aligned!

Middle Aligned Titles

If you want your titles to be middle-aligned, it’s the same process, just altered slightly. First, instead of measuring the top padding to the text baseline, measure it to the middle alignment point. Then, when applying the negative top margin to the inner element, use half of the line height instead of the whole value.

It’s that easy!

Fake Table Columns Using CSS

2008-11-26T16:42:21Z

Anyone who's been doing the HTML side of web design for a while has most likely laid out a page using tables. Nowadays, that's frowned upon…and for good reason. But sometimes, tables are just handy! Sometimes it's difficult to do what tables can do without them. But since I'm committed to using semantic HTML as much as possible, I'm always experimenting to figure out new ways to simulate tables' behavior.

I've had some limited success in simulating tables, in limited circumstances. This is one of those circumstances. In this instance, I was wanting two columns of content (not columns for page layout, that is). The exact behavior I was wanting is to give the left column a fixed width and have the right column be as wide as necessary to fill the remaining space, as seen in figure 1.

figure 1

I also wanted the left column to resize if the text on the page was resized, to allow for flexibility in browser settings, and the solution turned out to be relatively simple. Simply float the left element and give it a width in ems. Then make sure the right element has “display: block;” and give it a left margin equal to the width of the left element (using ems). See figure 2 for an example. Voila! Problem solved!

figure 2

I enjoy using this trick with forms. If you treat the input labels as the left elements and also give them “text-align: right;” then group the input and any other items next to it together in an element on the right, you get a marvelously center-aligned form! (Make sure to give all the labels a width in ems that's large enough to accommodate the longest label.)

Designer Mom

2008-11-03T17:39:13Z

This is the site of Natalie Jost, a work-at-home-mom (WAHM) who's a fabulous designer and also a Christian. She writes about everything from her beliefs to being a mom as well as design (web and otherwise), of course. Her writing about all those topics combined was part of the inspiration for my dual-blog setup.

Cause Marketing at 8G

2008-09-20T22:17:18Z

Cre8tive Group (or "8G" for short) is where I used to practice website design (and other types of design and interactive development). They are a media marketing company focused on cause marketing and socially conscious clients. They specialize in two things: helping their clients figure out what their story is, and helping them tell it in the most compelling way [to inspire people].

Textpattern

2005-07-20T19:54:26Z

This the awesome content management system I use on this site. It's extremely flexible, easy to use, and outputs very clean markup.

How Wide Can Printable Images Be Without “Shrink To Fit?” [1]

2008-10-01T16:07:41Z

Ok, so I'm doing the printable version of a webpage layout for a client. The "tarket" is older middle-aged men and this particular page is printed a lot. I started with the assumption that browsers print by default at 72 ppi unless "shrink to fit" is turned on, which is a logical assumption considering how large browsers typically print things. But then I got to thinking, "is that a valid assumption? It's been a long time since I've measured it…"

So I do some print preview screen captures in Firefox 3 and IE 7, and am plesantly surprised that they both print at higher resolutions than I thought. Unfortunately, they don't both print at the same resolution. I also tested in Firefox 3 on Mac OS X, and it's different than either Windows browser.

IE 7 seems to print at 96 ppi, which is pretty logical, but Firefox 3 only prints at 91.5 ppi…? What's that about? Mac Firefox was higher than both, but I didn't bother measuring it since I only cared if it was lower. The other bizarre thing is the default margins. They tend to be larger than I expected, around 0.6-0.8 inches on the left and right, leaving a lot less printable area than I thought based on my first screen captures.

So the result: the optimal printable width seems to be 660 pixels wide, since the lowest resolution browser (Firefox 3) seems to print 664 pixels total, but I just rounded it down. Now, most of the time this doesn't matter since a lot of people just use "shrink to fit" all of the time. But if you have a page that just has to be guaranteed to print correctly, aim for 660 pixels or narrower and you'll be golden.

Javascript Event Bubbling

2008-10-28T16:13:44Z

When it comes its support for web standards, I've never thought of IE as being that bad. Yeah, it has its quirks, but it's not as bad as most people think. I've done some pretty complex layouts and I've never come across any problems with IE that are insurmountable…until now. The interesting thing is that it's not a problem with HTML or CSS support to which I'm referring, but instead a problem with its event handling.

I was trying to write a simple script to create little event popups (or popovers, as I like to call them, since they're not separate browser windows) for a grid calendar. Now, of course, I went about doing it the correct way through progressive enhancement, which involves taking an existing page and adding event handlers dynamically, without any embedded JS. This worked easily in Firefox, where I do most of my development, but when I tested it in IE 7, I just couldn't get it to work.

Here's the basic concept I was implementing: the user mouses over a link on the calendar, and that shows a little popover with detailed information. Now, that popover is actually a link being styled as a block element, so that way the entire area of the popover can easily accept mouse events. When the user's mouse leaves the calendar link that activated the popover, a timeout is set so that the popover is hidden within one second if nothing else happens. But if the user mouses over the popover, the timeout is deleted so that the popover remains visible.

I've used this technique before with great success, but for some reason it wasn't working this time. After a little testing, I figured out that the function being called by the popover wasn't receiving any reference to the popover element, which didn't make any sense, because it was receiving the reference in Firefox. After some more debugging, I discovered that the function was receiving a reference to the element initiating the mouseover event, but the problem was that the element was a span inside the link, instead of the link itself.

That made me remember research I had done a while ago on event bubbling, so I began that research anew, and came across a great article on understanding event bubbling called Event Order at Quirksmode.org. So, it turns out that since I had additional elements inside my popover link (which was handling the events for the popover), it is actually impossible in IE to discover which element was supposed to be controlling the event. Wow, that's really disturbing…why would Microsoft make an oversight like that?

So I ended up using jQuery, which is pretty cool. I had never used it before (and it has its own issues), but it did make my script shorter and somehow has its own workarounds to the IE event bubbling issue.

Event Bubbling Resources I've found useful:

Bottom-Aligned Titles

2008-09-10T22:07:02Z

Hi-di-ho, here's the content of the blog entry itself. I talk about a bunch of stuff, but there's not really anything here since this is a dummy entry. Why? Because I need some text to fill space.

Hi-di-ho, here's the content of the blog entry itself. I talk about a bunch of stuff, but there's not really anything here since this is a dummy entry. Why? Because I need some text to fill space. Hi-di-ho, here's the content of the blog entry itself. I talk about a bunch of stuff, but there's not really anything here since this is a dummy entry. Why? Because I need some text to fill space. Hi-di-ho, here's the content of the blog entry itself. I talk about a bunch of stuff, but there's not really anything here since this is a dummy entry. Why? Because I need some text to fill space.

Testing August Web Design

2008-08-20T22:59:07Z

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pulvinar felis et odio. Donec rutrum lobortis elit. Nullam velit. Aenean vitae pede. Proin vitae felis. Vestibulum a eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae nibh id odio dapibus luctus. Fusce scelerisque. Proin elementum lorem eu magna feugiat dignissim.

Phasellus bibendum, elit id vehicula placerat, eros velit facilisis lacus, sit amet fringilla nulla odio eget massa. Phasellus semper interdum eros. Sed vel nisl pulvinar justo adipiscing congue. Curabitur vulputate turpis vitae enim. Praesent vel nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ultrices. Vivamus luctus rutrum massa. Integer odio. Nullam sed sem a erat semper consectetuer. Vivamus dignissim mi id odio. Quisque non quam in enim bibendum rutrum. Suspendisse eu diam.

Ut leo odio, dapibus vitae, vulputate at, ullamcorper a, ipsum. Vivamus dictum. Fusce non ligula in dui iaculis luctus. Vivamus eu nisl vel mi gravida vulputate. Nam euismod posuere diam. Morbi tempus, arcu vitae faucibus lacinia, tellus enim commodo neque, id dapibus metus ipsum quis lacus. In hac habitasse platea dictumst. Cras nec nulla nec leo iaculis posuere. In sit amet risus. Donec in tortor aliquam nunc malesuada lobortis. Ut id turpis. Cras blandit sodales lorem. Morbi quis libero eget tortor porta pharetra. Aenean nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In arcu est, consequat eleifend, iaculis ut, rhoncus congue, leo.

Testing June Web Design

2008-06-20T22:59:40Z