Advertisement
General

Has Adobe Gotten its Mojo Back?

by

For the past several months a creeping sense of ambivalence between myself and my relationship with Adobe had been rattling through my consciousness like a song I couldn’t get out of my head. As a web guy I couldn’t shake the sense that Adobe was spending an inordinate amount of time telling the universe how great things were with DPS and mobile with very little chatter over on the web side of the fence.

In short, I detected a disconnect between Adobe’s claim to love web development and its “practice” of pushing DPS at the industry. With all of the cool web technologies that were cascading down on us I just couldn’t understand why Adobe was so slow in reacting to an industry that was in hyperdrive when it came to “change”. It was almost as if, since its Flash announcement last year, that the company had somehow lost its mojo.

The only real connection I was feeling with Adobe was the Animate team.

Then, for over a year, the Adobe Animate team took a group of us for the ride of our lives. They were developing an HTML5  app that used CSS3 and JavaScript to create motion and interactivity. Intellectually, it was one of the most stimulating experiences I have ever had with Adobe. The pace of change - a new revision roughly every six weeks – was breathtaking. New features were discussed one day and demoed the next. This was not my normal testing experience with Adobe and I would jokingly tell the team they should be hanging a Pirate flag from the rafters of their offices.

In early August I received an invitation to attend an event called Create The Web in San Francisco on September 24, 2012. I hesitated accepting. Having been through far too many of these Adobe events where the sizzle got everyone jazzed and the sizzle fizzled when we got hold of the technology, I was, needless to say, rather skeptical. Which is exactly how I felt when I took my seat among the digerati and fanboyz at the event in the Yerba Buena Centre. As I sat waiting for the things to start I couldn’t help but think it ironic this event was being held in the same place where Apple had just introduced the iPhone 5. The location, as it turned out,  was not ironiic. It was exquisite because the Edge tools and services Adobe unleashed that day are going to have a rather large impact on the content that shows up on those screens.  As Adobe so neatly put it before dropping the Edge stuff on us: ”The modern web needs modern tools.”


Create the Web San Francisco Keynote

Not only have the tools become modern but Adobe's attitude seems to have profoundly changed.

Over the past year or so Adobe has spent a lot of time talking about how they want to support the Open Source community. With the Edge lineup, Adobe is not only talking Open Source talk, but also walking the Open Source walk. Many of the tools and services in the Edge lineup were developed on GitHub. Then Adobe listened to the feedback and even accepted some open source contributions from the developers that were tagging along for the ride. 

Before I dig into the Edge collection, the first thing you need to know is these tools and services are not even close to being in the same league as Dreamweaver CS6 or any other visual editor or web tool offered by Adobe. These things were built on the web, for the web and are designed to work within the context of the modern web content creation process by using or manipulating HTML 5, CSS3 and JavaScript. They are all designed to work singly but, when used in a comprehensive workflow, they truly become those modern tools. Responsive Web Design ripples through the lineup and there was not one app or service presented where the word "mobile" was not in the slide deck or spoken by the presenter.

The otheraspect of Edge is the term "modern". Presenter after presenter made it clear that updates, changes and feature additions to these products are going to occur at a pace that ranged from weeks to months.

Let’s take a quick look at the array of Tools and Services that currently comprise the Edge lineup.


Edge Web Fonts

When Adobe bought Typekit, the first company to actually make web fonts available to the community, it also got Jeffrey Veen who was put in charge of the Creative Cloud . It was no surprise then to see Jeffrey wander on stage and proceed to set the tone of the morning by knocking us out of our seats.

This new service is, to say the least, stunning. It will regularly offer a range of free fonts- 500 to start with-  from Google, Typekit and other sources. Simly head on over to the webfonts page, select a font from the pop down and help yourself to the resulting JavaScript. Did I mention these fonts are free?

Not only that, but TypeKit will soon be offering a further 1,000 fonts from the Monotype collection. For the graphics community this is huge because, in certain respects, the Monotype collection is the “Gold Standard” for type. If Adobe can bring a foundry with Monotype's street cred to the table, you can bet the others won't be far behind. It could just be that the modern web is in for a long overdue Typographic Renaissance.

Another announcement that sort of got overlooked was the release of a new Open Source font Source Sans Pro which is designed to work with code editors and is the default font for Adobe Code.

You can read about why it was developed on the Adobe blog and you can pick up a copy at sourceforge.net.


Edge Code

This one is downright scary … in a good way. For the past several months Adobe has had a preview of an open source code editor - Brackets - available on Labs and GitHub. What we discovered is that Edge Code is actually built on top of Brackets, which is an open source project and, as such, the Brackets part of that equation is … and this is where the “good scary” comes in … going to be updated every 2.5 weeks.

What Edge Code does is provide you with a code editor that allows you to edit a line of HTML, CSS3 and Javascript code from the place in the code where those lines are located. You also get code hinting, an inline color picker and direct hooks into WebFonts and PhoneGap Build. Then it gets better; you can see your changes or progress in a live Webkit preview.

You can start working with a preview release by visiting the Edge Code page.


Edge Inspect

For the past several months Adobe has been letting people kick the tires of an app they called Shadow. Essentially, Shadow let’s you open an app or web project that is under construction in Chrome and, magically, that page appears on all of the devices registered with the app. I am sad to report that Shadow has been withdrawn. That’s the bad news. The good news is, it has resurrected as Edge Inspect. Not only can you use Inspect to preview your work but you can also inspect the code on the device, which is a major boost to the debugging process.

Another rather neat feature of Inspect is the ability to tell your devices to take a screenshot. These screenshots are placed on your desktop and you can email them to your clients.

This app is available right now and, if you have a Creative Cloud membership, it is most likely already sitting on your computer.


Edge PhoneGap Build

This one was rather interesting. When Adobe acquired PhoneGap it was rarely talked about outside of the context of it being a service available through Dreamweaver. It sort of made sense because PhoneGap, in extremely simple terms, took web code and created mobile apps. That part hasn’t changed but the mobile web has and the “Build” part of the name is the key.

What this does is to give developers a tool that will package an app for iOS, Android, Windows, WebOS, Blackberry and Bada without you having to set aside space on your computer for each platform. Inside Build, you choose the platform and the app is “constructed” in the cloud. The new "hydration" feature, among other things, pushes your changes/updates directly to the previously installed version of the app. Where this really gets neat is that Edge Code is fully integrated into Edge PhoneGap Build meaning you can wire up the projects in Code and have Build construct them without ever leaving the Edge environment. This app is now available.


Edge Reflow

This one caught everybody by surprise. How Adobe managed to keep a tightly ratcheted down “Cone Of Silence” around the development of this application tells me they swiped a page from Apple’s playbook.

If you caught my series around Dreamweaver’s Fluid Grids here at Webdesigntuts+ you may have also caught my subliminal message around them: “ It’s an OK first shot at Responsive Web Design but there is a ton of improvement needed.” I take that back. When Reflow is released, they become irrelevant.

Reflow is a visual RWD editor that has the promise of making the Fluid Grids process in Dreamweaver CS6 look like a wind-up toy.  Reflow gives you full control over the breakpoints between varying screen sizes, code control and export to Edge Code, Dreamweaver or any other editor and full WYSIWYG control over the CSS . I don’t normally get excited about this sort of thing, thanks to Adobe’s “Sizzle/Fizzle” track record, but this one has me hooked. The reason is, one of the guys who is involved in the development of Reflow is none other than the father of RWD: Ethan Marcotte.

That’s the good news. The bad news is the app isn’t ready. What I do hear is that a public release will be available by the end of the year. I can hardly wait to start kicking its tyres!


Edge Animate

The final app is Animate. It has been floating around Labs for well over a year and has moved from simply shoving divs from here to there to a full blown HTML 5, CSS3, JavaScript motion graphics tool complete with interactivity and some serious RWD hooks that allow your work to appear on any screen, anywhere … and that includes DPS and iBooks.

It is available right now and … are you ready for this … it will be free for the next 12 months even if you don't have a Creative Cloud membership. Really, I am not making this stuff up.

A noticeable hole in the lineup is some sort of graphics/imaging tool that isn't Photoshop. Instead the app could be a sort of lean, mean Fireworks that creates the jpg, png, svg and gif images destined for use in Animate or Reflow. Bopping between Illustrator, Fireworks and Photoshop to produce the content used in these apps is a cumbersome process.


This Could be Fun

As I was hanging around outside the building waiting to get in somebody said, "Great, Adobe is going to tell us how to create the web. Next they will be telling us how to use it." By the end of the day, Adobe didn't have to tell us how to use the web. The message that came through loud and clear was, "Here are a bunch of tools that are going to change how you create the web. Now go out and use them."

Has Adobe gotten its "mojo" back? That one is hard to say but this new line of products is a clear indication that it is on the right track. This could be fun.

Related Posts
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Code
    Articles
    Interview With Brian Leroux of Adobe's PhoneGap TeamBrian interview retina preview
    Mobile web development is tough especially when you're trying to offer native-like experiences to users. Several years ago, a small company called Nitobi took on the effort of simplifying building native mobile apps using traditional web development skills. Ambitious and sometimes controversial, the effort known as PhoneGap grew out of this need and one converts left and right. One of the main masterminds behind the framework is Brian Leroux who apart from being well-respected for his development skills and incredibly likeable personality is also one of the savviest mobile developers around. Considering the number of mobile devices PhoneGap targets, you have to be pretty well-versed in a variety of devices and OSs. Nitobi has since been acquired by Adobe and the PhoneGap codebase donated to the Apache Software Foundation to continue its development as the Apache Cordova project. Brian moved over to Adobe and continues to steward the codebase. In this interview, we'll chat with Brian about how PhoneGap came about and what the future of mobile web holds.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Code
    HTML & CSS
    The Right Way to Retinafy Your WebsitesRetina websites 2x
    Making your website ready for Retina display doesn’t have to be a hassle. Whether you are building a new website or upgrading an existing one, this guide is designed to help you get the job done smoothly. Read More…
  • Web Design
    Applications and Tools
    Getting Started With Dreamweaver CS6 Fluid GridsPreview
    Today I'm going to introduce you to Adobe's take on Responsive Web Design; Fluid Layouts in Dreamweaver CS6. These new tools allow designers to visually build their responsive layouts, mobile first, whilst Dreamweaver handles all the flexible calculations in the background. Let's take a look..Read More…