10 Tips for Fast and Hassle-Free Markup Outsourcing

I’ve been working with markup for years and seen many layouts performed with varying professional levels. I’ve seen everything, from sloppy web pages with mismatched margins between the same blocks, to pixel-perfect projects with sophisticated typography. Once, I was even asked to code a scanned 70-page copy of a PDF magazine about horses. Seriously, the client wanted to turn that into a site.

10 rules

What’s the best way to organize your design files before they are handed off to developers? There are a few must-follow rules that will help you save time, money, and energy.

1. Write Thy Specs

Does that sound like a commandment? It is! If there is anything on your mind that you’d like to discuss, do share it! Believe it or not, markup developers are not telepathic; although, some of them are more skilled than street magicians. If one can’t read people’s minds, there is no chance of building a career in webdev. Only you know what a gallery or any other block with several behavior options should look like. If you don’t specify this, the coders will implement these functions at their own discretion. Then, it is like trying your luck at the roulette. If it’s red, everyone is happy. If it’s black, developers are making updates. If it’s zero, it is likely you are already pulling your hair out. The lack of specs multiplies the number of modifications and causes project delivery delays.

2. Not Sure? Don’t Order Stuff

For example, many customers order Twitter Bootstrap only because they’ve heard how awesome it is. It’s like having 12 extra buttons on the mouse. If you have them, it does not mean you will work faster, right? You won’t start clicking, pasting and scrolling faster if you have no idea what those buttons are for. The same applies to CSS frameworks. Do you know technical features of specific tool sets and their benefits? If yes, you’ll save yourself and your developer loads of time. You might also think something like, “I’ve read on Twitter that this framework is awesome! I should have it!” In this case, let’s face it: the harsh truth is it will be just the waste of time and money, and you will most likely be disappointed at the end. If you are not sure about something, mention it before the work starts and ask for advice.

3. Describe Your Links

Make sure there are examples in designs as to what the text links, buttons, and their hover states should look like. It is important to mark these layers or folders in Photoshop. Note that various CSS3 effects now replace the underline on hover, which used to be popular. Let your developer know what effects you want. It won’t cost you anything!


4. Send Your Fonts

Do you have custom fonts in your designs? Send your font files to get them implement with @font-face. If the fonts are premium, send the fonts pack licensed for the web.

5. Specify Your Icons

It’s pretty trendy to use icons as vector graphics, i.e. when icons are not placed in a sprite.png file, but embedded into a custom font or used as an SVG file. Why? First of all, icons will look great on any screen, so there is no need to order retina display compatibility. Secondly, the page will load faster because font icons weigh less than icons stored in sprite. All you need to do is design icons using shapes in Photoshop, or import vector icons from Illustrator to the Photoshop layout and put them into smart objects. The designer can also use ready-made icons from a database like Font Awesome, if you are okay with standard solutions.

6. Know Your Breakpoints

How many breakpoints do you actually need? There is no universal answer to this question since it depends on your design and preferences. If you use Twitter Bootstrap or Zurb Foundation, you can rely on the framework functionality with some slight adjustments done by the developer. If it’s crucial to you how your design looks on intermediate resolutions, designs for smartphones (320 px) and tablets (768 px) should be enough. The most cost- and time-effective solution is to provide designs for a desktop and smartphone. Unless absolutely necessary, there is no need to design mockups for a large number of screen sizes. The markup developer will have to follow your design for each breakpoint. This will affect your time and money.

7. Save Designs in a Proper Format

Many freelancers and agencies out there will promise to slice your artwork even from a JPEG file. Yup, pretty much everything is doable, but you will get your final files sooner if you provide designs in PSD. The reason is simple; files in AI and PNG formats are converted into PSD before the coding starts. As for JPEG files, things get even worse. Developers will need extra time to pick fonts, clean up some elements to avoid compression artifacts, etc.


8. Keep in Touch

The developer often has some important questions before proceeding with the code. Sometimes a customer orders an urgent project and disappears almost up until the deadline. As a result, something is done wrong, the deadline is missed and the client is unhappy. However, it could have gone smoothly if the developer had all the answers in time.

9. Remember Font Sizes for Retina Displays

The following mistake is very common: the designer creates a 640 px wide layout (2 times bigger than 320 px), and uses a standard font sizes, e.g. 12 px. On a mobile device, everything will be reduced two times and the font size will be 6 px instead of 12 px. The text will be impossible to read. It makes the job even more complicated when the design does not imply the normal font size at all! If the developer leaves it at 12 px, the name of a product or navigation will not fit in the given space. Therefore, in the design for retina displays, the smallest font size should be more than 18 – 20 px.

10. When Pressed for Time, Don’t Go for a Per-Page Delivery

Before sending each page to a client, a coder sends it to a QA department to test it on all devices and in all browsers. Instead of fixing all bugs once, the QA team is running tests every day. If there are any updates from the client after the first page is delivered, the work on the following pages is postponed. It takes about 20% more time to complete a project with per page delivery.

To sum things up, the formula for a successfully outsourced project looks like this:
a PSD file with nicely organized layers + a functionality described in detail + design compatibility with selected options = fireworks.



About the Author: Roman is the Head of Markup at PSD2HTML. With over 8 years of experience in web development, he introduces new technologies to refine the website creation process and ensure the highest quality product for each customer.

1 comment

  1. morontt Jan 13, 2015

    cool article 🙂

All posts Back to top