_archive for the ‘CSS’ category

Facebook at Work

07/23/08 :: by pwang

Like anything with the web these days, news to one person may not be news to another. So my discovery of the new Facebook site may really be old news to the blogosphere. With the f8 convention sold out and happening as this post is written, Fb is really doing some really exciting things, proving itself to be still at least seemingly hip, young, and innovative, in light of its tussles with Google and business negotiations with entrepreneurs and large companies like Microsoft. What impresses me most is how the team interacts with the users.

Like an American driving in another country, on the opposite side of the road with the wheel on the right, users of the new site will have horrible first impressions of the flipped layout. Good thing the negativity is short-lived. In terms of looks, the new look is even more spartan than the original. The wrapper for the site fits snug with the browser window, and its contents are given more room to breathe. There is no more box constricting the site’s content. Before seeing what is possible with this new system, the old one felt fine. The excessive scrolling to the bottom in search of something interesting felt routine and even a little visceral, like going through a real yearbook. The new tabbed profile, coupled with the efficient and more than ever desktop-app-ish controls have made things easier for newbies and initially confusing for veterans. It’s mostly the few main pages with any real redesign. A lot of the content is outputted in the same way, and the pattern of a paginated list for most results pages remains in heavy use. A number of pages don’t even have updated widths for their content column yet, but all have ads on the right column. Given that Facebook is all PHP, maybe these are signs that future battles will be on scalability and flexibility. As a note, a lot of Google is done in Python, which is said to be more scalable. I’m not too worried for Fb, since the company probably has some of the best PHP programmers around. F8 will only increase the line of recruits.

It’s not an easy thing, doing away with something that has a bit of a venerated history, mostly though wide use. It goes to show innovation requires freedom, especially from the constriction of past success. Kudos to Facebook for the vision and the guts. When it appeared, the now worshipped old layout added buttons on the left and made the content container awkwardly boxy. That was probably only a year ago (a time I can still recall, despite having a profile for four years), when a friend shared how he thought Fb was going down the drain because of the then new look. Like when they launched the News Feed a while back, there will be frustration from every corner with the big revamp. Now the same main and mini-feeds are given even more of the limelight. The same with everything that gets more use, like the mini-twitter. All Fb did was ask its user base to develop the app for themselves through their feedback and listen. I think it’ll happen again. And that’s where all the fun is, watching the whole thing grow from just a small camp on the wild frontier of the interwebs. And me? I’m going to use the ‘new’ Facebook, since if I go back I’ll lose my user history with the new features. Also, if anyone from Facebook reads this, why doesn’t your site support pretty urls? It would make your big trove of content more accessible to your relatively non-address-bar-savvy users.

CSS - 10 Years Later

10/25/07 :: by Patrick

Now that CSS is just over ten years old, you may be thinking to yourself: when will us designers and developers be able to use fonts on our beautifully designed websites other than Georgia, Helvetica, Arial, Verdana, etc?

Well friends, that day is coming and coming soon. in fact, the idea has been around since 1998: web fonts. Get all the nitty gritty details from the article by HÃ¥kon Wium Lie (the inventor of CSS) on A List Apart.

If you don’t care to thumb through the article, I will give a simplified explanation. Basically, you will be able to import TrueType font faces into your style by linking to the source font file on a web server. This, of course, opens up another can of worms about the licensing issues related to purchased fonts, but hey, the web is built on stealing, right?

Google’s Blueprint

08/29/07 :: by Patrick

Blueprint is a CSS framework by Google - if only our sites were simple enough to use it. Supposedly it might be useful for wireframing as well…

Vertical Rhythm

08/29/07 :: by Patrick

A useful article on vertical rhythm of web text.

Pagination is in the details.

07/06/07 :: by brocksteady

One of the most commonly overlooked and under-refined elements of a website is its pagination controls. This issue has been popping up a lot lately, so I felt we needed to officially address it. It’s usually treated as an afterthought—and it’s details like this that can make or break a user experience. We’ve caught this on a couple recent sites (LK), but I just noticed that the UserKit comps weren’t ever revised to have a more manageable UI, (as the links are very difficult to click right now).

Here are some basic rules to follow:

1. Large (visually identifiable) clickable areas. Tiny links with no spacing are hard to click. It should be easy as hell to click to the next page! Add a box or a stroke around the number to create a larger hit state.
2. No underlines; small numbers in sequence don’t need visual clutter, people get that page numbers are links, especially with a Previous/Next around it.
3. Make the current page clearly identifiable (and not a link).

Check out this post for a more detailed set of rules and examples.

Here are a few examples that I like: