How to Establish Yourself as a Web Expert to Clients

How to Establish Yourself as a Web Expert to Clients

The position of a web expert is not always easy to establish (even if you are already one), because it usually only becomes apparent to a client over time with a few successful decisions or projects. It doesn’t help either that many clients still regard creative digital agencies and freelancers as either kids living in their parents’ basement or shady professionals out to take them for every last penny.

Though a challenge, you can establish your credibility quickly using a few methods, some of which are relatively simple to do.

BE PROFESSIONAL

Before they’re convinced that you’re a digital professional and that they should trust your recommendations, you must first demonstrate your professionalism by doing the basics well:

• Be punctual at meetings and teleconferences.
• Always speak in a professional manner.
• Deliver pre-sales paperwork on time.
• Present all documents and images on professionally branded templates.
• Use correct grammar and punctuation in emails.

You’d be surprised by how quickly clients pick upon deficiencies in these basic business skills. Their perception of you and your recommendations will be immediately affected. Unless you come across as the consummate professional early on, shaking off this reputation will be difficult.

What Do Clients Really Want?

What Do Clients Really Want?

The art of giving freelance clients the right message at the right time, to ensure you have the maximum chance of getting the gig.

If women are from Venus and men are from Mars, where the hell did ‘The client’ come from? From strange silences to broken promises; mis-steps to breakdowns it can be a minefield.

In this post I wanted to open up a fundamental area for you to understand and action; how to communicate effectively with clients who are at different levels of understanding and sophistication to you.

There’s a great quote attributed to Henry Ford which goes something like this.

“If I had asked people what they wanted, they would have said faster horses.”


Henry Ford

Think back to recent conversations you’ve had with clients. You’ll have those who are certain of their pain, are well-researched and have pretty much diagnosed the solution before getting to you.

The other end of the spectrum are those who feel pain but are either early on in their information gathering or need convincing that your services have anything to do with alleviating their pain.

Aiming your wordage (on your website, in your marketing, in your proposal and pitch) at both of those ‘worldviews’ at the same time is a mistake and will result in no one party really connecting with what you have to say.

The more sophisticated client might feel you’re dumbing it down, the beginner may drown in buzzwords and jargon.

So what do clients really want? As with the Henry Ford example they’ll certainly not be able to clearly tell you themselves, so how do we find it out and give it to them without asking?

Note: This is a key trait of successful freelancers; and forms a key part of Freelancelift Pro video modules and is built into a complete workbook with scripts and templates.

In this post we’ll lay it out, to ensure you can strike a balance in everything you do and say to maximize your chances of getting the gig.

The one common denominator

One thing it’s vital to understand is that although all clients are different – with distinct experience and opinions – they share one common denominator… P-a-i-n.

Put simply, pain comes before any action.

You’re not being chosen because you can design, write, market, code… You’re being hired because the client has a business problem (or pain). Your service (in their mind and yours) should be the solution to that problem.

Taking an example of a doctor’s surgery. Do you enter the room knowing you need Ethopeptin ABC2000 or do you explain your symptoms first, for this (totally made up) remedy to be prescribed later?

Staying with that analogy, who would you trust more?

Doctor A
Listens to your symptoms and it’s triggers, explains what is likely happening in a language you can understand, walks you from this pain to explaining the benefit of the solution with a only a passing mention of the chemical compounds.

Doctor B
Makes assumptions as to your issue, goes heavy on the technical aspects and heads straight for the cabinet offering you a choice between prescription remedies you know nothing about.

My guess is you’re trusting the former.

Businesses have pain receptors, too. In most cases, it is this pain that creates the environment for research and action.

Indeed, a nagging pain is generally a signal that something deeper is wrong.

The mistake most freelancers make is to ignore the fact that opportunities to make a sale and win a client are only made possible by a business pain.

Three client buying stages

So with that said, how do your clients go to market for your service and how can you ensure you understand (at any point) what they’re really hoping to see and hear?

Pain > Research > Action

Pain
This is the starting point. Something isn’t achieved, a goal is not met and it hurts. It may be something critical to their livelihood, it may be a fairly minor pain but in any case it’s felt.

Research
At this stage the client will take it upon themselves to try and understand what just happened. During this process – and depending on the voices they listen to – the client will either be well prepared for figuring out the solution or be more confused.

Action
In either case, a client makes the decision that something has to change, that there is a need fix the pain they’ve just experienced, and one way or another they determine that they probably need a designer, or writer, or translator, or coder.

So off they go to source it

The single biggest mistake I see is freelancers positioning their entire message around the action phase, forgetting that there has been a journey of pain and subsequent research.

This leads them to put together an argument like this:

“You’re looking for a writer? Great I write 100 words per minute and can have it back in 3 days”

… when they should really be saying this:

“I guess you’re realizing now that not hiring a qualified copywriter was a mistake, maybe the interaction on your site isn’t what it needs to be. I’d like to show you how to fix that.”

Or they say stuff like this:

“I’m a full stack developer based in [location] helping with rails, building web apps in HTML5 and CSS3”

… instead of telling the story like this:

“How robust is your site? Maybe you’re find the slow speed and shaky structure is hurting your business, or maybe your current developer is now unresponsive. It’s probably why you ended up here.”

Here’s the thing; when your wordage (on your website, in your marketing, in your proposal and pitch) focuses on clearly explaining the pain and a logical solution you begin to resonate clients at any end of the spectrum.

Some questions to ask

The objective of the Pro Modules on this topic are to understand what clients want, so that you can reposition your message to give it to them.

If a client lands with your site, sees your marketing or receives a proposal and is immediately hit with a vague headline, buzzwords and descriptions of the software you’re great at using (which they’ve never heard of), it’s a fundamentally different experience to the one they’ll get if you meet them in a coffee shop.

In that informal setting, you’d cater your language to suit their experience level and simplify your message so that it resonated with them and their issues.

So get into the mindset of your client with a few simple questions:

  1. What drives them to do what they do, what do they care about?
  2. What positive qualities do they carry and how is their pain stopping them from exhibiting that?
  3. How clear is their vision? Do they need to borrow from your imagination & expertise?
  4. What is their financial outlook, is this a big outlay for them?
  5. In real terms, what do they expect working with you to deliver?

By answering these five simple questions, you can begin to build a picture of who the client really is, and what their sensitivities really are.

references: freelancelift

14 Tips for Making WordPress Admin Client Proof

Being a developer means creating sites for many different clients, including ones who don’t know WordPress and are very likely to break their website the moment you hand it over.

Now, this could translate into something as mundane as a poorly formatted blog post. Or, their tampering could result in a site that breaks – completely.

Client-proof your client's site and avoid broken websites and 404 pages.
Client-proof your client’s site and avoid broken websites and 404 pages.

Even when it’s totally the client’s fault, a broken site makes the developer look bad. I know, it’s not fair. But as the developer (and the one with all the WordPress guru-level credibility), you should know better than to provide unfettered dashboard access to a newbie.

This can be difficult terrain to traverse.

How do you ensure the site you spent all that time on stays looking and functioning great without bruising your client’s ego—and potentially losing them? There’s a fine balance to be made, but it can be done.

Let’s explore some ways to make the dashboard client-proof so you can remain proud of any site you build, long after it’s published.

Firstly: A Word on Maintenance

There are broadly two types of clients: Clients that want you to build a site and have you continue to maintain it for the long-term and clients that want you to build a site then walk away. The latter group believes that once the site is built, they can handle the maintenance. They have an “I’ve got this,” mentality.

And you know what? In some cases, they do. Some of your clients might be pretty WordPress literate already and are perfectly capable of maintaining a site with just a little guidance. But others might not have a clue and need their hands held through every step. That can be problematic if the client expects you to launch the site and pretty much hand over the keys.

It might be a budgetary thing or the client might legitimately think they can handle maintenance. Nothing a quick Google can’t solve, they might think.

Understanding Your Clients

Before we go any further, It’s important to take a moment to see this from the client’s perspective. They’re coming at this from a dollars and cents point of view. Web development is something they’ve decided to invest in. And as an investment, it’s something they’ve likely weighed the pros and cons of sinking money into.

But the extent of that investment varies from client to client. As I already mentioned, some might view web development as a one-time expense.

Many clients have money front and center in their minds.
Many clients have money front and center in their minds.

And no matter how much you try to convince them otherwise, they insist that once the site is launched, your relationship is over. Basically, the client views the cost of web hosting and a domain name and possibly a backup solution as their only recurring web development expenses and will handle the process of adding new content on their own thankyouverymuch.

When web development can cost several thousand dollars, it’s understandable that your clients will want to save a buck somewhere. A good way to pitch a maintenance plan is to offer reduced hourly rates and really sell the idea that site maintenance will be hands off for them. This might fly if your client anticipates needing to make many updates per month.

However, if only occasional updates to the content will be needed, you’re going to be hard-pressed to hard-sell a maintenance package.

Before you feel completely dejected at the prospect of your sites getting ruined by uninformed clients, take a deep breath and recognize there is something you can do. Many somethings, actually, that act as an ultimate defense against mistakes, missteps, snafus, and even arrogance.

With these safeguards in place, your client’s site will remain as you intended and he or she will remain pleased, no matter what level of control that’s preferred.

1. Create Your Clients’ Login Info

Setting up a username and password for your client can reduce security breaches.
Setting up a username and password for your client can reduce security breaches.

Before you ever hand over the site to your client, you can help alleviate some damage by creating their login credentials for them. This means you don’t have to send instructions about how to create a good username or password. Instead, you can just create them on your own and provide the details to the client during the training phase (which we’ll get to a bit later).

This way, you’ll avoid any admin usernames set to “admin” and any passwords set to “password,” and you’ll make a solid effort toward preventing brute force attacks. You can also modify the user’s settings to whatever works best. If you will be doing some maintenance for this client, you can restrict their access to the Editor level and then they won’t even be able to tamper with the site’s backend! Of course, this won’t work in every situation. If you must allow Administrator access to the client, then the rest of the tips outlined here will help you maintain control even while they’re in control.

2. Use the Admin Menu Editor Plugin

A quick way to prevent clients from messing with things on the dashboard they shouldn’t be is to use a plugin designed to limit access by user roles. You can certainly assign control to specific dashboard features by user role in the core installation, but it’s not always possible to limit what’s visible. A user without the appropriate permissions just wouldn’t be able to manipulate a certain aspect of the site.

The Admin Menu Editor plugin simplifies the process of editing dashboard menus.
The Admin Menu Editor plugin simplifies the process of editing dashboard menus.

But to avoid questions like, “Hey, why doesn’t X work?” you can hide these off-limits features altogether. The plugin I prefer to accomplish this is Admin Menu Editor.

This plugin allows you to define menu items by user role, change permissions, and reorder menu items by drag and drop for a more intuitive user experience. You can even create custom menus that point to specific parts of the dashboard or to external links.

3. Use a Child Theme

When building a site, you know how important it is to backup your work regularly. You also know why it can be beneficial to develop a site on a local server. All of those details aside, you should also consider using a child theme.

A child theme is basically a second level version of the primary or parent theme that keeps your custom design and features safe from accidental breakage. While you might be thinking about the potential damage done by a hacker, I’m more so referring to the potential damage done by core, plugin, or theme updates. All of these things are designed to patch security flaws and to add new features but updates can sometimes cause any customizations you’ve made to break.

This is especially important if you’re not going to be handling site maintenance for your client. A child theme means they will be able to restore their site as it should be prior to the update without your help. Now, they might need your help to ensure your design works with the new version of WordPress but it would then be up to them to seek you out for help.

4. Skip Code and Embrace Shortcodes

While some developers will advise against the use of shortcodes, I think it’s actually a pretty good idea. So long as you explain what they do and how they work in simple terms, your clients can use them to insert some rather complex features into their posts and pages, with no help from you, and without messing up the site’s structure.

The list of things you can accomplish with shortcodes is just about endless but it’s particularly helpful for inserting highly structured or complex formatting like columns, graphs, multi-tiered lists, and so forth. They can also be really helpful in adding information to a site’s sidebar. For instance, if your client will need to regularly insert new testimonials into the sidebar, you can set up a shortcode that would give them this ability.

Shortcodes are still technically code and you might want to shy away from requiring complete newbie clients from learning them. But for those who have at least a cursory knowledge of how things work on the web, you can introduce the concept during a brief training session. Then just include a reference list of all the enabled shortcodes and what they do.

5. Simplify the Visual Editor 

The visual editor is what your clients will be dealing with the most, so doing your best to eliminate confusion and make the process of writing and editing posts as simple as possible is a good idea. While you can manipulate what appears in the editor by making changes within a theme’s code, a simpler solution is to just use a plugin. Something like TinyMCE Advanced will let you change up all of the buttons that appear on the visual editor with just a few clicks.

TinyMCE Advanced gives you total control over the visual editor.
TinyMCE Advanced gives you total control over the visual editor.

With this plugin, you can make the editor as complex or as simple as you need. If a client is really familiar with the layout of a word processing program, they might prefer to have more buttons.

This has the added benefit of reducing a client’s likelihood of digging around in the text editor to accomplish what they want layout-wise and reducing the chances of something getting messed up. TinyMCE Advanced adds support for things like font family, font size, table editing, and list options.

On the flip-side, the Client-proof Visual Editor reduces clutter.
On the flip-side, the Client-proof Visual Editor reduces clutter.

Another plugin to consider is Client-proof Visual Editor. While the previous plugin focuses on adding numerous features to the visual editor, this one keeps it streamlined. This plugin lets you remove features so as to not confuse your clients. It keeps the options pared down to the bare minimum and automatically enables the “paste from Word” feature so your clients won’t accidentally wind up with sloppily formatted posts.

6. Remove Unnecessary Items from the Dashboard

Another thing you can do to make your site more user friendly for your clients is to hide items on the dashboard that they don’t need. For instance, your client isn’t likely to be interested in the dashboard widget devoted to the latest WordPress news, so it really doesn’t need to be there. Also, the quick post widget might just be confusing to your clients, especially if you’ve gone into some detail to train them to click on Posts > Add new.

You can accomplish this quickly by adding a small bit of code to functions.php (after you’ve created a child theme, of course). Here is the area of code you’re looking for in functions.php:

// Main column (left):
$wp_meta_boxes[‘dashboard’][‘normal’][‘high’][‘dashboard_browser_nag’]
$wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_right_now’]
$wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_activity’]
// Side Column (right):
$wp_meta_boxes[‘dashboard’][‘side’][‘core’][‘dashboard_quick_press’]
$wp_meta_boxes[‘dashboard’][‘side’][‘core’][‘dashboard_primary’]

Then you just need to use the remove_meta_box( ) function to eliminate those widgets or meta boxes that are crowding your client’s dash.

You might also wish to hide the theme and plugin editor to prevent clients from messing around with it. Typically, those with administrator level access can modify any aspect of the dashboard, including the code that makes up your plugins and themes. However, if you don’t need to make regular changes to the code, no one else does either! Hiding the editor from view is your best bet for preventing a client from tinkering with it on accident or from going on a “I can Google this and change it myself” adventure.

The code for this is simple, too.  Like, I’m talking one line simple! Just insert it intowp-config.php:

define( ‘DISALLOW_FILE_EDIT’, true );

7. Add Instructions to the Dashboard

If your client isn’t at all interested in purchasing a maintenance package from you, then you need to take advantage of the ability to add guidance throughout the dashboard wherever you can. The best way to do this is to add widgets with custom information. You’d use functions.php for this task as well.

For instance, you might want to add a widget in place of “Quick Draft” that lists out the basic instructions for using WordPress. Sure, your clients could find this information via help files but this way, the information will be branded and targeted just for them.

This instruction widget could include a list of the steps to take to write a post, to conduct site maintenance, and can even include accompanying external links to instructional screencasts, videos, or written out more in depth directions. Don’t be afraid to be creative here.

To add your own instruction widget, you can do so by inserting this code snippet into functions.php:

add_action( ‘wp_dashboard_setup’, ‘register_my_dashboard_widget’ );
function register_my_dashboard_widget() {
wp_add_dashboard_widget(
‘my_dashboard_widget’,
‘My Dashboard Widget’,
‘my_dashboard_widget_display’
);
}
function my_dashboard_widget_display() {
echo ‘Put your instructions here’;
}

Assuming you don’t want to make any stylistic changes to this widget, you’d just simply input whatever text you want where it reads “Put your instructions here.”

8. Use Advanced Custom Fields

Advanced Custom Fields takes the formatting guesswork out of the dashboard experience.
Advanced Custom Fields takes the formatting guesswork out of the dashboard experience.

Another way to further customize WordPress to make it more palatable to your clients is to use Advanced Custom Fields. This plugin allows you to add more visual editing options to the dashboard so your clients can have greater control over the content they create without having to venture into code. And as you’ve learned by now, the less a client needs to poke at code, the better!

This plugin allows you to create a wide variety of fields with different input types to accommodate any kind of content. With it, you can assign fields to different edit pages, use custom post types, customize with different input types like text area, image, file, page link, checkbox, radio buttons, and more. It also includes support for more obscure field types like taxonomy, user, Google Maps, tab, and gallery.

9. Offer an Instruction Manual

While adding widgets to the dashboard that feature instructions is a great way to guide your clients through the basic site order of operations, you might need to write out more detailed instructions to further clarify your points or to cover things that you simply can’t fit in the small space provided.

As a solution, you should consider writing an instruction manual. You can link to it from your dashboard and host it on a separate site or in a subdirectory on your main portfolio site. This step is a must if you won’t be providing a maintenance package to your clients (or if they refuse one). While you can’t guarantee your clients will actually read your support documentation, you will at least have the peace of mind in providing everything they need to maintain a site successfully.

A good instruction manual should be well-worn; that means it's referenced often.
A good instruction manual should be well-worn; that means it’s referenced often.

A good instruction manual should:

  • Be comprehensive. Hey, if you’re handing over the keys of a site to a client, you need to spell out everything for them. Go into detail about everything they need to know to operate the site at full capacity.
  • Keep it simple. Yes, you need to add details about everything under the sun related to WordPress but try to steer clear of jargon as best you can. And if something can be left out, do so. You don’t want to overwhelm your client with unnecessary info. And steer clear of acronyms. Unless you’re a web developer, you’re not going to care about learning what WYSIWYG or CMS means.
  • Include a schedule. While making site updates on a regular basis might be intuitive for you, it’s not going to be for your clients. Instead, you need to create a site maintenance schedule they can refer to and follow long after you’re out of the picture. In this schedule, break down every task that should be completed by the client, how frequently, and what steps are required to do it.
  • Include screenshots and images. There’s absolutely no reason why you should write out detailed descriptions of how to use the WordPress dashboard without including at least some screenshots to guide your clients along their way. Can you imagine their confusion as they pore over the sea of text you provided that doesn’t include any visual cues? Don’t do this to your clients!
  • Don’t make assumptions. Just because adding a new post is simple to you because you’ve done it a thousand times doesn’t mean it will be simple for your clients. You need to gauge your clients’ level of WordPress experience and custom-tailor the instructions you provide to fit. So if that means walking the client through every single little step required to write a new post, do it.
The weDocs theme makes it easy to create a support documentation website.
The weDocs theme makes it easy to create a support documentation website.

Once your instruction manual is complete, share it with your clients. You can do this by sending it along in an official email as a PDF or a Google Doc link. Or, you can build a small separate site for your documentation and share that. I recommend the weDocs theme for creating an easy-to-use and interactive manual. It’s built on Bootstrap and though it’s designed for plugin and theme support docs, it can work for an overall guide to WordPress sites as well.

10. Or Do a Screencast

Writing up documentation for your clients is great but there’s no guarantee they’ll actually read it and put it into practice. That can be dangerous for the wellbeing of the site you just built, my friends. Instead, you may opt to create a screencast. In addition to the support docs you provide, you can set up a session to walk your client through using the site you just built.

join.me is just one of many screencast services out there.
join.me is just one of many screencast services out there.

You have a lot of options for doing this. You can screen-share using Skype, for instance but you may wish to use an app dedicated to screencasts like join.me or freeconferencecall.com.

The benefit of doing a screencast is you get to be certain that your client at least heard everything related to managing his site. There’s no way to control whether or not a client uses that information, but a walk through like this at least guarantees the information was actually looked at.

Before starting your screencast, there are a few things you should keep in mind to make the process go a bit more smoothly:

  • Be prepared. It should be a no-brainer, but it’s imperative that you come to the screencast prepared. You don’t need to memorize anything but it’s vital you have the support documentation you’ve written and any relevant notes within arm’s reach. This will ensure the cast stays on message and on schedule.
  • Login and get setup early. If you’re using a screencast app or some such, you need to login and get setup at least 15 minutes early. This will allow you to troubleshoot any tech problems and have a minute to relax and mentally prepare.
  • Give your client time to follow along. There will be some amount of lag in a screencast. It’s just inevitable. So be aware of this when referencing certain things on the screen. Understand that your voice will be heard a few seconds before the action on screen registers. Pausing between each step of a set of instructions is a good way to ensure the audio and visual sync up.
  • Provide opportunities for questions. Your client might need a question or two answered during the screencast, but to avoid interruptions, announce that there will be designated times for questions throughout the cast. Encourage your clients to jot down notes so they don’t forget their queries.

You can always pre-record a screencast, too, but like written documentation, you do run the risk of the client never watching the video. It’s frustrating, I know, but there is really only so much you can do to ensure clients read, listen, and follow your dashboard-preserving instructions.

11. Only Use Reliable Themes and Plugins

This might go without stating but you need to only use reliable themes and plugins on the sites you build, lest you open them up to security breeches. This is even more important when you won’t be handling site maintenance yourself.

What constitutes a reliable theme or plugin? Well, those that have been accepted by the WordPress theme and plugin directories, are typically good. Likewise, plugins and themes made by well-known developers work well, too. But even then, you need to do your due diligence. Sometimes plugins with stellar reputations are found to have security holes, which means you need to stay on top of the news, too.

A good rule of thumb is if you need to question where the plugin or theme came from, don’t use it.

12. Use a Security Plugin

Either use one that covers everything with a broad brush or break down your security coverage into smaller bits. Regardless, the more people you have working on the backend of your site, the more vulnerable the site will be to attacks. You can prepare for the worst by setting up backups (covered next) and installing security plugins that limit login attempts, allow you to block specific IP addresses, and make modifications to core theme files to bolster the site’s defenses.

iThemes Security is a solid security plugin solution.
iThemes Security is a solid security plugin solution.

A few to consider include Sucuri Security and iThemes Security.

13. Setup Automatic Backups

Any site you build needs to be backed up. And it’s important you emphasize the importance of this to your clients as well. But you should never leave your clients fending for themselves in terms of searching for a solution. Instead, you need to provide a backup solution with the site as you hand it over to the client.

Automated backups are best. It takes out the guesswork and ensures the site will be saved even if the site is broken by a hacker, an automatic update, or even the client himself. Configuring backups is fairly simple and can typically be accomplished with a plugin, as you likely know already. You just need to make sure it offers backups and site restoration. A backup plugin that doesn’t allow you to restore a site is effectively useless.

Our backup plugin, Snapshot, includes site restoration.
The backup plugin, Snapshot, includes site restoration.

14. Consider Some Whitelabeling

A lot of the dashboard customization features we’ve talked about here already could be considered whitelabeling but what I want to talk about is adding custom branding to the dash.

Doing so doesn’t necessarily protect the site from client harm but it does keep the site identifiable as theirs. Those who aren’t familiar with WordPress at all might become confused by seeing its name and logo all over the dashboard. Some can even become a tad angry and think you’ve provided a generic site template or something. Stranger things have happened, people, so it’s best to make the dashboard looks as customized as possible to keep your clients happy.

Customize the login page with your client's colors and branding.
Customize the login page with your client’s colors and branding.

While there is a myriad of things you can do to customize the dashboard, one of the most important is to offer a custom login screen. Or you can seek out a plugin-based solution like Custom Login.

Wrapping Up

Client-proofing a site—more specifically the site’s dashboard—can feel tedious. After all, you know how to work all the bits and bobs on it, so why bother taking those extra steps? If you’re handling site maintenance for the client, you might not need to perform these added security and customization measures. But if you won’t be handling maintenance, your client will have access to everything, which means you need to take steps to protect your hard work.

Now that you’ve had a chance to review these tips, I hope you’ll find them helpful in creating a site you can be proud of, your client will love, and that they won’t be able to break.

 

Reference: wpmudev

Client-side MVC’s Serious Problem

Over the past year I conducted performance audits on a handful of sites that all used client-side MVC’s, typically Angular but not always. Each site had their own optimizations that needed to take place to improve performance. Yet a pattern emerged: client-side MVC’s were the major bottleneck for each. It slowed down the initial rendering of the page (particularly on mobile) and it limited our ability to optimize the critical path.

So I get a great deal of happiness from reading posts from people who are rallying against this all-to-common mistake.

Back in December, The Filament Group analyzed a bunch of client -side MVC frameworks to see their impact on the initial load time of a page. The results to render a simple To-Do app were disappointing:

  • Ember: 5s on a Nexus 5, 3G connection
  • Angular: 4s on a Nexus 5, 3G connection
  • Backbone: 1s on a Nexus 5, 3G connection

Only Backbone scores in a way that is at all acceptable, particularly in a world where people are trying to break the 1000 SpeedIndex barrier.

And just last month PPK wrote up his thoughts on client-side templating. The full post is well worth your time, but for those of you who would like to cut to the chase:

I think it is wasteful to have a framework parse the DOM and figure out which bits of default data to put where while it is also initialising itself and its data bindings.

and:

Populating an HTML page with default data is a server-side job because there is no reason to do it on the client, and every reason for not doing it on the client.

I’ve said it before: if your client-side MVC framework does not support server-side rendering, that is a bug. It cripples performance.

It also limits reach and reduces stability. When you rely on client-side templating you create a single point of failure, something so commonly accepted as a bad idea that we’ve all been taught to avoid them even in our day-to-day lives.

“Don’t put all your eggs in one basket.”

It’s pretty good advice in general, and it’s excellent advise when you’re wading through an environment as unpredictable as the web with it’s broad spectrum of browsers, user settings, devices and connectivity.

This might sound like I’m against these tools altogether. I’m not. I love the idea of a RESTful API serving up content that gets consumed by a JavaScript based templating system. I love the performance benefits that can be gained for subsequent page loads. It’s a smart stack of technology. But if that stack doesn’t also consist of a middle layer that generates the data—in full and on the server—for the first page load, then it’s incomplete.

This isn’t idealism. Not only have I seen this on the sites I’ve been involved with, but companies like Twitter, AirBnB, Wal-Mart and Trulia have all espoused the benefits of server-side rendering. In at least the case of the latter three, they’ve found that they don’t have to necessarily give up those JS-based templating systems that everyone loves. Instead, they’re able to take advantage of what Nicholas Zakas coined “the new web front-end” by introducing a layer of Node.js into their stack and sharing their templates between Node and the client.

This is where it gets interesting and where we can see the real benefits: when we stop with the stubborn insistence that everything has to be done entirely on the client-side and start to take advantage of the strengths of each of the layers of the web stack. Right now most of the progress in this area is coming from everyday developers who are addressing this issue for their own sites. Ember is aggressively pursuing this with FastBoot and making exciting progress. React.js emphasizes this as well. But most of the other popular tools haven’t made a ton of progress here.

I sincerely hope that this starts to change, sooner rather than later. Despite what is commonly stated, this isn’t a “web app” (whatever that is) vs “website” issue.

It’s a performance issue.

It’s a stability issue.

It’s a reach issue.

It’s a “building responsibly for the web” issue.