Announcing Shubox.io and File Upload Support

 

We’re excited to share our new partnership with Shubox.io!

Many of our customers ask us how to upload images or pdfs from their html forms. They’re looking to capture resumes or pictures of problems with their products. Uploading samples of their portfolio or even small videos for contests.

Managing file uploads across different browsers and user bandwidths limits while adhering to your site’s brand and styling is a challenging task and sometimes causes these projects to be put off until there’s more ‘free time’ from the developer team.

Fortunately there’s a great solution out there that you can have up and running in fifteen minutes!

We’ve looked closely at the many options available and we’ve partnered with Shubox.io. They’ve got a great experience right out of the box, but allows for full control over the behavior if you need it. They upload the files directly to your own Amazon S3 storage so you have direct control over the files.

Shubox.io does a lot more than just provide an amazing user experience for your customers to upload files, it also allows you to transform the images. Resizing, rotating and cleaning up the meta-data are all possible through the service. Great stuff if you need extra processing or need to connect these files to additional workflows in your business.

Check out this recent blog post with all the setup and information about how to get things setup and working with FormKeep.

If you sign up through FormKeep you’ll get a special deal as well, so make sure you sign up through the Shubox.io page under Data Integrations inside FormKeep.

Keep on uploading!

ps – Image and PDF files will now also display directly in the submission pages of FormKeep, in addition to showing a link to the original file.

FormKeep and Zapier Connect Web Forms with over 1000 applications

FormKeep Connects to 1000s of Popular Applications Like Salesforce, Google Docs, MailChimp, Intercom and Slack

FormKeep and Zapier Connect Web to the World.

We know that getting your work done requires many different web tools. In fact, the average mid-sized business uses between 10 and 16 apps and, for enterprises, there can be hundreds or thousands of apps running various workflows. You have your email app, CRM, note-taking tool, emarketing platform, cloud storage tool, team communication app, along with project management tools and more. Sometimes, it can be a struggle to get them all working in tandem. Now that FormKeep has 1,000 integrations, you can choose your favorite tools and easily integrate them with FormKeep.

Thanks to our Zapier integration, FormKeep connects to 1,000 other web tools and applications. Now you can connect data submitted via forms on the web to all kinds of applications and workflows that reside in places like Slack, Google Docs and Salesforce. You can use Zapier to connect with your FormKeep data via codeless integrations called “Zaps”. Zaps will automatically send information from one tool to another, so you’ll spend less time manually transferring data between your business tools and can dedicate more focus to creative, big picture tasks.

Boost Your Productivity with Popular FormKeep Integrations

No matter what other apps you use, chances are you are looking for ways to use web forms to take data from customers and employees via the web and connect that data with the applications you use to run your business. Here are some of the most popular integrations that FormKeep users already use to be more productive.

The New Year is the perfect time to evaluate your processes and find ways to boost productivity. Try out some of the Zaps above or view more ways to integrate FormKeep.

 

42 Tools All Speedy Front-End Developers Use

Every developer has a preferred way to code.

Some use only the basics – a text editor and a browser. Others like to incorporate apps, platforms, and tools to make sure everything gets done.

If you fall in the latter category, you’re probably always on the lookout for the next best tool to aid your projects. After all, who doesn’t love something that can reduce your time and increase your productivity?

That’s why we’ve put together a list of the best development tools for those who want to get things done quickly and efficiently.

Take a look.

Source Control

github

GitHub – GitHub is probably the most well known platform, but not everyone uses it. But if you’re looking to build a site efficiently (especially a static site) then GitHub is perfect. It includes a source-code browser, in-line editing, wikis, ticketing, and more. The best part is that it’s completely open source (that means free!).

bitbucket

Bitbucket – Bitbucket is another free source code host. It’s a distributed version control system that makes it easy for you to collaborate with your team. Approve code review with pull requests, use flexible deployments models, and take advantage of their private and public repositories.

sourcetree

SourceTree – Whether you’re a newbie developer or you just love using Mac, SourceTree is a free Mac client for Git and Mercurial version control systems. Manage all your repositories, hosted or local, through SourceTree’s simple interface.

Other Options

Versions – Another subversion Mac client

Tower – Another Git client for Mac.

Development Platforms

heroku

Heroku – Heroku is a popular platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Build, manage, scale, and deploy great apps quickly, without needing to worry about updating or patching.

kinvey

Kinvey – If you’re more interested in mobile app development, Kinvey is a back end as a service (BaaS) provider that makes it easy for developers to set up, use and operate a cloud backend for their mobile apps.

firebase

Firebase – Another BaaS, Firebase is a scalable real-time backend for your website. It’s made up of complementary features that you can mix-and-match to fit your needs.

cloud9

Cloud9 – An online IDE that combines a powerful online code editor with a full Ubuntu workspace in the cloud. Simply pick your configuration and develop your app. No need to spend valuable development time on system setup and maintenance.

appharbor

AppHarbor – Used by thousands of developers for everything from simple blogs to high traffic web applications, AppHarbor is a fully hosted .NET Platform as a Service. This PaaS can deploy and scale any standard .NET application to the cloud.

Other Options

Parse – Another mobile app platform

Koding – Browser-based IDE

Backrest – Easy creation of SaaS data backends

Codeanywhere – Online code editor

NeptuneIDE – Full-featured, cloud-based IDE for PHP

Cloud IDE – Code and deploy in the cloud

ToolsCloud – Development environment in the cloud

Bug Tracking, Feedback, and Monitoring

crashlytics

Crashlytics – This powerful and lightweight crash reporting system for iOS and Android is perfect for mobile app developers who need to work out the kinks in their system before, during, and after launch. Every crash report is analyzed and every bug tracked so that you don’t have to do it.

usersnap

Usersnap – If you’re more of a visual person and you prefer snapshots to track bugs or share potential issues with your team (or clients), then Usersnap is a great option. Organize your web projects and create screenshots of any potential problems.

rollbar

Rollbar – Rollbar collects errors that happen in your application, notifies you, and analyzes them so you can debug and fix them in real time. Works with Ruby, Python, PHP, Node.js, JavaScript, and more. It’s “Full-stack error monitoring for all apps in any language.”

Other Options

New Relic – Web application performance management (APM)

Exceptional – Tracks errors in web apps and reports them in real time

BugSense – Mobile app insights and crash reporting

Bugzilla – Server software to help you manage software development

Bugify – Simple PHP issue tracking for small teams

BugHerd – Tracks bugs and allows you to capture and share feedback

Snowy Evening – Bug and issue tracking with Github integration

APIs

twilio

Twilio – Twilio is a cloud communications platform for building SMS, Voice, and Messaging applications on an API. Embed messaging, voice, and video in your apps with their API, and the best part is that you can get started in as little as five minutes. So, if you’re in a rush, you have help.

cloudeo

Cloudeo – If you’re into geo data, then this is the perfect solution for you. Cloudeo is another SaaS that allows you to rent, evaluate, and stream geo data in all of your applications. It’s a unique option for developers needing to include more complicated APIs like this.

embedly

Embedly – On the simpler side of things, Embedly delivers ultra-fast and easy to use products and tools for richer sites and apps. Convert standard URLs into embedded videos, images, and more to engage your audience through rich media.

mailgun

Mailgun – Mailgun is a surprisingly powerful API that lets you send, receive, and track email effortlessly. Easy SMTP integration and a simple, RESTful API removes the messy details of sending transactional or bulk email. Everything is built API first with a focus on simplicity and compliance to standards.

Other Options

Factual – Structured data APIs

PubNub – Cloud-hosted messaging service for real-time apps

Semantics3 – APIs for product data

Final Thoughts

Finding the right app, platform, or tool to help you get through projects isn’t easy. A lot of it depends on preference, working style, and sometimes the power of the tool itself to get the job done.

But one thing’s for sure: If you need help moving a project along, there’s probably a tool for that.

This is great for developers who want to get things done as fast and easy as possible. Or at the very least, it can inspire you to create a SaaS, BaaS, or PaaS of your own to help other struggling developers get the job done.

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.

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. The team over at Raygun have a great blog article about 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.

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.

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.

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 Things to Fix On Your Forms If You Want Conversions

Forms are all about action.

More specifically, they’re all about getting your users to take action. Whether it’s signing up for your newsletter or downloading your latest white paper, you want to get your users to do something – that’s called a conversion.

But conversions don’t happen by accident. The way you design and program your form plays a major role in how many people follow through with filling it out.

Unfortunately, there are a few areas that most designers or developers overlook when creating their forms, and it’s costing conversions.

Here are three key areas you need to fix on your forms if you want to keep your conversion rates high.

Error Messages

Error handling is typically one of the last things a developer will do when putting together a form, which often means that it’s the one process that gets the least amount of attention.

But a form that doesn’t tell you exactly what went wrong when an error occurs or leads you to a 404 page – or, heaven forbid, somewhere else entirely – is not just annoying, it’s a signal to your users to never come back and finish that form.

Suddenly your conversions drop and you’re not sure why.

While the first and most obvious step is to prevent errors wherever possible – and ideally they don’t happen because of a design flaw – it’s still important to have a great error handling system in place should errors occur.

Here are a few things to keep in mind when working on your error handling:

Avoid negative words. While errors are bad, you don’t want the wording to elicit feelings of fear or make them feel that the situation is worse than it is. UX Movement has a great article on making your form error message more reassuring here.

error-messages-negative-words

Avoid using the color red. Instead, highlight error fields in orange or yellow. Similar to the above, the color red – while prominent – can make the user feel like they’ve made a grave mistake. Red tends to be associated with danger, so while you still want your error to stand out, it’s important to signal to users that the error is fixable and that they have nothing to worry about.

error-messages-orange

Specify why the field information wasn’t accepted. Just having a note at the top of your form that says “there was an error” isn’t enough to keep people from panicking. Your error message should tell users exactly which information was rejected and why. For example, an email field should tell users to include the ‘@’ symbol or remind them to double check the spelling of their domain. The more specific you can be, the better.

error-messages-explain

Visual Cues

The next big area you may be overlooking is the use of visual cues.

Many forms come on solitary landing pages, which makes the forms themselves easy enough to find and is one way of getting people to fill out your forms, but that doesn’t always mean conversions will automatically happen.

In fact, whether or not your form is easy to spot on your page, you should include visual cues to direct users there anyway.

Directional cues are signals that tell someone to complete an action, and remember, forms are all about taking action. Cues can include photos, shapes, videos or text, but how and where you use them can significantly impact conversions.

Here are some things to keep in mind when it comes to drawing your visitors to your form:

 

Use an image of a person looking at your form. Humans are social creatures by nature, and so they tend to be drawn to what others are looking at. You can use this human trait to your advantage by having your images direct people to fill out your forms.

 

Have a person or group of people looking at your forms with their eyes, pointing to your form with their hands, or even holding your form.

visualcues-people

Use arrows. Symbols and shapes drive much of our visuals in modern advertising, and the arrow is the king of the symbols when it comes to directing users to take action. Nothing says “look here” quite like it.

Reboot Authentic, for example, uses three arrows to direct visitors to their lead-capture form:

visualcues-arrows

Limit objects in the same visual view as your form. Minimizing the noise around your form will certainly draw the most attention to it, but that doesn’t mean you need to create a whole separate landing page for each form. You can also use colors to visually direct users to your forms, or make use of blank space to create a contrast that stands out.

Twitter does a fantastic job of this on their signup page:

visualcues-simplicity

Button Language

Of course, it could be argued that you should never rely on design alone to communicate.

After all, 8% of men and 0.5% of women have a colour vision deficiency. Another 39 million are blind and 246 have low vision. Communicating with visual-only cues just won’t catch everyone.

While pictures and arrows may help people find your form, the “Submit” button does most of the heavy lifting. That’s where your button copy comes into play.

Buttons will tell users to “Get a quote,” “Download,” “Open an account,” or even “Go to checkout.” But whether someone submits your button depends on the quality of the text itself.

Here are a few things to keep in mind when selecting the right copy for your buttons:

The copy should begin with a verb. Otherwise it’s not really a call-to-action, just a button with some text on it. “More information” for example, is not a call-to-action.

better-submit-button

The language should fit the context. If you’re signing up for banking online, for example, you’re going to expect words like “Register” or “Apply”. If you’re signing up for an e-commerce site, you look for “Sign up” or “Go to Cart”.

It’s also important for the language to be personal wherever possible. If the overall context of your site is friendly, using text like “Sign me up” instead of “sign up” can also improve your conversions.

Think about what your user would say. Imagine that you asked your user what he or she was trying to do. If they would say, “I want to sign up,” then you would use text like, “Sign up.” If you were asking the user “Would you like to…?” then the text would sound more like, “Sign me up.” These are what Jared Spool calls “trigger” words.

For any button text, ask yourself if it fits with the statement “Would you like to?” or “I would like to”. The question: “Would you like to sign me up?” doesn’t match with: “I would like to sign me up”.

Final Thoughts

When it comes to improving conversions on your forms, there are really three key areas you need to watch out for: error messages, visual cues, and button copy.

If your users aren’t taking any action, then you want to use visual cues to direct them.

If they’re not sure if they want to submit the form they’ve just filled out, then use your copy to elicit an action.

And if they have taken the wrong action, gently nudge them in the right direction.

Best iPhone and Android Apps for Busy Developers

Mobile apps are everywhere, and for good reason.

As of last year, the total number of downloaded mobile apps was a little more than 100 billion, with that number projected to reach as high as 200 billion in 2017.

Statistics also show that up to 89% of mobile users spend their time on apps versus 11% who browse the web. That means that during any given day, the average user will spend over an hour fiddling around with apps. And web developers are no exception.

In fact, there are many helpful apps out there that can help developers do a better job finishing projects, communicating with clients, or sharpening skills.

But why would you use a mobile app if you have a laptop or desktop nearby?

3 Reasons to Use Mobile Apps

There are a number of reasons you might want to jump off of your desktop browser and open up the app store on your smartphone:

1. You Work On the Go

Whether you spend a lot of time traveling or you simply like to work from the comfort of your own couch, getting to work from wherever you want is a big convenience that mobile apps provide.

Why spend all the time lugging around your laptop or going into the office to work on your desktop when you can pull out your phone, do some quick HTML edits, and move on with your day?

Mobile apps allow you to update web pages, make quick sketches, code HTML, and upload and share projects from anywhere.

2. You’re Testing Your Mobile Site

More than 80% of all Internet users own a smartphone and use mobile devices to browse the web, so the need for mobile testing is high. But switching back and forth between testing sites on an actual mobile device and making updates to your code can be time consuming.

Why not test your site and then use an app to make live updates? You may not need the feature all of the time, but mobile editing apps can be the perfect solution for a quick fix or to test sites on the fly.

3. You Like to Multitask

No one really likes to work when they’re not in the office, but sometimes project needs come first. The good news is that you can use mobile apps alongside traditional desktop apps to help you in the office and out.

Check your site stats while you’re away to make sure everything’s running smoothly, reference code when you’re testing without opening another browser, or simply make a quick sketch while you’re out to coffee to try when you’re back at work.

Mobile apps have the flexibility to help you multitask to achieve objectives faster than ever, and while some apps are helpful for minor tasks, more robust apps may surprise you.

Best Dev Apps for iOS and Android

With all of that being said, here are the top apps that developers should try out to improve their overall performance and productivity.

JavaScript Reference

JSreference

There are plenty of reference apps on the market, but JavaScript Reference is derived from the W3CSchool’s documentation and includes a clean, easy-to-use interface that will make it effortless to look up the code you need.

Android Find it here.

Google Analytics

GoogleAnalytics

If you’re already working with Google Analytics for your website, you’ll want to download the GA app. It gives you access to many of the details from your GA account in real time, and can keep you up to date on your SEO.

iOS Find it here.

Android Find it here.

WordPress

WordPress

Having quick access to your self-hosted WordPress site can be handy, especially if things have a tendency to go wrong at the last minute. With this app you can manage your site, view stats, moderate comments, create and edit posts and pages, and upload media.

iOS Find it here.

Android Find it here.

WebMaster’s HTML Editor

webmasterhtml

This Android HTML editor makes the perfect addition to your toolbox. It supports HTML, CSS, JavaScript, and PHP. While you can save some money with their free version, those looking for some additional features and function like full previews and code support should spring for the full version.

Android Find it here.

DroidEdit Pro

droideditpro

Another Android app, DroidEdit is a text and source code editor that lets you highlight syntax for several languages, search and replace, open files from a file manager, and more.

Android Find it here.

Espresso HTML

EspressoHTML

For the iPhone user, Espresso HTML is a simple HTML and JavaScript editor to help you test scripts and web pages on the fly. You can save your documents in the app and access them later via iTunes if needed.

iOS Find it here.

AndFTP

andftp

AndFTP is a FTP, FTPS, SCP, SFTP client that comes with both a device and FTP file browser. It allows you to download, upload, synchronize and share features, as well as open local and remote files, rename, delete, update permissions, and more.

Android Find it here.

View Source

ViewSource

View Source is an iOS app that comes with a Safari extension to help you view the source code for any web page. You can enter a URL and immediately see the code, highlight syntax, and copy and paste into any other app or program.

iOS Find it here.

ByWord

Byword1

ByWord is a writing app with Markdown for the iPhone that allows you to sync text documents, add footnotes, tables and references, and export Markdown documents to PDF or HTML.

iOS Find it here.

Harvest

harvest

While not specifically targeted to developers, Harvest is a powerful tracking app that helps you track time, log expenses, and manage and send invoices from anywhere. For developers who spend more time recording things than actually working on projects, this app is a must.

iOS Find it here.

Android Find it here.

Dropbox

Dropbox

The Dropbox mobile app is the same as the desktop app, giving you a safe space to backup, access, and share any files you need at any time. You can also send large files to anyone, even if they don’t have a Dropbox account.

iOS Find it here.

Android Find it here.

Adobe Cloud Apps

adobecloud

For designers and developers alike, Adobe has a suite of mobile apps to help productivity, including Illustrator Draw, Photoshop Sketch, Photoshop Fix, Photoshop Mix, Lightroom, Comp CC, Preview CC, and more.

iOS & Android Find them here.

Final Thoughts

Whether you’re looking to brush up on your coding skills, make a quick project sketch, or you need to make updates to your site on the go, mobile apps are the perfect solution.

Remember that most apps come with a free or cheap version so that you can try it out before you fully commit. So, don’t be afraid to use mobile and tablet apps to aid your process during any project.

How to Handle Design Feedback Like a Pro

Possibly the scariest part of any designer or developer’s job is turning in your design to a client.

The trouble is that you never really know if your client is going to love it or hate it. Depending on the client, submitting a preview can mean plenty of additional hours spent reworking things to get them to up to expectations—and that’s never fun.

No one likes being told that their design choices are wrong. It can be difficult not to react in frustration to negative feedback, but how you handle yourself can mean the difference between successfully completing a project or losing a client for good.

So, how exactly do you handle feedback well?

You want to ask good questions, use every resource available, and try to turn a potentially negative experience into a positive. Here’s how.

Asking Questions That Clarify

shutterstock-190923107-web

The reality is that no designer really loves feedback. Ideally you want your clients to love your project and understand your genius from the moment they lay eyes on it.

Unfortunately, feedback is an integral part of being a designer, but that doesn’t mean it’s necessarily a bad thing. Not only does it help the client clarify and refine their desired outcomes, it also helps you become a better designer by letting you stretch your genius outside of your normal limits.

But, the ultimate goal is to get feedback that’s helpful towards both those ends, and one of the best ways to do that is to take charge of the feedback before it even comes your way. You can do this by providing a series of questions that your clients can respond to.

Some example questions could include:

  • Does this reach your target market in the way you imagined?
  • Does this feel “on brand” or “on message” for you?
  • Were you able to find all the information you were looking for?
  • Do you find the information or design valuable for your users?
  • How does this compare to your expectations?
  • What are some noticeable weaknesses? Strengths?
  • When you see this for the first time, what thoughts come to mind?
  • Would you recommend this [design/site/etc.] to others?

Not only do these questions help clients provide feedback that you can actually implement, but they also minimize comments and dialogue that aren’t helpful or that you can do nothing about.

Instead of simply asking for general or vague feedback or saying, “Let me know what you think”, try starting a conversation that will be productive for both parties involved, while giving you a little more control.

Using Preview/Prototype Tools

Since feedback can often take up a lot of time depending on the complexity of the design (or client) involved, using resources and tools to help minimize that effort will go a long way.

Using preview or prototype tools will help you move the conversation along, make the changes you need in real time, and also make you look extremely professional and put together.

You can either use these tools before a project begins knowing that you’ll have to share them with clients or team members, or you can use these tools to help you after you’ve already built the project and need a way to share and collaborate with minimal effort.

Here are a couple of the top preview tools to consider:

Red Pen – This app allows you to upload your current project, add notes, and share your preview URL via email to clients. There’s no need to log in, as it remembers your link so you can retain all ownership of your uploads.

http-_2F_2Fmashable.com_2Fwp-content_2Fuploads_2F2013_2F08_2FRedPen

Bounce – Bounce lets you collaborate between project members using screenshots or by uploading images. You can also make notes, add names to specific elements, and share your feedback through a URL or social media link.

If you need to build or share a website that will have interactive elements, you might want to consider:

Avocode – Avocode makes it easy for frontend developers to code websites or apps by syncing with your PSD files. You can leave notes for other team members, export, upload and share sites, and give specific feedback while visually comparing design versions.

og-hp

Flinto for Mac – This app lets you create prototypes for mobile as well as web and desktop apps, so if your client really wants to see what a mobile app would look like, you can build an example fairly quickly.

Adobe Experience Design CC – Adobe UX Design also lets you create prototypes for websites and mobile apps, with a preview feature that allows for live changes, as well as a sharing feature for quick feedback.

Turning Negative Into Positive

aotfm79t2d3x917fmmbw

Let’s say that you’ve done everything on your end to help create a positive experience—you’ve asked the right questions, you’ve provided the right sharing platform—but at the end of the day the client still isn’t happy. Does that mean doom for your project?

Negative feedback doesn’t have to be a bad thing if you say and do a couple important things:

Don’t take it personally. Remember that you did your best with the knowledge that you had, and now that you have more, you can make changes that are more in line with the client’s wishes.

Restate intentions. Sometimes things get lost in translation, so rephrase or restate what you think you’re hearing the client say so that everyone is on the same page. It can also be helpful to ask more questions or for suggestions they might have that can be easily applied to the project.

Do your research. If the client is asking for something that can’t be done, know about it before hand so you don’t say yes and then have to backtrack later. If you’re not sure about something, let them know you’ll discuss it with your team or look into it and get back to them as soon as possible.

Make a list of actionable items. Sometimes what a client wants just isn’t going to be a reality—you know that, but they might not. Give them a list of things you can change and explain to them as thoroughly as possible why some solutions just won’t work.

Provide alternatives. For those things that really can’t (or shouldn’t) be changed based on the feedback provided, offer one or two alternatives. Don’t simply ask the client for things they’d like to see instead, but present them with options so that they don’t ask for something else you can’t follow through on.

Respond promptly. There’s nothing that screams “unprofessional” like taking too long to reply to an email or missing a scheduled phone call or meeting. Do your best to provide responses quickly and assure them that they’re your priority.

Final Thoughts

While receiving feedback isn’t always the best part of the job, it can be a helpful experience for both you and your client if you’re able to handle it professionally.

One of the best things you can do is ask questions and constantly clarify things throughout the project so that your client can rest easy that you know what you’re doing.

Being sure to use any tools or resources that helps clients be a part of the decision-making process can also help foster a sense of loyalty as well as move the project along faster.

And should negative feedback still come your way, don’t panic. Keep asking questions, keep clarifying, and keep responding and your clients will thank you.

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.

#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

Wirify

Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. It’s a great way to get a high level understanding of an existing website.

InstantWireframe

There are plenty of other browser tools that can help speed up your coding process. CreativeBloq has a list of 29 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

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.

Why You Might Want to Ditch Your CMS If You Have THIS Client

Stop us if you’ve heard this one before: “Can you build me a website?”

If you’re a web developer or designer, at some point in your career you’ve probably been asked to build someone a website, whether it’s a high-paying client or your mom’s neighbor from down the street. If you can build it, they will come.

The go-to solution to building said website is usually to choose whichever CMS you’re most comfortable with – WordPress, Drupal, Joomla, etc. – and start building from there. After all, that’s what CMS is designed for: building websites with ease.

But, depending on whom you’re building the site for, a CMS may not actually be the best choice. In fact, depending on the client’s needs, you may want to consider building a static site instead.

htmlvswordpress

SSG vs. CMS

CMS platforms, like WordPress and Joomla, are popular for a reason: they’re multi-media friendly, SEO-friendly, and most importantly, contributor-friendly, at least for the non-technical folks out there.

But, static sites have many benefits that a CMS can’t offer, especially for devs and designers, like lower development costs, simpler hosting, greater security and markdown support.

The best part about static sites is that you can use a static site generator, such as Jekyll, to help you manage your site – which is similar to using a CMS but with more access to the code – but you can also build a static site on your own using a handful of HTML files, too. This, along with the other benefits, makes static sites a great alternative to using a CMS, especially for devs and designers.

Static sites may also be helpful for certain clients, too, depending on their needs…

Which Client for Which Method?

At the end of the day, building a website isn’t really about what you want, it’s about what the client wants. Unfortunately, clients don’t always know what they want, or sometimes what they want isn’t the best option. That’s why it’s important to know which clients might benefit most from a static site and which should probably stick to using CMS sites.

20151117222236-cellphone-guy-designer-web-architechture-working

Clients that Benefit from Static Sites

Here are the types of clients that should probably let you build a static site for them:

They’ve put you in charge. If they want nothing to do with the website and are more than happy to pass off the management to you, then you might want to consider creating a static site. If they’re not messing around with the code, you might as well have full control. Nothing lets you do what you want easier than a static site, because you can hand-write anything you need directly into the text editor quickly and easily.

They don’t plan on updating the site often. Maybe they’re just using their website as a virtual business card, or they don’t have content that frequently changes. If this is the case, using a full blown CMS to build a simple, unchanging is a waste of time and energy. A static site will give them everything they need with less hassle on your end, especially if you do decide to use a generator.

They’re bloggers who know what they’re doing. Static sites are great for bloggers, even if the CMS (cough – WordPress – cough) holds a fair share of the blogging market when it comes to advertising. Static sites have less security issues and generally load much faster than CMS blogs, which makes them great for traffic. The only caveat is that the blogger must know how to work in a SSG, or at the very least know how to pass things off to you to get posted.

They’re have a limited budget. If they don’t have the money to spend on developing a fully hosted, fully CMS powered site, then a static site is seriously the best bet for saving them money. That also means that more of their money is going to you and not the CMS.

If your clients fall into any of these categories, consider switching them from a CMS to a static site and save yourself some hassle.

Clients that Benefit from CMS Sites

Of course, not all of your clients will fall into those categories, which means that you might want to stick with a CMS – or at the very least use a static site generator instead of hand-coding – if your client is like this:

They’re bloggers who don’t know what they’re doing. While there’s a big case for using static sites over CMS for blogging purposes, most bloggers are not expert-level developers and designers like you. If they want you to build the site but they plan on managing it afterwards, a CMS may be a better option since it gives non-technical people the upper hand.

They need a large site or blog with frequent updates. If the blog or website is large – like enterprise level with many pages and complex site structures – then a CMS will save you more time than having to code a static site. Plus, if you have to be in it making changes every day, you don’t want to dig around code, because there are CMS plugins for that.

They have a need for dynamic applications. If they really, really want “cool” features on their website like Disqus for comments or specialty plugins for different functionality, there’s probably no way to get around using a CMS.

They have the money, but not the time frame. Building a website is always going to be expensive (for a good website, anyway), and if they want something good, they should be able to pay for it. If budget is of no concern but they need a quick turnaround on a big site, then a CMS is probably a better option.

If your client falls into these categories, your best solution is probably to stick with a CMS, since they tend to be easier on non-devs and designers.

Web-Design-Companies-In-Dubai-That-Go-Above-And-Beyond-For-Their-Clients

How to Suggest Static Sites to CMS Clients

So what happens if you’ve figured out that a static site will benefit your client more than a CMS, but your client absolutely insists on using something like WordPress, because it’s all they know? What’s the best way to suggest an alternate option?

Reassure the client that you’re after the same goal. They know their objectives better than you do, so make sure to listen and ask plenty of questions first before you start giving your opinion.

Speak like an expert. They’ve come to you for your expertise; don’t be afraid to speak with expert authority. Tell them that you’ve assessed their situation and their goals and you feel the best solution might be to use a static site. If they’re not sure what a static site is, explain it to them the best you can in non-technical terminology.

Present the benefits. People want solutions that help them move forward, so instead of arguing about why a static site is better than a CMS, tell them what makes static sites so great and how those solutions will help them achieve what they want. Especially tell them if using a static site will save them time and money.

Have a plan in place for building the site. People can be wary of anything that sounds too good to be true, so if you’re going to suggest a switch for their website, show them that you’ve really thought it through. Have a plan written down for timeframe, needs, requirements, and options for SSGs should they choose to use one. Show evidence of other static sites you’ve built with success, if possible.

Be professional. Above all, don’t start arguing with the client. Even if they know less than you about static sites, they’re still the ones in charge. If they decide to use a CMS, just work with it or point them to another dev or designer who can help.