I’ve just added a new labs section where I will be adding CSS experiments and demos.

I’ve just added  a new project for Why Digital to my portfolio.

For some reason I always forget this trick. If you open an modal window and need to stop the content behind from scrolling simply add a class to the body that sets the overflow to hidden and the position to fixed or absolute depending on what device you are targeting.

/* For mobile devices use fixed position */

body.modal-open{
    overflow: hidden;
    position: fixed;
}

/* For desktop use absolute instead of fixed position */

@media (min-width: 640px){
    body.modal-open{
        overflow: hidden;
        position: absolute;
    }
}

A series of short videos I put together for the launch of Opus’s ICONS book of Polaroid Portraits.

These videos combine archival footage from various photoshoots with some of the stunning portrait photography in the book.

Read more →

Enquire JS Responsive Javascript

Enquire.js is an awesome little Javascript library for responsive web design.

I have been increasingly using Enquire.js recently in projects. It allows you simply and easily to match the media queries in you CSS with Javascript callbacks. This is a very clean way to perform any javascript functions which are needed based on the matching or un-matching of media queries.

This is much more efficient and cleaner way to handle responsive Javascript than using techniques such as adding multiple resize functions to the browser window.

Check out the project page on GitHub.

iOS7 Safari and Mail Sketch Templates

This Sketch file contains templates of the Mail and Safari interfaces from iOS7. There are individual artboards setup for each app in iPad and iPhone sizes.

I created this template to visualise websites and email designs running on iOS devices. Simply drop your design in to the template and edit the titles and urls for perfect visuals.

Feel free to download the Sketch template and use it as you wish in your next project.

Sketch Icon

A number of years back I came across a hybrid vector/bitmap drawing app for Mac OS X called DrawIt. It combined non-destructive vector drawing tools and powerful bitmap filters. This seemed a perfect combination for icon, user interface (UI) and app designs in the early world of iOS. DrawIt however suffered from a number of issues which prevented it from becoming more than just another promising drawing app.

DrawIt App

Fast forward about four years and the developers of DrawIt, Bohemian Coding, have released the the third version of the spiritual succesor of DrawIt, Sketch. It is a great app for design in general but really shines for user interface and screen based design.

For years Photoshop has been the tool of choice for most UI designers. Photoshop is a fantastic all round tool but it is not geared specifically towards UI design and this is where Sketch fits in perfectly.

At its core Sketch is purely vector based, you could argue that it is actually closer to Illustrator than Photohop in this respect, and this is one of Sketch’s biggest strengths.

The first thing that you notice about Sketch is the interface. It is simple and focussed on the task at hand. There is no clutter with unnecessary options or tools, but don’t let that fool you. Behind the simplicity lies a powerful and sophisticated graphics application.

Precision

Sketch and resloution independence

In a world of increasingly different screen resolutions, designers have had to change their way of thinking and working. Gone are the days of creating a design which works at the standard 72 dots per inch.

In the case of app design this can mean creating multiple different versions of the same image. Resolution independent artwork has become ever more important, therefore creating non-destructive vector artwork allows us as designers to easily resize images for different devices.

Whilst Sketch’s vector tools may not be as powerful and sophisticated as those found in Illustrator they are perfectly suited for the task at hand. Non-destructive Boolean operations allow for the creation of sophisticated shapes from common primitives. Precise control of shapes can be achieved through Sketch’s contextual left panel. This allows you to ‘design by numbers’ which allows for pixel perect control. This is particularly important for lower resolution screens/artwork.

Artboards

Sketch’s artboard system is perfect for mobile app design. You can setup multiple artboards of any size, a feature which has been possible in more recent versions of Illustrator. Artboards can be divided across multiple pages. This is useful to organize and visually create structure in a project.

Sketch Mirror

With purchase of the additional iOS app Sketch Mirror you can easily view your artboards on iOS devices as you work. The latest version of the mirror app works flawlessly, removing some of the frustrating bugs from earlier versions.

Exporting your Sketch designs

The export features in Sketch are a delight to work with. They remain one of its biggest selling points for me.

Anyone who has been involved with designing apps for iOS or Android will tell you what a chore creating the images for these can be. Often you will need to create multiple versions of the same image at different resolutions. Sketch makes this task easy through powerful export controls.

You can define anything you want to export from artboards in their entirety through to objects, groups of objects and custom defined areas. Add to this the ability to easily output each item at multiple resolutions and you start to get an idea of just how powerful this feature is.

Simply select what you want to export and then define resolutions you want and Sketch handles the rest. This even includes appending whatever identifier you want to the files (@2x etc.). Since Sketch is vector based this means you end up with the highest quality imagery at each size. It is huge timesaver especilally if for example you are dealing with Android and its various resolutions (ldpi, mdpi, hdpi, xhdpi, xxhdpi).

These are just a few of my favourite features of Sketch. There are numerous other cool features I could go into detail on, such as the built in templates for the likes of the iOS UI and Icons, CSS attribute creation, the super useful reusable symbols and more.

I really like Sketch and have been increasingly using it in favour of Photoshop. Recently, I have started transitioning as much work as possible over to Sketch. In fact I have re-created artwork for some ongoing projects in Sketch as I see it saving a lot of time in the future. Sketch isn’t a replacement to Adobe’s tools but is great app to complement them in the right circumstance.