The following are articles on HTML5 and related technologies.

  • HTML5 Sponsored Content

  • Ten Tips for Designing, Implementing and Packaging Apps for Mobile Devices

    By David Talbot

    A growing number of developers are opting to build their mobile apps in cross-platform HTML5 code that can be compiled into native apps that can be sold in app stores and markets. Learn how you can do this too!

  • Real World HTML5 Hybrid Apps

    By David Talbot

    Mobile Apps built with HTML5 are great... when the mobile device you're targeting can support all of the features you need for delivering a top flight user experience. To help the rubber meet the road, you sometimes need libraries to access native OS capabilities like the camera and you could use an accelerated canvas to deliver powerful and responsive mobile apps!  Learn how the polyfill libraries and Intel’s accelerated canvas can do exactly what is needed!

  • Leverage Your HTML5 Savvy to Build Commercial, Cross-Platform Apps and Games

    By Bill Hatfield

    An unexpected player has entered the fray with a tool that makes HTML5 mobile development easy while also directly addressing some of the shortcomings of Web technologies in mobile apps. See a demonstration of how quickly you can begin creating your own apps using HTML5.

  • Common Techniques in Responsive Web Design

    By

    This article about responsive Web design explores techniques for designing and implementing layouts that respond to the context of a user’s device, including handling grid-layout, bandwidth-sensitive image scaling and optimization of text and form fields.

  • Surviving the Zombie Apocalypse with HTML5 and SVG: Text, Paths and Basic Animation

    By

    Of all the features of HTML5, SVG has gotten precious little attention. Learn how it can create visually appealing pages, while possibly saving you from the impending zombie apocalypse.

  • Getting to Know CSS3 Selectors, Part 1: Structural Pseudo-Classes

    By

    Most of us are already familiar with id and class selectors, and I introduced you to the beauty of attribute selectors in “Understanding CSS Selectors.” But there’s so much more. In this two-part series, I’ll look at the new selectors in CSS3, starting with structural pseudo-classes.

  • Video: Building High-Performing JavaScript for Modern Engines

    By

    This in-depth video discus’s the key insights and optimizations implemented in browser JavaScript engines, such as Chakra in Internet Explorer 10 or V8 in Chrome as well as the best practices for taking advantage of these optimizations in your code and learn how to pinpoint JavaScript performance problems using appropriate tools and more.

  • Using the Windows 8 Simulator & VS 2012 to debug the IE10 touch events & your responsive design on the web

    By

    Using the Windows 8 Simulator & VS 2012 to debug the IE10 touch events & your responsive design on the web.

  • How to diagnose JavaScript Errors Faster with Error.stack

    By

    IE10 in Windows 8 Consumer Preview includes support for Error.stack , which enables Web developers to diagnose and correct bugs faster, especially those that are difficult to reproduce. Developers can build amazing apps with the capabilities of Web platforms that power today’s modern browsers. In Windows 8, we expose that power through both Internet Explorer 10 and Metro style apps in JavaScript .

  • Create a Cross-browser Touch-based Joystick with Hand.js

    By

    This article explores how to use the Hand.js library to create a cross-browser, touch-based joystick.

  • Using Web Workers to improve performance of image manipulation

    By

    In this article we will talk about picture manipulation. Not the Direct2D method  as we had previously discussed, but the pure JavaScript way.

  • Coding4Fun: building a Tetris-like game using CSS Grid Layout & Blend 5

    By

    I’d like to share with you a mysterious internal secret kept within Microsoft for now a long time. It’s the real story behind the concept of the CSS Grid Layout imagined by Microsoft for IE10 and Windows Store Apps. Most of you probably think that this...

  • Mobilizing Atari Arcade in HTML5

    By

    The Atari Arcade: a true game portal showcasing what's possible with web standards like HTML5, CSS3, and JavaScript. Slick graphics, fast, multi-player gameplay, and platform agnostic. Initially only targeting desktop and tablet-based browsers, we've now endeavored to bring the arcade to mobile.

  • Video: Building Awesome HTML Apps in Blend for Windows 8

    By

    Embrace the Windows 8 design principles by taking full advantage of the rich feature sets offered by both Blend and Visual Studio. Learn how to start from scratch and have a fully functioning (and visually appealing!) application that highlights how to work with styles, controls, data sources, layout, CSS3 transitions, web services, and many other features that help you create a better user experience with greater productivity.

  • Video: Building Apps for Office and SharePoint - Part 1

    By

    Building Apps for Office and SharePoint. In part 1 of this 2 part series, you will learn about the techniques used to build apps for Office and SharePoint.

  • How to build an Instagram-like photo sharing app with HTML5

    By

    Rajaskharan Vengalil set out to see if an app like Instagram could be built using only HTML, CSS and JavaScript. Read on to see the results.

  • Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easy

    By

    I often get questions from developers like, “ with so many touch-enabled devices on phones and tablets, where do I start? ” and “ what is the easiest way to build for touch-input? ” Short answer: “It’s complex.” Surely there’s a more unified way to handle...

  • 5 Ways to Increase Web Conversions with Design

    By

  • Flexibility: A Foundation for Responsive Design

    By

    With responsive Web design rapidly becoming one of the biggest development trends this year, partly because the concept is simple and crucial to ease: develop a site using methods that enable it to adapt and respond to different devices and resolutions. This article will discuss the another crucial design equation, Flexibility.

  • How the "Be the Thief" Experience Was Created

    By

    Our goal with the Thief of Thieves Experience is to deliver an immersive experience through Internet Explorer 10 equal to one you’d typically find in a native application. We do this by using the latest in HTML5, CSS3, touch, and related technologies. This article will explore the techniques used to develop the app.

  • The Star Wars Intro in Pure CSS3 Thanks to 3D Transform & Animations

    By

    Learn how to build and pure CSS3 Star Wars like text scroller and 100% JavaScript free including all the bells and whistles, enough to make George Lucas proud.

  • Real Time Multiplayer in HTML5

    By

    When you consider making multiplayer games, there are many methods available for creating a game that friends can play online. The article will present a playable demo with parameters to play with, showcasing the concepts discussed.

  • Progressive Enhancement in Browser-Based Games

    By

    Browser-based games are uniquely positioned at the intersection of the web and games, inheriting all the capabilities and resources of the web and browser technology. However they also face many of the same problems associated with developing for the web, while still retaining the intrinsic challenges of game development. This article will review the fundamental challenges associated with progressive enhancement to help you realize the potential of games on the web.

  • Quickstart: Adding WinJS controls and styles to a Windows Store app using JavaScript and HTML

    By

    The Windows Library for JavaScript provides a set of new controls designed for Windows Store apps using JavaScript. It also includes two style sheets (one with a dark color scheme and one with a light) that give your app the look and feel of Windows 8. This Quickstart article will review the details and best practices behind leveraging these controls and styles.

  • Quickstart: adding HTML controls and handling events in a Windows Store app

    By

    Every app needs controls, such as buttons, check boxes, and drop-down lists. Windows Store apps built for Windows using JavaScript can use two types of controls: intrinsic HTML controls and Windows Library for JavaScript controls. In this article we will focus on how to create and use HTML controls.

  • Sprite Animations

    By

    Ajax and moving dom elements around made for some fun, but limited in what kind of experience you could create. For game developers, things are changing, and quickly. HTML5 is introducing a bunch of new options for game development purely in the browser, and the browser vendors are competing hard to be the best platform for the new standards. This article will run through some of the choices to be made developing 2D games while offering some ideas for developing your own games using HTML5.

  • CSS Architectures, Part 1: Principles of Code Cleanup and the New Best Practices

    By

    All too often, the CSS for major (and minor) websites is a textbook case of code bloat and redundancy. We can all institute several basic, solid CSS writing practices to vastly improve the maintainability of any organization’s stylesheets making our approach two-fold. First, writing clean and efficient CSS. Second, CSS architectures. This article will explore both of these topics as well as several tips and tricks.

  • Surviving the Zombie Apocalypse with HTML5 and SVG Part 1: SVG Element, Text, Images and Basic Shapes

    By

    With widespread adoption of HTML5 standards, browsers are taking SVG in new directions, such as emphasizing the <svg> tag for inline SVG, using CSS for styling, and opening up the DOM so that SVG images can be created or manipulated on the client side with JavaScript. Part-1 of this two part article will discuss these methods in detail.

  • JavaScript Physics Engines Comparison

    By

    In this article we will take a look at three popular Javascript physics libraries and one that is currently in development: box2dweb, Ammo.js, JigLibJS, and Cannon.js. For each one, a quick introduction will be given and then the library will be rated based on ease of use, performance, and feature set.

  • Touch browsing: Go Beyond Pan, Zoom, and Tap Using Gesture Events

    By

    New browsers like Internet Explorer 10 have advanced touch experiences using gesture events.  There are a few first steps you can do to make sure to help your site become touch-friendly yet also have it work well across many input devices while supporting many modern browsers.   In this article, I’ll show you how.

  • Pinned Sites in Windows 8: Getting more visibility of your site

    By

    This articles shows you how to put your site logo right next to apps on the Windows 8 Start Screen—complete with site-centric visuals and badge notifications to let you know there is new content. 

  • Surviving the Zombie Apocalypse with HTML5 and SVG: Text, Paths and Basic Animation

    By

    This article takes a deep dive into paths and their myriad uses, we’ll demonstrate how to build the prediction meter and we’ll touch on some basic animation to add that little extra flare to the page (for the browsers that can understand it).

  • Generation App Lightening Reviews

    By

    Watch the Generation App Lightening Reviews and uncover great design tips, functionality improvements and more.

  • Making Real Money Building Windows 8 Apps

    By

    Building Windows 8 apps and making real money at the same time. In this article Kevin Ashley takes a look at some of the methods and figures associated with his experience with building Windows 8 apps.

  • Adapting Your Site to Different Window Sizes

    By

    Modern browsers like Internet Explorer 10 support the width and height properties of the W3C Working Draft CSS Device Adaptation. This gives Web developers a simple tool to control automatic content scaling across various window dimensions. In particular, it enables sites to easily adapt to Windows 8 browsing on touch-enabled tablet devices in the snapped view and in portrait orientation.

  • WinJS: Writing code using the Windows Store library for Javascript

    By

    The Windows Library for JavaScript (referred to as WinJS) extends the support for Javascript in Windows Store apps, has a number of helper functions for common app development scenarios. In the article below, we’ll talk about how to get started with WinJS for creating custom types and namespaces, as well as handling and managing event listeners.

  • Native Audio with HTML5

    By HTMLGoodies Staff

    Once upon a time, audio on the web lived primarily in the world of third-party browser plug-ins like Flash, QuickTime and Silverlight. This was not a bad world, but it had its issues. Today, we have another option: HTML5 <audio>. This new element allows you to deliver audio files directly through the browser, without the need for any plug-ins. In this article, we're going to explore the options that are now included with HTML5 audio capabilities.

  • How I built the Paint 4 Kids Windows Store using only HTML5 and SVG

    By

    Paint 4 Kids is a Windows Store app, specifically designed for kids. A simple app for coloring and drawing. You can read of the consumer’s features directly from the Windows Store site, where you can also see some screen shots. For this article, you can simply think of an app that has several drawings and you can interact with them.

  • Asynchronous programming in JavaScript for Windows Store apps

    By

    JavaScript is a single-threaded language. This means that invoking a long-running process blocks all execution until that process completes. UI elements are unresponsive, animations pause, and no other code in the app can run. The solution to this problem is to avoid synchronous execution as much as possible. This article will discuss methods on how to accomplish this.

  • Taming the SVG Beast

    By

    With the large number of varying screen resolutions available on today’s HTML5 gaming devices, it is now advisable to give some consideration to incorporating vector graphics into your games. SVG, or Scalable Vector Graphics, is an open standard, XML-based format developed by the W3C for representing vector graphics. Using SVG files for HTML5 game development is the main focus of this article.

  • Building HTML5 Games for the Atari Arcade

    By

    With Atari Arcade, the way games are developed has changed. The site was designed completely in HTML5 for Internet Explorer 10 and Windows 8 touch-enabled devices - although it works great in all modern browsers. In this guide, we'll quickly get you up and running with your own HTML5 game.

  • Building Atari with CreateJS

    By

  • Optimizing WebSockets Bandwidth

    By

    HTML5 games are growing in a strong way. Once Internet Explorer 10 is released, WebSockets will be available in all modern desktop browsers. This technology enables serious real-time communications—the keystone to any non-trivial multi-player action game. But like a snake in tall grass, bandwidth costs can seemingly come from nowhere. In this article, I want to discuss the oft overlooked cost of network bandwidth and techniques for minimizing it.

  • Mobile Game Primer

    By

    Until recently, performance of browser-based games for mobile devices has lagged significantly behind desktop performance. If you wanted to create a Canvas-based mobile game, performance was terrible and you needed to build your game around the limitations of the platform. This article will explore the options and considerations when developing and HTML5 coded mobile game.

  • JavaScript Game Code Organization

    By

    In this article Greg Smith discusses code organization tips and tricks that he’s learned while making HTML5 games while pointing out generally useful best practices that will help any game maker such as Greg is and beginning with the organization of JavaScript code into files and modules and moving into code sharing approaches such as component systems and finally wrapping up with some ideas for writing data-driven code in games.

  • HTML5 Games: Deft and Intuitive Player Character Movement in a 2D Platformer

    By

    This article describes the details of how Mary Rose Cook made the player movement deft and intuitive design for her game, Empty Black, a popular 2D shooter/puzzler/platformer.

  • Global Composite Operations - Your Canvas Utility Belt

    By

    The past year has seen wonderful growth in the popularity of 2D Canvas leading many developers to be much more comfortable with the 2D context. Canvas is almost synonymous with HTML5 gaming and supported in all modern browsers including Chrome, Firefox, and Internet Explorer 10 and 9. With a total of eleven GCOs at your disposal, this article will explore the options of two of the lesser known GCOs - source-atop and destination-out - and show how they can help you solve some common problems in game graphics programming.

  • High-Performance, Garbage-Collector-Friendly Code

    By HTMLGoodies Staff

    If you’re developing a game that has many things happening at the same time, say a weapon that fires missiles 5 times per second – not an unreasonable weapon fire rate for a high-speed shooter – you’ll quickly discover that one area of substantial impact to performance is object construction and subsequent garbage collection. This article will explore these JavaScript based concepts and the ultimate garbage collecting maid that it can be used to be

  • Asset Management for Web Games

    By HTMLGoodies Staff

    Many of today’s computer games have intense graphics and interfaces with many moving parts. This has been possible on the desktop and console platforms by the use of high-density media such as DVDs and also fast read/write speeds provided by RAID setups and solid state drives. As more games are created to be played on the web we must provide players with great gaming experiences, without making them wait for hours for assets to download. A lot of progress has been made recently which allows web based games to have more control over when their content is downloaded and how it is cached. This article will explore these techniques.

  • Getting a Console Experience on the Web

    By HTMLGoodies Staff

    Every new generation of consoles has brought with it services such as marketplaces, achievements and gamer profiles, which have made it easier for players to instantly connect with friends, as well as being able to discover, purchase and find new ways to enjoy games. In this article I will be discussing 3 main features of traditional gaming systems, and compare them with the offerings of the open web, and discussing how you can leverage these offerings to bring in new audiences for your games.

  • Optical Zooming: How to Correct Legacy Document Modes Problems with Fonts

    By HTMLGoodies Staff

    Modern browsers like Internet Explorer 10 and 9 introduced sub-pixel font positioning as part of its hardware-accelerated rendering of HTML5 content. That was an important step into the future as it enabled zoom-independent text metrics—an important characteristic when touch gestures like pinch-zoom are part of the browsing experience on Windows 8 touch-enabled devices.  This article shows how easy it is to help your fonts look better across many browsers by declaring Standards Mode.

  • Broad Phase Collision Detection Using Spatial Partitioning

    By HTMLGoodies Staff

    Collision detection is an ongoing source of research and constant optimization in game development. It can be a source of exuberance or nearly infinite frustration. This article focuses on two approaches to broad phase detection of collisions. The first is a brute force method that, while simple, quickly becomes wildly inefficient at typical game entity counts. The second is a form of spatial partitioning called a spatial grid. It is relatively simple, yet handles large numbers of game entities efficiently.

  • A Study in Adaptive Game Design

    By HTMLGoodies Staff

    The idea behind responsive design is that an interface is designed and should be built such that it can be adapted to any technology, any screen format and so on. Any game that aspires to be more than a casual encounter should seriously consider building itself as a platform. This article discusses the many variables in the decision making process to help you, the developer, choose the correct architecture choices and perhaps, change the world!

  • Windows Store Apps Using JavaScript Versus Traditional Web Apps

    By HTMLGoodies Staff

    This post provides an insight into some differences in the coding practices used in existing Web apps written in JavaScript and Windows Store apps using JavaScript. It provides guidelines for Web developers to understand how code that is optimized for Windows relates to apps that are meant to be migrated among platforms with ease.

  • "Hello World": Create a Windows Store app using HTML and JavaScript

    By HTMLGoodies Staff

    One of the advantages for developing Windows Store apps is that you can utilize your existing knowledge of HTML, CSS and Javascript. This tutorial teaches you how to create a simple "Hello, world" Windows Store app built for Windows using JavaScript.

  • Modernize your HTML5 Canvas game Part 2: Offline, Drag-and-Drop, and File APIs

    By HTMLGoodies Staff

    Many of the new features included in HTML5 are starting to make their way into the modern browsers such as Internet Explorer 10 and thus, are creating a whole new class of web applications and gaming scenarios. This article is Part 2 of demonstrations of some of these new features to modernize a basic HTML5 game.

  • Emerging Specs: Exploring Device Orientation and Motion

    By HTMLGoodies Staff

    Web standards are always changing.  Like WebSockets where yesterday’s prototypes become tomorrow’s mature standards and one of the latest prototypes that’s gaining momentum is the implementation of the W3C DeviceOrientation Event Specification draft on HTML5Labs.com. This article will discuss those specifications.

  • The Complete Guide to Building HTML5 Games with Canvas & SVG

    By HTMLGoodies Staff

    After spending most of his time explaining to students, hobbyists, professional developers and teachers how to build games using HTML5, David thought to himself, rather than keeping all these details for small audiences, wouldn’t it be smarter to share it with you? This article is then based on his own experience in doing so and helping other to build HTML games with Canvas and SVG.

  • Windows 8, jQuery Geo, and toStaticHTML

    By HTMLGoodies Staff

    I recently attended a Windows 8 DevCamp with the intention of installing Microsoft’s latest OS for the first time and getting jQuery Geo to work as a native app on top of WinJS. This article will review what was covered.

  • Building a Windows 8 App with HTML5: How to create a small RSS reader in 30min

    By HTMLGoodies Staff

    Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8. We will then build a WinRT application targeting the Windows Store. We’ll try also to follow the Windows 8 UI design guidelines by using Expression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.

  • Behind the Scenes: The Interactive Music Video Game built in HTML5

    By HTMLGoodies Staff

    In this article you’ll see how a team of HTML5 experts came together to create an online experience that not only showcases the power of HTML5, but provided Microsoft with the interactive experience that they were looking for on their new “justafriend.ie” site.

  • Atari Arcade - Behind the Scenes

    By HTMLGoodies Staff

    The Atari Arcade was re-written using HTML5. Get a glimpse at some of the work that went behind the scenes in the development of Atari Arcade.

  • Creating a Simple Windows 8 Game with JavaScript: Part 4

    By

    This is the fourth in a series of posts that will show you to create a (very) simple Windows 8 game. We’ll be using HTML5, JavaScript, WinJS, and some helpful libraries from CreateJS along the way.

  • Creating a Simple Windows 8 Game with JavaScript: Part 3 – Game Logic

    By HTMLGoodies Staff

    This is the third in a series of posts that will show you to create a (very) simple Windows 8 game. We’ll be using HTML5.

  • Create a Windows 8 app in HTML5, CSS3 and JavaScript

    By HTMLGoodies Staff

    This is part 1 of a multipart series on building a Windows 8 app. The goal of these articles is to provide the reader with logical and easy to follow steps to create a complete Windows 8 application from scratch. You won’t want to miss a single piece, so get to learning!

  • iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences

    By

    If you’ve built a plug-in-free browsing experience for the iPad, then you may be faced with a few challenges to prepare them to run on the new IE10 plug-in-free experience on Windows 8. This article will show you how to do this in a few steps below by writing code that works well in all modern browsers.

  • Windows 8 HTML5 WinRT App: How to create a small RSS reader in 30min (part 2/2)

    By HTMLGoodies Staff

    Part one of this two part series showed us how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8 and how to build a WinRT application targeting the Windows Store. Now we’re going to see how to display the details of each article. We will walk through how to use transition animation and play around with the simulator, and finally we will discover Blend and how to use CSS3 Multi-columns for instance.

  • Windows 8 HTML5 WinRT App: How to create a small RSS reader in 30min (part 1/2)

    By HTMLGoodies Staff

    Starting from scratch, we’re going to discuss how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8. We will then build a WinRT application targeting the Windows Store. We’ll also try to follow the Windows 8 UI design guidelines by using Expression Blend 5. Read on and learn.

  • Creating a Simple Windows 8 Game with JavaScript: Part 2 Game Basics & CreateJS/EaselJS

    By HTMLGoodies Staff

    This is the second in a series of posts that will show you how to create a very simple Windows 8 game. We’ll be using HTML5, JavaScript, WinJS, and some helpful libraries from CreateJS along the way.

  • Creating a Simple Windows 8 Game with JavaScript: Part 1, Windows 8 App Basics

    By HTMLGoodies Staff

    This is the first in a series of articles that will show you how to create a very simple Windows 8 game. We’ll be using HTML5, JavaScript, WinJS, and some helpful libraries from CreateJS along the way.

  • Mastering CSS3. Text shadows

    By HTMLGoodies Staff

    We’ve already discussed box-shadow and while both box and text shadow properties are defined in different modules, they actually work in a similar way. So if you are already familiar with the box-shadow you will easily understand the basics of the text-shadows art. This article is going to explore the world of text-shadow.

  • Mastering CSS3. 7 cool text-shadow samples you cant miss

    By HTMLGoodies Staff

    We’ve been exploring the basics on how to use CSS3 shadows: box-shadow and text-shadow. Today we are going to improve our skills and will look into how to build some amazing text-shadows.

  • Site Pinning: Rotating Overlay Icons for Multiple Service Notifications

    By HTMLGoodies Staff

    Site Pinning provides a unique way to build engagement from your users through out-of-browser notifications. The great thing about the Site Pinning API is that it’s very flexible and through some JavaScript magic, you can easily display multiple overlay icons for the various services you have. It’s a really great way of letting your users know that there’s pending information for them to check into and this article will dig into the details of this great new feature.

  • HTML5 Gaming: How to Animate Sprites in Canvas With EaselJS

    By HTMLGoodies Staff

    When you write casual games using the HTML5 Canvas element, you need a way to handle your sprites. There are several libraries available to help you write games, including ImpactJS and CraftyJS. This article will take a look at the use of EaselJS which was used to write PiratesLoveDaisies, a great HTML5 Tower Defense game and we’ll take a look at how to use your existing sprite elements and animate them.

  • HTML5 History in IE10

    By HTMLGoodies Staff

    Building fast and functional sites is a challenge with which most Web developers are familiar. Loading a new page every time the user clicks a link is slow. Fetching all content dynamically effectively disables the back button. Working with hashes is better, but still not ideal. Internet Explorer 10 in the Windows Developer Preview eliminates the compromise by adding support for HTML5 History. The pushState, replaceState, and popstate APIs provide fine-grained control over the behavior of the back button and the URL presented to the user for dynamic content. Together these APIs help you improve the performance of your site without sacrificing usability.

  • Mastering CSS3. Multiple backgrounds

    By HTMLGoodies Staff

    There are many reasons why you may need to create a composition of multiple images to build you background. This article will focus on another interesting feature — how to use multiple backgrounds with CSS3.

  • Mastering CSS3 Box shadows

    By HTMLGoodies Staff

    This article will study the art of mastering the two types of shadows with the new CSS3 modules, both box-shadow and text-shadow, defined respectively in the modules CSS3 Backgrounds and Borders and CSS3 Text.

  • Responsive Web Design Close Up

    By HTMLGoodies Staff

    It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

  • How to Choose Between Canvas and SVG for your Site

    By HTMLGoodies Staff

    Canvas and SVG are two exciting graphics features introduced in Internet Explorer 9 and are hardware accelerated. These technologies can be used to address a range of graphic scenarios on the modern Web. With a lot of excitement around Canvas, there has been a tendency to ignore SVG, which, in many cases, is the better choice. In this article we're going to take a look at how to choose Canvas, SVG, or a combination of the two.

  • Good-looking apps with CSS3 Transitions

    By

    A good-looking application must provide user with visual feedback. Users must always know that an order (a click, a tap or whatever) is well received and understood by the application and animations are a great tool to do so. The new HTML 5 specification introduces a great tool to handle simple animations: the transitions.

  • CASE STUDY: hi5: Thinking Outside the Browser Box with Social Games

    By HTMLGoodies Staff

    hi5 is a social gaming and entertainment destination site that provides millions of users worldwide with engaging content designed to ignite social play. Their focus is on delivering a fun, interactive, and immersive social entertainment experience online to audiences around the world. hi5 has 40 million monthly users and they are the 6th largest social gaming site worldwide available in 50 languages.

  • Case Study - Redefining the Designer Shopping Experience with Pinned Sites

    By HTMLGoodies Staff

    This article explores the benefits of applying Pinning to your site and timing is key to Gilt’s success. Through Pinned Sites, they delivered a better web experience and got more measureable results from them. Gilt’s customers are trend-setters and influentials. Their customers want fast access to the browsing experience, so they can score that dress they’ve always wanted. They demand great quality at value prices in a personalized “must-have” shopping experience. Today’s web browser is sufficient to deliver the content and complete a secure transaction but it relies on the customer proactively visiting the site. By the time this happens, the current sale may be already over. Other emerging technology channels like mobile and social posting are valuable complimentary experiences that build loyalty but they are less immersive than the core site experience on the PC, which is where most purchases occur.

  • A Behind the Scenes Look - Making of the Hunger Games Capitol Tour in HTML5

    By HTMLGoodies Staff

    The Hunger Games: The Capitol Tour is an immersive virtual journey that takes place in the capitol city of Panem, the seat of the Hunger Games authoritarian power. Powered by HTML5 and CSS3, this hardware-accelerated experience seeks to evolve the way fans and movies interact with one another. Developed in partnership with Internet Explorer and Lionsgate, and the Digital Agencies at Ignition Interactive and The Nerdery, The Capitol Tour is a glimpse into the universe of the Hunger Games. Here you’ll find a technical tear down that digs into the technologies underlying the experience, sandbox where you can explore a few of the prototypes that went into The Capitol Tour, and some links to resources for getting started and digging into HTML5 programming.

  • How to safeguard your site with HTML5 Sandbox

    By HTMLGoodies Staff

    Today’s web applications are put together a mesh up a new experiences into one experience. Think Twitter widgets showing the latest tweets about a product. Or Facebook comments discussing an article. Or even just integrated web pages through an IFRAME element. These experiences can increase security breaches to your site. Don’t stress…there’s a new kid on the block to help you out: The HTML5 Sandbox. But before I get to that, let’s quickly review IFRAME element issues.

  • Up close and personal with HTML5 IndexedDB

    By HTMLGoodies Staff

    Over the years, the web has increasingly transformed from being a repository of content to a marketplace of full-fledged functional apps.  The suite of technologies that fall under the “HTML5” banner have, as a fundamental goal, the capabilities to build within this new breed of software.  In this article, I’ll review a technology that solves an important piece of the application puzzle—managing storage and retrieval of user-specific data on the client side—called “IndexedDB.”

  • Case Study: Huffington Post - Reinventing the "Big News" Experience with IE9 Pinned Sites

    By HTMLGoodies Staff

    The Huffington Post takes broad leaps in creating the perfect site to take advantage of all that IE9, HTML5 and CSS3 has to offer. From Site Pinning to Favicons and everything in between. This article is a case study of how Big News reinvents the news site.

  • Browser and Feature Detection: Make Your Website Look Great Everywhere

    By HTMLGoodies Staff

    When you’re building a web site, you want it to look great in any browser…and ideally, it should look great for a long time, even in future versions of the browsers. I’ve pulled together some hints, tips and best practices that will help your sites look their best.

  • Bringing Cut the Rope to Life in an HTML5 Browser: Behind the Scenes

    By HTMLGoodies Staff

    Cut the Rope is an immediate favorite for anyone who plays it. It’s as fun as it is adorable. So we had an idea: let’s make this great game available to an even bigger audience by offering it on the web using the power of HTML5.

  • Behind the Scenes of Disney TRON: How to Build a Digital Book Site with HTML5

    By HTMLGoodies Staff

    Thanks to the amazing teamwork of Disney and Vectorform, it took just about 1 month to build the new Disney TRON: Legacy Digital Book Site, an immersive HTML5 experience built on top of Internet Explorer 9 Hardware Accelerated HTML5. This article will share some of the behind the scenes tricks involved to keep the project moving and completed on-time.

  • Best Practice for Programming with Vendor Prefixes

    By HTMLGoodies Staff

    Vendor prefixes enable Web developers to experiment with new standards before they reach the Candidate Recommendation stage. This article describes a pattern that the Microsoft team has used to make things significantly easier when developing with vendor prefixes.  We’d like to share it with you and hear your thoughts on this approach or any others you consider a best practice.

  • 12 Cool HTML5 Geolocation Ideas

    By HTMLGoodies Staff

    Knowing the location of your users can help boost the quality of your Web site and the speed of your service. In the past, users had to actively input their location and submit it to a site, either by typing it, using a long drop-down list, or clicking a map. Now, with the HTML5 Geolocation API, finding your users (with their permission) is easier than ever. This article will discuss these techniques.

  • 3 Breakthrough Ways to Visualize HTML5 Audio

    By HTMLGoodies Staff

    This article will focus on one interesting scenario that isn't directly covered by the HTML5 standard, but is in high demand and visually impressive. It's audio visualization using HTML5 and we'll discuss low-level API, a practical approach, future standards and more.

  • How to write a BrikBloc game with HTML5 SVG and Canvas

    By HTMLGoodies Staff

    The goal of this tutorial is discovering graphics development using SVG and Canvas (which are two majors technologies of HTML5). To do so, we will write together a brick breaker game (à la Arkanoïd or Blockout). It will be composed of an animated background (using Canvas) and will use SVG for bricks, pad and ball.

  • Top 5 Best Practices for Building HTML5 Games...In Action!

    By HTMLGoodies Staff

    What will you learn in this article? I’ll cover HTML5 game development frameworks, how you can reach more people by supporting smartphones and slate devices, how you should go about managing your in-game state, how to deal with performance issues, and how to make the most of the platform that is your browser.

  • Introduction to HTML5 Web Workers: Use Cases and Identify Hot Spots

    By HTMLGoodies Staff

    Previously we introduced HTML5 Web Workers, showed you how to post messages using JSON, and discussed web browsers support, non-accessible elements, and error handling & debugging. This week we will look at use cases and specific scenarios for the use of Web Workers, and will show you how to locate hot spots within your code.

  • Introduction to HTML5 Web Workers: Browser Support, Non-accessible Elements and Error Handling

    By HTMLGoodies Staff

    In the first part of this article, we introduced HTML5 Web Workers, and showed you how you can use the technology to post messages using JSON. This week we will tell you which web browsers support them, discuss the elements that are non-accessible to them, and dig into error handling & debugging.

  • Introduction to HTML5 Web Workers: the JavaScript Multi-threading Approach

    By HTMLGoodies Staff

    HTML5 applications are obviously written using JavaScript. But compared to other kinds of development environments (like native ones), JavaScript historically suffers from an important limitation: all its execution process remains inside a unique thread.

  • Learn HTML5 in 5 Minutes: Backwards Compatibility for Older Browsers

    By HTMLGoodies Staff

    We’ve discussed a lot of cool new functionality in HTML5, including the new semantic elements, the canvas tag for drawing, and the audio and video support. But you can’t possibly adopt HTML5 when many of your users don’t have HTML5-compatible browsers yet, right? In fact, you can still use the new features without breaking your site for users with older browsers, as we will show in this installment!

  • Learn HTML5 in 5 Minutes!

    By HTMLGoodies Staff

    There’s no question, HTML5 is a hot topic for developers. If you need a crash course to quickly understand the fundamentals of HTML5’s functionality, you’re in the right place. In this tutorial I’ll cover the new semantic markup, canvas for drawing and animation, audio and video support, and how to use HTML5 with older browsers.

  • Building Apps with HTML5: What You Need to Know

    By HTMLGoodies Staff

    If you’re excited about HTML5, I want to help you turn that excitement into ideas you can put into practice immediately. If you’re skeptical, I want to help you understand just why HTML5 is important. And if you’re just confused about what HTML5 even means, fear not: that’s our first stop in this series.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.