Part 6: Coding Your Design

This is the web development portion of our website redesign guide. After you finish the design phase, you will need to work with a web developer to turn these designs into a website.

Sending Design Files to a Developer

First, you’re going to need to send your design files to a developer. A simple way to do this is to use a file sharing program, such as Dropbox, so you can easily pass the files back and forth. Generally speaking, design files can be placed in a large zip file that contain images and the main files (Photoshop, Illustrator, Indesign, etc).

Gather Logins The Developer Will Need

You also should gather and send to your developer all the logins they’ll need to access the files.

They may require login information for the following:

• Your domain registrar hosting (wherever yourwebsite.com is registered with)
• Your web hosting account (wherever your existing website files are hosted)
• Your database via your hosting account
• Your File Transfer Protocol (FTP). Also accessible from the hosting account
• Content management system (CMS), such as WordPress

Ask the developer for a list of login requirements they need, and securely share it with them. Call and read them the information instead of sharing it electronically.

The best method to share login information, if you can’t create a new user, is to reset your passwords and give the developer temporary access, then change the passwords when they’re done.

Create a Site Specifically for Development

During the development phase, your developer should create a development website; there’s no reason to edit your live site during the redesign. Everything, including the hosting and the domain name on the development website should be separated from the live site so there’s no interference.

Don’t Include Analytics on the Development Site

There are some things, however, that you do not need to include on the development website.

Your analytics tracking code, for example, should not be added to the development site. If you do add it, you’re going to collect false traffic data from the developer and anyone who tests the site.

Block the Development Site From Search Engines

You’re going to want to also block your development site from search engines. If you’re using something like WordPress, there is an option within the dashboard settings. But you also can use a robots.txt file to block crawlers from the site, which keeps search engines from indexing it.

There are several reasons why you don’t want your development site showing up on search engines.

First off, you don’t really want people finding it while they’re searching for your live website. Not only could it confuse them, but it could also give them a false impression of the quality of your website and your company when they find a website that looks incomplete.

You also don’t want search engines to think the development site includes duplicate content and links to your live site, which will look really spammy.

Creation of Page Templates

During development, your developer is going to create several web page templates using the designer’s layouts. These layouts should have been identified during the content structuring part of this project and designed during the design phase.

Here’s a quick overview of what page layouts your website may include:

• Blog page layout
• Blog post page layout
• Homepage layout
• About page layout
• Contact page layout

The developer will use those web page layouts to create templates that will be filled with your content. However, adding your content may or may not be included by the developer and paying them to do it can get costly.

Migrating Existing Content and Adding New Content

In order to reduce costs and stay within a budget, a lot of businesses will have internal team members add the content. This is when you’ll see the website come together and start looking like a real website.

In addition to migration of existing content, you’ll also need to add your new web pages to the site. And, since that content wasn’t on the old site already, it’s likely stored on a computer, Google Drive or some other file storage system. Adding your new content to the website should be as simple as copying and pasting text and uploading images.

The easiest way to do this is to have a main content tracker Google Sheet or spreadsheet of some sort that lists a minimum of the following for every page on the site:

• Page title
• Page URL
• Text Content Status (Added = Yes / No)
• Image Content Status (Added = Yes / No)
• Optimized for Search (Yes / No)
• Page Proofed (Yes / No)
• Published (Yes / No)
• Page complete (Yes / No)

As your team adds the content, tick off the boxes and compete each row. Once each row is completed, you’re almost ready to launch.

Common Development Issues

There are a lot of issues that arise during the development phase. Possibly more than any other phase of the website redesign process. It’s critical you plan ahead to avoid these problems.

Allowing the Developer to Adjust the Design

One of the issues people run into during the development phase of their website redesign is letting developers play with the design, which is where colors, fonts and font sizes get tweaked.

Although changing some of those components may not be a huge deal, allowing a developer to make changes to the designer’s page layouts can get really messy.

That’s because most developers view web development from a very technical perspective, which makes it hard for them to visualize things the same way a designer would. Ultimately, it’s best to lock down your designs first and then hand those off to a developer to create the final web pages.

Sending Working Files Through Email

Another issue businesses encounter is sending files back and forth by email. This quickly gets confusing, and it’s less efficient than using a cloud-based file sharing system. Plus, by storing everything online, you don’t have to worry about anyone accidentally deleting the most recent files.

Not Properly Blocking the Development Site

Sometimes, developers won’t properly block the development site, and they’ll remain accessible via search engines or include analytics, which causes data spikes and anomalies.

Not Finishing Design Before Moving On to Development

If you fail to create all the design templates during the design phase, your costs will be hugely inflated. You’ll have to pay the developer to design the new layouts in addition to turning them into web pages.

Creating Layouts and Pages for Content That Doesn’t Exist

Sometimes, businesses will pay for design and development work for content, including text, images and videos, they haven’t even created. At this point in the process, you really need to have your content and wrapped up before a developer even gets involved.