Tag Archives: web

BOOK REVIEW: Search Engine Optimization for Flash

seo-flash

Back in the late 1990s and early 2000s, Flash was the red-hot new technology for the Web. Designers were building user-unfriendly splash screens and sometimes building complete websites all in Flash. Eventually a counter-movement developed that steered designers back toward semantic HTML markup, web standards and other lean, user-friendly web design methods.

One of the claims made against 100% Flash websites was that they are not indexed by search engines, since they cannot read text set in Flash. This never made sense to me because my own website at jeremyschultz.com is 100% Flash and it is indexed very well—some of the work in my client portfolio actually scores higher than my clients’ websites or names. One can only conclude that Flash can co-exist with a well-optimized website, and Todd Perkins‘ book Search Engine Optimization for Flash explains why.

Working with Flash

SEO for Flash had a lot of great information I didn’t know about—for example, Adobe has given Google and Yahoo! a special version of Flash Player that allows those search engines to index Flash text and links with no problem. Flash applications and movies can be optimized for search engines just like a regular HTML page—it’s just done differently, and it gets more complicated with JavaScript, AJAX and dynamic content are thrown into the equation. SEO for Flash details all the techniques needed to maximize search engine optimization for a variety of Flash projects. It goes even farther by including a chapter on optimizing Rich Internet Applications (RIAs) built with Flex, an application development program that uses the same ActionScript as Flash. This was an unexpected inclusion.

What brings the book together is the final chapter on optimizing a Flash website. Over 40 pages were devoted to this chapter and it tackles real-world examples, so it may be the most useful segment of the whole book. Some books make the mistake of teaching guidelines and techniques without applying them—which then requires the reader to practice and figure out how it’s done. SEO for Flash gives the reader more insight into this critical step of the process, such as focusing optimization efforts on searchable text, deep links and shared data sources.

Where’s the files?

I really love this book—it debunks several myths, does a great job teaching its readers and focuses on a neglected segment of web design. However, there is one glaring flaw: there are several exercises throughout the book that refer to Flash, HTML and XML files. Unfortunately, these files are quite hard to find. The book does not come with a disk and the online version (available at safari.oreilly.com) does not link to them. The files are actually found on the book’s page in O’Reilly’s online catalog under the term “Examples.” The download is a large ZIP file, which makes me wonder why the publisher doesn’t break the exercises down into smaller packets for easy access and hyperlinking.

Despite this, Search Engine Optimization for Flash is a great resource for Flash designers building projects for the Web. Todd does a fine job explaining all the important techniques for optimizing Flash content for search engines, and given Flash’s evolution from a cool animation tool to a content delivery application I think it’s important for all Flash designers to understand how to maximize search engine optimization for their projects.

Search Engine Optimization for Flash
Todd Perkins
Published by O’Reilly
US$29.99
Rating: 9/10

Adobe Releases InContext Editing 1.5

Adobe recently released Adobe InContext Editing 1.5, a new content management tool that allows clients and other users to edit website content in a browser and without coding skills. Contribute has traditionally been Adobe’s only product to allow this kind of editing capabilities, but Dreamweaver CS4 introduced InContext Editing last year and Adobe is developing it further.

From the press release:

“Adobe InContext Editing 1.5 is a fully hosted online service that extends the productivity and profitability potential of Adobe Creative Suite 4. InContext Editing enables the less technical client to easily update their Web site content from any browser without installing any additional software. In addition, this new hosted service gives professional Web designers the ability to enhance their business with long-term cost effective maintenance programs they can offer their clients, while enabling them to also have more time to spend on what they do best – design work.”

Editable regions are created in Dreamweaver with the same process used to create editable regions for Contribute, so InContext Editing can actually serve as an online substitute for Contribute (though Contribute has more capabilities). InContext Editing is available through a web application similar to what’s found at Acrobat.com, and web designers can set up websites at the InContext Editing Administration Panel found at http://incontextediting.adobe.com/.

Key benefits from the new InContext Editing 1.5 release include:

  • Ability for professional Web designers to assign editable regions to a Web site from directly within a browser;
  • Simplified administration controls for Web designers to easily safeguard design integrity;
  • Web-based editing capabilities for Web designers’ clients to make updates from virtually anywhere.

A free preview of InContext Editing 1.5 is available now at http://incontextediting.adobe.com/. More information about this hosted service can be found at http://www.adobe.com/products/incontextediting/. I’ve requested some extra materials from Adobe and I hope to speak with someone on the development team, so stay tuned for more information.

BOOK REVIEW: Universal Design for Web Applications

univdesign-webapps

Wendy Chisholm is co-editor of the W3C’s Web Content Accessibility Guidelines 1.0; Matt May is an accessibility engineer at Adobe and leader of the Web Standards Project Accessibility Task Force. With credentials like theirs, their book Universal Design for Web Applications has all the makings of an essential resource for web designers and developers who need their web applications to be accessible for everyone—and who doesn’t need their web applications to be accessible?

Lean but worth reading

This book is published by O’Reilly, and it seems to me that O’Reilly puts out books that are either (1) small and compact or (2) large and dense. Universal Design is one of the former, at less than 200 small pages. I actually prefer these to the larger tomes, and in this case it works great because the book is full of useful knowledge. The book’s title suggests it’s about web application design but most of it pertains to HTML/XHTML structure, forms and tables, scripts and some Ajax—all of which are just as pertinent for web designers if not more so. If you build websites for a living—but not necessarily web applications—then Universal Design is just as valuable a book for your bookshelf.

The information in this book is fairly comprehensive but not complete—the sections on structure and accessible code are fairly thorough but I wish there was more written about the process of creating such code, which is in the final chapter and only takes up a small portion of the book. It’s pretty good but experienced web designers who know next to nothing about universal design may need a little more help getting in the habit of building accessible web applications. But with the first couple chapters, which introduce and promote the concept of universal design, those in the field will have a pretty good idea of why it’s important and how to approach it on a basic level.

It’s ironic to me that web designers and developers are often manic about validation—they’ll proudly show their sites are XHTML-compliant and pooh-pooh those that aren’t—but sometimes don’t know much about all the factors involved in universal design, which is probably more important to their clientele. I would recommend any web designer or developer to pick up Universal Design for Web Applications, supplement it with online material from W3C and other accessibility resources, and change the way they construct their web products.

Universal Design for Web Applications
Wendy Chisholm and Matt May
Published by O’Reilly
US$34.99
Rating: 9/10

BOOK REVIEW: Neuro Web Design

Neuro Web Design cover
Neuro Web Design cover

Very few web design books I’ve seen explore the intersection of web design and psychology, which is why Neuro Web Design by Dr. Susan Weinschenk is such an interesting read. The book is not about usability or how people interact with websites; rather, it’s about why people interact with websites in terms of basic rational and emotional impulses. The book’s subtitle, “What makes them click?”, sums it up nicely.

Steeped in research

Neuro Web Design reads a lot like a textbook, citing various psychological studies that support a variety of observations such as:

  • Human beings’ need to reciprocate when they feel indebted,
  • Social validation as pressure to belong,
  • The self-centeredness of individuals,
  • If something seems unavailable, people want it even more,
  • Too many choices actually make things difficult for the chooser, and
  • The unconscious mind processes information as stories and pictures.

There are several more observations, but I won’t reveal all of this book’s insights. Each chapter focuses on one particular observation or rule, cites studies that illustrate how these rules operate in the real world, and then apply the rules to examples of websites. The idea is to control websites’ users’ behavior by taking advantage of the impulses we naturally share. It’s excellent material and I really got involved in reading this book, mostly because I’ve never read anything like it before. Usability books such as Steve Krug’s Don’t Make Me Think come close, but Neuro Web Design is more about natural impulses and less about usability.

Almost a book for website planners

My one criticism of Neuro Web Design is that there isn’t as much attention paid to web design as I would like. The majority of pages are devoted to the psychological material and in some chapters only a couple pages are used to apply the material to the field of web design.

Also, even though “web design” is discussed there is actually very little coverage of real design matters such as layout, color and typography. Neuro Web Design covers matters of web architecture, such as why it’s important to have product reviews (because people will want to do what others do) or try to sell fully loaded products first (because people fear losing anything). Such matters are on a different level of web design, and some web designers actually get little or no say at this stage of development—such things are sometimes decided upon by sales and marketing managers.

Conclusion

Neuro Web Design is an important book for any web designer’s bookshelf, and I think it applies to design in general as well. That’s partly because there is not a lot of web design-specific material in the book, which is a shame—this 150-page book could have really benefitted from 50 more pages about web design. If Dr.Weinschenk were to partner with a A-list web designer and produce a second edition of this book, I think it would be a classic.

Neuro Web Design
Dr. Susan Weinschenk
Published by New Riders
Rating: 9/10
US$24.99

BOOK REVIEW: A Project Guide to UX Design

UX Design Guide cover

A Project Guide to UX Design is a wonderful book about an aspect of web design that is both essential to success but a murky concept to grasp. I’m talking about “user experience design”, UX, which is the discipline of incorporating good usability in websites and web applications so site owners and users get good use out of the product. I was very excited to get my copy because CSS and Photoshop are both important things to know for the web but too many times a website just isn’t user-friendly, and it doesn’t matter how cool a website looks if it doesn’t serve its users.

Process, not design

I was somewhat disappointed by the book because “design” is in the title and I expected to learn some good usability principles, but most of this book covers elements of the web architecture process:

  • Working with clients to handle expectations, set up payment schedules, define development tasks and responsibilities and more
  • Analyzing the current web product and conducting user research and testing, including persona development
  • Web architecture, including site maps, task flows, wireframes and prototypes

I think user experience design should include user interface design, but in this book relatively little attention was given to details of user interface design. What is the best way to design a web form? Should images be used sparingly in this era of broadband? I wish this book spent more than a small fraction of its pages on such design questions, but I also think the book’s content is important material that belongs on a web designer’s bookshelf.

Hard answers for complex questions

Sometimes I was surprised by the strict advice given about topics that really have no right or wrong answers. This was particularly noticeable in Chapter 3, which covers proposals. I’m not sure such a topic belongs in a book about user experience design, but in any case proposals and business negotiations are usually malleable and influenced by the professional and the client. But co-author Russ Unger has firm views about the subject, such as the view that projects should never be paid 50% up front and 50% upon completion. I’ve actually used this arrangement for a variety of projects and it has worked well for my clients and myself. The book is not always unyielding in this way, and I’m glad it provides some quality methods for developing paperwork and proposals. However, some of these methods may be difficult for readers to change in their own situation—or they may not have the authority to change them at all.

A good book nonetheless

I regret that more of the book is not devoted to design, but it’s still a good read. Ironically, I’m particularly impressed by the book design, which is clean and clear. The sections on wireframing and prototyping excite me because they provide a comprehensive guide to building webpage structure on paper before a line of code is written. Again, different methods work for different people and the chapter on wireframing may seem overly complicated to some. I am also happy to see the authors bring in a variety of other people to comment, write sidebars or even entire chapters. The book is more diverse thanks to this variety of viewpoints, and other books I’ve reviewed recently have used a similar tactic.

A Project Guide to UX Design may be better titled A Project Guide to UX Architecture or something similar, because some web designers may be disappointed to learn this book is part freelance business guide, part web architecture best practices. It’s still a fine book that I would recommend for a web designer or developer who wants to improve their web architecture skills.

A Project Guide to UX Design
Russ Unger and Carolyn Chandler
Published by New Riders
US$34.99
Rating: 8/10

Get 15% Off of All Rosenfeld Books

Rosenfeld Media logo

I just finished reading a great book called Web Form Design by Luke Wroblewski—the review will be publishing here soon. But Louis Rosenfeld and his company Rosenfeld Media were also kind enough to grant all Designorati readers a 15% discount to all products sold at their website, RosenfeldMedia.com.

Simply order from the website and enter the code “DESIGNORATI” when placing your order, and you’ll score the 15% savings.

Rosenfeld Media is a relatively new publishing house, and according to their website their first books published just last year—but they have a good stable of authors and highly regarded advisors. Web Form Design is the first Rosenfeld Media book I’ve read, and I was very pleasantly surprised (more on this in the review). I’m looking forward to reviewing more of their offerings, and in the meantime I encourage you to visit them if you work in the fields of user experience design, information architecture or related disciplines!

REVIEW: Fireworks CS4


Fireworks CS4 box

In 2007, when I reviewed the Adobe Creative Suite 3 applications, probably my most controversial was the Fireworks CS3 review, which got decent marks but I questioned its interface design, which had seemed left behind while the other apps got facelifts, and also its function in a suite of products that included Photoshop, Adobe’s main bitmap graphics application.

Even then, the Fireworks team was positioning Fireworks CS3 as a web prototyping tool—and now, with Fireworks CS4, the transition into a niche product has been completed. Fireworks CS4 is designed to be a rapid prototyping tool for creating web designs quickly. It also has some interesting new features that make it a unique application in the Adobe Creative Suite 4.

Interface evolution

I complained about Fireworks CS3’s lack of development of its interface, which had not changed much at all from Fireworks 8, the last version of that product produced by Macromedia. The problem was the Fireworks team did not have the time and resources to make such changes before the product’s launch. I expected Fireworks CS4 to be much more in line with Adobe’s interface for its other applications, and by and large it has delivered. The CS4 interface design has been incorporated into Fireworks CS4 so goodies like tabbed documents, workspace switching, the Application frame and more are available.

However, what I was really hoping for was alignment of Fireworks’ features to look like and act like identical features in other CS4 applications. In this regard Fireworks CS4 still has not changed much from versions 8 or CS3. Fireworks shares many panels with other CS4 apps (Align, Layers, Color) but Fireworks’ panels do not look or behave the same way. The Path panel, comparable to Illustrator’s Pathfinder panel, is actually much more robust than the Pathfinder panel but because it’s so unique it requires study to master it. Likewise, Fireworks CS4’s Color Palette panel is unique in that it has a Mixer and Blender mode that I’ve not seen in any other CS4 application.


Fireworks CS4 Path panel

Have you seen this panel anywhere else in CS4? Neither have I. Fireworks’ Path panel is unique, even when compared to the Pathfinder panel in Illustrator.

Fireworks CS4 sometimes improves on other apps’ features but sometimes it doesn’t. In particular, the method for adding filters to elements has not changed and I would rather work with Photoshop’s method (layer styles) or InDesign’s (using the Effects panel) than the small drop-down menu in Fireworks’ Properties panel. Also, Fireworks CS4 has implemented Smart Guides, which I applaud and work quite well, but it does not look like they will auto-space multiple elements like InDesign CS4’s Smart Guides will do.


Fireworks CS4 Smart Guides

Fireworks’ Smart Guides don’t seem as robust as InDesign CS4’s, but they are a real benefit nonetheless.

I am starting to wonder if Fireworks’ interface should not be changed, because it will throw off current users. The Photoshop team made some radical changes to its application’s interface in CS4, which has bothered a lot of users including myself. I personally think there’s still room for improvement, and it drives me crazy to use a unique set of panels and commands in Fireworks, but maybe the current user base doesn’t agree. Comments on this topic would be most welcome.

Importing Photoshop designs


Fireworks CS4 PSD open

Importing Photoshop files is a snap in Fireworks CS4, but some care is required to make it match what one sees in Photoshop.

One of the new features of Fireworks CS4 is the ability to import complex Photoshop documents. I tested this with a Photoshop comp of a website I will be designing in the next couple months, and it worked pretty well but there were a few problems:

  • Fireworks CS4 interprets all Photoshop layers as having 100% Fill, no matter the actual Fill amount
  • Layers can shift during import; use “Maintain Photoshop Layer Appearance” to resolve this, though this can reduce editability in Fireworks CS4
  • Fireworks CS4 applies fonts with slightly different spacing, causing some overlap with nearby elements
  • A Photoshop layer with a layer mask (a simple gradient mask in this case) was not masked in Fireworks CS4, even though Fireworks can do the same thing with a layer mask

This is when I really wish the Fireworks team would revise the application so it does things the same way as Photoshop and other CS4 applications, because I suspect these little errors occur when Photoshop features have no comparable Fireworks feature (or similar but not quite the same).