The Mobile UX


Designing a user experience for mobile is completely different from a website. This may seem obvious to you because of the screen size and the input, however it is MUCH more than just the screen size and the lack of an input device such as keyboard and mouse. So what more is there?

For one, the environment can be entirely dynamic because a cell phone can be taken anywhere, you can be running, on a train, on a boat, etc.   A great mobile experience should be able to be indiscriminate to its context, wherever you are.

The biggest change, obviously, will be the screen size real estate and because of this you must ONLY have the essentials that are needed. In other words, you must satisfy the need of why the user opened up your app or mobile site in the first place. For instance, If I visit the Gmail mobile site I don’t care about the Google readers, or the Google docs, etc. The #1 need for me is to check my email, so if you need to sacrifice the Google reader to make my user experience easier to check email then DO IT!

I was watching one of the old WWDC(World Wide Developer’s conference) , I think 1997, Steve Jobs was talking about produce development and he said that one of the most important lessons he had learned was that it’s best to concentrate on the consumer’s needs first and work backwards to see how the technology can support that instead of the other way around, which is to get a group of developers and see what we can flexibly build for the consumer. So step #1 in designing a great mobile experience is to understand what the exactly the user needs and try to find the best user interface to accomplish those needs.

Here are a few key points that a great mobile experience should have.

Low learning curve. A great user interface has almost ZERO learning curve and should be easy to use from the get go.

Minimal. The functionality presented should be very minimalistic or limited to what the user needs to do. Ford once said “You can buy a Model T in any color you want, as long as it’s black”. A great mobile experience should be “You can use this app as long as you press the only button that’s available to you” .

Steps. The point of entry from point A to point B, where the user wants to go should be as minimal as possible.

Leaving a trail. Back in the good ol’ days people used to leave a noticeable trail so that they can find their way back. The mobile user experience should be the same.  It should be easy to see where you came from and where you are going.

Basics of web font-size types (px, em,pts)


The default font size in the web is 16px.

What 16px refers to is the height of the font from highest top to the lowest bottom of the letters. For instance an “e” may only be 10px but when the letter is included with a word such as “Legit” it gets measured from the lowest bottom of the “g” and highest tipping point of the “L” which accounts to 16px.


A lot of people get confused about em, but there’s nothing really that difficult about them if we can think of them like ratios.

1em = default font


1.5em = 1.5 x default font



The above code will approximately double the font size to 32px.



A point is rarely ever used as this unit of measurement is used for physical print. This is based on ink on paper typography. To put it in metaphors,  pixels are to web as points are to paper. Points should never be used on the web as they vary wildly from browser to  browser so you don’t have to understand the ratios converting to pts.

Preview web background while working on Photoshop

As web designers, we are constantly working on photoshop, so when we are working on a background image and you want to preview it on a browser what do you do? Do you open up a text editor and type in the  background: url(” “) code? That’s too tedious and there’s a better way in Photoshop CS5.

With your image opened in Photoshop go to: File –>Save for web and devices . Once the window opens click on the “2-up” tab

Continue on by clicking on the dropdown menu (shown below)



Click “OK'” after you chose “background image” as the settings.

At the bottom of the page, click on “preview’ to see your background image on a web browser.




Applying the golden ratio to web design

The golden ratio has been used throughout history by artists, sculptors, architects, and even nature itself. The Golden ratio is approximately 1.618, or in other words ratio of longer side: shorter side = 1.618. When applying this to a typical website grid width of 960px it will be 593:367= 1.618

Instead of pulling out a calculator, you can use a very useful website application from

(image from goldenratiocalculator)

Knowing this, you can now apply the golden ratio and do a simple grid system with photoshop. It is important to note that not all cases will adhere well with the golden ratio especially when you want to apply some unique creativity, but generally these numbers will work for proportional congruence.


Thoughts on the User Experience(UX) role

For the past two years, there has been a new addition to the title of programmer, developer, engineer, etc. Nowadays, we hear the titles of front end developer, backend developer, software developer, etc. In addition to this there has been a new kind of developer that in my opinion is both important yet very ambiguous. I’m talking about the UX developer, where do they fit into all of this?

I’ve thought about various ways about thinking of these different roles and I think the best way to go about it is to think that you are an optometrist- metaphorically speaking of course. An optometrist tests a person’s eye sight and prescribes him or her the right kind of lens in order to see.. In the development world there are people with different “lenses”. A backend programmer for instance may be prescribed a “functional” lens in the sense that their goal is to make everything functional and bug free. On the other hand, a designer may see the world through a “make everything look spectacular” lens and would unleash creativity to the point that it may be very cumbersome and difficult to develop.Of course nowadays, there is no such thing as the traditional or generic programmer or designer as we are typically aware of the importance of beautiful design and flawless functionality. However, the UX developer is the bridge that gaps these two distant worlds.

To put simply: Front end developer + Graphic Designer +Human factors= UX developer. This kind of developer should be able to speak the language of both the designer and the developer in addition to incorporating the human factors experience. Traditionally, developers struggle trying to communicate their needs with designers and vice-versa. So when a designer gets really unique and creative, the UX developer can step in and explain the technologies in mundane terms and be able to communicate to the designer how complex and time consuming it would be to implement. Furthermore, a UX developer goes beyond being the intermediary between making things look great and and doing development,  but most importantly design a smooth experience for the general user of the product.

Although a UX developer can design sites and can do some web development, it is hardly ever the case that they are the all-in-one solution. What I mean is that a UX developer is not as good or efficient as a full-stacked developer and neither as great as an aesthetic creative would be, although there are the few that can be great at both. Also, there seems to be many inconsistencies of the proper role of a UX developer when I look at job descriptions. But after thinking about this, there shouldn’t be a standard role of a UX developer since every company is different and needs different skillsets to fill in and thus tend to leave all the desired skills left behind and wrap it to the “UX developer”