Facebook is now being used by 500+ million peoples across the globe and that is huge they are the the third-largest nation in the world, This means that they have every possible kind of users from the very normal ones — those who looks at the keyboard while typing finger by finger — to the most tech-savvy users — who relies heavily on keyboard shortcuts — and here is the big problem about this change.

Those regular users i mentioned most of them uses text-editors or processors “Microsoft Word, Notepad etc…” heavily so they are accustomed that the Enter button is used for a new line-break and actually all of us are used to this too, So this new UI change is breaking a mental mode for many users even if those are 1% it`s 5 million user.

Let`s have this scenario my mother log into Facebook she founds something interesting, She wanted to post a comment then she moved the mouse to the comment textarea started to type — while looking at the keyboard , believe me she does — while she is typing she hit Enter to make a new line and boom this just posted the comment but she didn`t knew that yet cause she is looking at the keyboard while writing. at the end she moved her head up and to look at her nice comment and found the her first sentence only was posted and nothing else happened, all the typing she made was gone. Imagine how frustrating this would be for her ?

Even worse they don`t have anything that warns you before posting or typing except for the “9px” message at the bottom of the textarea what are you thinking Facebook 9px message ?? , the body copy is small enough at 11px so for something Important like this you made a message in 9px, How would a 50 years old human be able to read this text ? ah i forgot maybe that`s why they invented the microscope at the first place. I`m amazed that a huge company like this haven`t thought about those very clear problems.

I`m no way near a UI/UX expert but those are pretty obvious problems. Although i don`t like this change but i think it would have been a bit better if they switched the Enter with Shift+Enter to post a comment instead, cause using Enter is very normal to many people as i said before to make a new line so it can be easy to forget and mess things up but if they have made it Shift+Enter that would be better cause this would mean that the person is knowing what he is doing – rarely anyone clicks two buttons in the same time by mistake – like Twitter for Mac it`s Command + Enter to post a new tweet and Enter is preserved for it`s natural propose which is a new line.

Here are so ideas i think would have been nice to warn/help users to know about the change

A warning message at the top of the home page

display a tooltip when hover not foucs over the textarea , cause after focus “mom will look at the keyboard to start typing” or maybe disable the action for the first time and display this message after clicking Enter so that the user gets a feedback that they changed something without losing what he wrote.

that`s why i think Shift+Enter is better cause it will decrease errors , it will indicate that the user made this action on purpose and that he knows what he is doing. So Facebook i know that you won`t bring the comment button back but swapping the shortcuts will be better for the users. Please do it so i don`t get those calls “Ahmed ! Help ! my comment is not complete”.

DemoDownload

It is a 6 pages template with the following features:

• Cufon custom font
• Fully working contact from
• PNG fix for IE
• Coda Slider
• Light Box
• Twitter integration
• Working in IE6

In this time i was redesigning my site and adding a blog to it , so i was thinking about a my first post what will it be so after reading David`s articles i remembered a tutorial at PSDTUTS+ using Gradients to make a Coffe cup so i wanted to see if i can replicate this with CSS only so the credit goes to David for giving me the inspiration to do this.

DemoDownload

<div id="wrapper">
	<div id="base_shadow"></div>
	<div id="base" class="base"></div>
	<div id="base_highlight"></div>
	<div id="base_gradient"></div>
	<div id="hand_shadow"></div>
	<div id="cup_shadow"></div>
	<div id="hand"></div>
	<div id="cup_base" class="base"></div>
	<div id="cup_gradient"></div>
	<div id="coffee"></div>
	<div id="smoke"></div>
</div>

So it`s consists of 12 divs think of it as 12 layers , no Z-index used cause once you declare Position property to an element it gets a Z-Index higher than the element before it so the order of the elements are important to write clean CSS code. The Wrapper div is set to position:relative and all inner divs set to position:absolute to be able to position them relative to it`s parent which in this case is the wrapper div.

To center the inner divs easily i have a trick , subtract the width of the inner div from the parent div that it will be position relative to then divide the result by 2 and the same for the height for example: ( #base width – #wrapper width /2 = the top position ) the same for the height. I`m not sure this will work in all situations.

The CSS is very easy , to make complete circles just assign a border-radius which is half the height and width of the element and that`s it check this article for more info about the border-radius.

Then we get to the interesting part gradients i personally like Mozilla`s declaration over the Webkit one cause it`s more easy for me to remember and work with ( BTW , how can you make an ellipse Gradient for webkit ? ). I`ll be glad to hear any feedback .

Update: Today after Opera released it`s latest beta they now supports CSS3 gradients so i`ve updated the demo & the downloaded files

It took me a while to understand how WordPress works and how does the template system works but i a managed to understand it to very well yet but sure better than before , Actually when i understand how it works it was overwhelming cause the probabilities are endless and the sky is the limit especially for PHP developers.

So getting back to the redesign process i mainly had 2 goals:

1. To make something that represent who i am & what i like i like blue it`s obvious and simple designs.
2. to have a blog and this has 2 sub-goals
   1. Improve my technical skills and to gain feedback.
   2. Improve my English cause since i finished school i didn`t talk or write in English regularly enough and i found myself heavily depending on Firefox to fix my spelling errors ,sad but true.
   3. Write and express myself with words cause i`m a shy person & can`t express with words well.

I chose to go crazy with HTML5 , CSS3 & @font-face (check the 404 page ) , yes yes i know both of them are not yet finished and the browser support etc.. . but since this is my playground i wanted to experiment , at first i was going to use Elliot Jay Stocks Starkers but then he made a post about Nathan Staines Starkers HTML5 so i downloaded and read the Codex and started designing.

The Blog was completely designed in the browser cause i didn`t know exactly what WordPress tags will give me or what can or can`t achieve with it so it was a trial and error part and actually i think it`s the best part of the site . at this point you must know that IE6 is not supported although it looks ok in it , only a glitch or two that need to be fixed & weird bug at the contact page – i don`t think it`s a Peek-a-boo bug – cause i tried nearly every solution on the web with no luck . anyway it degrades gracefully for other browsers .

at last i have to give credit to Jim Loy for letting me using one of his fonts.

so feel free to tell me what do you think about it , also any bug reports are welcome .

Update : i got many feedbacks regarding the blue color as a background and about typography problems so i decided to change the color scheme to a nicer and clearer one i hope this one is better.