Technomicon Media's Channel

The Last Tech Chat

by Mark W. Hibben
2/28/11

. . . On this Site

This will be my last Tech Chat article before we launch the new, custom designed, Technomicon website.  What started as a hobby-blog has evolved into a significant occupation, and it was past time that the site design reflected this.  The new site will feature a vastly improved user interface for navigating and browsing site content as well as new sections and much additional content.  The new site will launch this week in beta mode, with the old and new sites running in parallel for about a month as we complete migration of the existing Technomicon content to the new site.  When the new site goes live, we’ll post a link in the home page of the current site.  From this point on, all new articles will only appear on the beta site.

After iPad

One of the advantages of designing the site these past months has been that we could ensure that the site is a rewarding experience for users of touch enabled devices, specifically the iPad, which was used extensively in testing the site designs.  Out of deference to iPad users, we avoid Flash, despite using Adobe Creative Suite 5 to design and maintain the site.  Adobe CS5 really has much more to offer than just Flash, which the recent debate about Flash, and Jobs pronouncements have somewhat obscured.  Beyond avoiding Flash, and some other pitfalls common in pre-iPad site designs, our new site design rethinks the user interface and experience in light of the iPad.

 

At the same time, the site also provides a great experience for desktop computer users of both the Mac and PC persuasions.  Striking the right balance between the needs of the desktop and mobile device user hasn’t been easy, but I think we’ve succeeded.

Pitfalls Avoided

As an iPad user, the most frequent source of browsing frustration, besides the lack of Flash, is site controls that are physically too small for the touch interface.  I see it everywhere, even on Apple’s own site, where their Site Map is very B.i. (Before iPad).  The map consists of a bunch of text links, spaced very close together.  Such controls are difficult for touch users who don’t have pointy fingertips, and one finds them very frequently used, especially for news sites.  Text links are banned from our new site.  All our controls are large rectangular areas, easy for both touch and mouse control.

Early in the Flash debate, someone published a letter from a Flash developer claiming that the iPad couldn’t enable Flash because the iPad couldn’t provide the equivalent functionality of the mouse-over.  As all iPad users now know, this turned out to be complete nonsense, since the iPad Safari browser simply substitutes a touch for a mouse-over.  We make moderate use of mouse-overs, where it’s convenient for the tablet user to provide a touch, but only for informational purposes.  Site navigation controls are strictly click or touch activated.  This provides the most consistent user interface between the desktop and tablet device.    

Although we live in the era of high definition wide screen displays for both desktop and portable devices, it’s surprising how few sites actually make use of the added screen real estate.  Even Apple’s site, which I consider very well designed, is stuck in narrow mode.  In Apple’s case, this may be to cater to the relatively small 1024 pixel width of the iPad in landscape mode.  Here I felt we had to be more forward thinking, anticipating that future iPads and other tablets as well as most desktop displays would be able to display 1080p HD (1920 x 1080 pixels) on the full screen.  Thus we sized the site design to be optimally viewed in a window 1600 x 900 pixels, not counting the window frame and the toolbars that many browsers have.   

However, we also wanted to be conveniently viewable on smaller displays, including the iPad, so we made the site content dynamically resizable to 1400 x 1050 pixels.  The current iPad Safari browser defaults to this mode, and almost the entire site page is visible in landscape mode.  In this mode, text is a little small to read comfortably, but the user can easily zoom to parts of interest. 

Perhaps the biggest pitfall of site design that we avoided really has nothing to do with touch interface compatibility, but is rather an issue of good software design.  Typical user interface design guidelines recommend providing a “consistent and intuitive” user interface, yet it’s surprising how few websites provide this in their site navigation controls.  Often the controls are modal in the sense that the navigation controls, the layout and options available, change depending on where you are in the site.  From a software design standpoint, this is a terrible practice, but you see it all the time on the Web.  To address this problem, we came up with Site Navi, our site navigation interface that provides a completely consistent user interface and controls no matter where you are in the site.  More than just a navigation menu, Site Navi is a mini-site map, allowing the user the browse the contents of the entire current site, and because Site Navi is a self-contained element of the web page, pop-up menus never block the page content.

Beyond Competence

Most journalistic sites do a competent job of presenting their content, but all too many are stuck with the pre-Internet paradigms of print journalism: the newspaper or magazine.

 

Thus many newspaper derived sites present a web page that looks a lot like a newspaper front page, with headlines, photos, and short beginning paragraphs that provide a preview of the full article.  The usual concession to the Internet medium is that the article title is a text link to the full article.  The new Technomicon site completely rethinks the user experience, providing a way for the user to conveniently browse articles as well as making more efficient use of the page real estate.  And no, it’s not a blog type of sequential post approach, but here I don’t want to give too much away.  I think the reader will be pleasantly surprised.

In addition to changing the way the user browses for articles, the new Technomicon site also changes the way the articles are read.  Most sites break articles up into multiple HTML pages, which have to be separately downloaded to the user’s browser.  Many technology sites take this to an extreme, breaking up articles into 10 or 15 separate pages.  Everyone knows why they do this: it’s to expose the user to as much advertising content as possible.  But it’s also grossly inefficient, since there’s a certain amount of server overhead associated with processing the HTML page request from the user’s browser, not to mention the fact that much of the page content is simply repeated from page to page (repeated advertising, navigation controls and widgets).   In this matter, we decided that it was in our best interests not to antagonize readers by wasting their time, so all articles will now reside within a single HTML page, so there’s only one download per article.  Articles are displayed in the content panel, which takes a very e-reader approach to viewing the article “pages”.  The user selects the “page” to be read simply by clicking or touching the appropriate icon at the bottom of the content panel.  The “page” appears nearly instantly, because in fact, it’s already been downloaded to the user’s device.

An Interchange of Artistic and Technical Sensibilities

As the reader has undoubtedly noticed, the site features a dramatically different and attractive look.  The visual design of the site was wholly due to my son Matthew, who selected color palettes, provided Illustrator-based design concepts, and even designed the unique Technomicon font.  My job has been to figure out how to adapt the technology to realize his artistic vision.  In the process we spent countless hours daydreaming and brainstorming in order to arrive at the finished site design, and the line between our respective disciplines and responsibilities became blurred.  Now that we’ve reached this crucial stage in the development of Technomicon as a business, we both approach things in a more wholistic way, and decision-making, whether of a technical or artistic nature, tends to be by consensus between us. 

  • 1.
    After iPad
  • 2.
    Pitfalls Avoided
  • 3.
    Site Navi
  • 4.
    New Paradigm
  • 5.
    Artistic Tech
Technomicon Media
on Facebook