How To Make An Effective Style Guide With Adobe Fireworks

I started with style guides like any other obsessive-compulsive designer: with the desire to make it simple to maintain and grow a design. Plus, knowing which component to use in a given situation is nice, too, right? Since making this a regular practice, I’ve found it’s been like having a nice combination of a CSS class and a pattern library all in one.

How To Make An Effective Style Guide With Adobe Fireworks

One of the first questions, understandably, is why use Fireworks for a style guide? Well, for me, it’s mostly because of symbols and styles. Sure, you could use similar things in Photoshop, but I find Fireworks’ implementation to be smarter.

Read more...

Useful Learning Resources For Web Designers

Fortunately, learning is not limited to only a small minority of people anymore; it is not even limited to visiting a school or a university. The Internet makes it possible for us to distribute knowledge at a small price, and is full of resources to expand everyone's knowledge on an enormous variety of topics.

Useful Learning Resources For Web Designers

Since learning is a lifelong task that doesn't stop after pursuing a certain academic certificate, this round-up is not only dedicated to beginners. It's for everyone who wants to become an expert in a certain field or is simply curious about the Web and the latest tools and techniques around them.

Read more...
Advertisement Advertise with us!

Creating A Client-Side Shopping Cart

Session storage is a new feature introduced by the W3C’s “Web Storage” specification. It’s supported in Internet Explorer 8+, Firefox, Chrome, Safari and Opera Desktop (for a complete list, please consult “Can I Use”).

var total = parseInt( sessionStorage.getItem( "total" ) );
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem( "total", updatedTotal ); // '240', a string

In this series of articles, we’ll cover in depth a practical implementation of session storage by creating a complete e-commerce shopping cart with the sessionStorage object and jQuery.

Read more...

How To Build A CLI Tool With Node.js And PhantomJS

In this article, we’ll go over the concepts and techniques required to build a command line tool using Node.js and PhantomJS. Building a command line tool enables you to automate a process that would otherwise take a lot longer.

Build A CLI Tool With Node.js And PhantomJS

Command line tools are built in a myriad of languages, but the one we’ll focus on is Node.js. For those short on time, I’ve condensed the core process into three steps. This is the secret sauce to convert your Node.js script into a fully functioning command line tool. But do stick around to see what else I have to show you.

Read more...

Four Ways To Build A Mobile Application, Part 3: PhoneGap

This is the third installment in a series covering four ways to develop a mobile application. In previous articles, we examined how to build a native iOS and native Android tip calculator. In this article, we’ll create a multi-platform solution using PhoneGap.

Four Ways To Build A Mobile Application, Part 3: PhoneGap

Adobe’s PhoneGap platform enables a developer to create an app that runs on a variety of mobile devices. The developer accomplishes this largely by writing the user interface portion of their application with Web technologies such as HTML, CSS and JavaScript.

Read more...

How To Create A Self-Paced Email Course

When I realized I had written what seemed to be a course (i.e. not my usual article or book), I was left with a sense of panic. There are so many options for running an online course, and all of them seem slightly confusing or time-intensive to set up.

How To Create A Self-Paced Email Course

Then I remembered the autoresponders feature in my newsletter application (I use MailChimp, although every newsletter software has it). I could trigger lessons with autoresponders and deliver course material to where most people spend most of their day: the inbox.

Read more...

Smashing Book #4: Behind The Scenes

If you’re a graphic designer, you will often have to work with off-the-shelf material created by others — for instance, combining ready-to-use fonts with images from a photographer or stock website. Also, you’ll often have to follow the branding already developed by someone else.

Smashing Book #4: Behind The Scenes

It’s OK; it’s a part of the job, and you shouldn’t be bothered by it. But the part of a project that almost every graphic designer likes and is proud of the most is something that you can do from scratch, something that you have control over and can sign off on confidently: illustration.

Read more...

Applying Transformations To Responsive Web Design

To most Web developers, it sounds controversial until you hear the punchline: Last summer, the developers in charge of Google’s Chrome browser floated a proposal that went virtually unnoticed by the technology press, which was to remove support for an established W3C standard that every other browser vendor still supports.

Applying XSL Transformations For Responsive Web Design

The standard in question? Extensible Stylesheet Language Transformations, otherwise known as XSLT. In reaction to this news, most Web developers would likely shrug and say “So what?” That’s unfortunate. Transformations are a simple yet powerful technique for separating content and presentation in Web applications.

Read more...

Introducing Live Extensions For Better-DOM: What They Are And How They Work

After recently writing an article on “Writing A Better JavaScript Library For The DOM”, I realized that the topic is indeed a very complex one and that it's important to understand what exactly live extensions are and how they work.

Introducing Live Extensions For Better-DOM: What They Are And How They Work

In today's article, I will answer most questions that were asked regarding "live extensions" and help you get going with this new concept.

Read more...

One Solution To Responsive Images

Responsive images have been, and are, one of the hardest problems in responsive Web design right now. Until browser vendors have a native solution, we have to think on the fly and come up with our own solutions. “Retina” images are especially a challenge because if you have sized your layout with ems or percentages (as you should!), then you cannot be sure of the exact pixel dimensions of each image being displayed.

One Solution To Responsive Images

In this article, we’ll look at one solution to the problem that we implemented on our portfolio website at Etch, where you can see an early working version in the wild.

Read more...

↑ Back to top