What Your Tech Stack Should Look Like If You’re Building Static Sites

We’ve previously mentioned the many benefits of building static sites over using a traditional CMS like WordPress. But if you’re new to building static sites, it may feel intimidating to create something “from scratch” using a static site generator.

One of the biggest differences in building a static site is the technology involved, which scares many first-timers.

WordPress and other CMS’s may seem like a better choice because they claim to do much of the work for you, but many developers find the flexibility rather limited after a certain point.

And the good news is that building a static site doesn’t mean you’re left without help. In fact, there’s plenty of technology out there that can assist you in equal (or sometimes better) ways.

Here’s what you need to know about having a good tech stack when building static sites.

Which static site hosting service is right for you? Find out here.

Languages

This is going back to the basics, but the first thing you need to consider before you determine your tech stack is what languages you will be using.

Preprocessor languages are programming languages compiled into three types: HTML, JavaScript, and CSS. Examples include CoffeeScript, LESS, HAML, and Dart.

Each offers different syntaxes, features, as well as other benefits, and each static site generator (SSG) will allow for different preprocessor languages. It’s important to determine what language you’re most familiar with before you decide on a SSG.

While you don’t necessarily need to know anything beyond HTML to build a static site, you may want to consider brushing up on a preprocessor language to gain some advantages. Chris Loos over at Urban Insight has 10 reasons for using CSS preprocessors.

Site Generators

Unlike CMS, building a static sites requires generating HTML files that are served “as is” with no other database involved. For many developers, that means using editors like Dreamweaver or Notepad to code everything and then hosting those files to create the finished project.

Thankfully, technology has evolved enough to give us SSGs, tools that allow the creation of static sites in any number of languages.

Some popular SSGs include Jekyll, MetalSmith, Grunt, and Pelican. These SSGs can be used either with markup files as a source or even using a hosted content API such as Contentful, Medium, or yes, even WordPress.

jekyll-1024x516

SSGs help developers perform important tasks such as combining multiple files into one, compiling preprocessor languages, or even packaging code into a mobile application without having to do everything “from scratch.”

So which do you choose?

Well, some SSGs are built for a specific purpose, while others can be used for almost any site. It’s essential to find something that fits your workflow, is actively maintained, and has an active user community for when you have questions. If you need help deciding, we’ve ranked a few of the top options here.

Templates

Of course, if you did want to take a more “from scratch” approach without needing to spend countless hours coding your site, you could always use a static HTML template.

HTML templates come with pre-made features that allow you to fill in the blanks, so if you’re used to plugging components into templates with a CMS but you still want the benefits of static sites, you can find a template to meet your needs.

You can find a variety of pre-made HTML templates on sites like Template.net, Template Monster, and ThemeForest.

Package Managers

Another important aspect of building a static site is packaging your files together. But keeping track of all those packages and making sure they stay updated can be difficult, which is why many developers choose CMS over SSG.

However, there are package managers designed to help you manage things like your libraries, languages, fonts, and even images. A couple of popular package managers include Bower, which allows you to install open source or shared library code, declare dependencies for your projects, and more.

bowerio

APIs

One of the noted downsides to using static sites is the lack of APIs, meaning that there’s little interactivity, which, of course, is the point of doing something “static.” But if you still wanted the functionality of a dynamic site while building a static site, there are a few workarounds you could consider.

Raymond Camden has a tutorial for adding the “read” aspect of an API to your static site using any SSG.

Brandon Brown has another post on how to develop JSON APIs using Surge.

Static Web Hosts

Finally, and perhaps most importantly next to choosing a SSG, you will need a place to host your project once you’re ready to launch.

amazon-web-services-logo-cc90d03c8e148873b8b6cc1a7fdbdf1a

There are many options for static web hosting including traditional shared hosts, online storage with hosting, and a few services even have dedicated static web hosting.

So how do you choose a good host? Here are a few things to look for:

  • What is the cost you’re willing to pay for hosting?
  • Does the host support HTTPs? Do you need HTTPs support?
  • What is the upload method to host files? (GitHub, manual upload, etc.)
  • Does the host offer a Content Delivery Network (CDN)?
  • Do they support form handling?
  • Do they support build automation?
  • How easy is the deploy process?
  • Are there other developer-friendly features like rollback?

A few of the top hosting services for static sites include GitHub Pages and Amazon S3. You want to find a service that will give you the flexibility and support you need for every project. And, while many hosting services are cheap or free, be careful that you’re not undercutting your value.

Check out our cheat sheet of the top 12 static web hosts compared.

Final Thoughts

At the end of the day, choosing a tech stack comes down to finding technology that works well for you and your team and will help you stay productive.

If in doubt, you can always ask around (or check on the links we’ve offered). But, remember that what works well for one developer or site may not work well for yours, so it may require some testing to get things just right.

Remember, one of the benefits of building static is that you also have more flexibility to build your ideal stack, one that fits your needs and helps you do the work faster and keeps things maintained and updated with as little stress as possible.

How to Create a Higher Converting Form Landing Page

Landing pages are kind of like snowflakes – no two are exactly the same.

Though there are plenty of similarities between landing pages, and for good reason. There are certain strategies that simply do better for conversions, and so almost every page you see has some version of the following: a headline, explanatory text, and a call to action.

Why? Well, because these elements work.

But the exact application of each of these elements varies, with factors including things like audience, purpose, intent, angle, focus, industry, niche, and overall value.

In other words, one size doesn’t fit all. In fact, the way you blend these elements and factors together can make or break the effectiveness of your page.

Here’s what you need to know to create the most effective form landing page possible.

Get inspired with these 7 examples of high converting form landing pages.

Dos and Don’ts for High Conversions

The average landing page conversion rate is around 2-3%, but the top 25% are converting at 5% or higher, with some reaching 10-11% or more. Here are some do’s and don’ts to follow if you want to see your numbers cross above the 5% threshold.

DO Include a Powerful Headline

It may feel cliché to include a catchy headline, but think of it as your first CTA. The headline is where everything begins – where your audience decides if they’re going to stick around or not, whether you’re interesting or boring.

But it’s not just there to grab attention, it’s there to inform. It should be short (preferably 10 words or less) and to the point, and your audience should think, “Oh wow, tell me more!” by the time they have finished reading it.

headline

(Neil Patel over at Quicksprout has some suggestions for writing powerful headlines here.)

DO Include a Persuasive Subheadline

If the headline is your “oh wow”, your subheadline is your “let me hear more”. Your audience should be able to say, “This is why this page exists” by the time they finish reading it.

You should position your subheadline underneath the header (obviously), and it should be more persuasive than your headline copy. You can also give a little more depth and detail, as it can be longer than your headline.

DO Include Explanatory Text

It doesn’t have to be paragraphs upon paragraphs, but even something like a little extra wording to clarify the header/subhead can go a long way, especially if you get creative with the latter.

explanation

You also want to make sure that if you do include longer text, it explains the benefits that the user will receive if they fill out your form or otherwise engage with the CTA. They should be able to answer the question, “This is what I get out of the deal.”

DON’T Spend Too Much Time Explaining

That being said, you don’t have to give your audience the entire history of your company or really any more information than they absolutely need. Too much text can be visually overwhelming and make people think that your offering is more complex than it is.

badlandingpage

No. Don’t do this.

DO Include Large, Relevant Images

Did you know that the brain processes images 60,000 times faster than text? Now you do.

The images you use are just as important as your text, if not more so. They should be large, high quality, and relevant to your product or service. Like a headline, the primary goal of your image is to grab attention and help your audience relate to your product or service.

DO Include Visual Cues

Having a picture of a smiling person may do a good job of commutating how your customers will feel when they fill out your form and receive their product or service (or free eBook, etc.). But if you want to be more effective, use other visual cues to help users out.

Arrows are one of the most effective tools since they can easily guide an eye line to the right place (e.g. your CTA). You can make them noticeable:

arrows01

Or keep them subtle:

arrows02

DON’T Forget Smaller Visual Cues

If you’re a fan of the subtle route, there are plenty of ways to incorporate tiny visual cues that can be high converting without needing to draw a big red circle around your CTA.

Velaro, for example, uses a small PDF symbol on their image (above their form) to signal to the user that something can be downloaded and in what format it will arrive.

velaro-landing-page-example-1

Instead of using an image of a person or scenery, Single Grain uses the elements in the background to point toward the form itself. The average user wouldn’t even give it a second thought. (They also include a small animation that makes the CTA button wiggle).

singlegrain-homepage-form

DO Include a Demo or Test Drive

Some forms are dedicated to letting users sign up for a demo of their product, but some regular forms include a demo video or a “see how it works” link on their landing pages to help users decide if they want to sign up before they absolutely need to commit.

“Try before you buy” can be helpful for new companies that don’t have significant reputation in their chosen industry.

DON’T Forget Your Value Proposition

Finally, your value proposition is the most important part of your landing page. Another word for it would be your CTA, but unlike the “submit” CTA on your form, this one comes with more of an invitation.

Your value proposition can be spread among any of the above elements. In fact, it should be in all of the elements – in your explanatory text, in your buttons, in your images, and in your headline.

By the time they scroll to the very bottom of your landing page, your audience should know exactly why they’re there, what they’re going to get, and how they can get it.

Here are 7 perfect examples of landing pages that will convert.

Final Thoughts

Creating a killer form is one thing, but creating a landing page that truly converts (to put that form on) is another animal entirely.

If you want to see higher conversion rates, be sure to include elements that bring the focus on the action you want the user to perform.

Use a good headline to draw them in, choose relevant images that highlight and point to your CTA, use text that explains the benefits of the form, and don’t forget to mention any additional goodies that they may get out of the deal.

3 Major Speed Hacks for Busy Developers

Web developers sometimes get the short end of the stick when it comes to building websites.

They’re not quite as lauded as the designer (unless they’re also doing the design), but without them you wouldn’t have much in the way of functionality.

Truly, developers are the heart and soul of a website, and they understand one simple principle: Even the simplest website has a lot of code.

Which means that if you’re working as a developer, you’re going to be busy.

Now, there are a lot of ways you can build a website quickly, like using a CMS or a static site-generator. But sometimes you have to handle code the old fashioned way, and you just need a little help.

The good news is that there are a few things you can do to make building a website faster and more efficient than ever. Let’s take a look.

Don’t miss: 6 More Browser Extensions for Busy Developers

#1. Use Browser Tools

It should go without saying that if you’re building a website, you’re going to spend a lot of time on the web. So, as long as you’re there, why not put your browser to work for you? Here are a few popular options for browser add-ons that can save you time.

FireBug and Chrome DevTools

Sometimes you’ll run into problems with your code not displaying properly on the front-end. Instead of searching through lines of code, you can quickly find the problem by using a browser extension like FireBug (for Firefox) or Chrome DevTools (for Chrome).

chromedevtools

Each allows you to inspect, edit, and monitor your code in any web page to see where things are working (as well as where they’re not working).

Web Developer Toolbar

Available for Firefox, the Web Developer Toolbar gives you a few options for editing style sheets in real time. You can also perform a variety of other helpful tasks straight from your browser’s toolbar, including disabling problematic JavaScript and CSS, quickly validating HTML links, and more.

ColorZilla

Have a designer or client that’s super picky about the color of a font or element? Well, don’t sweat it. Available for both Chrome and Firefox, ColorZilla lets you select the exact color of an image or element and gives you the right color code. It can also be used to add and edit gradients in addition to some other helpful features.

colorzilla

Instant Wireframe

Instant Wireframe is a Chrome extension that lets you view web pages with a wireframe overlay, with options for both live and local viewing.

InstantWireframe

There are plenty of other browser tools that can help speed up your coding process. CreativeBloq has a list of 30 tools for handling various tasks directly from your browser of choice.

#2. Use Off-The-Shelf-Code

A lot can be said for a CMS that gives you pre-made templates to work with, but that’s not always an option if you’re coding a site from scratch.

That being said, coding a site takes a lot of work even with a template, so if you’re looking to save time and you’re not cornered into a particular template or design already, consider using a pre-made CSS library, boilerplate, or framework to help you out.

Bootstrap

Bootstrap is a powerful and popular front-end framework that gives you clean typography, form elements, and almost everything you really need to create a modern and mobile-ready website.

bootstrap

Grunt

Grunt is a boilerplate – a template for code – that gives you hundreds of plugins to automate just about any task. Many developers shy away from boilerplates because they either don’t know how to use them or they don’t know about them. But boilerplates like Grunt can help take care of recurring issues, hand off projects to other developers, and improve your process overall.

Grunt

Skeleton

Skeleton is another boilerplate framework that makes it simple to create a grid-based site. Their grid includes up to twelve columns and shrinks with the browser/device at smaller sizes. The syntax is also fairly straightforward, making coding response times faster.

skeleton

#3. Use Project Planning Tools

One of the biggest time wasters when it comes to coding is having to go back and repeat a task because it fell through the cracks the first time around. That’s why having a great plan in place from start to finish can save huge amounts of time for developers.

If you’re really looking to save time, you can use project planning tools and checklists to make sure that you’re covering all your basis so everything stays running smoothly.

Writemaps

Writemaps is a tool that helps you quickly create a sitemap and gather content before starting your project. It also gives you the ability to preview your sitemap with clients so they can approve everything before you start, saving you plenty of energy in the long run.

writemaps-slide1

Trello

Trello is a helpful project management tool that lets you create cards for each of your templates and elements so you can keep track of everything in one place. It’s also helpful if you’re working with a team of developers and designers, as you can assign different people to different cards, set due dates, and create notifications for tasks yet to be completed.

Trello

Web Developer Checklist

While technically this could fit into the browser tools category, Web Developer Checklist is an extremely helpful plugin for planning out your project, so we’ll include it here. This extension allows you to check to make sure your pages are following best practices when it comes to SEO, usability, accessibility, and performances, making it great for catching anything you’ve missed before your clients notice.

webdevchecklist

Want more browser extensions? Here are 6 more worth checking out.

Final Thoughts

Keeping track of everything you need to do to build a website can be tough, but with the right tools, you can save massive amounts of time and energy.

If you’re constantly jumping from your back-end code to your front-end site to see if things are looking the way you want them to, try using tools that make your job a little easier. FireBug can help you detect major issues, while the Web Developer Toolbar can help you fix things up in real time.

If you’re tasked with building a site from the ground up and you’re not sure where to start, try using an off-the-shelf boilerplate or pre-made framework to save you time fiddling around with little stuff.

Finally, make sure you’re not falling victim to the biggest time waster of them all – poor planning. Use tools that help you track tasks, projects, and even team members if necessary, whether it’s through a browser extension like the Web Developer checklist or an external app like Trello.

The Quickest Ways to Modify and Optimize Your WordPress Themes

Do you remember the good old days when creating a website meant spending countless hours coding everything from scratch? Of course not, because you’re a WordPress developer, which means you have access to themes.

The great thing about themes is that they come pre-packaged with thousands of lines of code someone else spent time developing, which is truly life saving when it comes to time management. The downside to themes, however, is that someone else created them, so if the theme doesn’t match up with all of your needs, you’re going to have to put in a little extra work.

But the great thing about WP is that you don’t have to sacrifice your precious time to customize and optimize those themes. In fact, depending on your needs, there are several quick ways to make sure your theme has everything you need.

Don’t miss: Theme Optimization Checklist for WP Developers

Pre-Optimization Cleanup

Before you really get into the nitty-gritty of optimizing your WP site, you can save quite a bit of time by going through your out-of-the-box theme and cleaning it up. (Actually, you can do this at any time of the process, but it’s arguably more helpful before you start working on a new theme).

Clean Up Messy Code

wp-codesnippets

Developers and programmers have a reputation of using messy code. But, to be fair, they often have a lot to do in a short period of time, and going back through hundreds of lines of code isn’t always on the agenda. It’s a “code first, ask questions later” sort of approach, which saves time but isn’t always the most productive in the long run.

Messy code in your theme can make it harder once it’s time to modify major sections of the site. Messy code can be anything from mixed coding styles, spaghetti code that can only be understood by the original creator, or unextendable code that just doesn’t play well with others.

Some things to look for when it comes to cleaning up code – even in a fairly clean, freshly downloaded theme – include hiding unnecessary or unused shortcodes (the good news is there’s a plugin for that), unwanted media (another plugin), and underused tags (did we mention there’s a plugin?). You can find more easy ways to cleanup areas of your theme at wpmudev, too.

You should also continue cleaning up your code as you go along, especially if you’re one to leave yourself comments or pieces of code that you plan to come back to later (but eventually forget about). At some point you should revisit your style.css file in your Theme folder and do some stylesheet housekeeping.

Ongoing Optimizations

Of course, once you start getting into heavier modifications to the site, you will inevitably wind up with more stuff than you really need on your site’s backend. All of the clutter can really bog down your overall speed, so the best way to optimize your theme is to get rid of all the extra stuff that came with it (or that you added).

Hide and Remove

A few immediate things you’ll want to remove include unused plugins. While you’re bound to keep a few around for functionality (and to clean up your code, don’t forget), there are just some plugins that you will have test driven with unsuccessful results. Ditch them as soon as possible.

Like we mentioned above, you’ll also want to remove any code (shortcodes, tags, etc.) that doesn’t add value to your site. You can use plugins to take care of them quickly. But you should also consider removing things like certain elements from your headers and even old themes that you’re keeping around “just because.”

In terms of usability, you can also hide parts of the dashboard or the visual text editor to give yourself a more seamless coding experience. Basically, if you don’t really need it, find a way to get rid of it. For things that build up over time like new code or plugins, like your mom used to say – if you’re done using it, put it away.

Selection_036

Source: WP-Optimize

Optimize Images

Images are a major part of your site, and not to beat a dead horse, but they’re important to your usability. But WP doesn’t always optimize images as well as it should.

For example, WP often adds layers of compression to their images. So, if you’re using the internal image editor to crop or edit a picture, the resulting image will be saved multiple times. Those images will also include their own attachment pages that quickly eat up space on the server if your site is image heavy.

One way to optimize is to pre-compress and crop images (using free tools) before you upload them. You’ll be saving yourself time later on when you’re trying to figure out why your site isn’t running as quickly as it should.

TinyPNG

Source: TinyPNG

Matteo Spinelli’s Cubiq.org blog also has some suggestions for practically handling images and removing attachment pages, among other things. And don’t forget that there are plugins that can help with a variety of optimization needs to save time.

Backup and Upgrade

Of course, one of the most absolutely essential components to optimization is backing up all of your data as you go, and then cleaning it up periodically as extra data piles up.

Again, there are plugins that can help you backup your database with little to no effort on your end.

Your database will also accumulate unnecessary data over time from things like revisions, spam comments, or even data from plugins that you’ve removed. All of this data can really bog down your site, so after you’ve made a backup, consider using plugins like WP-Sweep or WP-Optimize to remove the excess.

And you should always make sure that your site is running the latest versions of your theme as well as your plugins. You can easily update each from your dashboard, so that’s a no brainer.

Be sure to check out our Theme Optimization Checklist for WP Developers!

Ongoing Modifications

Finally, at some point you will probably need to make some larger tweaks to your site. If you’re working with a child theme in particular, you’ll probably end up creating additional styles and hooks. While all of that will still take time and energy, there are ways you can optimize to keep your expenditure at a minimal level.

Customization

There are generally two types of developers: one that likes to code everything by hand and one that likes to use editors and plugins to help. If you’re of the latter persuasion, you can always use WP’s built-in customizer API to give you a visual representation of the changes you’re making.

Before you go saying, “Well, duh!” you should know that there’s also a tool available that will help you take advantage of the customizer’s advanced features. Last year Redux and Kirki combined forces to create a framework that works fully in the customizer, giving you much more bang for your buck.

And if you still want to hand code, you can always use plugins like Simple Customize or Simple CSS to aide in your endeavor.

Switching Themes

Of course, there may come a time when your site is ready to move to an entirely new theme, which is a hefty task, but it doesn’t have to take as much time as you think.

Using plugins like All-in-One Migration or Duplicate, you can fully export/import your database, media files, plugins, and theme options. If you don’t mind paid options, you can also go with something like WordPress Theme Switcher.

But whatever method you choose, just make sure to follow all of the above tips by backing up your site, making sure there’s nothing miscellaneous in your code, keeping your images optimized, and using the right plugins to assist the job (and getting rid of the ones that don’t).

Why Integrating Zapier with WordPress Will Save You Hours of Work

If you’re a busy WordPress developer, the last thing in the world you need is to waste time fiddling around with unnecessary applications, moving content around, or really doing anything besides, you know, developing.

Whether you’re freelancing your services or working for an agency, time is your most valuable asset. So how do you maximize your time while minimizing your effort?

One word: automation.

Automation

zapier

Creating a workflow is essential to managing your tasks, and automating that workflow is essential to making sure you have enough time to do the things you need to do without pulling out your own hair. That’s why many developers choose to use Zapier, a popular web automation app.

Zapier allows you to integrate different apps together to complete certain tasks – or, as Zapier calls them, “zaps”.

These zaps create automated processes that allow you to set certain rules and then leave them be. Whether it’s creating workflow notifications or having your content posted to the correct sites in a timely manner, there’s very little that can’t be managed by zaps.

Need help choosing zaps? Check out our Zapier + WordPress Quick Sheet for developers!

Which Tasks Should You Automate?

stressful-jobs-job-stress-work-time-clock-worker-18236949

Now, there are some tasks that really can’t (or shouldn’t) be automated and need your keen eye in order to complete, but for everything else, there’s a zap for that. So what falls in the category of “everything else?” Well, basically anything that needs to be done that you don’t want to waste time doing manually.

Social Media

Whether you’re marketing your own services or managing an account on behalf of a client or agency, social media requires a lot of attention, especially on sites like Twitter that need constant updates. If you’re not the type of person who enjoys spending time tweeting and retweeting, crafting media-friendly messages, or logging in and out of sites like Facebook on a daily basis, Zapier is your friend.

If your site involves written content of any kind – blog posts, Facebook posts, status updates, RSS feeds – consider pairing your site with apps like Buffer that automatically handle publishing and posting them to all the necessary channels. Alternatively, you can release posts on individual channels and have them automated, which works well if you only have one or two social accounts to manage.

Spreadsheets

Spreadsheets are another major hassle for anyone trying to sort through a massive amount of information. If part of your job revolves around building things that collect data, like forms or subscriptions, then you already know that data has to go somewhere, and it’s probably not somewhere you want to think about again.

By integrating your WP site with apps like Google Sheets, you can save time dealing with all of that excess information. Sync your WP forms with Google Sheets to capture user data, and then pair Google Sheets with another app, like MailChimp, to organize that data for delivery.

Data Capture

You’ve probably spent some time working on tasks that are designed to capture data and generate leads, whether it’s forms, emails, or web pages. While creating those things often requires the wisdom of your experience, like building a lead gen form, for example, there are many tasks that can just as easily be automated.

You can connect your WP site to things like SurveyMonkey to collect user data for A/B testing, link your forms with posts or pages to upsell a service or product, or trigger a Slack notification for updates you’ve already made on the site (or posts that have already been published) to let team members know you’re ready to move on.

Project Management

When it comes time to actually buckle down on a project, having a good workflow in place is essential to productivity. But if you’re sketching out your workflow in a notebook or sending emails back and forth to track your timelines, you’re wasting time. Zaps can connect different tools to help you manage projects faster with minimal effort.

Try combining apps like Slack and Trello together with your WP site to create a seamless workflow that allows your clients to stay connected to the process without sending them countless emails. This is particularly effective if you’re also in charge of loading up content for delivery on a regular basis. You can also manage your projects using something like Basecamp and integrate it with DropBox so clients can share files right to your project folders without having to chase anything down.

Time Tracking

If you’re the sort of developer who needs to keep track of how much time you’re spending working on a site, you can (and should) be using apps like Toggl to track your time. But did you know you can also pair Toggl with WP?

Pairing a time tracking app or a project management service like Basecamp will help to keep all of your information in one place so you know exactly what you’re doing and when you’re supposed to be doing it.

Notifications

Notifications are a big part of being a developer, whether it’s letting your team know about the status of a project, letting a client know when something is ready for review, or informing your audience that a post has been published.

Integrating apps like Slack can help your team stay organized while you’re all working on the same site. You can also use apps like OneSignal to create push notifications, which are especially handy for deadline driven jobs.

Events

Oftentimes companies will create both internal and external events that they want to market to their audience (or their team). These can be anything from a webinar, class, or even a fundraiser.

By using apps like Office 365 or Eventbrite, you can instantly create posts about upcoming events that can trigger notifications for team members to do certain tasks, or you can create Google Calendar events for clients to know when something is taking place.

Don’t Miss: Zapier + WordPress Quick Sheet

Final Thoughts

These are just a few ways you can integrate WordPress with other Zapier apps to save time. No matter your work style, saving time and energy will always benefit you in the long run by automating your workflow to simplify tasks and projects.

Consider automating tasks that are data heavy, like forms or spreadsheets, email campaigns, and social media posts. This way you can dedicate most of your time to actually doing the work you want to do.

You should also consider using Zapier to track hours and manage projects so you don’t have to watch the clock. The hours you save can be put to better use building your business and reputation.

And the faster and more efficiently you get things done, the better that reputation will be.

9 Client Communication Tools for Designers and Developers

Working as a designer or developer is great when it’s something you’re passionate about, but that doesn’t mean it’s an easy job.

One of the biggest challenges is dealing with clients, especially if you’re working as a freelancer. But even if you’re part of an agency or larger organization, you still have to communicate with clients often.

If you have a relatively painless client, that might mean once a week, but if you have a more challenging client, that could easily be once a day (or more, if they’re micromanagers).

It’s easy for designers/developers to become overwhelmed by the level of communication going back and forth. How do you manage to keep your clients in the loop while retaining the majority of your sanity?

Well, we’re looking at a few helpful tips – and more importantly, tools – that are readily available to help out with all of your communication needs. Let’s dive in…

Skip to the chase by checking out our guide: Which Communication Tool Works Best for My Needs?

Get Out of Your Inbox

getoutofinbox

One of the primary ways most creative types communicate with clients is email, which is an okay system if you hate being stuck in phone meetings. But the trouble with email is that sometimes wires get crossed: emails get stuck in spam folders or outboxes; people forget to hit “reply all” … The list of problems with email is unfortunately long, and it’s easy to miss something important in the chaos.

This is why one of the best things you can do is stop relying on your email inbox and use more collaborative software to help get your message across. This not only applies to simple things like asking a question or suggesting an idea, but using tools to share project proposals and previews of your work.

Here are a few great tools that can help you move outside of your email inbox:

ConceptShare

ConceptShare is a communication tool especially designed for creative types. It helps you streamline the review and approval process for any project, and it allows for online proofing with workflow automation, which means you can work with clients from one place without having to send a hundred emails back and forth.

InVision

InVision is web-based (and mobile) app that lets designers/developers turn their work into active prototypes with animations. Clients can provide feedback and comments directly on the site and track progress in real-time by looking at your to-do list.

Slack

Slack is a popular communication tool, and for good reason. It takes the best of email and live-chat features and combines them into one app that you can use on your desktop or mobile device. Aside from private messages you can also create collaborative boards around different projects or topics, which is helpful if you’re working with a larger team of people or on multiple projects with a single client at once.

Turn “Clients” into “Teammates”

turnclientsintoteammates

One of the most frustrating things about working with clients is dealing with someone who doesn’t understand exactly what it is you do. You might spend countless hours trying to explain to them why you can’t do what they want, or why it’s taking you so long to implement a certain solution.

While it’s easy to freak out about how much you need to communicate with your clients (time that could be better spent, you know, working on their projects), you can actually avoid much of that struggle by switching your mindset from communicating with a “client” to communicating with a “teammate.”

Clients are annoying bosses, but teammates are there to help and support you while you help and support them. If you’re feeling bogged down by a client’s level of interest in your methods, instead of pushing them away (or dropping them altogether), consider bringing them in as part of your “team” – even if it’s just for vanity’s sake.

Here are a few tools that can help you collaborate with clients:

Basecamp

Basecamp is a very popular web-based project management tool that helps multiple groups rally around a single project. Because the project is the focus, you can create a system where both you and the client are on the same page about various stages of the project.

Trello

Trello is another popular project management application system designed to break down projects into manageable “cards” that you can assign to different people. If you’re looking to create a collaborative team environment without worrying about being micromanaged (or needing to micromanage), Trello is the perfect solution. It also has the bonus of adding a visual element to otherwise technical projects.

Asana

Asana is a free project management tool designed to help teams track projects from start to finish. One of its best features is that it lets you see the overall progress of your project step by step, so your clients know exactly how long something will take without having to bug you about it.

Keep Track of Everything

keeptrackofeverything

The best case scenario for a developer or designer is to have a client that gives you a generous deadline and then trusts you to complete your project on time – meaning that they don’t hassle you at any point during the development project. But not all clients are easy.

If you’re working with a client that checks in with you constantly, whether about hours or project specs, it’s to your advantage to be one step ahead of them. The best way to keep micromanagers at bay is to make sure you’re already keeping track of everything before they ask about it. The more organized you are from the get-go, the better you’ll be able to squash any fears or concerns your clients have along the way.

Here are three tools that can help you stay organized:

Funnel

Funnel is a simple CRM tool that helps you keep track of all of your client information as well as project specs and more. You essentially create a pipeline that monitors all your activity with your client, which is especially helpful if you’ve been working with a client for a long time and want a detailed history of your projects. If clients are constantly asking about projects you worked on months or even years ago, Funnel can help.

Timely

Timely is a scheduling and time tracking app that helps you keep track of how much time you’re spending on a certain client or project. This is particularly handy if you have micromanaging clients, you bill by the hour, or you have someone on retainer for a certain amount of billable time each month.

Wunderlist

Wunderlist is a to-do list tool that helps you plan your individual tasks, set notifications and reminders, and collaborate with clients so they can see exactly what you’re up to and when you’re working. The best part is that it’s available on both desktop and mobile so you can update it on the go. If you have clients who want to see the project laid out in detail, this will help.

Still not sure which tool is right for the job? Download our free guide.

Final Thoughts

Working as a designer or developer isn’t easy, especially when it comes to communication. But you can lighten that load using tools specifically designed to help you communicate better.

Remember that email isn’t your only option when it comes to communication. In fact, you may be significantly better off staying out of your inbox altogether and creating a workflow that provides more visual and team-based communication for your clients, especially if they’re prone to avoiding your emails.

If you deal with needy clients, you don’t always have to push them away; sometimes the problem can be solved by bringing them closer to the project and making them feel like a part of the team.  Try using tools that let clients follow along with your project workload on their own so they don’t have to waste your time checking in.

Finally, stay on top of micromanagers by creating an organized system so you always know how to respond to pesky questions and requests. The more work you do on your end to keep everything running smoothly, the less likely they’ll be to light up your inbox or phone with messages.

Why Your Landing Page Color Scheme is More Important Than You Think

When you think about getting landing pages to convert, what comes to mind? A good design? Copy that grabs attention? A big, bold CTA button?

While those things are all important factors to improving conversion rates, there’s one aspect of your site you may be overlooking, and it could be costing you customers.

We’re talking about color.

Surprised? Don’t be. Improving conversions is all about persuasion. You have to convince visitors to become customers based on only a few elements of your site. The problem with our modern persuasion tactics, however, is that we often focus too much on numbers and statistics and forget that we’re trying to sway real-life human beings. As it turns out, one of the biggest influencers for human decision-making is color.

In fact, there’s an entire branch of psychology dedicated to finding out how color affects human behavior (it’s called color psychology), and studies show that when it comes to converting customers, visuals matter.

In a peer-reviewed study, Dr. Satyendra Singh discovered that it takes a mere 90 seconds for customers to form an opinion of a product and that 62-90% of that interaction is determined by the color of the product alone.

So what does this mean for you? It means that if you’re looking to boost your conversion rates, your color scheme matters.

Here’s what you need to know…

Bonus: 5 Color Strategies for Your Opt-In Page

Choose Colors by Target Market

The human brain is designed to be a visual processor. It can digest visual information 60,000 times faster than plain text. This means that the colors you use on your landing pages will be instantly processed by your visitors, so knowing which colors will win them over is important.

But there are several ways you can go about choosing the most affective colors for your site. The first way is by assessing your target market, because different people process colors different ways.

Women Prefer…

In a survey on color and gender, 35% of women said blue was their favorite color, while 33% said orange was their least favorite color. If your target market is primarily women, stick with tints of blue, purple, and green, and avoid earthy tones like gray, brown, and orange.

Men Prefer…

If your target market is primarily men, you should use bold colors like red, blue, greens, and even black (it turns out you still want to avoid earthy tones, though). Use deeper and bolder shades of these colors, as they’re traditionally associated with masculinity (and avoid lighter “feminine” tints).

3-color-targeting-demographics

Source: Kissmetrics

If your market is mixed, however, don’t worry. Both men and women are shown to like popular colors in neutral shades, like blue or green. If you have a mixed market you can also choose colors based on nationality instead of gender, too.

International Markets Prefer…

If your company targets an international audience, be sure you understand how color is viewed in other nations. Americans tend to favor the color blue, for example, while Scandinavian countries prefer multi-colors.

In countries like China, for example, white is used for solemn occasions like funerals, so it isn’t associated with the same “happy” emotions (weddings, purity, etc.) that Americans attach to it, while bold colors like red or yellow are highly favored. Americans love blue for its sense of strength and security, but in some countries it’s symbolic of loneliness and sadness.

If you’re still not sure about choosing a color scheme based on your target market (or your market is too broad or convoluted), you can always choose colors based on your company’s personal branding instead.

Choose Colors by Brand Identity

Branding is an important part to any company, and because certain colors convey certain emotions, you want to make sure that your color choices reflect positive emotions for your business.

Red Conveys…

Red conveys a sense of excitement and boldness and is commonly used to advertise sales. It also ignites ideas of passion and hunger, so if you’re looking for immediate action (like a CTA button or a flash sale), use red.

Orange Conveys…

While not the most popular color, orange still has its place on your landing page if you want to communicate friendliness, fun, and confidence, which is why it’s often used for sports and children’s products. It can be used as an accent, or, if you’re an e-commerce site (think Amazon.com), you can use orange to encourage sales during the checkout process.

Yellow Conveys…

Yellow, arguably the happiest of all colors, reflects optimism, warmth, and happiness. If you want to communicate that your business is family-friendly, go with yellow shades. Oppositely, it’s also the color for warning. If you have elements of your site that need to be read right away, use a yellow accent color. Just make sure you don’t use it as a font color, as it can be hard to read if there’s not enough contrast.

Green Conveys…

Green is the color of tranquility, peacefulness, and nature. If you want customers to know that you’re eco-friendly and low maintenance, using green is a great way to do that. It’s also the perfect color for creative industries (graphic design, web development, arts, etc.) as one study indicates that when presented with flashes of green, people had more bursts of creativity than when shown any other color.

Blue Conveys…

Blue is one of the most loved and most used colors, which can be either good or bad depending on your goals. Blue conveys a sense of security, trust, and connection, which is why sites like Facebook use blue (and most of corporate America). But using blue can also mean you’re just like everyone else, so pairing it with less-used accent colors (like orange or yellow) can help differentiate you from your competition.

Purple Conveys…

Purple, like green, is the color of creativity, but it also conveys a sense of sophistication and wisdom, as it’s often associated with royalty. This is one of those colors that work well with luxury goods and services. It’s also heavily associated with femininity, especially in America, so if your target audience skews toward women, this is a great choice.

Black Conveys…

While black may or may not be an actual color, it is a standard for most text. But it can also be used as a deluxe tone. According to an article from Lifescript, black conveys elegance, sophistication, and power, and is considered timeless and classic. Black can also be used to communicate exclusivity and has an added sense of value.

White Conveys…

White can mean different things to different people, but its primary function when it comes to design is actually to help offset other visuals. It may not have inherent meaning beyond “clean” or “professional,” it’s still a valuable color (or non-color, depending on who you ask).

Don’t miss our FREE list of color strategies for your opt-in page!

image204

Source: Neil Patel

Choose Colors Strategically

If you’re still not sure which colors will help you reach maximum conversions, consider the following:

First impressions matter. You only get one chance (90 seconds!) to reach your audience with colors, so if you can’t decide between a bold red or a soft yellow, go for whichever will make the most initial impact. Just remember that you want to make a good impression on first-time visitors without alienating your returning customers, so use bold accents with white space to offset other elements. Keep your look clean, but attention-grabbing.

Use bright colors where action is needed. If color choice makes you panic because your current site feels boring (let’s say you used too many earth tones), don’t worry. Using color strategically is about finding areas that need to stand out. Use bright, bold colors like red, yellow, and orange on your CTA buttons, pop-up buttons, or as visual indicators of action steps (like arrows pointing on something to click). You can keep the rest of your page muted if you have standout colors in key areas to make up the difference.

Don’t fear a colored background. “Whitespace” doesn’t always have to be white. Your design may actually benefit from a colored background depending on your goals. In his book, Color Psychology: The Science of Using Colors to Persuade and Influence Purchase Decisions, Michael Campbell notes that colored backgrounds can actually create a personal encounter and stir emotions better than a plain white background.

Contrast your colors for legibility. As mentioned earlier, if you’re using bold colors like yellow or orange for your text, don’t put them on equally bright and bold backgrounds. If your text is muted, like gray or brown, make sure the colors are deep enough so they don’t fade into a white background. If you make content difficult to read, you won’t be converting anyone.

Keeping Quality High When Rushing Web Development

No one likes a rush job. They usually mean high stress and late nights, and leave you disappointed in the end result. Unfortunately, many clients only come to you when they need something yesterday. But just because the deadline is tight, doesn’t mean the project has to be a hectic rush.

Plan

Often clients try to “speed up” the development process by skipping the early stages. If you bypass the proposal, discovery and planning stages, and jump straight into development, then you’ve circumvented half the work, right? Wrong.

If you have loads of time on your hands, you can afford to skip the planning stage (although it still would be a terrible idea). But when you have a tight deadline, proper planning becomes even more important. If you try to skip it to save time, you’ll end up losing significantly more time down the line.

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” —Abraham Lincoln

Whether it’s a website or application, following the Minimum Viable Product concept will help streamline your development process. Separate each requirement into “Must Have” and “Nice to Have”. You can then further separate them into what needs to be included for the initial release, and what can be added on in a future round.

Finally, if you’re not 100% sure on an idea, prototype it before building it out completely. When the deadline is tight, you can’t afford to lose valuable hours by coding up a flawed concept. Prototyping will allow you to test out your ideas quickly, get feedback from your client, and avoid wasting time going down the wrong path. There’s been an influx of prototyping tools in the last couple of years, so you’re spoilt for choice here. Some notable ones include InVision, Atomic and Marvel.

Bonus: Ensure your next launch goes smoothly by downloading our free resource – the High Speed Launch Checklist.

Pick the Right Tools for the Job

Using tools that are either too lightweight or too complex for the job will drastically slow down your web development process. Many agencies jump immediately to WordPress whenever a basic site is needed, but if you’re creating a blog or simple marketing website, consider using a Static Site Generator. Not only will they speed up your development process significantly, but since the end product is plain HTML, it’ll load around 6x faster!

If you’re creating an eCommerce website, instead of going straight for one of the old-school mammoth CMSs like Magento, take a look at some newer options like Shopify or SquareSpace. Both of these have beautifully-designed themes and take care of all the minor things – like hosting, analytics, and SEO – that would otherwise all add up to take away a lot of your precious time.

Don’t Start From Scratch

Whether you’re creating a completely customized design or a standard layout, using frameworks to jumpstart development is a great way to save time without sacrificing quality.

You can pick and choose the elements that you’ll need, to avoid bloating your site with unnecessary code. Even the most customized layouts will benefit from normalizing CSS, which makes your site render more consistently across different browsers, or a simple grid system like the one included in Bootstrap or Foundation.

If you’re a fan of Material Design, the developers at Google have put together a framework called Material Design Lite, which will allow you to quickly install its basic components to use in your site.

If you’re doing similar projects again and again, consider creating your own boilerplate code. For example, if most of the work you do is creating WordPress sites, creating a custom boilerplate will allow you to skip the repetitive part of the development process. Make sure your boilerplate includes all the generic functionality you need, while making it easy to build custom layouts on top. You could even include one of the above frameworks in your boilerplate.

If you’re creating a fairly run-of-the-mill design, it’s a good idea to start with a theme and modify from there. ThemeForest provides themes for many of the major CMSs like WordPress, Magento, Drupal and Joomla. Some of the newer CMSs like Shopify and SquareSpace have themes built into them. Unfortunately, many themes are quite difficult to modify, so unless the theme you pick almost completely fits your design, you’re probably better off coding it from scratch.

Even if you don’t go with themes, using plugins instead of custom code is a must when you’re pressed for time. Try and go for plugins that are style-agnostic, so that you don’t need to spend time overwriting the plugins code to get it consistent with your site’s design. For example, Wufoo is a popular way to build and insert a form into your website. Unfortunately, their solution is to iFrame in a form, which forces you to use their themes that may or may not mesh stylistically with your designs. As an alternative, FormKeep’s solution embeds plain HTML into your site, which gives you complete control over how it looks.

Bonus: Ensure your next launch goes smoothly by downloading our free resource – the High Speed Launch Checklist.

Done is Better Than Perfect

When you’re doing a rush job, you’re never going to be completely happy with the end result. Keep in mind that “Done is better than perfect.” This was one of Facebook’s maxims for almost 10 years. It represents the hacker culture that allowed them to grow so quickly, and will allow you to ensure your project makes it out the door on time. The maxim has since been retired, but only after reaching 1 billion users and being worth hundreds of billions of dollars.

done-is-better-than-perfect

If you’ll be working on the project after launch, a really great idea is to use a shame.css. The idea behind this is to put all of your hacky code (and there will probably be some hacky code, given that it’s a rush job) into one file that you can fix up when you have more time. By putting all of these hacks and quick-fixes into one file, they keep your main codebase clean and make them easier to isolate and fix later on.

Ultimately, when you’re in a rush, the most important thing is get get it done by the deadline. This means letting go of what it should be, and focusing on what it can be. “Out of all the different directions a design could go, the best one is the one that gets finished and ships.”Dan Cederholm, co-founder at Dribbble.