Fit and Finish: Insight from the Ironworks User Experience Group

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”.

"Live" from Usability Week in San Francisco - Part 3

Our final segment from Usability Week 2010 in San Francisco looks at evaluating the user-friendliness of recent trends in web design. Learn what's hot and what's not in design for site navigation, search, e-commerce, and augmented reality.

 

"Live" from Usability Week in San Francisco - Part 1

See Colin Eagan's video report from the Nielsen Norman Group's Usability Week 2010 in San Francisco.  Colin is an Information Architect from our DC interactive team.  Look for more reports later this week.

 

 

Video: Mobile Web Apps vs. Native Apps

When Ironworks set up their own YouTube channel, the Interactive group started thinking about how we could contribute content. I mean, we're all really, really, ridiculously good-looking, so how could the camera deny us?

We've got a lot of great ideas lined up for the near future, but the first thing we decided to shoot was a simple conversation. Interactive is a pretty collaborative and opinionated group, so rarely a day goes by that we don't end up talking about current web events, theory or the like. It just made sense to document and share one of these conversations.

Larry King and I have been having this discussion on the future of mobile applications for a while now, and it's a fun thing to talk and ponder about because we're rapidly approaching a crossroads. What will the mobile application landscape look like in 5 years? Will the iTunes store be but a painful memory?

If you're interested in the mobile space and want to hear what we think, head on over to the Ironworks YouTube channel and watch our newest video, Mobile Web Apps vs. Native Apps

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.

Why Your Website Should Be Ready for Mobile Now

Did you know that mobile web usage is growing at a rate eight times faster than the original desktop web? In the first 2 years after its introduction in 1994, AOL v2.0 had reached 7 million customers. In the first 2 years after their introduction in 2007, iPhone + iTouch reached 57 million users. In the last three years, Apple has sold more than 51 million iPhones alone. It has been predicted that mobile browsing will outpace desk-top based browsing within three to five years.

Other mobile platforms are making strong showings as well. In Q1 of 2010, Google’s Android mobile platform sold over 5 million devices worldwide. In May of 2010, there were 100,000 Android devices activated every day. RIM’s Blackberry devices continues to dominate the business world with over 10 million devices sold worldwide in that same quarter (Gartner) . In the US, smartphone penetration is now 19% of all cell phone sales, a total of 45 million smartphones (comScore). Worldwide, there were nearly 3 million smartphones sold every day in Q1 of 2010.

EMarketer predicts that the number of US mobile users accessing the internet will jump from 73.7m in 2009 to 134.3 million in 2013.

In 2009 there were more than 1.6 billion mobile devices worldwide with access to the internet. By 2013 that number is expected to rise to 2.7 billion.

It’s estimated that smartphone sales will surpass worldwide PC sales by the end of 2011.

What Do People Do on the Mobile Web?

The most popular activities of mobile Internet users are: using search engines, reading news and sport information, downloading music and videos, and sending/receiving email and instant messages. (CNET). Over the next four years, International Data Corporation (IDC) predicts the fasted growing activities will be purchasing, social networking and blogging. Other key drivers for mobile include money transfer, location based services, mobile health monitoring, and advertising.

The biggest change in mobile internet use has been a shift from mobile internet use as an occasional activity to it being a daily part of our lives. According to PEW From December 2007 to April 2009, the number of Americans who had used a cell phone to access the internet for email, IM or seeking information has increased from 24% to 32%, or nearly one-third. Almost one-fifth (19%) of Americans use the mobile internet on a daily basis, up from the 11% in December 2007, a growth of 73% in 16 months.

Who Is Using the Mobile Web?

Mobile internet users are not just geeks and early adopters anymore. Mobile access is also bringing the internet to groups who had little access to the traditional desktop internet in the past. Only one third of adults had online access and a desktop PC in 1998. Back then, the average price for a desktop computer was $1800. Due to the low initial cost of cell phone ownership ($0 to around $200 in initial costs), mobile internet users include groups that had previously lagged in internet adoption. 56% of Americans have accessed the internet using a mobile device. (PEW).

Conclusion

The future of the mobile web is coming faster than we know. Millions of internet ready mobile devices are being sold every day and will surpass desktop sales and usage soon. Although email and text-messaging are still primary mobile tasks, search, shopping and social networking activity are increasing quickly. And, more and more people are using the mobile web on a daily basis.

If you are wondering if people are coming to you site using a mobile device, the answer is probably “yes”. Now ask yourself, “What kind of experience are mobile users having on my site”?

 Photo by David Dennis. Licensed Under Creative Commons

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.

eGovernment Challenges and Information Architecture

Government work provides profound, often deeply frustrating, and generally amazing wide-reaching opportunities to apply our IA/UX powers in the service of millions. But this year’s Information Architecture Summit had no sessions specifically about IA in government settings.

And so I asked... “Shall we lunch?”

A group of Washington, DC government IAs and representatives from Canada and Sweden formed a topic table to start the discussion. During our hour we had time for lots of questions, a few answers, and some very interesting lines of inquiry.