Laying The Groundwork For Extensibility

The Web has succeeded at interoperability and scale in a way that no other technology has before or since. Still, the Web remains far from “state of the art”, and it is being increasingly threatened by walled gardens. The Web platform often lags competitors in delivering new system and device capabilities to developers.

Laying The Groundwork For Extensibility

Worse, it often hobbles new capabilities behind either high- or low-level APIs, forcing painful choices (and workarounds) on developers. Despite browser versions being released much faster, new capabilities still take a long time to materialize, and often do so in forms that are at best frustrating and at worst nearly useless to large swathes of the developer community for solving real-world needs.

Read more...

An Introduction To DOM Events

Click, touch, load, drag, change, input, error, resize — the list of possible DOM events is lengthy. Events can be triggered on any part of a document, whether by a user’s interaction or by the browser. They don’t just start and end in one place; they flow though the document, on a life cycle of their own. This life cycle is what makes DOM events so extensible and useful. As developers, we should understand how DOM events work, so that we can harness their potential and build engaging experiences.

An Introduction To DOM Events

Throughout my time as a front-end developer, I felt that I was never given a straight explanation of how DOM events work. My aim here is to give you a clear overview of the subject, to get you up to speed more quickly than I did.

Read more...
Advertisement Advertise with us!

An E-Commerce Study: Guidelines For Better Navigation And Categories

Product findability is key to any e-commerce business — after all, if customers can’t find a product, they can’t buy it. Therefore, at Baymard Institute, we invested eight months conducting a large-scale usability research study on the product-finding experience. We set out to explore how users navigate, find and select products on e-commerce websites, using the home page and category navigation.

An E-Commerce Study: Guidelines For Better Navigation And Categories

The one-on-one usability testing was conducted following the “think aloud” protocol, and we tested the following websites: Amazon, Best Buy, Blue Nile, Chemist Direct, Drugstore.com, eBags, GILT, GoOutdoors, H&M, IKEA, Macy’s, Newegg, Pixmania, Pottery Barn, REI, Tesco, Toys’R’Us, The Entertainer, and Zappos. The pages and design elements that we tested include the home page, category navigation, subcategories, and product lists.

Read more...

Building A Successful Product: Start Small And Listen

Developing a product is one thing, bringing it to market is another. In this article, Rachel explains how to start with a new product, develop and support it over time. Interested in learning more? Rachel will be hosting a full-day Smashing workshop on "Shipping Your Product" in Berlin, and she has contributed a chapter on customer support to the brand new upcoming Smashing Book #4 (to be released in late November). —Ed.

Building A Successful Product: Start Small And Listen

If you are launching a bootstrapped product, then your aim should be to ship something that people are happy to give you money for as quickly as possible. This means launching with the minimum that will make your product something that people would be happy to buy. You can then begin to develop additional features based on what customers actually want and need, rather than on what you think they want and need.

Read more...

An In-Depth Introduction To Ember.js

With the release of Ember.js 1.0, it's just about time to consider giving it a try. This article aims to introduce Ember.js to newcomers who want to learn more about the framework. Users often say that the learning curve is steep, but once you’ve overcome the difficulties, then this framework is tremendous.

An In-Depth Introduction To Ember.js

This happened to me as well. While the official guides are more accurate and up to date than ever (for real!), this post is my attempt to make things even smoother for beginners. First, we will clarify the main concepts of the framework. Next, we’ll go in depth with a step-by-step tutorial that teaches you how to build a simple Web app with Ember.js and Ember-Data, which is Ember’s data storage layer. Then, we will see how views and components help with handling user interactions. Finally, we will dig a little more into Ember-Data and template precompiling.

Read more...

Optimizing The Design Workflow With Fireworks Extensions, Part 3

This article is the third part of an article series about improving your design workflow in Adobe Fireworks with some of the best extensions currently available. You may want to check out the first and second parts if you're not already familiar with them. – Ed.

Optimizing The Design Workflow With Fireworks Extensions (Part 3)

We have already covered over a dozen brilliant extensions to add to your Fireworks arsenal, just the tip of the iceberg. With all-around great guys such as John Dunning, Aaron Beall, Matt Stow and Linus Lim continuing to support the app (an app that Adobe has finally decided it has had enough of), the power of Fireworks continues to make the lives of designers all over the world easier and more productive.

Read more...

Killer Responsive Layouts With CSS Regions

As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.

Killer Responsive Layouts With CSS Regions

Regions are a new part of the CSS specification, so not all browsers have implemented them, and in some cases you might have to enable a flag to use them. They have recently gained support in iOS7 and Safari 7, as well as Safari 6.1+. Adobe maintains a list of supported browsers and instructions on enabling regions and other features.

Read more...

↑ Back to top