Over the weekend my wife and I decided to go see a movie at the Arclight. I like the Arclight because you can reserve your seats. It's a nice theater with good parking. Now I'm going start a rant and at the same time comment on how the user experience can be improved with a little effort. With that in mind, I was sitting on the couch and went to the Arclight Cinema website on my iPad. Tapped the movie, selected the date and then the time I wanted to purchase tickets and a small popup bubble displayed showing available seats, but there wasn't an option to select seats or purchase tickets.

After looking around the website I was not able to find a way to purchase movie tickets. So I thought, no problem, I'll just give them a call. I tapped the Contact Us link. The link opened a new tab with a contact form, but no phone number. I didn't want to send a message to be seen later, I wanted to buy tickets now. Then I went looking for a phone number on the website and while there was a phone number for parking information, there wasn't a contact phone number to be found for help or purchasing tickets. Hot tip, make it easy for the user to get help or tell the user up front what to expect. Not able to find a contact phone number, I went back to Google which displayed the phone number and made a call to get help. They were busy so there was a wait, which I can understand that since it was Thanksgiving weekend. When I got a person on the phone, they told me that their website doesn't work on an iPad and to use a phone or computer. There really isn't a whole lot of difference other than screen size between the desktop and tablet browser experience. With very little work the desktop website can be made to work on a tablet. Better yet, make the design responsive from the start.

No problem, I have a iPhone in my pocket and I know how to use it. I filled out all the information, got the the credit card page, filled out my credit card information and got my first error. Not just any error, not even a friendly error, but a 500 error. For those that don't know, this means something went wrong on the server.

Continue Reading "Arclight Cinemas' Bad Form..."

A domReady function handles DOMContentLoaded events in your browser. The DOMContentLoaded event allows you to add behavior or change the HTML of a page after the HTML has loaded and before the onload event which happens after the complete page, including images has loaded. This allows you to add menu, tree behavior, AJAX functionality or anything else without having to wait for all items on a page to load. You may have experienced the need for a DOMContentLoaded event on a page that includes drop down menus or a tabbed interface which doesn't work until all images have loaded. Using the DOMContentLoaded event allows you to add the behavior before images and objects have loaded, giving a better user experience. The domReady function is similiar to the jQuery ready method without requiring jQuery.

Back in 2005 I modified code from Dean Edwards that had been modified by Tino Zijdel and added a DOMContentLoaded event. This is what is commonly known today as a domReady event. In 2008 I created a separate domReady module using Object Literal Notation (OLN). With time, code styles and methodology change. Even though the code still worked, it was time to for an update. With about an hour of time, I modified the domReady code to use private functions, delete code for KTLM browsers, and clean up the code.

I changed the code to leave only the domReady global function. All other functions are private to domReady instead of the previous two global varibles. With the OLN object, all methods could be accessed globally, those methods are now private. The code needed to not create itself if the js file had been loaded multiple times and to reveal only the domReady function. Here's where I started.

// Create the domReady event handler once.
if(typeof domReady !== "function") {
    var domReady = (function() {
        // Array of domReady event handlers.
        var events = {}, domReadyID = 1, bDone = false;

        // Function that adds domReady listeners to the array.
        function add(handler) {
        }

        // Function to process the domReady events array.
        function run() {
        }

        function init() {
        }

        init();
        return add;
    })();
}

Continue Reading "domReady version II..."

I read a rant by Jeff Atwood on websites that nag the reader to install their app every time the site is accessed. It doesn't matter if you've selected "No", these sites keep nagging you to download their app. The post is called App-pocalypse Now. It is very good and I suggest reading the post.

I run into this all the time when a website links to a website (usually a news site) that everytime asks me to download their app. It is frustrating. I just want to read the article and be on my way. I don't visit these sites often and don't see the point in downloading an app to view their content every six months or so and a link will always send me to the website not the native app, so what's the purpose of downloading their app? In the post Jeff writes:

Let's start with the basics. How do you know which apps you need? How do you get them installed? How do you keep them updated? How many apps can you reasonably keep track of on a phone? On a tablet? Just the home screen? A few screens? A dozen screens? When you have millions of apps out there, this rapidly becomes less of a "slap a few icons on the page" problem and more of a search problem like the greater web. My son's iPad has more than 10 pages of apps now, we don't even bother with the pretense of scrolling through pages of icons, we just go straight to search every time.

Which got me to thinking. Other than games, just what benefit does an native app give over a website? What value does a native app give that a website can't give the reader? Notifications can just as easily be replaced with an email message. If you download the LinkedIn app you get notifications and email notifications. Maybe an app is better formatted for a device, but websites should be responsive to the screen you're using.

I thought personally, why have I downloaded an app over a website and what apps do I use most. Facebook, though with the exception of notifications, I can't really think of anything that the app does that can't be done in a website. The twitter app has a great feature where it remembers the last tweet you read and returns you to that tweet in the list of tweets. That makes it much easier to read my twitter feed, but why couldn't twitter do that on their web page? Geolocation is supported, though badly I think on mobile devices which might be a reason to download an app such as Yelp. Most apps I've downloaded I don't even use.

My credit union app allows me to take a picture of a check and deposit the check wherever I am which is useful since my wife has several different employers, none of whom direct deposit her paycheck. The native app has an option to eDeposit that the website doesn't have.

I don't know, but I believe the image of the check, for performance reasons, would have to have the program reduce the image's file size before sending it to the server. I did about two minutes of searching on Google and found HTML5 photo upload and tested it on my phone and it was able to reduce the file size of an image on my phone. I know the code is a jQuery plugin and jQuery might not be used on a mobile website, but I'm sure with a little more looking I could find code that will scale an image or rewrite the plugin so that it doesn't require jQuery. This is by no means an exhaustive test as I only tested the web application on my personal phone. This tells me that the eDeposit feature could be added to the website.

From a company's point of view, I would think that it would be less expensive to provide a mobile website solution instead of a native app. Look at the credit union app, with the exception of eDeposit, it is the same. Your app programmer would have to know iOS, object C, Android, Pascal, Firefox OS, and every mobile operating system's language of choice. Most likely this would not be one person, but multiple people. As a company, to what platforms do you provide an app, iOS, Android, Windows, Blackberry, …?

Now I'm beginning to think that the only reason for downloading an app is because the website hasn't been programmed with features in the app or been made responsive. What do you think?

At a previous job I had a project where I needed to retrieve data from YouTube and Vimeo. While YouTube always returns data even with an invalid video id, the Vimeo script element returns a 404 Not Found error on an invalid video ID. The jQuery version of JSONP does not support error handling and I needed to tell the user that an error had occured.

JSONP is a method of getting cross domain data using the browser by injecting a script element that points to a cross domain source and passing in the URL query string the name of a callback function. The script element calls the callback function with the passed data as the function argument. You could make a call like:

http://tanny.ica.com/ICA/TKO/test.nsf/jsondoc.js?unid=B933790B1DC265ED8025725800728CC5&callback=dir.showDoc

Which would return:

dir.showDoc({
    "firstname":"Adam",
    "middleinitial":"",
    "lastname":"Aaron",
    "fullname":Adam Aaron/ROCKALL,
    "shortname":"AAaron",
    "unid":"B933790B1DC265ED8025725800728CC5"
});

Continue Reading "JSONP with Error Checking..."

Welcome to Sky, a design I've been working on and off on since May 2013. I was let go last week because of cost cutting from my job and decided that I needed to get serious about completing the design since I view my web site as my business card. I'm using the original sky graphic from the first version of my web site, artifacts and all as a tribute to my original design.

After looking at Jeffrey Zeldman's efforts on his design where he went to a single column, I thought I'd try that too. In my case though the font size and width increase for large monitors, tablets, and phones. That's if the media queries work correctly. Since the design is single column I decided not to do a specific design for mobile devices, other than increasing the font size. That means that there isn't a meta element for mobile. We'll see how that works out. I also decided to not do a print style sheet for the first time since 2003. I hope the website is readable and easy to use with a unified experience on all devices.

One of the items I struggled with was search, since I believe search is important for a website. I didn't want a large search field in the header. In this case I'm using the focus pseudo class to expand the search field. Otherwise the search field looks like a flat button.

When creating a comment you now have the ability to use strike through and block quotes in addition to bold, italic, and create a URL.

I have a couple of javascript articles in the queue and hope to publish them soon.