GET IN TOUCH

When working with a talented team of designers, developers are often confronted with new and interesting challenges in order to make a site look great. And sometimes (all the time) we developers tend to react to such challenges with theatrical proclamations like, “It simply cannot be done!” or — my personal favorite — “Inconceivable!” But, as we all know in our hearts, there is usually a solution to be found and a design to fully realize.

I was confronted with a recent example of such a problem when a design called for an ordered list of 3 columns, each column with a different color. Simple enough, right? Well, upon closer inspection, it appeared that every single list item was a different color, subtly changing as if the list itself were a gradient:

After going through the 3 stages of developer doubt (“it can’t be done”, “welll maybe…”, and “what if I…”), it dawned on me that we represent colors mathematically all the time, so shouldn’t there be a way to use math to figure this out? Bingo.

A simple function can be devised in just about any language that takes a start color, an end color, and a size (the number of ‘steps’ you want to create), and spits out an array of colors as beautiful as any rainbow! The array can then be used to generate inline CSS that solves this design conundrum.

Below is a function that accomplishes this task in PHP (note that it converts hex values to RGB in order to simplify the math).

function get_gradient_array( $start_color, $end_color, $size ) {
 
  $start_r  = hexdec(substr($start_color, 0, 2));
  $start_g  = hexdec(substr($start_color, 2, 2));
  $start_b  = hexdec(substr($start_color, 4, 2));
  $end_r = hexdec(substr($end_color, 0, 2));
  $end_g = hexdec(substr($end_color, 2, 2));
  $end_b = hexdec(substr($end_color, 4, 2));
 
  $colors = array();
  for ( $i = 0; $i < $size; $i++ ) {
    $red = round($start_r - ($start_r - $end_r) * ($i / ($size-1)));
    $green = round($start_g - ($start_g - $end_g) * ($i / ($size-1)));
    $blue = round($start_b - ($start_b - $end_b) * ($i / ($size-1)));
    $colors[$i] = 'rgb(' . $red . ', ' . $green . ', ' . $blue . ')';
  }
  return $colors;
}

Happy coloring!

We’re looking for a Marketing Coordinator. You would work alongside our Director of Strategy and Creative Director and work on fun and exciting marketing projects.

What You Bring:

Strong attention to detail
▪ Strong eye and aesthetic
▪ Thorough understanding of social media
▪ Self motivated
▪ Google product and Microsoft Office knowledge
▪ High aptitude for technology
▪ Demonstrated interest in advertising and marketing
▪ Top candidates will have previous experience with Google AdWords or Facebook Ads

Responsibilities include:

▪ Basic management of Google keyword lists
▪ Search and social ad copywriting
▪ Proofreading
▪ Simple photo selection and cropping
▪ Conduct competitor analysis
▪ Researching industry trends

Please submit resume, cover letter, and a Spotify playlist to hello@cobblehilldigital.com Please no calls.

by Margaret Rogers, Lead Project Manager
Margaret oversees the micro and macro management of all work. A liaison between clients and the Cobble Hill team, she is our point of contact, supervising each project both internally and externally.

margaret-rogers-compressor

I will be the first to admit, before I came into my current role as project manager (PM) at Cobble Hill, I also had fleeting thoughts of “What does a project manager even do?” The title is vague, and beyond the obvious “oh, they manage the project–duh,” it does not provide insight into the either the daily or long-term responsibilities of the position.

A project manager plays a vital role in the design and development process of all Cobble Hill’s creative and strategic projects. Without a project manager, there would be no one to oversee the overall workflow, communication, and operations of the project at hand. Let me break it down for you a little further.

Serve as the main point of contact for the client
From kickoff to launch, the project manager serves as the main point of contact for the client. Any and all day to day correspondence is directed to the project manager, who always responds in a timely fashion. Think of them as your #bestie for the duration of the project. You will work side by side to achieve the exact aesthetic and functionality you have in mind, ultimately launching the website, print collateral, or brand that is everything you imagined — and more!

Relay communication between the client and internal strategy, design, and development teams
After sharing your ideas, thoughts, and feedback with the project manager, they distill it into an organized fashion and pass it along to the relevant team members. This involves digesting the information, organizing it so that the design and development teams can quickly grasp the directives, providing any supporting assets or information required to get the job done, answering any questions, and setting a realistic deadline for completion. Depending on the item, this communication may be done solely via Basecamp and/or over Slack, or it may require either a one-on-one or group meeting. Oh, and it always involves a paper trail for future reference!

Provide strategic insight into the overall direction of the project
Since the project manager works very closely and directly with the client from day one, they have an intimate understanding of the client’s brand, thought process, aesthetic, and communicative nature. The PM works hard to fully understand the ins-and-outs of the business, organization, product, or event, going beyond a skim-the-surface grasp of the specific deliverable. Ultimately, this means that the PM is able to relay critical foresight and strategic direction on the project, suggesting additional needs or perspectives that should be considered to successfully achieve the end goal. A good project manager should be able to anticipate a client’s thoughts and feedback before sharing or presenting any deliverables to them. Because of this, the PM works closely with the creative teams on design and/or functionality deliverables before passing anything off for client review.

Manage resource allocation
Another important operational aspect of the project manager’s role is human resource allocation. Especially in a small creative agency such as Cobble Hill, projects must be reviewed from a macro perspective nearly every day to ensure that all hands are on deck when the time comes. As items moves through the creative process, it entails a review of the agency’s workflow and human resource availability. If one project is held up, it could potentially affect the outcome of another project, and therefore it is important that PMs know what is going on at all times. This means the project manager must communicate effectively and frequently with design and development team members about expectations. If it is anticipated that something may not be completed within deadline, it is the duty of the responsible team member to communicate that to the project manager as soon as possible. With such knowledge, the PM can then take a holistic review of that project, and all agency projects, to prioritize as needed.

Ensure projects adhere to both timelines and budget — and communicate changes as needed
One of the less glamorous, but very important, aspects of the project manager’s role is tracking a project’s budget and timeline. Timelines are a two-way street, and it requires that both the client and the agency adhere to agreed upon deliverable and review deadlines. If the project goes over budget or is anticipated to require additional time, it is the responsibility of the PM to quickly and clearly communicate this to the client. Furthermore, if a project begins to creep beyond the agreed upon scope of work (aka “scope creep”), it is the project manager’s responsibility to flag this and bring it to the attention of both the agency and the client. Transparency is a vital part of any business matter, especially when it comes to client relationships.

In a nutshell, that is an overview of a project manager’s role. However, in a small team setting like Cobble Hill, everyone provides a helping hand into other areas of the business as needed. Hopefully this breakdown helps you to gain a quick and dirty grasp of what a project manager actually does within an agency setting. We are currently hiring a Project Manager, see more about applying here.

ig-feed-3

The newest addition to the Cobble Hill team, Lacey Terry, brings with her an expert knowledge of all things social media. She offers her insider tips on increasing your Instagram reach.  

Instagram is one of the largest and fastest growing social media platforms out there. Over 300 million people use Instagram around the world. That’s a lot of people. So, why do you only have 300 followers?

  1. Identify Your Aesthetic

Whether you are a business or an individual, there are a few ways to gain attraction to your Instagram feed. First, you must establish an aesthetic for your feed. Having photos that are edited in a similar fashion are more pleasing to the eye and will attract fellow instagrammers.

  1. Follow Strangers

Find a couple accounts that are similar to yours. See who their followers are and how they are engaging with that particular account. A fast and easy way to get some attention is to follow their followers. Obviously, their followers are interested in that account and what they are providing, so if you have a similar feel they will most likely follow you as well.

  1. Hashtag with Care

Hashtags can be helpful. Some believe the more hashtags, the better. This is not necessarily true. Adding one hashtag, maybe two, is best and most effective. For instance, #charleston is very broad and used often by locals and tourists. As of September 2, 2015 #charleston has 1,206,598 posts, and that number is growing every day. A super easy way to engage with others is to click on a hashtag that has to do with your style or business and like photos that you see. Maybe take it a step further and comment on a couple posts. You will be surprised how much attraction these simple tasks create.

  1. Quality over Quantity

Most businesses believe that The Number is the only thing that matters. Yes, a high number of followers is appealing to first time viewers, but how many of those followers are actually engaged on a regular basis? The most important thing for a company’s instagram is to have loyal followers that care about their products or services.

  1. Dedicate Time

I started @abitofcharleston in January of 2015 with 3 followers.. me, my mom, and my boyfriend. I added a photo or two that I already had on my phone every day for a week or two to build up content on my feed (People are less likely to follow an account with only one or two photos). Once I had 6-8 photos, I started following people every chance I could. Instagram has a limit, so I could only follow around 50 accounts per hour. Being dedicated is huge. I continually did this for 6 months, and eventually I had 4500 followers. And these aren’t just random followers. They are followers who are genuinely interested in my photos and what @abitofcharleston has to offer. Now, as long as I post visually appealing photos regularly, followers come on their own.

Make sure to follow Cobble Hill on Instagram!

 

A Short Background

by Mary Hipp, Developer at Cobble Hill

A little over a year ago, I started a 3-month bootcamp to learn how to code. It was General Assembly’s Web Development Immersive, and it was life-changing for me. Programming came pretty naturally to me, and I knew that I had found my niche. I moved to Charleston, SC after completing the course, and started working at a creative boutique agency here called Cobble Hill. I was terrified, primarily because this job was going to be focused mostly on building client-facing and design-heavy custom WordPress websites. CSS was not my forte, and I had never written one line of PHP. Still not really sure why they hired me….

Back in present day, I consider it a privilege to turn our designers’ beautiful designs into beautiful themes and websites, and am proud to say that CSS and JavaScript feel like second languages to me. I have also become very comfortable with creating a functional and structurally sound WordPress back-end customized to fit each client. That being said, I still know little PHP beyond the WordPress codex; I rely heavily upon plug-ins and reusable code snippets to solve my back-end roadblocks.

A month ago, I was assigned my first Rails app for work, and was chomping at the bit to get started.  I immediately felt like I was back in my comfort zone, and with a newfound appreciation for my first programming language, Ruby (my instructor at GA had always drawn PHP with devil horns attached, and now I know why). What follows is just a short lesson in the value of self-confidence, which is always important for programers, but all the more so for beginners. I have found that you have to trust in yourself that you can solve the problems that you face, and only then will you learn and grow.

Hopefully it can help someone out there emotionally, if not technically.

The App

The web app in questions is called Prelaunchr, modeled after Harry’s very successful campaign to expand their mailing list prior to launching their product. Essentially, users can sign up for the mailing list and receive a unique referral link to share via social media; they can then earn rewards based off of how many friends sign up using their unique link. A screenshot of Harry’s campaign is below, showing the different levels of rewards as a user’s referral number increases. We were building this as a project for a very exciting new client, Fireside Provisions (think Blue Apron for campers), who’s e-commerce site we were also building and has since launched.

1-fbcsOTQvnxGXb-R3jPMHbA

Harry’s Prelaunchr Campaign

It’s a pretty simple system, but seems to actually work. I was fortunate that the dev team at Harry’s decided to make their code open-source and share their successful campaign with others; most of the app’s skeleton was done for me. I cloned their repo and got to work.

Initially, it was all CSS and Rails templates. I never thought I would miss clown hats so much. Beyond that, however, I found myself feeling nervous and insecure; I hadn’t really worked in an unfamiliar Rails app in months, and that dry spell had shaken my confidence.

One feature that wasn’t included in Harry’s code that we needed involved detecting fraudulent emails. It would essentially prevent users (or bots, for that matter) from using fake email addresses to pad referral numbers. The client wanted to use SendGrid for this, which has many features; I was going to use it to send an initial transactional email upon a user signing up, and to then detect which of these emails bounced back. This would allow us to remove those fake referrals from users’ counts.

Sending The Transactional Email

My first instinct was to search the internet for a gem to do all of this for me. Again, I was so dependent on WordPress plugins, that I had almost forgotten my own self-sufficiency! Luckily, I was able to recognize that a lot of the resources out there really over-complicate this. I opted to follow these directions straight from the source; all I needed was an ActionMailer class, a simple HTML email, and some SendGrid configuration in my environment file. Call it each time a new user is created, and bam, Inbox(1).

Bounce Detection

I spent so much more time on this than I needed to. Once again, I wasted hours prowling the internet and trying different gems that had way too much magic under the hood to come close to working with my app. One had fancy configurations with hardly any documentation, another involved hooking up an intermittent post request from SendGrid that would that would include my app’s bounce report. I almost got that one working, but couldn’t quite get my gem’s endpoint synced up.

I was finally giving a go at a SendGrid gem that utilized HTTParty when it hit me like a brick! I know HTTParty! I understand API’s, and SendGrid has a pretty killer one built right in. Why was I wasting my time trying to use someone else’s code when I can write a handful of lines and accomplish it myself?

1-gIhUx-UjtlleSyivcDWzEw

My API call to get bounced & invalid email addresses from SendGrid.

I called my get_bounces method as each existing user visited the site, so that they would see an accurate referral number free of fakes. And this half of hour of work actually worked.


I love my job. It allows me to be creative and solve problems, while building a product I am proud of. It’s too easy, though, to get into the pattern of coming home from a day of working and not having that drive to keep working. This experience was a wake-up call for me, though, and frankly I’m a little freaked out that I have become so dependent on others’ solutions. I had forgotten that I can actually be really good at back-end code and logic; they used to be my bread and butter!

I can’t wait to integrate some of my new skills and sharpen some of my old skills with future projects, new and old, Rails and otherwise. More importantly, I now appreciate the importance of staying sharp in all realms of web development, not just the ones that you’re currently receiving a paycheck for.

Oh, and don’t forget to check out Fireside Provisons!

Screen Shot 2015-08-17 at 5.20.09 PM-min

Screen Shot 2015-08-17 at 5.21.44 PM-min

black-bean-burgers

At a recent farewell cookout to send off developer Mary Hipp (who is headed to open our new Atlanta office), our homemade black bean burgers outshone the organic beef patties. Even carnivores find them delicious, so we’re releasing the secret recipe. Enjoy!

INGREDIENTS

  • 1 can black beans
  • 1/2 red or green bell pepper, diced
  • 1/2 onion, diced
  • 3 cloves garlic, diced
  • 1 egg
  • 1 tablespoon chili powder
  • 1 tablespoon cumin
  • 1 teaspoon hot sauce
  •  3/4 cup bread crumbs

 

INSTRUCTIONS

  1. Rinse and drain the beans. Mash.
  2. In a bowl, beat the egg and add the chili powder, cumin and hot sauce.
  3. Mix the veggies, egg mixture and bread crumbs into the beans.
  4. Let it hang out in a fridge for a little while to get firm before making patties.
  5. To cook, heat a little oil in a pan on medium heat. Cook the patties about 6-8 mins per side.

 

black-bean-burger30

by Brooke McCallion, Designer at Cobble Hill

iPhones are slowly replacing point-and-shoot cameras. The camera quality is only getting better and apps are now substitutes for expensive photo editing software.

But with all of that said, navigating apps and editing photos can be a challenge. There are many different tools and filters and each person has their own science. Here are my tips on how to take and make a great iPhone photo.

Take your photo in VSCO

VSCO isn’t just for editing. Their camera is unique because it lets you play with the focus and exposure.

ch-post-1

Open up VSCO and go to the camera. Use two fingers to tap the screen and the exposure and focus circles will appear. Move them around to change the exposure and focus to your liking.

ch-post-2

USE A VSCO FILTER

After you’ve taken a photo you like, go to your library and double-click to select it. VSCO has a lot of amazing filters. Some are free, but you can also buy filters for just a dollar or two.

ch-post-3
When I want to my photo bright and white, I use the N1 filter.

ch-post-4

You can control how much filter you want on your photo. 12 is the highest, but I think 6 looks nice on this photo.

ch-post-5

You can also use the tools in VSCO, such as brightness, contract, sharpen, etc. But I apply all of those features in another app called Snapseed. So, save the photo to your camera roll.

ch-post-6

Enhance Your Photo in Snapseed

Snapseed is an amazing free app made by Google. I describe it to people as Photoshop for your phone. If you want to basically enhance a photo or go as far as stamp out sections, Snapseed can do it all.

First, open up the VSCO photo you saved to your camera roll in Snapseed. In the bottom right, you will see an icon that is a circle with a pencil. Click on it and these options will appear.

ch-post-7

Tap “Tune Image” to first apply brightness, contrast, and more.

ch-post-8
Swipe up and down to select one of these options. Then swipe left and right to increase or decrease the feature. For example, I usually start with Brightness and swipe it right to make the photo a little brighter.

ch-post-9
Once you finish tuning your image, click the check mark in the bottom right of the screen. Pull up the all editing options again and click “Selective”.

ch-post-10

This is my favorite feature on Snapseed. You can select parts of the photo based on the color and enhance them. Tap the “+” at the bottom and place the icon on a certain part of the photo.

ch-post-11

Hold down and the zoom option will appear, showing you which color you’re selecting. Once you grabbed the color, use two fingers and drag them outward (like you’re zooming in). You will see a red appear and that is the selection area that will be affected. You can always use two fingers and drag them inward (like you’re zooming out) to make the red selection area smaller.

ch-post-12
Scroll up and down to see the three options: Brightness, Contrast, and Saturation. Then swipe right and left to increase and decrease the enhancement.

ch-post-13

I love this feature and sometimes only use this to edit photos. It makes certain areas of the photo “pop”! Once you’re finished, click the checkmark on the bottom right of the screen to save.

Once you’re back on the home screen, you can tap on the photo to see the original image and how far it’s come with some simple enhancements!

If you think you went too far with the enhancements, you can always go back to each step and start again. This feature is similar to the “History” tool in Photoshop.

On the home screen, you will see a square icon with a number in it. The number indicates how many edits you’ve made. Click the icon and this screen will show.

ch-post-15

For example, if you didn’t like your selective adjustments, you would tap “Tune Image” below it to get back to what the photo used to look like at that stage. Or if you want to just start over, click “Original” then tap “Close” on the top left.

When you’re happy with your photo, click “Save” on the top right of the home screen. You can either save over the image on your Camera Roll or save a copy.

ch-post-16

You’ve now taken, edited, and saved a beautiful photo! Upload it to Instagram, share it with friends, or frame it. Maybe you’ll get lucky and Apple will feature your photo on a billboard!