In this podcast, David Kloba & Rob Meinhardt, Co-Founders of Furious Collective, discuss the mindset and methodology of their venture production studio, recount their adventures over the past year of growing FormKeep after having acquired it from thoughtbot, and offer advice to founders preparing to sell their product or company.
One of the most appealing things about using form backend solutions like FormKeep is that, as a web designer or web developer, you can focus your energy on user experience and functionality. You can avoid the burden of building and maintaining your own backend infrastructure.
A large number of our customers choose FormKeep over other solutions because we’ve decoupled the backend from the front end. These customers can style their form exactly the way they want to, using any tool they wish. Complete freedom of expression; no more wrestling with a front end form-builder to get the results you require.
This, of course, begs several questions:
1. What are the foundational rules and principles for styling HTML forms?
2. Where can I find examples of well-styled forms?
In this blog, we provide some pointers to some great resources we have found on these topics.
Rules and Principles of HTML Form Styling
To a certain degree, smart HTML form design and styling is context sensitive so there are no cardinal rules. That being said, we have frequently referred to some nice and comprehensive resources on the web that can help you hone your skills. Here are some of our favorites:
Samples of Well-Styled Forms
There are many examples of good and bad forms all around the web. You may have some favorite examples or examples you don’t like. Here are a few places you can find some good looking form examples including sample code:
Connecting Your Form with a Backend
Of course, once you have a nicely designed form, you need a place to send the data where it will be secure, manageable and can connect with other systems like Google, Salesforce, Hubspot, ZenDesk, Slack and others.
With FormKeep, to make this form active on your website, simply copy the provided html and CSS and customize it as much as you want. Then, all you need to do is update the
action attribute. Your
form tag should look like this paying careful attention to update the underlined area of the highlighted URL with the token provided to you within FormKeep (Trial or Paid account):
<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">
See how with our sample CodePen by clicking here:
See the Pen Sample “Contact Us” Form Template You Can Customize by FormKeep (@formkeep-samples) on CodePen.
Weebly is a wonderful website and ecommerce service that hosts millions of businesses online. Weebly tools make it easy to build a professional, mobile-optimized site and grow your business with integrated marketing and advanced analytics.
In this blog, we will cover some basics about how to add a basic form to a Weebly site and, also, how to expand Weebly’s native form capabilities with FormKeep.
Basic Forms In Weebly
Though most users build static web pages on Weebly; the service does offer a simple form way to add a form to a web page. To add a simple Newsletter Sign-Up Form or Contact Form all you have to do is drag the corresponding icon from Build menu (i.e., Build/Basic/Contact Form or Build/Basic/Newsletter Form) as shown below:
In this example, we have added a simple Contact Form to one of Weebly’s standard templates (highlighted in red). This form includes name, email and contact fields.
Once the form is in place, there are a number of configurable options. Click on the form element within the Weebly designer and then click “Form Options” to reveal the Form Options panel. Here you will have options for configuring the email that will receive data from the form, Google Captcha spam protection, opt-in and some other settings as you can see below:
Once your form set up and you’ve pushed your website into production, your form can begin receiving data. When users submit information via the form you created you will receive an email that notifies you and contains the form data. You can also log into Weebly and access the data by clicking on the form element in the page designer and selecting “View Entries”. Here’s what the data looks like when you access it via the Weebly console.
Weebly’s built-in form builder is very powerful and simple to use. It makes form building easy for many users. However, some users are looking for opportunities to do even more with the Weebly forms. We will explore some of these opportunities in the next two sections.
Controlling The Look And Feel Of Your Forms In Weebly
As powerful as the Weebly form builder is for most users, some users want to exert fine grain control over the look and feel of their form. For example, the default form in the example above is a bit hard to see against the background used in the selected template. How can a designer make this form pop out against the background?
Weebly does not offer fine grain control of these elements in the standard form options area. However, Weebly does offer a relatively simple way for developers and web designers to control the look and feel of their form element. Rather than using the included form builder, designers who would like more control can use the Embed Code functionality within Weebly. Rather than dragging the Contact Form or Newsletter Form icons onto your web page, simply drag the Embed Code icon as shown.
With this embedded control in place, the designer or developer can now custom-craft an HTML form to fit their needs and design preferences. In this example, we used the following HTML to design an enhanced form for this template:
The result, when this code is placed in the Edit Custom HTML widget within Weebly is a form with different styling than the native form tool would normally allow. In this case, the form is formatted with a background that allows the form to become more visible against the template background. See the comparison below.
Obviously, when using the Custom HTML capability within Weebly, the design possibilities are bounded only by your imagination and design sense.
One thing to keep in mind if you use the Custom HTML capability is that you will have to designate a place for your form data to POST information for storage and processing. Weebly normally handles this for you. However, FormKeep makes this easy. You can learn more about how to do this at the bottom of this article. Read more below or click here to skip directly to the appropriate section.
Enhancing Form Data Management and Integration in Weebly
As we discussed earlier, Weebly handles your form data by default in two ways: 1) an email is sent to a designated email address each time a form is completed with the data from that form and 2) the data is accessible via Weebly’s interface when an administrator selects “View Entries” in the form widget.
For many applications, this is adequate. However, if any of the following apply to you then you may be looking for some more advanced data handling capabilities:
- Lots of Data:
If you are receiving a lot of data in each form or many form submissions, it may not be convenient and manageable to receive all of the information in an email.
- Data Routing:
If you want to route the data to more than one person, it may not be convenient or secure to share the log in credentials to Weebly or route the data through a single email address.
- Integration with Other Applications:
If you would like to pass your data on to another system you will need a point of integration that is not available in a standard Weebly form.
- Excess Spam:
Google Captcha will reduce but not eliminate spam. Or, you may decide not to use Google Captcha. If you don’t want to flood your email inbox with spam submissions, you may want a data management rather than email solution for handling forms.
- Field Validation:
If you would like to use custom field validation logic, you can do that with a custom HTML form.
- Many Forms On Separate Pages:
If you have a long form or multiple forms broken across several pages, you may wish to view all the data in one place.
In each of these cases (and many others) you may benefit from using a form backend like FormKeep alongside your Weebly site. With FormKeep, instead of routing your form data to Weebly or to email, your data will be stored, secured and accessible in the cloud. From there, you will have a variety of tools to help you manage your form data and route it in a variety of different ways.
One popular way that designers and developers use FormKeep is using WebHooks or integration via Zapier to feed data to other applications like Hubspot, Constant Contact, Google Gmail, Salesforce, Slack or Mail Chimp (and thousands of others). You can search for over a thousand different integration points between FormKeep and other applications on the Zapier web site (pictured below):
In order to take advantage of advanced data routing capabilities available in FormKeep you will have to place your own custom form into your Weebly page and then point that form to FormKeep.
You can read more about how to create a Custom HTML form within Weebly at the top of this page (Click Here)
Enhancing Weebly Forms with FormKeep
One thing to keep in mind if you use the Custom HTML capability within Weebly is that you will have to designate a place for your form data to POST information for storage and processing. Normally, Weebly handles this for you with their standard form tools. However, fear not! This is where FormKeep makes life easy.
Let’s review an excerpt from the form code from the CodePen example above. At the beginning of the form you will notice this syntax (Click Here to View Above):
<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST" target="_blank" id="weeblyform">
All you need to do is update the
action attribute in your form. Your
form tag should look like the example above paying careful attention to exampletoken to the token provided to you within FormKeep (Trial or Paid account). You can create one of these tokens for free by signing up for a free trial account at FormKeep Free Trial.
Once you’ve created your HTML form and configured the action attribute, the data will be posted directly to your FormKeep account. From there, you have the option to configure many settings such as spam suppression, thank you pages and re-directs as well as integrate your form with thousands of other applications via Zapier.
You can experiment with this in the FormKeep demo environment in CodePen by clicking here.
If you would like help getting FormKeep setup with Weebly, feel free to reach out to our friendly team at email@example.com.
At FormKeep, we make it easy to use your own form HTML and use our backend to capture, store and process your data.
In this example, we have developed a simple Contact Us template that includes the following elements: First Name, Last Name, Email, Subject and Newsletter Subscription Checkbox.
Below the Submit button you can see plenty of other attributes implemented that you can copy and paste to fit your needs. In this example, you’ll see radio buttons, drop down list, email fields, phone number, check boxes, color selectors and many more.
You can edit the html on the left of the CodePen and see the resulting form on the right.
To make this form active on your website, simply copy the provided html and CSS and customize it as much as you want. Then, all you need to do is update the
action attribute. Your
form tag should look like this paying careful attention to update the underlined area of the highlighted URL with the token provided to you within FormKeep (Trial or Paid account):
<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">
You can also update this token in the CodePen example directly and, then, when you press submit on the sample form, the data will be posted directly to your FormKeep account. From there, you have the option to configure many settings such as spam suppression, thank you pages and re-directs as well as integrate your form with thousands of other applications via Zapier.
If you have any suggestions for this form template, please send them to firstname.lastname@example.org.
The FormKeep Team
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.
For budding agencies, finding new clients is a constant effort. Larger, established agencies often have enough word-of-mouth marketing to bring in more clients than they can handle. But smaller or early-stage agencies can’t rely solely on word-of-mouth promotion, simply because they don’t have the clients to do it for them. Although a marketing plan might seem like something for a more rooted agency, it’s in fact most important for younger agencies.
Design business expert David Baker looked at several hundred design firms over two decades, and his conclusion was that: yes, ok, you do need a graphic design marketing plan, but it’s not what will bring you most clients.
Understand Your Clients
Finding new clients as an agency is not like project management, accounting or IT. You must get intimately involved in the process. If you truly are after getting new – and worthwhile – clients, immerse yourself in your clients’ world rather than your peers’.
Understanding your clients’ needs will go a long way towards generating trust. Agency Scout Debra Giampoli says she won’t work with any agency who hasn’t done their homework. Agencies should know the roles of their potential clients and what they value in an agency. By finding out these things, you can more accurately target specific clients, with a higher success rate.
Build up Confidence and Expertise
Successful people radiate self-assurance. Get out there and profess credible claims, with the certainty that you’ll be able to deliver with ease. Price your work accordingly – underpricing yourself puts you in a lower-tier market, and gives the impression of a less-capable agency. Higher rates may scare away some clients, but they’re generally clients you can afford to lose. In reverse, lower rates may place doubt into bigger clients – the ones your agency needs.
Finally, deliver with solid design solutions. Your reputation is built around what you repeatedly do, so if you’re over-promising and under-delivering on a regular basis, it won’t make for good word-of-mouth advertising. Not to mention the stress this adds, having to deal with upset and disappointed clients.
You may be able to burst into any room (or email inbox), but if you don’t have compelling things to say when communicating with clients, you’ll quickly lose their attention. Craft a statement that people won’t easily forget. Again, understanding your clients and their needs goes a long way to creating a truly compelling pitch.
Sharing is Caring
The ultimate lead generation tool is content marketing: keep an awesome blog that targets and attracts the kind of people you’d like to work with. In time you can establish your agency as an authority and thought leader. Social media is an obvious supplemental tool, but always back up your tweets and Instagram pics with long-form, educational content.
Whether you’re writing case studies, blog posts or short and sweet punchy tweets, always keep in mind the entire user experience. Will your users reach your blog through social media, newsletters, or Google? How might this affect how they interact with your blog, and the rest of your website?
Don’t use your blog or social platforms for sales pitches. People will follow you if you’re providing useful and interesting content. If all you post is blatant advertising, followers will drop off as quickly as they sign up. Focus on posting up your best work, and let them speak for you.
Keeping it Organized
Make a name for yourself by getting organized and delivering on time. Don’t be in a rush to accept more projects when your hands are already full. With an outstanding portfolio, good clients will be more likely to contact you ahead of time, without the expectation that you’ll start the project yesterday. “Reputation is the foundation to generating new job leads and keeping a steady stream of orders lined up in your email”, says Kevin Harter of Hongkiat and owner of Crystalint Media.
Follow up on any leads as soon as possible. Every hour you delay responding to leads reduces your chances of converting them to a client. If you’re not already, set up an automated email response to any contact form submission. Zapier is a great tool to integrate to whichever form solution you’re using. Use this initial email response to give your client a next step that isn’t just “wait for us to reply”. The more targeted you can make this email, the better. If you’re not able to set up a next step based off the limited information gathered in a contact form submission, maybe ask for a little more information from them. They’re already invested enough to submit a contact form, so asking for some more information about their project won’t raise much resistance.
Some agencies disregard databases when tracking their client interactions. This is a big mistake: databases are priceless. Maintain an up-to-date lead database, and keep track of any prospective clients. Record the name, address, email and phone number of any potential clients you’ve contacted, regardless of how you communicated with them. Don’t get discouraged if you don’t convert a lead to a client on the first, second, third or even fourth contact. 80% of sales require 5 follow-up calls after the initial meeting. 92% of salespeople give up before this 5th follow-up call, meaning 8% of sales people get 80% of the sales.
Find Your Niche
Set your agency apart from your competition by delivering what others can’t. Whether it’s punctuality, beautiful user-focused design, or the ability to creatively solve problems, let your prospects know about it. “Clients will buy from a place where they are likely to get something extra. Find the ‘extra’ for your business,” says Kevin Harter.
A Cohesive Marketing Plan
In spite of what you might plan or dream will happen, most great clients will come from indirect efforts such as client connection, a vendor, employee or supporter connection. But while it could be any of these things that cinches the deal, all of your efforts play a part. An agency with a good reputation, educational content marketing, a strong customer understanding and a little something extra will always beat out a rival agency with a weak spot in any of these aspects. If you can’t promote yourself well, how can a client expect you to promote them well?
A huge part of the success or failure of an online business depends on its forms and their ability to convert viewers into paying customers. Contact forms must gather essential information on leads, and checkout forms must endear enough trust for users to hand over their credit card details.
Designing forms is an art. There are many subtle elements: your forms must be brief yet exhaustive, noticeable yet non-intrusive, unambiguous yet not trivial, minimal yet interesting. Web forms should be about the user experience above all else – but they must also provide you with the data you need to run your business.
Luckily, there’s a lot of simple things you can do to increase your conversion rates without sacrificing data quality.
Reduce form length
Many companies have massively increased conversion rates by just removing a few unnecessary fields from their form. Expedia, for example, eliminated one field (company name), and gained $12 million/year in profit. Imaginary Landscape compacted their form from 11 fields down to 4 and found a 120% increase in conversions. Even better – the field they removed had no real impact on the quality of leads generated.
Don’t ask for phone numbers
Almost every contact form involves asking for an email address, but some forms ask for a phone number as well. Including a phone number field decreases your conversion rates by about 5%. For businesses that rely on post-click sales calls, this may be a worthy trade. But for most, it’s better to leave it out, or at least make it optional. In one study by Luke Wroblewski, making a phone field optional led to a 37% drop-off on the phone number field entries, but doubled the conversion rate of the whole form.
Show the password
By default, any password field in a form masks all the characters with asterisks. But like Reset buttons on forms, this seems to be one of those 20-year-old decisions that have become “just the way things are done”. Password masking then led to people making mistakes when entering their password and not being able to log in, which created the “Confirm Password” field that everyone loves.
But if we just take a step back and reconsider whether that 20-year-old design decision is still serving us well, maybe we can remove another form field! Many companies like MailChimp and Amazon are now presenting a single password field, along with a checkbox to show the password as plain text. In one A/B test, Formisimo found that replacing the Confirm Password field with a Show Password checkbox increased conversions by 56% and decreased the number of corrections made (from mis-typing or second-guessing) by 24%. Interestingly though, it had no effect on the password reset request rate.
Use the right inputs
When you’re deciding which form fields to keep and which to throw out, keep in mind that not all fields are equal. The cost of keeping or adding a field depends on what type of field you’re adding. One extra text input field won’t do much to your conversion rates – just a $12 million/year loss . Adding one text box can drop your rates by almost 10%. It makes sense: most single-line text input fields don’t involve any creativity or decision-making. It doesn’t require effort for a user to recall their name or email address. A radio button is slightly more difficult, but at least all the possible answers are pre-defined. But a text area means that the user has to get creative and come up with a response on the spot – usually a complex message or comment. If you must include a text box, think about marking it optional.
Dropdown boxes aren’t as bad as text boxes, but they’re still significantly worse than single-line input fields. If your dropdown box only has a few options (5 or less), try replacing it with radio buttons. Radio buttons are faster to interact with because they allow the user to see the answers before they click on the input.
Real Time Validation
If you’re only validating upon form submission (or worse, not at all), you’re missing out on a really easy conversion rate boost. Luke Wroblewski ran a few studies and found that real-time validation increased conversion rates by 22%, decreased errors by 22% and decreased completion time by 42%.
Focus on your Call to Action
Ok, so now you’ve optimized the hell out of your form fields. What else can we do to increase conversion rates? Let’s look at the Call to Action (CTA). Minor changes to your CTA can make a surprisingly big difference on conversion rates.
The first thing to look at is the color and position of the CTA. You may have heard of HubSpot’s study – they ran an A/B test on one of their client’s websites, and simply changing the CTA’s color from green to red improved conversion rates by 21%. So does this mean that you should immediately go out and change all your green buttons to red? Not necessarily. Take a look at the website HubSpot was testing:
The logo is green, the icons are green, the screenshot is green – so of course the red button stands out a lot more than the green button. Take a look at the following design – which of these buttons do you think will convert better?
So the lesson to take out of this is not “make all your CTA buttons red”, but “make sure your CTA buttons contrast well against the rest of your site”.
Once that’s handled, take a look at your CTA copy. It may seem that as long as it’s clear which button is the “Submit” button, and it says something like “Submit,” you can’t go wrong. In fact, Dan Zarella found that “Submit” is one of the worst words to use for your CTA. Take a look at the graph below: “Click Here” performed almost twice as well as “Submit,” and more than three times better than “Register.”
But don’t go rushing off to change your CTA buttons to “Click Here” just yet – think about how to best apply this to your design. Optimizely increased their conversion rates 27% by changing their CTA text from “Get Started” to “Test It Out.” They concluded that “this language made it more clear that the user could try it immediately without a long process. We thought “Get Started” presented a more hands-on, involved process.” Taking another look at the above graph, this makes sense. “Click Here” involves absolutely no commitment – it’s purely a directive. “Register” on the other hand, sounds like going to the DMV and spending three hours in line.
Before you make any modifications to your forms, use an A/B testing setup to compare your conversion rates before and after. Maybe you’ll be able to add in a new input field without sacrificing conversion rates. Perhaps you’ll finally get an objective answer on what text to place in your CTA button. With time, iteration and solid data, you’ll be able to increase form conversion rates and boost your client base.
It was 2011 and I had just started working for a web company in its IT sector. My role was one of the less “defined” ones, at the confluence of sales and tech, a bit the middle-man amongst departments that were in tacit conflict. There was always at least one project sold under a misunderstanding or misrepresentation.
When pointing out an impending disaster to the directors (such as a project being undersold, or us being unprepared and understaffed to complete it on time), they would take the sales rep’s side because “he is the one who brings the money in, certainly not the devs.” Yet it was the devs who were turning those projects into concrete realities. It was the devs who should have been consulted for an in depth requirements analysis and a correct time cost evaluation, for sales to evaluate the money cost from there on. The departments, however, avoided communicating with each other whenever they could, assuming the other’s affairs were secondary to their own. They both overestimated their grasp on the other team’s skills and endeavors.
Now try for the sake of discussion to put yourself into a CIO’s shoes. Picture your IT department. What will your first thoughts be? Will you lament the money the department has wasted, or linger on frustration due to poor results, delays and bitter compromises? What measures should you take?
Business First, Tech Later – Or Is It?
Corporations teach that IT must be run like a business, with CIOs as business leaders, not technology pundits. Investments into IT should be spurred by business strategy. Nevertheless, at the 360 IT infrastructure event in London in 2010, with the recession causing a shift in IT roles and responsibilities, the general sentiment was that IT is very much a “changing face of business.” Attendees seemed to acknowledge the necessity of developing oneself and one’s staff into well-rounded, “business-savvy and technically-skilled” workers.
The results of an ulterior CA Technologies study from 2012 on over 800 global businesses showed a clear disconnect between IT and their execs as the main reason for missed opportunities for revenue growth and reduced customer engagement and satisfaction. 34 percent of the Business respondents in the survey dubbed their relationship with IT as “combative, distrustful or siloed”, and almost just as many on the IT side agreed.
Perhaps the best solution is for both sales and marketing departments to better their technical knowledge, and for tech teams to improve their administrative and marketing knowledge?
The Middle Ground: An Insight on How To
Belinda Yung-Rubke, director of Field Marketing at Visual Network Systems, is sure the answer sits in finding a common language and setting up common objectives, while Jimmy Augustine of Hewlett Packard urges a forceful bridging of the IT and Business gap. “The two should be one, like peanut butter and jelly. The right hand should know what the left hand is thinking and vice versa.”
Jeff Tash, CEO of Flashmap Systems, Inc and author of the free Architecture Resource Repository Site, recommends a three-step approach to bridging this gap: Consolidate, Standardize, Communicate. Initially, this involves eliminating redundancies, reducing resources, and aiming for reusable products and services instead of one-offs.
Most important is the final step, communication. Marketers and techies can often speak completely different languages. One group talks about B2B, B2C, CPCs, CPMs, DMOs, PPAs, PPCs, ROI, and UGC, and the other talks about HTML, CSS, JS, SQL, XML, JSON, IDEs, and APIs. It’s important to define a common vocabulary, so that no one is nodding along in meetings without any idea of what the discussion is about. Tash recommends to “make certain that both technical and non-technical audiences share a unified knowledge base” to ensure a dialogue of ideas, rather than a monologue.
We often see an expectation for techies to speak the marketer’s language, but not the other way around. In Vish Mulchand’s opinion, “the bosses you have to get the budget from don’t care about the technical side of why you’re pitching for a certain investment; they want to know how it will improve the business and grow revenue, so the tech guys need to know how to communicate this.”
It can be difficult for marketers to find motivation to learn tech language, but it can lead to more independent and self-sufficient behavior. In larger organizations, a simple typo fix can take weeks to make its way through bureaucracy. In smaller agencies and startups, you can usually just tap a developer on the shoulder and ask him to fix it. But consider the fact that even a one-minute interruption can require 10–15 minutes of ramp-up to resume working. With a little effort, marketers can learn just enough to be able to make small changes like these, avoiding bureaucracy and keeping developers focused and efficient.
It might be wise to take a leaf from the startup world in this regard, where the lines between marketing, product and development become blurred. Instead of treating different aspects of a project as silos, marking territory, and making sure no-one crosses borders, all of these different aspects are treated as offensive weapons to win in the market.
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.
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.
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.
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.
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.
In the beginning CERN created the Web, and the HTML was the Word of the Web, and the Web was HTML. It was all perfect and perfectly simple, as we all know true genius lies in simplicity. But the problem soon arose that not everyone who wanted to have an online presence knew how to code. With plain old HTML, this meant that anything from a minor typo fix to adding a new feature had to go through multiple departments.
The birth of content management systems during the late 90’s carried the promise that you’d never need a coder or programmer again. With little or no knowledge of HTML or programming, the CMS would manage files and images, provide forms, complex content searches, and any other feature you could find a plugin for. But all of this came at a cost – websites became slower to build, slower to load, and it was difficult to really customize anything, so most people just bought a theme instead of creating their own designs.
The Advent of Static Site Generators
Brian Rinaldi, Content and Community Manager at Telerik, suggests “static websites today are just like vinyl LPs: they’re coming back.” Static Site Generators provide a middle ground between static and dynamic websites. There’s no abstract database – all the content is stored in text files. Instead of generating the content on demand, like a dynamic website, they pre-generate the content, so the user sees the file exactly as it is on the server. Adding and editing content is not as easy as on on a dynamic CMS WYSIWYG editor, but Markdown and Liquid templating make Static Site Generators a more flexible than an old school pure HMTL site.
All of this means that Static Site Generators are ideal for any site that doesn’t need to generate content on the fly. You can’t build a social media platform on a static website, but if you just need a blog or marketing website, Static Site Generators are the way to go.
Why have Dynamic CMSs been so popular?
Some dynamic CMSs are also fairly customisable – many massive companies like Wired, and Quartz, and TechCrunch have completely retailored WordPress into essentially a new CMS, making it ideal for their specific needs.
Wired uses a customized version of WordPress
Why Are Static Site Generators On The Rise?
While dynamic CMSs are great for people who need a basic WordPress (or Joomla, or Drupal) theme website, or for massive corporations requiring e-commerce platforms like Magento that can support thousands of people, they create challenges for those in-between. For one, it is difficult to create custom layouts. Starting with a theme means hacking away at the existing code before implementing your own designs, and starting completely from scratch is a monumental effort.
Without a lot of development work, dynamic CMSs are slow. Even with development work, caching causes a website converted to static HTML to load significantly faster than the same site rendered from a dynamic CMS. Smashing Magazine ran a test on their own site – the static version loaded 6 times faster than the dynamic version. This is especially important for mobile devices, where internet can be inconsistent and unreliable. Studies indicate that 57% of online visitors will abandon a page if it takes longer than 3 seconds to load.
Static Site Generators play nicely with CDNs, such as Amazon, CacheFly or Incapsula, which have also been gaining popularity. When you open a webpage on a static website, that page simply downloads the HTML from the server, which on a CDN can be cached for faster speeds. With dynamic CMSs, when you load a webpage the CMS has to render the page on demand. Although assets can be hosted on a CDN, the webpage itself cannot, which means significantly worse performance for the user.
Dynamic CMSs also expose your website to hackers and exploits – and the more popular a CMS is the more likely it is for it to get under attack. Static websites simply don’t have back-ends to hack into.
Some Examples of Static Site Generators
Middleman, Harp and GitBook are also popular. If you use these, you might want to look into Aerobatic for hosting. GitHub Pages is really aimed towards using Jekyll, whereas Aerobatic is generator-agnostic. Brian Rinaldi has put together a collection of simple sites built with various Static Site Generators, for an efficient comparative study of the lot.
How Can I Switch From My Dynamic CMS to a Static Site Generator?
The biggest challenge is rebuilding your existing layout, but since Static Site Generators are built around plain HTML, you can usually just save the HTML that your present CMS renders to your desktop, then cut it into a few templates and include files. It’s a lot easier to convert from a dynamic CMS to a Static Site Generator than the other way around.
Jekyll provides tutorials on importing your posts from many dynamic CMSs, including WordPress, Drupal, Tumblr and Joomla. However, pay attention: ensure existing URLs match up! You don’t want any links to your current website to break when you make the switch.