An HTML5 WYSIWYG Page Designer for Developers

We recently sat down with the HTML5 Page Designer product team to explore the benefits of using this great new tool. Currently available in beta (and looking for testers!), this page designer will be available in Infragistics Ultimate 14.2 and promises to revolutionize the way you build your next generation line of business Web apps. Read on to see how this tool was created with you in mind.

Developers who are used to native coding environments are probably familiar with the WYSIWYG interface. But what about it makes it so appealing – and why go that direction for the page designer?

Most developers are not HTML, CSS, and JavaScript experts, much less experts in advanced components like Infragistics offers with Ignite UI [our HTML5/jQuery tools]. Pretty much all of the existing tooling for modern Web development expects you to be an expert—you have to hand-code everything and there’s minimal support for statement completion (IntelliSense). Worst of all, you constantly have to refer to documentation, hand code, and run in a browser just to get things going.

By providing WYSIWYG support as we do in the Page Designer, we shorten this cycle so that you can almost immediately see the effects of your changes as they will appear at runtime. We guide you by exposing the available events and properties directly in context where you are developing, and even offer integrated API help—which means you don’t have to know what you want, what properties are there, what events are there, much less what they are for. You don’t have to swap back and forth into docs all the time. It’s all right there at your fingertips, in real time.

Why target modern web interfaces with this page designer?

As discussed in our recent Hybrid vs. Native Showdown, the Web provides the most flexible and most widely-supported UI platform. Because of this, enterprises can effectively provide software capabilities to far more devices with one developed app. “Modern Web” mostly means that we’re targeting support of current popular devices and recent major desktop browsers. It tends to assume more interactivity and thus JavaScript is a baseline, along with HTML5+ and CSS3+. And in the majority of cases, it still implies using jQuery.

This particular blend of technologies has no effective WYSIWYG designer for dealing with complex components. The state of the art for modern Web WYSIWYG tends to be plain HTML, CSS, and minimal JavaScript, which is great for informational Web sites, but not so great for line-of-business enterprise applications that need rich components like Infragistics’ Ignite UI data grid and chart. We are working towards filling that gap, and this Page Designer is the first step.

Why is responsive web design (RWD) so important? What are some of the challenges a developer will face when using RWD, and how does this page designer help developers deal with them?

Responsive web design is important because it is a relatively effective technique to address the proliferation of devices that can access Web applications and sites. It is an implementation of the fluid layout pattern, which allows for intelligently adapting layouts to different screen sizes. Technically, it can adapt based on more than just screen measurements, but that is by far the primary use case—particularly screen width.

But RWD does increase complexity. One key area where the Page Designer helps is with managing the additional complexity that RWD brings. For example, the designer allows developers to visualize breakpoints and name them. It also helps developers quickly switch between their breakpoints to see the changes, and helps them set breakpoint-specific styles in the context of viewing them (i.e., you select the breakpoint for emulation, and then if you add or edit a CSS class through the component editor, the designer adds it in the currently selected breakpoint).

This tool sounds like it’s going to be a game-changer. How will it affect the development of someone who is just starting out versus a well-seasoned developer?

No matter what your experience level, the Page Designer helps in a number of ways. One, it reduces the need to correctly know or remember all the various UI component options. Two, it reduces the time it takes to see the impact of development changes. And three, it helps you get to a working page quickly, using our advanced LOB and DV components in Ignite UI

See for yourself how our new Page Designer can kickstart your development and become a beta tester today!