Monthly Archive for June, 2009

Facebook Style Overlay in YUI 3 & CSS 3

Published on June 24, 2009 in Code. 9 Comments Tags: , , , .

While wandering-around the Internet looking for examples of overlays in web application interfaces I thought of a challenge: create a working Facebook–styled overlay. I’m in the process of creating an application-wide design for overlays and needed some inspiration. Facebook uses overlays extensively and they have a distinct style [that others imitate, maybe even me :-) ]; I set-out to re-create this style.

Not wanting to mess around — I whipped up a working example of Facebook-styled overlays using only YUI 3 and CSS 3; things are nice and easy to do when you use the latest technologies.

The code is short enough I’ll just lay it all down here:

The JavaScript — YUI 3 is doing all the heavy lifting

YUI().use('overlay', 'dd-constrain', function(Y){

	var fbOverlay = new Y.Overlay({

		contentBox : '#fbOverlay',
		width : '540px',
		height : '300px',
		visible : false

	}).render();

	// make overlay draggable
	new Y.DD.Drag({

		node : fbOverlay.get('boundingBox'),
		handles : ['.yui-widget-hd']

	}).plug(Y.Plugin.DDConstrained, { constrain2view : true });

	// show overlay
	Y.get('#show-fbOverlay').on('click', function(e){
		if ( ! fbOverlay.get('visible') ) {
			fbOverlay.align(this, [Y.WidgetPositionExt.TL, Y.WidgetPositionExt.TR]);
			fbOverlay.show();
		}
	});

	// hide overlay
	Y.get('#hide-fbOverlay').on('click', function(e){
		fbOverlay.hide();
	});

});

Oh, and if you didn’t notice these Facebook–styled overlays are drag-able; Facebook doesn’t do that…

The CSS [3] — This is all me… and Facebook’s colors

#fbOverlay { display: none; }

.yui-widget #fbOverlay {
	display: block;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 10px;
}
#fbOverlay .yui-widget-hd {
	border: #3B5998 1px solid;
	background: #6D84B4;
	color: #fff;
	padding: 0 10px;
	cursor: move;
}
#fbOverlay .yui-widget-bd {
	background: #fff;
	border: #555 1px solid;
	border-top: none;
	border-bottom : none;
	padding: 0 10px;
}
#fbOverlay .yui-widget-ft {
	border: #555 1px solid;
	border-top: none;
	background: #f2f2f2;
}
#fbOverlay .yui-widget-ft > div {
	border-top: #ccc 1px solid;
	padding: 5px 10px;
	text-align: right;
}

If you View Source you’ll see the contents of the overlay are in the (X)HTML; I’m making sure the hide these overlay–contents until the YUI Overlay Class instance grabs them up.

Not much to it; the only CSS 3 stuff is in the second rule, background: rgba(0, 0, 0, 0.5); giving the background some transparency and border-radius: 6px; to round-them-corners. Funny thing, these two style declarations save so much time and effort; look the source for Facebook’s overlay and you’ll see a nasty-mess of tables.

If you missed the link to the working version of the code above: here it is again.

Adaptive CSS-Layouts: Compromising Ideals

Published on June 15, 2009 in Techniques. 0 Comments Tags: , , , , .

Smashing Magazine recently published an article posing a question [as it's heading]:

Adaptive CSS-Layouts: New Era In Fluid Layouts?: “Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.”

(Via Smashing Magazine.)

Intrigued, I read through the lengthly article; which, seemed to answer the posed question positively; or at least suggested the possibility of a yes answer.

The article is a prescription of six “effective techniques to create 100%-functional adaptive CSS-layouts” (quoted from article). These techniques are not independent from one another; they must be used together, and implemented correctly to achieve their prescribed solution to the Adaptive/Fluid layout problem.

All of these techniques can be implemented in one design to create a very user-friendly fluid layout. A smart use of the fluid grid can create an adaptable layout whose proportions remain faithful to the Rule of Thirds, balance and other design principles…

I’m left dissatisfied with Smashing Magazine’s solution. Spending time to understand and apply six different, seemingly independent, layout techniques to an interface feels too compromising. The one-size-fits-all approach to User Interface design leaves you compromising on crucial interface components and aspects of usability. The interface for a web site/application on a computer isn’t going to best serve a user on their iPhone; users with a computer screen resolution of 800×600 are rare; users with wide-screen monitors don’t browse at full screen.

Contorting the development of one interface to serve vastly different devices is not ideal. To achieve a better, more usable interface you must design for the device. I’m not buying the idea that we, as web developers and designers, can get away with forcing our compromised interfaces on user’s screens big and small.

I posed a somewhat opposing question about layout— regarding it’s flexibility, in October 2008: Layout Flexibility – Still A Requirement?

Questioning my own pervious layout techniques and use of Elastic Layouts (em’s to specifying box-model dimensions). Concluding that the adoption of full-page zoom in modern browsers leaves the elastic-layout technique obsolete.