Is that a Rich Web in Your Pocket?

clip_image002I had a fantastic opportunity recently as I was asked to speak at the Google Tech User Group on HTML5. Eoin Bailey, co-founder of Hit the Road and one of the founders of the Dublin GTUG, invited me to speak on HTML5 with some of their other speakers to give a full out HTML5 day at the Dublin GTUG. I couldn’t pass up the opportunity to speak at Google so I rearranged my schedule to make sure that I could make it. :)

 

The schedule was as follows.

1. Ilmari Heikkinen, "Sprucing up your pictures with HTML5" – Ilmari will cover some HTML5 basics – the enhancements that it provides over previous web standards and will focus on how image and video filters can be used, demonstrating some examples.

2. Neil Turner, "Lessons learned with HTML5" – Neil has built some web applications based on HTML5 and will talk about his experience doing this, including browser support issues, compatibility, responsive web design and performance.

3. Josh Holmes, “Is that a Rich Web in Your Pocket?” – A fast moving trend is building for mobile with HTML5. In this talk, Josh Holmes will show what can be accomplished with a mobile browser app and talk about the design considerations for that form factor.

I borrowed some of the slides from Joe Marini’s MIX talk on Mobile and put my very demo heavy spin on it. My slides are at http://www.slideshare.net/joshholmes/is-that-a-rich-web-in-your-pocket.

Slide1I’ve been passionate about mobile and mobile web for quite some time. I’ve been doing on device mobile development for the better part of 10 years now starting back with CE 4 in January 2002. It’s amazing to me, however, how far the mobile industry has come in that time period. It’s been a fast and furious but fun ride in that time…

Slide2Do you remember the pain of trying to develop on for the text based browser? Remember  when WAP (Wireless Applications Protocol) development was all the rage? It seems soooo long ago at this point and so old school. In actuality, the WAP forum who were the main drivers of WAP was actually consolidated in 2002. And I remember when it was such a huge deal that the ASP.NET Mobile Toolkit could produce WAP compliant mark-up which meant that I didn’t have to…

Slide3

But the mobile web development space has exploded. Smartphones these days, including the Windows Phone, are capable of running some amazing things. To demonstrate I showed HamsterDance Revolution which uses javascript, CSS3, the audio tag and more with some serious performance on a Mango device. Next I showed the FishIE Tank and the Speed Reading in rapid succession and then moved over to the Mango emulator for my demos.

Slide4Phones these days have the potential to be much more than just a small computer in our pocket. Phones these days know what time it is (clock), where it is (geo-location), what the lighting is like (light sensor), if it’s moving (accelerometer), where it’s going (compass) and can even see (camera) and hear (mic). It’s amazing what they are capable of these days. With all of that knowledge of their surroundings, mobile apps and sites should be augmented by reality. They should geo-locate you to give you directions to the closest train stop (for instance) rather than you having to pick from a list. If the lighting is bad, they should go with a high contrast colour scheme. If it’s loud around you, they should not ask for voice input. If you’re moving, minimize text input. And so on. At the moment, the browser doesn’t have access to all of these sensors but I can’t imagine that that’s that far away.

Slide5In addition, the way that people use devices in a mobile context is vastly different than a desktop development. It’s more than just the screen size that matters here. People who are using mobile are on the go and need immediate information. As part of that, I showed the United Airlines mobile site, Facebook, Twitter and the like.

Slide6When people are sitting at their desk, they are in a controlled, stable and (a lot of the time) comfortable environment. They are able to do sustained browsing and research.

When people are on the go, they need quick, "glance-able” information that will give them the information that they need at the moment. For example, that could be directions to the venue that they are headed to or a phone number or any number of discrete bits of information that they need while on the go.

Slide7Then I moved on to talking about designing for the finger verses the stylus/mouse/keyboard. First of all, the finger is not as accurate as a stylus or mouse. If I turn my finger on it’s side and am very careful, my finger is still at least 40 pixels across and most of the time it’s closer to 80 pixels. And then there’s all of the sites that are so dependent on the mouse and/or keyboard.

As an example, I pulled up http://thekillersmusic.com/html5 in IE9 and showed how fantastic of a site it is and then showed the same site rendering on Mango but talked about the fact that it’s too reliant on the mouseovers and the like to be useful in a mobile context. Same thing with Pacman in IE9 verses on a mobile device. While it renders and plays, it requires a keyboard for navigation.

Slide8

Mobile sites need to be clean and crisp without a lot mixed fonts, colours and the like. Don’t overuse graphics, gradients and  heavy background images as they can all effect download speed and/or view-ability in direct sunlight. Make sure that you’ve thought about the readability and the usage of whitespace. Obviously you don’t want to go nuts with the white space because you’ve got so little real estate to start with but a little bit of white space can make all the difference.

Slide9

Work as hard for your user as you can. In other words, minimize the user’s input by providing intelligent defaults and picking up as much from the sensors as you can to make as many decisions as possible. Make sure that you store user’s previous inputs and where possible, use them to help streamline future engagement.s

Slide10Lastly, think carefully about your mobile strategy. It can range from doing nothing to going hog wild with a mobile specific design.

One of the key things here is that you make a deliberate choice with regards to your mobile strategy because almost guaranteed you’ll have users browsing your site from their mobile devices.

  • Do nothing
    • No special content adaptation, result is the desktop site being delivered to the device. Sometimes, this is the right choice. It’s definitely the default choice and the easy one to go with.
  • Basic Mobile Adaptation
    • Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile. This one is slightly more difficult to pull off as you have to make sure that your content works on both desktop and mobile.
  • Multi-Serving Content
    • Same page is sent to mobile and desktop, styled differently for each. This is not as hard as you’d think. You can accomplish this through the use of the @media tags to reformat the layout dependent on screen width and the like.
  • Mobile Specific Design
    • Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary. This is a high end strategy that requires a lot more work as you’re effectively building two different sites. On the other hand, it makes the mobile experience fantastic but doesn’t require you to compromise on the desktop experience.

Slide12

The quick couple of take aways are that mobile web has evolved tremendously over the past handful of years. As a result you should really think about your mobile strategy and consider your mobile user’s context as part of that strategy.

Oh – and in my last moments I threw up http://ie6countdown.com to hopefully push out the last bits of IE6 around. :)

This was a fun talk to give and I hope to expand on this talk and do a much richer version in the near future.

Getting Started with HTML5

imageI’ve been spending more and more time in front end web development with HTML5 recently (yes, you can expect a redesign of my blog here soon) an ,d thought I’d demystify some of the bits that I keep hearing out there.

First of all, HTML5 is not all brand new and completely different and going to revolutionize the world. It is an conglomeration of standards and an evolution of various parts of those standards. The reality is that it’s added 30ish new tags, some of which you’ll care about, some of which you won’t. Some of these tags are very powerful and some of very narrow in focus. For example, <canvas> is a very powerful tag that brings a drawing surface that’s going to allow some amazing interaction while <ruby> is a way to denote pronunciation guides for obscure characters in logographic alphabets such as Chinese and Japanese. While absolutely needed for the localization in those communities, it’s fairly limited in use.

But you’ll find that type of thing throughout the new tags – there’s a huge emphasis on localization and accessibility. For example, the new <nav>, <header>, <article>, <figcaption>, <aside> and more have nothing to do with the flashy animations and transitions that we are used to hearing about with regards to HTML5. Rather they are focused on accessibility and giving machines, including search engines, more intelligence about your site and content. This is a great help to screen readers such as JAWS but also is a step towards semantic web.

You can start using these features today with absolutely no worries because down level browsers will just simply ignore them. Now, if you site is heavily dependent on the most hyped tags, <canvas>, <audio> and <video>, you’ll have to figure out what your contingency is for non-HTML5 capable browsers. That could be using Silverlight or Flash or a completely different representation of the information in old school HTML4.

A very simple format for blog page (yes, I’m stealing this from the redesign that I’m doing on my site as we speak) is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="yourcss.css" />
        <title>Getting Started with HTML5 - Josh Holmes</title>
    </head>
    <body>
<header>
     <h1>Josh Holmes</h1>
</header>
<nav>
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/aboutme">About Josh</a></li>
      <li><a href="http://twitter.com/joshholmes">twitter</a></li>
   </ul>
</nav>
<section>
<article>
   <hgroup>
      <h2>Getting Started with HTML5</h2>
   </hgroup>                     
   <p>Main content</p>
   <p class="image"><img src="html5logo.jpg" alt="HTML5 Logo" /></p>
</article>
<article>
   <hgroup>
      <h2>Some other post</h2>
   </hgroup>                     
   <p>Main content</p>
</article>
</section>
<footer>
   Licenced under Creative Commons <br /> Updated: <time datetime="2011-01-06">June 1st, 2011</time>
</footer>
    </body>
</html>

There’s a bunch of little things to notice here.

  • Notice that it looks extremely similar to an HTML4 web site.
  • Notice the short and simple doctype declaration – <!DOCTYPE html>.
  • Notice the beautiful separation of the various sections into very human and machine readable content.
  • Notice the <time> element that gives meaning and structure to the date.

In a nutshell, don’t be scared of HTML5. It’s an evolution of existing standards. You can use the structure that I listed above with little to no worries without having to figure out all the new stuff with <canvas>, <video>, brushes and the like or going nuts with JavaScript.

I’ll be blogging along about the JavaScript integration and the CSS improvements but I wanted to start with the very basics and point out some of the bits that really help with accessibility.

Startup Lessons Learned Viewing Party

The NDRC here in Dublin, Ireland is hosting a live viewing party of the Startup Lessons Learned Conference being held in silicon valley.

Startup Lessons Learned is the first event designed to unite those interested in what it takes to succeed in building a lean startup. The goal for this event is to give practitioners and students of the lean startup methodology the opportunity to hear insights from leaders in embracing and deploying the core principles of the lean startup methodology. The day-long event will feature a mix of panels and talks focused on the key challenges and issues that technical and market-facing people at startups need to understand in order to succeed in building successful lean startups.

There’s going to be a ton of great content and speakers at the conference ranging from big established companies such as IGN to companies such as Groupon to smaller startups such as SideReel. They will talk about how to build a successful start up.

I wish that I could be there in person but since that’s happening many thousands of miles away, I’m thrilled that I’ll be able to connect with the local startups at the NDRC.

 

Read more at http://www.sllconf.com/.

Register for the NDRC live viewing at http://bit.ly/ndrclessons.

Dublin reMIX 2011

One of the things that really fun about my job here in Microsoft Ireland is that the team I’m on has one primary remit – to inspire the  developers or designer of Ireland. In June, we’re going to pull together a full day of the most exciting content from MIX11 as well as some cool stuff that we’re throwing in ourselves all for free.

Our goal with this content is to drive you, as someone involved in software in Ireland whether you’re a developer or designer,  as a to go bigger and faster with your applications. To help you think about development, whether that’s traditional web development, phone development or even really breaking down the walls to a natural user interface with Surface 2 and Kinect.

reMIX Dublin is on June 9th, 2011 at the RDS in Ballsbridge, D4.

It’s broken up into two separate events actually.

reMIX: Developer (9.00-13.00)

9.00-10.00

Welcome, followed by

Developing for Windows Phone 7 – From Concept to Marketplace

10.00-10.50

Developing for the Cloud

10.50-11.10

Break

11.00-12.00

Windows Phone 7.5 aka Mango

12.00-12.50

Kinect Hackables

12.50-13.00

Wrap up

reMIX: UX (14.30-18.30)

14.30-15.30

Welcome

Taking UX Further with Surface

15.30-16.20

Designing Infographics for Web Applications

16.20-16.40

Break

16.40-17.30

HTML5 Awesome Sauce

17.30-18.20

UX Lighting Talks

18.20-18.30

Wrap up

Now, this is a loose schedule at the moment and subject to a few possible changes. For example, I might have a really big name speaker coming in from Redmond that we’ll leverage in here at least, if not twice.

If you’re interested – you should register early at http://bit.ly/remix11

Camera Phone

I love having a camera on my phone. I’ve had the privilege of playing more golf this week than I did all of last year and on better courses than I’ve ever played in my life. I didn’t plan to play such nice courses and definitely didn’t foresee needing to take nearly as many pictures as I did take. The awesome part is that I have a camera on my phone, which on Windows Phone 7 I don’t even have to unlock to use.

The first course I played was the Tralee Golf Club which is an Arnold Palmer course that’s rated as one of the top 10 ocean golf courses in the world. I played this course with my team mate Michael Meagher here at Microsoft Ireland and our hosts at the Institute of Technology in Tralee. It was hands down my favorite course I’ve ever played. The picture here is on the tee box on 17. All I can really say is wow… You can see more photos at Tralee Golf Course on Flickr

The next day I got to play the Seapoint Golf Course just north of Dublin. I played this course with my fellow evangelists Dave Northey and Jeff Blankenburg. Jeff’s visiting from the states speaking about WP7 and is a big golfer. I couldn’t resist taking him out. We caught some fantastic photos such as the rainbow photo in this post.

You can see more photos at Seapoint Golf Course on Flickr

Now, all that said – I’m going to have to take my proper digital SLR Canon Rebel next time I go golfing… :)

Activating BizSpark Azure Accounts

A question that I’ve been asked a number of times recently is how to activate an MSDN Azure account and more specifically, how to do it with a BizSpark account. To make it easy, I thought I’d blog that here.

For an up to date list of benefits you should visit http://www.microsoft.com/windowsazure/msdn-benefits/ but currently it’s as follows:

Subscription Level BizSpark/Visual Studio Ultimate
with MSDN
Visual Studio Premium
with MSDN
Visual Studio Professional
with MSDN
Compute 1,500 hours of the Small Instance 1,500 hours of the Extra Small Instance 750 hours of the Extra Small Instance
Storage 30 GB 25 GB 20 GB
Storage Transactions 2,000,000 1,000,000 250,000
SQL Azure 5 GB 1 GB 1 GB
Access Control Transactions 500K 200K 100K
Service Bus Connections 5 5 2
Data transfers 35GB (WW) Out
35GB (WW) In
30GB (WW) Out
30GB (WW) In
25GB (WW) Out
25GB (WW) In
Annual Savings** $3100 $1300 $800

 

Signing up for BizSpark

2011-04-27_1021

Starting up, if you are a start-up (defined as less than 3 years old, less than $1 million in revenue, privately held and producing technology as your primary monetization) you should be on BizSpark. BizSpark gives you access to all of the Microsoft technologies that you’d need to develop your applications such as Windows, Azure, Visual Studio, Office (in case you need to integrate with it) and more. Just go to http://www.bizspark.com and click Apply Now.

2011-04-27_1022

If you have an existing LiveID, you can use that but the reality is that I recommend that you create a specific LiveID for the start-up because what happens if the person who originally signed up leaves the company? Or is out on a day when something needs to be done on the account? For that reason, I recommend creating a specific account for your BizSpark management.

2011-04-27_1023

I recommend, partly because of the number of lawyers in my family, that you read the terms and conditions but at the end, if you agree, there are two individual agreements that you need to agree to before you click next.

One of those is the BizSpark Startup Agreement and the other is the EULA.

Once you fill out the rest of the wizard, it goes into a process on our end. If you are in Ireland, that registration goes through a two phase approval process. The first phase is with a Network Partner and the second phase is currently me. :-)

2011-04-27_1038

Once you are signed up, you can log into My BizSpark and click on the Get your Free Software link which will show you a link to MSDN. Reality is that it’s just pointing to MSDN and you can go there directly if you like.

You’ll just need to sign in there with a LiveID that’s associated with a BizSpark member.

Adding new developers to a BizSpark Account

2011-04-27_1041Quick side note is that I’ve also been asked a number of times how to add additional developers to a BizSpark startup. Find the Manage section of the left hand navigation and find the Members link underneath that. Then you put in the new developer’s name and email address. That does not have to be their LiveID – it can be any email address. There will be an acceptance link in the email that will require the person to sign in with their own LiveID to access the bits and all.

Activating Your Azure Benefits from MSDN

2011-04-27_1045Once you sign into MSDN and go to the “My Account” section, you should see the “Windows Azure Platform” link. This link will take you to the Windows Azure signup process and walk you through a longish wizard. At the end of that, you will be able leverage all of the benefits of MSDN on Azure.

One thing to warn you about at this point is that the Windows Azure signup does require a credit card to cover any overages. I recommend that you closely monitor your usage to make sure that you don’t go over. :)

2011-04-27_1052Now, once you’re signed up for the Azure benefits, you can simply go to http://windows.azure.com to manage your account and deploy applications. The one portal serves as your management portal for your services, data, SQL Azure and any other services you’re signed up for such as Connect.

Have fun playing with Azure!

Join the MIX Conversation in Ireland!

clip_image001

Unplug from your day job. Be inspired at MIX.

Join the conversation at MIX – see the latest tools and technologies and draw inspiration from a professional community of your peers and experts.

MIX is a gathering of developers, designers, UX experts and business professionals creating the most innovative and profitable consumer sites on the web. The conference takes place in Las Vegas, but will be streamed live online http://live.visitmix.com. Join developer peers in Ireland on the hashtag #MIX11IE.

There’ll be great prizes on offer for both in-person & virtual attendees. Local evangelist www.twitter.com/joshholmes will be tweeting questions every 30 mins during the keynote (5pm-7pm) and answers should be emailed to endaf@microsoft.com. If you get all four answers right you are in the draw to win one of the following (we’ve cleared out our storeroom and here’s what we found J):

· Xbox Kinect bundle

· Arc Touch Mouse (x2)

· Xbox Live Gold Memberships 12 months (x3)

· Microsoft Web t-shirts (loads)

Questions to www.twitter.com/endaflynn

clip_image002

*competition open to residents of ROI and NI only

*entry to competition only possible before 7.30pm 12th April 2011

Windows Azure Toolkit for Windows Phone 7

WinPhoneAzureThe Windows Azure Toolkit for Windows Phone 7 is a starter kit that was recently released out to CodePlex. Wade Wegner, one of my former team mates when both of us were in Central Region, is the master mind behind this fantastic starter. 

This starter kit is designed to make it easier for you to build mobile applications that leverage cloud services running in Windows Azure.

Screencast

In the screencast, you’ll get a great little walkthrough of the starter kit and how to get your first Windows Phone 7 application with a Windows Azure backend up and running. The toolkit includes a bunch of stuff including Visual Studio project templates that will create the Windows Phone 7 and Windows Azure projects, class libraries optimized for use on the phone, sample applications and documentation.

Why Windows Azure

Windows Azure is Microsoft’s Platform as a Service (PaaS) offering that allows you to build and scale your application in the cloud so that you don’t have to build out your local infrastructure. If you are selling an application in the Windows Phone 7 Marketplace and really don’t know how many customers you’ll end up with, you might need to scale the backend dramatically to meet the demand. 

 

What you’ll need

Hopefully obviously you’ll need an Azure account and the tools to build and deploy the solution. The tools include one of the versions of Visual Studio (either Express which is free or higher), the Windows Azure Toolkit and then obviously the starter kit itself. I also recommend looking at Expression Blend for doing your Windows Phone 7 design and the like.

Good Luck!

By looking through the resources on the Windows Azure Toolkit for Windows Phone 7 site, you’ll see lots of great little tutorials and getting started guides.

Let me know how you’re getting on with the toolkit and what you’ve done with it. I’d like to see and possibly blog about it all…

Site Pinning in IE9

IE9Internet Explorer 9 (IE9) launched last week at SxSW! I was bummed that I wasn’t there but I was one of the 2.3 Million downloads in the first day. There’s a bunch of new stuff in IE9. There’s a load of examples out on http://www.beautyoftheweb.com that show off all of the new HTML5 support to javascript performance to a ton more.

A simple one, however is site pinning. This allows you to pin a website as if it were an application on the Windows 7 taskbar. This blending and merging of the web and desktop is awesome.

Now, you can pin any website to the taskbar and get generic results but you as a website author have control to actually do something cool and customize what that pinning does. You can customize the way your site is added to the taskbar as well as add your own jump list items.

MSApplication Meta Tags

The first place to get started is customize the application name, tooltip and frame with a few meta tags:

<meta name="application-name" content="Josh Holmes" />
<meta name="msapplication-tooltip" content="Random Thoughts" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#ff7900" />
<meta name="msapplication-starturl" content="http://www.joshholmes.com/blog/" />

That’s simple. The next step is to add in a custom task that will let people dive deeper into the site with the right click:

<meta name="msapplication-task" 
content="name=View Articles;action-uri=./articles/;icon-uri=./favicon.ico" /> <meta name="msapplication-task"
content="name=About Josh;action-uri=./aboutme/;icon-uri=./favicon.ico" />

By default, IE9 looks for your 32×32 sized version of your favicon but if it can’t find one, it it uses your 16×16 one in a 32×32 box so you should use a high-res favicon if possible…

JavaScript

If your site is pinned, you can, if you want, do more that just sit there on the taskbar. You can interact with the jumplist and more.

Checking For Pinned Mode

First thing to know is if your site is actually pinned or not:

if (window.external.msIsSiteMode()) {
 // in pinned mode
} else {
 // not in pinned mode
}

 

Activating the Taskbar Icon

Let’s say that you need your user to interact with the application to keep session alive, or need them to complete a form or for some reason you need their attention back on the site, simple activate the taskbar icon by making it glow (Win7 Users are used to this UI paradigm):

window.external.msSiteModeActivate();

If making it glow is not enough but you have actual info for the user, such as if you are running a bulletin board service and want to let the user know that 3 new messages have arrived for them or something else random like that:

// clear current overlays
window.external.msSiteModeClearIconOverlay();
// set new one
window.external.msSiteModeSetIconOverlay("./newmessage3.ico", "3 new messages match your search");

Customizing the JumpList

And if you really want to customize the jumplist like with the last few articles that your user looked at, or the last few searches that they did or something more than the static setting of tasks that we did above:

// clear current jump list
window.external.msSiteModeClearJumplist();
// name the jump list
window.external.msSiteModeCreateJumplist("Adding JumpLists");
// add tasks to list – notice that these can have custom icons as well
window.external.msSiteModeAddJumpListItem("Item 1", "page1.html", "./favicon.ico");
window.external.msSiteModeAddJumpListItem("Item 1", "page2.html", "./favicon.ico");
// display list
window.external.msSiteModeShowJumplist();

JQuery Way

Of course, if all that’s too complicated or two much typing, you can just use the JQuery plugin – http://ie9ify.codeplex.com/. :D

Conclusion

Hopefully this has been a short and sweet glance at some of the new site pinning features and the like.