About: Marissa Berger

Website
http://www.marissaberger.com
Profile
Hi. I'm Marissa Berger, owner of MB/I, Inc. I have been developing websites since 1996. I started as a webmaster, moved on to an advertising agency, and finally decided to go on my own in January of 2000. Since then, I have expanded our team and—together—we have developed many, many sites. I really enjoy working on websites. I can be creative when I work on design. I can also satisfy my need for order and details when it comes to coding. And I can use my passion about business when determine a site's long-term goals. This variety makes my job challenging, fun, and rewarding. The key to MB/I's success is that I have surrounded myself with people who share my passion for building websites—and for building them right the first time around.

Posts by Marissa Berger:

Designing a Gift

Jan 3, 2013 by Marissa Berger

One of the things I enjoy about the holiday season is that it gives me the chance to design for something other than a phone or computer monitor.  For the past three years I have used this as a chance to make custom soaps.

Each year I pick a different theme. This year it was butterflies.

hol-01

My first impulse was to add a bit of life to each insert.

hol-02

Unfortunately, these details were lost in my first test bars.  With my first direction closed off, I found another: brightly colored rabbles (yes, a group of butterflies is a rabble)!

hol-03

As you might imagine, soap making begins with the inserts.  But you can only really prepare one color of soap at a time.

hol-04

But after three or four pours you can gather several different colors of insert into a bar mould.

hol-05

Which you then fill with clear soap…

hol-06

Cut into bars…

hol-07

… And eventually give out as gifts!

hol-08

Why Is Discovery Needed?

Apr 20, 2012 by Marissa Berger

discovery-white-paperYou have identified the need to build a new website for your company. The site you have now no longer reflects your business offerings. Maybe your company re-branded and the site never got updated. Maybe the content is current but the competition is outdoing you in functionality. Maybe you got tired of not being able to update the site yourself and waiting for days and even weeks for your web developer to make the updates. Maybe it’s just simply time.

Whatever the reasons are, you have some key decisions to make:

  • Which web development firm will you hire?
  • What should the new website look and function like?
  • How much budget and time should you invest?

Most importantly… how do you ensure you hire the right firm and finish the project on time and on budget? How do you ensure you make the right decisions along the way throughout the development process? How do you ensure your website is more than an online brochure so it can help increase profits or decrease costs?

According to Gartner research, one third of development projects exceed budgets and schedules by almost 100 percent in many small and midsize businesses. How can you ensure this doesn’t happen to you?

We at mb/i have been developing websites for over 12 years and we constantly see the warning signs early in our sales process. At its core, the problem stems from clients wanting an estimate before knowing what the website should do. It’s like asking a general contractor for an estimate without giving him the architect’s blueprints. The only way this
can be done is inaccurately.

We lose projects by coming in higher than our competition only to learn the client ended up paying more than what we asked for in the first place—one change order at a time.

We lose projects by asking too many questions at the beginning only to learn the client had to backtrack the project several times due to lack of complete specifications, going over budget and missing the launch date.

We lose projects by worrying about future needs only to learn the client—even though happy at the first launch of the site—is now sadly aware that their site was not built on a solid foundation and is not scalable. New functionality needed can’t be easily added.

All of these issues are avoidable with the proper planning. But you need to realize and accept that the proper planning is indeed needed. The first step is not to get an estimate; the first step is to define the project. Without such definition the estimate can’t be accurate. Stay away from the developers who will give you a number without asking questions. If they don’t understand your business, how will they make recommendations that make sense for you? If they don’t understand your sales process, how will they put in place the right calls to actions on the site? If they don’t know where you plan to be in the future, how can they build a scalable solution?

Convinced you need to plan first? Great… so who does the planning? Another warning flag we see is clients wanting to do this planning by themselves and calling the web developer only to execute.

  • discovery-white-paperAre you on top of the latest web design trends and usability guidelines?
  • Do you know how to organize a site to maximize engagement and conversion?
  • Are you the best qualified to decide which technologies should be used?

Unless you’re in the business, the answer to these questions will be “no”. Know what you don’t know and involve the web developer from the beginning. A great part of what you’re paying for is their expertise in building effective websites. Put them to use. We were amused by an article in the Wall Street Journal that recommended business owners build their own websites. The first step was to choose a hosting account: Windows or Linux. Would you know how to answer that question?

The right web developers will have a proven process for planning your website. They will know the right questions to ask and in what order. They will know how to facilitate meetings and digest conflicting information from different stakeholders in your company. They will know how to lay out a plan that ensures the right results the first time around.

Download the mb/i white paper, “Discovery, Building Your Website Right the First Time,” which includes a step-by-step description of the mb/i discovery process.

Key Information to Include and Request from an RFP for a New Website

Nov 17, 2011 by Marissa Berger

When writing a Request for Proposal for a web development project, consider writing it with the end goal in mind: to find the most qualified vendor for your project who can work within your requirements. If you want a good response with accurate pricing and schedule, then you will need to put effort in providing the same level of detail and accuracy in your document.

An RFP can be organized into three main sections.

  1. Information about the company requesting the proposal
  2. Requirements the vendors responding to the proposal must meet
  3. Clear instructions about the process itself

Information about the company requesting the proposal
The goal of this section is to quickly inform the vendor of who the company is, what it does, and what it needs. Consider including:

  • Company description
  • Brief history
  • Key competitors
  • Current website situation
  • Reason(s) for developing a new website or re-designing an existing website
  • Primary goals (what would make the project a success?)
  • Secondary goals (what are other important but not critical goals?)
  • Functionality list as clear as possible. For each task, include the name of the task, a description, what its purpose is, and links to examples if any. Such a list can include the need for:
    • a content management system
    • file, image, and video management
    • search engine optimization
    • social media marketing
    • press release archiving
    • searchable staff directory
    • etc.
  • Any technical mandatories with their detailed specifications, such as:
    • site must be compatible with an internal CRM or inventory system
    • site must be hosted in-house
    • etc.
  • Budget range for project
  • Desired timeline

Requirements the vendors responding to the proposal must meet
This is your chance to gather all the information you need about the vendor in order to make an informed decision. Consider asking:

  • How many years have they been in business?
  • Who makes up the team? Is it in-house? Is it local?
  • Can they provide a diversified portfolio?
  • Do they have comparable experience?
  • What will their process be?
  • Can they provide current references?
  • Are they insured for general liability and errors and omissions?

This is also your chance to gather information specific to the scope of the project. Consider evaluating:

  • Is each item adequately described?
  • Have all functionality items been included?
  • Was the project cost itemized?
  • Was a timeline provided?
  • Did they define technical terms?

Clear instructions about the process itself
It’s important that the process is described so all deadlines are met. Consider including:

  • Who the decision makers are
  • What criteria will be used to choose the final vendor
  • All deadlines:
    • Deadline for questions about the RFP and how they should be submitted
    • Date when questions will be answered and where to find the answers
    • Deadline for proposal submission and how they should be submitted (online, printed, number of copies, etc.)
    • Date when vendors will be notified if they made it to the in-person interview step
    • Approximate dates for in-person interviews
    • Date when final vendor will be chosen and notified
    • Date when the contract will be finalized
    • Date when project is expected to start
    • Date when project is expected to be completed

The more specific the RFP is, the more specific the proposal will be. However, expect vendors to have questions, to include the assumptions they are making, and to provide costs in ranges since not all questions will be answered. Finally, the most important consideration is to make sure you compare apples to apples so you end up with indeed the best candidate.

Should Your Next Website Use Wireframes?

Nov 17, 2011 by Marissa Berger

Website development starts with intense conversations about what the site should look like and what it should do to meet the desired goals. Typically several people on the client’s end are tasked with describing what the company’s needs are from each of their perspectives and to ensure nothing critical is missed by the web developer. At the other side of the table, the web development team will ask many, many questions first to understand the company’s needs and then to make sure the site’s functions are clearly defined. After these conversations, a site specifications document is drawn. The web developer writes out what the site will contain in as much detail as possible.

For simple sites, the next step is to design the look and feel. For more complex sites, the next step is wireframing.

WHAT IS A WIREFRAME?
A wireframe is a visual representation of a web page without taking into account actual design elements. See the figure below.

wf01

Immediately you get a good idea of what the content of the page will be like and roughly where on the page it might be placed. You don’t know what colors will be used, or what the chosen images will evoke, or whether the buttons will have a 3D look or not. The purpose of the wireframe is to show what elements will go into the page, what their nature will be (link, image, pulldown menu, scroller, etc.), and the function they will eventually perform.

WHY USE WIREFRAMES?

  1. Decrease the gap between the written specifications and the actual design. Wireframes help create a common language between the non-technical and the technical participants in the project. It’s much easier to show the image above and point towards the bottom of it than to say or write: “the home page will include a scrollable area of random content blocks which can contain text, images, or video.”
  2. Protect the budget and the timeline. Wireframes reduce surprises. Miscommunication or mistakes are quickly spotted and rectified much earlier and much easier.
  3. Provide an inventory of elements and functions that go into the page. It’s easy to make a long list of everything wanted on the home page. It’s not as easy to lay out those elements in an organized way, making sure there is still enough white space on the page. Wireframes make it obvious whether the page is getting crowded or if it needs more content.
  4. Communicate the type and depth of content. Wireframes communicate very quickly if the intention is to have one large image or several smaller ones; 2 paragraphs instead of 6, 7 buttons instead of 5, and so forth. Many members of the team gain important information. Writers get an approximate word count, designers realize how many (or few) images they need to search for, and everyone realizes what content exists already and still needs to be developed. The image below quickly shows a video is needed.
    wf03
  5. Show click through without having to spend hours programming. See the 2 images side by side below. It’s much easier to show these than to say or write: “the user can interact with multiple filters to get narrowed down search results from the consultants directory with automatic pagination.”
    wf05a
    wf05b

WHEN TO USE WIREFRAMES?
We started by saying that more complex sites benefit by the use of wireframes. What do we mean? What turns a site from “simple” to “complex”?

  1. When there are processes involved. If users need to click through a few steps to get the data they need, a wireframe makes sense. Before programmers spend time making things functional, the client can experience the process and determine if it’s intuitive enough.
  2. When there are multiple ways of getting to the same content. In large websites, content is sometimes offered in different ways since users have different ways of looking for it. Wireframes show these different displays before too much time and money are invested.
  3. When different audiences get different content. Wireframes will help the client put himself in the shoes of each audience type and see how the site will be experienced.
  4. When home pages are really more like dashboards, such as in the case of intranets or password-protected member areas. Wireframes help organize the content into logical placements. See the image below as an example.
    wf04

HOW ARE WIREFRAMES CREATED?
Wireframes are not created from scratch… or they would take too much time. There are software programs, many of them online, than provide drag-and-drop ways to quickly create these sketches. Standard web elements are included. Want to show a search area, just drag the search widget into the canvas. Want to show a video player, just drag the video widget into the canvas. Almost everything you need is available, and, when it’s not, you can import your own graphic. At mb/i, we use iplotz.

In summary, a wireframe is a preview that can save a significant amount of both time and money during the development process. It’s a communication tool that ensures both the client and the web developer are truly on the same page.

The Questions to Ask When Planning for an E-Commerce Site

Nov 2, 2011 by Marissa Berger

istock_000017303192xsmallThere are many details to think about when developing an e-commerce site. We have developed the list of questions below which help us discover what “size” e-commerce site we will be building. An important part of our job is to guide a client through these to determine what is really needed to meet goals, budget, and timeline.

Hope you find these helpful.

PRODUCT-RELATED
1. How many products will there be at launch?
2. How many product will there be 3-6 months post launch?
3. How are these products organized? How many product categories?
4. Do products have options, sizes, colors, etc?
5. Are they physical products or downloadable files?
6. Are products perishable?
7. Does inventory on hand need to be tracked?
8. Will the site accept back orders?
9. Is there an autoship/enroll program? (i.e. wine of the month clubs)
10. Do wholesalers get different prices?

SHIPPING AND HANDLING
9. How is shipping to be calculated? Flat rate? Based on weight?
10. Will we be using either the FedEx API or the UPS API?
11. Are we shipping to all states?
12. Are we doing international shipping?
13. Do we need to handle multiple foreign currencies?
14. Will we need to add a handling fee on top of the shipping fee? What is the calculation?
15. Will the site need to print shipping labels?
16. Which states need a tax calculation?
17. Are we using the same tax rate across each taxable state?
18. Do we need to provide a tracking number to the user?

DATA INTEGRATION
19. Will the client be using a fulfillment house? If so, how is the order data needed?
20. Do we need to send data on the spot or as a daily batch?
21. Do we need to integrate into an existing accounting system? (i.e. Quickbooks)
22. Are we setting up user accounts so users can track their orders and order history?
23. What kind of sales reports are needed?

PROMOTIONAL/MARKETING
24. Do we want to offer promotional/discount codes?
25. Which types of codes? Percentage discount, buy one get one free, free shipping?
26. Are we integrating any affiliates? (i.e. Commission Junction)
27. Do we need to integrate with Google Shopping and/or Amazon?

SETUP-RELATED
28. Is the client selling only online or is there a brick and mortar store(s)?
29. Is a merchant account already setup?
30. Has a security certificate already been purchased?
31. What level of security do we need to have?
32. Has a payment gateway already been selected?

8 Steps to Plan an Effective E-commerce Website

Oct 4, 2011 by Marissa Berger

06E-commerce websites seem straightforward, and some of them are. However, we tend to end up building the complicated ones! They are only complicated because there are many, many details to consider and test… both on our end and the client’s end. It’s best to do all of the planning at the beginning to avoid changing specifications as the site is being built. Here are a few key items to consider.

1. Focus on the Objective

  • Selling your product

Every design decision on an e-commerce site should be made with this goal in mind. However, there are a number of relevant secondary objectives you can also integrate into your plan without detracting from the main goal.

  • Growing your email list
  • Encouraging social media sharing
  • Gathering testimonials & product reviews
  • Offering post-sale support
  • Increasing customer loyalty

2. Navigate for the Customers
E-commerce is about the products you sell. Your primary navigation should therefore reflect how your shoppers browse and categorize those products. Links to other website mainstays, like “about” and “contact” pages should assume a secondary role.

In addition, every page should be designed to facilitate movement towards your checkout. “Add to cart” links should always appear above the fold, even if that means information justifying the purchase must come lower down the page.

(You only need to sell someone once, but you want them to buy again and again).

3. Use Appropriate Content
Pick content that shows your products off to best effect. Be consistent in which content types you offer. Here are some sample content types we have found to be valuable.

  • Professional photography
  • Before & after pictures
  • Customer reviews
  • Engaging product descriptions
  • Technical specifications
  • Product comparisons

4. Brand Your Site Properly
Your online & offline branding must reflect and enhance each other, but on an e-commerce site, a clean, product-centric layout is essential. All online branding must be done in a way that supports the products you sell.

5. Stay Current
Keep your content and your promotions up to date.

A product page is like a promise to a customer. If you do not have the item, make sure your visitors know right away (preferably on the page), and not after they’ve gone through the entire checkout process, or worse still a week later when you enclose an apology with your manifest.

A promotion left to languish becomes an invitation for online coupon swappers to get access to discounts that no longer serve your purposes.

6. Consider the details
There are many programming considerations on an e-commerce site. How the details are handled will make a great impact on both cost and timing. Here are some key one to consider:

  • Are you combining offline and online sales?
  • Do you need the site to manage inventory?
  • How will you ship the orders?
  • Will you use a fulfillment house? How and when do they need the data?
  • How accurate will you be about taxes?
  • What reports do you need for accounting?
  • What promotions and/or discounts will you be offering?
  • Does the data from the site need to integrate into an internal database?

7. Plan SEO with People in Mind
Humans should be your primary audience, but there are a number of ways in which you can be friendly towards people and search engines at the same time!

  • Use product names as page titles when descriptive
  • Consider product descriptions as meta-descriptions
  • Always include targeted search phrases when writing product descriptions
  • Create landing pages tailored to different kinds of users
  • Create unique landing pages for different campaigns and promotions
  • Give visitors an easy way to link back to your products

8. Test and Monitor Outcomes
Never assume your ecommerce site is doing the work for you. Pick the measure that are important to you and confirm that your site is delivering. Look for weaknesses and test them until you get better outcomes. Here are some of the key metrics to consider:

  • New visitor conversion rate
  • Return visitor conversion rate
  • Page views/visit
  • Items/order
  • Average order value
  • Landing page bounce rates
  • Landing page load times
  • Traffic sources
  • Orders per customer per year
  • Shopping cart/checkout abandonment rate

E-commerce can be simple or very tricky. Thorough planning is what will keep your site on track.

Using Your CMS-Based Website as a Sales Tool

Sep 1, 2011 by Marissa Berger

sellIt is widely understood that a content management system allows you to both edit the current content of your site and add new content using the provided templates. One advantage of a CMS that’s not that widely known is personalization. Instead of sending everyone to your homepage and hoping that they connect the dots properly, you can create custom “mini-sites” for each prospect, using hand-picked samples to show how you meet their particular needs.  Using a CMS in this way evolves your website from an informational brochure to a user-friendly sales tool.

Let’s explore the features of a CMS that let us do this.

A. Ability to create new pages on the fly.
If your CMS is properly set, you can add new pages on your own without having to know any code. You can either add these pages to your navigation or leave them off the menu. In this case, you would want to leave the new pages off the menu so they’re only seen by your intended audience: the prospect.

B. Ability to set a page’s URL.
Not only can you choose to leave new pages out of the navigation, you can also assign them custom URLs. For example, you can send your prospects links that include their name in the web-address as a way to show you’ve made something just for them:

http://www.yourdomain.com/JohnSmith
http://www.yourdomain.com/JSmith
http://www.yourdomain.com/John
http://www.yourdomain.com/John’sCompanyName

John Smith will be more likely to click on one of these URLs made just for him than one of the generic URLs your competitors send.

C. Use of a database.
Your online portfolio items can be entered into the CMS as database items instead of plain content. This means that your web developer can add a system for you to use where you select which portfolio items you want to display on these new pages you are creating.

… so, putting it all together…

  1. You create a new page
  2. You add a personalized message on top of the page
  3. You select which of the portfolio items you have on your site apply to your prospect
  4. You write a comment under each portfolio item so your prospect knows why you think this is a good example for him
  5. You give this page a personal URL
  6. You send the personal URL

You just created a custom presentation in 5-10 minutes without knowing any code.

Would your sales process benefit from this level of personalization?

Ten Calls to Action to Consider for your Website

Jun 27, 2011 by Marissa Berger

istock_000014140047xsmallUnless you have an e-commerce website where the action you want your visitors to take (buy now) happens within the site itself, you have to work a little harder on adding legitimate calls to action to your site without going over the top with “click here” buttons.

The idea is to guide the visitor to an action on each page of your website without being pushy. Most of us just want people to call. We know we can take it from there. But you need more than your phone number on the page for that visitor to be compelled to call you versus your competitor.

Here are some obvious, and not so obvious, calls to action you may want to consider for your site.

1. Give out your phone number. This may sound painfully obvious but many websites either don’t offer a phone number or hide it so well it might as well not be there. Even worse, sometimes the only way to contact a company is via a web form. For most visitors this web form is seen as a wall… your business comes off as not being accessible. How many times have you been on the other side of the table and wished you could just pick up the phone and talk to a human being?

2. Ability to schedule a call immediately. Go one step further than just giving your phone number. Give the visitor the ability to schedule a call with you online. There is a great service for this: http://www.schedulicity.com/ I saw this on Caterina Rando’s website and was immediately impressed that I could book a call directly with her without the hassle of going back and forth on the phone or via email to find a time that would work for both of us. On top of being able to manage when you want to make yourself available, you can list the different kinds of calls you are open to having and how long each type of call should take.

3. Downloadable introductory item. If you are selling a service/expertise, visitors may feel they need to know more about you before calling you. Have something of value they can download for free. This might be a PDF file with tips, techniques, advice, etc. You can choose to make this an immediate download or to send it via email. The second option means you have to ask for and capture the visitor’s email address.

4. Downloadable white paper. Take it up a notch from #3 and have visitors provide you with their name and email so they can download a great e-book full of value. Don’t shy away from writing an e-book. They don’t have to be long or full of graphics. A few pages of good content will do. You may also consider worksheets instead. The value is that you have already done the thinking for your visitor and have put together the questions and appropriate guidance they need to pursue the kind of service you offer.

5. Sign up form for on-going information. This is the one most of us do, but we jump to it too fast without offering #3 and #4 above. Put yourself on the visitor’s shoes. We’re asking him/her to commit to our content on an on-going basis without giving them a taste of what we have to offer. Provide #3 and #4 AND samples of what this on-going content looks like so visitors can make an educated decision. What can they sign up for: special offer emails, e-newsletters, calendar of events, biweekly tips, etc.

6. Free actions. Think of the “try before you buy” concept. Can you offer a real action for free so visitors get a taste of your service? Some options are: complimentary consultation, free estimate/quote, free evaluation, etc.

7. Media. Have you given webinars or teleclasses? If so, post recordings of them as calls to action. If you haven’t, make them! You don’t have to offer a class, get participants, give the class, record it, and then offer it on your site. If you don’t have the time or are not comfortable as a live speaker yet, consider speaking all of that and simply record yourself speaking on a topic. The recording could be audio only or, even better, video.

8. Speaking. Are you using speaking events to get business? You have 2 easy calls to action: a) provide a calendar plus the ability to sign up to be notified of upcoming events; b) provide information on your top speaking topics and an easy way to book you. If you’re not doing public speaking yet, I advise you to do it. It establishes credibility. You can start in your networking groups and work your way up from there.

9. Links to social media. Do more than just having the icons. Try to engage the user by posting feeds on your site and describing what value they get from each profile. Make it fun. This is were you have more leeway to show your personality.

10. RSS. If you offer on-going news, press releases, events, etc., asking visitors to subscribe to an RSS feed is also a legitimate call to action.

The general idea is to show expertise and accessibility via your calls to action. You should have a call to action on every page, each relevant to the content that’s on that page. Leverage your content so you can have as many of these on your site as it’s appropriate for your audience.

What calls to action are you using effectively?

Additional resources:

10 Techniques For An Effective ‘Call To Action’
Call to Action Buttons: Examples and Best Practices
Optimize Your Call to Action

5 Quick Ways to Track The Success of Your Website

Jun 23, 2011 by Marissa Berger

tracking

Unless you’re selling products online, it can be hard to track how your website is doing. If the goal of your website is to bring in business, how do you track if it’s doing the job? As a web developer I ask that question a lot and to my surprise most people say their website is not doing much. When I hear this, I dig in more and it turns our there are no tracking mechanisms in place! So before you jump to the conclusion that your site is not pulling its weight, make sure you have these quick tracking mechanisms set up on your website.

1. Unique Email Address. Set up a unique email address for your website. At mb/i we use solutions@marissaberger.com for our site, thegoldmine@marissaberger.com for our blog, and so on. This way we can easily identify the lead source when we get email inquiries. Don’t just use “info@” for everything you do online. Determine which sources are important for you to identify and give them unique email addresses. They can all forward to your main address for ease of use.

2. Unique Phone Number. Same as above. It is easier now to own multiple phone numbers (i.e. with Google Voice, Vonage, etc.). Same principle applies. Identify what’s important for you to track and put those numbers (and the appropriate voicemail messages) in place.

3. Unique URLs. If you have a Content Management System (CMS) on your site, you can create new pages and give them unique URLs. Then, when you do any kind of marketing, online or offline, you can use these unique URLs and later track their traffic. For example, we sent out a postcard that talked about our CMS services. That postcard had the unique URL of http://www.marissaberger.com/cms. In addition to direct phone calls from the postcard, we can also track the traffic to this unique landing page. This traffic would tell us if recipients actually went to our site after receiving the postcard… whether they called or not. Without this feature, the postcards could be going into a black hole.

4. Forms. If applicable for your audience, capture visitors’ information when giving out downloadable items or complimentary services. Give each form a different source name so you can track which items/services are more popular.

5. Google Analytics. Everyone wants metrics on their site, but the reality is that few site owners/managers look at them. Google Analytics is a great free service which gives you a lot of data on how your site is being used. You can make educated marketing decisions based on this data. If you want more information on how to interpret the reports, ask your web developer.

So, give your website a chance. Put tracking mechanisms in place and learn about your online audience.

What other quick and easy tracking mechanisms have you implemented?

Preparing Content for a CMS-Driven Website

Apr 26, 2011 by Marissa Berger

Nowadays most business websites have a Content Management System driving them so their owners can make edits without having to go back to the original web developer. They have become sort of the norm and most business owners request such functionality when purchasing a new site.

If you hire the right web developer, the process of building such a site will be smooth with your having to make some key decisions along the way. However, regardless of how great your web developer is, he will eventually require content from you.

In the past, with static websites, content could be provided in simple Word documents, or even in a mismatch of electronic formats. The developer copied it as a large chunk and pasted it on the corresponding web page.

With CMS-driven websites, preparing content is different and it has a process of its own. Before getting to this process, we need to go over how CMS-driven websites actually work. Whether you are using Drupal or WordPress, there is a crucial hierarchy that must be understood in order to think about and prepare the content for all pages of your site.

1. Themes

The theme of your website is the actual design. Even though different pages may look different in terms of content and layout, a consistent theme ties them all in with similar colors, navigation in the same place, similar design treatments, etc.

See below for MB/I’s theme. All 5 pages selected have different images, content, and even layout but you can tell they all belong to the same website. The theme is what creates this visual consistency.

01-cascade

2. Templates

Now we start breaking the theme apart. A theme consists of several templates. A template is a specific and unique layout regardless of the actual content it will display. Think of a template as a “container.” If you fill a glass with water or with orange juice, the content does not change its nature. A glass is still a glass. The same goes for templates.

Look at our own portfolio template below. This one template is used to display whichever sample work we want, but it always has design and element items in the same place.

02-algenist

A key decision you will have to make is how many templates you will need for your site. Since each template has to be designed and then programmed, the final cost of your site will increase for each additional template. Typically we build websites with anywhere from 2 to 7 templates.

3. Content Types

Here’s where a CMS-driven site really differs from a static site. Developers think of content in terms of content types. Let’s stay with the portfolio example above. Since the portfolio is not just a simple page of text, we created a unique content type for it. This content type is made of specific fields, each field corresponding to the information we want to display on the website.

Following our example, for our portfolio content type, we need to capture information for all of these fields:

1. Name of the client
2. Website URL
3. Industry it belongs to
4. Services we provided
5. Testimonial (if provided by client)
6. Credits (if we partnered with another vendor)
7. One or multiple screenshots of the work we did

4. Views

Now that we start seeing how content types work, we can take advantage of what a CMS-driven site is best for leveraging content. A view is simply a different way to display the same information.

You can see below that 3 different templates on our site display a thumbnail representing a portfolio item with its corresponding client name.

03-thumbnails

This information is coming from the portfolio content-type. It is simply being displayed in a different view. Same content; different display. The crucial thing to grasp is that you need to think of all the different views you want for each content type so the developer can create a complete list of fields.

In our example, we need to add a thumbnail to a list of fields. So, our content type now consists of:

1. Name of the client
2. Website URL
3. Industry it belongs to
4. Services we provided
5. Testimonial (if provided by client)
6. Credits (if we partnered with another vendor)
7. One or multiple screenshots of the work we did
8. Thumbnail image

You want to think about this at the beginning. It’s true you can add fields later, but that’s inefficient for both you and the developer. The developer has to backtrack and program new fields and views, and you may have to go back to several portfolio items and 1 by 1 add the thumbnail image.

Preparing Content

Now that we understand this hierarchy we can see that providing long Word documents doesn’t work very well. First, you might miss fields you need by following this approach. Second, it’s more time consuming for the developer to copy and past content this way. Third, the developer may make mistakes entering content since the fields are not specified and your content may not be consistent within a Word document.

The best way to provide content for content types is via Excel files. See below for the Excel file that would correspond to our portfolio example.

04-spreadsheet

At MB/I we provide these Excel template files to our clients. Even though it takes us a little more time up front, it helps us communicate better with our clients and it makes content entry much easier in the long run. Most CMS have the ability to quickly import data directly from an Excel file, so no one has to take too much time copying and pasting content one entry at a time.

Finally, when the CMS is delivered to you, you will see how it also fits exactly to the fields you’re already used to. See below for a glimpse at a portion the corresponding CMS back end page for our portfolio entries.

05-backend

If you’re purchasing a CMS-driven site, make sure you walk through these concepts with your developer. You want to understand how your site works and how you will need to prepare your content. It’s not just about writing the content any more, it’s about the organization and display of it.

Welcome to The Gold Mine

The Gold Mine is a blog developed by MB/I to assist site owners with the process of developing and maintaining a website. MB/I is a full-service web development company building websites since 2000.

Follow MB/I in: