Adobe Creative Suite 3 rocks …

As Flash Mobile designers and developers, the new Adobe Device Central CS3 is giving us a much improved way to test our Flash Lite content than was previously possible within the Flash 8 Mobile Emulator.

There are some really great new features that have been implemented such as: device profile searching, device set creation, CS3 product workflow integration, performance and memory reporting, and many more (check out the FAQ and tutorials page for more info on Adobe Device Central). Many (“Flash Mobi-Lites”) are leveraging these features to save testing time, an important part of mobile development for sure!

However, in terms of Device Central features, for this particular post, I’d like to switch gears just a bit, and discuss a feature set that is not well publicized … or at least not as much as Flash Lite … that is creating HTML based Mobile Web Sites using Adobe Creative Suite 3.

State of Mobile Web here in the US:

Yes, unless you’ve been living under the proverbial rock for the last couple years, Mobile Web Pages, Mobile Web 2.0, and now even Mobile Web Servers are a reality.

Mobile (data) services are evolving, and quickly! Bottom line? Many users are seemingly willing to sacrifice a bit of aggravation (ever try to login to a mobile site without the aid of touchscreen, bluetooth keyboard, etc?) in order to get info via their portable devices.

Of course, in a global world perspective, this is dependent on region and everyone has their own ideas of what serves as the Mobile Web … i-mode in Japan for instance.

So for this specific post I’m mostly talking about US market (fixed data plans, limited bandwidth, etc) … as that is what I have access to on a daily basis.

HTML based sites on mobile:

For those of you that have not been paying much attention, we’re talking about HTML compliant Mobile Web Browsers, and not so much the nasty WML markup we saw a few years back.

Mobile browsers have evolved quite significantly. They are quite nice given the many constraints of mobile devices (limited memory, small screen size, performance just to name a few!).

Just take a look at the Nokia S60 Browser, Mobile Opera, or the upcoming Safari for iPhone for examples.

I think 99% of the readers here will already know about the iPhone and it’s (supposed) full-on safari browser implementation, and also the mention of Apple’s plans 3rd party web-based applications.

One thing is going to be true, there will be more Mobile Web out there and we need tools such as Dreamweaver and Adobe Device Central to help speed along development, lower costs, and overall make designers and developers work lives a tad easier in mobile landscape of devices.

scottjanousek.mobi: A simple example of a Mobile Site:

Recently I spent some time creating a new look and feel for my personal mobile site.

Nothing all that fancy, but the cool thing about it was being able to test the pages directly within Adobe Device Central BEFORE testing down on handsets … a real time saver.

Of course, this is just a personal site so I didn’t do exhaustive testing (remember that Adobe Device Central only has Flash supported handsets for their profiles right now) … but the device set profiling found in Device Central allowed me to easily pick all the devices I wanted to test for (with some notable exceptions of say my Nintendo DS Lite or PSP of which no profiles exist yet).

The process of developing a Mobile Site is fairly straight forward with Adobe Device Central and Dreamweaver with Adobe Creative Suite 3. Thought I’d share the steps, even if they are pretty trivial.

Rudimentary Steps:

You’ll first need to obtain a copy of Adobe Creative Suite 3 that has Dreamweaver CS3 and Adobe Device Central (FYI: Device Central does not ship separately from CS3. It is part of the overall suite).

Now:

1.) Launch Dreamweaver CS3. (NOTE: currently you can’t start the mobile workflow from within Device Central).

2.) Next thing to do is select the More … folder from the Create New option.

3.) Select HTML from Page Type and then simply publish out using XHTML Mobile 1.0 profile under DocType from the menu (this will just add a header, no biggie).

4.) Start coding your HTML based Mobile Web Site to your hearts content.

Remember, try to keep it a simplistic HTML design (use basic HTML and follow the community .mobi guidelines as best as you can).

Things to keep in mind while you design and develop … you have many constraints in mobile including: screen size, bandwidth, and more!

Learning to code HTML for mobile When developing for mobile, there are some really good websites out there in regards to coding practices for HTML on mobile. There are also some templates over at the .MOBI developer site if you want to go that route. This includes the dot MOBI site, and the dotmobi mobile web developers guide. Also, Community MX also has a decent series on articles on Mobile Web. There are numerous other resources of the subject, just search.

5.) Once the site markup is complete, you’ll of course, want to test it.

Here instead of testing within Web Browser as you typically would in Web based project, you now use the Preview in Browser, and then select Adobe Device Central from the menu.

This changes the workflow from desktop to mobile! … a time saver in that you can test iteratively within Adobe Device Central before you push down to physical devices for testing.

6.) Once in Adobe Device Central, first you’ll want to pick a target device from the Available Devices panel on the left.

You can either choose your target devices manually, or better still build a device profile containing all the devices you plan to support.

Once completed, your content will load and render for the device(s) choosen. Notice that the content type is set to Browser mode in Content type panel.

If you think you’re going to support each and every device out there, you’re overly ambitious. In some respects, it much like the early “Browser Wars” on desktop, but this time around you must deal with different devices, screen sizes, browsers, etc.

Keeping your design simple and “clean” is good approach to making it viewable across the largest collection of mobile and portable devices out there. Again, check out some sample mobi sites, and read the Mobile Web Developers guide for more insight.

Device Browser Support

By the way, you can also get info on your specific target devices by selecting the Web tab and your selected Device Profile.

There you’ll see if a target device will likely have a Mobile Browser installed, addressable browser screen size, as well as supported HTML.

7.) When testing within Adobe Device Central, you’ll note that the tool switches to “Browser” mode. From that mode you have access to a rendering panel where you have access to 2 straight forward properties:

a.) URL

With this first parameter, it will be a local path to your markup. However, despite some earlier claims that this did not support external URL testing during beta phase, it now does in fact support external mobile site testing in production.

Pretty cool … if you want to do some additional testing through Device Central once a site deploys (of course in addition to on-device testing!).

b.) Enable Small Screen Rendering

This particular parameter is useful to see how your content might potentially look within the mobile versions of the Opera Browsers (of which there are several variants: Mini Opera, Mobile Opera, Opera for Consumer Electronics (like Nintendo Wii for instance) ).

8.) If you need to tweak anything you can also jump back into Dreamweaver by selecting File and then Return to Dreamweaver.

9.) Now that you’re done building and testing your market, your next job is to push down to handset(s) and test on device.

Although one would love to skip this step entirely … if you’re doing production work there’s just no substitute for actual physical device testing in mobile development!

10.) Time for deployment … well, we won’t cover that here. In most cases, it’s very much the same as any other website … unless you are going to host from a Mobile Webserver. We’ll cover that in a separate post, though.

Is .MOBI, DOT lame?

One thing in regards to deployment, I did want to at least, mention … the .mobi initiative.

Well, I’m not exactly a proponent of it. A URL is a URL. Sure it’s trendy to have .mobi address, but when it comes down it all it is a name.

Not sure if there are benefits besides the name recognition and brand. I’m not going to say to go one way or another, because it’s not that important.

It does come in handy if you want to avoid user agent detection (which as always isn’t totally foolproof) and just have two versions of a Web Site: mobile and non-mobile … there are also other benefits I won’t go into this post.

A potential con (besides spending extra money on a separate domain!) … the domain extension is 4 chars, rather than say 3 … on mobile that’s one extra char you have to type on your mobile device … worth it? Maybe, if you want to be trendy.

Check out .mobi and see what it has to offer you.

Conclusions:

The important thing is that Mobile Web is here in the US, and that Adobe Creative Suite 3 with Dreamweaver CS3 and Adobe Device Central CS3 makes it faster and easier to design, develop, and test your Mobile Web Sites!

With the iPhone set to deploy soon, I personally believe this device will further help march the average consumer (well, those willing to drop about $600 USD for a “super” i-pod) into using their phones not only for voice and music, but also for data services … such as those provided via Mobile Web!

 Print This Post

This entry was posted on Thursday, June 21st, 2007 at 8:49 pm and is filed under Adobe, Adobe Device Central, Device Central, Flash Lite, Flash Mobile, Mobile Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.