Top Hidden Costs of Website Projects

7 Common (But Easily Overlooked) Website Costs

Over a couple of years of client projects, one thing I’ve learned is that there are a lot of costs for website that site owners often don’t know to anticipate or plan for. It is not fun being the bearer of unexpected news about additional costs, so I try to be pretty up front about these potential “extra” costs at the contract and invoicing stage of the project.

There are seven main costs that many clients may not know about (especially if it’s their first big web project):

1. Hosting (Especially Quality Hosting)

While most clients know that they’ll have to pay for hosting of some sort, many don’t realize that quality business-level hosting can be pricey. While inexpensive shared hosting may be okay for some sites, there are definite downsides to cut-rate hosting (everything from reliability to security issues to variable customer service quality).

Once you move beyond inexpensive shared hosting, the cost for hosting can vary wildly and tends to increase pretty rapidly in price. This can be a real surprise for clients, and is something worth discussing early in the process. It helps to be able to discuss the benefits of more premium hosting services.

Typical Cost: $3-6/ month for inexpensive shared hosting, $15/ month and up for premium hosting

2. Domain Registration

If you’ve been working with websites for awhile, it’s easy to forget that the concepts of domain registration versus hosting are not actually that obvious to the general internet user. It’s a good idea to check in early with clients to make sure they’ve got a domain registered, and you’ll also want to help them understand the cost for registration.

Some things clients may not know about domain registration include:

  • It’s a recurring (usually yearly) cost
  • Some (but not all) hosting providers include a year or more of free domain registration with a new plan
  • There are add-on services needed along with the domain for things like privacy or added security
  • The domain can be registered separately from the hosting, if desired

I’ve found that clients also appreciate tips on registering similar domains, such as the .org version of the primary domain or a common misspelling.

Typical Cost: starts at about $10/ year per domain registration alone (more for high-value domains and certain TLDs)

3. Email Accounts

Some hosting providers include email of some sort (forwarding accounts, or even email inboxes) with hosting plans, others do not. Since many people are used to free personal email accounts, it may not occur to them that business-class email often comes at a cost and that the cost may be per-email-address.

I typically recommend Google Apps for Work as a great business-class email option, and that service runs $5/ inbox/ month, or $50/ inbox/ year.

Typical Cost: $50 per inbox per year

4. Licenses

It’s not uncommon for clients to believe that any and all functionalities and design elements within a website are part of the overall project cost, but I tend to separate out license fees from my rates unless I already have an unlimited developer license for a particular purpose.

One of the reasons I do it this way is that I prefer to have licenses for each project in the client’s name. This is especially true for things with recurring costs like subscription font services, but is also true for one-off licenses that require a new license for each site.

Font Licenses

I’ve written at length on web fonts and licensing, but those are not topics that the average site owner is going to know a lot about.

Ideally, font licensing comes up in the design phase of a project but I like to cover myself by also bringing it up in my invoices and contracts. That way I don’t have to be the one telling the client late in the project that the fonts they’ve fallen in love with are going to cost them a lot of money.

Typical Cost: varies widely from free to hundreds of dollars per year depending on font(s) chosen, traffic levels, etc.

Software Licenses

Beyond font licensing, some jQuery plugins, WordPress plugins, and Shopify apps come at added cost. For example, MagicZoom is a very popular jQuery plugin for e-commerce product zoom functionality, and it has a per-site cost unless you’ve got a developer license you’re using for all your clients.

This is another place where it’s a good idea to talk early about special functionality requirements and for the designer and developer to be on the same page about functionality that is “free” (or built into a regular scope of work) versus functionality that may have associated extra licensing costs.

Typical Cost: varies – jQuery plugins tend to run $30-100 for a one-time license, premium WordPress plugins and Shopify apps often have yearly or monthly recurring costs

5. Security Provisions

Depending on the type of site and the setup, there may be added security needs.

SSL and Dedicated IPs

If you’re running any kind of secure content through your site, you’ll likely need an SSL certificate, which is an added yearly cost for most hosting accounts. SSL also requires a dedicated IP address, another added cost in some cases (especially on shared hosting).

Typical Cost: on one shared host, a dedicated IP address is just over $3 per month on top of a regular hosting plan; SSL certificates tend to run $20-50 per year up to $200+ for wildcard coverage

Monitoring Services

Even if you’re not storing or using sensitive information, it can be helpful to have security monitoring on your site. For WordPress, this typically looks like third-party services that keep an eye out for hacked sites or for necessary updates/ upgrades. Some clients may also want ongoing help with their site updates, which is a long-term cost that will need to be negotiated.

Typical Cost: leading provider Sucuri has an antivirus plan runs $89.99/ year for a single site

6. Backup/ Restore

This is another feature that depends on the site and hosting provider, but that sometimes incurs extra costs. Regular automated backups and a one-click restore are one of the reasons I really like WP Engine hosting [affiliate link], but other hosting providers may not include those things standard, or may only allow access to parts of the backups.

Sometimes you can add better backup systems through a hosting provider for an additional cost, or there are third-party tools and services such as VaultPress and BackupBuddy.

Typical Cost: VaultPress runs $55/ year for their “Lite” backup/ restore plan

7. SPAM Filtering (WordPress)

For WordPress blogs, in particular, there’s typically a need for additional SPAM filtering. While there are some free options out there, I prefer using Akismet as it’s a tried-and-true provider that does a good job filtering out SPAM with few false positives. You can use it for free for a personal blog, but it does have a fee for commercial sites.

Typical Cost: Akismet is $5/ month


Total Cost

Looking at a “typical” WordPress business site that includes a blog a reasonable cost breakdown might be something like:

Shared Hosting:

Since it’s a lower price point, shared hosting is often a good place for a new business to start. The downsides are usually reliability and service/ support, and as traffic grows or as storage needs increase, shared hosting may become less of a viable option.

Service Yearly Cost
Domain Registration $10
Whois Privacy $3
Hosting $60
Email (provided by hosting) $0
Sucuri Monitoring $90
VaultPress Backup Bundle (includes Akismet) $99
Total: $262 (plus any one-time licensing fees)

Premium Hosting:

While clearly more expensive, premium hosting can be worth the price for ease of use, uptime and site speed, and quality of customer service. Premium hosting providers also often optimize for things like traffic spikes and dedicated WordPress hosting providers have WordPress-specific features that can save site owners time.

Service Yearly Cost
Domain Registration $10
Whois Privacy $3
WP Engine (“Personal” Plan*) $348
Email $50
Akismet $60
Total: $471 (plus any one-time licensing fees)

* The personal plan is the lowest plan offered by WP Engine and is based on the number of visits per month, despite the name it can be used for business sites.


There you have it – an overview of some of the most common website project costs along with some very approximate numbers for rough budgeting purposes. I’m sure I’m missing something(s), so if you’ve got something that pops up a lot in your projects that I haven’t mentioned, post it in a comment.

Business & Web Development Summer Reading List

Summer Reading List
While the summertime means more time spent with my family, away from the computer, I’ve been trying to keep on top of my blog and article-ready. I just skim most things that cross my Twitter and RSS feeds, but the articles in my “to read” list are things that looked good enough at first glance that I want to hold on to them for a deeper read or for future reference. Here they are, split by the topic:

New Technology

Web development is constantly evolving, so a lot of my reading is to keep up with the new stuff coming out across the languages and technologies I use.

Accessibility

I’m eager to learn more about accessibility and to incorporate more best practices into the sites I build so I’ve been saving references right and left.

Specific Techniques

These articles cover techniques I haven’t used yet but want to for various projects/ concepts/ ideas.

Business

And last, but not least, I am constantly ruminating on business topics. These articles cover things I’m thinking about or want to learn more about:


I also share articles of interest to me on the regular over on Twitter. If you’ve got suggestions/ tips on great things you’ve read lately (or have on your to-read list), put ‘em in the comments!

Tips for Project/ Flat Rate Invoicing

Tips for Project or Flat Rate Invoicing
I recently had a question come my way from a new freelancer about pricing client work. She’d already created a draft invoice for the work and was looking for feedback on whether she was pricing appropriately and thinking comprehensively about the work.

While I didn’t provide her with feedback on her specific pricing, I did send some quick thoughts on the way she was itemizing the tasks and describing the scope of the project and thought they’d be worth sharing here for others who might have similar questions.

She had her invoice itemized out something like this:

Service Time Cost
Domain & Hosting Setup; WordPress Install* A hrs at $X/hour $YYY
Theme Research & Installation, Minor Customization B hrs at $X/hour $YYY
Content Entry (5+ Pages, Multiple Image Galleries) C hrs at $X/hour $YYY
*Cost of domain registration, hosting, and WordPress theme not included

The Good Stuff

There are a lot of good things about the way this is set up already!

Itemized Services

I was happy to see this person listing out various components of the service they’re providing the client, breaking things out into groups of similar tasks. This really helps clients understand what they’re paying for and also makes sure everyone is on the same page regarding project scope.

Research Time Included

It’s also great that she included research into themes as part of the project scope, since in this particular project she was helping the client find a suitable pre-made WordPress theme to use. It takes time to match up client requirements to available themes and that time should be accounted for and clearly delineated in the invoice or estimate.

License and Recurring Costs Not Included

I was also very happy to see that she had specifically noted that recurring costs (hosting, domain registration) and the cost of the theme are not included in the quoted total. I feel pretty strongly about not including those types of costs in base invoices and instead having the client have ownership over their accounts and pay the actual cost of whatever licenses are needed so that they have those things in their name.

I also usually note in my invoices that web font license costs aren’t included, as that’s another semi-hidden cost that the client should be aware of from the outset and that I won’t cover myself.

Areas for Improvement

While the info this freelancer included was a great start, there are also some definite areas for improvement and further specificity.

In fact, my general rule with estimates and invoices is to be as specific as possible and also to note that things that aren’t listed aren’t included. This helps protect me against scope creep and also makes sure the client knows they should ask early on in the process if they’re looking for something specific that isn’t listed on the estimate.

In this example, I had three suggestions for things to improve on.

Avoid Relative Terms

The phrase “minor customization” raised a big flag for me, as it’s unclear what “minor” would include. A lot of the time, things a client may think are “minor” actually aren’t as straightforward as they may seem, so it’s best not to use relative or subjective terms and instead be really clear about what you’re going to customize and what the limits are. I might specify “customization of colors, fonts, and header graphics” or something like that.

Include Hard Limits

I was also concerned by content uploading including “10+ pages” and “multiple” image galleries. This is another place where you want to be really specific and provide caps rather than minimums or general terms (“up to X pages” and “up to X galleries with up to X images each). Otherwise you are going to end up hating life when you’re uploading image 125 of 160 on your 15th gallery page.

Overage Plan

While I don’t actually include this in my estimates and invoices (it’s in my contract instead), I also prompted this freelancer to consider what she would do if she went over the hours she listed or if the client needed more than outlined in the project scope.

I don’t include hour indications in my estimates unless it’s a line item specifically for hourly work, as the hours are irrelevant to the client when I’m really quoting on a project or output basis. If I go over my predicted hours getting to the agreed-upon scope, that’s on me and it doesn’t change the quote for the client.

On the flip side, if the client ends up wanting more than what we agreed upon, it’s good to be clear about how you handle that. For me, I say that I’m ok with adding to scope but the client has to know that that increases the cost of the project and may also impact the time frame.


Overall, this freelancer was starting from a good place with her invoices and just needed a few small changes to make things more clear and concrete for both parties, which ensures a much smoother process overall.

Six Ways to Make Your Developer Happy to Open Your Files

Six Ways to Make Your Files Developer-Friendly
Working with many different designers can be tricky in that the file structures and organization tends to vary from person to person. Fortunately, most of the designers I work with prioritize creating well-organized, highly usable files, which makes my job of taking those files and translating them into code much easier.

Even still, there are a few things that I see happen with designers that are less familiar with designing for the web that make a huge difference to the developer who takes over their files. Here are my top six suggestions for things you, as a designer, can prioritize in your files to make for very happy developer.

1. Organize Your Layers

It is impossible to overstate how important well organized layers and groups of layers are to both my workflow and my sanity. I need to be able to turn layers and groups of layers on and off to get at various components of the design (check out my video on slicing for more on how that works).

Also, if I’m trying to get at a piece of information in the file, it is next to impossible if I’m looking at a mess of layers that haven’t been named coherently and haven’t been grouped at all. Even worse if they’re flattened and I’m unable to get at a single component or get into the text to see the formatting!

I love the Photoshop Etiquette site’s tips on layers (really, everything over there is good advice).

2. Use Full Pixels

This one comes up more often with Illustrator than with Photoshop, but it’s important in both. The web is a pixel grid, so the design needs to respect that and use full pixels for all elements including font sizes. Half pixel values just don’t work, and if you use them your developer will be forced to adjust and round and otherwise tweak your design.

Along the same lines, people who are used to working in print sometimes have issues with scale and resolution. It’s important that your files be the correct actual size, again so that your developer isn’t forced to do the conversions and potentially face related issues with the design. When designing for the web, use 72 dpi and pay attention to the pixel dimensions.

3. Use Fonts with Web Licenses

Talk to the client early and often about licensing! It’s unfortunate for everyone involved if we have to have the first conversation about licensing when we’re ready to start development, particularly if the news isn’t good (e.g. particular font license is very expensive, or maybe not even available).

This has become less of an issue as web fonts have become more common, but I still see designers use fonts that aren’t available for web, or use fonts that are available but with a cost that the client doesn’t know about. There are great alternatives for many fonts if the client is budget-conscious and it’s better for everyone if you decide what the font plan is early on rather than trying to swap out fonts after the design is approved (it’ll never be quite the same).

For more on web fonts, check out my comprehensive Learn Web Fonts resource page.

4. Use a Grid – Any Grid

Along with using whole pixel values, it’s helpful if a design is based around a grid system (and if all elements are snapped to the grid, or at least mindfully placed to break the grid). I really don’t have a preference as to which grid system each designer uses, and in fact I think it may well need to vary from site to site based on the design plan for the project.

That said, using any grid system will ensure a more consistent, precisely aligned, and easy to measure and code site.

Tuts+ has a nice introduction to grid systems to get you started if they’re new to you.

5. Be Consistent

Again, these are very connected concepts – consistency is helped along quite a bit by using whole pixel values and grid systems, for example. However, consistency also goes beyond those things. When I think of consistency in web design, I think of things like having a plan for the typography across the site such that you can come up with a coherent style guide:

style guide sample

Ideally, your style guide should include all the various HTML text styling options, including:

  • regular body text
  • italics
  • bolded text
  • heading styles for heading levels 1-6
  • blockquotes
  • lists (although if you can avoid fancy contrasting numbers and bullets that makes things easier)
  • links and link hovers
  • buttons
  • form fields

Where possible, it’s nice to be consistent in your use of fonts, sizes, and styling across the site both because it makes the coding easier but also because it presents a consistent visual hierarchy to the viewer. If you want to break the pattern, do it intentionally and in such a way that you can point it out as a non-pattern to the developer.

Similarly, consistency in spacing between and around elements can be helpful (and again, grids are your friend for this).

6. Provide Static Comps

I’ve only recently started asking designers for static comps for each page and view of a site after having a couple of designers provide them and realizing that they are extremely helpful. By “static comp,” I mean a snapshot of the design that isn’t impacted by layer or group visibility, font application, and other things that can be altered accidentally in Photoshop.

There are two main methods I’ve seen for providing these comps, either of which work for me:

JPG Image Grabs

A couple of the designers I work with provide me with neatly organized and titled JPGs of each page layout along with additional images showing key hover states or interaction points. At first I wasn’t sure if this really provided additional benefit but I’ve found it to be really helpful for two things:

1. Ensuring We’re Seeing the Same Thing

I spend a lot of time turning layers on and off for slicing purposes and messing with type to get the specific styling information, which can throw off the way the file looks in Photoshop. The risks here are mitigated with well-organized files where unnecessary layers have been completely removed before the files are sent to me, but even still having a static, non-editable reference image is a nice way to cross-check and make sure the view I have is the same one the designer and client have approved for development.

2. Checking Our Work

Photoshop can be a cumbersome program to work with, so especially when we’re at the testing and wrap up phases of a project it can be much nicer to whip open a clean JPG and compare that with the live site. When we just need to check a font style or the placement of a sidebar widget, JPGs are the way to go.

Layer Comps

The layer comp Photoshop feature kind of sneaks up on you. It comes across as vaguely interesting at first, but once you’ve used it a few times you suddenly realize how insanely helpful and magical it really is.

The general idea is that you can create a variety of layer comps within a Photoshop file where each is a snapshot in time of your file, including the placement and visibility of various elements.

One designer that I work uses layer comps to demonstrate hover effects for various areas of the site, meaning she’ll have one layer comp showing the non-hovered page, one showing the header hovers, one showing the content hovers, and another showing the footer hovers.

Another use case for layer comps could be showing different states of a module, for example using different layer comps for the standard and sale displays of a product in an e-commerce site.

For a quick, basic tutorial on Layer Comps, check out this video on the Adobe site. However please don’t name your layer comps the way they demonstrate!


I’m sure there are many many features of great files that I’m missing, but these are the top things that come to mind when I think about what I really like to see in a design file.

Q&A: Subcontracting as a Way to Build Skills

Q&A: Subcontracting to Build Skills
A recent email asked about subcontracting as a way to gain more experience as a newer developer:

I’m not a designer, nor I am a developer at the height of my power yet, however I’ve made a lot of progress and I feel I can help more senior developers, while I learn more to tackle larger projects on my own. [I’ve been thinking] that maybe I could focus on assisting other designers and developers. What kind of help do you, as a lead developer, look for?

Huge caveat: I have only ever worked as a self-employed developer, so my context is pretty limited.

That said, I have a bunch of thoughts on subcontracting in general, and also why it’s probably going to be pretty hard to find subcontracting work that will really build skill in development when you don’t yet feel comfortable tackling full projects.

Subcontractors vs. Employees

One big issue around the legal concept of subcontracting (at least here in the U.S.) has to do with the types of tasks and oversight the individual is taking on. I insist on a really high level of control – while I don’t want to micromanage every step, I do want to be able to give pretty strong guidance on how things should be done. For me, this works out to needing to do most of the work delegation via an employee relationship.

I also find that it’s hard to break out smaller parts of my projects such that someone else can work on them unless that person is already familiar with my processes, systems, theme structures, etc., which typically is just not realistic for subcontractors.

Commonly Delegated Tasks

That said, here are a few things that I often delegate and/or would consider subcontracting to a good external developer:

Browser Testing

This is a big one, I really don’t like clicking through a site I’ve built a million times in various devices and browsers. I’ve found that testing usually goes better for me when someone else does thorough tests of ready-to-launch sites and then sends me a “fix list” with screenshots. Usually one of my associate developers does this.

Site Installation & Setup

With WordPress, there’s often some initial installation and setup, including everything from installing WordPress itself to creating pages, setting up menus, and putting widgets in place. With Shopify, there’s no installation but there’s a lot of product and page creation, even when just working with dummy content. Later in Shopify projects, there’s also some manual setup with shipping rates, email templates, and similar admin settings.

All of these admin tasks are fairly easy to delegate, although the timing can be tricky as it requires pre-planning to schedule this work at the right time in an overall project schedule.

Changes to Existing Sites

I don’t take on any projects making modifications to third party themes. The only changes/ “tweaks” projects I work on are updates or modifications to themes I created. When these types of requests come in they’re often things I consider delegating, particularly if they don’t require a ton of context and/or are fairly straightforward.

Content Work

Another common subset of requests I get revolve around content updates or supporting clients in working with their client. Some clients prefer to have someone else handle content updates and edits, no matter how nicely we’ve set up the admin of their site, and others would prefer to outsource image editing and optimization tasks. This is an area where I absolutely delegate the work to employees and subcontractors.

Issues to Consider

Unfortunately, the above set of tasks probably don’t strike you as the most exciting things in the world. I just haven’t found any good structures for breaking up the more development-centric parts of projects, although it’s something I always have in the back of my mind so maybe that’ll change.

Beyond the types of projects that can be subcontracted, there are a couple other barriers worth mentioning:

Cost

A big factor for subcontracting is cost. I obviously need to make a profit, so I can only subcontract work if I’m able to do it for less than it would cost for me to do it myself. That calculation has to take into account communication and paperwork with both the client and the subcontractor, project management (even with small tasks), etc.

Timing

As mentioned under cost, sometimes it just takes too long to handle finding and contracting someone else to do small tasks. It ends up being more effective to just knock them out in-house.

I also usually don’t have schedules planned out for individual projects such that I can give much advance notice for these types of tasks, which would make it hard to schedule with a third party.

The Good News

All the caveats and challenges above notwithstanding, I’ve found a few subcontractors lately who have managed to fit into my workflow swimmingly. For me, the most important factors for whether I’ll actually follow through with a subcontractor are very similar to the factors I look for when hiring employees, namely communication skills and attention to detail. With subcontractors I also make sure I am very confident that their quality of work will meet my needs without a lot of management, given that management is explicitly not part of a subcontractor relationship.

Bottom Line Advice

My best advice for people interested in building subcontractor relationships would be to think up front about what you can offer (skills, tasks, etc.) and then send a friendly, concise, well-written introductory email that includes the following:

  • What you’re specifically interested in helping with, large and small (especially small and/or “non-glamorous” tasks that you’d be willing to tackle to get in the door)
  • Your general availability/ turnaround time frames including how much notice you’d need
  • If you have a hard line on pricing, include that, otherwise leave it open to discussion
  • Links to examples of your work that you are especially proud of, or other specifics that show you can do the job well

I think it never hurts to reach out and ask!