The 8-bit PNG is an ideal format for Flash. Because they are small in file size, your Flash will be lighter and your website will download faster. Lighter file size also means graphics will move smoother and will be easier on the computer. You will get more wow from Flash.

Besides the size and gain in performance, the core feature of the 8-bit, is its alpha transparency. This is the only format that supports this type of transparency while also keeping a small file size. With this support, you can create visuals that would otherwise not be possible with an opaque image. For example, with the 8-bit version, you can have blurred drop-shadows multiplied over top other graphics.

How to Create the 8-bit PNG

Step 1: In Photoshop, make your alpha transparent 24-bit PNG.

Step 2: Bring your 24-bit into Fireworks, and now in the optimize panel set the optimization to 8-bit, with an alpha transparency.

Step 3: Import into Flash.

Things to Watch

Once you have the 8-bit, you should check its resolution. Depending on the version of the creative suite, and the platform you work on, there may be slight shifts in resolution. Check this in Fireworks, because once saved out as 8-bit, you will NOT be able to open the file in Photoshop.

We’re not completely there yet, but we’re close enough for users to spend increasingly more time accessing sites directly from their phones. This audience segment is relatively new, and while they are the same folks that were engaging from the desktop their needs are quite different. Below are some items to consider when designing your sites for mobile devices.

• Interactive cues such as rollovers do not work well on mobile browsers. For example, your users will not even be able to see the effect since it will be covered by their finger when they interactive with your user interface. Allowing your design to rely on the interaction built into the device can keep the experience familiar for the user.
• Design your site to work more like an application or tool than a regular site. Users that visit you from their mobile device are more purposeful about their visit. They are there to accomplish a specific goal and leave.
• Avoid actions that are not user driven such as opening new windows or auto-redirects. These become very annoying when accessing through a mobile device.
• Keep resources to a minimum if you can by only using one CSS file and one JavaScript file associated with your page. Image file also carry a lot of weight so the few the user has to download the better.
• Using Progressive Enhancement is important for your mobile audience. The idea is to provide exactly what they need at the bare minimum, and layout interactive and other presentation elements on top based on device capability.

It had been a while since the Roys Rogers site had been updated so there was quite a bit of research that went into the design and development of the new site. This gave us a chance to get down into the details of the graphic elements.

You can see the new site by visiting www.royrogersrestaurants.com.