7 Awesome HTML5 Website Development Tools by Adobe

PCMag recently spoke with Danny Winokur, Adobe’s vice president and general manager of Interactive Development, who said the point of today’s releases is to “advance what’s possible with HTML5 and associated technologies that have become instrumental to the modern Web.”

Adobe’s tools for HTML5 website development have brought the power of multiple technology features to build creative website designs. It aims to revolutionize the way the web is dealt with going forward. Adobe hopes to surprise web developers with a rather convenient and simpler creative process. These comprehensive tools are smart, flexible, and highly interactive in their use, style and performance.

Let’s take a look at the latest Adobe’s HTML5 website development tools re-invented for 2013:

Edge Reflow

This is a completely new, responsive web design tool by Adobe, available only for Adobe Creative Cloud members. The tool can create layouts and visual designs with CSS and is totally free in Adobe’s creative Cloud. It has a smart and intuitive design surface which can be easily resized. This surface gives an idea as to how layouts and visuals will adapt to different screen sizes.

It allows users to preview their designs in the browser, and check their designs in real-time with Edge Inspect extension. The design CSS can be transported to Dreamweaver, Edge Code or any other code editor for further modifications.

What it has in-store for Developers?

The primary purpose of Adobe’s Edge Reflow is to simplify the multi-screen design process, making it much more efficient and time-bound. Used for creating UX prototypes and visual designs followed by quick mock-ups.


Edge Reflow works on 2 design regions – design canvas for WYSIWYG layout and the property inspector (for single element styling). Breakpoints create new media query regions that can be easily tweaked to edit visual elements such as boxes, layouts and much more.

Edge Reflow

Edge Reflow lets developers build responsive prototypes of their sites. The tool gives the added advantage of extracting CSS from these web designs in a scheduled period of time. The tool offers the dual capability of a layout and a code editor, together; and is rather an addition to the already existing visual design tools.

A great feature of this tool is that it allows designers to prototype working responsive sites without the input of any developers. The ability to extract the CSS from this design is also a plus. It is reasonably accurate and can be used elsewhere making so becomes a great time saving asset in the process. This tool allows you to test the live changes during designing which is the key feature of this tool.

It gives you a browser like functionality to let you modify the canvas size, quickly upload files, view layout demonstrations, resolve design issues, better apply and understand CSS positioning, add animations to an existing HTML page, to name a few things.

Follow this video to know more.

Edge Animate

This tool helps to create engaging and animated web content. The tool has been updated with powerful new features such as gradients and support for existing new CSS filters. It heps to create cross-platform projects based on WebKit. You may design great HTML content with integration with TypeKit and Edge Web Fonts. It offers graphic motion support, let’s you add natural effects, use the Pin tool to increase the speed of the animations, or use symbols to build nested animations. The content developed via this tool can run easily on multiple devices such as iOS, Android, modern browsers as well as old browser versions.

Get started with Edge Animate, download source files for an enriching experience.

What it has in-store for Developers?

Edge Animate lets you style your content with its cool browser-enabled effects. This is a result of an integration of multiple graphical effects, at one place, for you. The new version has been upgraded with a host of new functions and features.

The tool comes with built-in CSS filters which you can apply to images, divs, text and symbols. Effects which were just available with Photoshop, can now be used with CSS filters. Supported by Chrome, Safari Blackberry 10, iOS6 only are an experimental yet innovative approach to designing for the mobile.

Edge Animate

Simply to edit gradients in Animate allow you add style to your web elements, better. It enables you to create 2.5D effects, apply linear or radial gradients, adjust gradient positioning, and apply CSS properties to gradients.

Edge Animate

Edge Web Fonts is a store-house of great fonts libraries from designers, across the globe. Manage these wonderful fonts to enhance your expand your content typography, to a whole new level.

Edge Animate

Check out this video to learn more:

Edge Code

This is a quick and simple tool that allows web development. It has a bunch of features such as live development, fast editing, integrated visual design tooling, without interrupting your coding. Coders get an optimized experience to use HTML, CSS and JavaScript, together. This tool works in sync with Edge Web Fonts and Phone Gap Build with support for other tools coming soon.

This works on an open source platform and is allows developers to make changes to it. The tool helps developers to take care of the new and up-coming challenges of web development and to tackle new customers.

What it has in-store for Developers?

This is a new generation code editor which includes features such as code hinting and coloring for HTML, JavaScript, and CSS. It helps to quickly edit multiple code files, without switching between multiple HTML documents. The tool looks for all files in your project to find applicable styles. Any development taking place via Edge Code goes live in a matter for seconds, so you can easily preview your changes as often as is required.

Edge Code

You can get more idea on how to use this tool from here : http://www.adobe.com/devnet/edge-code/articles/code-editing-with-edge-code.html

Edge Code is an expandable tool, it comes with a long list of community built extensions already existing. It is based upon the Brackets open source project, it lets you to easily customize its functionalities. In addition, you can check updates placed regularly in the editor itself.

Edge Code

Check out the these features in action, in this video.

Edge Inspect

Edge Inspect works like a remote control that can control update occurring in multiple devices. All devices connect to the same URL, which eliminates the need to manually navigate the web pages. It even updates any media queries or conditional code based on user agent, to every linked device. Whats more, it does all this in real time.

What it has in-store for Developers?

Edge Inspect allows you to easily browse web pages using Chrome and all devices connected along with it in synchronization. You can test the look and usability of each page prior launch. It prevents the device from going into the sleep mode and your text will be displayed within the current tabs even if your switch between multiple tabs.

Edge Inspect

As you browse in Google Chrome, the connected devices are sent to the same URLs. There’s no need to touch the screens or navigate to pages manually. The Edge Inspect Chrome extension transmits the URL data as a command to the iOS and Android apps. The devices browse to the same URL, so if you have any media queries or conditional code based on the user agent, those devices will get the content you intended. Edge Inspect is like a remote control that causes devices to update in real time. See image below :

Edge Inspect

The tool enables you to run the debugging operation for remote inspection, view and edit DOM and preview those changes on multiple devices. Edge Inspect is also being used with weinre (remote web inspection tool). As you might know there are few boundries for using weinre for debugging as you will not get any data even if refreshed.

Edge Inspect

Moreover, it offers complete integration with JS Bin, a popular tool that gives you the freedom to write, edit and test run your HTML, CSS and JavaScript snippets.

Get detailed information by downloading the Edge Inspect from here: Download

Study this video to know more about Edge Inspect.

Edge Webfonts

Edge Webfonts is a dynamic library of web fonts created by the contributions of Google, Adobe and designers across the globe. It offers up to 500 fonts for unlimited use for web designers.

Web Fonts

The aim of this tool is to simplify and enhance the typography of design by enabling designers, to look from a huge range of font families. All you have to do is just add a JavaScript tag on the head of the page, and reference a font family in the stylesheet. The URL in the tag determines which fonts will be loaded onto your page.

How to Use Edge Web Fonts

To use the font from the font library on your website, just copy and paste this embed code into the head of your HTML:

Now use its font-family name in your CSS:

h1 {
font-family: league-gothic, serif;
}

Check out here for more such codes available out there : http://www.edgefonts.com/
You can also preview the fonts in the bottom of the Adobe’s Egde Webfonts page, where you can check all fonts available.

Webfonts are available for both HTTP and HTTPS protocols. While building local web pages, it is advisable to use the HTTP URL. You may even include the smaller subset controls that includes all glyphs to display the content.

Powered By Typekit

Typekit offers a strong foundation for Edge Webfonts by making it a stable and highly functional service. Due to Typekit, Webfonts does not require OS or any browser support.

To learn more check out this video.

Typekit

This is a library of commercial fonts that lets you browse fonts by classification, recommendation and libraries. Fonts can be easily and quickly added to your site, while using your own CSS. These fonts can wok just about anywhere, and are absolutely free to use.

What it has in-store for Developers?

A simple, quick and smart way to add any kind of fonts to your site. Create a Typekit account, choose from the list of free plans, and go about choosing your fonts. Create a kit to configure the fonts that Typekit can apply to your site.

Typekit

You may pick fonts based on properties like height or width, language and classification like sans serif and so on. Use font filters to choose the most apt fonts for your text and categorize your results into fonts for headings, paragraph, English language and much more.

Get step-by-step instructions here on how to use Typekit.

Explore on your own with this video.

PhoneGap Build

The tool lets you build great mobile apps using the web tools you with HTML, JavaScript and CSS. It uses the most latest SDKs to create app store ready-apps for you. These cross platform apps are smart, highly usable and very intuitive.

What it has in-store for Developers?

This tool gives a guided step-by-step procedure to turn your HTML into an app. CLI (command line interface) is the latest update to its SDK. It offers more functionality to your command line and decreases your work load at the tools level.

PhoneGap

You can build your app by simply following the instructions at the app builder.

Additionally, you get links to download with each file, support to configure installation and privacy settings.

In addition, the Hydration feature adds a load checker to the front of your app; which checks if any new version of the app is available for use.

PhoneGap

This is good for users who do not have to check for updates manually, as your app will update on its own.

Explore this video to learn more:

Developer Forum

Well, it is clear that Adobe’s tools are a move towards an open web. Adobe has indeed ditched its affair with Flash and made way for new opportunities. Every tool mentioned above is a fresh approach to the existing standards. For instance,

Edge Animate – has introduced the concept of a time-line
Edge Inspect – is great for multi-device testing
Edge Code – has access to other tools like Web Fonts

The developer is buzzing over Adobe’s new set of tools. Aral Balkan, designer and UX expert insists that many Adobe products have potential and are in tandem with the current needs of the developer community. He adds that PhoneGap seems a viable cost effective solution for native app development. Nevertheless, these tools are for the creative minded and how they use them will be interesting to see.

Pricing

All of the services and tools will be available as included components for subscribers to Adobe’s Creative Cloud software subscription and download service, which costs $49.99 per month.

Some tools are available as standalone subscriptions. Standalone versions of Edge Animate cost $14.99 per month, Edge Inspect is $9.99, PhoneGap Build is $9.99 a month, and TypeKit costs $49.99 a year. The Edge Code editor is still in Preview, so it’s free, and Edge Reflow was only given a sneak peek at Create the Web and Edge Web Fonts is open source.

Adobe is showing a growing prominence through its products. It has recognized the needs and demands of professionals and focused on developing viable solutions for them. Investing heavily in open source projects is working as the core strategy for Adobe, as of now. We just have to wait and see where this leads it to.

In Conclusion

Adobe have introduced a host of advanced, cutting-edge features that allow web developers to create websites that are highly functional, reliable, and which can offer unmatched performance with use of advanced HTML5 features. Adobe hopes to create a beautiful web experience by its host of innovative, advanced and intuitive tools for web developers and businesses alike. The duo (HTML5 and Adobe) should prove to be a great combo revamping website development of the future.

About the Author:

Helen Thomas works for PLAVEB, a leading HTML5 Website Development Company in Los Angeles. She likes playing beach volleyball with her friends. she also enjoys making pencil sketches in her spare time. Follow her on Facebook and Twitter.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

3 Responses

Comments are now closed on this post.

  • Theo, May 7, 2013

    Interesting article, sounds as if it would be the “first real webdesign tool”.

  • Ricardo, June 7, 2013

    I liked the site! very complete! Congratulations.

  • Neil - TOPS Technologies, July 23, 2013

    This is really awesome stuff and Adobe is always bringing extraordinary things to make work easy for designers as well as developers and allows creating websites that are highly functional, reliable by using HTML5 features.