Fit and Finish: Insight from the Ironworks User Experience Group

Ensuring Equal Web Accessibility for All Is Our Specialty

Americans are more reliant than ever on the Internet as their primary source of critical information and communication. When disaster strikes, news happens or inclement weather is on the horizon, the quickest access to the most information is just a mouse click (or finger tap) away. Continue reading after the break ...

The Future of Web Design Will Be Responsive

Responsive web design, a term and technique developed by Ethan Marcotte, is an approach that ensures a web page looks good on any screen size or orientation. This approach is becoming especially important considering the wide variety of devices that might display your web page today and in the future. Today, a user may be viewing your site on everything from a 320 x 480px smart phone all the way up to a 1680 x 1280px wide-screen monitor. Throw in all the upcoming tablet sizes (4.5 in, 10.1 in, etc.)  that can be used in either portrait or landscape, and you can begin understand the diversity of visual platforms that you must now consider when serving up a site.

Responsive web design is primarily enabled through the use of a new feature in CSS3 called media queries. Media queries allow you to detect various parameters associated with the browser's view-port. Based on these parameters, different layouts, navigation and/or images can be served to the user from a single code-base. For instance if a user is using an iPhone in the common portrait orientation, media queries can detect the size and orientation of the device and serve up custom CSS to optimize the layout.

Example: Sasquatch Fesitival

The site styles for an iPhone sized screen emphasize branding and primary navigation links while teasing content to scroll to below.

 

 

This layout comes from the same code-base as the example above. The site styles for a wide screen view (1440 x 900 px) reveals additional primary navigation links along with more imagery and content.

 

The concept of responsive web design is not without its pitfalls. For instance, mobile browsers tend to load all of the content for the full size site while only displaying the mobile optimized content. Also, responsive web design requires more code to serve up an optimized page for a mobile browser, thus requiring more bandwidth and more CPU usage than would be necessary for a site coded for mobile only. Finally, there are browser support issues, as in it doesn't work in Microsoft Internet Explorer 6,7,or 8 and some non-WebKit mobile browsers.

I liken responsive web design to CSS table-less layouts back in 2005. It wasn't always the easiest to do back then due to various issues including difficult browser support. Today, few would even consider using tables for layout in a modern website. I believe the issues keeping responsive web design in the world of boutique web designs will begin to fall away as mobile bandwidth, CPU and browser support issues begin to disappear. The future of web design will be responsive, and this approach will likely be business as usual in the near future.

Learn more about Ironworks's Web Design and Usability practice and our Mobile Application, Strategy and Design practice.

 

Ironworks 2011 Interactive Summit

 Stepping Back to Look at the Biggest Issues Facing Clients in the Year Ahead

Is your web design "Responsive" enough to look good on tablet displays that haven't been invented yet? Do you have an analytics plan in place to capture usage data beyond the "page" level? And just what exactly is your digital strategy for 2011? Interactive teams from Ironworks' multiple offices met this month to discuss answers to these questions and more. Join us as we recap our latest thinking on Web and Mobile Strategy, Responsive Design, and Analytics.

 

To learn more about responsive web design as mentioned in this video, please see our related blog post, “The Future of Web Design Will Be Responsive”.

Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution

Introduction

During the course of a customization and branding effort in SharePoint you are likely to find that you want to style web parts to look different from (Dare I say better than?) the stylistic treatment default to SharePoint.

In my quest for finding a way to improve the look of web parts, I discovered Microsoft’s markup for web parts does not allow for much web part style manipulation, as there are not enough CSS hooks.  Nor could I modify the HTML inside a web part zone in order to wrap web parts with <div> tags for styling purposes—you can’t edit the contents of web part zone directly.  So I had to settle with wrapping <div> tags with classes around web part zones, which got me where I wanted to go somewhat, but it failed to allow me to apply treatments like background colors, borders, rounded corners, and drop shadows to individual web parts—I could only apply them to the wrapper around the web part zone.

So I wrote some jQuery to inject into the DOM <div> tags and classes for web parts that I could then use as hooks in my CSS.

On March 17, 2010, EndUserSharePoint.com published a post I wrote about wrapping web parts with jQuery that included the necessary JavaScript function, but not much else.  I apologize my post did not include the other assets needed, like the CSS and images.  Moreover, with that post I had taken the approach of creating a custom master page from which my function would be called (my usual approach for SharePoint customization efforts).  Several commenters noted they were looking for an encapsulated solution they could drop on the page via a Content Editor Web Part rather than a solution that would require them to modify master pages or page layouts.  While I advocate referencing the solution from the master page or page layout, I understand that is not possible in all situations and that EndUserSharePoint.com leans towards solutions easily implemented by content contributors and site administrators.

The following is that solution, all packaged up, ready for you to plug-and-play.

8 Things You Need to Know About HTML5

Numerous articles have been written about HTML 5 over the last year, so I won’t spend a ton of time delving into the gritty details. If a client is asking, or thinking about suggesting this technology, these 8 things might play a vital role in the conversation.  Simply put, here are some of the big things you need to know about HTML5 as it stands today.

1. Won’t break your old site

That is to say – your old code is going to work! Need to use a div, p, span tag…they work.

2. More Semantic

The new semantic elements aid in the consistency for page layout. Think of it as a better way to outline a page.

 

3. Canvas

Basically, a drawing surface allowing for movable shapes and graphics through scripting.

4. Mobile Now

Mobile devices offer something the PC doesn’t – a controlled environment, that means modern browsers, and that means browsers that can read HTML5. With iOS and Android – you can pretty much hone in there and do a really nice job at utilizing many features of HTML5. More importantly, the numbers for these devices are growing.

5. Power to the browser, not the plugin

Doing things the web way make your pages feel like the web, work like the web, be like the web. If we’re comparing  HTML5 to say Flash to handle moving graphics through canvas, those named items can be searchable, and better yet, because HTML5 is being developed as an open standard – no vendor lock in.

6. IE Still Rules the Roost

You’ve got to know your limitations when working w ith new technology, and for all the good, here’s some bad. IE6, IE7, and IE8 do not support HTML5. As of today, that’s about 50% of the audience. There is a glimmer of hope however, scripts like modernizr are helping, allowing IE5+ to utilize the new elements, but not the new functionality. (like canvas, video etc.)

7. Codecs Matter

It’s probably the biggest battle for HTML5 to fight –codec support. Here’s the quick rundown of where they are today (we’ll limit this to the Big 4 IE, FF, Safari and Chome, and the 2 major phone OS’s):

• IE6-8: None
• IE9: h.264
• Firefox 3.5: Ogg Theora
• Firefox 4.0 beta: Ogg Theora, VP8
• Chrome5:Ogg Theora, H.264
• Chrome6:Ogg Theora, H.264, VP8
• Safari 5: H.264
• IOS: H.264

source: http://en.wikipedia.org/wiki/HTML5_video

Different codecs for different browsers and operating systems. This doesn’t mean you can serve them all, it just means you’ll have to do quite a bit more encoding with maybe a little help.

8. HTML5 Can Be Used Today

It's true.  Technically.  

Really...it's true.  

By simply adding <!DOCTYPE html> as the doctype, all the big browsers will render in standards mode.  Since all your old code will work, you're technically using HTML5.

If you want to use the new stuff, then it gets more slippery.  You "could" use input type="search" - one of the new form attributes in HTML5, and browsers that don't support that input type, will default to type="text", which is what we would have used anyway.  Lastly, if you're not interested in using the  modernizr script for the new semantic tag usage, developers can use classes like class="footer", getting developers to think like the native semantic elements of HTML5.

What's New in Internet Explorer 9

Like many web developers who started working in the mid 90’s I grew up on IE. I hated it with 3, loved it at 4, and even thought IE6 was pretty good in 2001. But I dumped the regular use of IE in 2003 with the release of Firefox.  Back then it was a trust / CSS thing, and as time went on there were just fewer and fewer reasons for me to return to IE. In the past few years, it’s been brutal for IE, and as the saying goes “The beatings will continue until morale improves.”  Here’s a trend of the browsers over the last couple of years:

( source W3C ) 

Recently, Microsoft released a stand-alone version of Internet Explorer 9 Preview.  Just so you know, I’ve decided to check this for you – and yes…you can install IE9 preview on your computer along with your current version of IE8 (can’t speak for IE7 users).  Here’s the proof:

The engineers at MS want you to know that morale must be improving, because the feature and performance enhancements if they are to be believed - are quite impressive.  Here are a few on my list that dazzled me: 

Massive CSS3 selector compatibility

Improved javascript performance

 A slew of HTML5 capabilities

And Hardware Acceleration (video is in Silverlight)

Take this video with a grain of salt, as it comes from the MS site and the caveat here is that only Safari and IE9 preview currently have hardware acceleration, Safari’s option turned off by default.  Still, the demo’s are pretty impressive.

Lastly, not all users are going to have access to the browser, as Microsoft plans the release towards Windows 7 users and up.

Flash or HTML5 / DHTML?

The reality of my job as a front end UI developer is that technology changes and it changes fast.  10 years ago using JavaScript for more than cookie management or form processing would have seemed excessive, and more importantly - futile.  Today, however, with the use of popular libraries like jQuery and Prototype, JavaScript has opened itself up to more interesting possibilities encroaching on what was once the divine territory that made Flash the only real choice.

Recently discourse on these technologies (HTML5 and Flash) has been frequent and heated.   Steve Jobs’ “Thoughts on Flash” and the myriad of responses for and against flash have only muddied the waters for clients seeking the right choice to solve their problems. 

This article is not about whether flash is better, or whether the use of DHTML and/or HTML5 has a more prominent future 5-10 years from now.  It’s about understanding these technologies as they exist today and in the near future.

It should be stated that Ironworks Consulting will always choose the best technologies for their clients. We’re not married to any one technology and as an interactive developer I will always suggest what I believe solves my client’s problems in the most cost effective and situational appropriate manner not just because one is easier or of my personal preference.

The FUD (Fear Uncertainty and Doubt)

With respect to these technologies and how they create or solve problems, it’s important to keep in mind your sources of information.  The amount of disinformation is vast, most of which is piggybacked on Twitter or the blogosphere, and most of which is about the badness of Flash.  Pick your poison – lack of standards, closed platform, poor accessibility, or disappointing system performance, Flash has haters in every one of those categories (and more). But few of these prominent bashers work in, or know much about Flash from a standpoint of development for the web.  The best article I found on the Flash debate comes from a prominent interactive developer - Grant Skinner and his blog post entitled “My Thoughts on the Future of Flash.”   Here’s a quote from the article:

Considered rationally, the absolute worst case scenario for Flash player is that its core feature set is replaced by HTML5 (canvas, video, etc.) over the course of the next 3-5 years. Even if things go miraculously well, these standards are not going to be implemented consistently across major browsers and devices, then adopted by the general public faster than that.

In the more likely scenario, HTML5 will slowly overcome the obstacles facing its adoption (ex. Codecs, IE), and begin providing an alternative to Flash for many scenarios. For example:

• A fair amount of video will eventually be delivered with the video tag, though the lack of advanced features (content protection, variable streaming, etc) means it will won't replace Flash completely. This in itself will keep the plugin fairly ubiquitous
• You'll see some very impressive apps created with HTML5, though they will require significantly more effort to build because of the less robust tools and language.
• You'll see some interesting games and interactive experiences built with it, but it will remain much easier to design and code these experiences with Flash. 

So Grant addresses the future of these technologies and hints towards some of the struggles HTML5 faces in the future.  The reality of the situation for HTML5 however, is that it relies on the browsers that support it. (As of this writing, IE can’t use it at all)  But it doesn’t mean that flash is the preferred “go to” interactive technology either.  On the contrary, our interactive group uses jQuery and Prototype frequently.  They overcome most of HTML5’s shortcomings, and in fact have real benefits over flash.

A colleague and I put together the pros of each technology.  Let’s take a look at how these two technologies flex their muscles.

Advantages of Flash Over DHTML Strong Video Support:  The ubiquity of the plug-in makes Flash an ideal choice to deliver video to a wide audience.  Flash also allows alpha channels in video. Animation:  Greater flexibility and creativity are possible with Flash. 3D: Excellent 3D libraries available for Flash, including – Papervsion3D, Away3D and FIVe3d. Consistent Presentation:  With the correct version of the flash plugin, the client will see what the author intends. Legal Font Use:  Flash encapsulates its fonts in a container inaccessible to its audience, allowing for a wider variety of font choices. True Object Oriented Client Side Language: While JavaScript has features similar to an OO language, it is not a true OOP like Actionscript 3.0.  This aspect of Actionscript simplifies maintenance and enhancements. Rich Media Advertising: Flash’s ability to differentiate is a non-starter for competitors.

Advantages of DHTML Over Flash No Plug-ins required: Can be generated using any text editor, and absorbed by any standard browser. Mobile Devices: Supported by all major smart phones and mobile devices. Ease of Development: Everyday general-purpose solutions can be built easily and “nearly”100% compatible with today’s operating systems. Lightweight: Simple solutions will use less code.  Accessibility: By its very nature, DHTML is more accessible than flash when developed using semantic mark up. SEO: Code and content is accessible by search engine crawlers, simplifies search engine optimization. More “Weblike”: DHTML keeps the web acting and feeling like the web. Separation of Content and Presentation: Unlike the compiled SWF files of Flash, CSS allows developers to separate content from the visual presentation.

The list gives you the general Pro’s for each technology, but each can shine in areas where the other has its strength. For example, DHTML can have fantastic animations but with significantly more elbow grease and Flash can be very accessible but likewise with tremendous effort.

I think both will be here to stay for a long time and as new platforms like the mobile space gain prominence, we may see some new technologies emerge.  And I’ll have to be ready.  I’m excited about the future for interactive development and hope that HTML5 takes off.  But while I’m waiting, I have some viable choices that I can offer my clients today.

When You've Just Gotta Know

 One of the biggest challenges of HTML developers, probably the biggest challenge is browser compatibility.  At Ironworks, we’re often asked to produce pixel perfect representations of the original designs, in multiple browsers - especially IE6.  In my experience using something like IE tester, or for IE7 and IE8 using the developer toolbar simulated versions aren’t always accurate.  Some people go the route of using Adobe’s Browser Lab . 

If you need to be sure however, the best bet is to use the real thing.  Microsoft makes it easy for you to do just that by offering many flavors of their operating systems and stock browsers. You can see the selections at their IE Application Compatibility VPC Page.  Here’s what you can check:

IE6 on XP Service Pack 3
IE7 on XP Service Pack 3
IE8 on XP Service Pack 3
IE7 on Vista
IE8 on Vista

 The downside? – you have to re-download the virtual machine every few months.  Worth it if you just have to know.

Light, Portable and Fast Apache Distribution

Have you ever wanted to keep a functioning mobile copy of your website, or sites you’ve been building? Since returning to the windows world, I’ve had to find an easy way to check sites locally, let other people take a quick look, and hand off the work.  I do it all from my thumb drive, and I keep it with me at all times.

XAMPP

Built with Apache web server, MySQL, PHP and Perl, XAMPP makes serving up your pages a cinch! You just download, extract, and start.  It also contains a number of packages that generate MySQL administration, uploading and downloading files with Pro FTPD Server etc…

Check out the nifty control panel that runs when I click on control.exe

 

You can select what you want to run, and nothing more.

To learn more, check out the XAMPP website.

Familiarity Breeds Contentment

Imagine trading in your car for a new one from a different manufacturer. Your new car has the gas pedal on the left and the brake on the right. In order to activate the turn signal, you need to push a button near the radio. Oh and the radio station is not something you can control at all.

Not a pretty picture, is it?

There's a reason the keyboard I'm using to type this has the keys arranged in a certain order. There's a reason hot water is (usually) on the left and cold on the right. As humans interact with the world around us, and this includes tools, technology, gadgets and household items we use, we’ve developed expectations and conventions for how things should work. We expect flipping a switch “up” will turn something “on.” A magazine should open on the right and contain a table of contents. A TV remote should have a simple "up-down" way to adjust the volume.

On the web, most people know how to operate a drop-down box and a text entry field. But these were new and different to people at first. Other usability conventions that have been established online include underlined or colored text used to represent a hyperlink, the ability to click the logo to return to the homepage, the concept of "on-state" buttons, breadcrumb navigation, tag clouds, etc. As with other products, the best ideas get copied and improved upon. Over time this leads to increased user familiarity and higher expectations for the online experience.

Designers of products (and websites) need to decide when to follow these relatively established best practices and when to blaze a new-user-experience trail. The best websites are often a combination of both. The danger of course is that a lack of familiarity with how something works, even if the design is "better," can often lead to usability problems. Often users become accustomed to how something works and they resist change. An example of "better-designed but less-adopted" systems could be the Dvorak Keyboard or the Metric System in America.

As a general rule conventions should be broken in order to make things simpler for the user, not more complicated. After all, that’s how conventions become conventions. Your website doing something differently has little value to the end user. Your website doing something better is what it’s all about.

It’s interesting how our usability conventions and expectations change over time. My children may never have the need to use a rotary phone or actually “roll” a car window down. They are digital natives with their own expectations about technology. But as the success of the iPhone and iPad user interface has shown us, we are willing to reconsider our established assumptions when shown a better way to do things. And as time and technology march on, we will continue to learn new ways to interact with our world and establish new usability expectations.