It was awesome.

That, however, isn’t a great feedback blog – so with that in mind, here’s my attempt at summarizing the afternoon:

The original agenda went a little something like this:

14:00 – 14:15 Welcome and Opening Remarks – John Cole
14:15 –15:00 The State of the Web – Jeremy Keith
15:00 – 15:45 Adobe Dreamweaver CS5.5 and HTML5 & jQuery Mobile – Greg Rewis
15:45 – 16:00 Break
16:00 – 16:30 Chrome Developer Tools – Paul Kinlan, Google
16:30 – 17:15 Edge Demo – Mark Anders
17:15 – 18:00 HTML5 interest speaker (TBA)

although it ended up a little something like this:

14:15 –15:00 The State of the Web – Jeremy Keith
15:00 – 15:45 Adobe Dreamweaver CS5.5 and HTML5 & jQuery Mobile – Greg Rewis
15:45 – 16:00 Break
16:00 – 16:30 Chrome Developer Tools – Sam Dutton
16:30 – 17:15 Edge Demo – Mark Anders
17:15 – 18:00 How else does Adobe help with HTML5 development? – Bhakti Pingale

The State of the Web

Presented by Jeremy Keith (@adactio), this was set up for an amazing talk before it started, especially if you’ve seen the video of his One Web talk earlier this year.

Here, Jeremy reinforced what I imagine has been teetering of the awareness of many web designers, if they haven’t already fallen head-on into responsive design.

Known Unknowns

Web design is full of known unknowns – we know that we don’t know the browser size, it’s capabilities, what device the viewer is using, the internet connection speed…

And yet for most of us, we’ve always just buried our heads in the sand, and stuck with our regular, beloved, grids – designed up to whatever the interpreted common resolution. Currently, most people use the 960 grid system.

Now that the variety of devices viewers can use has increased, the problems haven’t changed, it’s just become impossible to avoid, which is why each website should be capable of adapting to any device.

And with gems like “evolve or die“, it only got better (I can’t get enough of that quote).

Progressive Enhancement

One of my favourite little phrases, Jeremy bought it to a much higher level – from just adding in a few simple CSS3 text shadows, to allowing content to always be accessible but not taking away content from viewers on older browers.

1. Start with the content
2. Structure the presentation (with CSS)
3. Add in behaviour (with things such as jQuery)

Not got your content yet? Then you don’t have a website.

Recommended Reads:

1. Responsive Web Design at A List Apart
2. A Dao of Web Design at A List Apart

Adobe Dreamweaver CS5.5, HTML5 & jQuery Mobile

The biggest feature being pushed here was how Dreamweaver CS5.5 comes with updated, HTML5 template files and the new tags as default.

The interesting part, in my opinion, was right at the end and related to jQuery Mobile and PhoneGap. Dreamweaver CS5.5 comes with PhoneGap built in and easy-install buttons for the Android SDK and if you’re on a Mac, the iPhone SDK. That in itself is a miracle – I’ve still not managed to get to grips with the Android SDK on my personal computer.

By combining PhoneGap with jQuery Mobile, you can do some pretty exciting stuff, and some pretty boring but cool stuff, much more easily. Things like automatic back buttons, and hooking into a device’s native API (like a camera, for example) to give your website a native feel, whilst still actually  being a website.

I was on the edge of my seat! But then we were moving on – look out for more posts on PhoneGap on the Creare Web Design blog at a later date, once we’ve had a chance to play with it.

Chrome Developer Tools

Let me put my hands up and say that, right now, I’m using Firefox. It’s my default and still my browser of choice.

However, I’m wavering. It glitches out and is slow – rather than getting better, with each newer version I feel like it’s taking a step back as its plugins and extensions stop working.

Enter Chrome, Google’s very own browser. It’s been around for a little while now and gained an amazing popularity considering its short life so far.

What are external plugins for Firefox are built in for Chrome, giving it a more native feel and more ongoing support as Chrome upgrades. Firebug is included in this, and Console.

Some other nice features that I wasn’t really aware of include:

• Resources: see what exactly is being loaded on the page (including fonts)
• Scripts: includes debugging and the ability to expand minified script structures.
  • Lets you stop scripts at unhandled exceptions
  • Lets you add breakpoints
• Timeline: record all events that occur in browser (rendering events, user actions, loading events, scripting events…)
• Network timings: As you load the page, it records each elements load time and then shows you when the document is ready (with a blue line) and when the window is ready (with a red line)
• Audits: Gives a summary of improvements that could be made

I’m aware that many of these are avaliable in Firefox through things such as YSlow, Firebug and Console, but this is just about what Chrome now has.

Fancy checking out what’s next for Google Chrome? Get yourself Google Canary, the latest beta version – just beware, Canary is still in development.

Edge Demo

I’ll admit, I’ve been pretty darn skeptical of Adobe Edge. I had visions of thousands of websites just fading in, and of little jQuery effects on millions of buttons – but actually, its more like a web version of After Effects.

It’s meant more for animation, rather that little effects. The interface looks a lot like After Effects – but it loads 1000 times faster when you initially open the program.

On first impressions, the code looks fine – any jQuery animations are handled in JSON objects, which is nice, but between that, the library and easing it means about four js files – not so nice.

There is one major downside, and that’s the lack of fallback support for older browsers – you know the ones I mean… any Internet Explorer prior to 9 will just fail with javascript errors. For me, this is an epic fail and means that I can’t really look to use Edge animations with new projects.

What to check out what other people are doing with Edge? Check out these Adobe Edge Examples.

How else does Adobe  help with HTML5 Development?

In short, it doesn’t really – not that I could see. It is doing some other cool things though:

Adobe Muse

Released not too long ago, Muse is really popular at Adobe. It’s not popular with me, but hey. It could be a really good solution for people who don’t code and don’t really want a website/a good website. The code it makes is awful… but I can see it would have a place in the market, perhaps alongside Frontpage.

Adobe Wallaby

Adobe is also working on a project called Wallaby in Labs, which lets you convert your Flash files to HTML5 and CSS3 in just one click. Sounds great, right? It is! However, I’d place my money on it not working with older browsers, and it doesn’t support any actionscript apart from the stop(); function.

CSS Regions

It’s helping with CSS3 development, primarily in WebKit browsers but they’re also working with the W3C to implement it across the spec. This actually quite excited me. You know all those call print layouts with shaped text, like hearts and circles, or columns of text where a shape has been excluded in the middle?

CSS Regions will let you do that…. eventually.