More than Just Lines on a Map: Best Practices for U.S Bike Routes
How to Create a Website Blueprint
1. 1 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
HOW TO CREATE
A WEBSITE BLUEPRINT
IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE) BUILD
Share This eBook!
www.sol8.com
www.sol8.com
2. 2 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
How to create a website
blueprint in order to manage a
successful website (re)build
BY KASIM ASLAM
@kasimaslam
Kasim Aslam the Digital Ninja knows how to put “awesome sauce” on everything he touches.
The brains and technical knowledge behind Solutions 8, Kasim is proud to co-own the fastest
growing digital media company in Arizona. Even as a kid, Kasim knew he wanted to be an
entrepreneur and own his own business one day, having watched his father run multiple
businesses of his own. He grew up playing center and power forward in high school for the
basketball team and his goal in the next 5 years is to be retired, hopefully. Kasim loves his
chosen field because it is always an adventure, no day is the same, and because the
technological landscape is always changing. He can connect and proficiently explain even very
difficult, technical procedures to anyone and this makes him an amazing person to have on any
team. Kasim’s advice to other entrepreneurs is: "Spend less time worrying and more time doing
- a great plan is worthless without execution".
Kasim and his wife, who is currently Miss Arab USA 2012, love to travel and two of the places
they have enjoyed are Egypt and Honduras. When he isn’t working, which rarely happens,
Kasim enjoys writing and acting in local films. He and his wife met on the set of a GoDaddy
commercial and Kasim has also shared a screen with Sarah Chuck, David Della Rocco (Boondock
Saints) and Sayed Badreya (a popular Egyptian filmmaker and actor). Kasim is inspired mostly by
the strong men in his family and by his wife Suzanne. If Kasim was an animal he would be a
Chimpanzee. Digital Media and strategy planning is a wild jungle, but Kasim maneuvers and
swings through it all with ease.
Share This eBook!
www.sol8.com
3. 3 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Table of Contents
Introduction ............................................................................................ 4
Your Website: A Fifty Thousand Foot View ............................................. 6
Your Website: The Open Source Content Management System ........... 14
Your Website: Best Practices for a successful Build .............................. 19
Share This eBook!
www.sol8.com
4. 4 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Introduction
INTRODUCTION
Share This eBook!
www.sol8.com
5. 5 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
“Your website is the foundation of
your digital strategy”
Your website should be the epicenter of everything your
organization does online. Where your Digital presence is a
solar system your website is the Sun. When building a new
website (whether this is your first step in the digital world or
you’re a seasoned business rebuilding your site) it’s important
to heed the carpenter’s motto: “Measure twice, cut once.”
Having a well thought out “blue print” for your web
application will save you countless hours of time, innumerable amounts of money and a stress level that
could make a bomb defusing expert weep like a spice girl at a “where are they now?” convention.
If you have already found the right vendor to build your site (or are building it in-house) then providing
your team with a well-defined blue print will set them up for success.
If you’re still looking for the perfect development team, knowing exactly what you want will put you in a
position of being able to adequately vet potential vendors and ensure quite a few essentials including:
You and the development team are on the same page in terms of scope
Your specific needs are clearly outlined ensuring the development team has an opportunity to
speak to them directly
Every bid you receive is based upon the same criteria so that you are comparing “apples to
apples”
Your website blueprint will ensure that your needs are clearly outlined; continue to refer back to it
throughout the process in order to maintain the level of consistency required for the development of
such an important component of your business. When managing a web development process having a
blueprint is absolutely essential to your success.
Let us begin.
Share This eBook!
www.sol8.com
6. 6 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Your Website: A Fifty Thousand Foot View
YOUR WEBSITE
A FIFTY THOUSAND FOOT VIEW
Share This eBook!
www.sol8.com
7. 7 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
“General theory of an effective website and its uses”
If you would prefer to get down to brass tacks please skip to the next section:
“Your Website: The Open Source Content Management System.”
While there are many reasons to have a strong presence on a multitude of online properties, the only
digital tool that you have complete and total control over is your own website; your ability to engage
and convert users is exponentially more potent when they’re on your home court. Where online profiles
like Facebook, LinkedIn and Twitter (in order to protect the integrity of their community’s aggregate
experience) have very specific guidelines and functions, your website can and should be custom tailored
to engage your users on your terms allowing you to capitalize on your viewership and ensure the highest
possible conversion rate.
For this reason it's crucial to make sure that, regardless of how active you are online, ultimately all roads
lead back to your website. Secondary properties like those mentioned above are extremely important
but they are still secondary and should be run with the aim of driving all possible and relevant traffic
back to your website if and when appropriate.
To this end your website needs to accomplish the following overarching goals:
o Attract
o Engage
o Convert
o Nurture
Share This eBook!
www.sol8.com
8. 8 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
1. ATTRACT
I’m assuming you’ve heard the term SEO (search engine
optimization) - this is a process geared toward making your
website the most “relevant” result for a specific key phrase (or
phrases) in the eyes of major search engines (i.e. – the almighty
Google). We’ll dive more deeply into the intricacies of SEO in
later chapters. It’s important to touch upon here because
before we can begin this all important and exceptionally tedious process, you have to ensure
that your website is actually optimizable. This means your site must be well built with clean,
transparent code, quick to load and best practice compliant.
2. ENGAGE
You have seven seconds. Statistically a user will decide whether
or not to stay on your website within seven seconds. While this
is yet another great reason to optimize your site’s load speed
(something we discuss in greater detail in the on-site
optimization punch list) what it really means is you need to build
your website with immediate engagement in mind. Your website needs to clearly and succinctly
deliver your target message in a way that allows users to immediately qualify your web
application as pertinent to their search.
This means ensuring that your highest value information is delivered above the fold (meaning
they don’t have to scroll down to see it), is easily identifiable and displayed in ways that help
capture your user’s attention and illustrate your main points. Images, videos, bullet points and
infographics are extremely valuable tools to this end and should be built with the idea that they
must capture a user’s attention before earning the right to educate the user any further than
the initial seven seconds.
A mistake many digital marketers continue to make is focusing primarily (and often solely) on
the homepage of their site while leaving internal pages sparse and void of engagement.
Remember that the great and mighty Google has made it its mission to get its users to the end
Share This eBook!
www.sol8.com
9. 9 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
result as fast as possible meaning that, very often, they’ll be linked to an internal page or blog
post on your site and bypass the homepage entirely. Every page on your website (and especially
your blog) needs to be built with targeted engagement in mind.
3. CONVERT
User conversion is absolutely key to an effective digital
marketing strategy. Conversion and engagement go hand in
hand; if a user is engaged the logical next step is conversion.
Your website is not a static, informational brochure meant to
host information online for your users to browse at their leisure.
Your site should be built with the intention of converting users
into active and ongoing members of your own personal digital
community. But what does it mean to “convert” a user?
Conversion refers to any action taken by the user that assists in your ability to engage them
further.
Examples include:
Subscribing to your blog or RSS feed
Submitting their email in order to receive updates and newsletters
Commenting on your articles or engaging in further discussion on hosted forums
Filling out a conversion form
Emailing, calling or otherwise contacting your organization for additional
information
Liking, friending, +1ing, following any number of your social media properties
Bookmarking your site
Downloading / accessing internal sources of media and information
Share This eBook!
www.sol8.com
10. 10 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Converting users is the first step in “filling your funnel” and beginning the sales cycle required to
turn users into prospects and prospects into customers. There are three layers to your sales
funnel (top, middle and bottom) and all three should be serviced through consistent conversion
points throughout your website. An important thing to remember is that your conversion points
should be specific to the area of the website within which they are housed. If you have a
products/services page make sure to have conversion points geared toward further defining
your products or services. Conversely, your portfolio or client pages may house conversion
points such as case studies or testimonials better suited to the section’s topic.
TOP OF THE FUNNEL
A “top of the funnel” conversion point is typically a very
broad and (dare I say) general offering that helps convert
users who are in the beginning stages of their due
diligence process. More often than not these top of the
funnel offerings are geared toward education and
clarification. It can be something as simple as a high value
blog or article and as intricate as an eBook or whitepaper meant to explain one of your key
topics or core competencies. It's critical that any content you provide as a conversion point is
high value enough to your target user to trade their email address for. Please consider this your
new gold standard: “Is my [insert content type] valuable enough for a user to be willing to give
me their email address for?” If the answer is no, then you’re not giving enough - you have to
give to get in the realm of inbound marketing.
Some examples of good “top of the funnel” offerings:
eBooks and whitepapers that explain the products / services from an objective
standpoint and educate users on the values and uses of their employment
Explanatory / educational video highlighting key points about your industry and
product or service
An infographic explaining the way a product or service works and the value it
provides
Share This eBook!
www.sol8.com
11. 11 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Remember to stay far away from a sales pitch when creating content meant to convert. Try to
provide your users with information as though you were an independent and objective
consultant giving advice on the industry. This approach is the most effective at building trust and
establishing credibility as a thought leader.
MIDDLE OF THE FUNNEL
Where a top of the funnel offer is meant to incite interest
and/or educate a user, a “middle of the funnel” offering
is geared towards assisting users who have moved
further along the sales cycle in making specific decisions.
These offers are more focused and need to be geared
toward advancing the user toward the bottom of your sales funnel.
Some examples of good “middle of the funnel” offerings:
A budget calculator that allows the user to determine the costs associated with the
types of products/services you offer (these can be constructed in Microsoft excel
with simple algorithms for automated calculations)
eBooks / whitepapers meant to assist users in specific use and deployment of the
tools and technologies relevant to your industry (I would consider this eBook a
“middle of the funnel” offering)
Videos that detail the specific differences between certain levels of offerings and
which level is most appropriate for each user based upon their needs
Seminars or podcasts instructing users on specific components or facets of your
industry and how they pertain to a user based upon their needs
BOTTOM OF THE FUNNEL
Bottom of the funnel offerings almost always entail
direct interaction with a user on a one-on-one basis.
These users are presumably ready to buy and have been
well educated on your specific offering, the value they
Share This eBook!
www.sol8.com
12. 12 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
will receive in its use and your organization’s methodology and value-add compared to your
competitors.
Good “bottom of the funnel” offerings include:
Free, no-obligation consultations on the user’s existing infrastructure
Personal demos via online meetings meant to showcase your offerings and explain
their uses in regards to the user’s specific needs
Onsite visits geared toward ascertaining user specific needs with a full analysis of
their specific requirements and a proposal as to how your organization can fulfill
them
Bottom of the funnel offerings and conversion points are the highest value and most time
consuming offering you can provide. It’s important that you qualify your users prior to leading
them this far down the sales funnel in order to ensure that you’re not wasting their time or your
own.
4. NURTURE
While you’ve probably heard of nurture tracks (which will
be discussed in the “marketing automation” portion of
this eBook) this particular “nurture” section pertains
directly to your website and its ability to keep your users
continuously engaged and, within the scope and
feasibility of your industry, constantly coming back. In
order to function adequately as a nurture resource your
website needs to be organic and constantly changing and
updating. This doesn’t mean that you need to recreate your core content on a regular basis -
instead you should make sure that you’re updating your website with relevant news, new
products or services, case studies, testimonials, completed projects (including images and
videos), new hires or additions to your team and anything else that might be pertinent to your
organization.
Share This eBook!
www.sol8.com
13. 13 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Your website should be an ongoing reminder to your users that you’re always evolving,
innovating and growing as an organization and it should continue to give them a valid reason to
revisit your website. One of the most powerful nurture components your onsite digital
marketing strategy has available to offer is your blog. When users subscribe to your blog (or
your RSS feed) they give you the ability to continuously “drip” high value, highly relevant
information on them with the aim of keeping them continuously engaged and constantly aware
of your organization and its potential to meet their need.
In addition to your blog, image and video galleries are also extremely high value properties to
have and maintain as they give your users the opportunity to see exactly what you do and the
specific implementation behind your offering. It’s important that you’re diligent in the upkeep of
these properties since an out-of-date gallery can do as much harm as an up-to-date gallery can
do good. You don’t want to give users the impression that you’re not continuously working and
completing new projects.
Share This eBook!
www.sol8.com
14. 14 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Your Website: The Open Source Content Management System
Your Website
The Open Source Content
Management System
Share This eBook!
www.sol8.com
15. 15 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
“Building a website”
When building (or rebuilding) a website it’s absolutely essential to have the following two requirements:
Manageability
As a recovering developer, I find it acceptable to tell
you: website developers are costly, finicky creatures
generally devoid of social intelligence, power drunk off
of their seeming strangle hold on your digital future and
often times dangerously equipped with strong and
pungent odors. It’s important that you are in a position
of self-reliance as much as is humanly possible in order to avoid these highly volatile and
typically over caffeinated abnormalities of human existence. You want and need the ability for
you (or other, non-developer members of your organization) to manage your web application
on an ongoing basis without the need for regular developer interaction.
Scalability
Like your digital marketing strategy in general, your website is
never complete. It should always be growing and should be built
on a foundation that allows for additions and organic growth
without the need for costly custom build-outs of functionality
that should be readily available for integration. It’s quite likely that you’ve already experienced
the unbelievably frustrating event of having paid billions of dollars for a fabulously lavish,
custom website build only to find that, shortly after deployment, the new [insert widget of
choice here] you wanted to add resulted in a “proposal” for billions more or, much worse,
wasn’t even possible with your current infrastructure and required yet another build from the
ground up. If you’ve been here before, you never want to repeat this mistake. If you have had
the good fortune of avoiding this tragic yet all-too-common pitfall, allow me to assist in guiding
you in the direction of near absolute protection from what I call the “woes of custom
development.”
Share This eBook!
www.sol8.com
16. 16 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
THE OPEN SOURCE CONTENT MANAGEMENT SYSTEM (CMS)
A content management system (CMS) is a pre-existing application that your
website is built “on top of” and that allows you to manage the site without the
need of a full time developer or maintenance contract. A CMS equips you with
a web based admin panel that allows you the ability to login and manage the
site from anywhere you might find internet access and make updates to the
entire site infrastructure. A well-equipped CMS should afford you the opportunity to:
Add/edit/delete your main and sub-navigation
Manage and update all onsite content including text, images and videos
Add new pages, articles and blogs as necessary
Manage “back end” components (like meta data which is addressed later in the SEO section)
Manage admin panel access for other members of your organization
Manage custom components of your application like backend databases and specific modules
A CMS is meant to empower your organization to utilize your website to the fullest extent of its abilities
with the absolute bare minimum interaction required from the clichéd vampiresque developer.
IMPORTANT: You’ll note that there is a second half to the title of this section. We’ve already covered
what a CMS is, but what about the whole “open source” thing? Well my friend, allow me to enlighten
you as to one of the dirtiest little secrets in the website development community.
“Website developers (like most professions) crave job security. For this, and
many other self-serving reasons, many developers operate from a proprietary
development model; proprietary meaning that they’re building your website
on a platform of their own creation1. This is of great danger to you for a
number of reasons.The first and foremost being that, should you choose to
discontinue your relationship with this hypothetical developer, you’ll soon find
1
There are circumstances where a proprietary model is completely unavoidable, specifically in highly customized solutions, but the
vast majority of businesses (and I mean 95%) will be well served by an open source platform.
Share This eBook!
www.sol8.com
17. 17 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
that procuring a replacement is of great difficulty and, in some cases, an impossibility.
No matter how well built their custom CMS may be, it is often extremely difficult for an outside
developer to decipher the inner workings of the custom code. Many times these developers build out
their proprietary platforms with the specific aim of keeping an outside developer in the dark. This
means, in short, that they basically own your digital presence and that you are beholden to them for
anything and everything you may need done to your website. ”
Even if you have absolute trust and faith in your developer - what happens if they
suddenly go out of business? Get hit by a bus? Or are unable to perform a task or
specific build that is key to your growth? If your site is on a proprietary platform
your digital presence is only as strong as the development firm.
Open Source Content Management Systems are applications available absolutely free to the developer
to use (for further research into the strange anomaly that is open source development check out Dan
Pink’s RSA Animate video on the surprising truth behind human motivation that can act as the
foundation for the vast majority (and I mean 99%) of websites. The beauty behind the open source
model is that it is, prepare yourself for the redundancy, open. Every developer on the planet has the
ability to view the source code, learn the model and work with and on your website. This means that
you have the entire global development community available to you as a potential workforce. Sound
pretty good? It gets better...
One of the most powerful benefits of using an open
source content management system is the community
that accompanies it. Picture hundreds (oftentimes
thousands) of independent developers who are
constantly creating modules, plugins, templates and
other forms of additional functionality available for use
with your CMS. This means that, when the times comes
for you to add that special new widget you just can’t
live without, your developer can pull an existing module
right off of the digital shelf, customize it to your needs
Share This eBook!
www.sol8.com
18. 18 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
and integrate it directly with your CMS. While this integration isn’t free it is exponentially less expensive
(and less time consuming) than having to build said widget from the ground up.
Already too good to be true? Allow me to blow your mind further. The digital world is in a constant state
of growth. Best practices, coding conventions and industry requirements are changing all the time. If
you’re on a proprietary platform, you’re at the mercy of your current developer’s ability to keep up with
this frantic rate of change in order to ensure that your CMS meets all of these standards. If you’re using
an open source system the global community that supports this system is constantly innovating in order
to make sure the application is kept up to date. Regular updates are common and easily to integrate and
ensuring best practice compliance becomes exponentially easier with an innumerable workforce slaving
away in the pursuit of maintaining the integrity of the application with which they all have a common
investment and interest.
Share This eBook!
www.sol8.com
19. 19 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Your Website: Best Practices for a successful Build
Your Website
Best Practices for a
Successful Build
Share This eBook!
www.sol8.com
20. 20 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
When building a custom website, we should borrow the age old
carpenter’s adage: “Measure twice, cut once.”
Here are the steps you should take in preparing the initial “scope of work” (SOW) for your website:
ESTABLISH YOUR CORE GOALS
Not to go all “Stephen Covey” on you but with every
website build we want to begin with the end in mind.
Without establishing a firm goal (or goals) for your
website you may find the final scope of work to be
disjointed and incongruent with the real needs of your
organization’s digital presence. Defining actionable
goals in the beginning gives you something to refer
back to and use as a standard when determining more specific components of your site like its
functionality.
You should refer back to these goals throughout the entire pre-development process in order to
ensure every step taken is aligned with your target end result. Without this process it is not
uncommon for an organization to look at their newly completed development and realize that it
does nothing (or very little) to actually facilitate their goals. Instead it is simply a collection of
things they assumed should be a part of their application.
These goals can be fluid. If we realize in the planning phase of the application that they are
incomplete, then we mustn't hesitate to make any necessary adjustments. However, I caution
you against adding a single piece of functionality that doesn't do something in the nature of
bringing you closer to at least one of your core goals.
What is the goal of your website? Ultimately, what do you want it to
accomplish? Be specific…
Share This eBook!
www.sol8.com
21. 21 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
DEFINE YOUR TARGET DEMOGRAPHIC
An equally important clarification to provide for yourself and
your developer is your target demographic. While your core
goals answer the proverbial “what?” in the scope of your
application the target demographic defines the “who?” This step
helps provide further definition to your functional specification
because it allows you to isolate your core users in terms of their
needs, concerns, interests and (potentially) behavioral patterns.
DETERMINE YOUR CORE FUNCTIONALITY
Here’s what you’ve been really itching to put down on paper this whole time. What is it that you
want your website to do? Use the goals you have established along with the newly clarified
knowledge of your target demographic to determine the functionality that should drive your
website.
Remember, stay away from adding functionality for its own sake. There’s an ongoing epidemic
in the world of web development that consists of people adding costly functional components
to their site because they think they need to. With each
piece of functionality make sure to confirm that it helps
further one of your primary goals. The flip side of this
coin is this: be creative! The sky is truly the limit and
almost anything is possible. Just because something has
never been done before doesn’t mean you can’t be the
first to do it. What processes currently take place in your
everyday business that could be digitized and hosted on your website? What utilities can you
arm your users with that will supplement their ongoing experience?
A brief aside on this note: the vast majority of our time spent on this topic deals with engaging
and converting new users. We tend to look at our website as a sales tool, and rightfully so!
However, it can be so much more than that. Two groups we often neglect in this process are our
existing Clients and our staff. What functionality might help you further service the needs of
Share This eBook!
www.sol8.com
22. 22 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
your current Clients? What functionality could you build or integrate into your website to assist
your employees in their daily tasks helping to make them more efficient or better equipped?
IDENTIFY YOUR CONSISTENT CALLS TO ACTION
Your consistent calls to action are slightly different than the
conversion points mentioned in the sections prior. While the
conversion points we discussed in the chapters prior are
usually topic specific and may only be housed on particular
areas of your site, the calls to action we refer to here are the
primary steps you want your customers to take when they
reach your website and should be highlighted throughout the entire application. What is it,
specifically, that you want your customers to do when they reach your website?
Remember, this can be counterintuitive if you don’t take time to consider your real needs.
When I walk through this process with potential Clients inevitably one of the first things I hear
them say is “I want them to pick up the phone and call our sales department!” While this may
be (and probably is) true for your organization there are instances where you might actually
prefer users don’t call. Fielding inbound user requests can be tedious and take up valuable
manpower. Are there instances where you would prefer that they educate themselves on
certain facets of your business before reaching out to you? Allowing users to “self-qualify” can
save time and resources, especially if your particular product or service is highly targeted.
Also make sure to keep your functionality in mind when you begin defining your consistent calls
to action. For example, if you have an online scheduler built into your site, I would imagine one
of your consistent calls to action should be to schedule an appointment. Remember, your
consistent calls to action are steps you make available for your user to take throughout the
entire website experience.
Share This eBook!
www.sol8.com
23. 23 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
BUILD YOUR APPLICATION SITEMAP
Your sitemap is a visual representation of the layout of your website.
You will use your sitemap to determine what content will be on your
site, how it will be organized within your primary navigation and sub-
navigation and where the functional components of your site will be
housed.
Creating a sitemap can be one of the more challenging steps in building your scope of work. For
assistance in creating a sitemap you can download our worksheet: “How to create an effective
and scalable sitemap for your new website.” You may also want to download our “Website
sitemap template” to base your sitemap on.
CREATE YOUR FUNCTIONAL WIREFRAME(S)
If you’ve been a part of a custom application development
before you may have experienced the following scenario: once
you have a preliminary scope of work in place your developer
starts creating mockups and sending them to you for approval.
(A mockup, by the way, is just an image that a graphic designer
prepares showing what your website could look like.) You pick
a mockup you like, maybe go back and forth a time or two
making a few tweaks and then voila! They start building your
website, fitting everything from your scope of work into your fun new mockup. Welcome to a
perfect recipe for disaster.
Despite the fact that this is how 90% of developers approach website builds, this process is
completely backwards. While creating mockups is without question one of the most exciting
phases of building a website, doing so without first establishing your wireframes is setting
yourself up for failure. When a graphic designer prepares a mockup typically the only goal they
have in mind is to be aesthetically pleasing; the format and layout of the site itself is completely
arbitrary and left to the determination of “what looks nice.” This method puts your functionality
Share This eBook!
www.sol8.com
24. 24 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
and navigability at the mercy of a design that was pulled together without any real thought as to
how the site was meant to work.
You need to approach your website build from the exact opposite direction by building out a
wireframe for each of the core components of your site. Think of a wireframe as a "stick figure
website" that defines the structure and placement of each primary component that makes up
your site. Remember all that obsessive talk earlier about the importance of your goals, calls to
action and functionality? Well this is where the digital rubber meets the cosmic road. Take the
determinations that you have made about the goals and functionality of your website, couple
that with development best practices (examined further in the wireframe worksheet referenced
at the end of this section) and any possible limitations (logical, developmental or procedural)
and decide how the application will best "fit" together.
To give you a specific example - if one of your primary goals is to “educate your users” and the
main functional component you have chosen to accomplish this task is a video gallery, it’s
important that the video gallery is front and center on your new site. Taking that a step further,
how should the videos be displayed? Is there a single video that you’ll be highlighting each
month, or do you want to have a filmstrip that users can click through in order to browse
multiple videos easily from the same location.
You can think about every single piece of functionality as an independent application. So our
wireframe helps us to decide how these applications will not only tie in with each other but also
facilitate each other so that we're able to reach a developmental synergy.
At the bare minimum you will need to create the following wireframes for your application:
- Main (the "home page" of the application)
- Child page (the "interior page" of the application)
- Special (Optional - this is the wireframe of any custom components of the application)
Share This eBook!
www.sol8.com
25. 25 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
APPLICATION WORKFLOW (OPTIONAL)
If you’re building a website that is highly
functional and has an advanced rules engine, it’s
important that you map out the workflow of
these functions prior to beginning the
development. This is especially true for
functions that have multiple layers of “if/then”
functionality. “If a user takes this action then
s/he will be taken to this next step.” The best way to accomplish this is by using your newly
created wireframes to map out the application workflow in a manner that acutely details each
of the available steps. I recommend using Microsoft Excel for this portion as it allows for
limitless horizontal and vertical extension.
This is helpful not only in defining the specific steps that an application will walk a user through,
but also in determining how effective the user experience is and flushing out any logical errors
you may encounter in the development process.
And there you have it! Once you have completed these steps you can compile each of these
components into a single document and use it as your RFP (request for proposal), scope of work
and functional specification in order to adequately drive and manage your soon to be successful
website development process. Good luck dear reader! Though I know not where this road may
take you, I send you forth into the treacherous realm that is custom development with the
knowledge that you are, thanks to my brilliance, as well equipped as is practically possible and
that, should you fail, you have no one but yourself to blame.
Share This eBook!
www.sol8.com
26. 26 HOW TO CREATE A WEBSITE BLUEPRINT IN ORDER TO MANAGE A SUCCESSFUL WEBSITE (RE)BUILD
Image Sources
http://www.clker.com/cliparts/e/v/A/R/K/t/transparent-magnifying-glass-hi.png
http://freshdigitalpresence.com/wp-
content/uploads/2011/07/bigstock_Social_media_on_Smartphone_21485075-300x272.jpg
http://hr.gmu.edu/images/footstep.gif
http://fixcourse.com/wp-content/uploads/2012/07/websitetraffic1.jpg
http://kcmgmarketing.com/wp-content/uploads/2011/11/attract-visitors.jpg
http://www.earnsmartlyonline.com/wp-content/uploads/2012/09/engage-feature1.png
http://www.famousbloggers.net/wp-content/uploads/2011/09/visitors-to-subscribers.jpg
http://global.tahono.com/images/funnel/funnel%206%20jpg.jpg
http://blog.hubspot.com/Portals/249/images/lead-nurturing1.png
http://cdn.skyje.com/wp-content/uploads/2011/11/cms.jpg
http://www.qlikview.com/~/media/Images/Products/deep_manageability.ashx
http://www.gensight.com/Project-Portfolio-Management/Images/Technology-Global-Scalability.jpg
http://www.westcoast.tas.gov.au/webdata/resources/images/Alert-Icon-.png
http://aasthatechnosys.com/images/content-management-system.jpg
http://library.hootsuite.com/Portals/125827/images/icon-whitepaper-generic.png
http://www.wire.wisc.edu/Libraries/Common_Header_Footer/iStock_000004996421XSmall_-
_Goals.sflb.ashx
http://blog.salonvoices.com/wp-content/uploads/2011/05/valpak-target-audience.jpg
http://fluxwade.files.wordpress.com/2011/03/istock_000007411540xsmall.jpg
http://www.dealsavant.com/wp-content/uploads/2011/06/call-to-action.jpg
http://emphaticsolutions.com/images/wireframe.jpg
http://en.q-bpm.org/mediawiki/images/5/50/Workflow-engine.png
Share This eBook!
www.sol8.com