This week, as we celebrate open source and web standards at Google I/O, we are releasing a prototype of CSS Regions on Adobe Labs. CSS Regions allow designers to build sophisticated, magazine-style layouts on the Web. Previously, intricate print-style layouts seen in magazines, newspapers and textbooks could not be duplicated in website form. CSS Regions are a proposed addition from Adobe to the CSS (Cascading Style Sheet) Web standard, which is at the core of website formatting. We first proposed CSS Regions in March to the W3C (World Wide Web Consortium) and the CSS Working Group and there is now ongoing work with the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.
Initially we are working to bring CSS Regions to Webkit, because we would like to see the open Web platform offer even more sophisticated document layout features than today. Adobe engineers have developed a prototype implementation of CSS Regions in a customized version of WebKit, now available on Adobe Labs for developers to experiment with. Also live are several samples showing CSS Regions in action. Developers can access the prototype and get more information at http://www.adobe.com/go/cssregions
The broader umbrella of the Open Web Platform (HTML5, CSS3 and SVG, among other components) is an evolving set of specifications that we’ve been actively involved in. With CSS Regions, we are continuing the commitment to actively improve and contribute to Web standards and work with the community to develop the best solutions. On the heels of the enhanced support for HTML5, JQuery, Webkit and PhoneGap in CS5.5, we are continuing to adapt to a rapidly changing technological landscape and invest engineering resources in both Flash and the Open Web Platform.
We encourage developers to experiment with CSS Regions and provide feedback to Adobe and the CSS Working Group. Users can provide comments via the www-style mailing list to request features, make comments and report problems. We look forward to collaborating with the Webkit community on how to best bring a CSS Regions implementation to the WebKit main branch. As always, our goal with putting this experimental technology on Adobe Labs is to engage our customers and the community and really find out how they like certain capabilities, what other functionalities they want, and better understand their day-to-day pain points to learn how we can best support them with the tools they need.
We just got back from an exciting week at Adobe Max. We made a lot of announcements around HTML5 and were pleased to see the communities reaction to our intent to contribute back to jQuery and Webkit to help improve the Web.
While there are a number of areas that will drive our contributions over the next few years we think that Digital Publishing really stands out. It’s an area that is very exciting right now (especially for magazine publishers) and something that is embedded within Adobe’s DNA.
Digital Publishers face the same challenges that any other developer faces in the multi-screen world. How can I make it cost effective to target multiple devices? How do I ensure that the content is searchable and discoverable? How can I produce high fidelity content?
We believe that the separation of content, layout and formatting that is provided by HTML & CSS has a lot of potential to solve the adaptive layout & design problem. The challenge is that the language and the Browsers lack the capabilities for designers to achieve this goal today. So, this is one of the first areas that we’ll be spending our time on.
The video below shows some of the prototyping work we’re doing around Webkit to improve text wrapping and layout capabilities. The team has taken the approach of extending CSS with a few new elements utilizing the webkit- prefix so that the designer can adequately describe their intent for the content as the page is resized to simulate working across different screens. We look forward to working with the Webkit Open Source project and of course the W3C to contribute our work back in the most appropriate way. And, as always your comments are very much appreciated.
If you haven’t seen this already, I recommend that you check out the blog post on the work we did with Wired Magazine.
‘Created with Adobe InDesign CS5 and additional Adobe publishing technologies, the WIRED Reader is the first in a series of steps for Adobe to enable magazine publishers and retail catalogers to deliver groundbreaking experiences across tablets, smartphones and other devices. By reaching readers in new ways on these emerging devices, publishers can increase circulation (because these new apps count towards audited ABC circulation) and deliver incremental digital revenue.’
From a designers perspective, working with the tools they are already using as part of their workflow is critical. They can leverage what they already know to create compelling designs on new devices.
If you have an iPad, I recommend getting the June Issue. It is absolutely beautiful. If you don’t have an iPad, check out this video.
There has been a lot of talk about moving the web forward. It’s a great message and something that is difficult to argue with. Of course we all want to move the web forward, but what is most interesting is where the web has moved — onto devices. And as a result, the complexity of design has moved exponentially as well! There are so many considerations to address when thinking about a design or a campaign. Who is my target audience? How do I reach them? What devices do they use? What browsers? Should I be considering a native application? What about Flash? What about HTML5? At Adobe we have focused on making sure our designers and developers have the support they need in terms of tooling and technology. HTML5 is no exception.
Today Kevin Lynch, our chief technology officer, announced at the Google I/O Conference the delivery of a new HTML5 pack for Dreamweaver CS5 that is available as a free download starting today on Adobe Labs.
The HTML5 pack includes features that will make it easier for web designers to get started using HTML5. Some of the features include code hinting for HTML5 and CSS3 right within Dreamweaver; Multiscreen Preview and Media Query support, which essentially allow designers to preview pages they’re designing, just as they would appear on different screen sizes. The example below includes a smart phone, tablet browser and a desktop browser.
Here is Jorge Taylor walking through that demo.
The extension also includes Webkit engine updates and improvements to support video and audio in Dreamweaver CS5′s Live View. We also added some starter layouts complete with HTML5 syntax to help get you started. If you have more suggestions you can send an email.
In addition to the HTML5 Pack for Dreamweaver CS5, Kevin also showed the Google I/O attendees a couple more demos. One was the enhanced Illustrator export to SVG which you have already seen and the other was an early prototype where a designer can create a rich media ad using CSS Transforms and Animations. The demo was a great example of how CSS can really help a designer create a quite compelling experience using familiar features and design patterns.
We think this is an interesting area of exploration and we would love to hear what you think.
Even though we typically post about products and product futures, I want to say something about choice. I get the opportunity to spend a lot of time with designers and developers to better understand their workflows and what they are trying to create for their clients, their companies or themselves. Most of the time it is about designing the most compelling experience with the technology and tools that are most appropriate.
Kevin Lynch, Adobe CTO, said that Adobe will “create the best tools in the world for HTML5″ at Web 2.0 last week.
To his point, moving the web forward is about supporting a variety of technologies. Choice is the philosophy of our company as well.
We will always innovate around Flash and we will always innovate around HTML.
We will be showing some more product previews as well as making some more news around our support for HTML5 and CSS3. Stay tuned.
Recently the Adobe Illustrator team launched a free iPad and iPhone application called Adobe Ideas. The concept behind the application was to allow creative professionals to leverage devices for their ideation process. In this video, David Macy explains how to use the app as well as some of the cool new features. With the launch of CS5 (which we are incredibly excited about, btw) we thought it would be good to showcase another way we are extending the creative workflow.
David is the Sr. Product Manager for Illustrator. We would love to hear what you think about this application.
Multiscreen authoring is a challenge for our design customers, whether they are visual designers or web designers. They constantly are thinking about how to broaden the reach of their designs for their customers. We are committed to making that as easy as possible, without having to sacrifice the beauty or precision of their designs. We also are constantly looking at the best technologies to make that happen. There has been much discussion around whether or not html5 and css3 will make it easier for designers to reach new devices. We think it will.
In the following demo the team leverages CSS3 Media Queries to do multiscreen authoring. In this case a Dreamweaver user can dynamically go between style sheets based on the size of the layout for a particular device. The CSS for a smartphone, vs. a tablet vs. a website are all different and are dynamically exchanged based on how the user sizes the screen. There are no defined best practices for multi-screen authoring yet so this kind of experimentation is critical as it really helps our teams understand the potential workflows. How do you envision authoring for multi-screen experiences?
Recently, we attended technology demos across our design and web products. We saw a range of prototypes, many of which were focused on new services, multiscreen authoring leveraging html5 and css3. We have been spending a lot of time internally thinking about how our tools can best support and take advantage of some of the new functionality in HTML 5, and we wanted to share a couple of early ideas with you.
A couple of demos are worth highlighting. An earlier version of this demo was shown at Adobe Max last year. The workflow was focused on artwork (a Chart) that was taken from illustrator and placed into Dreamweaver which converts it into code and displays it via the HTML5 Canvas tag. The user was then able to bind the chart to an XML data file. What was cool about this was that a designer doesn’t need to care about the underlying technology, they can just focus on the results.
<
As you may have guessed from the demo there has to be some sort of JavaScript framework in place that manipulates the chart to respond to the data in the XML file. So how would this play out in real world usage? We’re thinking about tying this workflow to a new class of Ajax widgets that can leverage Canvas to provide richer interaction along with a clean abstraction layer to allow designers real control in a tool such as Illustrator.
Welcome to the “Design & Web” blog. We run product development & business strategy at Adobe, focusing on the needs of our Design and Web customers. We will use this forum to discuss product plans, technology prototypes and even broader topics around market trends. Our commitment is to ensure our tools and services continue to support evolving technologies so our customers can have the greatest impact.
We get the privilege of working with many talented product managers and engineers. We also get to see some great demos and pitches for new products,features and services. We’d like to share some of these with you to get your feedback and see what resonates. To be clear, we are giving you a very early view. It won’t be in the next version of CS.
We look forward to seeing your comments as we put out future posts.
