There are many factors which drive website costs. Some are obvious while some are more nuanced. In this post we will discuss design-driven impacts on website costs. Berkshire Direct is a WordPress website agency, so we will come at this discussion from the standpoint of WordPress website costs specifically.
Website Costs and WordPress Plugins
Installing certain WordPress plugins like Woocommerce, BuddyPress, etc. require additional templates which need to be styled. For example, a Woocommerce shop has additional page templates such as Product, Category, Cart, My Account and Checkout. More templates = more hours = higher website costs … that’s a pretty obvious correlation.
Website Costs and Responsive Design
Let’s face it … at this point if you’re building a website, a mobile friendly site is pretty much mandatory. That means responsive development is the norm. Google’s Announcement that mobile friendly sites would get priority in mobile search results pretty much made responsive development a fact of life. As a result, every website we quote at Berkshire Direct is quoted as fully responsive unless our client specifically tells us otherwise.
One factor that can potentially drive up website costs is when the design includes custom responsive views which are different from the framework defaults.1 Our typical process is to provide full width designs only and to assume that the website will use the framework defaults for the tablet and mobile views. When we build the site, our developer applies common sense, good judgment and the framework defaults to create the responsive views at the standard breakpoints. Now, if your project requires specific responsive views and you’re willing to pay the increased website costs, we are more than happy to design and build them. However, when budgets are tight, our clients save on both design and development costs by going with a full width design only and using the framework defaults for the development.
Websites Costs from the Top of the Page to the Bottom
We’ve written the rest of this article from a top down perspective. The order starts with the header and works towards the footer. Specific design choices which impact website costs are listed below. This is far from a comprehensive list, but it is a solid start.
Navigation
Three navigation design choices can lead to additional website costs:
- Use of a “sticky nav”. Check out a good example of a sticky element here: http://stickyjs.com/
- Use of “mega menu”. See a good example here: https://maxmegamenu.com/
- Designing a menu that requires more features and functions than the Bootstrap or Foundation default menus. This blog post describes that sort of menu.
Slideshows/Parallax
Building slideshows and/or parallax elements can either be inexpensive or costly. It really runs the whole gamut. If we are allowed to design something that fits nicely into what a specific slideshow plugin delivers, then overall website costs can be managed. If your vision leads us to design something which requires true custom development work, website costs can be quite substantial.
Custom Fields
The long form scrolling home page with multiple “rows” is pretty common these days. Users seem to interact well with it and the layout is easy to adapt to mobile devices. Both flat and material design elements work well with this type of layout as well.
Often you see a “row” on the home page which is broken up into 3 or 4 columns and each column contains an image, a blurb of text and a call to action button. Of course, each call to action has a link associated with it. We use the Advanced Custom Field plugin to set up these 3 or 4 “blocks” to create a custom page template which even a novice user can edit. Adding a “row” like that to the home page requires a unique template for that page. Let’s say your design has a row of 3 blocks on one page and a row of 4 blocks on another. That means you need 2 separate templates. More templates = more hours = more website costs.
Different Sidebar Widgets on Different Pages
If your vision for your design has multiple different sidebars depending upon which page they are on, that’s no problem. We use a plugin called Woosidebars which makes this technically pretty easy to do, but it still adds hours to the development cycle. The more sidebar variations you have, the higher the WordPress website costs will be.
Contact Forms
Most sites have at least a Contact Us form or an email marketing subscription form. Typical Contact Us forms have name, email address and a textarea field. If your business is B2B sales, maybe you need to add a company name field or a website URL. From what we’ve observed, email address is typically the only required field.
If your website design requirements cause us to include any forms which are more complex than that, then website costs will rise.
Social Media Feeds
Clients love to add their social media feeds to their websites and rightfully so. Publish once, publish everywhere has its benefits, especially for smaller organizations. We can show our clients plenty of plugins which make adding social media feeds to their website simple in terms of pulling in the content. Unfortunately, many of these plugins aren’t all as “developer friendly” about allowing us to style their layouts to make the look/feel fit your website. Finding plugins to match the desired functionality with your design may require trade offs to be made. That said, anything is possible – for the right price.
Photo Sizes
We try to design sites which use consistently proportioned images throughout the site. What do we mean by that? Think about a typical Our Team page on a website. There is a grid layout of headshots on the Our Team page and then each individual team members page has their individual headshot. We would design both the single view and the grid view so the pictures are the same proportions. We’re not saying that they have to be the same size. They just need to have the same ratio of height to width. By doing it that way, a single picture loaded as the Featured Image on the custom post works for both the grid layout and the individual team member page. By designing it so the pictures are different proportions, our developer will need to add a custom field and write additional code to use the second image on one of the two templates.
Animations
HTML5/CSS3 animations are all the rage these days. Give someone a new toy and you guessed it, they want to play with it. We’re not opposed to using animations in our designs. What we are opposed to is using animations for the sake of animations. It’s pretty simple: moving elements cost more than static elements. If you want your site jazzed up with items that move, flip, spin, etc., then those elements are going to require more development time. More time = higher website costs.
1 Berkshire Direct uses Bootstrap and Foundation frameworks.