Tag Archives: design

Adobe Releases Dreamweaver, Edge Updates for Web Developers

Adobe today announced some new features for Dreamweaver CS6, Edge Animate and Edge Code preview, which are available today for Creative Cloud subscribers. Several of the new features are integrations of technology and services that we’ve seen before, such as web fonts via Typekit, the type service Adobe bought late in 2011.

The other major news is the first public preview of Adobe Edge Reflow, a tool for building responsive website layouts. “Responsive” layouts flex and change depending on what device you are on, ensuring a good user experience across personal computers, mobile devices and tablets.

I’ve seen the product before today in demos and it is geared toward web designers more than developers—the user interface is polished and designed to build the code. There is no expansive code view, although you can read the generated CSS in some places. That code can then be exported and used in programs like Dreamweaver or Edge Code.

The release is a public preview and Adobe welcomes feedback at https://github.com/edge-reflow/issues.

The update to Adobe Edge Code includes a Live Development preview which pushes changes to a web browser immediately for testing. I like this new feature quite a bit. There’s also now a “Quick Edit” option to edit code in context rather than moving to the original file. Code hinting for HTML and CSS, a longtime feature in Dreamweaver and other mature code editors, is now in Edge Code.

Adobe Edge Animate’s new features include support for some CSS3 technology including gradients (radial and linear) and CSS filters. The addition of CSS filters is particularly interesting because they promise amazing control over HTML elements, including the ability to apply drop shadow, brightness/contrast changes, blurring, color saturation and other functions you normally associate with Photoshop. The spec for CSS filters was created by Adobe, so it makes sense they would pursue this. Unfortunately, CSS filters are supported only by Webkit browsers at this time, excluding Internet Explorer and Gecko browsers such as Firefox—but I bet they will build in support soon.

The other major enhancement added to Edge Animate is a user interface for previewing web fonts from Adobe’s Edge Web Fonts service. This free service is powered by Typekit. This is a nice improvement for web designers but most web developers have no trouble integrating Typekit fonts by adding the code snippets and setting up kits on the Typekit website. This kind of change, like several others in today’s announcements, serve creative professionals more than web developers.

The Edge Web Fonts interface is also new in an update to Dreamweaver CS6 going live today. The Dreamweaver update does have a few new features for web developers, including the option to apply fluid grid layouts to elements by class as well as ID attributes. The interface for working with fluid grid layouts has also been improved. These are the kinds of things that can really make a developer’s life easier.

There aren’t many new updates today, but the Creative Cloud paradigm drives more updates than we’re used to but with fewer features. Most new features I’ve seen today are improvements and they fit with Adobe’s goal of providing tools for the latest web technology (web fonts, responsive web design) for creative professionals. Web developers and programmers will probably be less excited by today’s announcements, but there’s some goodies for them too.

BOOK REVIEW: Node Up and Running

Front-end web developers everywhere know JavaScript and use it for everything from DOM manipulation to Ajax applications. That’s why I am really excited that Node.js exists—JavaScript running on the server side, running applications from the server rather than the browser. The exciting aspect of it is it opens up server-side programming to front-end developers who until now have focused on the browser.

Node Up and Running by Tom Hughes-Croucher and Mike Wilson provides a primer on Node that I really enjoyed. I have not worked with Node before but I’m experienced with JavaScript—in other words, I’m the ideal reader for an introductory book such as this. The most useful chapter for me was actually the first, which introduces Node and—most importantly—explains the scalability of Node and its ability to handle large applications. I wasn’t sure it was suitable for these things compared to Java or other server-side languages. I wish the book dived deeper into these questions, but the chapter was enough to make me feel comfortable using Node in these situations.

The rest of the book covers basic Node concepts like loops, error handling, APIs and data handling. All the basics you will need are here, but there’s more to Node and I will be looking forward to a more extensive Node “cookbook” from O’Reilly in the future. (Tom Hughes-Croucher said on Amazon.com that it is in the works.) Node Up and Running is short so you don’t get into all the details, but I was impressed it packed in as much useful details as it did. I also liked that the very first project code in the second chapter consisted of a chat server and a Twitter service—both look impressive and show off Node functionality.

One complaint about Node Up and Running is that the book covers a quickly-changing framework and some parts of the book are outdated at this point. Another criticism is that the book is too short—it’s not even 200 pages, so it’s really just an introduction to Node. But as an introduction it serves its purpose very well and entices front-end developers with some great server-side code that can be built with their JavaScript skills. It’s an exciting time to be a JavaScript developer!

Node Up and Running
Tom Hughes-Croucher and Mike Wilson
Published by O’Reilly
US $34.99
Rating: 9/10
Buy at Amazon.com

BOOK REVIEW: Design By Nature Teaches The Designs Around Us

Design by Nature cover

Most designers today create their work on a computer, but the best designs seem to have a timeless quality that appears again and again. These timeless designs often have roots in nature. Our notions of space, color and juxtaposition are informed by the world we live in and what we see around us since birth. However, designers staring at a screen all day often forget this natural inspiration.

Maggie Macnab has written a revealing book, Design By Nature: Using Universal Forms and Principles in Design, that outlines the natural principles at work around us helps us apply them to design problems in our daily work. I really appreciate a book like this in the workplace because I’ve always found nature to be a rich source of inspiration in many different ways. Maggie takes very basic concepts—pattern, shape, color, juxtaposition, symbolism and many more—and illustrates them at work in our natural world and also in our human-made, designed world. It’s very intriguing and “rings true” with what I feel in my own work.

Design By Nature is well-written and is structured appropriately—I never felt lost or thought I needed to jump ahead to get a critical concept. There are also some small “Putting It Into Practice” exercises sprinkled throughout the book that aren’t too difficult or require technical skills but make you think about your process and get in touch with the designs inherent in nature.

I also enjoyed the guest designer sections that focused on a designer’s work. A lot of them are written by the designer and talk about their process, past clients and projects, and their thoughts on design. I wish they focused more on the “design by nature” theme because many of them read like typical manifestos on design. The best ones focus on a particular project.

I also want to point out something which bothered me while reading Design By Nature: Maggie uses a lot of her own work and her students’ work to support her principles and ideas in the book. That is okay but I would prefer to see a diverse range of designs used to support the book’s teachings, and from a variety of artists and designers. The range of work in Design By Nature is sometimes just too inclusive of the author’s own inner circle.

Despite this, I really enjoyed Design By Nature and I would recommend it for many graphic artists and designers, especially those with a fine arts or an environmental arts background. Their work is probably already based nature even if they don’t realize it, and understanding the natural process of design is vital to successful creations.

Design by Nature: Using Universal Forms and Principles in Design
Maggie Macnab
Published by New Riders
US $44.99
Rating: 9/10
Buy from Amazon.com

BOOK REVIEW: Abduzeedo Inspiration Guide for Designers

Abduzeedo Guide cover

The Internet is an amazing thing—there’s so much inspiration out there now for designers to reflect upon. Designers and illustrators from across the world can show their work to each other. And since it’s easy for anyone to write and publish online, there are many tutorials and articles out there from the best in the field. I’m sure many old-school designers who made their careers without the Internet wonder how much easier it would have been if they had had it.

The Internet is a significant factor in the success—and failure—of the Abduzeedo Inspiration Guide for Designers. The book was written by Fábio Sasso, founder of the design blog Abduzeedo.com, and several other illustrators. All of these artists have their own blogs and websites, full of illustrations and articles, and they are prolific online publishers. The book design is very nice—clean, colorful and easy to read. I enjoyed reading it very much.

However, the Inspiration Guide might be the first book I’ve read where some of the content was already familiar to me—because I had seen it on the Internet. In particular, Alex Varanese’s “Alt 1977″ series of illustrations was popular on Twitter and blogs not too long ago. I enjoyed seeing his work then and I still do, but it wasn’t new anymore. The Internet makes it so easy to find content that a book based on online content is at a disadvantage.

The Inspiration Guide is more than just images though, which is its redeeming grace. Many illustrators are interviewed in the Guide, and they are good reading for artists who are early in their careers. (I think they are good for experienced artists too, but they tend to focus on young careers because the artists are relatively young.) There are several tutorials available as well that combine Photoshop and digital tools with real artistry, which I really like. They were fun to do, not too hard or easy, and the results were excellent.

At $40, the Inspiration Guide might be a hard sell for illustrators. (NOTE: Amazon has it listed for $26.) After all, why buy the book when you can see the work online? But I think it’s a good book and it does have some fresh content that Abduzeedo regulars might not know already.

Abduzeedo Inspiration Guide for Designers
Fábio Sasso and others
Published by New Riders
US $39.99
Rating: 8/10

BOOK REVIEW: The Book of CSS3

Book of CSS3

HTML5 is probably the most desirable acronym to have in a web designer’s portfolio today, but I think the third iteration of Cascading Style Sheets (CSS3) has greater impact on a designer’s bottom line and clients’ satisfaction. This is because CSS3 can finally deliver the slick user interfaces that used to be only possible with Photoshop and a lot of hacking for Internet Explorer. Browsers are advanced enough today to apply CSS3 and make websites everywhere look extra sharp.

The Book of CSS3 by Peter Gasston covers the full gamut of CSS3 rules and features, and I think it’s a useful book for CSS coders of all skill levels. I use a lot of CSS3 to control backgrounds and box elements, but there are entire sections of the CSS3 spec that I never really appreciated until I read this book. Gradients, color, opacity, transitions and animations are all prime examples. Another is media queries, which Adobe has made easier to implement with recent versions of Dreamweaver.

The book is clear, well-written and documented with good examples. There are a good deal of images to illustrate CSS3 in action, but unfortunately the book is in black and white which sometimes makes the images less useful. A more useful part of the book is the browser chart at the end of each section and in Appendix A, detailing which browsers support the demonstrated CSS3 features. Unfortunately, Internet Explorer still lags behind other browsers and doesn’t support a lot of CSS3 features (though I think this will change with the next version of IE). There are a few CSS3 features that are so experimental that most if not all browsers fail to execute them, including flexible box and template layout structures.

CSS3 will most likely change in the near future. Technology is evolving at a more rapid pace; the Firefox browser, for example, will be updated on a faster schedule and we’ll see more versions (and more CSS3 support) quicker. But I think the basic capabilities of CSS3 are set and web designers need to look at CSS3 now if they want to be progressive and offer clients the best technology today. The Book of CSS3 is a good place to learn the full range of CSS3 features.

The Book of CSS3
Peter Gasston
Published by No Starch Press
US $34.95
Rating: 9/10

buy from amazon

BOOK REVIEW: Eloquent JavaScript Simplifies Scripting For The Web

Marijn Haverbeke’s Eloquent JavaScript: A Modern Introduction to Programming is really about the fundamentals of coding clean JavaScript for websites. In any professional’s career, “fundamentals” are taught early on but can be forgotten or pushed aside in favor of getting projects out the door when deadlines are tight or in favor of new training that do things differently. In any case, fundamentals are usually the foundation of good programming and it’s beneficial to revisit them from time to time.

Eloquent JavaScript does a good job of detailing the fundamentals and explaining concepts like the stack and the environment. This attention to detail is what sets the book apart from other JavaScript books. However, Eloquent JavaScript is a comprehensive JavaScript guide so many features and techniques aren’t discussed. Another downside is the lack of tutorials or step-by-step examples: since the focus is on basic concepts, Marijn only needs basic snippets of code to illustrate his examples. There are a few larger projects used to demonstrate things over the course of a chapter or two, but they’re not really laid out as tutorials.

There are other aspects of JavaScript that aren’t discussed in Eloquent JavaScript, the most glaring of which might be libraries like jQuery. jQuery, Dojo and other JavaScript libraries are commonly used to make coding JavaScript easier, but Eloquent JavaScript mentions them on one page in passing. Again, there are many books out there that cover jQuery—and far more resources and code examples online—but this book is all about understanding JavaScript and knowing how to write elegant code from scratch.

Eloquent JavaScript is a very specialized book for programming purists and web developers who want to write the best code possible. Many developers are happy writing code that simply works, and this book may not be for them—a larger resource like O’Reilly’s JavaScript: The Definitive Guide or a book on jQuery might be a better fit for them. But if you want to grasp all the basic concepts behind JavaScript and write more eloquent code, try Eloquent JavaScript.

Eloquent JavaScript: A Modern Introduction to Programming
Marijn Haverbeke
Published by No Starch Press
US $29.95
Rating: 8/10

buy from amazon

BOOK REVIEW: Talent Is Not Enough

I think sometimes the designers who stand out in the marketplace, land the most prestigious clients and make the most money aren’t those who have the most brilliant talent. Instead, they’re the ones who can build a brand and a business around their work and handle it professionally. Creative people aren’t always the best businesspeople and so many can struggle with the business side of graphic design.

I used books like the Graphic Artists Guild Handbook when I started my design business, but Shel Perkins’ Talent Is Not Enough: Business Secrets for Designers might be a better book than any I had. It’s almost 450 pages long and very focused on the business of design, and the advice Shel gives is solid. I think it can really set a designer up for business success.

There is some breadth to the topics covered in Talent Is Not Enough: marketing, human resources, cash flow, office management and intellectual property are all covered in the book. Many are essential topics, though some business types—such as sole proprietor—will find some chapters not very useful because they don’t apply to them. I’ll also say that some topics—marketing in particular comes to mind—are not fully covered in this book and should be supplemented with other books and information.

The other criticism I have of the book is it glosses over what I think are the two questions always asked by new creative professionals: “How much should I charge?” and “How should I write my contracts?” The chapter on pricing models is short and doesn’t give any dollar amounts, which is hard to quantify for everyone but help new designers the most. The aforementioned Graphic Artists Guild Handbook did share hourly rates, and it really helped me start my business. It also shared some boilerplate copy for proposals and contracts. Talent Is Not Enough does share contract boilerplate as well, and the copy is well-written, but it’s not clearly marked in the book. Placing the legal documents in an addendum might be helpful in a third edition.

Despite these quibbles, Talent Is Not Enough is a very fine business resource and updated for our times with the second edition. I have over ten years in the industry and I learned new things from this book. A designer just starting out will gain a good business foundation by adding this to his or her other repertoire of books on business development.

Talent Is Not Enough: Business Secrets for Designers
Shel Perkins
Published by New Riders
US $39.99
Rating: 9/10

Sometimes It Takes A Detective To Solve CSS

css-detective

It’s probably safe to say that the process of developing a website requires debugging issues that just don’t make sense. Floats don’t clear. Web fonts don’t display. Internet Explorer 6 doesn’t do anything right (at least it’s on its way out). Solutions are sometimes easy to find and apply, but many times a bug doesn’t seem to have a logical solution!

This is why I like the structure and premise of The CSS Detective Guide by Denise R. Jacobs. Bugs can be mysterious and the codebase can look like a crime scene, so why not frame the process with that in mind? The book devotes a couple chapters to general HTML and CSS knowledge and two more to bugs, debugging techniques and things to look for when debugging CSS.

The other six chapters in the book are case studies with real-world code and bugs that Denise walks through and solves with the reader. This is the kind of book that would have benefitted greatly by providing live code that the reader could load on their computer, test and revise, but even though the book has a companion website (www.cssdetectiveguide.com) there is no code to download and work with. It is mentioned that files and live versions of the cases are “coming soon,” but the book was published in April.

HTML and CSS code is published within the book so readers have at least that to go on when learning how to debug the CSS. I thought the case studies were quite good, with several bugs in each—some specific to Internet Explorer but many others that apply to all browsers, or to other browsers like Firefox.

I think many CSS books on the market are more high-level or experimental (Dan Cederholm’s books come to mind) and don’t focus on the nitty-gritty details of CSS bug fixes. Dan’s books are exceptional resources for CSS pros but The CSS Detective Guide is written for those learning CSS or those wanting to improve their debugging techniques. It’s also fun to read thanks to the mystery/detective/crime story angle, which I think is a nice touch in a technical book.

The CSS Detective Guide
Denise R. Jacobs
Published by New Riders
Rating: 9/10

Dreamweaver CS5 Review

dw_box

This review supplements Dreamweaver CS5 First Impressions, which I wrote just after CS5 was announced. That article explains most of the new features in Dreamweaver CS5 like other reviews, but the goal of this article is to share my experience in the field with Dreamweaver CS5 and to tell what works and what doesn’t work for me.

What CSS can do for you

Dreamweaver CS5 got quite a few new features focused on making CSS easier to use, and they have changed some aspects of the way I work with CSS. I still do a lot of hand-coding and don’t care to use the CSS Styles panel and its new features. I do like the Inspect button, which will put the Design view into Live View and color various properties of the CSS elements such as margins and padding. You can turn CSS rules on or off as well in the CSS Styles panel, which helps you see how the webpage is affected by specific rules and properties.

I love the Inspect feature for specific situations but most of the time my troubles with CSS happen with properties that aren’t easily seen, such as position, display and float/clear. I try to do a lot of my CSS positioning without absolute positioning when I can avoid it, and CSS1 and CSS2 tricks like floats aren’t really designed for the task. I wish Dreamweaver could solve these situations, but Inspect doesn’t provide easy solutions.

Handling CMS-generated websites

In my “First Impressions” article I mentioned Dreamweaver CS5 handles dynamic websites generated by PHP-based content management systems (CMS). At the time I couldn’t figure out how to get Dreamweaver to work with a website of mine that uses ExpressionEngine, and a little research suggests Dreamweaver CS5 actually doesn’t work with ExpressionEngine. Joomla!, Drupal and WordPress are the three CMS’s that Dreamweaver CS5 will handle dynamically—and there’s no support for the ASP-based CMS products out there, though there aren’t many.

Dreamweaver CS5 has taken an important first step toward working with dynamic websites but there’s a lot more to be done. Other dynamic systems, such as e-commerce products which are coming up more and more in my work, aren’t covered by Dreamweaver and I don’t do anything more than the design and production in that application. If you run Joomla!, Drupal or WordPress often, then I’d purchase Dreamweaver CS5 since it works beautifully with those products. Other CMS’s—like ExpressionEngine—don’t gain anything new.

The Inspect button is my favorite new feature, but the redesigned Site Definition dialog box is a close second. It makes creating new sites and handling multiple remote servers and environments much easier, though I think this says more about the weaknesses of the previous interface than the strengths of the new one in Dreamweaver CS5. Improvements like these are doubly important because interfaces like the Site Definition dialog box are used very often and if they aren’t well-designed they really grate on you. The other great new interface improvement from Adobe recently is the new File Import interface in Photoshop Lightroom 3, and that one proves that a lot of time and effort can be saved with a flexible and simple interface.

About the HTML5 Pack

Adobe released a Dreamweaver CS5 HTML5 extension a couple weeks ago that adds some HTML5-specific elements to Dreamweaver CS5. HTML5 has become a buzzword now that Apple is throwing it around as a replacement for Adobe Flash (which it really isn’t, at least not yet). I’m sure many web designers will switch from XHTML to HTML5 and Adobe has tried to embrace HTML5 even with the uncertainty around web video and whether it threatens its Flash products.

The HTML5 Pack should be a no-brainer for designers wanting to learn HTML5. The pack includes a couple HTML5 starter layouts accessible from the New Document window, but these layouts are fairly simple and don’t have many HTML5 elements other than the semantic additions such as

and

DVD REVIEW: “For A Beautiful Web” DVD Series

andyclarkedvds

The three-disk “For A Beautiful Web” DVD series is a very nice resource for web designers, with roughly two hours per disk on three important topics: CSS, microformats and web accessibility. Presenter Andy Clarke, a web designer based in the UK, knows his stuff and presents things clearly and also with a bit of his own opinion on how CSS and other design elements can improve one’s workflow, which for me was a welcome addition to what could otherwise have been a merely informational resource.

My favorite disk was Designing with CSS: I know CSS pretty well but Andy suggested a different approach to conceptual design and advocated building mock-ups with CSS-based layouts instead of the usual graphical design that others (including myself) produce in Photoshop or something similar. This was a new idea to me and one that I want to implement this year for my web design business. The DVD was not just monologue on workflow but also a survey of basic and advanced CSS techniques and applications. The working webpage he used to illustrate his points was well-designed, well-executed and illustrative.

Designing Web Accessibility was also very useful. Designing with Microformats was interesting but I got the impression that microformats are not yet widely used. This was the disk I was most interested in since I had heard very little about microformats previously, but after viewing the disk I’m not sure if I have a very good reason to look into microformats further.

I should also note Andy Clarke’s presentation. He is definitely a very skilled web designer with strong CSS chops, and his presentation skills are good—I was able to follow the DVDs easily. But I thought Andy was too methodical, slow and a little monotonous in his delivery. Sometimes there were long pauses in the monologue that broke up the flow. I think if Andy could bump up his energy level and fluidity of his speaking it would help make the series more engaging and fun to learn with.

“For A Beautiful Web” DVD Series:
Designing Web Accessibility
Designing with CSS
Designing with Microformats

Presented by Andy Clarke
Published by New Riders
US$39.99 (Designing with CSS US$34.99)
Rating: 8/10