insight

5 Reasons to Use Flex When Building a Web Application

by Tom Hudson June 12, 2009

I used to work on the development team at Springbox before moving over to the Rich Media team and working in Adobe Flash. Now that I’ve been introduced to Flex, I see that many of the projects going to the development department could just as easily go to the Rich Media team, possibly even saving time and money for the client while providing a better user experience.

Here are my top 5 reasons to choose Flex for building large data-driven web applications:

1.    Faster development time. When it comes to rapid prototype development, Flex is the perfect choice. Flex has a set of components to easily and quickly build an interface for loading and manipulating data. It can be very useful to test out UI controls and overall layout, as well as verifying data retrieval.      
2.    Faster data retrieval. James Ward created a benchmark-testing tool to show the benchmarks for data loading between different frameworks. Flex AMF3 leads in faster loading times. Try it out yourself!
3.    Richer user experience. With Flex you get all the added benefits of Flash. This is important to remember. Any rich UI design elements, animations, video and audio playback, all come with Flash and therefore come with Flex.
4.    Portability. Let’s say you want to take a Flex application you serve over the web and build an AIR application that users can install on their system. This is a quick and simple process and requires little change to the code.
5.    Open source. Beat that! Flex is open source. This allows a community to get involved in making Flex better for everyone. With a community of Adobe users as large as it is, you don’t need to worry about the framework becoming a tool of the past.  

Designing for Netbooks

by Adrian Taylor June 12, 2009

At this point, I think it's safe to say that netbooks are less of a fad and more of a trend. Netbooks have been enjoying exponential growth in both interest and sales since mid 2007, and show no signs of letting up. By the end of 2008, netbooks were making up 19% of laptop related queries on PriceGrabber, and are expected to sell over 35 million units this year.

So what does all this mean to web designers, content creators and developers? Like most emerging forms of computers and consumer electronics specifications and characteristics are still very much in flux, but there do seem to be a few common traits worth taking into consideration.

Screen size
The majority of netbooks currently on the market feature 9- or 10-inch (diagonal) widescreen format screens that have a resolution around 1024x600px with a web safe area around 1000x420px. Currently the majority of designers are targeting a minimum screen size of 1024x768px, which has a safe area of around 1000x590px. This not only reduces usable vertical space by 170px, it also changes the proportions of the display making them wider and narrower. In addition these screens are packing more pixels into a smaller physical package, making everything appear smaller.

So what can you do? First off, think about a layout that maximizes horizontal space like left-hand navigation controls instead of tabs, minimal or no site banner across the top of your page, and if you need to display ads look for vertical formats. You may also want to think about larger type, font size controls, or at least developing in a way that allows users to crank up font sizes on their end without completely destroying the layout.

Tiny trackpads
One of the main advantages to netbooks is their compact size which doesn’t leave much room for a trackpad. Most netbooks only have a tiny trackpad with left and right mouse buttons on the side.

So what can you do? Try to keep your navigation within a localized area to reduce mouse movement, or consider developing navigation system that takes advantage of the keyboard (for an example, check out Dropular).  

Processor and RAM
No one would argue that netbooks are the powerhouses of the computing world but they usually have enough to get the job done online. Most netbooks have around a 1.6ghz processor and about a 1gb of RAM, which is easily enough to support a browser and most plug-ins like flash and quicktime. That being said, they are only working with about half the power of your average laptop.

So what can you do? Test your site to make sure they don't tax the processor or require too much RAM.

Wrapping it all up
While netbooks currently only represent a small fraction of internet users, these devices seem to be setting a trend in terms of both form factor and internet usage. As Wi-Fi and cellular data become more and more ubiquitous and people move more and more of their digital lives online, we can expect to see the demand for portable lifestyle computers continue to rise.

Enter the Decision Engine Wilderness: A Week with Bing

by Colin Walsh June 12, 2009

Microsoft’s new search engine Bing is garnering attention these days, backed by news that it surpassed Yahoo as the second-highest ranked search site for a day. This development prompted critiques and sound bites from notables such as Yahoo’s CEO and Google’s CEO. Naturally, I figured I’d get in on the action, too,  and test drive Bing for a week.

If you haven’t tried it or seen one of the information-overload TV spots Microsoft is airing to raise awareness, Bing is being marketed as a decision engine, not a your run-of-the-mill search engine. What’s the difference, you ask? This marketing video outlines the finer points, complete with enthusiastic voiceover.

And so armed with the information above and looking at a few blog posts, I entered the world of Bing for one week. Here’s what I found:

The look of Bing
The first thing you notice about Bing when you land on its main page is the image of the day, a kind of new-agey, glorified stock photo. You can mouse-over areas of the image for interesting, time-wasting facts. Not sure who wins out here: Bing’s main page photo or Google’s logo swap-outs.

The main page also features an explore tab that lets you drill down to information. Bing’s initial focus is on shopping, planning a trip, researching health conditions or finding a local business. As Bing expands its expertise, perhaps a more robust interface will be developed.

Search results
Bing organizes its search results with a sponsored URL first, with the site’s deep links exposed for quick access. Subsequent hits are sub-divided with headers, which appear to be based on related searches, a definite plus over Google’s long lists of pages. Bing also provides you with options to refine your search. The left-hand column offers related searches and filtering criteria to help you get closer to your destination.

New creature comforts
Bing’s creature comforts are top highlights for me. When searching for videos, mouse over a thumbnail for a video preview, complete with audio. A seven-day price predictor comes in handy when booking airfare, along with Bing’s filtering tool that helps you comparison shop. The image search process greatly benefits from something Microsoft is calling infinite scroll — no more paging through pages of images, just scroll away to your heart’s content.

The verdict
While I’m not willing to part with my Google searches and the comforts of my iGoogle page just yet, I am interested in seeing the upgrades Microsoft has planned for Bing going forward. I'm not sure if Microsoft is refocusing its efforts in innovation — Bing is a good first step.

Responsible Flash Development: File Size

by Matt Skoog June 12, 2009

In this installment of Responsible Flash Development I will give you some tips to keep your overall file size down in your Flash projects. File size is an important part of Flash development and, if left unaddressed, can quickly get out of hand. But, before we get into file size optimization in Flash, we’ll begin a step before: prepping assets outside of Flash.

Asset preparation
Asset preparation is a major step towards minimizing your Flash file size. First, take a look at the composition that you need to build in Flash. See what items can be a vector graphic versus what has to be imported into Flash as a bitmap graphic. When it comes to bitmap graphics, I could write an entire article over compression techniques. Take a look at these articles for a little more insight on graphic file types and compression.

Nine times out of ten you will save file size by using a vector asset over a bitmap. This depends on the complexity of the vector. If you’re not sure about what type of graphic to use for a particular shape/asset, import both of them into a new Flash file and place them on the stage. Select the option to “Generate a Size Report” in the publish settings and publish the movie. The asset with the smallest file size is your winner!

Once you have imported and/or created all of your assets in Flash, you can do additional optimization using tools inside the Flash IDE. Each bitmap in the Library can have its own additional compression settings. When doing this, you need to think about the importance of your bitmap. For example, if you have a bitmap that’s not going to have much face time in your project, you may get away with a little more compression on it. Vector assets can be optimized as well, by adjusting their curves and points. A word of caution, this optimization can severely alter the shape of your vector, so use these options sparingly.

Coding techniques
Get creative with your code. Let’s say that there are 5 balloons in the composition and all 5 are different colors. Instead of importing 5 different assets, just import one. Then build a class that allows you to change the base color of the balloon asset. You’ve now accounted for 5 balloons at 1/5 of the file size!

Fonts
Fonts can make or break your file size and are often overlooked. Take note of the fonts used in the composition. If you are using multiple fonts that will be dynamically updated, you may want to consider using fewer fonts. If a font is dynamic, you will have to embed the fonts. Basic font embedding can range anywhere from 5-30k in size. Lets say that you have 3 dynamic fonts that are around 20k, if you choose to use all 3, you’re already at 60k in file size just for fonts! Sometimes, this can’t be avoided so you’ll have to make up for that size in different parts of your project.

Tween types
Now that you have all of your assets completely optimized and your fonts squared away, it’s time to animate! If you prefer to use third-party tween libraries to animate in Flash, choose your library wisely. Some libraries have more capabilities, but are a bit heavier (Tweener). Others are lighter, but have a less capabilities (TweenLite). If I’m building a site, mini-site, or feature, I may use a library like Tweener. If I’m building banner I’ll use a library like TweenLite.

Use of these tips can greatly affect the size and performance of your project. Try to keep them in mind the next time you’re working on a Flash project and you’ll see that your end result will be a faster, slimmed-down Flash application.

Flying Advice Up the Flagpole: UI, UX & AA.com

by Hawk Thompson June 1, 2009

Let me just start by saying I admire Dustin Curtis's courage. Anyone willing to speak truth to power about a massive fail like AA.com is aces in my book.

But the medium is the message online, and imho there's just one problem with an otherwise spot-on critique. With all due respect, the choice of color (#cccccc) for inline links baffles me. Good user experience relies on an intuitive user interface. When you have to squint to read a hyperlink, UX suffers a little as a result.

Full disclosure: I don't specialize in UI or UX. But I do make the interactive content. And I value the opinions of my peers. Dustin, if you're reading this, I hope you feel the same way. Also, thanks for doing what you did. I hope your effort wins you a well-deserved new client.

The way we see it, people who share insight with each other innovate, grow and succeed together.

Subscribe

Log in

The opinions contained in these pages do not necessarily reflect those of Springbox or its parent company, DG FastChannel.