All Articles Web
Review: Adobe Edge Tools and Services
Tareq Fadel on Fri, July 12th 0 comments
Ever been curious as to what the Adobe Edge Tools and Services are... and more importantly what you can achieve using them? Tareq Fadel breaks it all down in this feature review.

The Adobe Edge Tools and Services are a collection of applications with each one dealing with a specific function. There are a total of seven applications or services bundled in the Adobe Edge Tools. These will be available with your Creative Cloud membership. The free basic membership includes 2 GB storage to the Creative Cloud, Edge Inspect with 1 connected device, Typekit (or Edge Fonts) with access to 1 site and 2 fonts, PhoneGap Build with a 100 builds per month limit and Edge Code. 

If you’re a complete member to the Creative Cloud, then you have access to all 7 applications; Edge Inspect CC, Edge Animate CC, PhoneGap Build, Typekit, Edge Code, Edge Reflow and also the freely available fonts from Edge Web Fonts and 20 GB of storage in the Creative Cloud.

Edge Inspect CC, PhoneGap Build, Edge Animate CC and Typekit can all be purchased as single-app memberships at a reduced cost.

Pic 1


So let’s have a look at each and see what they do.


Edge Animate CC

This is the successor to Adobe Flash. If you’re looking to create snazzy animations and interactive rich media that is cross platform and compatible, then you’ll need to create it in HTML5. Unfortunately Flash for the web is losing popularity and HTML5 is gaining market share. This tool has been redesigned from the ground up and takes elements from both Adobes animation tools Flash and After Effects. In addition to animation, you’ll be able to add simple interactivity without code. If you’re skilled in JavaScript, then you can extend the functionality of Edge Animate further.

Create, Animate, Resize, Extend and Reuse, the 5 mantras of Edge Animate.

Create, Animate, Resize, Extend and Reuse, the 5 mantras of Edge Animate.


Edge Code CC

Edge Code started off as an open-source code editor called Brackets []. The whole application was built in HTML5 using the latest W3C standards. It’s a simple lightweight code editor with simple layout for coding in HTML5, CSS3 and JavaScript. Although saying that you can use it with any programming language. If you’ve worked with IDE’s (Integrated Development Environments) like Sublime Text or TextPad, then you’ll notice the similarities.

A unique feature by pressing CMD-E on any hex color you can see the colour in the Adobe Colour picker and visually change it from there.

A unique feature by pressing CMD-E on any hex color you can see the colour in the Adobe Colour picker and visually change it from there.


Edge Inspect CC

This is an application that you install on your desktop, your iPad, your Android Device, iPhone and as many devices as you want to test it on. This gives you the opportunity to preview the site that you’re designing live on a multitude of devices simultaneously, all wirelessly. Also any changes that you do are updated live to the devices. In addition to previewing, you have access to all the web developer tools in chrome for debugging on each of the devices.

macProVideo site loaded in Chrome and iPad with the Chrome DevTools loaded for the iPad render.

macProVideo site loaded in Chrome and iPad with the Chrome DevTools loaded for the iPad render.


Edge Web Fonts

This is more of a web app rather than your traditional desktop installed application. It’s essentially a web service. This is similar to Google Fonts or Font Squirrel where it’s a Font Foundry, collection of freely available fonts that you can use. You basically pick the fonts that you wish to use, apply any properties to the font to achieve the desired look and feel and once that’s been accomplished, the site will supply you with two lines of code that you can add to your site. 

A collection of 12 fonts out of the 502 available.

A collection of 12 fonts out of the 502 available.


Typekit

Typekit is similar to Adobe Edge Fonts with one big difference, in Typekit you have a choice from thousands of fonts from the world’s top font foundries like FontFont, ps.type.lab, Adobe Fonts and many more. In addition to that, they’ll be rolling it out over the next year or so that the Typekit subscription will also include print fonts as well as web fonts. The site is beautifully designed and is a joy to use with a very reasonable price tag.

A screenshot of the web application showing a foray of web fonts.

A screenshot of the web application showing a foray of web fonts.


PhoneGap Build

This is also a web service and is integrated into Dreamweaver. But you don’t have to use it with Dreamweaver. This allows you to package any HTML/CSS/JavaScript web app into an installable mobile app that can be distributed through the Apple appstore, Android Play Market, BlackBerry AppWorld and Windows 8 mobile market. The idea is you create and build it once using web languages like HTML5 and then compile out to the different platforms. The compilation process is all handled online via the server and then you can download the packaged application from the site. They even provide you with a QR code to quickly install the app on to your phone.

Pluralist Survival Guide App ready to be downloaded for Android and Windows Mobile.

Pluralist Survival Guide App ready to be downloaded for Android and Windows Mobile.


Edge Reflow

Edge Reflow is a great tool that ties in well with Photoshop. This gives graphic designers the ability to create responsive designed sites with ease, by reflowing the content dynamically depending on the width of the browser window. Traditionally, graphic web designers design the layout of the site to be coded by the developer. With the advent of multiple devices and different screen widths, the designer has to design 3, 4 or more layouts for each page. With this tool it allows you to create one layout that will adapt accordingly.

A page layout design that adapts to different screen widths.

A page layout design that adapts to different screen widths.


Conclusion

As you can see, these are an amazing collection of applications and services focused on making your life easier as a web designer or developer. From designing responsive websites to building web apps to deploying and building mobile applications, with Edge animate for your animations and the Edge Web Fonts and TypeKit for your fonts, this package has everything that you need to deliver the latest cutting edge sites and apps that today’s clients need. As an added bonus, a lot of these are already free as part of the basic membership to the Creative Cloud and if you’re a complete member then you have access to all of the premium features.


Web: http://html.adobe.com/edge/

Related Videos
Comments (0)

You must be logged in to comment.

EDM Production Tips
Logic Pro X 402
Dream It. Do It.
Do you want to learn EDM Production Tips?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: