Recently, Facebook has publicly launched Facebook Lite, a calorie-free alternative to the behemoth pile of 3rd party integration chaos that revolutionized the way we socialize online. The internet is already being pummeled by a cacophony of articles, write-ups, and posts regarding its public launch, including direct attacks on Facebook, criticizing its capitalization on the up-to-the-minute feedback that Twitter currently provides.

Facebook’s recent $50 million purchase of FriendFeed probably helps validate these statements, as Facebook is adopting and integrating new technology that keeps its head in the game with live updates and hive-mind search capabilities.

Facebook Lite Status Updates

Capitalizing on realtime reciprocal information may be a large influence on many of their design decisions for Facebook Lite, but Facebook has publicly stated that FB-Lite is specifically targeting slower connections, particularly in developing nations, in order to provide a streamlined version of the core Facebook features. Based on the fact that FB-Lite is testing in India, this very well could be the case.

Massive Hyperlink Attack

With all this in mind, there’s more beneath the surface that people haven’t picked up on. Facebook has made some strategic moves with FB-Lite that have probably been in the works for quite some time. The UI itself provides a much more usable and enjoyable experience for mobile devices, especially with those larger, fatter hit states on links and buttons. Fat navigation is not just web 2.0 gloss, it’s easier to press with your thumb. Navigation is now clear and concise, assisting with the learning curve of novice users.

The UI has also trimmed redundant body fat. On Facebook Classic, there are duplicate links that access your dashboard, namely the "Facebook" logo, as well as the "Home" link. If you check the URL it points to, it’s actually running separate analytics on each click. They’ve been studying users behaviors, and are adopting a new interface to help clean the clutter.

The duplicate links were probably band-aids for novice users to adapt to the latest Facebook redesign and become acquainted with its new features as of last year. Facebook can now use FB-Lite as their vehicle for implementation testing, especially since it’s marketed in new countries where users aren’t rampant Facebookers.

How a real man browses the internet

Outside of all this field testing and fine-tuning, FB-Lite is extremely stripped down. Almost all Javascript is practically nerfed, and almost every link is a separate page load. Reminiscent of Facebook 4 years ago, it’s right on point with the target demographic of mobile phones and dial-up. Plus it lets me personally power-browse Facebook in multiple tabs without crushing my CPU.

As technology begins to rapidly evolve, we can see noticeable patterns emerge as the mobile market plays technology catchup. Facebook Lite serves as a harmonious blend between dial-up connections in developing nations and portable media in industrialized ones.

This may be the ultimate stop-gap solution before mobile devices replace netbooks, or it may just be Facebook on training wheels running around a test track. While there will probably not be complete adoption of FB-Lite by most existing users, Kudos to Facebook for keeping the ball rolling on realtime assimilation. Worst case scenario, they’ll just implement the best features into the next version of Facebook Classic while widening their reach on an international user base.

This Tweetie app ad was so distracting that it was blog-worthy…

The most non-distracting distraction in the world

How the hell do they expect me to concentrate with all these amazing offers floating around? What was that saying about selling a refrigerator to eskimos…

I’ve seen a lot of things, but this was borderline amazing. I’m not sure if I should feel better or more concerned at this point. I was checking out hosting specs over at IX Hosting, and when I went to close out the page, I was slapped with a nice fat JS alert, accompanied by a digital sales agent. Below is what transpired…

The most obtrusive prompt. ever.

Full Transcript

Grace Says: When you are ready just say ‘Hi’ and we can get started….

You: wow that ambush was epic

Grace Says: Sorry i didn’t quite understand your question, can you rephrase it please..?

You: I was just trying to find server specs for a client who recommends you guys

You: they currently host

Grace Says: Sorry I can’t understand your question. Please can you repeat it for me?

You: are you a bot or running by a script…

Grace Says: You got me, I am a live virtual agent I’m here to offer you this discount really, but I can answer most of your questions too, I hope.

Grace Says: If I can’t and you want to a speak with a live person please go to our Customer Center by Clicking Here

I’m semi-impressed by the fact that they respond properly when they’re called out. I’d just hate to actually think about the amount of time and energy invested in focus groups of irritated users who recommend methods for getting to a real sales rep.

Overview:

A semi-weekly (probably not) installment of everything amazing found on the internet that seems to explode on my browser in an epic lightshow of failure.

This week’s site: Yerzies.com

Spawned by clicking on a hint link for assistance in creating garments  

Full Screen

The most useful modal hint in the world

Thanks application developers, I would have never assumed your intentions. Almost everything clickable on this website throws a fatal JS error.

Please add a Beta label to your site so I know how forgiving I should feel, and so you don’t wind up as the ass-end joke of a blog post.

If you ever interview a project manager, ask them to define Scope Creep. I’ve compiled a formal definition to reference and compare, which is actually now hanging on my office wall.

If they fail to provide either definition, I would recommend that you continue your search…

Scope Creep

- noun

1. Opportunity to secure additional revenue and improve the quality and overall outcome of a development project
2. Unintentional interjection of an outside party causing temporary internal aggravation, characterized by lack of education for due process

Synonyms: focus creep, requirement creep, feature creep, function creep, kitchen sink syndrome

Related Forms: creep-ing-ly, adverb

…Patience is a virtue learned through the course and practice of life.

After developing CSS for so long, it’s rare that one would encounter anything during development that is new and practical, nonetheless life-changing. When dealing with mad scientists such as graphic designers, whose focus is not in semantic markup, document flow, or helping to make the life easy on a development team, there are times where you need to be creative and experiment with new techniques. Carving out the style-sheet for our own website would be one of those times.

In viewing our website, I’m sure you’ve come across the slideshow interface at the top of various pages, with the 1, 2, 3 navigation in switching between slides:

Horizontal navigation through unordered lists is nothing out of the ordinary, and is used at least once or twice every time we develop an interface, which is presumably the same situation for most authors of CSS. Our primary issue is that based on design. the navigation requires a couple factors:

• The navigation is inline
• The numbers are positioned on top of the content
• The navigation is right-aligned

Let’s start with some basic HTML markup for the unordered list navigation:

<ul class="moneyshot_tabs">
    <li><a title="Click to View" href="#moneyshot_01"></a></li>
    <li><a title="Click to View" href="#moneyshot_02"></a></li>
    <li><a title="Click to View" href="#moneyshot_03"></a></li>
</ul>

Normally, my CSS declarations for basic inline navigation would look like the following:

.moneyshot_tabs {
    list-style: none;
    width: 670px;
}
.moneyshot_tabs li {
    display: inline;
}
.moneyshot_tabs li a {
    background: url(images/bg_numbers.png) top left no-repeat;
    color: #FFF;
    display: block;
    float: left;
    padding: 2px 0 0 0;
}

Pretty simple. This sets all the list elements inline, appearing horizontal, rather than vertical. The width on the UL is for the constraints our particular layout, and the anchors have some additional styles applied for graphics. That takes care of our first requirement:

• The navigation is inline
• The numbers are positioned on top of the content
• The navigation is right-aligned

Positioning the navigation around the content isn’t too much of a challenge either. Let’s assume the navigation falls below the content inside of the markup, and appears at the bottom:

.moneyshot_tabs {
    list-style: none;
    margin: -30px 0 0 -10px;
    position: relative;
    width: 670px;
}

Setting the UL to be relative to the elements around it allows it to move more freely across browsers, eliminating rendering issues that deal with quirks mode. Applying a top negative margin positions the list on top of the content, since it appears below it in the navigation. A negative left margin pulls it into the content, as opposed to being on the right-most edge. At this point, we’ve accomplished two requirements:

• The navigation is inline 
• The numbers are positioned on top of the content
• The navigation is right-aligned

The real challenge is consistently aligning the numbers right. Let’s look at a couple options:

• Floats
• Margin / Padding
• Text Alignment

Floating: If we were to float the LI’s or the A tags, we would run into some issues. Based on document flow, the browser will float the elements in reverse order if they are floated right, forcing the numbers to appear in reverse order:

3, 2, 1

In reality, this can then be solved by rendering the pagination in reverse order:

    <li><a title="Click to View" href="#moneyshot_03"></a></li>
    <li><a title="Click to View" href="#moneyshot_02"></a></li>
    <li><a title="Click to View" href="#moneyshot_01"></a></li>

This wouldn’t be semantic at all, and cause some issues with accessibility and indexing. Floating these elements also causes some rendering issues with the z-indexing of the content. It looks like floats won’t cut it.

Margins / Padding: Since the UL is the containing element, we could apply a left margin or left padding to push the numbers to the right. This would prove to be more of a pain than it’s worth, since the numbers can vary.

Assume you have 3 numbers total. In order to push the 3rd and final number all the way to the right, we would have to apply a left margin of 500 px or more. Say a different version of the UI has only 2 numbers, at this point we have to apply more margin to push the numbers further, since the 3 is not there, leaving a gap:

Sure we would do some math and count the amount of number elements, and apply dynamic margins, though that’s extra development time and processing power that just doesn’t need to happen. Looks like margins and padding are ruled out.

Text-Alignment: The remaining viable option appear to be text alignment. This would make sense in terms of practicality since the text is, well, aligned to the right. Why force floats and display properties on something that should make such simple sense. Let’s try it out:

.moneyshot_tabs {
    list-style: none;
    margin: -30px 0 0 -10px;
    position: relative;
    text-align: right;
    width: 670px;
}

Text-align is pretty odd at times. It only works if you apply it to the block level parent, since it affects the text and elements found within the element you apply it against. Should you apply text-align to an inline element (such as the LI’s), nothing will occur, since there is no box-model boundary for the text-alignment to reference.

Seems to work, except for the anchor hit states. The anchors by default are inline elements. Much like the text-align issue, inline elements cannot have width and height properties properly applied to them. Since we want fat hit states and nice graphics on our navigation, there has to be a way to make them larger. Let’s assume we turn them into block-level elements. This will provide them the ability to have boundaries and display properties such as a width and height. Though once we do this, they stack, and no longer respect the text-align property set on their parent:

Well there’s actually a way to cure this: “inline-block.” According to quirksmode.org:

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

This helps us in more ways than we can imagine. It allows us to provide dimension properties to the anchor tags, but they will not stack, and will still respect the text-align property applied previously. Let’s modify our markup, setting this property and giving the anchors some dimension:

.moneyshot_tabs li a {
    background: url(images/bg_numbers.png) top left no-repeat;
    color: #FFF !important;
    width: 20px;
    height: 18px;
    display: inline-block;
    padding: 2px 0 0 0;
    text-align: center;
}

The width, height, and padding settings are based on the background image being used to produce the rounded corner effect. Text-align: center allows the numbers to be positioned perfectly in the center of the rounded box. Check out the final result:

Revising our list of requirements, it looks like we now accomplished everything from the original design…

• The navigation is inline 
• The numbers are positioned on top of the content 
• The navigation is right-aligned

Before using this technique, one should be aware of a couple known circumstances, from QuirksMode.org:

In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Firefox 2 and lower don’t support this value. You can use -moz-inline-box, but be aware that it’s not the same as inline-block, and it may not work as you expect in some situations.

You can see this element in action by visiting our homepage, and can read more about inline-block at the following URL:

http://www.quirksmode.org/css/display.html