New Facebook UI - will apps make a comeback

The last facebook re-design saved it from becoming a mess like MySpace was a the time. Users had too much control of their profile pages resulting in no consistency from page to page and over cluttered and annoying pages. Third party Apps ruled and dominated users profiles and spammed everyone with their activity.

The re-design buried the apps and restricted profile customisation so that the design was cleaner, more consistent from page to page and generally a better place to be. It did however, mean all the hardwork developers had put into apps was going to waste as apps were harder to get to and less noticeable. A footer navigation to apps later was added which helped somewhat but was not that prominant.

The new design which most should be able to see today if not within the next couple of days makes further improvements to the general look and feel and apps resurface as a prominant homepage feature.

New FaceBook homepage UI (click to enlarge)

First thing to notice is that the main column has been tweaked with more imagery in rounded corner squares. Instead of “joe blogs” did XYZ we have the users profile pic along with it. The main column is just an updating news feed and feels a bit like Twitter - perhaps what Facebook were aiming for.

The right column has been re-purposed. Moving the alerts to the top of the news feed in the main column and introducing a highlights section which app developers will be pleased to know promotes apps as well as groups which has also been neglected due to their lack of prominance.

The left column lets you filter the items in the main news-feed so you can quickly show only updates related to your contact categories. For example you may use facebook for work and personal and so switching between work and friends categories helps you keep your updates seperate.  The left column also means the tabs on the main column can be done away with and are now part of the vertical nav on that side.

The status update field has been made more prominant and changed from what are you doing to what’s on your mind - opening it up to a wider range of discussions. With the status commenting that has proven popular this is now more of a conversation starter than a an Instant Messanger type “I’m at lunch” message.

Overall the new design looks good, is cleaner and better laid out than facebook of old but still lets you get easy access to what’s hot on facebook whether it be friend updates or apps. It’s new filter is also a great help to users that use facebook for both business and pleasure or simply want to seperate friends and family.

I don’t expect as much of a backlash from users as the last big change but there are always some who won’t be happy - look out for the “petition facebook to undo their redesign” group

Thumbs up to Facebook and watch out Twitter.

New Look CNET UK

After editting virtually every style sheet on the site the new look CNET UK is finished and launched. The garish yellow is gone and replaced with a new black theme. Pages are also more consistent and laid out better.

CNET UK new look

Compared the old look:

Old CNET UK design

The project (code names Tiburon) brings the site more in line with the US version CNET.com and incorporates suggestions from users of the site. The team managed to launch the update which affected every page of the site with little to no down time.

More details and Feedback here:

http://crave.cnet.co.uk/software/0,39029471,49300666,00.htm

Expanding the skillset: Advanced CSS Rollover effect without javascript

For a while I’d been using javascript for image rollover effects. They were fairly simple to implement and had the desired effect. However, if javascript was disabled visitors missed out on this. In addition to this I try to avoid javascript if there is a css solution.

I started using the css a:hover psuedo class to set a different background image. This mean a button had to be an element such as a div and have a background image set. The downside to this is it was sometimes it was difficult to get the exact effect desired.

More recently I’ve started using the alpha transparency filter in conjunction with the a:hover class. This has several benefits.

In some cases you can use a single image and just vary the opacity of the image with css when you hover over it. You can see an example in the main navigation on a site I am working on here. The advantage of this method is you can swap out the images anytime and the hover over effect with still remain. Also means faster page loading for visitors as there is one image instead of 2. The effect can be applied on a large number of images or text with a single css style rule making it easy to apply to existing webpages.

The css needed to make all links containing images to have this effect would go something like this:

a:hover img {
filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
Notice there are 3 rules applied to this style all doing the same thing. The first is for internet explorer, the second for Mozilla/firefox, the last for other browsers such as Opera and Safari. This is because this isn’t officially supported but it does work accross the major browsers (Firefox, Safari, Opera, and IE7 - IE6 supports jpg and gif but not PNG transparency)..

The second way to use this technique is over background images. If you want to make something in a background image have a rollover effect, such as a making a part of an image a button. This is achived by placing a white (or black) image over the top of the portion of the image and varying the opacity of the covering image. You can see this in action on a recent contest I designed for Gamespot UK and Amazon.co.uk. The 5 images under the entry form “light up” when you hover over them. This was achived by placing 5 white images over the background image and setting their opacity to “0″. When the mouse hovers over the opacity is changed to “20″ or “.20″ depending on your browser. In hindsight I should have created these images 1px by 1px and stretched them to save download time, however, it demonstrates the posibilities. In this example I had trouble lining up the white images over the background across all browsers so I opted for setting all the “buttons” in the background image as the background of a smaller div into which I inserted my boxes. This wouldn’t happen if I had reset all the default browser values using Yahoo!’s CSS reset as this removes the differences between browers margin, padding settings etc.

Anyway have fun trying out this technique and leave feedback if you get stuck or manage to use it on a project.

More Expanding the skillset articles to look out for are using flash and javascript to replace text with the fonts you wish you could display - yes I’m talking about sIFR

Expanding the skill set: JavaScript and CSS Background Changer

Once again I find myself confronted with having to use Javascript for a project. This time a dynamic background changer was needed (aka skin toggle). Using my feeble JavaScript Skills and a bit of copy and pasting I manage to put together a working template.

Here is an example. You can change the background of this site by clicking on the following thumnails:

How it works:
Firstly the background images are created/selected and placed in a folder together. Next name them the same with a just changing a number/letter/word at the end that. I recommend numbering them sequentially.

In an image editor crop small area of the image you will use as a button for it. You can of course use text buttons instead. In this case I have chosen to make the area around the buttons to change background to match the background image. If you want this effect then crop the large background images into smaller ones that match the size of the area you want to skin. Name the small background images the same as their larger counterparts adding a letter/number to the end. In the example I have used letter ‘a’.

Continue reading »

Ask the Guru: How do I make text flow around complex images

In the the first of FFE’s (From the Front End’s) “Ask the Guru” features we look at shaping text so it flows nicely around images, even if the user is viewing your page with a different text size or browser than you.

Guru: Well a valid question asked have you!

Here we see an example (click any of the example images to view the XHTML page):

Download the example files here

There is not 1 but 3 possible solutions!
Continue reading »

Hacked to Death ii (Safari)

Apologises for the lack of posts the last few days. I’ve not been on holiday, far from it, I’ve started a new contract. I will be producing for a leading media company.

This actually brings me nicely onto this blog entry’s topic - Hacking Safari. I am used to testing on the major PC based browsers (FireFox, IE, Opera and to a lesser extent Mozilla, Netscape, linx) but have never been required or had the hardware to test with Macintosh’s Safari.

For the most part if a design works in FF and IE, Safari will quite happily play along. However, on one page where I have used relative positioning to move an image up by a few pixels I encountered a problem. FF and IE6 didn’t line up. I was forced to use an IE6 hack (see previous hacked to death entry) to set a different pixel adjust for the two browsers. While this solved the problem in IE6, Opera, FF and IE7 - Safari was not happy.

While Safari had rendered the page as FF it treated the positioning of this image as IE6. As IE6 hack only affects IE6 and older Safari’s positioning of he image is not corrected. Quiet a problem.

Thus began my quest to find a CSS hack that only affected Safari. Preferably an elegant hack (if there is such a thing) still allowed my style sheet to validate and would not affect future versions of The browser.

Continue reading »

Hacked to Death

Everyone working on the front lines (building for the front-end) will have likely encountered a page that despite being a coding piece of art looks great in one browser but falls apart in another.

If you don’t work for Microsoft you’ll know the problem is usually with the Internet Explorer browser. A lot of the time tweaking a style sheet a little can solve things but sometimes there is no other option but to add a hack.

No one likes hacks, in fact I go to insane lengths trying to find an alternative before I will use one. However, if it is necessary to ad a hack is there a good way, or is a hack always going to be ugly and we just have to face it?
Continue reading »

Switching from Transitional to Strict

I’ve been using XHTML Transitional for while and been happily validating my code on the w3c website until I heard a podcast from Dustin Diaz. Dustin said he prefered HTML strict to XHTML Transitional.
Looking into the reason I used Transitional - because it’s a bit more forgiving - I realised that I should try and make the move to xhtml strict. Looking at my code I was pretty confident that switching to Strict would be fairly painless.

Overall I have to say it wasn’t too much of a headache but the 2 attributes I had to abandon were:
target=
border=
Continue reading »