Mark DuBois Weblog

I have been examining the recently released Windows 8 Developer Preview. Obviously, my focus is on web development related materials. I was excited to see that JavaScript is included as a language choice with Visual Studio 2011. That will (hopefully) be the focus of another weblog entry in the near future). Today, I wanted to focus on my initial experiences with Internet Explorer 10.

Before getting started with the specifics, I think it important to note that Microsoft appears to be developing for emerging technologies and their associated human computer interactions. I suspect we will be seeing a lot of new hardware choices before Windows 8 is mainstream.  The emphasis on Windows 8 is obviously mobile and multi-screen. This does not always seem to play well on a more traditional desktop/ laptop machine. Since I don’t have a recent Windows phone, the Metro interface is not as intuitive as I had hoped. I experienced a fair amount of fumbling until I “got it.” This was likely compounded by the fact that I was testing in a virtual environment on both desktop and laptop machines (none had a touch interface).

My initial plan was to download the .iso file and install using VMWare Player. Thanks to a couple of timely tweets, I saved myself a significant amount of grief. Apparently, there were initial problems with trying to launch that in VMWare (although many observed the new blue screen of death). Therefore, I chose both Oracle VirtualBox and Microsoft Hyper-V virtual environments. The install went smoothly in both. The initial screen is shown below. Obviously, I would then choose Internet Explorer from among the options. One can click on the image below to see a larger version. This is true for all the images below as well.

When I clicked on Internet Explorer, I immediately was taken to the Metro version (yes, there is also a desktop version). The Metro version has little browser chrome. One must move the cursor to the bottom (or right click) to open the interface. The image below shows the interface (including the address bar). One will note there are a limited number of choices (hopefully this will improve in the final version). I also note much better support for advanced CSS-3 (including rounded corners, shadows and so forth). I also noted that one does not need a vendor specific prefix (like -ms or -webkit) for most of the CSS-3 features to be recognized. Here is what a page looks like in the Metro view.

Ok, that is great – now, how do I view the source code? I know, only Mark would want to know that. Short answer is that you need to go to the more traditional desktop view. And, how do you get there, you might ask? Although not intuitive, one clicks on the second icon form the right on the bottom.

This activates the desktop view (which is another copy of Internet Explorer 10). Note that you can use the traditional Alt-Tab and Windows Key – Tab to switch between running applications. The desktop view has more traditional browser chrome and features such as view source and developer tools. That view of the same page is shown below.

Ok, now, how do I go back (without using the Alt-Tab key combination). Turns out there is the ability to hover over the edge of the application and see the most recent application. This took a little getting used to (I suspect this is where the touch environment would come in very handy). Note the screen capture below.

Now that I am back in the Metro view, I might want to open a new tab. If one right clicks, more options appear. In this case, I already have two tabs open.

The tabs are similar to what one experiences in other platforms and their browsers (for example Android browsers). One can choose to add a new tab. This is where it does get a bit “interesting.” So, I asked for a new tab and received the following screen.

Note the back arrow in the upper left of the image above. Should I foolishly click on that (instead of selecting from the choices presented), I would get a white page. This makes sense as I did open a new tab and the tab would initially be blank. However, I need to examine the open tabs to realize this. In my opinion, this is a potential issue for those with cognitive memory impairments. In my simple mind, clicking on the back icon should close the new tab and take me back to the most recent tab I was using.

I also wanted to note that you can pin specific pages to the start menu. Note the pin icon above.

Now for overall initial impressions. The interface is somewhat intuitive (provided you have experience with smart phones or tablets). The lack of chrome in the Metro interface is a plus for those wishing to see more of the web page as an immersive experience/ app. The ability to see the page in a more traditional desktop view (along with necessary tools for a developer) is a plus. Of course, having this as a separate application will take up additional resources.

My biggest concern about the entire Windows 8 environment is that I see one could potentially lose work in progress. For example, one might have multiple tabs open in the Metro version. Perhaps one is in the middle of doing some research, filling out a form, checking weblogs, and so forth. Without right clicking, there are no visual clues that you have multiple tabs open. Therefore, one might forget to complete the rest of the form (or have it time out) before logging out. Perhaps the touch version addresses this concern. Overall, I do like the interface (and choices). However, it is a bit of a risk to diverge this far from more traditional Windows interfaces. Time will tell how risky this is.

I had the distinct pleasure of participating in the Mobile JS Summit on August 30, 2011. This conference was entirely online (using Adobe Connect). There was a wealth of information presented over the course of the day. I will try to summarize some of the highlights. The sessions I was able to participate in (either in person or by viewing the recordings) were the following:

• The new rules of designing for touch by Josh Clark – Josh began by indicating that touch screen interfaces create ergonomic, contextual, and emotional demands on designers that are very unfamiliar to those who have only designed for desktop environments. We should start paying much more attention to how toddlers interact with touch screen devices. We should also think of buttons and other UI components as a “hack” and should instead focus on being able to interact with the data directly. For example, consider how you interact with photos taken by your smart phone camera. Is there a next or previous button? We should optimize for one hand use of a smart phone and recognize the thumb covers a large percentage of the available screen real estate. Because of this, we should think in terms of content at the top of the screen and controls at the bottom. We should also keep in mind that the minimum size of interaction area should be 44 x 44 pixels (or some multiple of that). Navigation should be at the page bottom. Josh also covered things one shouldn’t do. For example, the globe of news from ABC for the iPad. While it is a technical marvel and very impressive, it is nearly impossible to obtain useful information while using the app. He contrasted this with the Solar Walk application (also for the iPad). Similarly, why does an eBook reader need a page flip display? It is like having a fake needle on a CD player. Gestures are keyboard shortcuts of keyboard interfaces. So, what does this mean for the web? Apps are creating new expectations. It is presently difficult to handle gestures on a web page. Simple swipes are a start. Consider the Flickr app for the iPad as a beginning example. Consider apps like UZU (where up to 10 fingers can be included in gestures). New platforms and UI metaphors don’t come along very often. Play with these models and learn.
  
• Mobile apps and the enterprise by Jonathan Stark – Jonathan is from the Boston area and covered development of mobile apps for really large companies. These apps often require a lot of IT involvement, interface with legacy applications, and have a short shelf life. Customers need real time access to data. These apps must be scalable as there will be insanely large spikes (which occur unpredictably). They must be extensible (from a small pilot to global). Obviously, one needs  a plan and metrics to measure success as the app is deployed. The app must also be secure. One often needs to rely on data adapters to stitch together disparate legacy apps residing in different departments. These apps often also have different audiences (direct customers, employees, and affiliates). Device hardware access if often the most difficult challenge. One can use tools like PhoneGap or rely on native coding (Java and Objective C). Tools like PhoneGap can be used effectively (if you understand their limitations). From a deployment perspective, one might want to consider third party app stores. For example, many corporations don’t want their internal apps published on iTunes.
• The realities of mobile design by Jenifer Hanen – There are lots of technologies and lots of approaches. It is like we are back in the mid-1990s. There are 4.3 billion mobile devices. Feature phones outnumber smart phones 4: 1. 500 million mobile phones connect to the Web. There are roughly 1,300 manufacturers of mobile devices world wide. Does one do a mobile app or a mobile website? Do what is best for the customer. When developing, consider having to use the application or web site in bright light (or with gloves), or with very small fingers. Some device constraints include: screen size, resolution, memory, speed, and browser(s) available. The line between feature phones and smart phones is blurring. When developing, consider bandwidth sipping. Bandwidth is very expensive in certain parts of the world. Give visitors a choice if appropriate. While there are downsides, consider that we are developing for a revolutionary set of new devices.
• From “It works” to “Wow, this is fast” by Simon Laurent and Daniel Pinter – Simon and Daniel covered development of their app – HTML4 and 5 Complete Reference and the numerous issues they encountered. They had to convert content from one format to HTML. They had to wire that HTML for convenient navigation in multiple modes. They had to create styles that looked familiar (for example iOS). They had to have tolerable performance.  Some of the problems they had to overcome included overlapping pages and long page load times. They covered the use of tools (like JSLint) to help resolve these problems.
• Sencha Touch by David Kaneda – David focused on the fundamentals of using Sencha Touch and included several demonstrations. He stressed that Sencha Touch only supports -webkit based browsers at this time (sorry Opera). He covered the fundamentals of touch events, scrolling enhancements, components, theming, and data packaging. This was a great introduction into this framework.
• jQuery Mobile by Marc Grabanski – this was also a great review of this framework. Marc covered touch friendly inputs, layout and theming, cookies and distribution. He also showed bits of the testing lab and the numerous devices being used to test jQuery mobile. He covered how progressive enhancement is built in and how jQuery mobile is also now a part of Dreamweaver CS 5.5. In addition to showcasing a gallery of apps built on this technology, he also discussed the minified library and why it should be used.
• Appcelerator Titanium by Kevin Whinnery – Kevin gave a great overview of this Eclipse based IDE. He reviewed the basic architecture and showcased a number of corporations presently using this approach. He built a simple mobile app. There is a free community edition of this product. While it requires learning new material (one can not just use HTML, CSS, and JavaScript), the learning curve does not appear to be that steep.
• SproutCore by Tom Dale – this framework was covered in depth. It arose from the foundation for tools like MobileMe. The idea is to make web pages more like desktop applications. we should be thinking of the user experience, not how to develop and deploy something in a browser. He focused on bindings, computed properties and auto-updating templates and provided numerous code examples. Much of this is built on the MVC approach (Model View Controller). Much happens long before one interfaces with the DOM. It is that DOM interface which slows everything down significantly.

What impressed me most about this conference is the amount of new information I received. This is after attending the D2W conference in Kansas City in July (where I also focused on mobile). Suffice it to say the pace of change is incredible in the area of mobile and multi-screen development. I feel very fortunate to have attended this event and  hope these notes are useful to readers. I also found it helpful to have individuals involved with various frameworks present their technologies and discuss them in depth (often one after the next). This allowed for a lot of useful comparisons. This is a fantastic time to be a part of design and development. It is rare that we get to watch the rules being written for a new means of communication.