How To Build An Effective Website... The Baker Street Way.

This isn’t a simple step.

There’s not a clear cut way to go about it. However, building an effective and unique web experience is without doubt the most important make-or-break step in digital marketing today. We can’t tell you THE way to do it, but we can tell you ours.

website being edited in webflow
Here's the backend of our own site using Webflow.

The Tools We Use

Here at Baker Street, we create our sites using a handy tool called Webflow. To call it a website builder is an understatement, though. Unlike drag-and-drop solutions like WordPress (to be elaborated on), Webflow gives full creative control to our team of designers and developers to make your site the best expression of your brand possible. Don’t think of it as a replacement for code, those skills are still very much needed. It’s more of an organizer for it that allows us to make and view changes to your site in real-time, something that’s no easy task when working within a standard code editor.


The Tool We Don’t Use

While we can be flexible when building or optimizing your site, one platform we make it a policy to avoid is WordPress. The primary reason behind this is security. An open-source and widely shared platform like WordPress faces a major risk of spreading issues in security infrastructure, as when one site is targeted and hacked into the same vulnerability likely exists across the spectrum making every site hosted through the platform a security risk until the issue is fixed (an issue amplified by the third party plug-in aspect of using WordPress). Outside of security issues, the reliance on third party plugins that WordPress pushes onto developers also leads to issues of compatibility. While plugins may all work separately, when combined unforeseen issues tend to come into play of which the developer has no authorization to fix. For these reasons, we insist that our clients allow us to build their websites outside of WordPress.


Site Maps Are Road Maps

Once we have the work order, we build a site map. This is a super-simple diagram that shows our designers what content is going to go where. We might even come up with a few variations for our whole department to look over and agree on which is the most intuitive stream of information. When a site map is finalized, we know what information goes on what pages, how many pages there will be, and where they all go. This guides us and helps us see how our progress is coming along.


Adobe XD prototype links
Here's a wireframe made for one of our current clients.

Framing the Plan

Wireframes come next. These are bare bone representations of how information will be laid out on each page. This also goes through a few iterations in house as the designer figures out in what order information makes the most sense to be displayed. Where do the menu items go? What order? What shape does this section need to be? And, most importantly, does it make sense to a customer? This process actually has two forms. The roughest of rough blueprint just works to show you how information will be displayed and what pages will go where. The design isn’t there yet, but the framework is. Once this gets approved, the real fun starts! We get to move into the interactive prototype. At this stage, we take that framework and fully flesh it out in Adobe XD to form a totally interactive and visually complete mockup of your site. While not a coded site, this step lets you see an idea of the final product before coding even begins!


Blueprints Ready? Get To Work!

So we have a Road Map and a Blueprint, but what comes next? The build. Remember that fancy interactive prototype we talked about? Now our team of talented web designers move into Webflow and work to make it into a full-fledged site! We start by getting the basic frame of the site, or the HTML content like sections, divs, etc., built out and ready to go before moving into the CSS styling. HTML may be the heart of the site, but CSS is the aesthetic. This is the longest step of the process as it’s where all of the front-end visuals of your site are brought to life. Now that the visuals are in place, it’s time to add the motion! Or more specifically, animations. Here’s where Webflow really shines: javascript is built in. Meaning we can create all of the custom animations we’d like using native code, custom code, or a mixture of both. This expands our possibilities greatly while essentially eliminating issues of compatibility.


Site Approved? Time to Make It Live!

Sounds simple, but hold on a minute. Now that your shiny new site is ready to go live, we get to work on hosting, SEO, lead generation, and all the fun stuff that makes your site a hub for online marketing. First thing’s first: we’ll buy your domain (or integrate one you already own), purchase a hosting plan, and set your site up to appear on the world wide web. That’s just the beginning, though. In many cases, people end up with their hosting, emails, and domain all existing through different services. After we have your site set up, we work to bring all of this together into one place and avoid the headache of bouncing back and forth.

Now that you’re centralized, it’s time to set up SEO, CMS, and finally analytics. SEO is the optimization of your site to fit all of the search engine standards, or what makes your site pop up in the Google searches of your potential customers. This is a crucial aspect to any site as regardless of how nice your pages are, it doesn’t matter when no one sees them. Following SEO, we’ll get a CMS platform set up. This is what lets you go in and edit copy, images, and whatever else you’d like that doesn’t impact the actual design of the site (we’ll have to do those changes).


Last but most certainly not least, we’ll add in analytics!

The site is the hub of your campaigns, and analytics are crucial to tracking how effective it is for building a solid database of leads. Every page of your site will be integrated with Google Tag Manager. In the days of old, Google used to require independent code on a per button and link basis making analytics a hotbed of overlapping actions. With the advent of Google Tag Manager, however, we’re able to integrate interaction tracking throughout your site into one single snippet that monitors site IDs to provide information. With Google tracking your traffic, interactions, and page usage trends, we finish up by integrating all of your forms with SharpSpring (our lead generation, monitoring, and organizing platform) in order to track, store, and categorize all of your potential contacts.

Now that all that’s out of the way, you have a shiny new website, hopefully consolidated under one domain and hosting account, and you’re set to go win customers left and right!

Author:
Megan Vail & Jamie Johnson
PUBLISHed:
June 14, 2019