HTML5 for designers

by Simon Bisson

HTML5 isn’t just for developers. They need to collaborate with designers to build the apps their users want.

HardCopy Issue: 62 | Published: February 24, 2014

Building web applications has always meant a collaboration between developers and designers. With the advent of the modern Web, that collaboration has become even more important. Web 2.0 and AJAX meant that dynamic content could reshape page layouts on the fly, and JavaScript libraries began to break down the walls between design and code.

Web design in Visual Studio 2013

Microsoft has stopped developing new versions of its Expression design tools and instead added more design features to Visual Studio 2013. While much of its tooling is focused on its code editor, it does mean that both JavaScript and HTML5 are fully supported in the IntelliSense code completion tools. There’s even support for modern libraries and frameworks, including AngularJS, KnockoutJS and Handelbars. If you want to do more complex JavaScript work, then Visual Studio 2013 handles CoffeeScript through its Web Essentials plugin – a tool that contains a lot of useful web design and development features that may well end up in future versions of Visual Studio.

CSS developers get a lot more in Visual Studio 2013, including support for Bootstrap as part of ASP.NET MVC. There’s also full IntelliSense support for CSS, even from external CSS files. One thing to note: if you want a split view between designer and editor, you’ll need to open pages in the HTML Web Forms Editor, not the default HTML Editor.

One of the more important features is Browser Link, which connects Visual Studio to other browsers, including Firefox and Chrome. Content you’ve edited in Visual Studio is displayed in multiple browsers simultaneously, letting you see how your page appears in each. Make a change, click refresh and you’ll see it in all connected browsers. While it’s intended for ASP.NET web applications, you can add a handler in a site’s web.config for static pages. Browser Link is based on Microsoft’s SignalR protocol which uses web sockets to handle two-way communication to a browser.

For those using HTML5 to build Windows Store apps, Microsoft has tweaked the bundled version of its Blend design tool in Visual Studio 2013. It’s now easier to work with CSS3 animations, and to manage the CSS in your application designs. There’s also support for design-time data so you can format and test out data-binding elements without connecting to live data sources.

Microsoft has done a lot to make Visual Studio 2013 a tool for both designers and developers, though it does inevitably focus on the code side of design. It’s not an HTML-specific tool like Dreamweaver, but it is a powerful HTML editor, especially if you’re planning to work with a selection of JavaScript libraries. As HTML5 becomes an increasingly important tool for Windows development, Visual Studio’s HTML5 support and tooling is only going to get better.

These days, as HTML5 and its associated wave of standards become the basis of the current generation of web applications, the boundary between layout and code has effectively vanished. Now all websites can be applications, with REST APIs providing routes into all manner of web services and applications. Then there’s the rise of responsive design, with applications that need to work across a wide range of screen sizes, from smartphones to tablets to PCs and beyond. Users expect well designed pages that don’t break as content loads; pages that animate, engage and guide them through an application.

It all means that designers and developers need to work together more closely than ever, especially as HTML5 begins to bridge the gap between web and application. HTML5 and JavaScript have become first class partners with traditional code in the latest operating system releases – and with examples like the email client in Windows 8.1, it’s clear that they’re ready for prime time. A new generation of design tools is helping bridge that gap, giving development tools to designers and design tools to developers.

As HTML5 continues to evolve, it’s clear that it is becoming another component in the development toolbox. It’s not just Microsoft using HTML5 in Windows Phone and its new WinRT programming model; Google is betting big on its Chrome browser, in-browser apps, and its Chromebook browser-powered devices. Meanwhile Firefox has launched its own HTML5-focused operating system, and a range of smartphones. Even Intel is driving HTML5 development, with a free cross platform development tool and support for key open source libraries and tools.

The rise of HTML5 means that developers need to work with designers, and both need tools that can be folded into existing workflows. That used to be hard – there were design tools and there were development tools, and never the twain shall meet. But that’s all changing, and now designers and developers can collaborate easily, often using the same tools.

There’s another reason to use HTML5: it makes it easier to build cross-platform mobile applications. Responsive design makes it easy to write code that can run on all classes of device, and you can then wrap it in a run time that gives access to device capabilities – as well as access to stores. BlackBerry’s WebWorks builds on that approach, and Microsoft provides a web rendering surface as part of its Windows Phone APIs. There’s even support for web views in Apple’s iOS, though access to the company’s latest JavaScript engine is restricted.

 

The Creative Cloud

The first place to stop for HTML5 design tooling is Adobe’s Creative Cloud. Switching from its traditional boxed software development model to a subscription service has allowed Adobe to change its delivery cadence, making the company much more responsive to changes in designer and developer needs, and able to deliver new features and tooling at a much faster rate. The company has also become much more involved in the standards process, delivering new features for the popular WebKit browser engine – the same engine that is built into many of its web design tools. That means Adobe is able to support new HTML5, CSS and JavaScript features faster than its competitors, giving designers the tools they need to add advanced features to their layouts.

Dreamweaver remains the top of the heap for HTML5 design tools, with its mix of visual design and layout and deep code development. It’s a powerful tool, and one that deservedly remains the go-to for most developers working with the Web. The latest Creative Cloud release includes tools for working with CSS 3.0, and for highlighting code in Live View (itself a WebKit rendering surface, for real world browser support without leaving the editor). With responsive web design in mind, there’s also a Fluid Grid Layout that simplifies working with different screen sizes; so you can reflow page content (and selectively hide pager elements) depending on screen sizes.

If you’ve used Dreamweaver in the past, then Dreamweaver CC isn’t that far removed from its predecessors. The code editing tools have been improved, and it’s easier to build your own custom editing layouts with the ability to sync settings between copies of Dreamweaver via the Creative Cloud service. However Adobe has concentrated on making Dreamweaver a tool for working with HTML5. There’s support for many key technologies, including CSS transitions and HTML audio and video – as well as integration with the popular JQuery framework that’s used to simplify the delivery of many modern web design features.

Dreamweaver isn’t Adobe’s only HTML5 development tool; it’s been joined by the Edge suite of tools. Written in HTML5 and delivered as part of the Creative Cloud subscription service, the Edge applications focus on specific web design use cases – and if you have a Creative Cloud subscription you get to use them alongside the more familiar Dreamweaver and Photoshop. Unlike more traditionally delivered design tools, Adobe is continuously updating its tools, and new features are added regularly. Some of the Edge tools, like Reflow, are still in beta. You’ll also find HTML support in Adobe’s video editing tools and in its InDesign publishing package.

Edge Animate is perhaps the best known of the Edge tools, as it brings Flash-like development to HTML5 animations. With a familiar look-and-feel, you can create and animate page elements using a time line to draw paths and handle transitions and transformations. Designers don’t need to learn new skills to add animation to a web application as they can use the same techniques they learned with Flash. The code that Edge Animate generates is ready to drop into a page, and includes the CSS used to design animation elements. There’s also support for a range of web fonts, giving you more design options than the standard browser font sets.

Similarly, Edge Reflow is there to help you design responsive web pages. It’s built around the open source WebKit browser engine, so you’re working live in a browser on pages that can be viewed on your choice of screen sizes. Reflow tools are built into Dreamweaver, but it’s often better to use a standalone tool when you’re showing designs to colleagues, or focusing on just how a specific page design will perform on various devices. Responsive design depends on CSS media queries, and Reflow will let you set breakpoints to show just how different screen sizes impact a design. The latest Reflow beta adds support for form elements.

Pages from Reflow, and from other Adobe tools, can be delivered to Edge Inspect for live testing on devices. With the proliferation of mobile devices, it can be hard to ensure that your code and designs run on as many as possible. That’s where Inspect comes in, as it gives you the tools you need to display pages on devices without having to fully deploy your applications. Devices are paired with a computer, and a Chrome extension is used to keep them in sync with what you’re currently browsing. You can view the code that’s been rendered on a device from your host PC, and make changes in real time. There’s even support for devices like the Kindle Fire, which aren’t handled well by other development tools. Edge lets you take screenshots from all connected devices so that you can show the current state of a design to the rest of a team, or to clients.

Adobe’s HTML5 tools will also work with its PhoneGap mobile application development service, which takes HTML5 and JavaScript code and wraps it to run on mobile devices, ready for distribution through app stores. These new hybrid applications are increasingly important, mixing a native runtime and APIs with HTML applications. It’s not just Adobe that’s investing in this approach – Salesforce is using similar tools for its mobile application framework, and Intel is investing in hybrid application runtimes as part of its HTML5 developer programme.

 

Intel XDK

Intel’s HTML5 development toolkit XDK is a cross-platform bundle that works with many common JavaScript and CSS frameworks, including Bootstrap and JQuery, built using open web tools. The heart of the toolkit is the Brackets code editor, along with a UI designer in App Designer and App Starter. The App Starter is intended for prototype development, and to try out new designs and layouts.

Intel XDK screenshot

Building a mobile app with the Intel XDK.

 

Apps built using Intel’s XDK can be converted into mobile apps through Apache’s Cordova service, which is also the basis of the PhoneGap tools used by Adobe. Intel uses the Ripple device emulator developed by BlackBerry, so you can test mobile designs without having to build and deploy them to devices – and without leaving your browser.

 

Telerik Kendo

Developers will be familiar with Telerik’s work, but designers will find its Kendo UI libraries more useful. Unlike the other tools we’ve looked at, Kendo UI isn’t a development or design package. Instead it’s a set of JavaScript libraries that extend JQuery and can be used with your choice of editing and design environments to add HTML5-powered features to an application. While the base Web version of Kendo UI is free for anyone to use, the full suite (and the specific mobile and data visualisation tools) need to be licensed before you use them.

Telerik KendoUI screenshot

Sample code shows Telerik KenoUI in action.

 

Where Kendo comes in most useful is when you’re trying to do things that come as second nature in a desktop application development environment, like displaying data, or using drag and drop, or autocomplete. To use Kendo UI you’ll need to include references to a Kendo library in your page, and then call the appropriate widget. It’s an approach that needs familiarity with JQuery though, as Kendo widgets are called through JQuery.

 

Sencha Architect

Sencha’s touch tools are a familiar piece of the mobile HTML5 environment, and the company’s technologies are widely used across most mobile platforms. They’re not Sencha’s only product, though. The company has also developed an HTML5 design tool to help build responsive mobile applications.

Sencha Architect screenshot

Selecting a project type in Sencha Architect

 

Sencha Architect is a full featured design tool that makes it easy to layout designs, and prototype with live data, as well as re-skinning designs on the fly using cutomisable templates. If you want to work with code, that’s there too, in the shape of one of the best HTML code editors around. It’s also extensible, and there’s a marketplace where you can share your extensions with other users.

 

Microsoft support

It’s not just the traditional design and development tools that are adding HTML5 support. More informal tooling, like Microsoft’s Visual Studio LightSwitch include some HTML5 features. Here designers and developers can collaborate on form layouts, to ensure the best possible user experience, even for informal team-level applications.

Microsoft is taking that model still further in the currently experimental Windows 8.1 development tool, known as ‘Project Siena’, which generates HTML5 Windows apps that can be connected to any web service or to internal business systems. While Project Siena currently doesn’t offer the ability to edit its generated code in other design tools, it’s an obvious feature to be added in future versions.

Microsoft's Project Siena screenshot

Microsoft’s forthcoming ‘Project Siena’ in action.

 

In the HTML5 world it’s becoming harder to see a difference between the roles of designers and developer. If your job is to write code, you need to layout pages to display your content. If you design pages, you need to write code to add the features you want. That’s an important evolution, and one that makes finding good tooling increasingly important. With plenty of HTML5 tools now available, it’s becoming easier and easier to find design tools that work in your workflow, and that finally bridge the divide between designer and developer. All you need to do is find the one that works for you.

Find Out More

The Intel XDK can be downloaded free of charge from software.intel.com/en-us/html5/tools

Full details of the other products mentioned are available on the Grey Matter web site at www.greymatter.com/store

To discuss your needs further, call Grey Matter on 01364 654100 or email maildesk@greymatter.com

HardCopy 69 ad
Adobe Creative Cloud for Teams ad