Images in my blog posts weren’t showing because…

I was publishing the posts to my own computer’s version of the blog and therefore the images had urls to my ‘localhost’ instead of the actual blog’s domain name. I didn’t see the problem  after several posts and days because even when viewing the posts using a browser on the same machine, the images were displaying fine because I was on ‘localhost’. Only when I used my work computer I noticed the problem. It was a DUH moment! :)

separator

Where’s search or browsing on Quora’s home page?

 

quora

A couple of usability issues I noticed with quora.com. It's a Q&A site but you can't browse questions from their home page. However if you go to any link, say in their footer, the search box shows at the top. They don't show it in the home page. It feels like they are forcing you to create an account first because that’s all the useful action you can take in that page. All the other Q&A sites, like Stackoverflow.com or any of StackExchange sites or Expert-Exchange.com, allow you to browse right from the landing page. quora.com is not that 'friendly'.

That search box is trying to do two things at the same time. It's used to search and it's used to ask questions. It doesn't seem to know your intention. If you're searching, you have to cancel from the 'ask question' pop up. Why does the user have to go through unnecessary extra clicks? They have so much empty screen space. Why not have one box for searching and one for asking question? Asking a question implies it will post data to the server and be saved in their database. That should be separated from search which is a query.

separator

iRead/iAnnotate is the best iPad pdf reader

 

aji_home-tt-lexel  aji_home-tt-lexel

I got an iPad mainly for reading books in pdf format. I also convert other document formats to pdf to be read on the iPad. For this it was crucial for me to find a pdf reader which satisfied my reading needs.

My requirements for a pdf reader:

  • Continuous smooth vertical scrolling for moving between pages. Horizontal scrolling doesn't do it for me. I like having parts of a page positioned at my eye level. This is specially more convenient when I am laying down reading.
  • Ability to expand and lock the width of the document. This setting should be remembered every time I reopen the pdf.
  • Remember the last document and page read when launching the reader.

 

I consider these requirements very important for myself.

The big problem with the iPad and the AppStore is that most of the non free apps are available for purchase only. They are not available as trial software or expire after some period of time like software on a PC.  I guess when most apps cost $.99, people don't mind buying them and dispose of them when not needed!

I purchased a few readers and downloaded all the free ones and tested all of these.

Here are my findings:

  • GoodReader is a popular one. I purchased it when I first got the iPad. That's when I noticed I didn't like horizontal scrolling. So that reader was out. The included iBooks iPad app was out too for the same reason.
  • After GoodReader I did some research to find a vertical scrolling one and purchased PDFReader Pro. Worked fine and I liked it until the next upgrade which I hated. Vertical scrolling in the upgrade automatically brings in the next page when I scroll the second half of a page to the top of the screen. I hate software updates which change a previous behavior which worked just fine. Width locking is not remembered anymore between reader launches which meant I had to adjust the width every time I opened a pdf! Plus other new bugs which they introduced. It was a botched upgrade and I complained to the vendor about all these issues. They promised to fix these issues. I do know there were at least a couple  new updates but I never bothered to check after I switched to another reader.
  • Among all the free ones I tested, iRead from AJI was the best. Actually it was so good I purchased their $9.99 commercial iAnnontate pdf reader which enables me to add annotations and bookmarks and other nice features. I can also open several pdf's at the same time and be displayed in tabs. They claim the pdf’s with the annotations can be read also on a PC but I haven’t tested that yet. It is a very nice feature though.

iAnnontate is an excellent pdf reader. The only annoying feature in it is if you touch the screen for more than a second the scrolling gets locked. So to scroll you have to swipe and lift your finger quickly. PDFReader Pro doesn't suffer from this

separator

Why so many people don't get the iPad form factor!?

Till today I keep hearing people say "Why get an iPad when a netbook is cheaper and has a full keyboard?". The iPad is a content consuming device. It's not meant to be used as a full blown computer. That what a laptop/netbook is used for. It's a slate flat tablet which you can hold like a book. The iPad is more practical for reading than a netbook. Imagine you're laying down reading. Which is easier to read on, a book or a netbook? Isn't it awkward to have a whole physical keyboard sticking out between the screen and your face? What if you're shortsighted and you need the screen to be real close to your eyes? The keyboard will be a barrier. The iPad or any lightweight tablet is much more conducive for a reading activity.

I am surprised that so many people just don't get it. When the iPad came out John C. Dvorak kept mocking it and saying it's just a big iPhone. Yes and that's perfectly OK. Is anyone going to use it as a big phone? i don't think so. That's like saying why get a minivan.. it's just a bigger car. Every device has its own use. The iPad is great for consuming content. Reading books, magazines, web pages, tweets.. etc. I prefer reading on an iPad than an iPhone. A larger screen shows more content and it's easier on the eyes.

separator

Example of 3D text (emboss) with drop shadow using CSS3 only

 

 

3dText

                                                         The effect in Firefox

 

CSS3 has some nice new properties and one of them is the text-shadow property. You can use it to add depth to your text and have an emboss effect. You can have several text-shadow properties on the same element which enables you to create some creative effects. Before CSS3, one had to use a paint program like Photoshop to add the 3D effect by using layers and adding a drop shadow. Before Photoshop I used a Photoshop plugin called Eye Candy from Alien Skin to add drop shadows with very little effort. We have come a long way to using CSS3.

The text-shadow property has several values. The first one is for the horizontal offset, the second for the vertical offset, the third for the blur radius and then the rgba values for the shadow’s color and opacity.

In this demo I decided to use a free web-font. A web-font is a font the browser downloads and uses to display any text whose declaration is set to use that font. I am using a free font called Calluna from Exljbris. Only the regular style is free. The other styles are commercial. The downloadable font is in the OpenType format (otf) which is supported by all the modern browsers, (IE9).

To create the 3D effect I gave the text 3 text shadows including the white one which is offset towards the top to give the text some depth.

I tried the page in FireFox 3.6, Google Chrome 8 and Safari 5. I did not like how Chrome displayed the drop shadows because Chrome gave them hard edges which make them look like they were cut off. See below. The above image is from Firefox and the drop shadow blends nicely with the background.

 

3dText Chrome

                                                The effect in Google Chrome

 

The html:

<!DOCTYPE html>
<html>
<head>
<!--
Sample by Abdu : jentel at hotmail.com
Description at /
-->

<title>3D text with dropshadow & web font using CSS3 only</title>
<meta charset=utf-8>
<style>
@font-face
{
font-family : "Calluna-Regular";
src : url("Calluna-Regular.otf")
format("opentype");
}
body { font-family : "Calluna-Regular", Helvetica, Arial;
background-color: rgb(210,210,210); }
header h1
{
font-size: 86px;
text-shadow:
0 -2px 3px rgba(255,255,255,1),
0 4px 2px rgba(0,0,0,.3),
0 8px 26px rgba(0,0,0,.5);
text-align: center;
color: rgb(50,50,50);
}
</style>

<body>
<header>
<h1>This is a Test</h1>
</header>
</body>
</html>


separator

Pingbacks & Trackbacks should not be visible in your blog

Sometimes I encounter blog posts which have a long list of pingbacks and trackbacks in their comment section. I am not sure if visitors find them useful but personally I wish the blog owners would keep these to themselves instead of making them public and “polluting” the comments section. Specially more useless when every blog post has pingbacks from the same sources. It seems for some blogging software this feature is on by default and the blog owner doesn’t know or doesn’t care to turn it off. When I came across these linkbacks I feel like it’s someone repeating themselves. It’s the same text over and over again. Maybe the blog owner wants to tell us about how many sites link to his site. Why does he think we really care about this? Usability… not so great.

When one goes to a web page they don’t see a long list of sites which link to the web page so why do some people think it’s OK to do this for blog posts? If I want to find which sites link to a web page, Google can provide this information.

separator

Some LinkedIn group owners need a slap for never taking an action on the their group’s join requests

 

LinkedIn

I have sent some requests to join some LinkedIn groups and they have been waiting for approval for weeks. I am going to announce that these group owners are being inconsiderate. If you are a group owner who doesn't bother to look at these join requests, why are you moderating these requests then? Make the group public or delegate the approval process to someone who does have some time. I bring this problem up because LinkedIn allows a certain number of join requests before they block you from more group join requests. So now I have this queue of requests waiting for these group owners' approval. If there wasn't this limitation of requests, I wouldn't have mind but now I am just going to delete some requests to open up the queue and some of these group owners deserve my wrath for wasting my time!

separator

Use a firewall which can intercept requests for connections & asks for user permission

In my previous post I mentioned I run a firewall which 'intercepts' every connection call to the outside and asks the user for permission to allow the connection to go through. The user can allow once or every time, block once or every time or isolate the app. I use Comoro firewall which is a free firewall which has these capabilities. The firewall allows me to find the programs which make Internet connections. There are programs which make connections to look for updates. These are valid requests. However if I have an app which has no business making any connections, I can decide what to do about it. So far I haven't experienced any rogue programs. Key loggers are popular in this category where they try to harvest sensitive information from a computer and send the information to the outside using an Internet connection. A good firewall would catch and block these types of malware.

I recommend Comoro Firewall. It's free and effective.

separator

Don’t create applications which are passive & silent during a problem

I am writing this post because of an annoying usability issue with TweetDeck. TweetDeck is a Twitter client I use on Windows machines and the iPad. On one of the computers I use, TweetDeck doesn't display anything from Twitter. I just get a never ending progress indicator in each Twitter column. I try to validate my credentials to confirm they are correct and the validation never finishes. I don't get any error messages. There be a connectivity issue but the application never times out. There's nothing in the event log. I reinstalled the app but no dice. So I decided not to spend more time troubleshooting this issue and just use another computer where TweetDeck works fine.

One day I came back to troubleshoot the issue and I decided to disable the firewall to see if it helps. TweetDeck worked. So the firewall was the problem. I run a firewall which asks for permission from any app which tries to connect to the outside. It seems I blocked TweetDeck by mistake. I removed it from the firewall's application blocked list.

If you develop software which depends on external services like a web service or API make sure your application displays a useful error message when something wrong happens or if the application doesn't receive data within a specific period of time. To test your app in such a situation, unplug the network cable or block the connection using the firewall and then make sure the application displays a proper message. A silent and passive application during a problem is a useless application. These application increase the number of incoming support issues for your company. An unnecessary big expense.

separator

Put form field error message next to the corresponding form element

It’s easier for the user to correlate an error message if the error message for a form element be placed next to the form element itself instead of somewhere else in the page. You can highlight the field by making it more prominent. For example by placing a red border around the field or the field having a red background.  Make sure the error message always shows above the fold. Either by scrolling the page to the error message or display a notification message at the top of the page notifying the user about the existence of any errors so they can look for it. Error messages which do not display in the viewable area can mislead the user.

Here’s an example of a page showing too many errors in a long list. Notice the errors box pushed the form below the fold. The problem here also is the inclusion of the full labels of the problematic fields. Some labels are very long causing the summary error box to look like an unorganized laundry list. Had the error message been placed next to the field, there wouldn’t be a need to include the label.

 

hubspot1

                                     See the form on the right side

 

hubspot2

             The error summary box is a long list which pushed the form down
separator