A beautiful spring morning and a quirky venue by the Thames played host to State of the Browser 2013 – or #SOTB3 as it was to be known online. The 1 day conference, by London Web Standards, took over the majority of Ravensbourne College on Saturday 20th April for a mix of talks, breakout sessions and networking.

Welcome & Keynote

The day kicked off with a welcome from the organisers, followed by a keynote from Molly Holzschlag of WC3 delivered via video on 3 giant screens. Molly highlighted that “A monoculture does not allow for discourse – which is bad for the open web” yet was optimistic with “Regardless of the engine wars, the future and direction we’re headed in is powerful” in reference to the ongoing debate over WebKit.

Morning Speaker Sessions

Following the video keynote; Alp Toker of WebKit delivered a counter argument (of sorts) titled “Monoculture Isn’t Breaking the Web: You Are” which suggested that WebKit – due to its very nature and organisational structure – is a multiculture rather than a monoculture or monopoly. The term monopoly has been used widely around WebKit of late, in some ways driven by its 47.6% market share in desktop browsers (Q1 2013), however, “WebKit is diverse, it can be plugged into other applications (browsers, rich app containers etc) which is exciting, ” explained Toker, of the project’s “collaborative” ecosystem. He also highlighted the positives of market dominance in facilitating innovation adoption: “Internet Explorer innovated and the web developed in a whole new way. It birthed AJAX and CSS”.

Martin Beeby of Microsoft took the stage next, to look at the exciting direction touch is taking the web. Martin explored what’s new and different in Windows 8 and IE 10; from responsive design to device orientation and the elements that created the most chatter; multi touch and multiple inputs.

He asked “Inputs are getting diverse: Mouse, keyboard, motion, touch, audio and video. What can you imagine doing with these?” Another interesting area was the idea of “the web in the living room” and the evolution of the humble family television. Not to mention the inevitable evolution of “social touch” where multiple users interact with a single screen at once.

This is when things got a even more interesting, as he explored the idea of UX around touch. “Tap “A”, tap “N” and your phone will increase the hit target around “D” on the assumption you’re writing “And” – Martin revealed, before adding, “Touch is a human connection. Make it feel magical, human and responsive. People have way better sensors than computers.”

Paul Kinlan of Chrome, delivered a talk on the State of the Mobile Web and there seemed to be a widely held consensus that this is a hugely exciting. Stats such as “10% of the world already access Facebook on a mobile device” not to mention the shift in accessible technology responding to the needs and budgets of emerging markets (in terms of device cost, and also data bandwidth) the split between mobile and desktop browser use could hit “50% within the next year or so”. Paul highlighted the growing set of features that are allowing mobile browser to deliver better experiences.

This theme continued in Andreas Bovens’ talk on bringing “the world wide web to the whole wide world.” Andreas, highlighted that “The browser landscape is still significantly changing,” explaining how there are increasing needs for browser modes for emerging markets (but also western bad connections or data roaming) that intelligently crunches content and delivers speedy but positive visual experiences.

Despite suffering through a few tech difficulties (it wouldn’t be a conference without them) Christian Heilmann of Mozilla, explored the idea of making your HTML5 efforts worthwhile and examined why we still haven’t made full use of this area. Christian suggested that “we didn’t manage to bring the desktop web onto mobile successfully (so far) because we didn’t get what we expected from HTML5 – which he likened to the packaging of Sea Monkeys, in terms of results being disappointing vs the exciting initial promise. That said, he was quick to state that “It isn’t the browsers making us produce rubbish experiences. They’re all excellent. They show HTML the same way,” instead it may by our own focus on building for the latest hot device and forgetting everything else, i.e. the devices that the majority of people will actually be using. Christian also spent time looking at emerging markets and ways providers are finally responding to huge barriers to entry such as credit card requirements (even for free apps) that have hampered smartphone adoption. The good news is that “by brushing up on your HTML5 solutions you can reach millions of new users forgotten or limited by native hardware but eager to be online,” explained Christian.

Lunchtime & Modern.IE

Lunchtime saw a good deal of networking and catching up, both inside the spacious foyer of Ravensbourne and outside in the sunshine beside the Millenium Dome.

When sitting down at the various tables, attendees discovered racks of Internet Explorer branded test-tubes which contained information on http://modern.ie which makes testing for browser compatibility fast and simple. They also contained info on getting 3 months free browser stack subscription which lets you instantly view your site across browsers, across platforms. Because testing doesn’t have to be testing, geddit!?.

Two of the test-tubes also contained a winning slip of paper and by the end of lunch; two attendees were the lucky winners of an ASUS VivoBook with touchscreen each.

Afternoon Sessions

After lunch the attendees were able to dodge, duck, dip and dive into a variety of more intimate “Breakout Sessions”. These featured a great selection of speakers such as Jake Archibald and Peter Gasston covering everything from typography and design to the architectural aspects of HTML5 and getting started with Web Components.

Once the breakout sessions were over, it was back to the main room for Battle of the Browsers with Seb Lee-Delisle, followed by a panel discussion. Last year Seb pitted the browsers against each other by making millions of particles, in an impressive feat of live-coding. This year saw Seb live coded (cue much hilarity and audience participation) a Space Invaders style game with the ship and aliens replaced by browser logos as he (without prior warning) invited all of the browser evangelists up on stage to battle for their browser’s honour.  Whoever obliterated the other browser logos in the fastest time was the winner. It’s was a close, tightly fought battle but Martin Beeby took the glory for Internet Explorer with the fastest time.

Panel Discussion

A panel discussion rounded off the day as the audience threw out questions to the panel of 6 experts, including Chris Heilmann, Jake Archibald and Martin Beeby. The panel shared their thoughts and experiences on where the browser has come from and what’s next in browser and web development. “No one can be an expert in all of the browser technologies anymore,” said Jake Archibald. Whilst the use of libraries vs raw coding was discussed: “Things like jQuery have increased the number of people in web dev these days – which is a good thing,” said Martin Beeby, however, all agreed with the perspective of Chris Heilmann that “people need to understand that using jQuery is not knowing JavaScript.” They covered a lot of interesting areas, including; “Native app developers can build something for the few. Web developers can build something for the many which everyone can access,” so why not watch a full video of the panel discussion here.

Until Next Time…

Once a successful and fascinating day was wrapped up, attendees headed to post-conference drinks as a nearby pub, perfect for a sunny April evening. If you’d like to try your luck at the Battle of the Browsers game that Seb made, you can here. If you’d like to find out more about testing your site’s browser compatibility visit: http://modern.ie

 Photo credit: Steve Workman

The IE team has partnered with The Webby Awards to unveil the new Winners Gallery + Archive using the best of IE10 capabilities and the latest web standards. Every year, The Webbys honours outstanding achievement online including beautiful site experiences and sets the standard for the best of the web. Now with partnership from IE, they can showcase the last 16 years of Winners in their new online gallery built perfectly for touch. Through bringing this site to life, IE and The Webbys have made a one-stop experience to show how the web has evolved over the years and the breadth of possibilities that now exist to make beautiful, responsive, and immersive experiences.

Visitors can experience and interact with all past Webby Award and People’s Voice Winners, Nominees and Honorees for each category in an easy and fluid design that brings the content to the forefront of the user experience. The site allows you to share past Winners with friends via social channels, or easily find your favourite Winner using type-to-search functionality.

With IE10 on a Windows 8 touch device the gallery really shines, using easy gestures to navigate the previous Winners, fluid page scrolling, responsive design and type-to-search functionality. The IE team also used the latest web standards to build this site, referencing modern.IE to test the site’s compatibility cross-browser.

If you’re interested in learning more about the work that went into bringing The Webby Awards Winners Gallery + Archive to the web, take a look at the technical tear-down that includes the making-of video.

>> Head over to modern.IE for help with testing sites in older browsers, plus 3 months of BrowserStack for free. Result.

If you’re into comics you’ll love the online debut of Thief of Thieves: Experience, an interactive online game based on the comic book series from Robert Kirkman (amongst other things, Robert and his team created the comic and series the Walking Dead).

With the Thief of Thieves: Experience, fans can create their own secret thief identity, practice their skills in larceny, and ultimately participate in one last job — the big heist.

“I’m really pleased with how well the web experience captures the environment we were trying to build for Thief of Thieves.  It’s a great way for fans of the Thief of Thieves comic books to immerse themselves in Redmond’s world and really interact with the story,” said Robert Kirkman.

Under the hood, the Thief of Thieves experience, built in partnership with Skybound and creative agency Bradley and Montgomery, is firmly built on web standards.  This includes the new Pointer Eventsspecification recently accepted and published by the W3C.  This specification enables a unified way for devs to accept input from users (such as touch or mouse) while allowing the user to leverage other means of input in the future, without the site owners having to rebuild their experience.  IE10 supports this specification and it makes for a fun touch-first means of experiencing the Thief of Thieves story via the web.

The Thief of Thieves web site also makes heavy use of scalable vector graphics (SVG), which provides rich graphics regardless of a user’s zoom level or screen size.  Animating these rich graphics enhances the story telling but in the past has caused issues with performance, which could impact a user’s overall experience.  To optimize for this heavy load, the Thief of Thieves site uses new performance and animation standards like requestAnimationFrameto ensure that paint requests are being synchronized with the refresh rate of the hardware, ensuring the performance remains fast.

;

In addition, the IE team used:

· CCS3 animationsfor some of the larger scene transitions on the site;

· MSGestureAPI for handling more advanced pointer interactions like the safe cracking exercise;

· pageVisibilityAPI to detect when an open page isn’t being actively used so we can control audio appropriately; and

· setImmediateAPI to improve performance and power consumption on tablet devices. setImmediate like setInterval and setTimeout is a timing API and requests the CPU to process the instruction as soon as it’s possible to.

You can read more about the technology behind the scenes including code snippet and an example of the game mechanics used like the A* pathing algorithm in JavaScript here.

While you’re at it, why not download IE10 to check it out, and let us know what you think. Happy heisting!

“This has to be the best game I have purchased. It is so beautiful in its simplicity it is a work of art. The voice is captivatingly funny. The music is hauntingly magic.” 5 star average customer review

You may have heard of Contre Jour – it won iPad Game of The Year in 10 countries in 2011 and was Best Mobile Game of E3. Back in October last year the IE team build a groundbreaking HTML5 multi-touch site for Contre Jour.

Given the resounding success of the game worldwide, game creator Maksym Hryniv (Max) and the team at Pixel Lab decided to work with the IE team again to create two new “worlds”, titled “Moonlight” and “New Friend,” bringing a total 20 additional game levels free on the web. The New Friend world is exclusive to the Web and features a new character – Amie – who joins the protagonist, Petit on his journey to save his love, the Rose.

“Bringing my game to the web really helped me reach new fans all around the world,” said Max. “The first version was so successful that I wanted to create something truly unique for the web version. I decided to create a totally new chapter with visuals, gameplay and a new character. I think fans from my home country of Ukraine all the way to China and the U.S. will be pleasantly surprised by the look and feel of the new levels.”

The new Moonlight Worldlooks more similar to the other Contre Jour worlds, and showcases the power of IE10 as a touch browser. Contre Jour was truly designed to be a touch-first game—in fact, it was the first game brought to the web that actually required multi-touch on certain levels.

Check out the twenty new levels of gameplay for yourself at www.contrejour.ie and use the Valentine Card to share the Valentine’s love with your friends and loved ones.

Check out the Exploring IE blog for more details.

Whatever platform you work on, testing legacy versions of IE can be a bit of a challenge. Today, the IE team is launching modern.IE, featuring a wizard (nope, not one with a wand) that scans for common coding practices that might prevent users from having their best experience on a site. Start by entering a webpage URL that you want to test:

In a few seconds, modern.IE reports the webpage results in three categories, and includes recommendations on how to update the site.

Free Virtual Testing Service with BrowserStack

But that’s not all. The IE team has also sorted a partnership with BrowserStack. You might have already used it, but for newbies BrowserStack lets developers test their site on any browser available on Windows – regardless of what test machine is running on any OS. For all devs that sign up via modern.IE, the IE team is offering three months of this service for free over the next year. Now that’s not to be sniffed at. They’ve also created add-ins if you’re using Chrome or Firefox, so you get single click access to the BrowserStack virtual testing service right from your browser of choice.

Additionally, the IE team is making available free virtual images for you to download and run local versions of Internet Explorer with Windows for testing – even on Mac, Linux, or PC. You can download these on modern.IE.

Check it out and tell us what you think. Plus here’s a video (featuring Rachel Andrew, no less) for more context.

IE continues to get great reviews from developers and consumers, currently providing the best web browsing experience on Windows. Not only does it power the browsing experience across Windows Phone but following a recent dashboard update it is now available on your TV through Xbox.

As a web developer you are then able to identify someone browsing your site on their Xbox – you can detect ‘Xbox’ in the user agent string – then use media queries to then customise the presentation of your content for someone viewing on their TV taking into consideration that they may be interacting with your site using gestures, a game controller, voice or Xbox SmartGlass.

How should I customise my website for Xbox Internet Explorer?

So now that you can identify and customise an experience for the Xbox it raises the question, how should you treat that experience? Well, the folks on the IE team have put together a document for you that surfaces some of the differences between this version of IE and the PC version. It also discusses how you should think about customising the experience for the TV screen, considerations for the various methods of interaction available to Xbox users as well as technical considerations and guidance on debugging and testing.

Am I going to use voice commands and my Xbox controller to do my online banking? Probably not. However, I would likely use entertainment and information sites. I can see myself browsing online image libraries with family and friends. I can definitely see myself browsing the Halo 4 forums.

Take a 15 Minute Lesson

It is up to you to decide how much effort you should put into optimising your site for Xbox IE but to make the decision easier and better informed, head over to Microsoft dot com and read the Internet Explorer for Xbox Developer’s Guide.

The IE team has had a bit of fun with this video – hope you enjoy it too…

When we started developing our small CMS product Perch, one feature was very important to us. We were keen to ensure that Perch would never add anything to a user’s mark-up that they didn’t ask it to. One of the issues with many content management systems and other systems that output front-end code is that they dictate the mark-up to a greater or lesser extent. As front-end developers ourselves we wanted web designers and developers to have full control of their templates, mark-up and the look and feel of sites running Perch.

Whether you are developing a complete CMS or just needing to give editors the ability to manage parts of an application, taking a bit of care over separating the back and front-end code will pay dividends. As a back-end developer you will avoid needing to worry about mark-up, and the website will be far easier to redesign in the future without the need to change serverside code. This post explains some of the key things to consider, based on our experience developing Perch, if you want to ensure your back and front-end remain separate.

Never directly output mark-up from a serverside script

With one exception that I will cover later, we do not output any mark-up from Perch PHP code. All of the mark-up used on the front-end of the website comes from the templates that are under the designer’s control. This is the key factor in ensuring that your system keeps out of the front-end code. If there is HTML mixed up in the PHP or other serverside code then you have a problem.

Use a templating system that makes sense to your users

Many Perch customers are web designers and front-end developers. They are not necessarily familiar with PHP or other serverside languages. Understanding this issue was important when deciding how Perch templating should work. Creating templates had to be simple. We decided to use a syntax that would look familiar to anyone who understood HTML.

This is an example of a Perch template. This one is for an article on a website. I have highlighted the Perch tags within the regular HTML. The designer can use any HTML around these tags – the only bit that Perch cares about is the Perch tags which are used to create the editable form in admin for the content editor.

<article>
	<h2><perch:content id="heading" type="text" label="Heading" required="true" title="true" /></h2>
	<p><perch:content id="date" type="date" label="Date" format="%d %B %Y" required="true" /></p>

	<perch:content id="body" type="textarea" label="Body" textile="true" editor="markitup" required="true" />
</article>

This then displays in the admin to be completed by a content editor.

Move away from reliance on WYSIWYG Editors

If the way that content editors input content into a site is through a large textarea, then typically HTML needs to inserted via some kind of WYSIWYG editor. For designers who want to maintain control over the look and feel of a site, this can be disastrous. If content editors have to make decisions about the HTML to use they are liable to think visually rather than semantically, or require a lot of training to select the right elements in order that CSS will style the pages correctly. The Perch templating system moves away from a reliance on these big textareas, instead encouraging designers to use structured content, retaining control of the mark-up. Content editors then only need to enter the bare minimum of mark-up – for example links, making text strong or emphasised and perhaps images.

When you need to insert HTML, limit yourself to a single element

One place where we need to actually insert an HTML element, is when we are displaying forms. We need to generate the elements in order to have control over their validation. Some systems manage forms by inserting a lot of HTML – the label, text, even wrapping elements. The designer can sometimes find themselves jumping through hoops to get the layout or accessibility support that they require.

We ensure people have control over each individual element. When creating a form different tags allow the label, form field itself and any help text and label to be inserted independently.

<perch:label for=”email”>Email address:</perch:label> <perch:input id=”email” type=”email” required=”true” label=”Email address” />

Where we do output a group of fields – a set of radio buttons for example, we allow the designer to wrap these in an element of their choosing.

Avoid assuming a flavour of mark-up

In Perch we allow people to set whether the system uses xml style closing elements (for XHTML or HTML5 written as xml) or not. We also have a constant for people to choose whether they want to use HTML5 form elements or not.

This then allows us to use an email field type for example if a user wants to use HTML5 form elements, and a regular text input if not.

Allow attributes to be passed through from your templating tags

Perch tags have attributes in the same way as HTML tags. When a user adds a form element using a Perch tag they can add any attributes they like. Some of those are used by Perch to enable serverside validation for example. However others are just passed directly through when the form field is created. This means we don’t need to worry about supporting all the different attributes people might want to use. If they are of no interest to us we just pass the through directly.

These techniques have enabled us to create a system that gives the control back to the designer or developer implementing the site and ensures that the use of a CMS remains transparent to anyone viewing the website. There are additional benefits of ensuring that you stay out of the HTML. Perch can be used to manage xml documents or json files, in fact any text file format that you want. This wouldn’t be possible if we routinely inserted mark-up into the site so is a nice additional benefit to separating the two.

You’ve heard of Windows 8 Live Tiles, right? Well you can also create a hi-res tile icon for your website – and the good news is it’s pretty easy to do. There’s even a wizard (yeah, like Merlin) at http://buildmypinnedsite.com/windows8 to take you through the steps. And it’ll take you about 5 minutes. Upload your logo, select a tile colour and generate three lines of code. That’s it – simples.

1995.

The year that Braveheart was released.

The year that OJ Simpson was found not guilty.

When Command & Conquer, Warcraft II and Playstation in general pushed the average age of male virgins up by at least 5 years.

If you didn’t see us at Future of Web Apps or Web Dev Conf, then you wouldn’t have seen the Ubelly cards, stickers, USBs or other associated paraphernalia we have at the moment. We’re kind of going through a vintage internet throwback period, which we’re calling ‘Not Since 95′. This is for two reasons: One, 1995 was also the year that Windows 95 was released. Windows 95 was a real game changer when it was released. We’re thinking Windows 8, which was released just last week, will be the next one for Microsoft.

Two, it was the beginning of my foray into the world of the interwebs…

In 1995 I owned a Gateway 2000 486 with Windows 3.1*. It was the bomb. I filled my days with Commander Keen, Wolf 3D and Doom. My dad taught me my first bit of coding with PASCAL, and I spent far too much time trying to get past the under 18s test on Leisure Suit Larry in the Land of the Lounge Lizards. As a pre-teen, my life was pretty damn good.

At the end of 1995, my dad bought the family a Pentium 150 with Windows 95 on it. It had a CD-Rom drive, which was the FUTURE, and more importantly, it had a 28.8k modem attached to it, and a downloaded version of Internet Explorer.

This was where life changed.

Over the next five years I was like a fat kid who got locked in the world’s largest sweet store overnight. Learning the meaning of A/S/L. Taking three hours to download a single Nirvana song. Learning what would happen if you put a frog in a blender. Downloading every possible sound clip from The Simpsons and changing all of your system noises. Memes. Oh god, memes. Hamster Dance, Dancing Baby, All Your Base, Ate my Balls…

The world was mine.Perhaps the most important thing that happened to me just after 1995 was that I found Geocities. In 1997 a classmate came to school one day and told me he had a website. How did this happen? How was he allowed to have a website, and not me!? The outrage. I did what any good friend who has the highest levels of respect and platonic love for friends does… I downloaded his website, changed a few things and published it back to the internet as my own.

However, the important thing here is that through tinkering with his god awful markup, I started to teach myself how to put together a website. Over the next two years, with the thanks of GeoCities, Angelfire, Tripod and the like, I published about 20 website, including everything from fictional web design companies to Spice Girls Must Die, which on reflection probably explains my mother’s requests to stop listening to so much metal, put down the energy drinks down and have a nap…

The important thing about GeoCities and it’s ilk was that it allowed young geeks everywhere to dabble with designing and building websites at little to no cost, especially considering how exorbitantly prices webspace and domains were back then. These early tinkerers grew up, honed their skills and exist as the web designers and developers who are out making ridiculously awesome things today.

The way I see it, the web has had another explosion in the past few years with apps. With the explosion of the App Store, apps went from being something that only people on Twitter talked about to something that even my grandfather knows about. As a result, the same that happened with websites back in the mid to late nineties is happening again with apps. There are countless numbers of developers out there, already honing their skills that they’ve developed over the past few years to not only make awesome apps, but make awesome apps that might make them a few quid.

Here lies the problem… at the moment, most of the app stores out there are at saturation point. The App Store recently celebrated 700,000 apps, and the other app stores are anything but empty.

Enter Windows 8.

Having only been released last week, there’s a real opportunity to use the skills that you’ve honed designing and developing apps for other platforms to get in before the boat has sailed and reach ridiculous numbers of users. Bear with me while I throw some numbers at you…

690 million… That’s the amount of Windows 7 installs out there at the moment.

£24.99… that’s the rather modest price for an upgrade to Windows 8.

It doesn’t take a genius to figure out the opportunity. Not since Windows 95 was released back in my heyday has Microsoft had such a shift in their operating system. If you’ve played with it, you’ll probably agree with me that it’s most definitely a big step forward for the company. Now’s the time to start filling the Windows Store with awesome apps.

*This is from memory. However, my memory of anything past last week is sketchy at best. Wanted to note this, in case some proper, hardcore geeks start shouting about how Gateway 2000 weren’t technically called Gateway 2000 when they made 486s or something…

Want some help building a Windows 8 app? Come to a freeWindows 8 DevCamp and/or UX workshop at a location near you…