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
Web design in Visual Studio 2013
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.
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.
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.
The Creative Cloud
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.
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.
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’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 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.
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.
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.