Attention Designers: How to Optimize Your Files for Developers Building Responsive Websites

I’m constantly asking our developers how I can make things easier for them. Ultimately my hope is to build files that establish a smooth transition from design to development. Designing for the developer not only saves time, money, and frustration, but it also improves it’s usability by creating for the platform. Currently I’m focused on learning more about responsive and how I can make my designs more friendly for this exploding new technique.

The following outlines some technical tips on how you can become a more effective designer for responsive projects.Not sure what responsive design is? Check out my last blog post: Responsive Design Vs. Mobile Websites

Use a Fluid Grid

Perhaps the most obvious tip would be to divide your design files using a grid with consistent gutter widths. Here at Demac Media we prefer a 12 column grid as it divides nicely into several combinations producing an adequate amount of layout flexibility (see below).

Having your content divisible into proportional chunks makes it easier for images and copy to stack and align at different sizes.

Developers are looking at the content in terms of percentages and the ability to divide our designs mathematically not only makes their job easier but also creates a more precise pixel-perfect layout.

Working within a grid can require you to think outside of the box (no pun intended), if you are working with clients requesting an organic or fluid layout. No matter what the project, alignment and consistent spacing will always be an important factor in creating a masterful clean design and there are always ways to get creative on top of the grid.

EM’S RESOURCE OF CHOICE?
I’ve been using Guide Guide to automatically generate pixel perfect grids in Photoshop.

Scalable Assets & Typography

The core of responsive revolves around providing an optimal viewing experience of your website on any device. You need to ensure your images are crisp when a user visits on their phone as well as on large monitors. We also have to consider the wicked new retina (double density displays) available. Displaying pixelated or blurry images portrays an outdated and unprofessional business presence.

Use vector or smart objects whenever possible for seamless scaling without distortion.

Unfortunately photographs are not produced in this format. Providing your developers with an additional PSD containing images larger than necessary will give them flexibility with image density. Intricate high resolution photos can produce massive files leading to slower page loading speed. Allow your developers to make the pragmatic decision on what images should be used at different breakpoints.

Another technique to address is that developers will attempt to duplicate your designs using CSS whenever possible. Titles, gradients, simple shapes and shadows will ideally be incorporated with code over images for sharper elements at any dimension. This doesn’t mean you need to design all your work flat and simple, but it’s something to keep in mind.

Eventually retina displays will migrate to all devices and users will be surfing the net with their televisions (they already are)! There is little reason to panic now, but there is no harm in forward planning. Using Scalable Vector Graphics (SVGs) wherever possible will make things easier for you as technology transitions.

EM’S RESOURCE OF CHOICE?
Font Awesome allows you to install icons as a font which gives them infinite scaling without distortion. They have an extensive gallery with over 350 icons and counting!

Rapid Prototyping

Rapid prototyping is the technique of taking wireframes and creating quick and dirty versions of web sites. No images or copy. It takes your research and forethought to the next level and allows you to see exactly how things will reflow. This helps you optimize breakpoints on all devices and identify awkward page widths requiring attention.

When starting a website I suggest you begin by making a list of all the necessary content (e.g. logo, tagline, search bar, Twitter feed, etc.). Then number these elements in hierarchy of importance. Once you have a clear picture of what will be on your site and what needs strong visual presence you can begin wire-framing and defining elements by simple boxes and lines. Below is a collection of some of my hand drawn and digital wireframes during the planning process.

With web projects (especially in the eCommerce world), time is often of the essence. Rapid prototyping will enable your team to have a structured plan of attack and will minimize unexpected problems during the building process. It’s one thing to think a layout will work and it’s another to actually test it out. This extra time is almost always worth it in the long run.

EM’S RESOURCE OF CHOICE?
There are many applications you can use for your rapid prototyping. I’ve been using Balsamiq. It’s extremely quick, easy-to-use and allows you to add interactive features.

Think Mobile First

Often I get so excited about jumping into a new project that I just want to get designing! I am a Photoshop girl in my Photoshop world, creating magic pixels, one smart object at a time. However, responsive designing requires a lot of forethought. It’s imperative to consider what the content is and how the layout will transition before getting creative. Habitually a lot of designers will do their initial concepts for desktop computers and scale to tablet and mobile from there. This can cause conflict when you have a complex web design which doesn’t convert to mobile in an effortless way. Don’t get yourself in a position where you have a client approved web site that is impossible to scale to mobile dimensions. Stay focused on the big picture because it is extremely important in achieving optimal results.

When designing responsively, we have to consider more than just screen size. Recognizing user behaviours on a desktop vs. a mobile device and altering your designs accordingly will lead to a better user experience. Below you will see the product listing page for Mackage (one of Demac’s clients). This is the exact same page, but configured and re-arranged for different devices.

Font legibility, image sizes, pushing buttons with fingers instead of cursors, even a users posture and viewing distance looking at a phone vs a monitor a few feet away. Keep this in mind when you approach your designs in order to make the appropriate solutions for your responsive transitions.

Utilize New Technology

It’s only natural that with the evolution of responsive techniques there is an outcry to upgrade our tools for a more efficient and adaptive work flow. Applications have been popping up all over the place which allow designers or developers to use a resizable design surface to visually create breakpoints and reflows instead of using code.

This develops a much quicker way to determine the proper flow of content with design aesthetics driving the decisions. The new Adobe product even allows us to import Photoshop elements as assets into the workspace. These solutions are extremely impressive, but only time will tell which (if any) will become a new application in designers day to day work flow. I’m excited for what’s to come and I think it’s extremely important to evolve our techniques alongside growing technology.

EM’S RESOURCE OF CHOICE?
TBD. I need some more time to experiment with these applications in order to make an informed decision. It will be interesting to see which application takes the forefront, but I’ve got my eye on Adobe Edge Reflow. Macaw also looks quite impressive.

Bonus Tips & Tools

1. Organize And Label Your Files To The Max

It may seem obvious to you, but make it painfully obvious where and what every element is. I usually stay roughly organized throughout and then clean up my files once they’re approved.

EM’S RESOURCE OF CHOICE?
I recently found a Photoshop plugin called Renamy, which allows you to select and rename multiple layers. Big time saver!

2. Send Examples

It can be hard to explain how you want an element to transition. Websites are becoming more interactive and sometimes it’s hard for your developers to envision what you’re thinking.

EM’S RESOURCE OF CHOICE?
Here are some excellent resources from Tympanus.net: Sidebar Transitions and Page Transitions.

3. Drink Beer Together

Aren’t you excited this is a recommendation?! Getting to know the developers you work with on a personal level will lead to more open communication and stronger collaboration. Understanding someone as a person helps you understand their working style as well. By building respect for one another you will become a stronger team.

EM’S RESOURCE OF CHOICE?
Mill St. Organic or a little Pinot Grigio.

How users interact with the web continues to rapidly change and our multi-device design methods need to evolve alongside. As designers, we need to push ourselves to build and organize our files in ways that may be outside of our comfort zone. Ultimately this will create a smoother designer/developer transition and give your projects the platform they need for future technological advancements.

Do you have any tips or tricks when working with developers on responsive web projects? I’d love to hear your ideas in the comments below.