Twitter launched a radically new layout to users Thursday. The first to see the new look were mobile users through the Twitter iPhone and Android apps. After updating those apps, the new look of Twitter became active on those users’ computers as well. All other users will begin to see the updated Twitter look over the course of several months.

The results are mixed. The new look and interface is great for mobile users and the sleek interface is cool. Features on the computer version mix the super-sleek interface with a few bonuses but also a few misses. Pages have more pop but still have the look and feel you would associate with Twitter. The site also rolled out branding pages for companies that have a nice look but could change the organic feel that has brought people to Twitter.

Visually, Twitter has reinvented itself consistently across various platforms. Aside from slight, device-specific tweaks the interface looks the same on the website, on a tablet and on a smartphone (no update for the Mac app as of yet). The biggest plus for designers and other visual professionals is an enhanced use of images to push you toward content. Twitter is starting to define itself as more than just a 140-character platform.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Web Design

The Twitter update adds a variety of new features, including better search functionality, keyboard shortcuts and better tools for social interaction.

The worst part? Twitter flipped the location of key items on its homepage, moving the timeline to the right and all of the extras to the left. I have clicked the wrong item on multiple occasions.

Home, Connect and Profile

These three “new” features speak for themselves. Home is a user’s landing page, and clicking the connect symbol (@) will show a user’s timeline. The thing that looks the most different is the profile page, which makes the account holder a star on his or her page. Profile information is in a larger box that stretches across the page with a much larger icon. Custom backgrounds are still very visible (and don’t have to be reset with the update).

Twitter did not change the font, size or color usage in tweets other than to make link text gray rather than black. So the timeline looks pretty much the same. It’s all the stuff around it that has an added pop (in part because of the lack of visual change to the basic part of the site).

Designers who are marketing themselves or their work could benefit from the use of larger images throughout the site design. The list of recent items has images that are also a bit larger as well. Images and videos now appear in each user’s timeline and are viewable without a link to another site.

Discover

The new “Discover” feature is a mashup between hashtags and trending topics. Click on the icon and get immediate access to things generating buzz. Each topic has a link to pages for that topic or hashtag.

This is one of those fun little features that adds visual punch to trending items. The photos and text are much larger than in the general timeline and really looks newsy in the mobile application. The downside is that it adds an almost false sense of credibility to Twitter as a news organization because the feature so closely resembles some news websites.

Hello, Shortcut Keys!

Twitter developers built 21 keyboard shortcut combinations so you can get away from the mouse. Want to send a Tweet? Hit “n” and the dialogue box pops right up.

The keys are something I have been waiting for. Unfortunately, they don’t work quite like shortcuts in other applications. Because the web browser already uses ctrl-letter combinations, Twitter uses single-letter keys. I must admit, it has made me a little nervous in the early stages. Am I typing random letters somewhere?

But it seems to work. Even the “gh” combination to get to the home screen sends me there without stray letters or Tweets getting sent out. The shortcuts don’t work when the Tweet window is active though, which prevents inadvertent tweeting.

But is it too late? After clicking through Twitter all this time, will users take to having keyboard shortcuts? It sounds like a great concept, but I am not convinced my habits will change. Still, it’s nice that they went the extra mile and included them for users who prefer to use the app this way.

Mobile Design

Twitter’s biggest improvement affects mobile users. I left Twitter for third-party applications on my smartphone a long time ago. Twitter’s app could not compete with the speed and simplicity of others that were free to download and use. Maybe that is why Twitter is offering the new-look site to its mobile users first, to get us to come back (it worked for me.)

It more than met my expectations. The feed is easy to navigate with home, connect, discover and me buttons that are anchored at the bottom of the screen (these are anchored on the left for tablet users). The “Discover” feature is visually appealing with large images and text and might be my new go-to source for information on the go. It is tailored to the mobile user as well and, according to Twitter, will adapt to your preferences with use. It uses your interests and location (if allowed) to showcase relevant trending topics.

The smartphone app looks and works like Twiter.com on a computer. It is easy to follow users without having to leave the item you are viewing. The tablet application has the same feel as well, with a popup window to view links without navigating away from the timeline.

Brand Pages

There goes the grassroots feeling that has made Twitter the anti-Facebook. With the update, Twitter introduced brand pages for companies. (Facebook and Google+ already offer something similar.)

It is a great concept for your small-time design shop or freelance business. Registering through Twitter advertising allows companies to have a distinct layout with a banner featuring a company logo rather than just the Twitter user icon, and other extras such as logos, taglines, videos and quick access to promoted Tweets, according to the Twitter Advertising Blog. In addition, Twitter promises that no other companies’ advertisements will appear on your page.

The new features will be free to all users, according to the Twitter Advertising Blog, but are being tested with only a handful of companies at this time. Most are household names – McDonald’s, Coca-Cola, Nike, Verizon Wireless and a page for the latest movie in the Mission: Impossible franchise. The new pages are only viewable on the new Twitter interface and there is no definite timeline for when these pages will be available to everyone; Twitter says it will be rolled out “in the coming months.”

These pages look good. As soon as you hit the page for @nikebasketball, the owner of the site is obvious. The brand pages have a visual definition that has been lacking on Twitter until now.

This feature could be a great asset to designers trying to showcase certain work and who are working with a limited advertising budget. Since Twitter does not charge to host a site, there is no upfront cost. Just visit Twitter.com and complete the business registration, upload your information and start tweeting.

The Lowdown from a Design Perspective

Historically, Twitter’s UI branding has been a bit all over the place. The iPhone, iPad, Android, web and Mac versions each had their own visual presentation style. This overhaul is a clear attempt to tie it all together and you can expect to see similar changes rolled out over the remaining areas sometime soon. Items like the new Home, Connect and Discover symbols give the official Twitter brand a much needed distinct style that helps it stand out from the third party Twitter universe (at least for now).

There are some nice usability tweaks as well in the web interface. For instance, clicking on a tweet expands it to show relevant information like retweets and other pieces of the conversation. This strategic placing of key information helps keep the interface clean and simple. This type of functionality also gives the web app a richness that makes it feel more like a native app, a clear trend in web app design that has really taken off lately.

Another interesting design observation: With each new iteration Twitter’s design focus on pure text tweets has faded. The latest round really pushes the new Twitter image-sharing service. Features like the new media grid shown below and the ability to embed videos into business pages hint that the days of Twitter being the simplest social media site around are over.

This represents an interesting change in identity that some users will hate initially, but I suspect we’ll all adjust before no time. However, in the long run it raises questions about just who Twitter wants to be. Let’s hope they can keep their core focus while adding helpful features and avoiding bloat.

Conclusion

Twitter has added enough extras and visual interest to its homepage that will allow it to compete with some of the other applications out there such as Hoot Suite and Tweet Deck. The look of the interface is much more visual with variance in text and photo sizes.

Although it has some faults, the new design works because it is simple and organized. Twitter may win back some users who have not been using their mobile applications with the streamlined site across platforms. Branding is a bonus for companies and looks really nice, but I worry all the corporate pages will just junk up my timeline with unwanted ads.

What do you think of the new Twitter design and functionality changes? What do you love? What do you hate? We want to know!

Most web designers these days know at least a little HTML and CSS, giving them the ability to bring their designs to the web. Advanced functionality, for the most part though, is handled by programming languages, which have a much higher barrier to entry. This leaves countless designers intimidated while wishing they had a firmer grasp of the most essential of these: JavaScript.

Do you wish you could finally scratch “learn JavaScript” off of your todo list? Does a hefty learning curve keep you from taking the plunge? Maybe you just need the right book. Today we’ll take a look at “Eloquent Javascript: A Modern Introduction to Programming” by Marijn Haverbeke to see if it’s what you need to become a JavaScript ninja.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Manageable Task

I have a JavaScript book in my closet that I picked up in college a few years ago. It’s 1,000 pages long and is heavier than a good family bible. After one look at this impressive tome, most non-programmers would give in to the hopelessness of actually having the time to learn and master the material within.

As I mentioned in the introduction, if it’s your first foray into real programming, JavaScript can be pretty intimidating and the last thing you want to find out is that you’ll need to get a new degree just to understand it.

The very first thing you’ll notice about “Eloquent JavaScript” is its size, especially if you’ve come face to face with one of the beast manuals I just mentioned. This book, by contrast, is thin, light and comes in at under 200 pages of reading material!

One look at this book and you feel a sense of relief: I can do this. The task before you is still challenging, but feels much more like a long jog than a decathlon.

Who Is It For? Absolute Beginners!

Given the fact that it’s a fairly brief volume, you might expect that there is a lot of knowledge that you need going into it, but make no mistake, this book is perfect for someone who has never written a line of JavaScript in their life.

Of course, it’s definitely recommended that you figure out HTML and CSS first if building webpages and web applications is your ultimate goal. In truth, you could make it through most of the content in the book just fine without these skills, but they really help put the information into context; I guarantee that it will make more sense if you figure out the basics first.

An interesting thing about programming is that the biggest hurdle to learning your first language is actually learning the process of programming. Once you learn this, picking up new languages is more of a matter of mastering semantics than learning from scratch. One of this book’s primary focuses is to teach you how to program. This will prove an invaluable skill as you expand your knowledge in the future.

Who Wrote It?

Marijn Haverbeke is a programmer and tech writer with an impressively large body of open source projects such as Code Mirror and Mold.

Though, from what I can tell, this is his first book, he does have a ton of writing experience on technical topics ranging from JavaScript to Machine Fundamentals.

Haverbeke’s writing style definitely helps make a fairly dull and technical subject more approachable. He’s quite fond of using bizarre circumstances and humor to make his point. For instance, one project in the book is explained through a narrative about a recluse whose hut is struck by lighting, which results in him being burned alive. Needless to say, it’s not your typical JavaScript introduction.

What’s In It?

In the introduction, Haverbeke writes a great little summary of all of the twelve chapters. I’ll be using select quotes from this to explain and divide each section.

Introduction

“The first three chapters will introduce the JavaScript language and teach you how to write grammatically correct JavaScript programs.”

• Chapter 1: Basic JavaScript: Values, Variables and Control Flow
• Chapter 2: Functions
• Chapter 3: Data Structures: Objects and Arrays

Advanced Techniques

“The next four chapters discuss more advanced techniques–things that should make you capable of writing more complicated programs without them turning into an incomprehensible mess.”

• Chapter 4: Error Handling
• Chapter 5: Functional Programming
• Chapter 6: Object-Oriented Programming
• Chapter 7: Modularity

Tools

“The remaining chapters focus less on theory and more on the tools that are available in a JavaScript Environment.”

• Chapter 8: Regular Expressions
• Chapter 9: Web programming: A crash course
• Chapter 10: The Document Object Model
• Chapter 11: Browser Events
• Chapter 12: HTTP requests

How Is It?

“Eloquent JavaScript” does an admirable job of making the complex simple. It actually goes through a ton of theory very quickly by giving you enough to gain an understanding without being so much that it overwhelms you and puts you to sleep. As I mentioned above, the author has an entertaining writing style that I particularly enjoyed.

As previously stated, the book itself is around 200 pages. If you’re looking for something full-color with lots of pretty pictures to keep you interested, look elsewhere. This book is largely text and code snippets and contains only a few quick and simple B&W images (this translates to a fairly low price). Visual learners that like a lot of charts and tables may not find what they’re looking for here.

One thing that I would’ve like to have seen is more solid explanation and examples for how to put the theory into practice in real life websites. A lot of people don’t really have a strong grasp of what to use JavaScript for outside of big web applications and some more guidance for daily use would’ve gone a long way.

On the whole though, it’s a fantastic book. HTML and CSS are the type of thing that can be picked up easily from scattered free tutorials online but JavaScript is one of those things that seems best to learn from start to finish in a consistent and structured volume. “Eloquent JavaScript” is surely among the best original book on the subject in recent years, though I can easily imagine the publisher expanding this into a series: Eloquent PHP, Eloquent CSS, etc.

The bottom line is, if you’re still reading at this point, you’re probably someone who genuinely wants and needs to learn JavaScript. A $30 book that promises to help you achieve this in less than 200 pages is possibly too good to pass up.

Conclusion

To sum up, “Eloquent JavaScript” is a truly great book for absolute beginners to learn the foundations of both JavaScript and programming in general. It strikes a perfect balance between being brief and lighthearted and thorough enough to give you an extensive knowledge of the subject.

If you’re at all interested in learning JavaScript, making this your first guide could mean the difference between getting discouraged and giving up and really getting into programming as a lifelong venture.

Is it just another CSS book or a must-have addition to your library? Read on to find out.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Another Book on CSS?

Books on CSS are notoriously boring for anyone who already knows their way around a style sheet. Most of those that I’ve seen and own spend a great deal of the book covering the exact same basic topics: here’s how the CSS box model works, padding works like this, margins work like this, style your text this way, etc. Even books that promise to get into advanced topics usually do so only in the last few chapters, meaning you just paid $40 for 40 pages!

Since I’m a full-time professional blogger (can you believe that such a thing exists?) I know very well where to find basic CSS instruction completely free online, which is exactly how I learned. Don’t get me wrong, there are lots of amazing CSS books out there, but I’m hesitant to fork out the dough for one because of these reasons.

These thoughts went through my mind as I agreed to take a look at a book by Peter Gasston titled “The Book of CSS3″. As further fuel to my skepticism, I considered that CSS3 is the single most written about topic at the moment on sites such as this one. Again, why pay for content that’s free and more than plentiful online? I know how box-shadows work thank you very much and don’t require any further assistance!

I Was Wrong: This Book Is Great

The Book of CSS3 starts off with the following passage:

Right away, Gasston grabs my attention. He’s writing to an audience who already knows how to hand code websites, meaning he’s not going to bore me with entire chapters on the difference between internal and external style sheets! Well played sir, I will continue to read your book.

Gasston then begins to explain what CSS3 is and isn’t. In this discussion he introduces the box-sizing property. In his very first property introduction, he’s hit on something that I know very little about! At this point, I’m beginning to realize that this book just might be genuinely useful.

In the very next section, he goes straight to media queries, what I believe to be one of the most important new aspects of CSS3. With this and every other topic that he covers, one thing really stands out: Gasston has done his research. He doesn’t briefly cover almost anything but rather really digs in and explores every aspect of the spec, whether proposed or already implemented.

With just about everything that I read about, I learned quite a bit that I didn’t already know. He successfully adds value that you simply never get out of a brief, one-off blog post about a topic and therefore makes the book well worth the purchase.

I especially enjoyed the latter part of the book, which covers properties and methods that aren’t yet supported by any browsers but represent huge potential changes to the way we code websites should they be accepted into CSS. Gasston even points out some useful JavaScript plugins that let you try out these fancy new methods right away!

The Physical Book

The book itself is quite hefty and comes in at just under 300 pages. The cover is attractively illustrated and is therefore definitely the kind of thing I don’t mind having around (who wants an ugly book on their desk?). The content inside is laid out nicely with plenty of charts and graphics to make for quick and enjoyable browsing.

One thing that I particularly appreciated was that, with every property discussed, Gasston would conclude with a chart discussing browser compatibility. This is extremely handy and I’m confident it will be something that causes me to come back to the book again and again.

The pages are grayscale, but for the most part I didn’t really mind at all as learning code doesn’t necessarily require full-color prints. The one exception is the section on Color and Opacity, where it would’ve definitely been nice to see some examples in color. It’s important to recognize though that they’re keeping your cost down by running single color print jobs!

Table of Contents

Just to give you a good idea of everything the book covers, here’s the table of contents (excluding the preface, introduction, etc.). As you can see, the topics are all dedicated to brand new and advanced CSS3 goodness so you won’t have to skip half the book if you already know how to code. Also, the topics are split up so nicely that it’s perfect to keep on hand purely as a reference even if you’re not interested in reading the whole thing. The next time you’re struggling with building a custom CSS gradient, flip open to that chapter and you’re good to go. The thorough index obviously helps out with this as well.

• Chapter 1: Introducing CSS3
• Chapter 2: Media Queries
• Chapter 3: Selectors
• Chapter 4: Pseudo-classes and Pseudo-elements
• Chapter 5: Web Fonts
• Chapter 6: Text Effects and Typographic Styles
• Chapter 7: Multiple Columns
• Chapter 8: Background Images and Other Decorative Properties
• Chapter 9: Border and Box Effects
• Chapter 10: Color and Opacity
• Chapter 11: Gradients
• Chapter 12: 2D Transformations
• Chapter 13: Transitions and Animations
• Chapter 14: 3D Transformations
• Chapter 15: Flexible Box Layout
• Chapter 16: Template Layout
• Chapter 17: The Future of CSS
• Appendix A: CSS3 Support in Current Major Browsers
• Appendix B: Online Resources
• Index

Conclusion

As you can tell, I really enjoyed this book. My expectations were admittedly low but it definitely blew them away. Gasston’s writing style is informative and even witty at times but cuts straight to the point instead of being overly verbose. He does a great job of explaining each property quickly and getting to what you really want to see: the syntax. I have several books on web development that have been sitting in a closet collecting dust almost since the day I received them, The Book of CSS3 will avoid that stack for some time as I already find myself referring to it on a daily basis.

Want to score a free copy of The Book of CSS3? Check back next week for your chance to do just that!

With a great range of contributors and big steps forward in shipping and physical design, let’s see how Smashing Magazine’s latest release stacks up!

Physical Design & Quality

Smashing Magazine came under some criticism for the build quality and shipping of their first book, and this is something that they’ve gone to great lengths to solve – to great success. The typography is understated and enjoyable to read, and margins give plenty of space around the content.

The physical feel of the book is wonderful – a hard cover, high quality printing, stitch binding, and a funky orange bookmark all contribute to an enjoyable read. It’s not surprising to hear that Smashing Magazine are only offering the printed copy of the book (you won’t find an eBook version anywhere).

Although this might be an unpopular decision for some, you’ll understand why after holding the physical copy.

Contents & Style

So, on to the content. A valid question would be how this differs to the first Smashing Magazine book. After all, they’re both fairly generically pitched as covering “web design”. Here’s the official line on the matter:

Both books cover best practices in Web design and Web development, and they have similarities, but on a broad scale they cover different areas of design.

Book 1 presents coding and layout techniques, color theory und UI design, while Book 2 covers psychology, designing for mobile devices, graphic design, wireframing and book production. They complement each other very well but are also distinct enough for standalone reading.

Each chapter of the book is preceded with a wonderful illustration, designed by Yiying Lu (the designer behind the Twitter “fail whale”). These break up the content well, and really add to the overall quality feel of the book. If you really love the artwork, you can even purchase it as “wall art”!

The Smashing Book #2 has a wonderful array of contributors, and this is one aspect of these publications that I really enjoy. Each author is knowledgeable and talented in their own area, giving the content a degree of credibility that you don’t often see elsewhere.

The inherent downside is that the book doesn’t have a central narrative running throughout, and you can obviously feel the differences in writing style and personality with each chapter. Each section is almost a distinct “mini book”, giving you a beginning-to-end analysis of a particular theory, technique, or practice.

Whether you’re interested in going right back to the basics of design theory, crafting mobile user experiences, improving your wireframing technique, or getting to grips with web psychology, there’s something for you here. The content absolutely justifies the price, and you won’t be left disappointed.

Smashing Magazine is a fantastic source of ideas, content, and inspiration for the design community, and the level of quality you’ve come to expect is upheld here.

Where to Buy

As mentioned before, you can’t pick this one up as an eBook. You can, however, grab a sample chapter to get a feel for how the book is presented.

Smashing Magazine also had several chapters that they couldn’t fit into the finished book. These are available completely free, entitled Smashing Book #2: The Lost Files.

The price comes in at around $29.90 (23,90 Euro), and you can order your copy here. If you’ve already purchased and read the book, I’d love to know what you think. Feel free to share your thoughts in the comments!

I’ve spent a few hours reading through my review copy over the past week, and have been pleasantly surprised. Sven and Vitaly have managed to bring several talented writers on board to help put together a thoroughly interesting read.

This review will walk you through the book’s contents, and outline a few of the chapters I particularly enjoyed!

An Overview of the Book

The Smashing Book is aimed primarily at designers and people who run and manage websites. Although a few chapters touch upon development and server-side scripting, the book predominantly deals with design, typography, CSS, and the business of running websites.

If you’re reading this review, then you’re likely to have an interest in one or more of those topics. Broadly speaking, the first half of the book deals with the essentials of design, and the second half takes on a more business-related focus.

The layout and design is good throughout, with a readable font and plenty of visual examples. It’s easy to read, and put together in an understandable way.

Here’s a preview of what the pages and layout look like:

Chapter by Chapter

As you’d expect, the book has multiple chapters focusing on different aspects of design. We’ll briefly go through each, and explain what you can expect:

User Interface Design in Modern Web Applications

Written by Dmitry Fadeyev, this chapter starts with the basics of what makes a great user interface – essential knowledge for anyone designing for the web. It not only focuses on the way colour, gradients, borders and layout affect interface design – also covering how to write effective interface copy.

The chapter is broken down in an easy-to-read manner, and flows very well. The content is fairly basic, but acts as a good foundation for new designs and a welcome reminder for those of you who have been in the field for several years.

The Art and Science of CSS-Layouts

Any good designer should have a solid grasp of CSS, and how to use it for building and structuring websites. Written by Jacob Gube and Kayla Knight, it covers fixed width/fluid layouts, grids, elastic layouts, coupled with a number of actual code examples.

The information is all excellent, though the CSS code is presented in a fairly basic way (without any colouring or code highlighting). It concludes with a short discussion surrounding how to choose the correct layout for your particular site.

Typography: Rules, Guidelines and Common Mistakes

Typography is a vital aspect of your site to get right, and also one of the most difficult. This chapter is written by Alessandro Cattaneo, Jon Tan, and Yves Peters – all experts in the field.

All the basic aspects of typography are explained, followed by a handful of definitions of certain terms (I found this particularly useful!). Vertical spacing, grids, and hierarchy are covered, along with a few examples of how these different effects are achieved with CSS.

This chapter manages to strike a good balance between theory and practical examples – something that can be difficult to do. I’m looking forward to putting some of what I learnt here into practice.

Usability Principles for Modern Websites

Put together by Andrew Maier and David Leggett, this chapter takes you through the principles of creating a usable website. This includes thinking from your user’s perspective, maintaining a consistent visual design, and several other excellent tips.

There’s a great set of “usability checkpoints” that make a good list for working through before launching a new site or project. This type of practical advice makes the information presented very usable, and there’s a lot to take away and think about.

The Ultimate Guide to Fantastic Colour Usage

Written by Darius Monsef, the man behind COLOURLovers, this section starts out with a great deal of theory about colour, and how to successfully match and blend colours together.

The examples shown here are great, thought I would have liked a few more practical links and exercises to follow up.

Optimization for Websites

This chapter is authored by Rene Schmidt, and focuses on how to optimise your website for the best possible user experience. Some of the tips are more obvious (such as giving your images dimensions), but there are a bunch of thoroughly useful suggestions I hadn’t considered before. It was interesting to read the reasoning behind some of the techniques I already use.

The chapter goes on to discuss server optimisation – something designers are often a little intimidated by. Everything is presented in an easy-to-read way, with the exception of the slightly basic code layout (as mentioned previously).

Design to Sell – Increasing Conversion Rates

Whether you run your own online business, or regularly design for other people’s, understanding how to “convert” is vital. This might be creating a sale, or simply encouraging a user to follow a particular call-to-action.

Dmitry Fadeyev again has some useful tips to share here, starting by delving into the psychology behind capturing a user’s desire. The chapter then goes on to offer practical suggestions, such as letting a user try the product, offering video demos, and making choices clear.

How to Turn a Site Into a Remarkable Brand

Chris Spooner has done a great job covering the essentials of branding, centred around design, content, community, innovation, and “getting inside the user’s head”.

Branding is something that’s difficult to get right, and starts at a very early stage of your website or business – once established it’s hard to adjust. This is valuable reading, but to create a really successful brand, you also need a unique concept and a healthy dose of hard work!

Learning From Experts: Interviews and Insight

In this chapter, Steven Snell collates the insight and opinion of various high-profile designers. There’s no shortage of contributors, including Jason Santa Maria, Collis Ta’eed, Jon Hicks, and Andy Budd.

Questions posed are very insightful, centred around the following areas:

• Design and Development
• The Design Process
• Self Improvement and Skill Development
• Business and Freelancing

I really enjoyed this chapter. Learning from experts in your field is a hugely valuable experience, and there are some really great insights made here. It’s rare to find this quality of interview online.

Behind the Curtains: The Smashing Magazine Story

Learning about the development and ongoing running of a website always fascinates me, so this chapter is particularly recommended. It covers how Smashing Magazine has evolved from a tiny blog into the success it is today, and the steps taken to get there.

It’s rare to read such an interesting “behind the scenes” story, and there’s much to be learned from the passion and dedication put into this site in particular.

Highlights

Because my main passion is the process of creating and running websites, I particularly enjoyed the areas of the book focusing on branding, monetization, and “learning from the experts”. These chapters were full of useful tips and ideas.

One slight criticism centres around the editing and proofreading of the book. You’ll encounter a few errors here and there (including “Moderrn” on the contents page!). Obviously this is picky, and the content and substance of the book isn’t affected. A great deal of work has clearly gone into ensuring that the ideas and advice in the book are A-grade material.

If you’re a web designer, or fancy the idea of running a website, this is a great book to read. It isn’t pretentious in any way and, although it won’t teach you how to make a website, intermediate and advanced designers will have plenty to contemplate after reading it.

Where to Buy the Book

If you’d like to pick up a copy, it costs $29.90 and is available directly from Smashing Magazine. The printing quality is brilliant, and it comes packaged in a funky “Smashing” branded box.

If you’ve already read the book, feel free to share your thoughts in the comments. I’d love to know how you found it!

Today we’ll be examining a ton of online stores that break this trend by being both functional and attractive. Each of the examples below has a unique lesson to teach us about good e-commerce design. Let’s get started!

First, The Problem

Before we can appreciate sites that are well designed, we must think about what is wrong with the traditional e-commerce format. Some wise individual once remarked that a camel is a horse designed by a committee. This clever jest definitely applies to e-commerce sites. Big name online stores often have way too much input from way too many people, resulting in a mess of good intentions and great feature ideas that were never properly integrated with each other in a synergistic fashion.

The screenshot above is just a small portion of the Kmart.com homepage. As you can see, it’s a train wreck. Cruise over to the site and you’ll see that the page taken in as a whole is even worse. Like Kmart.com, many e-commerce sites suffer from immense clutter. There’s so much competing for your attention that the ultimate result is your eyes bouncing from place to place with no real purpose or focus.

Now, the Solution

Let’s take an in-depth look at some sites that got it right. As we look at each of the sites below, compare the interface to that of Kmart’s to see how much more effective a clean and simple layout can be.

Xtreme Mac

Xtreme Mac has the most original and innovative shopping experience I came across in my search (Icon Dock below was a close second). You’re presented with a simple grid of product shots with bright, colorful rollover effects. When you click on an item, instead of being taken to a dedicated page, the entire grid fluidly shifts so that the selected cell can expand to eight times it’s normal size. You are then given a larger product shot, a brief description and the option to either learn more or buy now. Click another item and the dynamic layout changes again to feature that item.

I found the Xtreme Mac interface to be beautiful and all out fun to play with. Getting your visitors to not only be impressed with your site design but actually enjoy the shopping experience is the holy grail of e-commerce design. The more they enjoy your site, the more time they spend on it. Which, theoretically, makes them more likely to actually buy something (the ultimate goal of any e-commerce site!).

Icon Dock

Right off the bat you can see that Icon Dock is a beautiful site full of top notch illustrations. My favorite thing about icon dock though is how they’ve handled shopping carts. Some websites make it quite difficult to see and edit the contents of your cart, but Icon Dock gives you a visual “dock” of icons that stays with you as you shop. When you want to add something to it, you simply drag the icon to the dock to drop it in. Then if you want to remove anything from the dock, simply hit the little “x” on the icon.

This is crafted in such an intuitive manner that you really don’t need any instruction. It works exactly like you expect it would. And for those who don’t get it right away, there’s still the old option of clicking an “add to cart” button. This is an important feature. When designing a uniquely interactive interface, always think about whether you should still include the traditional way for those who might not understand your fancy new idea. This allows you to blaze your own path in interactivity while preserving usability.

Nike

Sorry Flash haters, but I really like this site. To concede a little, the loading times for every page are pretty annoying. However, the overall site is an impressive visual treat. Like Kmart, they’ve got a ton of items for sale (maybe not as much, but the argument is still valid), but instead of cluttering up the home page with mismatched featured items, Nike has integrated everything on the page in a visually seamless manner. They’ve got well over ten unique sections on a single page, yet it looks completely cohesive. Let’s look at a few of the things they’ve done to accomplish this.

The first thing they’ve done to cut clutter is fairly simple. Instead of stacking randomly-sized banners promoting different items on top of each other like Kmart, Nike has one primary banner that rotates between three messages. This surely isn’t groundbreaking, but it’s something too few designers consider when faced with loading a page to the brim with content. Prebuilt libraries like jQuery make this type of rotating content a cinch and can really make an otherwise static page come alive in a subtle, non-annoying way.

The next thing Nike has done to cut clutter is to put all the sections below the main banner on a continuous background color to avoid that “dropped in” look you get with the sale item boxes in Kmart’s design. This makes the entire page look as if it were built at the same time by the same designers, as opposed to having an old design that you keep cramming more and more mismatched items into over time. It’s all about synergy folks.

Dyson

The lesson we can learn from Dyson is that you can make shopping for a vacuum feel like shopping for a Mercedes. No matter what you happen to be selling, if you want it to look high end, get your inspiration from websites that sell luxury cars, yachts or anything else that costs more than you make in a year. The black and gray background is really complemented by splashes of white and/or blue that really jump off the page with contrast. What really steals the show is the product photography (no doubt as much Photoshop as actual photo), which really captures the essence of the attractive product design. Also notice the rotating banner as with the Nike example. You’ll see this again and again throughout the examples below for good reason, it’s just a great way to put a ton of content into a small space without any visual clutter.

SkinBox

Skinbox makes shopping for forum skins incredibly simple. The homepage is mostly made up of one large section showcasing their themes. The logical categories (light, dark professional, etc) make it easy to immediately find the type of skins you are looking for. The skins in each category are displayed in a large grid with the option to buy now or see more information on the skin. The latter option is important. E-commerce sites too often fill a page with boring product information, resulting in a text heavy layout trying to sell something that’s really all about visual appeal (at least in this case). If you’re selling the design of an item, consider putting the functionality specifics behind a “more info” button so that users who want that information can easily find it and users who are just browsing aren’t distracted by it.

DropBags

I honestly have no idea what this site is selling. The “How to Use” section says something about putting the bag in a bucket, filling it with plants and ice and stirring it up, but I can’t imagine why I would ever want to freeze plant life. They might want me to think it’s scientific, but I’m pretty sure it’s witchcraft.

The point is, it’s a funky product. They’re selling a bag that you put into a bucket. Big deal right? However, they’ve made the site around the crazy bucket bag so appealing that I was almost convinced that I needed one. As a web designer, you can’t always land the Nike account. Sometimes you get a client that wants to sell a “multi-purpose extraction kit” that is essentially an overpriced bucket liner. In these circumstances, you should put forth the same amount of effort and creativity as you would if you were working for any big name client. Make the shopping experience as simple and straightforward as you can and make the environment around the product inviting and attractive.

IKEA

Ikea wins the prize for the most interactive shopping experience. When I get the Ikea catalog in the mail, my wife and I love to sit down together and flip through it together for design ideas and to see what cool new products they’ve come up with. This is enjoyable because the Ikea experience has been carefully structured so that flipping through the catalog is just like walking through their showroom. Instead of being presented with individual items, you see custom photography of an entire room completely made up of Ikea products. They give you helpful breakdowns of what each item costs as well as the cost of buying the entire room as a set. This helps normal people who don’t know much about interior design create beautiful rooms.

Recently, Ikea has transferred this experience to their online store. What you get is an experience that’s a lot like flipping through the catalog, only much more interactive and dynamic. You can click on the icons next to certain products to get a closer look or view hidden features, change views to look around the room, or skip the room view and look at a simple grid of products. Like some of the other examples above, Ikea is shooting for a shopping experience that is not only enjoyable, but could even be considered fun. If you’re building an e-commerce site, think about how you can liven up the experience by adding something a bit more interactive than your average online store.

Cellar Thief

Cellar Thief is just a great example of creative web design. The designers mingled current web design trends with rich textures and bright colors from the wine industry to create an amazingly attractive online store. Notice that they are really only selling three separate wines, which is a smaller product set than you are likely to have in your projects, but there’s still plenty to be learned from this example.

First off, aside from the wines for sale, there’s a bunch of secondary content on the page such as wine tips, a blog feed, etc. Notice that each of these little sections has been placed on the right side of a page filled with left-aligned text. This is structured so that the first thing you see (glancing at the page from left to right) is the primary content: the product for sale. Only after you look at the page for a few seconds do you notice the secondary content. On this particular page, this would not be true if that content were placed on the left. Left-aligning this secondary content might give it an undeserved primary position in the visual hierarchy. Always try to imagine the order in which a visitor will see the objects on the page and structure your content accordingly.

One last thing about the organization of information. Check out how much content there is related to each individual wine. Now imagine what the page would look like if the designer hadn’t thought to divide that information up into tabs. Like the rotating banner of content we discussed above, tabs provide a stylish and effective way to cram a ridiculous amount of content into a small, user friendly space. When designing printed materials, I’m constantly pleading with my clients to trim their required information due to spatial restrictions. By contrast, web design gives you so much more freedom to provide the wealth of information that your client wants in the contained manner that good design requires.

More Attractive E-Commerce Sites

Here are a bunch more examples of designers that overcame the cluttered, clumsy e-commerce stigma by focusing on both aesthetic appeal and functionality. Stop by each example and look for the things we mentioned above. There’s plenty of instances of fun yet simple shopping experiences, amazing photography/artwork, and creative content organization to inspire you to e-commerce greatness.

Baby Quasar

Ooga Zone

ShoeGuru

Madsen Bicycles

i/denti/tee

Abercrombie & Fitch

Sucré

DNA11

MacStylez

One+Only

Twelve South

Sony

Conclusion

Now that we’ve looked at what I consider to be the wrong and right way to design an e-commerce site, I’d like to hear your thoughts. Tell us what irks you about shopping online and what you love or hate about the examples above.

For even more e-commerce inspiration, check out Cart Frenzy, a gallery devoted online store design.

Here’s a list of 20 applications that allow you to create blog posts from the comfort of your operating system environment, no internet connection required.

Mars Edit 2: Mac

Mars Edit is among the most popular desktop blogging apps for the Mac. It supports all of the major blogging platforms such as WordPress, Blogger, and Drupal and even many of the newer ones like Squarespace and Tumblr. Composing a blog post in Mars Edit can be as simple as writing an email but there are enough advanced features like macros (reusable snippets) and TextWrangler integration to keep professional bloggers happy.
Price: $29.95

Flock: Mac & Windows

I know this doesn’t strictly fit the category of a desktop blogging app, but it is a desktop app and it does have blogging integration… so there. Flock is the most unique web browser I’ve ever come across and is absolutely worth checking out. The thing that makes Flock unique is that it has integrated tons of the services you use online into the browser itself (by default). This means you can browse the web while keeping tabs on your social networking and blogging services. The built-in blog editor isn’t as fully featured as Mars Edit, but as a free utility bundled in a browser it’s pretty impressive. Check out all the services Flock supports below.
Price: Free

Flock Services

Ecto: Mac

Ecto is a surprisingly fully featured blogging application with support for a ton of platforms. Ecto features include both a rich text editor and an HTML editor, full local control of recently posted entries and drafts, and the ability to convert and scale images. In my own testing Ecto seemed a bit rough around the edges but it’s definitely a good alternative to Mars Edit if you’re looking for something a little cheaper.
Price: $19.95

Qumana: PC & Mac

Qumana is another free option with most of the necessary features we’ve already discussed: WYSIWYG and HTML editor, support for most major blogging platforms, and local control of previous posts. What sets Qumana apart is its emphasis making money with your blog. Qumana lets you easily include ads in your posts so you can (theoretically) earn cash as viewers click on the ads.
Price: Free

Blogo: Mac

Blogo breaks ground in the interface category by delivering a slick, minimal UI for updating your blog. Blogo supports WordPress, Blogger, Typepad, Typo, Drupal, Expression Engine, Twitter, Ping.fm and more. Notable features include a bookmarklet to easily grab content from your browser, a fullscreen editing mode and easy drag and drop photo uploading/resizing.
Price: $25

MacJournal: Mac

MacJournal is geared more towards private journaling than professional blogging, but it does include full support for LiveJournal, Blogger, Movable Type, and WordPress. MacJournal takes full advantage of OS X by offering features like Quicklook integration and iSight compatibility.
Price: $39.95

BlogJet: Windows

BlogJet is one of the nicer Windows-only options that I came across. BlogJet sports a ton of great features including posting to multiple blogs simultaneously, Flickr and YouTube integration, file sharing/attachments for your readers to download, and browser/feed reader integration. And of course, support for WordPress, TypePad, Movable Type, Blogger, MSN Live Spaces, Blogware, BlogHarbor, Squarespace, Drupal, Community Server, etc.
Price: $39.95

RocketPost

Another really impressive Windows only app, RocketPost claims to be the “only one with WYSIWYG editing, full local editing and full blog import.” RocketPost boast tons of top notch features like automatic linking to related posts, quote tracking, quick linking, auto save, instant photo album creation, and scheduled posts. If you’re on Windows and are serious about blogging, this may be the way to go.
Price: $29

And a Bunch More!

After you’ve listed the features for eight desktop blogging apps, things start to get redundant. So I’m going to stop there and let you check out the rest. The apps above are the ones I found particularly impressive or unique, but here’s another 12 that are definitely worth looking into.

• myBlogEdit: Mac
• iBlog: Mac
• Bleezer: Mac/Windows/Linux
• RapidBlog (RapidWeaver Plugin): Mac
• QuickPost 2: Mac
• BlogDesk: Windows
• Chrysanth: Windows
• Windows Live Writer: Windows
• Post2Bog
• JBlogEditor: Windows
• QTM: Windows/Mac
• w.bloggar

Conclusion

You should now be more than equipped to enrich your blogging experience with a desktop application. Use the comments below to let us know which options you prefer, which you hate, and what we left out.

There are a huge number of different tools for email campaigns available; Emma, Campaign Monitor and MailChimp to name a few. Today I’ll be looking at a longstanding piece of email marketing software with a whole range of tools, Omnistar Mailer. It differs from other software in that it is hosted locally on your server.

The general overview of OmniStar offers the following range of features:

• Create Unlimited Email Lists
• Create Unlimited Autoresponders
• Send Automatic Campaigns
• Make Online Surveys
• Automate Online Reminders
• Receive Detailed Reports
• Increase Email Deliverability
• Advanced Search Technology
• Personalize Email Campaigns
• Segment with Our Target List Creator

I’ll be looking at a few of these in a little more detail.

The Interface

After logging in, you are presented with the main interface for managing your email campaigns:

Whilst certainly lacking the polish and style of a modern interface, it does contain all the information needed to get the job done. There’s a helpful walkthrough for getting started, and the different tasks you may like to perform are well broken down.

Managing Subscribers

An email list is no use without people subscribed to it! As you’d expect, tools are available to easily add and manage subscribers, and you’re able to import data from Excel. If coming from another system, options are slightly limited and you may need to use Excel as a pass-through.

It’s simple to blacklist members, preventing a certain person from signing up to receive updates. There are also a comprehensive range of administration tools to find members with invalid, inactive or unconfirmed email addresses.

Sending Newsletters

Sending emails is managed through “Campaigns”, with a whole host of settings and options available for creating visual templates, sending emails on a set schedule, avoiding keywords associated with spam, and – one feature I particularly like the look of – the ability to preview your email in a variety of different email clients.

A good introductory video is available to walk you through the process of setting up a new campaign, and there are also a variety of different (albeit a little dated) email templates to choose from.

Once sent, you’re able to track a newsletter’s reach and readership, there’s a good video outlining the software’s capabilities at their site. There seems to be a reasonable amount of data on offer, but the way in which it is presented appears to be slightly dated.

Customization

There are a good range of customization options available, for changing subscriber box style, website integration and admin panel options for users when managing their subscription options. You’re also able to take a backup of your email subscribers, newsletters and data – this simply downloads a dump of the SQL tables/data related to your account. Whilst fairly rudimentary, this does give you peace of mind that you are in control of your information.

Conclusion

From playing with the system for a short while, it seems that OmniStar Mailer does have a good range of functionality. All the features you’d expect from a newsletter management system are present.

It’s priced at $257.00 for a license to use on your server. Unlike other systems this is a one off fee, though still seems quite expensive for the features on offer. If you’re planning on running a newsletter for several months it could save money over the longer term compared to a hosted system.

There’s no harm in trying, though, and Omnistar Mailer comes with a money back guarantee along with guaranteed same day support.

In addition, Omnistar Mailer is offering a discount to all Design Shack readers. Use promo code “designshack” when you purchase this product to receive 20% off.

I’d be interested to hear your thoughts – which email system do you use for newsletters?

This article will be more than a straight forward review of PSD2HTML. We’ll be considering the basic idea of these type of services and considering when, and for who, they are appropriate. Honesty will be foremost, and I hope that you will gain a real insight into using a PSD to XHTML tool.

PSD to XHTML Services

PSD2HTML are one of the first companies to provide this service (you can see their original press release), but there are a huge number of competitors in the area today and a Google search for “psd to html” brings back over half a million results. Here is a table summarizing the main players in the industry (a more in depth list can be found at Most Sliced):

We’ll be focusing on PSD2HTML, taking you through the process and showing you the final resulting design.

The Process

The ordering process at the site is very simple. There are several options available, starting with either a basic or professional package. We opted for the professional, as semantic, search engine friendly coding was a must have. Other optional additions are:

• Flexible width
• Stretching the header and footer
• Rollovers and dynamic menus
• sIFR flash replacement
• Commented CSS and XHTML code
• Load speed optimization
• Integration with CMS software (e.g. WordPress, MT, Drupal, Blogger, CubeCart)

After submitting the order, we were contacted at the start of the following working day with a request to clarify some of the features in the submitted PSD file. By the end of that day, some 7 hours later, the markup was provided through their online ticket system. The speed of the turn around was incredibly impressive – it would take even an experienced designer far longer than 6 hours to code a relatively complex site such as the one we submitted. If you need results quickly, this service would seem to be a great resource.

Speed isn’t the only factor, however. We’re going to show you, in full, the code created by PSD2HTML for the new layout.

The Results

This is the original 13 Styles design:

And this is a screenshot of the new version which we created in Photoshop:

You can see the full website through the following link. It is essentially the exact code which we received back from PSD2HTML, and will still require customization before being integrated into the real 13 Styles site.

View the design

Please feel free to take a look and judge the quality for yourself. We found it to be great – well laid out with the correct separation of content and presentation and semantic coding. We aren’t incredibly easy to impress, but this was certainly not a rushed, second rate effort. The process takes web design to a level of ‘mass production’, and high standards can be achieved through having a huge catalog of code examples and snippets to work from.

Do We Recommend Them?

The service was fast, efficient, inexpensive and of an outstanding quality. PSD2HTML would definitely be worth considering if you:

• Are short on time
• Are a skilled designer, but not a coder
• Require high quality, semantic and valid code
• Want to have a personal, well trained contact creating the design

It can be argued that design does not come from the ability to write code, but rather the ability to create an intuitive user experience which is simple to operate and gives the desired message. Using a service such as this ensures that you are free to focus on these aspects without being bogged down in small issues such as cross browser compatibility.

PSD2HTML impressed us in every area when coding the 13 Styles site, and we would not hesitate to recommend using their service. Be careful, though, that you don’t lose the passion for crafting your own HTML and CSS.

PSD2HTML by psd2html.com