Lately I've been seeing that many developers are not minifying their JavaScript code. This process of minification, reduces the size of the HTTP request for your JavaScript, improving your website's performance. So, let's revisit minifying your JavaScript.

In Closing

Hopefully this quick screencast on minifying your JavaScript has helped you out. Remember, performance is very important, we want to have our websites running at their best. Thanks for watching.

It's a fun little soundbite to talk about how the web is responsive right out of the box. With no authored CSS at all, a website will flow to whatever screen width is available. If your site isn't responsive, you broke it.

Well that's almost true, but as Adam Morse says in this new project:

HTML is almost 100% responsive out of the box. These 115 bytes of css fix the 'almost' part.

Things like images and tables can have a set widths that would force a layout wider than a viewport. And of course, the meta tag.

And look at that TLD!

Direct Link to Article — Permalink

Fluidity is a post from CSS-Tricks

There’s no need to bust out a physics textbook to make your iOS 7 app’s views animate like real-world objects. With iOS 7’s new Dynamics API, views can be influenced by gravity, attached to each other with springs, and bounced up against boundaries and each other.

Physics engines are no stranger to game designers. Whether it’s the perfect gravity-induced parabolas of Angry Birds or the swinging candy in Cut the Rope, we’re used to objects in games feeling real. To get this effect, game designers don’t write code to set the position of each object manually. Instead, they use a physics engine that treats the elements as bodies in a simulation and that uses Newton’s laws of motion to calculate how they move over time.

The birds travel along a trajectory determined by physics (Image credits).

In using the engine, designers specify an object’s bounciness, its density, the level of gravity, and how things are attached to each other. In iOS 7, Apple made that technology available to UIKit-based apps as well. With these new UIKit features, we can integrate dynamic behavior without having to learn how to program a game engine. If you use them carefully, your UX will be more immersive and intuitive because users will interact with it as they would with objects in the real world.

Where Would You Use This?

If you are looking for places in your app to upgrade to feel more iOS 7-native, any animation is a candidate. You can see it all over the built-in apps, which will give you some ideas. I’d look anywhere that you’re already using several parallel animations with overlapping timelines and timed triggers to start other ones. Are you trying to do something that the Dynamics system would do for you automatically?

Another great candidate is anywhere you are using pan gestures to manipulate views, particularly with screen transitions. Play around with the camera icon on your phone’s lock screen to see an example. Tapping it will create an impulse force from the bottom, which gravity eventually overcomes. Dragging it up and dropping it shows how the view has an elastic bottom that bounces against the phone’s edge. You can even give the view an initial velocity by slamming it down.

See It in Action

I’ve put together a simple video demo of Dynamics to show how you can use it for view transitions. The first part of the video shows what you could do easily in iOS 6 and below. It simply attaches a pan gesture to the view and uses its y-translation to set the center of the view. This gives the illusion that you are directly moving it. Then, when you end the pan gesture by lifting your finger, it triggers a Core Animation that returns the center to its starting position. This automatically slides the view down as if it’s falling.

Video demo of UIDynamics in action.

The second part is similar but is done with the Dynamics physics engine. We’re still making a pan gesture, but we attach it to the view with a spring. Then, we make the bottom of the screen a solid barrier to collide against and add gravity. Now, when we grab the view, it follows our finger as before (but with a springy connection), and when we let go, the view falls with an acceleration determined by the gravity field. When it lands, it bounces. We can also throw the view by letting go while our finger is moving, and the velocity of our finger will be imparted to the view.

You can get the project by cloning DynamicUtility on GitHub. If you don’t have Xcode, you can install it on your machine through the Mac App Store. In Xcode, open DynamicUtility.xcodeproj, and run it in the simulator (Command + R). If you have a developer account with Apple, the effect is even better on a phone.

Piecing It Together With Core Animation Before iOS 7

Core Animation is a powerful system, and you can absolutely get exactly the same results using it (with a lot of work). The advantage of the Dynamics system is that you are able to express what you want in terms of physical attributes, and layering more and more complex behavior and playing around with it are much easier. In an equivalent Core Animation set-up, the variables that govern the behavior aren’t as clear. Let’s look at a simple example.

In the Xcode Utility Application template, we start with two views, the main and flip side of an application. Let’s add a way for the user to pan the main view up to get to the flip side view using gestures and Core Animation.

To start, all we need to do is add a pan gesture to the storyboard and attach it to our view. Then, we can set up its selector action to send this message:

    - (IBAction)onPan:(UIPanGestureRecognizer*)pan {
        static CGFloat startY;
        CGPoint delta = [pan translationInView:self.view.superview];
       
        if (pan.state == UIGestureRecognizerStateBegan) {
            startY = self.view.center.y;
            [pan setTranslation:CGPointZero inView:pan.view.superview];
        }
        else if (pan.state == UIGestureRecognizerStateChanged) {
            CGFloat newY = self.view.center.y + delta.y;
           
            // detect a collision with the bottom
            if (newY > startY) {
                newY = startY;
            }
            // attach the pan to the view
            self.view.center = CGPointMake(self.view.center.x, newY);
           
            [pan setTranslation:CGPointZero inView:pan.view.superview];
        } else if (pan.state == UIGestureRecognizerStateEnded) {
            // gravity?
            [UIView animateWithDuration:.3 animations:^{
                self.view.center = CGPointMake(self.view.center.x, startY);
            }];
        }
    }
    

This is a simple implementation of an interaction that enables you to drag a view that drops back into place when let go. The first comment shows where we stop the user from dragging it down below the screen’s edge. The second one shows how we’re attaching it to the finger. The final comment shows where we animate it back into place.

This is a great start, but consider how you’d implement the following features:

1. imparting your finger’s velocity to the view when you let it go,
2. attaching the view to your finger with a spring,
3. accelerating the drop based on a gravitational force,
4. detecting collisions against the boundaries and bouncing the view against them.

Even after you did this, changing the animation so that gravity is stronger, the springs are springier, and every variable is exactly right would leave you with a code mess, or, to paraphrase Philip Greenspun, you’d end up with a poorly specified, half-implemented physics engine. We can use the Dynamics system instead.

iOS 7’s New Dynamics System Makes This Much Easier

The Dynamics system enables us to define a complex system of behavior by combining a few simple concepts. Let’s use a few to recreate the sliding effect in a more lifelike way.

Setting It Up

The Dynamics system is made up of three basic parts. UIDynamicAnimator controls the whole system by running the physics simulation and moving and rotating the objects. Each body in the simulation is represented by UIDynamicItem, a protocol implemented by UIView. Finally, we specify what we want to happen by creating and adding UIDynamicBehavior objects to the animator.

We’ll combine a few behaviors to get the effect we want:

• UIAttachmentBehavior
  This lets us attach items to each other or to an anchor point. The attachment may be either a stiff strut or springy.
• UICollisionBehavior
  This adds a boundary that contains the views. If we had more than one view, we could use this to make them bounce against each other.
• UIGravityBehavior
  This specifies a gravitational field. If a view isn’t attached to something and isn’t up against a boundary, then gravity will draw it down (or in whatever direction we want).
• UIDynamicItemBehavior
  This describes attributes of the item it’s attached to. It controls whether the item may be rotated, how elastic it is and how much it resists movement.

To use the Dynamics system, we construct the behaviors we want and attach them to the items that they will affect. Then, we add them to the animator.

A Simple Gravity Demo

Let’s build a simple demo so that you get the hang of it before we jump into a view transition. First, you’ll need these properties in your header:

    @property (strong, nonatomic) UIView *body;
    @property (strong, nonatomic) UIDynamicAnimator *gravityAnimator;
    

Next, in your viewDidLoad message, add a call to this message:

    -(void)addBodyView
    {
      self.body = [[UIView alloc] initWithFrame:CGRectMake(155, 40, 10, 10)];
      self.body.backgroundColor = [UIColor blackColor];
      [self.view addSubview:self.body];
    }
    

This will put a black square at the top of the view. In your storyboard, add a “Demo Gravity” button, and connect it to this action:

    - (IBAction)onDemoGravity:(id)sender {
      self.body.center = CGPointMake(160, 50);
      self.gravityAnimator = [[UIDynamicAnimator alloc]
        initWithReferenceView:self.view];
      UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc]
        initWithItems:@[self.body]];
      [self.gravityAnimator addBehavior:gravityBehavior];
    }
    

The first line repositions the view at the top. The second line creates the animator, with your view as its reference. The next two lines just say that the body view we added is affected by gravity. Now, run it in the simulator, and tap your “Demo Gravity” button. The black square will drop to the bottom of the screen (and then keep going).

The Dynamics system also support collisions against objects and boundaries. A common boundary is the view that contains the animation (also called the reference view). To designate the reference view as a boundary, just add these three lines to the end of onDemoGravity:

      UICollisionBehavior *viewIsBoundary = [[UICollisionBehavior alloc]
        initWithItems:@[self.body]];
      viewIsBoundary.translatesReferenceBoundsIntoBoundary = YES;
      [self.gravityAnimator addBehavior:viewIsBoundary];
    

Now, when you run it, the box will bounce at the bottom of the view.

Our next step is to see how to control the parameters of the animation. To do this, the Dynamics system has a special behavior named UIDynamicItemBehavior, which is a collection of attributes that affect a given item. Let’s alter the elasticity of the box so that it bounces higher. Just add these lines to onDemoGravity:

      UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc]
        initWithItems:@[self.body]];
      itemBehavior.elasticity = .8;
      [self.gravityAnimator addBehavior:itemBehavior];
    

The elasticity defaults to 0 and can be set to any number between 0 and 1, where 1 represents complete elasticity — and a very long animation if we had used it in this case.

If you want to get a feel for how realistic this simulation is, try rotating the body view with this line (right after you’ve set its center):

      self.body.transform = CGAffineTransformMakeRotation(M_PI/5.0);
    

When you run this, you’ll see that the simulation takes shape into account as well and bounces the object off its edges, not just up and down.

Making A Custom Behavior

For our simple demo, creating the behaviors right in an action message was fine, but for real apps, this would get complex very quickly. One nice thing about UIBehavior is that you can create composite behaviors by inheriting an object from UIDynamicBehavior and then adding child behaviors inside of its init message. This lets us package a set of related behaviors in a reusable class. Let’s replace our original iOS 6 gesture-based animation with a dynamic one by creating a new behavior class named LDUSlideBehavior.

Here’s a header file for our sliding behavior:

    #import 
    
    @interface LDUSlideBehavior : UIDynamicBehavior
    
    -(instancetype) initWithItem:(UIView*) item;
    
    @property (strong, nonatomic) UIPanGestureRecognizer* pan;
    @property (strong, nonatomic) UIAttachmentBehavior *attachment;
    @property (strong, nonatomic) UIDynamicItemBehavior *behavior;
    
    @end
    

Our init takes the view that we’re going to slide. It looks like this:

    -(instancetype) initWithItem:(UIView*)item
    {
        if (self = [super init]) {
            // create a pan gesture
            self.pan = [[UIPanGestureRecognizer alloc]
               initWithTarget:self action:@selector(onPan:)];
            [item addGestureRecognizer:self.pan];
           
            // attach the view to a spring
            self.attachment = [[UIAttachmentBehavior alloc] initWithItem:item
                attachedToAnchor:CGPointMake(item.center.x, item.center.y)];
            self.attachment.damping = .1;
            self.attachment.frequency = 5.0;
           
            // make a boundary
            UICollisionBehavior * collision =
               [[UICollisionBehavior alloc] initWithItems:@[item]];
            [collision setTranslatesReferenceBoundsIntoBoundaryWithInsets:
                UIEdgeInsetsMake(-item.superview.bounds.size.height, 0, 0, 0)];
            collision.collisionMode = UICollisionBehaviorModeBoundaries;
            [self addChildBehavior:collision];
    
            // add a gravitational field
            UIGravityBehavior *gravity =
               [[UIGravityBehavior alloc] initWithItems:@[item]];
            [self addChildBehavior:gravity];
           
            // behavior parameters for the view
            self.behavior = [[UIDynamicItemBehavior alloc] initWithItems:@[item]];
            self.behavior.allowsRotation = NO;
            self.behavior.elasticity = .4;
            self.behavior.resistance = .7;
            [self addChildBehavior:self.behavior];
        }
        return self;
    }
    

Breaking this down, we can see that all we’re doing is creating standard behaviors and adding them to our custom behavior. We don’t add UIAttachmentBehavior immediately because we want that to be active only when the pan gesture is active, so we’ll add and remove it in the onPan: message.

UICollisionBehavior uses insets on our parent’s bounds to set up a barrier around our simulation that has its top side set to be offset by the height of the view. The left, right and bottom boundaries are left in place, so that the view can slide up but not left, right or below the screen’s bounds.

One thing to notice is that we’ve set allowsRotation to NO. Strictly speaking, this shouldn’t be necessary because all of our motion is vertical and confined to a view with 0 horizontal space and all of the view’s edges are perfectly flat. There is simply no room for the view to rotate. However, UIDynamics sometimes have floating point errors, and if you don’t do this, then the view will sometimes rotate as you drag it. It’s impossible in the real world, but, as we know, computers can only simulate the real world. Another issue you might run into with dynamics and rounding is that a simulation could go on forever if the floating point error causes tiny movements. If you see this, you can monitor the animator’s elapsedTime and then call removeAllBehaviors to stop it.

We still need to implement a pan gesture handler, and we’ll do that right in the custom behavior class. Here it is:

    -(void)onPan:(UIPanGestureRecognizer*)pan
    {
        if (pan.state == UIGestureRecognizerStateBegan) {
            [self addChildBehavior:self.attachment];
        }
        else if (pan.state == UIGestureRecognizerStateChanged) {
            CGPoint delta = [pan translationInView:pan.view.superview];
            self.attachment.anchorPoint =
                CGPointMake(self.attachment.anchorPoint.x,
                            self.attachment.anchorPoint.y + delta.y);
            [pan setTranslation:CGPointZero inView:pan.view.superview];
        }
        else if (pan.state == UIGestureRecognizerStateEnded ||
                 pan.state == UIGestureRecognizerStateCancelled ||
                 pan.state == UIGestureRecognizerStateFailed) {
            [self removeChildBehavior:self.attachment];
            // impart the velocity to the view when we let it go
            [self.behavior addLinearVelocity:
                [pan velocityInView:pan.view.superview] forItem:pan.view];
        }
    }
    

When the gesture begins, we add the UIAttachmentBehavior, and we remove it once the gesture is over. While it’s changing, we just need to move the attachment’s anchor point to stay under the user’s finger, and the behavior object will move the view that we attached to it as if it were attached with a spring.

Note the last line of function, where we take the velocity of the pan and add it to the item that’s being dragged. This enables the animation to transition very smoothly from panning to what happens after we let it go.

Finally, we need to clean up our pan gesture when we are deallocated.

    -(void) dealloc
    {
        [self.pan removeTarget:self action:@selector(onPan:)];
        [self.pan.view removeGestureRecognizer:self.pan];
    }
    

This class may be infinitely customized. For example, the damping and frequency of the spring may be changed using the attachment, and the gravitational constant may be set in the gravity behavior. The UIDynamicItemBehavior class has a few more properties to play with. And we’ve only scratched the surface, because other behavior classes can simulate magnets, constant and impulse forces and a few other things.

Adding the Behavior to an Animator

Now that we have a custom behavior class, adding it to the animator is easy. The UIDynamicAnimator class must be instantiated and retained throughout the life of the simulation, so the easiest thing to do is use a property on your view controller.

Then, just allocate it and add in the behavior, like so:

    -(void)setUpDynamics
    {
        self.animator = [[UIDynamicAnimator alloc]
          initWithReferenceView:self.view.superview];
        [self.animator addBehavior:[[LDUSlideBehavior alloc]
          initWithItem:self.view]];
    }
    

That’s all there is to it. To download the full project, just clone DynamicUtility on GitHub

Where To Go From Here

Take a good look at your own apps. A good place to start with dynamics is when you transition from one screen to another. If you are using a swipe gesture, consider replacing it with a pan gesture attached to a view, and let the user directly manipulate it. For example, instead of swiping an object to bring up a menu to delete it, let them throw it away directly by tossing it.

But be careful. Don’t add dynamics just to show off. Used correctly, dynamics add playfulness and immersion but, if overused, can make an app feel like a mishmash of fancy effects.

To learn more, watch the WWDC 2013 video “Getting Started With UIKit Dynamics,” then download the Dynamics Catalog sample app. This sample app is a comprehensive catalog of the various behaviors and their uses. And if you need details on any of the classes or messages, read Apple’s official documentation on UIDynamics in the “UIKit” section.

(al, il)

© Lou Franco for Smashing Magazine, 2014.

WordPress is the most dominant CMS on the market.

18.9% of websites run on WordPress and, just last year alone, it’s been downloaded 46 million times according Matt Mullenweg, the publishing platform’s creator.

WordPress.com — a service that hosts WordPress sites — is reportedly home to over 76 million sites, serves 13.1 billion pages a month, and is the platform of top, high-traffic web properties like TechCrunch and CNN.

WordPress isn’t going away any time soon, and will most likely remain to be the most popular CMS for years to come.

The community and support behind WordPress is massive, as evidenced by the 26,000 user-contributed plugins listed in the official WordPress plugins directory (and the figure doesn’t include the countless other plugins that aren’t listed).

Why Look Beyond WordPress?

There’s been a lot of buzz in the web design community lately about other options besides WordPress.

There is a lot of talk about flat-file CMSs, micro CMSs, and static site generators — fresh takes on the age-old content management problem.

For some, WordPress has become bloated and overly complicated, especially for small-scale sites that might be better served by simpler CMS options.

If you’re looking for the latest WordPress alternatives, the following options are the ones to consider in my opinion.

Ghost

Ghost is probably the most talked about WordPress alternative right now.

Historically, WordPress started out as blogging software. Now, it’s grown into a full-fledged CMS that can run any type of site — it’s capable of being the publishing platform of online stores, photo galleries, online directories, and any other variety of sites you can think of — which, for software, spells bloat, complexity and excess features you don’t need if you simply want to run a blog.

This is where Ghost comes into the picture.

As described in its Kickstarter video, Ghost is straight-up positioning itself as a WordPress alternative for people interested in just blogging.

Ghost doesn’t want to be a CMS that does everything for everyone. Ghost only wants to excel at being a blogging platform.

Its beautifully simple UI allows bloggers to compose their posts without being distracted by menus, widgets, settings and tools not related to writing.

Ghost is built with JavaScript using Node.js, a web development platform optimized for performance and scalability due to its non-blocking I/O model. This could offer Ghost huge speed improvements over the PHP-based WordPress, with one case revealing Ghost to be 678% faster than WordPress.

Compared to WordPress, however, it’s much harder to find a budget shared hosting service that can run Ghost due to its Node.js dependence. In contrast, WordPress and its required web server technologies PHP and MySQL are commonly available on a vast majority of web hosts.

But if you’re using a VPS, dedicated server, or shared hosting that has Node.js installed, then you’re good to go. Also, keep in mind that Ghost is still new, and if it takes off, it will only be a matter of time before one-click installs for Ghost on web hosts become the norm.

Jekyll

If you want a fast-loading site then you can’t do any better than serving plain static HTML documents. And if you want to do this more easily for content publishing, then Jekyll is the answer.

Jekyll is a static site generator — a system that takes text files and stitches them together to create a static HTML site.

Jekyll was created by Tom Preston-Werner, co-founder of GitHub.

To use Jekyll, you must be unafraid to get your hands dirty using the command line, so it’s best suited as a WordPress alternative for hackers.

You can host your Jekyll site for free using GitHub Pages, since Jekyll is static and doesn’t require server-side programming, unlike WordPress.

If you’re a developer who would rather work with pure code than mess around with a UI, if you want an extremely high-performance publishing solution and the option to host your site for free, Jekyll is definitely worth trying.

Statamic

Statamic isn’t a static site generator like many people mistakenly refer to it as. It’s a flat-file CMS that mixes static and dynamic elements. (The name Statamic comes from the words static and dynamic).

With Statamic, your pages are rendered on-the-fly just like WordPress, but it does so without a relational database management system (e.g. MySQL) by storing content in a simple directory structure using flat files.

Just because a site uses flat files doesn’t mean it can’t do dynamic things.

People are surprised when I tell them my content-centered web typography side project, Typewolf, doesn’t use a database-driven content management system. Instead it runs on just flat files. It does lots of dynamic things like a WordPress site. For example, clicking on a font’s name will generate pages showing sites using that font but there’s no querying of a database to slow things down.

My opinion on Statamic may be biased because it is my CMS of choice. Because I’m such a fan of this content management system, I even launched a site that sells Statamic themes — which might further add to my partiality to this CMS.

Besides Statamic, Kirby and Pico are worth checking out as well if you want to give flat-file publishing platforms a try.

Craft

Created by well-known ExpressionEngine add-on developers, Pixel & Tonic, Craft is a new CMS that aims to bring simplicity to managing content.

Craft was built from the ground up to focus only on the core features that a CMS truly needs. The software’s goal is to avoid the bloat that comes with trying to include every possible feature and fulfill every single use-case.

Craft has a unique business model where the core features are free, so you can get a basic site set up without having to purchase anything.

However, if you need additional functionality for your site, you can buy packages. An example of this is the Localize package, which you can purchase if your site needs multi-language capabilities. Another package you can add to your Craft site is the Cloud package, which provides support for popular cloud services like Amazon S3 and Google Cloud.

Craft has a growing community behind it, which is essential for any new CMS wanting to be a viable alternative to WordPress.

Perch

When I first heard about Perch, I assumed it was named after the type of fish I’d catch in ponds near my house as a kid. Now, from their website, I’m realizing it’s "perch" as in the things birds stand on.

Perch describes itself as a "really little CMS". With this publishing platform, you can build your site however you want and then add in CMS functionality and dynamic components later on. So you don’t need to build your site around Perch from the beginning, which is great for existing sites that just want a few pages to be editable and dynamic.

Perch has a control panel with a clean and simple UI that makes it an excellent CMS to hand off to your non-technical clients.

Company sites and "brochureware" sites managed by non-tech site owners seem to be the market for Perch. The platform has add-ons available that could make it a nice solution for larger sites as well.

Looking Forward

I’m excited to see which of the above online publishing platforms become successful in the next few years, and which ones will fall out of fashion.

If you’re already committed to WordPress and have no major issues with it, then it might not be a good idea to just dive into one of the above alternatives for your next big web project.

There’s no sign WordPress is on the decline, and in fact it’s showing growth year over year.

But if you have a small web project, if you have qualms with WordPress’s development direction out of being just a blogging platform, if you want a different approach to content management, or if you simply want to explore what else is out there, then spend a little bit of time playing around with Ghost, Jekyll, Statamic, Craft or Perch.

You might just discover your new favorite CMS in the process.

Related Content

• 10 Basic Tips for Improving WordPress Themes
• Free Resources to Help You Build Your Next WordPress Site
• 6 Questions To Ask Before You Install A WordPress Plugin
• Related categories: WordPress and Tools

About the Author

Jeremiah Shoaf is a freelance designer from Colorado. His side projects include a web typography gallery called Typewolf and Type & Grids, a site offering HTML5 templates and flat-file CMS themes. He is @typewolf on Twitter.

The post 5 Modern WordPress Alternatives to Keep an Eye On appeared first on Six Revisions.

Pixel-perfect icons and typography stand out among the crowd online. Obviously we all want to strive for such refined work, but sometimes even after trying we still end up with something a little… less. Pixel Hinting is one of the skills that takes an automatic feature and improves upon its results. Despite the ultra high resolution of displays today—like Apple’s retina displays—we still need to “fake” smooth curves lest we end up with a pixelated mess.

Many designers and developers are moving more towards SVG and vector based approaches now; with the support only getting better by the day. But even so, vector based solutions have a long way to go before they’re mature enough to use in production. SVG is great for displaying vector shapes, but not so hot at resizing those shapes. So like everything else out there, there is a time and place for each solution.

What are vectors?

Vectors are essentially rendered results of the mathematical representation of a shape. When you see anything on your screen, it’s because your computer rendered those objects and bound them to the pixels on your display. In doing so, your computer has also made decisions on what should, and shouldn’t, be displayed as whole pixels. For example, the uppercase letter “D” has both a perfectly straight line, and a curved one.

As you can see, without anti-aliasing the curved line on the “D” is quite pixelated. So to compensate, when vector shapes are rendered they are usually anti-aliased to provide a more… robust appearance. Instead of only displaying pixels that fall within the vector outline entirely, pixels are gradually shaded out. This tricks your brain into seeing a smoother line on curved shapes that don’t snap to the pixel grid perfectly.

Above you can see how the rendered “D” is given what is called half-pixels to help remove the jagged pixelation. However, this same feature also introduces a problem: computers are awful at figuring out what is visually appealing. So while adding these half-pixels makes the rounded corners look fantastic, it also makes the top/bottom inner line look blurred. The automatic anti-aliasing that occurs when a vector shape is rendered ends up making most parts of shapes and typography look great, but leaves others at an even worse quality than it started with.

Hello, pixel hinting.

Now that you have a short background on vector shapes and how they work, let’s jump into the real work. Pixel hinting involves moving the vector’s anchor points to rest on pixel borders in a more aesthetically pleasing way. Making those straight lines more perfect, while still leaving the half-pixels to the curves. Most commonly, pixel hinting is used on typography and shapes for raster images (logos, icons, branding, etc). Now, most importantly, in order to properly adjust your vector it must be in the size and shape you want it. Once you’ve pixel hinted your work, rotating or resizing it could—and probably would—throw all that work away by automatically anti-aliasing it again. Before we get started make sure the following settings are adjusted (I’ll be using Photoshop for this task):

• Turn on your pixel grid (View > Show > Grid, also make sure Extras is checked above the Show menu)
• Make sure your grid has a gridline every 10 pixels, with 10 subdivisions. Or something similar so that there is a line between each pixel.
• Disable snapping (View > uncheck snap). We don’t want anchor points snapping at 1px increments, we want to move points within pixels.

Pixel hinting typography

The process for doing shapes vs typography is slightly different, so I’ll walk you through both. Ideally with typography, you want to kern your type before or during your hinting process. Regardless, pixel hinting should be one of the last things you do.

First, select the typography you want to pixel hint and make a copy of the layer, then transform that layer into a shape.

You can see that the text falls awkwardly off the grid, both on the horizontal as well as the vertical axis. To fix this, we’re going to gently nudge each letter’s anchor points until they align more closely with the pixel grid laid out. The goal, is to get the shape lines close, if not directly on, the grid lines. Zoom in to nudge anchor points more precisely. While doing this, frequently zoom out to ensure your adjustments look alright.

You don’t want to conform precisely to the grid, as that takes away the advantages of anti-aliasing in the first place. Instead, try to simply keep things consistent—only allow half-pixels on one side of each axis. For example, I always allow half-pixels to the right and top of letters, while forcing the left and bottom edges flush to the grid.

As you can see, the “get in” has been roughly adjusted, while the “touch” remains as is. Just like kerning, pixel hinting is much more of a craft than a science. It takes a keen eye to look and discern whether the work looks better or worse after adjustment. Don’t be discouraged if you find typographical pixel hinting rough, iterate and keep working with it. If your result still looks sub-par, you can always delete the layer and copy fresh from the original again. It takes some time to get typography in particular to look great, just keep going and sooner or later your hard work will pay off.

Pixel hinting vector shapes

Generally, pixel hinting shapes is reserved for icons or logos. Again, you want to make sure your shape is at the size and rotation you want it before starting as adjusting it later could throw away all your hard work. Adjusting shapes is a lot easier and requires less of an eye for intrinsic detail. That being said, more complex shapes take longer and are harder to adjust, so it’s best to start with something simple.

Above, you can see that our arrow and circle sit just slightly off where we would like them. The half-pixels created by anti-aliasing are causing the entire shape to look blurry as a result. So let’s nudge everything to fall on the grid a little better.

There we go! By adjusting the anchor points to line up with the grid, we end up with a much sharper icon. It’s important to mention that since this icon is a circle, any adjustments to the width had to also be mirrored to the height as well. Also, don’t forget to make sure the inside of the shape looks good and consistent as well. If you look at the previous image you’ll notice the inside sides of the circle aren’t anti-aliased the same.

In conclusion

With the work above, the result is an image that looks sharper and more professional. Of course, you can apply these techniques to much more important things than a button.

While the automatic anti-aliasing done by your computer looks acceptable, it could be better. So when it comes to your logo or important icons/typography in raster form, pixel hinting is more than just a niche skill; until the day we’re all using high pixel density displays, it’s essential.

Anodyne: 6 Distressed Fonts from Yellow Design Studio – only $9!

Controlling an iPhone or Android phone with just your voice and a noise-cancelling headset is doable, but frustrating.

I usually enjoy making fun of people who walk around wearing Bluetooth headsets, seemingly talking to themselves. So of course I felt like a hypocrite last week wandering around downtown San Francisco doing exactly that.