PURLIZE BLOG

Unbounce, the fastest and most powerful landing page platform is now supported by Purlize!

Customers of Purlize (freelancers and agencies a like) can now convert PSD designs of landing pages into Unbounce for easy tracking, tweaking, and optimizing.

We first learned about Unbounce when a client of ours came to use with a unique request to support their platform. After becoming familiar with their coding standards and practices, we immediately saw the value a service like Unbounce could provide to the clients… of our clients.

1-click A/B testing and simple analytics are just two of the great reasons to consider offering Unbounce to your clients.

Our pricing of Unbounce templates is similar to that of WordPress. $500-700 for basic (1-3 page) implementations, and on up from there… Be sure to contact us for a custom quote!

Did you know? Check out the Unbounce Blog for great online marketing tips and tricks.

We have recently been featured on a number of directories.

• CSS Down Under
• Design gallery featuring a number of beautiful CSS sites.
• CSS Lounge
• Database of well-designed CSS sites.
• Website Launchpad
• Directory of sites with a focus on SEO.

This article is a part of our client interview series. Throughout the series, we will be exploring the aspirations of our clients and how we fit in achieving them.

Who are you, and what do you do? What do you want the world to know about you?
Applied Consultants are an IT consultancy specializing in providing bespoke, turnkey solutions. Our flagship service is centered around our very own ecommerce platform, Mantiki. We use Mantiki’s sophisticated functionality to build highly tailored ecommerce web sites for our clients’ and provide fully managed hosting. We use our experience of working with corporate clients to provide a robust, professional service, whilst maintaining a highly flexible and personalised approach.

When did you first start using us?
April 2010

How did you find our services worked with a firm of your size?
It was easy to work with Purlize [formerly SnobbySlice] – we quickly found that they have a work ethic very close to ours – flexible and personalized service and very keen to ensure we were happy with all the delivered HTML. We have been able to focus on our core developments with the confidence that SnobbySlice will take care of producing all our HTML at high quality. Our requirements for HTML coding come in bursts, therefore it has been more economical to use SnobbySlice than to employ full time HTML coders.

What was the learning curve like? Advice for newcomers?
The success of any outsourced project depends as much on the Client as on the Supplier. We were very diligent in producing annotated PDFs from the design PSDs with clear instructions for Purlize [formerly SnobbySlice] to code from. This is an essential discipline for any outsourced project – your requirements must be clear enough for the supplier to code from and to test against. It also helps to differentiate between bugs and changes, although we found SnobbySlice very responsive to bug fixes and readily accommodated changes that were not in the original spec. Any technical requirements/conventions should also be mentioned up front. The big time difference between Anchorage and London meant we had to be more careful in our planning, but as long as we allowed sufficient time, we did not find this to be a barrier.

This free website design template is brought to you by Purlize, coders of web designs. This web design template follows web standards and practices, has a fully functional image slider in the featured area, and has support for IE6 and above. This is a companion freebie from the tutorial, Create a Modern Lab Theme Web Design in Photoshop. We would greatly appreciate leaving the attribution link in the footer of the design, but the attribution may be removed at your discretion.

Read more and download.

This article is a part of our client interview series. Throughout the series, we will be exploring the aspirations of our clients and how we fit in achieving them.

Who are you, and what do you do? What do you want the world to know about you?
KeyLimeTie is a full-service design, development & digital strategy agency. We help clients communicate more effectively and intimately with customers through interactive marketing channels. KeyLimeTie specializes in web and mobile technologies across a variety of platforms; we provide content management, ecommerce, and custom application solutions, while also assisting customers with social media campaign and reputation management.

When did you first start using us?
We first started using FeatherCode soon after KeyLimeTie was founded in 2007.

How did you find our services worked with a firm of your size?
Feathercode’s expertise and experience has proven to be a valuable asset. Their quality of work and consideration for our specific needs has often resulted in an accelerated timeline, providing additional capacity for us to pursue additional customer projects.

What was the learning curve like? Advice for newcomers?
For our first few projects we experienced an excessive number of back-and-forth revisions with the code FeatherCode had generated. We expanded our documentation to include specific scripting instructions and structured our Photoshop files to include separate hover state layers. This greatly reduced, and in many cases eliminated the back-and-forth revisions with future projects.

This article is a part of our client interview series. Throughout the series, we will be exploring the aspirations of our clients and how we fit in achieving them.

Who are you, and what do you do? What do you want the world to know about you?

My name is Wayne Weber and I am the founder of giftofcollege.com. We are a startup that allows families to gift register their 529 college savings plans. We launched in March 2011 and run our company out of Huntington Beach, CA.

When did you first start using us?

Our web developers at KeyLime Tie referred SnobbySlice to us in November 2010.

How did you find our services worked with a firm of your size?

As a startup, outsourced services are crucial. SnobbySlice not only takes away the most tedious parts of a developers job, they do it

fast and flawless.

What was the learning curve like? Advice for newcomers?

Not much to learn. My advice is to trust these guys and take a lot of hours off your plate.

This article is a part of our client interview series. Throughout the series, we will be exploring the aspirations of our clients and how we fit in achieving them. Jacob chose to keep his identity anonymous in accordance with our non-disclosure policy.

Who are you, and what do you do? What do you want the world to know about you?

My name is Jacob. I am lead designer for a software development firm in Oklahoma. When I’m not jazzing up websites and mobile apps I spend time with my wife and kids, waging war on COD on xbox live, and cheering on the OKC Thunder!

When did you first start using us?

I began using Purlize (Feather Code) a couple of years ago. Our company was going through a big boom in business and our 2 man design & front-end development department needed to spend more time designing and solving UI problems rather than dealing with the HTML cutups. It also became my lifesaver twice in those two years when two of my co-workers moved on to other opportunities. FC helped me stay productive and sane when I had too much on my plate.

How did you find our services worked with a firm of your size?

For us, the partnership has become a no-brainer. We are still in full control of the design and development for our custom services but we have gained more time for design, more room in the budget, and increased the profit margin by using Purlize. It is nice to have a partner that is very skilled in what they do and pays attention to the little details.

What was the learning curve like? Advice for newcomers?

For me there didn’t seem to be much of a learning curve. I try to consider what knowledge I might need if I was going to do the cutup and try to clearly document those details. However, I think organization of the PSD is critical. I try to group sections in folders and label every layer for ease of use. This takes 5 minutes to a half hour at most, but it goes a long way in making sure everyone is on the same page, and I believe, makes the turn around time so much quicker.

1. Submit.
Submit your project through our quote form after reading and understanding how to get the most out of purlize.

2. Receive Estimate.
Within 24 hours, we will respond to your quote with a formal estimate allowing you to accept/decline. We’ll also include any questions we may have about the project.

3. Accept Estimate, Pay Invoice
After accepting the estimate and working through any project questions, we will supply you with an invoice to be securely paid prior to us starting the project. If you’re interested in flexible payment terms, please contact us for questions.

4. Coding Begins, Receive Deliverables
With a paid invoice received and all project questions answered, we will begin coding and deliver the initial version of the files by our agreed deadline.

5. Bugs, Fixes, and Tweaks Until Satisfaction
Throughout the implementation of your project, we’ll be standing by for any bug fixes or tweaks required to make your project a success. While changes to your project will be accompanied with an additional fee, any coding mistakes agreed upon prior to payment will be promptly fixed.

6. We standby for your next order.

How to:

Prepare your project

We need the following three items:

1. A project description file
2. Your design in a layered document
   • Supported Document Types:
   • Photoshop — Preferred
   • Fireworks
   • InDesign
   • Illustrator
3. Annotations for your design.

Project Description File
A project description file acts as a spec for the project you’re submitting.

Here is a quick checklist of items to include with your description file:

• Specific requests regarding the coding structure
• Optional – JavaScript library preference
• Description of functions, animations or other items that aren’t apparent in annotations.

Example of a project description file:

1. PSD: HEADER
A. Note the “LINKS: HOVER” layer for display when a user hovers over the link.
2. PSD: TABS
A. Note the “MY ACCOUNT: ON” layer for display on selection of a tab.
B. Note the “TABS: HOVER” layer for display on hover on a tab.
3. PSD: SEARCH
A. Note the navigation categories (My Account, Shipped, To Ship, Returned) should all contract on selection. See the “BROWSE CLOSED” folder layer for a similar example.
B. Note the options under the navigation categories (My Account, Shipped, To Ship, Returned) should display with the red background on hover and selection (see MY ACCOUNT –> MY LABELS –> HIGHLIGHT).
C. Note the “POPUP” folder layer for display on selection of links in sidebar.
D. Note the “DATES” are interactive sliders that should be hooked up with JQUERY.
E. Note the “SELECT DATES POP UP” folder layer for display on selection of the calendar icons in the Dates category.
F. Note the “BROWSE CLOSED” folder layer for display on selection of the “Refine your search” link.
G. Each category (Addresses, Cities, Zip codes, Countries, Purchase, Purchase price, Sell date) should be individually contractable. Display should replicate invididual display of “BROWSE CLOSED” folder layer.
4. PSD: RIGHT
A. Note the “SEARCH: SELECTED” folder layer for display on selection of the search box.
B. Note the “SEARCH BUTTON” layer should be coded to use coded copy and be expandable if a longer or shorter button name is used. The button with text should NOT be coded as one image.
C. Note the “ALL ITEMS: ON” folder layer in the “SUBNAVIGATION” folder for display when a user selects or hovers over a link.
E. Note the “See more” links for each result returned. These should display additional text without the “…”

Layered Document
A layered document is required in order for us to code a design.

Here is a quick checklist of items when completing your design file:

• The file is a supported file type
  • Preferred – Photoshop Document (PSD)
  • InDesign (INDD)
  • Layered FireWorks File (Layered PNG)
  • Adobe Illustrator (AI)
• Small file size
  • Breaking out your files into individual pages can not only help reduce confusion when slicing, but can also bring them down to manageable sizes.
• Clean, organized layers
  • If you are unable to do this yourself, utilize TidyPSD (http://www.tidypsd.com/).

Design Annotations
By annotating designs, turnaround time and the number of fixes required to complete a project are reduced. Annotations allow you to describe elements and specifics regarding items that otherwise would be missed.

To annotate designs , you can do any of the following:

• Include an annotations layer in your PSD or other layered document.
• Export any notes into a JPEG file.
• Use Jing Project (http://www.jingproject.com/)  for notes, hosting and videos.

Two examples of great annotations:

Notes in PSD.

Notes on Fixes.

Communicate With Us

Contact us with any questions, comments or feedback.

Since we are working as your remote coding team, it’s important to keep communications as clear and concise as possible.

Here is a quick checklist of items to run through when sending us a note:

• For bug fixes, please include all necessary information.
  • Did you clear your cache?
  • Browser and OS you’re currently using.
  • Detailed, annotated screenshot of the issue (example: xxxxxx ).
  • Include any/all materials needed to complete the fixes (fonts, JavaScript details, etc.).
  • Allow up to 24 hours to respond with fixes to your project.
• Limit your project to a single thread
  • Multiple requests spread across multiple email threads can do more harm than good.
• Try to limit your fixes, questions, and feedback into a single message each round.
  • Including your feedback and fixes as an attachment to a single note allows us to keep things centralized and reduce response times.
• All questions are valid. We are here to help.
• Use your intuition. Make sure to share any strict deadlines, and whether or not this is your first slicing experience.

Working remotely from your campus allows us to keep costs down and deliver a better service. By using tools like annotated screenshots and concise feedback, we can close the physical gap between us to code your project into a success.

Read some of our client interviews to learn what it’s like working with us.

We recently had the opportunity to work with our friends at Folio Focus to create a great one-page portfolio template. They did the design in Photoshop and we (back when we were called SnobbySlice) did the HTML/CSS and JavaScript coding. The design uses a dark textured background simple layout that allows for you to list information about the specific services that you offer, showcase items from your portfolio, and provide some biographical information about yourself.

If you’d like to use the template, get it from the download page at Folio Focus.