A beginner’s guide to Adobe Edge Tools & Services

If you, like me, have been keenly following the Create the Web Tour, you’d know all about Adobe Edge Tools & Services. But if you are one of those who heard the buzz about the Create the Web events, but missed out on the details. Despair not! Here’s a quick introduction to Adobe Edge Tools & Services to help you get started. Read on.

Introducing Adobe Edge Tools & Services

Adobe Edge Tools & Services are designed to help web designers and developers create beautiful websites, digital content, and mobile apps using the latest web technologies, including HTML5, CSS3, and JavaScript.

Adobe Edge Tools & Services include Edge Animate, Edge Reflow (sneak peek), Edge Code, Edge Inspect (formerly codenamed Adobe Shadow), Edge Web Fonts, Typekit, and PhoneGap Build. The Adobe Edge Tools and Services are available with a free or paid Creative Cloud membership. For more information, see http://adobe.ly/VxX0aN.

As you read on, you’ll know more about each product in the Edge family. But before that, watch the video recording of the Create The Web San Francisco Keynote (September 24th, 2012).

Getting to know the Adobe Edge family

 Now, let’s understand a bit more about each product in the Edge family, and who’s best suited to use these products.

Adobe Edge Animate 

Edge Animate is a new motion and interaction tool to create animated, interactive content using HTML, CSS, and JavaScript. Edge Animate is best suited for web designers, web developers, and interactive designers who want to enrich their web content with motion and interactivity.

 Watch this video from the Create the Web Keynote in San Francisco, where Adobe’s Danny Winokur and Paul Trani introduce Adobe Edge Animate.

You can get started with Edge Animate by going to http://html.adobe.com/edge/animate/.

Adobe Edge Inspect

Edge Inspect (formerly codenamed “Shadow”) is an application that lets you preview and inspect web designs on multiple devices. With Edge Inspect, you can easily pair multiple smartphones and tablets with your computer and preview and inspect websites for different form-factors in real time. Edge Inspect is ideal for web developers and designers who are working on mobile projects.

To watch Edge Inspect in action, see this video. You can download and get started with Edge Inspect at http://html.adobe.com/edge/inspect/.

 Adobe Edge Code (Preview) 

Edge Code (Preview) is a code editor for HTML, CSS, and JavaScript. Edge Code is helpful for web designers and developers who write HTML, CSS, and JavaScript.  You can watch this video to know more.

To get started with Edge Code (preview), visit http://html.adobe.com/edge/code/.

Adobe Edge Reflow (Sneak)

Edge Reflow is a new tool, with an HTML-based design interface, for creating responsive web designs using CSS. Edge Reflow is ideal for web designers and developers who want to create responsive layouts, images, and CSS visuals targeting modern browsers and mobile devices. You can watch a sneak peek of Adobe Reflow  in this video.

 To be notified when Edge Reflow becomes available, keep an eye on http://html.adobe.com/edge/reflow/.

 Adobe Edge Web Fonts and Adobe Typekit 

Edge Web Fonts is a new free web font service that gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. To learn more, read this blog post, and to get started go to http://html.adobe.com/edge/webfonts/.

Adobe Typekit plans to provide access to hundreds of commercial and premium web fonts.  You can get started by checking out http://html.adobe.com/edge/typekit/.

Also, don’t miss watching this video, from Create the Web Keynote in San Francisco, for an overview of Adobe Typekit, and an announcement of new open source fonts from Adobe and the Adobe Edge Web Fonts.

Adobe PhoneGap Build

Adobe PhoneGap Build is a cloud-­based service built on top of the PhoneGap framework. Here’s a helpful list of FAQs that can provide you more information: https://build.phonegap.com/faq.

To get started with Adobe PhoneGap Build, go to http://html.adobe.com/edge/phonegap-build/.

Join the conversation

So, that was a quick introduction to the products in the Adobe Edge family. But, there’s lots more happening that you should not miss out on (it’s never too late!) –  do join the conversation on Twitter (@createtheweb), just remember to use the hashtag #CreateTheWeb.

4 Responses to A beginner’s guide to Adobe Edge Tools & Services

  1. Anthony says:

    As a flash developer, I’m just starting to get into this and HTML5. this was helpful, thank you.

  2. The animate tool is very interesting to me being a former advocate of Flash. I was disappointed when Flash was discontinued on Android because I believe in Flash and that users should have a choice in what content they can and can’t view and I didn’t believe Apple’s marketshare should make the decision for the rest of us….

    That said, I’m glad Adobe is bringing us some of the tools and experience that we had with Flash to the HTML5 world.

  3. Thank you for this blog. That’s all I can say. You most definitely have made this blog into something that’s eye opening and important. You clearly know so much about the subject, you’ve covered so many bases. Great stuff from this part of the internet. Again, thank you for this blog.

  4. Discover HTML examples and websites who have used Adobe Edge Animate to develop exciting content in the Adobe Edge Animate showcase.