http://writes.robertadamray.com/

Dallas Design

Tue, 08 Nov 2011 19:17:32 -0600

Dallas Design

dallas d

Sat, 29 Oct 2011 05:32:12 -0500

dallas d

R.A.

Fri, 28 Oct 2011 15:51:30 -0500

R.A.

ClearMenu Part 3: Page Behaviors

Wed, 19 Oct 2011 14:09:00 -0500

ClearMenu is a project by the folks at Unit Interactive, including me, as a design experiment and commentary on the state of web design in the food industry. You can read more about the project and all the mini-sites at the ClearMenu site. This is a multi-part series on my contribution, “SportsBar”. The previous entry focused on the layout development. This third part focuses on the development of the page behaviors.

The Media Query Problem

We’re quickly approaching the point in our industry where designing websites responsively is no longer optional. With the unrelenting rise in internet use on mobile devices the pages we design and build for clients simply need to work well everywhere. Unfortunately, the technology for effecting responsiveness is fractured and we’re still arguing about best practices. So, for this project I spent a lot of time considering the “right” way to do responsive.

Using media queries to switch styles at certain break-points is the default option at this point and they have their advantages. The switch is slick and fast, but you pay a price for it. The first problem is that not all browsers support media queries. An argument that doesn’t really do it for me as I’m fine with leaving the old browsers in the dust. The real problem is that browsers don’t ignore styles they don’t currently need. They instead download everything (including unused background images) and store them in case they are needed.

For my project I decided to try out a technique for creating visually random background images dubbed the Cicada Principle. The diamond pattern with various sports balls is actually made up of three separate images of different sizes layered in such a way as to make the ball pattern hard to discern. (The different colors are generated using RGBa backgrounds on the various sections.).

This technique yields great results (and can be a mind bender to work out) but caused an issue for me. I didn’t want to serve all of these images to mobile devices. I could hide them using media queries but I couldn’t stop the images from being downloaded, eating up bandwidth, and slowing the page load. Media queries just weren’t going to work for me.

Adapt.js

I had another responsive need beyond loading the minimal necessary styles for mobile. My page needed to trigger some very significant Javascript changes at the exact same time that the styles were switched. Luckily for me Nathan Smith wrote the excellent Adapt.js - a small script that would allow me to switch styles and Javascript behaviors using the same logic.

Adapt.js works by using Javascript to read the horizontal width of the user’s screen and then loading only the specified CSS file for a given range of widths. Because it loads only the necessary styles, mobile devices never have to download superfluous resources. In addition, Adapt.js provides a callback option that fires when a switch is made and passes which switch occurred to your callback function. This is what allowed me to adjust my bindings in conjunction with style switches.

To further optimize this process I created a base stylesheet that is on every page regardless of window width. This sheet contains the very basic styles used in the lowest resolution layout. I set Adapt.js to only engage at a higher width, so at the very narrowest widths, no additional styles are added via Javascript.

Contextual Loading

Load time is a huge consideration for designing for mobile users and so is focus. It’s much easier to get lost on a full page of content when staring at a 3.5” screen and navigating with your thumb. To help with this, I set up the SportsBar menu sections to live on their own pages by default. If you pull up say, the “starters” section on an iPhone you will only see that section and can go to other sections (separate pages) using the menu navigation, now located at the bottom of the page. For larger screens, the sections are all loaded into a single large page using Javascript. Mobile users are served a contextual experience that loads faster and has a simpler navigation scheme.

Scrolling Images

Another feature that is loaded via Javascript, and only for larger resolutions, is the image swapping on scrolling. This behavior was a central mechanism to the entire design and caused me no shortage of headaches (more on that in part four). However, I think it is important to note that no images are loaded by default on the page in another nod toward mobile-first development.

The images are discovered by the script and then added to the page. Users on mobile devices don’t see the food images by default and are unencumbered by waiting for them to load. Instead, smaller resolutions can click on an item to get a simple light box presentation.

There are other things that could be mentioned, but I hope this rundown has communicated the amount of thought and development that went into realizing a relatively simple site. Developing responsively with complex page interactions is neither simple, nor easy. I’ll cover some caveats and concerns in the final entry into this series.

ClearMenu Part 2: Layout Development

Tue, 18 Oct 2011 08:00:00 -0500

ClearMenu is a project by the folks at Unit Interactive, including me, as a design experiment and commentary on the state of web design in the food industry. You can read more about the project and all the mini-sites at the ClearMenu site. This is a multi-part series on my contribution, “SportsBar”. The first part focused on the design. This second part focuses on the layout development.

Golden Grid System

I design and develop my sites on a strict grid - a column structure and a vertical rhythm. For years I had developed just a single static layout for my designs. Recently I had begun to develop several static layouts and to switch between them using media queries that detected window size. This worked as far as it went, but it didn’t go far enough.

As Ethan Marcotte argues in Responsive Web Design, for a design to be truly responsive it must be liquid. Only in this way can the layout adjust itself for any possible browser resolution. I was keen to try his methodology for this project but there was a major hurdle. For grid-based layouts to really work, the gutters and basic rhythm unit must match up perfectly. Otherwise you violate the principles of quiet structure.

Liquid layouts use percentage widths to stretch and contract the columns. The widths of the columns and gutters adjust to the window width but the rhythm stays static. This results in discrepancies between the two which breaks the harmony of the design. Not good.

Enter the Golden Grid System. Joni Korpi noticed a new toy included in all modern browsers: box-sizing. By setting box-sizing: border-box browsers can now calculate elements’ widths outside of their padding. This means we can have containers, with padding, that have percentage widths. That means we can have fluid layouts without compromising gutter size! (Here’s a more complete explanation.)

Another New Toy

There is one aspect of the Golden Grid System that I hated: using EMs to set the type, rhythm, and gutter sizes. I’ve been on a vendetta against EMs for years. I hate them. That they are a relative sizing unit is great. That they are relative to the parent element is a complete nightmare. So, it was with great delight that I learned of a new unit that is available in modern browsers: the REM.

REM, like EM, is a relative unit but unlike EM, REM is always relative to the HTML element. If the font size set on your HTML is 10px and the font size on your element is 2.4rem your resulting font size will be 24px. Every. Time. No fussy math or 10-decimal numbers. You can easily zoom your entire grid by adjusting the font size of the HTML element and you can do that with pixels. (Again, here is a better explanation of REMs.)

Thus armed I went about crafting my first truly responsive design - using percentages for column widths and REMs for font sizing and gutter widths. If you are interested in seeing how the design lines up on the grid, you can add ?grid=true to the end of the URL of my menu to reveal the Golden Gridlet (three lines, upper right). Clicking on this will show you the grid.

Shifty Navigation

I was almost there. The final piece to my layout puzzle was the navigation. As I mentioned in part one, the navigation shifts between the top of the page for larger resolutions and the bottom of the page for smaller, presumably mobile resolutions. I was lucky enough to have caught a post by Jeremy Keith on achieving this very thing using pure CSS. In short, by setting the body to display: table and the navigation element to display: table-caption you can move the navigation to the top or bottom of your page at will and compromise nothing in the process. Using this technique I was able to realize dramatically different designs for my navigation without resorting to Javascript.

There you have it - the building blocks for the responsive, liquid layout of my menu. In part three I’ll take a look at page behaviors and stylesheet switching.

ClearMenu Part 1: Design

Mon, 17 Oct 2011 18:58:00 -0500

ClearMenu is a project by the folks at Unit Interactive, including me, as a design experiment and commentary on the state of web design in the food industry. You can read more about the project and all the mini-sites at the ClearMenu site. This is a multi-part series on my contribution, “SportsBar”. This first part will focus on the design, while part two will focus on layout development.

Character

When approached about doing a self-directed restaurant menu redesign, a particular restaurant immediately came to mind. I am a big fan of supporting local restaurants over their chain counterparts. There are several restaurants in the area at which my wife and I are recognized on sight. These local places have a special uniqueness (because they are literally unique) that you just can’t find at chains. Often the owners are your server and their places ooze with their personal character. It is sad then to see just how little of that character ever gets transferred into their online menus.

The purpose of an online menu for a destination restaurant (as opposed to a place that delivers or has a drive-through) is to entice a potential customer to actually make the trip to the physical location. So, for my design I decided to focus heavily on creating a large amount of impact to replicate, insomuch as possible, the excitement of sitting in a sports bar while your favorite team is playing.

Perhaps this is seen most obviously in the choice of colors which are vibrant and set into large fields. The slightly masculine oranges, yellows, and blues are placed into alternating bands denoting the different sections of the menu. The constant shifting of highly saturated colors lends some of the energy of game day to the page while the subtle background pattern of diagonal lines and sports balls adds movement while providing the “sports” context.

A Little Off-Kilter

Along with the energy provided by the background elements, I wanted to add some details that would make the user’s experience feel slightly … inebriated. The logo and headline font is Adrianna BigSmalls which purposefully mixes up capital and lowercase letters. The effect isn’t obvious at first but it provides just the right amount of “goofy” for my purposes. The copy is set in Adrianna which, of course, matches the headlines beautifully.

Another detail that will likely only play on the subconscious of a user is the use of drop shadows on called-out elements. The angle of the shadows is different for headlines, featured items, and images. This again supplies the page with extra energy.

It’s About The Food

Of course it is! One thing that almost every online menu gets wrong is treating the unlimited space provided by the internet as though it were print. I feel strongly that every online menu item should have an image to look at. There are usability reasons for this, but from a business perspective I want potential customers to see the food. Text descriptions are great, but nothing will make someone hungrier than actually looking at the food. Well, smell would probably be a better trigger but until we clear that technical hurdle images are the next best thing.

Yet, clicking to view each image didn’t seem good enough to me. I wanted each menu item to be “featured” - to be treated like the hero. To accomplish this I devised a system for the larger resolutions that swaps out the image and the item call-out as the user scrolls down the page. As an added benefit, this system encourages the user to give attention to each item on the menu and to continue scrolling to the bottom of the page.

You might notice that the images repeat. For an actual menu each item would have its own picture, but since I don’t actually own a restaurant I just pulled some food images from my Instagram. This actually led me to an epiphany. I expect most small business owners don’t have a particularly large photography budget which is why restaurants often have little, or very poor, food photography. However, with a tool like Instagram, high quality and controlled photos can be taken virtually for free and added to the site quite easily. My design is wholly intended to represent what could be possible using only an iPhone for photography.

Responsive Considerations

One of the main goals of this project was to showcase responsive design techniques. At smaller sizes the persistent images drop out of my design in favor of a more straight-forward and touch-focused experience. The images live instead in a simple lightbox and the “featured” items are treated a bit more traditionally with the owner having the ability to highlight the house specialties.

At the smallest sizes, the navigation drops from the top of the page - where a desktop user will usually expect it - to the bottom of the page. This follows the theory that someone on a mobile device is generally more interested in viewing the content straight away and will look for navigation only once they are done perusing the content they already have. The navigation is always the last thing in the HTML so the site has no need of a “skip to content” link for accessibility purposes.

Designing such a large menu for responsiveness was quite a challenge. I’ll take a closer look at how I realized this design in part two of this series.

I Hate Thor

Fri, 14 Oct 2011 18:13:00 -0500

Okay, that’s not really true. I have nothing against the comic book hero proper, but neither am I a proper comic book geek. I’ve never read so much as a single issue involving the hijacked hero of Germanic mythology. What I am is a film fan, especially when it comes to films involving super heroes. And it is the recent movie version of Thor that irks me.

But again, not exactly the movie proper. While it wasn’t exactly the pinnacle of the genre, neither was it a terrible film. Much of it, mainly the parts in Asgard, were very well done. My problem is really with the inclusion of Thor into the Avengers continuum.

The following contains spoilers. If you haven’t seen the Avengers movies, go now. Watch them then come back.

One of these things is not like the other

I love the Avengers movies - particularly, Hulk 2, Iron Man 1, and Captain America 1. Those three movies are among the best super hero movies yet made and all tell compelling stories of slightly extraordinary men becoming reluctant heroes. Rogers, Banner, and Stark also share a very similar back story. (Again, I’m working from the movie cannon here.)

Captain America

Steve Rogers was an unhealthy, undersized boy that was transformed into a fairly prototypical super hero by a military super-soldier program. He is bigger, stronger, faster, and more resilient than normal men. However, he was made to earn respect as a soldier by abandoning his assignment as a morale-boosting performer and single handedly staging a POW rescue mission.

He falls in love with a military scientist but he can’t be with her because she died while he was frozen in the arctic for sixty years.

Rogers saw his benefactor murdered, his best friend killed on a mission, and managed to accidentally outlive every person he ever knew or cared about. We only get a hint of it in the movie, but there is potential for some serious angst.

The Hulk

Bruce Banner is a brilliant scientist that accidentally got shot full of radiation on the job. Instead of killing him, the radiation activated something in his body forcing him to morph into a giant, ridiculously muscled, super-man when his stress level climbs too high. He initially retreated from American society, but eventually developed discipline over when he transforms and his activity while in his transformed state so he can defeat another super-soldier experiment gone hideously awry.

He falls in love with a fellow scientist but can’t be with her because she is the daughter of the general that is trying to recruit/kill Bruce. Also, he tends to transform into an uncontrolled, raging, super beast which can strain a relationship.

Beyond his general inability to coexist with other humans, Bruce also has major daddy issues. His own father experimented on him as a child, which is why he survived the accident, and his girlfriend’s father either wants him dead or on a military leash.

Iron Man

Tony Stark is a billionaire, a play boy, and an unparalleled inventor. He made his fortune by developing high-tech weapons for the U.S. military but abandoned that work when he learned that his weapons were being sold on the black market to foreign terrorists. He designed and fabricated a super suit for himself and, as he puts it, successfully privatized world peace.

He falls in love with his assistant cum company executive. While he manages to end up with her by the end of the second movie, chances are that his philandering, alcoholism, and seeming addiction to putting her in mortal danger will make their relationship complicated at the very least.

Stark’s neuroses were laid out plainly at the end of the second movie. He is emotional, irrational, and has something of a death wish all because of resentment of his father. He is so damaged that Nick Fury declines to offer him a position with The Avengers. (Temporarily, obviously.)

Thor

And then there’s Thor, an immortal demi-god from another dimension/planet whose abilities (strength, speed, flight) are a result of being an alien warlord that wields a science-magic hammer. He was sent to Earth as punishment for his arrogance and stripped of his hammer which really didn’t slow him down very much. True, he couldn’t fly, or level mountains, or commit genocide on the same level as before but he’s a prince of a superior civilization of warriors. He pretty much was able to handle himself just fine.

In any case, he learned his lesson (in, like, a day) and got his hammer back so he could defeat the world destroyer from The Day The Earth Stood Still. That was it for daddy being mad at him - they’re totally cool now. And, yeah OK, his brother is about to try to destroy the universe, but they’re not actually brothers so that’s kind of cool too.

He fell in love with a scientist who he can’t be with because he smashed the bridge between the two worlds with his hammer which equates to a transportation problem. Their relationship is fine as long as another means of teleporting between Asgard and Earth is found.

Total Mismatch

Movie-Thor’s nature and origin make no sense along side his counterparts. Why exactly does an alien warrior-wizard need to team up with three American super-soldiers? I mean, he’s the heir apparent to the throne of Asgard, and he already has his own personal posse of super heroes!

Beyond that, there’s just nothing compelling about his character. I’m sure the tension with Loki (demon pseudo-brother) will be played up, but these guys aren’t Wolverine and Sabertooth or Obi-Wan and Anakin. Thor and Loki don’t seem to ever have really liked each other and each is fully prepared to wipe the other out of existence. If the only reason to have Thor around is so that Loki can be the bad guy, then I think Marvel is severely underestimating their library of super villains.

Thor will also be a redundant character. I’m greatly looking forward to the interplay between the self-loathing narcissist Stark, the brooding Banner, and the honorable always-do-right Rogers is going to make for some very interesting situations. I fail to see what Thor brings to that mix.

I have extremely high expectations for The Avengers, and I hope Joss Whendon pulls it off. But including Thor was an unnecessary bluder by Marvel.

Priorities and Values

Thu, 13 Oct 2011 17:17:40 -0500

Priorities and values are not determined in times in crisis. Rather they are decided upon during developmental periods when their need is less urgent. For the considerate they come through much soul-searching, contemplation, and more than a little experience. For the haphazard, priorities and values are merely the default of the society around them.

The point of these mechanisms is for guidance during times of crisis or confusion when decision making is difficult. You turn to your values for clarity and your priorities for impetus. By following them strictly, the sum of your decisions should turn out the way you want it to. There are two pitfalls I see:

First, you must remember to measure each decision against your guides lest you risk surprise when the results differ from your expectation.
Second, there is extreme danger of convincing yourself that you have a strict set of priorities and values when, in fact, your actions are guided by a completely different set. This makes you a hypocrite and others will notice it long before you do.

Some Perspective Please

Tue, 11 Oct 2011 14:22:00 -0500

I apologize in advance for the negativity of this post, but I am just sick of reading tripe like this. This sanctimonious, martyr-for-the-people, pity party is so wrought with illogicality that I won’t have time to point out everything that is wrong with it. I’ll hit a few choice points instead.

People Have Not Changed

“The human race has become spoiled. Every day, new and incredible technology debuts, and we just seem to brush it off as expected, or worse, a late arrival.”

The human race has not become spoiled. If anything, it has always been spoiled. The Israelites survived in the wilderness by gathering up magic dew bread and their main reaction was, “Eh. You got any meat?” Entitlement is not a particular affectation of the current crop of bipeds.

I’m forced to bring this point up all the time in response to people complaining about the way the world is “now”. The world and its inhabitants have not fundamentally changed. Ever. There are only two reasons to maintain the “in my day” myth:

Self aggrandizing: The world used to be great, just like me! I’m nothing like the world now.
As an excuse: If only the world hadn’t changed I could be a better person. Alas.

The iPhone is not Human Flight

“Apple just presented yet another mind-blowing device with mind-blowing features. I think we’re spoiled little brats.”

The author repeatedly compares the newest version of the iPhone to milestones in technological achievement such as human flight and space exploration. This is completely ridiculous. People were awed by flight because it was something that had never been done before. Same with all of the innovations that the author mentions. Nothing about the new iPhone comes remotely close to those kind of achievements.

It is appropriate to be excited about the new technology on display, especially concerning Siri. But expecting people to break down in tears like when we landed on the moon? Really?

People Have A Limited “Wow” Threshold

“Just yesterday, I was in the airport after deplaning from my flight to Minneapolis when I overheard a fellow passenger talking about his beef with air travel. He just couldn’t believe that it would take 5 hours for a flight to get from Denver to Anchorage, Alaska. Did he forget the part where he could be in a chair, flying through the sky, and arrived there in ~2% of the time that it took only 100 years prior and with far less potential of death and dismemberment?”

This is probably worth a separate, longer exploration, but it’s also the most important response to be made: People aren’t capable of being continuously wowed. It’s just not how we’re built.

The amount of wonder someone can experience is set on a fixed, sliding scale. Once we experience a new “wow”, all of our future experiences will against that be measured. I expect that every human that has ever flown experienced a wow moment on their first flight. But every flight after reduced the wonder until it became pedestrian.

This is not “unfortunate”. Without this effect, every novel technology would remain a novelty! That we can cease to be amazed is vital to our ability to improve.

I agree with the author that living with a sense of entitlement is a poor way to go about. It is worth taking the time to be amazed and thankful for the incredible things that can be accomplished today. However, anyone that gets hyperbolic on either side of the iPhone 4s argument needs a serious amount of perspective.

Extra Holes

Mon, 10 Oct 2011 15:53:00 -0500

I failed at the end of last week in my mission to write something here at least once per work day. Thursday and Friday were utterly devoid of content. It was a stumble only! I’m not giving up and I’ve been bolstered in my resolve by my friend, Adam, (no relation) who has also taken up the challenge and started a new blog.

I wish I could recommend it to you. I do! Alas, my good friend ventured into my no-read-zone with this post about vampirism, or somesuch.

Here’s the deal. You may not know this about me. I’m a needle bigot. I hate needles. Completely. Indiscriminately. I refuse to associate with them and certainly do not let complete strangers stick them inside my body in order to drain blood from it. That is not something I do willingly, but every so often it becomes unavoidable.

Sometime during my larval stages a medical professional decided that he would really very much like to shove a camera down my throat to determine just how vigorously my stomach was trying to digest my esopha … esopho … e-sofa … food tube. This did not scare me. Unfortunately, this camera-gag procedure required a high level of not-throwing-the-camera-up which meant that I would have to be drugged into a near-death state. Anesthesia = needles. Needles = terror. It’s a very simple formula.

So we show up on the day of my execution and are ushered into a small room where I am to wait until they are ready for me. It turns out that while I wait I am expected to hydrate myself. Awesome. Though the arm. For-the-love-of … OK, it’s needle time. I knew this was coming, and though I’m terrified I man-up, close my eyes, and grab my mother’s hand to keep from fainting. The needle goes in and I am the proud owner of a second hole through which I can consume salt water.

Now we wait. For two hours we wait while I stare at the repugnant invader and try to remain perfectly still so I don’t anger it. My blood pressure increases and decreases as my body tries to decide which state will cause me the most discomfort. Finally the nurses reenter - with another needle/tube/torture apparatus. I begin to freak.

Apparently the first needle is only good for delivering water - a task for which my body already had a perfectly functioning hole pre-installed. No matter, say they. Stupor must be induced through the yet un-punctured arm. I freak a little more.

My mother, sensing my impending crash throws up a Hail Mary. She explains my fears. Let’s them know that the situation is getting to me. Perhaps they can numb the skin before giving me the second IV? So I can’t feel it and can maybe pretend it didn’t happen? The nurse supposes they can and exits the room. The doubtful way she says it makes me suspicious. The freak holds.

She returns carrying not a squeeze tube, or spray bottle, or even an ice cube. No, this genius thinks that, in order to help me with my needle phobia, it’s best to numb my skin by sticking me with another needle. She extracts the top from the hypodermic and does that, “No, I expect you to die,” flick and squirt right in front of my face. (Why can’t those things come pre-flicked-and-squirted?) I completely freak out.

Full on crying and hyperventilation. I don’t remember doing so, but if I stayed true to character I probably aimed a kick. It takes three nurses to calm me down and monitor my blood pressure and such for a half-hour before they can try again. The needle goes in, the camera goes down, everyone survives.

Two lessons from this: First, be very careful what you ask for - the moron might give it to you. Second, don’t stick needles in my face. I am no longer a child. I will triangle choke you.



Wed, 05 Oct 2011 22:08:54 -0500

I had something else planned for tonight, but in light of the news I think that I will just leave this here: Thank you Mr. Jobs for being a torchbearer for design and all the good that it can bring. We’ll take it from here.

Star

Wed, 05 Oct 2011 08:08:54 -0500

Star

Like It's Your Last

Tue, 04 Oct 2011 17:24:48 -0500

Some of the dumbest advice I’ve ever been given is, “live each day as though it were your last”. I’ve heard it from multiple people on multiple occasions, and though I’m sure they were well-meaning this advice is totally unlivable.

Imagine the implications of living every day as though it were your last. Would you go in to work? Fix the sink upstairs? Would you bother to exercise, or watch what you eat, or eat at all? Thinking about that may expose much of the banality of everyday life, but the truth is that our lives are made up of the day-to-day activities. While mundane, the smalls bits of our lives add up to a far greater whole than their sum would indicate.

Far better, I think, to live every day as though it could be your last, because this is the absolute truth. We don’t know when our time will be up. You still have to live your life, pay your bills, eat your vegetables. But you should be doing all of these in a way that would make you proud if they were your last actions on Earth.

“But God said to him, ‘Fool! This night your soul is required of you, and the things you have prepared, whose will they be?’ So is the one who lays up treasure for himself and is not rich toward God.”
Luke 12: 20, 21 (ESV)

“So, whether you eat or drink, or whatever you do, do all to the glory of God.”
1 Cor. 10: 31 (ESV)

CSS Bug: In-line Font Size Changes 2

Mon, 03 Oct 2011 13:31:45 -0500

I wrote last Friday about an odd quirk of CSS that was throwing off my baseline rhythms. Prior to writing that I was unable to find any information about the issue by searching. I knew, however, that I could not have been the first to encounter this.

Thanks to Brent Lineberry, I now have some more information to go on. He points me to Eric Meyer’s explanation of how inline elements get laid out. I warn you now: that article is dense. Unless you are a math geek/wizard (like Eric Meyer), I advise setting aside some time before tackling it.

The short version is that the rendering is not a “bug” in that it conforms to the CSS specifications. Changing font sizes causes baseline shifts that, in turn, effect the rendered line heights. It doesn’t conform to simple logic, but to be fair, writing a specification that lays out how to render CSS isn’t a simple task. In any case, this is the hand that we have been dealt.

Luckily it’s not an impossible situation to address - you just have to be aware of it. In addition to the fix that I proposed, Brent has shared that adding line-height: 0 to the smaller font-size element will cause the desired behavior. I’ve updated the test page to show both fixes.

Mobile Menu

Fri, 30 Sep 2011 20:57:14 -0500

Mobile Menu

CSS Bug: In-line Font Size Changes

Fri, 30 Sep 2011 11:40:00 -0500

In the course of my current development of a responsive site (and one previous also) I have encountered an interesting rendering quirk that has caused me a few hours of frustration. The rest of this post will only be interesting to you if you are first, curious about CSS rendering minutia and second, if you design sites to adhere strictly to a baseline rhythm. (You should be designing and developing your sites on a rhythm, but that argument is for another post.)

Update: I’ve written a follow-up post with some additional information.

The Problem

I found that changing the font size of a nested, inline element that was already inheriting a font size caused that element’s height (or that of its parent) to change, throwing the rhythm off for all of the elements on the page below. This doesn’t make logical sense because inline elements won’t accept height adjustments.

For instance, let’s say you have a rhythm of 24px and a base font size of 16px. You would expect a paragraph to always have a height that is a multiple of 24. However, if you add an anchor into that paragraph, and set that anchor’s font size to 13px, the paragraph no longer stays on rhythm because of an unexpected change in height.

What is really interesting to me, is that even though I’m making the font size of the nested anchor smaller, the height is actually increasing. This happens in tables as well when setting the font size of individual TDs.

The Patch

The patch I finally discovered is to simply change the default vertical-align: baseline to vertical-align: top or vertical-align: bottom. Everything will then snap back to rhythm, but you are left dealing with the styling ramifications of changing that property. Of course, your mileage may vary.

I’ve set up a test page demonstrating both the problem and the fix. (View the source and use your inspector of choice to examine the differences.) Unfortunately, I’m at a loss when it comes to explaining why this occurs. It seems surely to be a bug. Why would changing an element’s font size also change its line height? Yet, I’m seeing the same behavior in both Firefox and Webkit browsers which suggests that someone out there thinks this is the way it should be.

Every Interaction

Thu, 29 Sep 2011 08:58:23 -0500

As with all preaching, the following is mostly directed at myself but with the hope that someone else reading this could also use the reminder.

As a Christian, every interaction with another person must be conducted to the purpose of evangelism. Not that one should always preach, but rather one must always allow the door of opportunity to remain open. Every meanness, angry outburst, callous comment, foul language slip, show of arrogance, failure of conscience, and public sin lessens the chance that a non-believer will be willing to listen to you about Christ.

“For though I am free from all, I have made myself a servant to all, that I might win more of them. To the Jews I became as a Jew, in order to win Jews. To those under the law I became as one under the law (though not being myself under the law) that I might win those under the law. To those outside the law I became as one outside the law (not being outside the law of God but under the law of Christ) that I might win those outside the law. To the weak I became weak, that I might win the weak. I have become all things to all people, that by all means I might save some. I do it all for the sake of the gospel, that I may share with them in its blessings.”
1 Corinthians 9:19-23 (ESV)

Keeping oneself in subjection at all times is a simple concept that is painfully difficult - and yet vital - to live daily.

The First Snag

Wed, 28 Sep 2011 18:56:16 -0500

I haven’t mentioned it on here yet, but I’m taking this post by Seth Godin on writing to heart. I’ve long wanted to be a more regular writer but have always let my desire to write high quality, and compelling content get in the way of actually doing the deed.

My intent is to write something on here every work day, but unfortunately I almost flubbed my goal just two days after beginning. Usually I have some spare moments at the beginning of the work day that I can use to clear out whatever is bouncing around in my head. Today, not so much. It seems that while getting over myself was the first major hurdle, setting aside time for writing is what I have to tackle next.

That's what makes them valuable.

Tue, 27 Sep 2011 09:35:55 -0500

Suddenly her phone was alight with text messages and emails, all bearing the same message. A month after leaving her previous employer my wife was being recruited by them again. They offered her a better job than she had before and a promise of being the first in line for a promotion when one became available. It was a seemingly difficult choice.

On the one hand, she is now doing a job she loves. On the other, she’s currently doing far more work for far less money, and it doesn’t look like the pay will ever improve much. Returning to her old employer would mean and instant jump in pay with the possibility of a drastic upgrade in the near future.

It wasn’t just my wife’s old bosses contacting her. Several coworkers that she considers friends were also in on the action, urging her to take advantage of this great opportunity - telling her to think about how the money could help her family - bringing and emotional component to bear on the situation. A conundrum.

Except that it wasn’t. The decision had nothing to do with money, or how much she enjoyed her job, or pleasing her friends who had obviously gone out of their way to get her this opportunity. The simple fact was that she had agreed to do her current job and the expectation of that agreement had not been fulfilled.

“The integrity of the upright guides them, but the crookedness of the treacherous destroys them.”
Proverbs 11:3 (ESV)

Regardless of any contract (and her ability to get out of it) she had an obligation as a Christian and a professional to adhere to her principles of honesty. She had said she would do this job and so she would do it. True, it would cost her money and maybe even some friends, but if your principles don’t cost you something tangible, then you don’t really have principles to begin with. Their cost is what makes them valuable.

Daily Spe

Mon, 26 Sep 2011 22:23:30 -0500

Daily Spe