Static sites – The FormKeep Blog

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. Chris Loos over at Urban Insight has 10 reasons for using CSS preprocessors.

Site Generators

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

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

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

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.

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.

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.

The Quickest Ways to Modify and Optimize Your WordPress Themes

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

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

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

Pre-Optimization Cleanup

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

Clean Up Messy Code

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

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

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

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

Ongoing Optimizations

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

Hide and Remove

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

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

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

Source: WP-Optimize

Optimize Images

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

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

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

Source: TinyPNG

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

Backup and Upgrade

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

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

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

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

Ongoing Modifications

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

Customization

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

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

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

Switching Themes

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

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

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

Why Integrating Zapier with WordPress Will Save You Hours of Work

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

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

One word: automation.

Automation

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

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

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

Which Tasks Should You Automate?

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

Social Media

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

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

Spreadsheets

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

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

Data Capture

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

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

Project Management

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

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

Time Tracking

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

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

Notifications

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

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

Events

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

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

Final Thoughts

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

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

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

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

The Biggest Landing Page Design Mistakes and How to Fix Them

If you’re a web designer or developer, you know about landing pages. Chances are, you’ve dealt with your fair share, and you know that a good landing page will capture a visitor’s attention, drive ROI, and ultimately generate conversions that create more business. But what happens if your landing page is poorly designed?

Well, none of those things.

If you’ve been working on landing pages for a while and haven’t seen a significant boost to your conversion rates or leads, you may be making a few fatal design errors.

Today we’re looking at the biggest design mistakes when it comes to landing pages and what you can do to avoid them. Let’s dive in…

Unoptimized Images

If you’re a web designer or developer, you’re probably sick of hearing about optimizing your images. But the reason you hear about it so often is that images are a big deal when it comes to design. Pictures have the power to connect and communicate with your audience and draw attention in ways that words alone can’t achieve. But when your images aren’t optimized properly, they can do far more harm than good.

Uncompressed Images

One of the biggest mistakes when it comes to images on your landing pages is keeping them uncompressed. An uncompressed image – or an image that renders at full size every time the page loads – will cause your site to load significantly slower. If you’ve done your homework, you know that site speed is a major factor in conversions. If the design of your site relies on images (which it should, but we’ll get to that), make sure your graphics are working for you and not against you.

How to fix it? CreativeBloq has a list of compression tools available for designers and developers to help compress images.

Unemotional Images

While file size and type have a dramatic impact on your design, it turns out the subject of your images is equally important to optimization.

When it comes to visual marketing, people love bold images of other humans. Human faces draw more attention than any other type of image on the web, and people tend to mimic the behavior of the images they’re seeing. If you have a picture where a person is looking in a certain direction, for example, your visitors will typically follow the image’s line of site, too.

A good example of line of site from Chemistry.com.

People also tend to copy the emotion they see in the images. One study conducted by Basecamp actually showed that by featuring an image of a smiling person on a landing page, they increased conversions by 102.5%. Basically, if you’re not using your images to convey human emotion and connection, you’re missing out on a huge opportunity.

How to fix it? Choose high-quality images with an emotional appeal (specifically, happy people) and use graphics that include a line of sight that points to specific content whenever possible.

Content Overload

Of course, when you’re designing a landing page, you should probably be using more images than text anyway. Why? Because people are statistically more likely to skim text-heavy pages, whereas sites with simple designs that minimize text and focus on images are far more likely to engage visitors.

Too Much Text

One of the biggest mistakes when it comes to designing a landing page is including too much static text without enough visually pleasing elements to balance it out. As a designer or developer, you may not have a ton of control over how much content needs to be included on the page, but you can use the design to minimize a text-heavy look.

The best way to do this is using white space strategically to make certain features stand out (images and graphics) while minimizing other features (long paragraphs or unnecessary text). Of course, the best thing for your site is to remove unnecessary copy all together, but if that’s not an option you can always use the layout and design to your advantage.

How to fix it? Incorporate white space throughout your site to highlight specific elements, such as the CTA button or a lead capture form. If possible, eliminate or combine text to make it easier to skim. Jimdo blog has some great recommendations for designers working with text.

Clean web design and good use of white space by the Amble App site.

Too Many Options

Another common content overload error is presenting your visitors with too many options to click through. One study by Sheeya Iyengar, a social psychologist at Columbia University, found that people react differently when given multiple options versus limited options; specifically, the more options they have to choose from, the less likely they are to choose at all.

What this means for your design is that having too many places to click, multiple CTAs, or a general “cluttered” look will turn visitors away fast.

How to fix it? The easiest solution is to keep your designs simple. Cut away any excess until you’re left with only the absolute essentials. Keep navigation to a minimum (that means eliminating drop down menus wherever possible, too), create one clear CTA per page, and don’t redirect visitors off your page unless you need to.

Ineffective CTAs

Your call to action (CTA) is another major player when it comes to having an effective landing page. But the problem with CTAs is that if they’re not executed well, they’re not going to do you any favors. If you want to really engage visitors, you’ll need to avoid these common CTA mistakes.

Wrong Placement

The biggest mistake when it comes to CTA is location. You’ve probably read endless articles giving you a variety of advice on where to put it – whether it’s above the fold or below or whether it should be on every landing page or a select few.

For the most part, the “right” location will depend on your website design and visitors. Most of the time, you’ll probably want to include a CTA above the fold – or in the top part of your design, incorporated with a strong image or graphic that grabs attention. According to some studies, most people spend around 80% of their time above the fold when they visit a site.

But as we’ve noted before, the location really depends on your visitors. If your visitors already know what you’re about when they come to your landing page for the first time, then having a CTA above the fold is the best thing you can do. However, if all of your visitors will be visiting to learn who you are and what you’re about, then having a CTA after some vital information may be more beneficial.

How to fix it? Know your customer base. Because location of your CTA is important, you’ll need to determine whether or not the people visiting your page have brand awareness of your company, product, or service before they visit your site. Brandwatch has some good suggestions for testing your brand awareness.

Wrong Colors

Besides placement, the next biggest mistake when it comes to CTAs is choosing the wrong color. Surprising? Well, don’t be shocked. In a study called Impact of Color in Marketing, researchers found that up to 90% of snap judgments are based on color alone.

Kissmetrics actually made an infographic about how colors affect purchases. While some studies note that no single color is the “right” choice (because color is often associated with personal experience) they all show that color choice does play a role in conversions.

How to fix it? Choose colors for your CTA buttons associated with the goals of your site and customer base. Blue, for example, is often associated with trust and security, while green works well for the budget-conscious crowd. Here are a few tips from CoSchedule to help you choose the right color for your site.

Firefox uses a classic green CTA button for its free product.

Unresponsive Theme

While the other mistakes listed above are certainly faux pas, the number one biggest mistake when it comes to designing landing pages is not optimizing for mobile viewing. In other words, if your theme isn’t responsive, you’re doing it wrong.

This is especially true if a lot of your visitors come from social media and search. According to research, nearly 80% of all Facebook users access the web exclusively through mobile, and a quarter of all Internet searches happen via mobile devices. These statistics are only going to increase as the number of internet-connected devices increase, too.

How to fix it? This really comes down to choosing a good responsive theme for your website as a whole, but you should also optimize each landing page to be designed for mobile use by using images, scroll-friendly layout features, and text that’s easy to convert to small screens.

Final Thoughts

Making sure your landing pages are doing their job can be tough, but there are a few great ways to minimize mistakes and boost conversions.

Optimize your images for fast speeds and choose pictures that people can relate to (i.e. happy!).

Minimize unnecessary content and focus on creating a visually appealing website that’s simple to use, so you don’t confuse or overload visitors.

Create a clear CTA that grabs attention where you need it and works for your purposes by choosing the right color, style, and placement.

Go mobile! Make sure your theme and landing pages are designed to be responsive to all screen sizes.

“Above the Fold” Design Strategies that Turn Visitors into Customers

One thing’s for sure – we all want websites that convert. But getting random site visitors to turn into customers isn’t always an easy task. You have to balance the right amount of attraction with the right amount of useful information to keep them on your page.

That’s where site design comes into play. Eye tracking research conducted by Jakob Nielsen reveals that when visiting a new website, up to 80% or more of a user’s attention is focused at the top of the page, known as “above the fold”. What does this mean? It means your most important information should be located there if you want to improve your conversion rates.

But what exactly is “above the fold” and how can it help boost conversions? Here’s what you need to know.

What is “Above the Fold”?

“Above the fold” is a term for any content that displays at the top of a website’s landing page. The “fold” itself originated in the world of print, when newspapers were folded in half and the most important stories, headlines, and graphics were placed above the crease line in order to grab attention.

When the Internet became the main source for major news in lieu of newspapers, the fold still remained a defining point between content that was considered compelling and content that was purely informational. Once the Internet evolved as a main source of information, however, the fold became synonymous with the content that a visitor first sees when landing on a website without having to scroll down (which, in essence, is a “digital” fold).

But websites are not newspapers, and when it comes to this digital fold the real question remains: Does above the fold still matter?

And perhaps more importantly, does above the fold design still work for conversions?

Is It Still Important for Conversions?

The answer? Kind of…

Chartbeat argues that most conversions (about 66%) actually happen below the fold instead of above it, while some designers feel that the fold concept is obsolete altogether, and may have minimal impact on conversion rates. In terms of conversions, above the fold may be technically irrelevant.

However, those same designers will still argue that first impressions are important. And since users spend a majority of their time looking at information above the fold to judge a website’s validity, above the fold design strategies are still the best way to make a great impression.

Above the fold design is about giving customers a chance to spend time on your page. Statistics show that the longer users are engaged, the higher conversion rates will ultimately be.

So while it may not have immediate impact on conversion rates, it’s still a vital component for engagement and long-term conversions.

But what should you put above the fold to entice visitors?

What to Include Above the Fold

A 2014 Google study found that advertisements placed above the fold were rated with 73% viewability (defined as 50% of the ad’s pixels being onscreen for one second) compared to only 44% viewability for ads placed below the fold.

A Nielsen Norman Group study also noted that, “What appears at the top of the page vs. what’s hidden will always influence the user experience – regardless of screen size.” The Nielsen study found that the difference between how users treat information they see above versus below the fold is 84%, meaning users will only scroll below the fold when what’s above it promises significant value.

DO give a promise of value

Above the fold design should set expectations for future content: Is what’s being offered interesting? Is it worth reading? Is it helpful?

The best way to add value is to choose design elements that grab attention:

Use images to create a happy environment that draws people in. Whether you’re selling a problem-solving solution or a vanity product, you’re also selling an experience. Choose graphics and images that reflect happiness to set the mood. The New York Times found that happiness is one of the main drivers for social media sharing.

Image source: Men With Pens. A great example of “happy” design.

Choose headlines that offer solutions to problems (even if you’re selling a
vanity item). Your graphics, images, and colors will probably be the first thing your users see when they visit your site, but your headline is what really tells them whether or not they should stay. Having headlines that address problems or pain points has been shown to increase conversions by 32% or more. Copyblogger has a great article for crafting headlines that work. But if all else fails, stick with a “How To” headline, as they’re shown to be the most effective (e.g. “How to Cure Your Acne in Just One Week”).
Offer website differentiations that prove your credibility. Placing your website’s credentials — trust badges, social proof, etc. — above the fold is a tried and true method to increase conversions. This is especially true if you have an e-commerce website, as studies show that buyer confidence is often linked to trust. Cars.com recently boosted their conversion rate 2.7% by having a security seal on their site. Adding social proof and credibility indicators can improve conversion rates by 144.1% on landing pages.

Image source: Sidekick (now HubSpot Sales). A great example of using social proof (‘200,000+ Weekly Active Users”)

DO include a Call to Action, but ONLY IF…

While it’s important to include a Call to Action (CTA) somewhere on your website, above the fold may not actually be the best place to do it (though there’s still some debate). In the past, most CTAs have been placed above the fold to grab attention, but, as Chartbeat noted, most interaction actually happens below the fold, making above the fold CTAs essentially useless.

Oli Gardner from Unbounce echoes that sentiment: “Placing your CTA above the fold is the most common placement choice. However, this can be expecting too much of someone who has just arrived at your page.”

So does this mean that you should never include a CTA above the fold? Not necessarily. It depends on the kind of customers you’re trying to attract. You should include an above the fold CTA if…

Your site visitors already know who you are and what you offer. It’s best to give the CTA right away in this case, as they’re visiting your page to get something accomplished, not to learn more about your product or service. Or…

Your site visitors are new but what you offer has immediate, noticeable value. If what you’re offering is fairly straightforward (e.g. you sell soap and only soap), then your newbie visitors would benefit from an above the fold CTA, assuming you give them some content and context. In this case, including a few sentences about your product or service along with your CTA will increase conversions.

Image source: Buffer.

However, if your customers don’t know who you are and what you do needs some additional explanation, do not put your CTA above the fold, as it may put off potential customers.

If you’re having trouble deciding whether or not to put your CTA above or below the fold, just remember that it’s all about motivation: How motivated is your visitor to click that button? If you find that your visitors may benefit from more copy related to your product or service in order to help them decide, then it’s better for your conversion rates to keep your CTA further down the page.

DON’T create a false bottom

Even if you’ve decided to keep your CTA above the fold, don’t forget to actually include something below the fold. Many websites create what’s known as a “false bottom” – a design that makes it seem as though there’s more information on the page to scroll to, but in reality has nothing else but the CTA.

If you’re really after conversions, you can’t stop at above the fold design. You have to include something that users can scroll down to, especially if your visitors are viewing your page from mobile devices. A 2015 Q2 MOVR Report revealed that 11% of mobile users start scrolling within 4 seconds when the page has finished loading. If you have nothing to show below the fold, your visitors are more likely to move on, which means fewer conversions for you.

Joanna Wiebe of Copy Hackers & Airstory says, “Don’t cram everything above the fold. Countless tests and [scroll-tracking] studies have shown that visitors are willing to scroll… as long as they know there’s something to scroll down for.”

What’s the best way to keep people scrolling? Include great content below the fold, too.

DO include great content below the fold

Ultimately, your visitors will decide quickly whether your site is of value, which is why it’s important to have a great above the fold design (you should put your most compelling content up there!). But once they begin scrolling, they’ll need more substantial information in order to take the next step (e.g. click that CTA button). If your site is nothing but above the fold design, you’ll miss out on the chance to truly convert. Be sure to include content that keeps your visitors scrolling after you attract their attention.

Progressive Enhancement: Start Using CSS Without Breaking Older Browsers

Once upon a time (okay, the late 90’s and early 00’s) most websites were developed using Graceful Degradation (GD) – a web design strategy that attempted to standardize the way users viewed websites from different browsers (which was a reaction to the great Browser Wars, of course).

As browser development progressed, GD allowed users with updated browsers to experience the best and brightest design elements available, while users with older browsers had a slightly “degraded” (though still functional) experience. The aim was to encourage users to continually update their browsers as newer versions came out, or to switch to more popular browsers that supported more design elements. This strategy worked well in the early days of the web, as most browsers were still relatively new and needed fewer updates to be considered “modern.”

Flash-forward a few decades, however, and things are a bit different. Most browsers go through several updates annually, and some have ceased to be updated at all (Netscape, anyone?). What this means for web developers and designers is that sites created using GD are no longer functional with today’s modern browsers.

So, why not just force everyone to use modern browsers? Not everyone who uses the Internet is able to (or even wants to) update, which means that no matter how much developers want users to be on the latest version of their site, people will continue viewing web pages without proper support. So how should developers approach web design knowing that not everyone who visits their site will be using a modern browser? They should build their sites using Progressive Enhancement.

What is Progressive Enhancement?

Progressive Enhancement (PE) is an alternate design strategy that offsets any issues caused by older browsers. Unlike GD, which is optimized for modern versions and degrades with older versions, PE starts with the old – sites are built with basic HTML elements supported by older browsers – and adds the latest bells and whistles on top of it for modern browsers. PE builds sites basic enough that any browser can handle them, but complex enough to meet contemporary design demands.

PE works by using layers of code, with the first layer being HTML. CSS is then added on top of the HTML to alter the visual and design elements as needed. Then JavaScript is added to the final layer for modern usability (the “flashy” features of Web 2.0). The layers can be adjusted to create any look and feel, while the simplistic foundation makes it viewable from any browser without major complications.

PE-Friendly CSS Tools

The best way for developers to take full advantage of PE is to use CSS tools like flexbox (flexible box layouts), filters, and blend modes in their web designs to create sites that can be viewed on any browser.

Flexbox

One of the best ways to use CSS with PE is to create layouts with flexible box, or flexbox, instead of the standard grid layout. The boxes expand items to fill any free space, making sites adaptable to a variety of display and screen sizes. This is not only extremely helpful for older browsers, but for modern portable and mobile devices.

Flexbox adds to the four basic CSS layout modes: block layout, inline layout, table layout, and positioned layout. It’s intended for laying out more complicated pages, as it allows for the position and size of certain elements to remain consistent.

With flexbox you can also create fluid layouts, specify how excess space is used, control the direction of certain elements (left-to-right, top-to-bottom, etc.) and reorder any element as needed.

It does have a few drawbacks, however. While it’s technically supported across all browsers, it does require slightly different syntax for older browsers. For example, Google Chrome still requires a “webkit” prefix, and Firefox and Safari will still need to use older syntaxes to run properly. But despite these caveats, flexbox is a great way to give websites a modern feel (think mobile-friendly) without breaking older browsers in the process.

Filters

Another great way to use CSS without causing browser issues is to use filters to add graphic effects like blurring, sharpening, or color shifting to different elements. Filters can also be used to adjust the rendering of an image, background, or border.

Why is this important? Filters can be used through CSS to add graphical changes to a site without affecting the HTML. Any browser that has a basic Scalable Vector Graphic (SVG) specification will show filters (which include almost all browsers, regardless of version). Developers at Mozilla were the first to discover how useful filters and CSS styling could be. They combined CSS and SVG working groups to make filters available for HTML as well, making it a universal tool for adding graphic effects.

Filters work best as a post-processing step after page content has been laid out. Basically, when browsers load a page, they first apply styles, then layouts, and then render the page. Filters are the final step before the page is copied to the screen. They take a snapshot of the rendered page as a bitmap image, and create pixelated graphics over the top, which gives the page a “filtered” effect (like looking through a camera with a filtered lens). Any number of filters can be used to create effects without impacting the original HTML.

Of course, there are some limitations. Filters can potentially impact loading speeds (though very minimally), and while they work across all browsers, Internet Explorer has the most trouble when it comes to applying them. IE can only apply filters to images and text, not chunks of HTML, which could cause some rendering issues with older versions. But for most browsers, filters are a great choice for adding effects without compromising the site’s structural integrity.

Blend Modes

Though technically considered “experimental,” blend modes are another great way to add dynamic effects to a website without causing too much trouble for browsers (though it should be noted right off the bat that they do work better with newer browsers). How do blend modes work?

Blend modes – like multiply, screen, overlay, and soft light – take layered pixels and combine them in different ways to produce a new effect (think of one picture on top of another picture, then blended together). Normally blend modes are created using Adobe Photoshop and implemented on static sites, but they can also be utilized on dynamic sites with CSS.

The most common way to do implement blend modes is with CSS Compositing and Blending, including background-blend-mode (which allows blending between background layers), mix-blend-mode (which blends elements with their backdrop), and isolation (which stops elements from blending with their backdrop). Using these modes, images can be manipulated without taxing the site’s HTML.

Getting blend modes to render smoothly across browsers is still a bit of a challenge, however, as they tend to be better supported by newer browsers. But they can still function in older browsers by using vendor prefixes or by activating experimental features. Similar to filters, IE has the least amount of support when it comes to blending modes (As of 2014, IE has them listed as “under consideration” for further support) but for the most part they can be used without too much drama across multiple browsers.

Final Thoughts

It can be a hassle to create websites that are viewable on old and new browsers alike. The best way to overcome browser issues when designing a site is to use Progressive Enhancement to layer HTML, CSS, and JavaScript to overcome any issues. By taking advantage of CSS tools like flexbox, filters, and blend modes, you can make the most of CSS without crashing older browsers. And while some tools may work better than others when it comes to browser support, they all have some advantage when creating dynamic sites that need to look good on any browser.

Not Sure Which Static Site Generator to Pick?

Static Site Generators (SSGs) are a great option for many web developers and bloggers looking to build fast websites that can handle a lot of content without relying on bulky servers or databases. But there are dozens of different generators on the market, with each one declaring itself to be the “simplest and fastest” SSG on the market. So which one should you choose?

If you’re a newbie blogger who wants to get into coding, then you’ll need something a little more user friendly. If you’re a programming-savvy developer, on the other hand, you could tackle something a little more intense. Here we’ll compare a few of the most popular SSGs to help you decide which direction is the best for your site.

Jekyll

Website: jekyllrb.com

Language: Ruby

Templates: Liquid

License: MIT

Similar: Octopress. Serif, Enfield, JAQ

Jekyll markets itself as “a simple, blog-aware, static site generator” and it’s one of the most popular choices when it comes to SSGs, especially for first-time users. Jekyll allows you to blog straight from your desktop, giving you more control over every aspect of your blog without having to deal with heavy databases and bloated frameworks. In terms of speed, the performance is nearly unbeatable. But does that mean Jekyll is the right option for you? Let’s take a look at some of its best (and worst) features.

Best Features

User friendly. Jekyll is built on Liquid, a templating engine that originated with Shopify, which means that it includes ready-made templates that are fairly straightforward to use. If you’re a developer that doesn’t want to spend hours creating your templates from scratch, then Jekyll is the easiest choice by far.

Built for blogging. Jekyll is almost ready-made for blogging, as its pages are automatically organized by post. It also lets you import existing blogs from Joomla, Drupal, WordPress, or almost any other dynamic blog engine with relative ease, so if you’re transitioning from a current blog to Jekyll, you won’t have to go through the tedious setup process.

A large support community. Because Jekyll is so popular, it has a great community support system if you ever need to troubleshoot an issue. This is especially good news if you’re hosting your site through GitHub, the equally popular public webhosting service most commonly linked to Jekyll. If you ever have questions you can’t answer, the solutions are only a few clicks away.

Worst Features

Less customization. While the Liquid templates are great if you just need something basic to get started, they don’t offer much in the way of customization. Because its engine is primarily designed to support Shopify, it doesn’t allow for any custom code whatsoever, which isn’t helpful for developers wanting to give their sites a unique look and feel. If you want to do something more customized, you’ll need to develop your own Liquid helpers, which can be time consuming.

Poor support for Windows users. If you’re running your website from Windows, you might be at a disadvantage. Jekyll doesn’t officially support the Windows platform, so setup requires a lot more time, effort, and maneuvering to work properly if you’re not already on OSX.

Who should use Jekyll?

If you’re a first-time SSG user or blogger, Jekyll is the perfect choice. Because Jekyll doesn’t require advanced knowledge of web development, it’s extremely user friendly and still includes powerful features for those with more experience. If you like building your own templates in Liquid, you’ll also do great with Jekyll.

But if you’re not familiar with Ruby (or you don’t like it), or you feel limited by the templates supported by Liquid and don’t want to spend time building your own from scratch, you might want to go with a different SSG.

Pelican

Website: blog.getpelican.com/

Language: Python

Templates: Jinja2

License: AGPL

Similar: Urubu, Lektor, Hyde, Nikola, Acrylamid

Pelican is another popular SSG built using Python. It incorporates templates from Jinja, a Python-based template engine, which gives it added flexibility when customizing themes and templates. Pelican also supports WordPress and Tumblr and includes its own RSS feed, making it a good choice for bloggers looking to make the move from dynamic to static. Let’s review a few features that make Pelican stand out from the crowd.

Best Features

Flexible options. Pelican features multi-language content posting and can use multiple formats, such as reStructuredText, Markdown, or ASCiiDoc. It also allows for code (syntax) highlighting and has a variety of plugin options, making it a good choice for developers who want to use styles that are familiar and friendly.

Great for full websites. Because it supports Jinja templates, Pelican can cater to a variety of unique templates that go far beyond basic blogging. The themes and templates coming from Jinja are also extremely easy to use, which means less time for developers when it comes to customizing and coding.

Import friendly. If you’re looking to move your dynamic site to a static site but don’t want to spend more time than is absolutely needed, Pelican is the perfect choice. It supports import from a variety of different blogging sites, making it one of the easiest to use in terms of moving existing sites over to a static platform.

Worst Features

Requires knowledge of Python. When it comes to coding, Python is a higher-level programming language and takes a fair amount of experience to use. For those who are familiar with Python, using Pelican shouldn’t be a problem, but if you’re more familiar with JavaScript or Ruby, then you might run into more problems than using Jekyll or another Java or Ruby based SSG.

Trouble with org-mode integration. If you’re one of the few developers using org-mode for Emacs to write your blog posts, you’ll have trouble using Pelican. While there’s a plugin to read org files (org_reader), it isn’t as well supported as other SSGs and often crashes. If org-mode is something essential for you, then Pelican isn’t the right choice.

Who should use Pelican?

Developers familiar with Python who want flexibility when it comes to coding will naturally gravitate towards Pelican. Those looking to build a website that goes beyond blogging, or who want to import existing WordPress blogs to a static site, will also love Pelican.

But if you’re a developer who is more comfortable using Ruby or JavaScript, then Pelican isn’t for you. And if you’re an avid org-mode user, you can probably find another SSG more suited to your needs.

Metalsmith

Website: metalsmith.io/

Language: JavaScript

Templates: HBS/Any JS

License: MIT

Similar: Brunch, Docpad, Cabin, Wainwright

Metalsmith is perhaps slightly less well known than Jekyll or Pelican, but it is by far the most flexible. Branding itself a “pluggable” site generator, it boasts an impressive library of plugins that gives your site any feature it needs, making it useful as more than just an SSG. Metalsmith’s website showcases it used for everything from generating eBooks to creating technical documents in addition to building blogs. Let’s take a look at a few of Metalsmith’s unique qualities.

Best Features

Built for developers. Metalsmith utilizes a very simple core and the rest is managed through plugins, making it very flexible and easy to use (that is, if you know what you’re doing). You simply give the site a source directory and then tell it which plugins to use. If you’re a developer that has used Gulp and you’re very familiar with Node.js (or any .js), you’ll love Metalsmith.

Not just for blogging. While it will handle all the basics of a blog, it can also be used for a variety of other projects, like converting markdowns to ePub files or creating project scaffolds. You could also use it to generate PDFs for your blog posts, making it a super flexible option for anyone wanting to add interesting projects alongside their static site.

Supports chained API. Maybe the most programmer-friendly feature, Metalsmith uses consistent and simple chained API, providing significantly reduced processing time. It also allows for things like unlimited linking, reduced client/server coding, and ID security. If these are features you need in your site, then Metalsmith should be your go-to SSG.

Worst Features

Less user friendly. Even though Metalsmith is designed for easy use, it takes a fair amount of programming knowledge to get it working to its full potential. This is definitely an SSG for developers who know what they’re doing, so if you’re a newbie, keep looking.

Small community. Unlike larger SSGs like Jekyll, Metalsmith has much less support when it comes to troubleshooting. A lack of resources and experienced users means less help when you run into tricky problems, though they do have a Slack group to help developers ask and answer questions.

Who should use Metalsmith?

If you’re an intermediate or advanced developer looking for more flexibility and control over your content, you’ll love Metalsmith. It’s also great for those wanting to do more than just blog, and if you’ve got a good understanding of JavaScript and don’t mind spending a little extra time developing your site, this is a great option.

But if you’re a newbie developer or someone unfamiliar with JavaScript, or you just want a good support system if you run into trouble, this SSG is not for you.

7 Quick Wins to Improve Your Website’s Loading Speed

You could have the most visually appealing website with absolutely mind-blowing content, but if your site takes too long to load, your users won’t stick around long enough to experience it. Slow websites drive away potential business and prevent your site from being found on search engines like Google and Bing.

Slow speeds can also affect customer satisfaction. As one study conducted by the Aberdeen Group shows, even a one-second delay in page loading speed can decrease customer satisfaction by 16 percent and reduce conversion rates by 7 percent. Basically, speed sells, and slower speeds mean less return on your investment.

With that in mind, here are 7 quick wins – the easiest, most inexpensive, and quickest implementations – to improve your website’s loading speed.

1. Upgrade your hosting plan

The most obvious solution for speeding up your site is to have the most bandwidth available to you. Choosing a hosting plan with sufficient bandwidth is one of the most important decisions you will make when building your site, and choosing the wrong plan can have major consequences.

Many new site owners choose to host through a shared plan because shared plans are cheaper, but what they save you financially in the beginning will end up costing you down the road in slow speeds during high traffic periods. By investing in proper hosting from the beginning of your site’s development (or by upgrading your current shared hosting plan), you’ll eliminate the risk that your site will crash or stall when people need it the most.

For WordPress users, WPBeginner has a list of the top web hosting services that support high speeds.

2. Choose a responsive theme

When it comes to loading time, a basic responsive site will almost always outweigh a complicated, flash-based site. According to Yahoo, 80% of your site’s loading time will be spent downloading components like images, stylesheets, and scripts. These elements take a lot of time to load, so the more components there are on a page, the slower it will be. Basically, the simpler the site, the faster it will be.

The simplicity of your site’s theme also has a huge impact on loading speeds. If you’re using WordPress, it can be tempting to choose the fanciest flash theme to draw attention to your business, but bulky frameworks and heavy coding can slow down loading speeds for your users. The quickest way to overcome this obstacle is by choosing a responsive or mobile-friendly theme – a theme that responds to each individual user’s screen size.

Responsive designs cut down on unnecessary components and coding allowing for faster loading times. If you’re using WordPress, here’s a compiled list of 100+ responsive website themes that are both beautiful and fast.

3. Streamline your home page

Your homepage is the first impression you’ll make on any visitor. While it can be tempting to go “all out” and inundate them with as many widgets and graphics as possible, having an overwrought homepage can backfire on your site’s performance. By focusing more on content and limiting widgets, graphics, and extra features that may weigh your site down, you’ll not only reduce load times but improve your SEO and give visitors a chance to trust your expertise without the use of over-the-top gimmicks. A simple homepage is a win-win for you and your customers.

A few ways to improve your home page (or any high-traffic landing page) include:

Showing excerpts instead of full posts for blogs or news sections
Removing unnecessary widgets or sharing features and putting them on shareable content or on relevant landing pages
Minimizing flash features like rotating images or videos

4. Enable caching

Enabling caching lets you temporarily store data on a user’s computer so they don’t have to wait for each page to load as they click around the site. Most browsers will save anything from basic images to stylesheets, JavaScript, or even entire landing pages.

Be aware that most caches have a shelf life, however. Static elements like images can be cached up to a week, but third-party elements like ads or widgets can be cached for only a day or so. Optimizing your site with more static elements will help improve caching, which will in turn improve speed.

WordPress sites can use integrated plugins to handle caching for you, such as WP Total Cache or WP Super Cache. There are a few ways you can add caching without using a plugin, but if you’re looking to improve your WordPress site quickly, plugins are the easiest way to go.

5. Use Content Delivery Networks (CDNs)

Similar to caching, using a Content Delivery Network, or CDN, can reduce download times and improve your sites performance. CDNs take your static files (images, JavaScript, CSS, etc.) and host them on servers in geographic locations near your users, giving their computers quicker access. This system provides faster download speeds and can greatly improve your site’s traffic capabilities, as most CDNs also protect against large surges.

For WordPress users, using a content delivery network like MaxCDN will help reduce costs while providing easy-to-use integration with your current site.

6. Optimize your images

They say pictures are worth a thousand words, but pictures that are too big for your site are also worth thousands of lost conversions from slow load times. It’s common practice for many web developers to upload large images and then scale them down using CSS, but the problem with this method is that browsers still load the images at full size even if they appear smaller on the site.

The solution is to scale your images before loading them so you minimize the impact. As a note for designers and developers, make sure you’re using the correct file types, as they can make a big difference on loading speed. Using JPEG and PNG files instead of BMP or TIFF will help increase speeds and reduce download times.

If you have a WordPress site and you need a cheap and easy way to upload optimized photos without bothering your graphic designer, try using integrated plugins like WP-SmushIt or Lazy Load to simplify the process.

7. Delete unused plugins

One of the biggest changes you can make to improve your site’s performance is disabling unused plugins or widgets. It’s important to delete plugins you don’t plan to use – simply deactivating a plugin won’t stop it from taking up space.

It should also be noted that the number of plugins you have active doesn’t always affect loading speeds, and that well-coded and up-to-date plugins will not usually affect your site as much as poorly supported plugins. It’s important to keep track of which plugins you use on a consistent basis and eliminate the ones that don’t add value to your site, while keeping valuable plugins updated to the latest versions.

For WordPress users it’s important to find plugins that are WordPress optimized and have great support from their respective developers.

Final Thoughts

Improving your site’s loading speed can be overwhelming and often involves many different components of your site, but the main thing to remember is that simplicity is key. Focusing on strong content, simple design, optimized elements, and plugins that benefit your pages will all work toward improving speeds. If you’re unsure about your site speed, you can always start by doing a speed test. Below are a few tools to help you determine your site’s current speed.

Why You Should Use a Static Site Generator

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?

Dynamic CMSs like WordPress or Joomla saw their moment of glory throughout the 2000’s because they allowed anyone to create or edit a template-based website. With very little knowledge of HTML, CSS or JavaScript, anyone can install a predefined theme and start writing blog posts, without having to go through a web developer each time.

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

Jekyll is the most popular example of a Static Site Generator – it integrates easily with GitHub Pages for free. This means free hosting! And GitHub pages are really, really fast.

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.