Working With A UX Developer

I’ve long since noticed that the way I approach development is completely different than most other developers. While I always aim to get the final product as close to the design mockups as possible, a lot of clients are often surprised at how well I do that (I thought that was the basic job of a front-end dev!)  and that they almost never need to give me mobile or responsive designs for a site. I could take a full sized mockup and make it work (and look) just as great on mobile.

I knew that this was because I went to school for design, even though I’d been doing front-end development since middle school (really!). What I didn’t know was that there was actually a name and strategy for this – until I got to chapter 8 of  Smashing Book 5: “Testing and Debugging Responsive Design” by Tom Maslen. Tom mentioned a technique that helps relieve some of the work designers have to do, while cutting out bugs and the mismatch that comes from design mockups not fitting the correct viewports/breakpoints. This is accomplished by only designing the smallest and largest mockups and handing it to the developer to create the transition layouts between the two. I recommend you read that chapter before the rest of this post.

Trying to reduce the number of mockups I have to handle when coding is what I’ve done from the start, and I’d like to argue that it can be taken it a bit further. I always let new clients know that I don’t need *any* responsive mockups. They can hand me the full sized design and let me take it from there. Using good design and UX practices, I can actually code the site from the desktop-down (gasp!), while maintaining clean code and fast loads. The site is coded from the largest sized first, using percentages and ems so it’s automatically responsive. Then, I simply start reducing the heights and widths of the browser and insert MQ’s as the content or design begins to break down.

This means that my code is *never* device dependent – no matter what new size of device comes out (obviously disregarding something that would only be 100px wide or some silly small number) the site works. And since the designer has allowed me to take control of the main responsive designs – a bunch of issues that arrive from responsive mockups not matching the final product are avoided.

I often have clients try to hand me mobile mockups that are in odd sizes – like 650px wide (probably assuming this will help with retina, it does NOT). Considering the basic iPhone is only 320px wide, this 650px ‘mobile’ mockup isn’t going to work at all. 40px headlines are unreadable for obvious reasons. Of course, I could resize the entire document down to the minimum 320px – this often works, but sometimes will result in font sizes that are 10px and again, unreadable. This requires going back to the client and explaining that some of the layout and sizes have to change because this isn’t an optimized layout for small screens. This takes a lot of time to go back and forth with.

Allowing you to take control of the design in smaller than desktop sizes would avoid issues like this. You should be able to take care of the main chunk of responsive designs yourself, and then have the designer come back in at any time to make small tweaks. Often the designers I work with love the general layout, but want a button bigger, or a background a different color, or some other small tweak. Once they see the responsiveness in action, it’s a lot easier for the designer to put design and function together. This also improves the relationship between designer and developer, as there’s some amount of trust going both ways.

In order to accomplish something like this, you need to have basic design skills and an understanding of typography. You need to know when it’s time to break columns down to one, or why the type needs to become larger or smaller at certain sizes. Margins and paddings that look great on desktop or even middle (tablet-ish) sizes can look ridiculously long on small mobiles. Also, a sense of how to reducing the scrolling amount on mobile is important. All of this takes a bit of design and a bit of development to accomplish.

It also takes a lot of trust on the part of the client. Designers don’t like handing over control and it can sometimes be hard to demonstrate how a site is going to look. But I find that them to previous responsive work I’ve done (or even to something someone else has done) helps with visualizing functionality and design. Take some initiative and control into coding the responsive portion without a specific design mockup, and your work will speak for itself.

Making it easier for everyone in the long run (and yourself!), means more time for other fun things (like yarn and The Walking Dead).