Adobe Create the Web London

By Andi Smith - Wednesday, October 3 2012

Please note: This post has been archived and may contain information that is no longer accurate or relevant to the subject matter discussed.

Last week Adobe announced the launch of a new suite of tools for the web known as Edge. In conjunction with this release, they are touring four locations across the globe to discuss the future of the web, and the future of web tools. It was London’s turn this week, and I had the opportunity to take a training day at work and attend.

Overall it was a day packed with useful information and insight in to where Adobe is headed with their contributions to the web and the tools they are creating. I had already been aware of the Edge set of tools from the announcement last week but had been hesitant over whether Animate and Reflow would produce poor source code in the same way Dreamweaver had years ago. However, seeing them demoed today gave me new hope that Adobe are on to something great. These tools seem to be heading in the right direction, providing more useful ways to create web content.

Features such as the inline editing mode shown in Brackets filled me with a real sense of enthusiasm for what Adobe are trying to acheive, showing that their team really are thinking about the problems and challenges with current web development and how we can solve them. Animate and Reflow’s user interfaces are incredibly well thought out; and it appears they are at least trying to ensure the final code output is as optimal as can be expected for a visual editor. Even if the code these tools produce does turn out that they can not be used for production code (without trying them it’s too early to say either way), they would still work well for creating UE and animation prototypes.

One concern - everything shown today did seem to be Chrome/Webkit focused. Edge Inspect used a Chrome plugin; all the demos used Chrome; I could only see Webkit prefixes in editor code examples; Adobe’s patches are for Webkit… I hope Adobe are helping to make sure we can also use these tools with other browsers. It would be great to hear that they are working with other browser vendors; otherwise it feels like we are just dividing the web all over again.

My notes on the event are below, I really encourage you to check out the tools.

Adobe Create the Web

Introduction

Mike Chambers (@mesh) ran the opening keynote, discussing the problems we now faced with the responsive web and how Adobe is working to help solve them. Gone are the days when we supported 2 browsers and 1 screen; now we need to support multiple browsers; multiple screens and multiple platforms.

Adobe are working to help enrich content on the web.

  • They are working with the W3C group.
  • They are creating new and contributing to CSS proposals.
  • They are contributing patches to browsers (or, at least, to Webkit)

Adobe have three areas of focus when it comes to enriching web design, of which they have already contributed proposals and patches for:

  • Magazine style layouts (CSS Regions, CSS Exclusions)
  • Cinematic Effects (CSS Filters)
  • Advanced Graphical Effects (CSS Blending, CSS Composition)
Adobe Create the Web

Some of these features are now starting to make their way in to browsers. For example, iOS6; Safari and Chrome Canary now include CSS Filters.

CSS Filterlab

Adobe have created CSS Filterlab, a tool for playing around with CSS filters.

  • It allows you to create, test, animate.
  • Provides CSS to copy and paste (but seems to provide only the Webkit syntax).
  • It shows off some further custom filters such as page curl, which is already in Chrome Canary.
  • Seems a great way to introduce CSS Filters to developers and designers.

Adobe Edge

  • Adobe studied the current workflow for building websites (see below photo).
  • They found it often consists of handing over Photoshop designs to developers.
  • This has become more difficult with more complex designs and multiple devices.
  • The Modern Web needs Modern Tools.
  • Adobe’s solution: Adobe Edge Tools and Services
Adobe Create the Web

Edge is made up of partially new and partially rebranded tools and services.

TypeKit and Edge Web Fonts

  • Typekit
    • Includes 1,200 font families from 53 foundaries.
  • Edge Web Fonts
    • Working with Google Web Fonts
    • Includes 500 Open Source fonts (including the list of Google Web Fonts, Adobe originals, new fonts).
    • Open URLs, Open Source.
    • Adobe curating and updating/improving fonts for high definition.
    • Includes new fonts:
      • Source Sans Pro - optimised for Open Source apps and UIs.
      • Source Code Pro - monotype font for displaying code.

Edge Animate

Paul Trani (@paultrani) took us through an example of how we can take a HTML page and bring it to life using Edge Animate.

  • Creates interactive animated content, using CSS, JS, HTML.
  • Percent based positioning.
  • Move/adjust items sets up timeline.
  • Move in timeline, drag elements to new position.
  • Add easing really easily.
  • Add events to element, allows code editor. Code snippets are on right.
Adobe Create the Web

Edge Animate was covered in more detail in a later session.

Edge Reflow

  • Photoshop to CSS = pain.
  • Reflow allows designers to create CSS..
  • Another entire HTML page can be included.
  • Can scale to size, and add breakpoint.
  • Can change content based on these responsive breakpoints.

Edge Reflow was covered in more detail in a later session.

Adobe Creative Cloud

Paid tier - Which includes Creative Suite.
Free tier - Edge tools are on the free tier.

Overall, Adobe are excited to help move the Web Forward.

My questions from the talk:

  • Are Adobe contributing code to other rendering engines?
  • Animate, Reflow - The code that is generated, does it include all vendor prefixes? (I think the answer is yes)
  • Reflow - by including a HTML page, is this being intelligent and including all HTML, CSS and JS; or just including an iframe?

A Journey Through the Graphical Web

Divya Manian took us on a journey of how far graphics on the web has come over the last decade, using a DIV element to tell the story.

  • From cave paintings to LOLcats, we have been creating graphics..
  • Computers increase our ability to create graphics (e.g. undo, fill)

To be able to create more graphical sites we needed three things:

  • Better specifications.
  • Implementations.
  • Experiments that show how we can use these.
Adobe Create the Web

And so begun a quest for graphics on the web.

  • Introduced to CSS - Stylesheets.
  • SVG - Vector graphics with a DOM.
  • 3D Transforms - CSS Styling on a 3D plane.
  • Canvas - 2D pixels, good for animation; but no memory in DOM.
  • WebGL - 3D graphics. Two shaders: vertex shader, fragment shader.
  • Blend Modes - Pass in colours, apply a formula. Adobe are working with Canon to bring compositing to browser.
  • Custom Filters - CSS Shaders.

Adobe are working to ensure browsers implement the same specification, by writing more tests to ensure there are few differences between implementations.

Presentation will be online soon on GitHub, and used 3 libraries:

An Introduction to the Modern Web for the Creative Professional

Our first non Adobe speaker of the day was Sally Jenkinson (@sjenkinson), the Head of Technology at Lightmaker UK; and she began with a history of HTML before expanding more on what HTML5 is and what the web as a platform offers for the uninitiated.

HTML5

  • There are 2 main players in defining the specification - W3C, WHATWG
  • Is an evolution, not an entirely new language.
  • In marketing speak, HTML5 markup, JavaScript APIs and CSS3 get lumped together as HTML5.
Adobe Create the Web

Cross Platform Opportunities:

  • Publish apps to store via PhoneGap, or as “web apps”.
  • Single code base.
  • Use familiar technologies.
  • The potential to create once… (although in practice this may or may not be possible due to UI requirements)

Demos

Sally included some demos in her slides:

  • Camera demo, showing file input to load an image from a mobile device.
  • Orientation demo, showing text moving in different directions based on device orientation.
  • Speech demo, showing speech to text.

And some externally facing demos:

Further developments with HTML5:

Appropriate Usage:

  • Use existing data to understand target audience
  • Identify and match features
  • CanIUse.com
  • HTML5 cross browser polyfills.

Adobe Edge Animate: Creating the interactive web

Sarah Hunt (@sarahwhatsup) and Lee Brimelow (@leebrimelow) gave a detailed rundown of Edge Animate, including an in-depth demo.

Why we need a new tool for web animation:

  • Used to use Flash for animation.
  • Then iOS was released, and plugins like Flash couldn’t be used.
  • Animation on the web currently requires a lot of hand coding.

Edge Animate

  • Creates CSS Animations with JavaScript. No Canvas animations.
  • Interface is similar to After Effects.
  • Uses WebKit based stage, but provides compatibility for other browsers.
  • Keyframe based intuitive tooling approach.
  • Bridge the gap between creativity and code.
  • Meant for both Designers and Developers.
  • You can get hands dirty with the code, if you want or avoid it completely.
  • Supports plugins for CMS, data injection, JS libraries (like Tween.js and TweenMax) .etc.

In Edge Animate version 1.0

  • Symbols - like Flash (see below).
  • Webfonts.
  • Property Keyframes.
  • Percentage based layouts.
  • Downlevel Support - Graceful degradation experience for IE6, IE7, IE8 (such as Chrome Frame, static image).
  • Publishing - Works with other Adobe tools.
  • Code Editor - For custom JS and custom JS libraries.
  • Interactivity.
Adobe Create the Web

Live Demo

Lee gave a live demo:

  • Drags image in. Defaults to div tag, but can be changed to img tag.
  • Edge Animate only supports 2D CSS transforms at the moment - doesn’t use Polyfills - because of IE9 support.
  • Drag pin to where you want to adjust properties.
  • Highlighted pin will then allow you to change these properties.

Symbols:

  • Group elements together.
  • Right click, convert to symbol.
  • Information is now encapsulated inside a symbol.
  • Can inspect symbol’s contents.
  • Can copy and paste symbol to make duplicates, drag around and create multiple versions really quickly.

Animation:

  • Can attach JavaScript to timeline, using Actions button.
  • Code panel can be popup, or dedicated panel within current application.
  • Can animate symbols individually, for example change the start time using the pins.
  • Can apply different easing effects to different properties.
  • Also primitive drawing tools. DIVs, text, etc.
  • Easily add an event, such as click.

jQuery:

  • jQuery is built in to Edge Animate.
  • jQuery assists the runtime in Edge.

Edge Source Code

By default:

  • No code written in to the DOM.
  • JavaScript injects everything in to the DOM at runtime.
  • DIV with inline styles, in the same way jQuery animations work. Lots of properties being set, but they don’t seem too excessive.

Nicer code:

  • Publish content as static HTML.
  • Base DOM.

Publish settings: .oam option and iBook option.

Coming up in Edge Animate:

  • Audio
  • 3D Transforms
  • CSS Filters.

Brackets: Code the Web

Adam Lehman (@adrocknaphobia) gave a fantastic talk on Brackets showing off some of the features that make Brackets a code editor to watch out for.

Brackets is:

  • Open source code editor for the web.
  • Focused on web design and development
  • Unrestricted control and customisation.
  • Remains current with open web standards

Edge Code is a distribution of Brackets. Brackets with cool stuff inside it.

  • Very clean, tidy editor.
  • Support for LESS (more coming soon).
  • Quick Edit.
  • Inline Editors
    • Can see all CSS properties that relate to an element really quickly, sits inline in the page.
    • Also JavaScript inline.
    • Built in color picker, also inline.
  • LiveSave within the editor.
    • Brackets is connected to the browser (Chrome or all?).
    • Live for CSS, coming soon for JS and HTML.
    • Like LiveReload.
  • Approachable Open Source project.
    • MIT Licensed.
    • Source on Github.
    • Starter bugs on Github for people who want to start contributing to Open Source.
    • Starter features on Trello, and roadmap.
    • People can build extensions.
    • Brackathons to bring people together to improve Brackets.
  • Integration with fonts, via extension.

The Brackets Stack

  • Bootstrap
  • LESS
  • jQuery
  • Require.js
  • Mustache.js
  • CodeMirror

Brackets Development Process:

  • Agile, scrums.
  • Pull requests reviewed every day.
  • New releases every ~2.5 weeks.
  • External contributions take priority - as it’s obviously important to you using the product.
Adobe Create the Web

Future:

  • New ideas and core features.
  • 2013 - Tablet, cloud and beyond.

My questions:

  • Does LiveSave work in other browsers?
  • What about Mobile?

PhoneGap & Shadow: Building & Testing Mobile Apps with Web Standards

Michaël Chaize (@mchaize) ran through Adobe Shadow (now known as Edge Inspect) and PhoneGap.

Adobe Create the Web

4 major workflow problems with mobile that Edge Inspect solves:

  • Preview.
  • Refresh and clear cache - can refresh all devices from the browser.
  • Inspect and Improve.
  • Share with the team - take screenshots, log what the device is capable of (dpi, width .etc.).

Steps to use:

  • Install Chrome Extension.
  • Add Edge Inspect app to browser.
  • Be on same network, be in sync.

Usage:

  • Free - sync 1 device at a time.
  • Paid - sync multiple devices at a time.

Apps

So many different languages for native apps, so you can only target 1 platform at a time.
Or..

  • Use HTML, CSS, JS for all platforms.
  • Package as Native App.
  • Access device features.

PhoneGap

PhoneGap is a wrapper and a bridge to create a Hybrid App.

PhoneGap supplies JavaScript to talk to OS features.
Plugins to include additional features, on Github.

Considerations for going hybrid:

  • Level of user experience (if rich: go native)
  • Number of platforms (if many: hybrid)
  • Number of developer resources.

Examples of PhoneGap:

Emulate in browser.

emulate.phonegap.com

PhoneGap Build

Builds your apps for you.
build.phonegap.com

  • Free - only 1 private app, multiple open source apps.
  • Paid - multiple private apps.

Really easy to use, zip file or integrates with Github.

CreateJS: Creating Rich, Interactive Experiences for HTML5

Grant Skinner (@gskinner) gave an excellent talk on CreateJS.

Adobe Create the Web

Uses

  • Integrating animation
  • Advertising
  • Casual Games
  • Infographics
  • Data Visualisation
  • Dynamic Graphics

Examples:

Targets

  • Web
  • Mobile
  • Embedded (e.g. car dash)
  • Desktop
  • Digital Publishing

4 core philosophies of CreateJS.

  • Approachable. Grow and learn from the community.
  • Modular. Take the pieces that make sense.
  • Extensible.
  • Open source.

Sponsors: Adobe, Microsoft.

EaselJS

Create 2D graphics easily using the Canvas element.

Core Display Features:

  • Shape and Graphics
  • Bitmap
  • BitmapAnimation and Spritesheet
  • Text
  • Container
  • Stage

Ticker can be used to animate. Use onTick to listen for tick/heartbeat events.

BitmapAnimation and Spritesheet

Easy to work with, specify how big each frame is, set animation frame.

Can specify which ticks animation runs on (to slow down animation).

Text

Canvas has no DOM, but CreateJS allows us to take an element on the page and wrap within a DOM element to integrate in to canvas. Very cool.

Experimental Multi Surface Renderers.

Can choose how to render - canvas, DOM, WebGL.

TweenJS

Very small plugin.

  • Synched timelines
  • Easing
  • Non numeric properties
  • Sequencing
  • Overriding
  • Determinism
  • Plugins - e.g. CSS plugin.

SoundJS

  • Making web audio more usable.
  • Prioritise audio targets (e.g. HTML, then Flash)
  • Get sound capabilities. No need to worry about how it’s working.

PreloadJS

  • Load queues, progress bars.
  • Supports XHR2 where available.

Tools

Zoe - Spritesheet creation

  • Takes a SWF and generates Spritesheets.
  • Supports multi asset spirtesheets (work as multiple images as a single sprite sheet).
  • Image detection threshold (to remove very similar frames).
Adobe Create the Web

Toolkit for CreateJS

  • Not an exporter.
  • A new publishing workflow.
  • Designer and developer can work seperately.
  • v1.1 just released.
  • Runtime generated sprite sheets from vector animations mean reduced filesize. Huge filesize savings using this technique.

Design Responsively: Creating a Site that Works Across Screens

Jacob Surber (@jacobsurber) gave the final talk of the day on responsive design and Edge Reflow.

  • Content on 3.5 Billion screens (of all sizes)
  • Responsive design is not just the problem of the designer. The developer has to figure how to get the content on the screen.
  • Responsible Design - getting everyone in the process.
    • Writers
    • Designers
    • Developers

Two Steps:

1. Exploration phase.

  • Designer and content creator think about how this information is put out there.
  • Photoshop, Illustrator, Fireworks - to think about what’s possible.

2. Creation.

  • Creating for the web.
  • To get content on the web, build a tool on the web - Adobe Edge Reflow.
Adobe Create the Web

Edge Reflow

  • HTML design surface
  • Flexible Grid System
  • Intelligent Web Layout
  • Design and Typography

Design Surface

  • Flexible.
  • 1:1 design rendering (will work in a browser).
  • Define a number of columns; gutter and inset/outer gutter.
  • Fade grid.
  • Realtime visualisation on elements (like blueprints).
  • Can resize the design surface to view responsive design.
  • Changes are captured in Media Query.
  • Instead of 4 or 5 compositions, we can see how design reacts in between breakpoints.
  • Control to override everything for finer control.

Design with CSS

  • Expose everything available in CSS.
  • Tooling for all properties.
  • Fine grain control.
  • Reorder multiple backgrounds just by dragging.

Typography baked in to the application (from Edge Web Fonts).

Adobe Create the Web

Inspect and Extract

Shows CSS that defines the element; including different breakpoints.

http://foodsense.is/ is used as demo - not sure if the live site uses reflow, but HTML, CSS source looks good.

Public preview:

Before end of year.

Future features:

  • Copy/Paste
  • Undo/Redo
  • Visual Style Guide creator
  • Reusable elements
  • Style management
  • Multiple pages
  • Pseudo selectors
  • Markup.
Andi Smith

Andi Smith is a web developer from London, United Kingdom. He likes to build highly performant websites which innovate with genuine value.