Building A Web Site Using Webvanta

August 06, 2009 09:00 AM by Greg Beddow Add your comments

Author Photo - Greg Beddow

Recently I had the pleasure to build a web site using a service that’s in public beta: Webvanta. (Full disclosure time: the company’s founders, Michael Slater and Chris Haupt, are former colleagues of mine, and I’ve done contract programming for them.) It's a great way to build content-rich web sites -- without programming, although you can if you really want.

 
OK, there are a few things I’d like to see improved in Webvanta; more on that later. But, for what I suspect are a sizable percentage of web designers out there, the service offers a streamlined way to get up and running quickly -- and has the backend infrastructure to grow with you as your site, and traffic, grow. Plus your clients can edit and reorganize information on the site themselves without any technical knowledge.
 
Webvanta takes care of all the web hosting, backups & other maintenance with no up-front fees, and the service is free while you develop your site. If you’re a professional web designer they throw in free support, and there’s plenty of documentation and video tutorials available to all. Once your site is live, monthly fees range from $29 to $99 ($19 for small non-profit sites). Community features include user commenting, RSS feeds, sharing with other sites, and a blog facility.
 
So what better way to explore a service that helps you build web sites than … to actually build a web site? (Hey, they don’t call me Obvious Man for nothing!)

Screen Shot 1

 
After signing up this is what my site looked like initially. It came pre-populated with a few pages and menu navigation between them -- all customizable of course. Note that control panel strip you see across the top is only visible when the admin (you) are logged into the site. It’s what gives you access to uploading files and otherwise modifying your site.
 
So now I was faced with a choice: I could customize the Webvanta CSS, or start over with my own. The first option is good if you’re building your site for the first time. The latter is the way to go if you have an existing site you’re converting, or if you have your own preferred layout. In my case I wanted to see how flexible Webvanta could be if I started from my own styling and, if needed, bring in portions from Webvanta.
 
Now, in no way do I consider myself a web designer. So my first step was to hunt down a layout for my site; in short order I had one I liked (from Metamorphosis Design), uploaded its CSS file, and copied its HTML into the home page of my site.
 
At this point I concentrated for a bit on Webvanta’s pages, templates and snippets. Webvanta pages represent the basic visual organization of your site:

Screen Shot 1

 
From the Pages control panel you can edit existing pages (several, as seen above, are already provided for you), add new pages, move them around in the menu hierarchy, and delete them. The lower portion of the screen reflects all the pages stored in the system, while the upper portion reflects the pages that appear in the menu hierarchy. The menu system tracks your changes, so if you move a page in the menu hierarchy, the menus on your site automatically reflect the new position. All pages are fully editable, so you can make them look any way you want. Some pages, like the result of a search on your site or the “page not found” page, are system-generated and don’t ordinarily belong in the menu hierarchy (and these too can be customized to look however you want).
 
Webvanta templates provide the overall visual structure of a page. For example you can have a template that defines a menu across the top of the page, a 2-column layout for the body, and a footer containing copyright and other info. In my case I decided to clone the built-in “Two-Column (narrow right col)” template into a new template called “My Two-Column (narrow right col)”, then modify it to reflect the (Metamorphosis) layout I’m using:

Screen Shot 3

 
They’re somewhat difficult to see in this image, but you’ll notice various tags in templates like this one (and many snippets) that start with “w:”. I won’t describe here how these WebvantaScript tags work (perhaps the subject of a future article) except to say they provide powerful, easy-to-use access to the Webvanta CMS. For simple sites like this one you can get by using the built-in WebvantaScript that you’ll find in the templates and snippets; for more complex sites you’ll definitely want to check out the documentation and tutorial videos.
 
Next it was time to start entering and styling some placeholder content. Each Webvanta page is associated with a (single) template, or can inherit whichever template its parent uses. In my case I wanted a consistent look throughout the site. So I set my home page to use the new template I just created, put some placeholder content in the page, and set all the other pages (including the system-generated ones, like search results) to inherit their templates from their parent. In short order I had every page on the site using a consistent (new) layout, and tweaks to that layout could now be done in one place rather than throughout the site:

Screen Shot 4

 
Finally, Webvanta snippets represent small chunks of data -- plain text, HTML or WebvantaScript -- that can appear in more than one place on your site. Once defined, you can reference the snippet from multiple places:

Screen Shot 5

 
A number of snippets come pre-configured that represent, for example, the HTML for the heading on each page. In my case I cloned 4 of the built-in snippets, “header”, “html_head”, “footer” and “kb_inline_search_form” into “my_header”, “my_html_head”, “my_footer” and “my_kb_inline_search_form”, then modified them to match my layout, and set the “My Two-Column (narrow right col)” template to use the new snippets.
 
At this point I had a fully functional web site, but I took the extra step to refine it further with integration into the Webvanta menu system (which of course the Metamorphosis layout knew nothing about), and integrate it into their page editing “body” and “right” tabs for easier page editing. Total time: about 2 days.
 
So where can Webvanta be improved? For starters, the admin user interface can be a bit clunky at times. (Webvanta’s CTO Chris Haupt says this is a high priority on their backlog.) Second, the blog system currently lacks a tagging feature (again, on their radar) and blog image handling is mildly awkward: you must first upload your image, then come back to your blog entry and reference the URL (more integrated support would be helpful). For tracking your site usage, there’s some built-in support for Google Analytics, and other analytics are supported so long as they only require JavaScript, not PHP or other server-side support. And finally there was one minor glitch I hit while building the site: I wasn’t able to change the login email address of my site admin -- although I was able to add a new user login with the desired email address (they’re working on a fix).
 
The site otherwise feels very solid. Performance was good to excellent, both in admin mode and general site usage, and tech support is very responsive. I give it a solid 4 out of 5 stars.
 
Have you built any sites using Webvanta? How does it compare to other systems you’ve used? Feedback on this article? Join the conversation!
 

Add Your Comment

(not published)

More Articles »