Preview: Adobe Edge Creates HTML5, Javascript, CSS3

Adobe Edge

Adobe Edge

This morning, Adobe released Edge – a preview version of their new software to create HTML5, Javascript and CSS3 scripts. If you have used Adobe Flash to create web content before, then the switch to Edge will be straightforward. With the similar interface, the switch over to HTML5 might just be an easy transition for some.

The Preview version is (of course) not a full version. There is no mention when the program will be released. This is a pretty easy to use program to save you time in making banners and custom scripts.

Adobe Edge Interface

Adobe Edge Interface

Upon first opening, I watched some of the tutorials and script examples – including a banner with a ferris wheel and roller coaster running. I then got into the meat and potatoes by creating my own banner.

The timeline is where you can take your text, images and other items into the program and make adjustments. Resize, fade in and out, move, rotate, and more. Move the cursor in the timeline to adjust the item for your script.

Since it’s a preview version, there are some things you cannot do yet. Importing video, making buttons or hotspots, or converting Flash scripts to Edge are some examples. Still, if you want to make a simple banner to spruce up a website, Edge preview is available to work from.

This is pretty impressive for what it is. I definitely want more from this program and cannot wait to try more features from this program. It could even replace Flash altogether – which would end the debate for iOS users in getting content.

Mini Review of SquareSpace.Com

From time-to-time I develop websites for clients and they generally want something reasonable (cheap) and easy to Squarespacemaintain. I’ve been hearing about a new company, SquareSpace, and how great it was so I decided to try it for myself. I was generating a proposal to update a website and decided to implement a prototype in Squarespace so the client could actually test drive my ideas.

I signed up for the 14 day free trial and watched a few “getting started” videos to help understand the interface. The site uses a visual interface and it’s very easy to get started. You pick a template style and color scheme depending on the type of site you want to create: blog, photo gallery, commercial/business. The templates are just a starting point because everything can be customized. You can even start with a blank screen and build your site from scratch. The templates are really CSS (Cascading Style Sheets) pages that can be customized by a visual interface or directly adding/modifying the CSS code.

In the site editor you can add pages and sections in sidebars that appear on every page. When you create a page or section you specify what “widget” to use. Widgets determine the type of content you want to add (journal/blog, html/text, links, search, map, forum, etc.). You can add/remove widgets and even change templates on the fly.

The site editor has four modes: Style Editor, Structure Editor, Content Editor, and Preview. The Style editor is where you pick/change your template, change column layouts, adjust fonts, colors and sizes, and customize the CSS. The Structure editor is where you add sections and pages. The Content editor is the section you will use the most after your site is configured the way you want it. This is where you add blog content, upload photos to your gallery, and change the information that your visitors will see. The last mode, Preview, shows you what your visitors will see when they visit your site.

Since this is a mini review I won’t go into all the details but I will tell you that I had a simple site up and running in four hours without any CSS or HTML coding. The site was mostly functional but it didn’t have the exact look and feel I wanted. I started switching templates to find a feature or a look I wanted for certain parts of my site and looked to see how it was implemented. In some cases it was a simple setting change in the visual interface and in others it was CSS overrides that made the difference (this is where watching the advanced help videos really helped). In one case I wanted to create a HTML page and add links to other pages. Since the linked pages were not created through the normal “add page” process, I couldn’t find a way to do it. I searched the Squarespace Help forum and found a mention of creating a hidden section on the sidebar and creating my pages there. This worked but seemed to be a kludge in the overall design.

Squarespace pricing starts out at $8/month for the Basic package and runs to $50/month for the Community package. You will need the $14/month Pro package if you want to map the website you create to your own domain name.

Pros:

  • Easy to create a website in minutes.
  • Lots of features for creating, maintaining, and monitoring your site.
  • Import content from other blogging sites: WordPress, Movable Type/Type Pad, and Blogger.
  • Detailed website analytics available.
  • Private site areas (password protected) and multiple editors.
  • Supports RSS and iTunes tags.
  • 100% customizable.
  • Great pricing.

Cons:

  • Website must be hosted by SquareSpace.
  • May require some HTML and CSS knowledge to really tweak the site the way you want (you may need to hire a consultant to finish the design).
  • No direct support for adding audio and video content. You can embed flash players using HTML Injection points but that feature is not available in the Basic or Pro packages. This may be supported with new widgets in the future.

In conclusion I was very impressed with what Squarespace offers. They have so many great features that I can’t possibly talked about of all of them here. I would suggest checking it out for yourself (14 day free trial) if for no other reason than to see how easy it is to create your own website.

73’s, Tom