Creating Clickthrough Prototypes With Blueprint

In a previous article, I discussed using POP to create sketch-based clickthrough prototypes in participatory design exercises. These prototypes capture well the flow and overall layout of early design alternatives.

bp-preview-instructions-preview-opt

The same piece briefly mentioned another category of clickthrough prototypes: widget-based mockups that are designed on the target device and that expand on sketches by introducing user interface (UI) details and increased visual fidelity. These prototypes can be used to pitch ideas to clients, document interactions and even test usability. In this article, I will teach you how to use the iPad app Blueprint to put together such prototypes in the form of concept demos, which help to manage a client’s expectations when you are aligning your visions of a product.

Read more...

Improving Smashing Magazine’s Performance: A Case Study

Today Smashing Magazine turns eight years old. Eight years is a long time on the web, yet for us it really doesn't feel like a long journey at all. Things have changed, evolved and moved on, and we gratefully take on new challenges one at a time. To mark this special little day, we’d love to share a few things that we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done recently. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering. – Ed.

Improving Smashing Magazine's Performance: A Case Study

Improvement is a matter of steady, ongoing iteration. When we redesigned Smashing Magazine back in 2012, our main goal was to establish trustworthy branding that would reflect the ambitious editorial direction of the magazine. We did that primarily by focusing on crafting a delightful reading experience. Over the years, our focus hasn't changed a bit; however, that very asset that helped to establish our branding turned into a major performance bottleneck.

Read more...
Advertisement Advertise with us!

Internal Developer Training: Doing It Right

Successful developers all have something in common: the desire to create. To fully realize that creativity, they need to continually improve their skills. The web industry has grown from this desire to learn. You only need to look at the unwavering demand for conferences, workshops and training days for evidence of this.

Internal Developer Training: Doing It Right

For many companies, however, these sources of training require time and money that simply might not be available — especially when you consider that technologies evolve all the time. The cost of continually sending your team to workshops and training days can quickly become unsustainable.

Read more...

Animating Without jQuery

There’s a false belief in the web development community that CSS animation is the only performant way to animate on the web. This myth has coerced many developers to abandon JavaScript-based animation altogether, thereby (1) forcing themselves to manage complex UI interaction within style sheets, (2) locking themselves out of supporting Internet Explorer 8 and 9, and (3) forgoing the beautiful motion design physics that are possible only with JavaScript.

Animating Without jQuery

Reality check: JavaScript-based animation is often as fast as CSS-based animation — sometimes even faster. CSS animation only appears to have a leg up because it’s typically compared to jQuery’s $.animate(), which is, in fact, very slow. However, JavaScript animation libraries that bypass jQuery deliver incredible performance by avoiding DOM manipulation as much as possible. These libraries can be up to 20 times faster than jQuery.

Read more...

Testing Mobile: Emulators, Simulators And Remote Debugging

In the early days of mobile, debugging was quite a challenge. Sure, you could get ahold of a device and perform a quick visual assessment, but what would you do after discovering a bug?

Testing Mobile: Emulators, Simulators And Remote Debugging

With a distinct lack of debugging tools, developers turned to a variety of hacks. In general, these hacks were an attempt to recreate a given issue in a desktop browser and then debug with Chrome Developer Tools or a similar desktop toolkit. For instance, a developer might shrink the size of the desktop browser’s window to test a responsive website or alter the user agent to spoof a particular mobile device.

Read more...

Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL

Making an application work offline can be a daunting task. In this article, Matthew Andrews, a lead developer behind FT Labs, shares a few insights he had learned along the way while building the FT application. Matthew will also be running a "Making It Work Offline" workshop at our upcoming Smashing Conference in Freiburg in mid-September 2014. – Ed.

Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL

We’re going to make a simple offline-first to-do application with HTML5 technology. Here is what the app will do: Store data offline and load without an Internet connection, allow the user to add and delete items in the to-do list, store all data locally, with no back end, and run on the first- and second-most recent versions of all major desktop and mobile browsers. The complete project is ready for forking on GitHub.

Read more...

Think Your App Is Beautiful? Not Without User Experience Design

Lately, every app is "beautiful". If you read tech news, you’ve seen this pageant: Beautiful charts and graphs. Beautiful stories. Beautiful texting. Beautiful notebooks. Beautiful battery information.

Think Your App Is Beautiful? Not Without User Experience Design

Aspiring to beauty in our designs is admirable. But it doesn’t guarantee usability, nor is it a product or marketing strategy. Like “simple” and “easy” before it, “beautiful” says very little about the product. How many people, fed up with PowerPoint, cry out in frustration, “If only it were more beautiful”?

Read more...

↑ Back to top