Make Better Web Apps (code included)

A web app isn’t just another website. A website is more like a page, where users can select and copy text.
However the same functionality doesn’t look good on an app. You cannot select text descriptions in an iPhone app for example.
Notice, I’m not talking about copy-paste functionality in text fields but rather in places where the user isn’t supposed to interact with the text. Take a look at this screenshot of ‘Angry Birds’.

angry birds web app

Imagine how awkward it would look, if the user could select the text title and highlight it.
Most of the times this situation is avoided by placing an image instead of using text. However with recent advancements in CSS3 today we can use custom fonts and style them with gradients and other fancy text effects. Today web designers no longer have to fire up Photoshop to get beautiful text effects.

Arctext.js and other jQuery plugins allow us the option to display curved text. The one notable exception in CSS3′s superpowers.

jquery plugin arctext

 

This creates a problem because most web designers stop there without thinking about its implications. The text can now be selected by the user and it looks ugly.

arctext selection

Luckily there is a way in CSS to prevent users from selecting text. I found the answer on ‘Stack Overflow’.

Just use the following code for the text element and the user won’t be allowed to select it.

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Another thing you may want to get rid of is the reedy text cursor which reminds me of ‘MS Word’.

mouse cursor text css

 

This cursor invites users to select and highlight text. It looks like the blinking cursor in MS Word.

To remove it add the following code to your text element:

cursor: default; 

The browser will now display the normal, arrow or pointer type cursor.

That was it for the text. The next thing to consider is images.

Normally if you declare photos via the <img> tag then the user can hit the ‘right mouse’ key to get an image specific context menu.

save-as

To prevent this start using CSS background-image property.

Declare a div and then for that div set its background image property like this:

background-image: url("path-to-file");

Images defined this way won’t trigger the right-context menu.

 

These are some of the methods I use to craft better web apps. What are some of your favorite tricks?

Related posts:

Let's keep in touch! We share tips on how to get the most from your website.