Webvanta Blog

Get Your Designs Featured in an Upcoming Book

Fri, 10 Feb 2012 02:10:33 GMT

You may be familiar with Patrick McNeil's well-regarded books, The Web Designers Idea Book Volume 1 and Volume 2.

He's currently working on Volume 3, and he is looking for examples of sites to include.

To submit your site, visit thewebdesignersideabook.com/members. It only takes a few minutes.

Online Courses for Web Designers Launched

Thu, 02 Feb 2012 02:53:14 GMT

During the past few years, we've had the pleasure of helping hundreds of designers deliver great websites.

Along the way, we've seen first-hand how many designers struggle with the essentials of web technology.

In response, we've put together three online courses that give designers what we've found to be the essential background for building modern websites:

All of these courses are aimed at designers with some web experience, but who aren't entirely comfortable with the technical aspects of website design. Our goal is to help designers move from insecure to confident when it comes to HTML, CSS, jQuery, and mobile design.

Each class runs for four weeks, one hour per week, and costs $99. We'll conclude each session with an exercise to do before the next week, and we'll answer questions via email.

The classes start March 1, so sign up now to reserve your place.

Building a Sales and Marketing Resource Site

Sun, 22 Jan 2012 05:51:19 GMT

Foley Family Wines is a collection of 34 wine brands. As the company has grown, the sheer amount of marketing collateral became hard to manage, and getting the right materials to the right people had was very challenging.

Designing the Site

Working with designer Ginny Laughlin of Athena Design Group, Webvanta built a custom site that provides easy access to thousands of pieces of marketing collateral for the salespeople, distributors, and retailers of all these brands.

Mia and others at Foley had used other marketing asset management systems before, and they knew what features they wanted. Mia noted, "Webvanta was able to take all our input and create something that worked better than anything we'd used before."

The site is intended for the company's distribution and sales channel, not the general public, but much of it is open to public view at www.ffwsales.com.

Custom Browsing Interface

The site has custom navigation (see left side of screenshot above) that makes it easy to choose the brand, type of image, vintage, and varietal. The JavaScript code interacts with the back-end database to disable options for which there is no content, guiding users to productive choices.

Easy Content Uploading

Mia and the Foley team have uploaded almost 4,000 images and documents to the site. It's simple for them to tag each file so it will appear in the right places, without any coding or technical knowledge.

Because the Webvanta system allows the site builder to specify any taxonomies to be used as metadata associated with uploaded files, it required no back-end customization to present a highly customized file-upload dialog, including the metadata panel shown below.

Tagging Images and Documents

This tagging system allows each file to be categorized in multiple ways. The marketing staff simply uploads images, tags them as needed, and then each item automatically appears in the appropriate places on the site.

There's more to this site, such as a custom marketing and promotions calendar; see the Customer Story for more details.

Does your company need something like this? We can help.

Building Great Mobile Sites Quickly and Inexpensively

Sat, 21 Jan 2012 04:53:16 GMT

During the course of 2011, mobile-optimized sites have gone from being a rarity to becoming a standard part of what we do.

Initially, we used straightforward HTML5 and CSS3 for mobile sites. This approach is very flexible and readily supports full-custom visual designs.

Last fall, we began using jQuery Mobile, and we're now using it for most of our new sites. We'll be adding it to most of our SmartThemes in the near future.

jQuery Mobile takes a little getting used to, as it is a different way of building sites. But once you go through the short learning curve, it's incredibly productive. You can create mobile sites with app-like behavior in just a couple hours, simply by writing straightforward, semantic HTML5 markup and adding some special HTML attributes. The jQuery Mobile engine transforms your code, using those attributes as triggers, into a polished mobile presentation.

If the fact that this is a JavaScript framework scares you, think again! You can build a jQuery Mobile site without writing a single line of JavaScript code.

And if styling a mobile site is a concern, you can let go of that worry too — a basic jQuery Mobile site does not require any custom CSS code at all! The framework provides it all, and there's even a web-based ThemeRoller that lets you change the color palette and many other aspects of the visual presentation without writing any code.

We are grateful to the jQuery Mobile community for this outstanding framework, which makes our job so much easier and lets us deliver even more value to our clients.

To help spread the word, we're offering a free webinar on building mobile sites with jQuery Mobile. It's free, but you do need to register in advance.

Benefits of SaaS vs. Open-Source Content Management Systems

Sat, 29 Oct 2011 16:44:19 GMT

Open-source software has made an enormous impact on the web. From operating systems to database software, open-source software has been a driving force behind the growth of the web.

Despite all the benefits of open-source software, however, its advocates often underestimate its costs and fail to recognize the value of alternatives. For many applications, SaaS solutions—which typically are built upon an open-source foundation but include a substantial layer of proprietary software—better meet users' needs.

Open-source software is at its best when it is in the hands of a technologist who can follow its twists and turns, keep up with new versions, deal with compatibility issues, look at source code as documentation, and engage in technical discussions on forums when help is needed.

Benefits of SaaS

SaaS solutions shine when the user is focused on business or design goals, rather than technology. It is especially beneficial when the software needs to be used by multiple people, making it more compelling for it to be hosted in the cloud and delivered as a service.

The most dramatic success of SaaS is in the customer relationship management (CRM) field. Although open-source and commercial software is still used by some companies, Salesforce.com has transformed this market and made SaaS solutions the dominant approach.

Other areas where SaaS has had a big impact are in project management tools, such as Basecamp; document sharing, such as Google Docs; email marketing, such as MailChimp; and online stores, such as Shopify.

CMS Transition Lags

Ironically, one area in which adoption of SaaS solutions lags is in the construction and delivery of websites. Open-source software dominates content management systems, with WordPress, Drupal, and Joomla! powering the majority of sites today.

Often, designers and site owners (subject-matter experts) are the ones building sites. They are best served by solutions that allow them to focus on the value they want to add, and that minimize the amount of technical complexity and turmoil while providing all of the capabilities they need.

All too often, designers and site owners jump on the open-source bandwagon because it has become the expected path when building a website, even though other solutions may serve their needs better. In particular, SaaS (hosted) content management systems offer a number of compelling benefits.

Ease of Setup

There are still designers building static sites because they don't believe that a CMS is affordable for a small site. When using an open-source CMS, this is often the case. When you add in the overhead of setting up a CMS, customizing it for a particular site, and maintaining the software, the free open-source system can be quite expensive.

With a hosted CMS, a site can be created in a matter of minutes. There may be a monthly cost that is a little higher than for cheap hosting of an open-source CMS, but when you consider the time saved, it is often a less-expensive path. With the right hosted CMS at their fingertips, a designer can give every site owner the ability to maintain their own site. When site owners are empowered to edit their own content, their sites are kept more up-to-date, and are therefore more valuable for the site's owner and its visitors.

Integrated, Managed Solution

To create a site using an open-source CMS, typically the designer or developer must assemble a set of components that includes the core CMS and an assortment of plug-ins. While the diversity of plug-ins available is enticing, there is a dark side to this approach. Often, compatibility issues arise, especially when there is a new release of the core CMS. Plug-ins are sometimes not updated promptly, or ever, and often have no support.

There's also a variety of complex components beyond the CMS that are part of an effective site delivery solution: the underlying web server and operating system, caching system, load balancer, mailer, backup system, and monitoring software. Assembling and maintaining a quality set of components is a non-trivial task, and one that is beyond the interests and skills of many site builders. Low-cost hosting providers typically do a mediocre job, at best.

With a hosted CMS, the supplier provides a complete, integrated solution. They're responsible for delivering the entire hosting environment, and for keeping all the software updated with the latest versions and patches. They also provide a complete, integrated experience for the site builder; there's no more cobbling together pieces from a variety of sources and hoping they will all work together—and keep working when the core software is updated.

Security

Keeping sites from getting hacked is a big issue with open-source content management systems. There is nothing inherently insecure in open source software. However, consider that most open-source content management systems:

Are written in PHP
Mix code from the core, plug-ins, and the site's pages
Present a big target, and
Are typically hosted in low-end, shared hosting environments

This combination of factors creates a vulnerable situation in which lots of sites get hacked.

In a well-designed hosted CMS, security is much better. All back-end code is under the control of one company, and the servers are managed by experts who have control over the entire server environment. And should something untoward happen, it is the responsibility of the provider of the hosted CMS to make it right.

Support

The availability of responsive support is another differentiating factor for hosted systems. Open-source software typically has a huge community of users, so one can usually get answers to questions by posting to forums. However, the authors of the software often do not participate in these forums, and they aren't getting paid to answer questions. Furthermore, answers are frequently provided by people who are less than experts, and may or may not provide the best guidance.

A good provider of a hosted content management system will provide expert, responsive support that keeps site builders working efficiently and reduces frustrations and wrong turns.

Barriers to Adoption

Given all these benefits, why has adoption of hosted solutions been relatively slow in the CMS domain?

A big factor is the perception that open-source software, combined with low-cost hosting, is less expensive. This is true only if you don't assign any value to the time of the people building and maintaining the system. Open source is free, like a free puppy. The care and feeding is typically quite expensive, especially when things go wrong.

Another issue is the fact that most hosted content management systems, such as WordPress.com, LightCMS, and SquareSpace are limited in the complexity of what you can build. They don't support custom database structures, and they don't scale well to sites with large amounts of content.

This is changing, however, with the introduction of more sophisticated hosted CMS services, such as Webvanta. Systems such as these are fully capable of addressing the majority of applications to which open-source content management systems are put.

Cooked vs. Raw

In many cases, an open-source CMS is a great solution. But in others, a hosted CMS will enable designers and site owners to create better sites more quickly, at a lower cost, and with less grief.

Open-source software is relatively raw technology, and it is often best used by technologists. Designers and content creators are usually most effective if they have someone else managing the technology, building upon a foundation of open-source software but with a supported, managed layer on top of it.

Multi-Site Feature Empowers Separate Yet Unified Sites for Payless Shoes

Tue, 25 Oct 2011 15:33:53 GMT

A couple weeks ago, I wrote about Webvanta's new mini-site capability, which allows a single master site to be viewed from the web as any number of mini-sites, each with its own URL. Each mini-site can have unique content, or it can share content with the other sites. And all mini-sites can share templates and databases, making it easy to ensure design consistency and leverage information across multiple sites.

We recently launched the first large-scale use of this technology for Payless Shoe Source, providing 16 mini-sites covering 11 countries in Latin America. Each of the sites is customized for the particular country but draws from a shared database of images, store locations, designer information, and standard pages such as the privacy policy.

For example, see Payless Ecuador, Payless Jamaica, and Payless Guatemala.

We're seeing interest in this approach from shopping centers that want a site for each store, office buildings that want a site for each tenant, collaborative artist studios that want a site for each artist, and restaurant franchisors that want a site for each franchisee. The multi-site feature provides an easy-to-manage and cost-effective way to provide lots of related sites, with unified control but distinct identities.

Deal-of-the-Day Site Leverages Webvanta Platform to Slash Startup Cost

Thu, 20 Oct 2011 15:46:37 GMT

In the beginning, the Webvanta platform was focused entirely on content-rich, database-driven websites. It remains, we believe, the best SaaS platform available for such sites.

In addition to its unmatched database capabilities, the Webvanta system is unique among hosted CMS offerings in our ability to provide back-end customizations that enable the system to approach the flexibility of a custom web application.

We recently worked with designer and project manager Tyler Wantulok to build a deal-of-the-day site, EponME, initially serving the Bozeman, Montana area. The project was backed by investors Zachary Bernheim, Mark Delorme, and Eathan Golf.

The EponME site is built on the same multi-tenant platform as other Webvanta sites, using our membership and database features to manage users and deals.

In addition, we built custom back-end logic to handle closing out of deals at the end of the day. We set up a custom integration with Foxycart, including single sign-on, for the ecommerce aspects, and we built an API interface to MailChimp, automatically synchronizing the email database with Webvanta's user database.

By leveraging three existing hosted systems—Webvanta, Foxycart, and MailChimp—Tyler was able to deliver his clients a very effective, custom deal-of-the-day site for a fraction of what a custom web app would have cost.

At the conclusion of the project, Tyler wrote (unsolicited):

“I want to thank you and your team for all they did on this project. We definitely had some speed bumps in first couple of days of the launch but you were truly the best help a designer/project manager could ask for. This was a pretty big leap of faith to go with a company that I didn't know a ton about and do a project of this caliber. I was very pleased with the way it went and really enjoyed the process of solving the problems from a design and code standpoint for EponME.”

To which I can only say, “Thanks!”. This is what we strive for.

Thai Taste Goes Online with Webvanta

Thu, 13 Oct 2011 05:11:48 GMT

Santa Rosa's Thai Taste restaurant recently launched a new website, built on the Webvanta Restaurant System. With a desktop site, mobile site, online ordering, and Facebook integration, the system is already bringing new business to the restaurant.

We've developed a system that enables any restaurant to stand out on the web, bringing in new customers, increasing return visits from past customers, and generating new business with online ordering and gift certificates. The sites are easy for restaurant staff to update themselves, so they can keep their menus and events up-to-date without depending on anyone else to make changes.

Restaurant websites are infamous for being ineffective, either because they were built by the chef's cousin and haven't been updated since he graduated from high school, or because the site tries to deliver an "experience" and fails to provide what web searchers are looking for: photos, menus, hours, and directions.

Some restaurants have effectively given up on their websites and are focusing entirely on Facebook. While having a great Facebook presence is important, it's a mistake to depend on Facebook for your entire web presence. We give restaurants a web presence that is under their control, that integrates with their Facebook page, and that gives them better search-engine results.

We're delivering sites using template-based designs at very low cost with the full capabilities of the most elaborate sites. We can also work with designers for those restaurants who want a full-custom design, "skinning" the system to look however they want.

Restaurant owners need to deal not only with the desktop and mobile web, but also with local search optimization, Facebook integration, Yelp profiles, online reservations from OpenTable and elsewhere, and email marketing. We're putting together a comprehensive solution that covers all of these needs, giving restaurateurs a one-stop solution for their Internet needs.

Creating Multiple Mini-sites in One Account

Tue, 11 Oct 2011 05:26:34 GMT

We've recently added a new capability to the Webvanta platform, which we call mini-sites.

With a normal Webvanta site, we can associate any number of domain names with a single site, but all the domain names will show the same home page. Typically, you would want to redirect all of these domain names to one domain name to optimize your SEO.

Sometimes, however, you may want to associate a domain name with a subset of a site. For example, suppose you have a restaurant franchise, and you want to provide each franchisee with a a few pages on your site to describe their location. You want them all to be part of one site, so you can manage them all in one place, they all can pull from one database for any DB-driven content, and any changes to stylesheets or templates can apply to all of them.

You could simply use URLs like www.myfranchisename.com/franchise-location, but you may want each of the franchises to have its own domain. This has advantages for SEO, as well as for giving each franchisee a little more of its own identity and a nicer URL.

With our multisite feature, you can now do this. Simply create a regular page as the home page of each mini-site, with as many sub-pages as you want to have be a part of that site.

Then open a helpdesk ticket (at helpdesk.webvanta.com) and specify the domain name that you want to associate with that mini-site. We'll do a little magic configuration on our end, and your mini-site will be live at its own domain. The cost, in addition to the fee for the main site, is $10 per mini-site, with volume discounts available if you need more than 20 mini-sites.

An Elegant Jewelry Site Using Webvanta and Foxycart

Mon, 10 Oct 2011 05:41:43 GMT

We recently launched a site for Palo-Alto-based jewelry store, De Novo Fine Contemporary Jewelry that uses a highly customized Foxycart implementation to meet the owners' design requirements.

The site makes good use of Webvanta's database and front-end design flexibility to provide an interface that closely matches the company's previous site, which was a static design that made updates challenging and did not include ecommerce capability. You can browse or search the one-of-a-kind jewelry by artist, featured items, type of jewelry, or material. The implementation is also carefully optimized for SEO.

The Foxycart setup was challenging, in that the design had specific requirements for how things are laid out on the cart, checkout, and receipt pages. One limiting aspect of Foxycart's approach is that you have essentially no direct control over the core HTML for these pages. You can, however, provide your own CSS and JavaScript. In addition to completely replacing Foxycart's standard CSS, this site uses JavaScript to modify the Foxycart-generated HTML to achieve the desired layout and to inject additional content into these pages.

Because all of the items are one-of-a-kind, the site changes the "Buy" button to a "Sold" tag when an item is purchased. We developed some custom back-end code to process Foxycart's XML datafeed so this change is only made when the purchase is successfully completed.

Caution: visits to this site can be expensive if you have a taste for beautiful modern jewelry.

Beyond the Desktop: mobile phone and tablet websites and apps

Tue, 23 Aug 2011 02:24:59 GMT

Unless you've been hiding under the proverbial rock, it's no surprise that the mobile web has exploded in the past year. It's a huge shift in the Internet landscape, and it changes the rules in a variety of ways.

We've put together a webinar to share some of our experiences creating mobile and table websites and apps. Our goal is to help designers create multi-platform solutions, making the best of phones, tablets, and computers.

The live webinar will be held on Thursday, Sept 1, at 11 am Pacific time. Webinar details and free registration.

Patrick Schutte of MI Windows & Doors, for which we recently built a website, mobile site, and iPad app, will co-present this webinar, using MIWD's real-world example to show how the platforms work together to create a marketing and sales solution that is much more powerful than a conventional website.

FontDropper: The Best Tool Yet for Web Font Exploration

Sun, 07 Aug 2011 18:01:40 GMT

Extensis, which provides a webfont service called WebINK (see New Web Font Services Expand Choices), has launched the coolest tool yet for experimenting with web fonts: the FontDropper.

You don't need a WebINK account to use this; just go to the FontDropper page, scroll down until you see the bookmarklet, and drag it to your browser's bookmarks bar.

Then, view any site whose fonts you want to explore changing, and click the bookmark. It runs some JavaScript that displays a font selector, and then you can simply drag any font to any block of text on the page, and it instantly updates!

Of course, there's no changes made to your source files, since FontDropper has no access to those; all the changes are made in the local copy being displayed in the browser. It's sort of like Firebug for fonts. Try different fonts until you get the look you like, and then set it up in your page's code to make it permanent.

You can get a feel for the possibilities this opens up in just a few minutes. Highly recommended.

Writing and Design for Mobile

Mon, 01 Aug 2011 16:14:43 GMT

As I mentioned in a previous post, when you're designing a mobile site you must pare down your information to the essentials.

Jacob Nielsen has a good post today on this topic, Defer Secondary Content When Writing for Mobile Users. Some key points:

Put only the top-level points on the page, with links to get the details.
Avoid use of stock photos and other elements that take space but don't really communicate anything.
Avoid block of text, and use bullet lists when possible.

The second point is one that many designers (and our own site) will struggle with, but I agree with the intent.

The Nielsen/Norman group is offering a series of related seminars at its Usability Week conference, being held this week in New York, Sept. 25-30 in San Francisco, October 3-7 in Austin, and Nov. 13-18 in London.

Ironically, the readability of the Usability Week conference site is poor on a large monitor, because it is a fluid design without any maximum width, resulting in excessively long lines of text. Try adding a max-width!

Design for Tablets: Big Phones or Small Desktops or Something Else Entirely?

Sat, 30 Jul 2011 16:39:22 GMT

As I discussed in my previous post, a well-optimized mobile phone version of a complex website typically requires a completely different approach than the desktop site. The site must be much simpler, and it should focus on the tasks that are most likely to be of interest to someone on-the-go.

iPads are often classed as mobile devices, since they run the Mobile Safari browser and have a touch-based interface. Some sites that have a mobile-optimized version with automatic device-type detection will deliver the mobile version of the site to iPads and other tablets.

Usually, this delivers a poor result. Tablets (at least the larger ones, such as iPads) are better thought of as being like desktop browsers with some modest differences, rather than as being in the same class with mobile phones.

Tablets Are Like Desktops ...

iPads do not share the two characteristics that make mobile phones such different browsing environments:

They are much less frequently used while walking down the street or in a car.
Their screen size is closer to a desktop browser than to a phone.

As a result, the visual and information design of a tablet site should be like a desktop site, not like a mobile phone site.

... But Not Quite the Same

That said, there are some aspects of the tablet experience that are more like a phone:

A touch screen does not provide any differentiation between hover and click, so any dependence on hover events should be eliminated.
At least in the case of the iPad, the browser cannot be extended with plugins, so pages cannot use Flash or any other technology that requires a browser plug-in.
A tablet may be used in a portrait or landscape orientation, so the site should adjust accordingly. In the portrait orientation, the width (for an iPad) is only 768 pixels, which is narrower than desktop designs have taken into account for many years.

Given this situation, there are two good approaches to serving tablets:

Accept the tablet's limitations for the desktop design as well, so you can use one design for both desktop and tablet browsers.
Treat the tablet as a third class of device, delivering a site that is different from both the desktop and mobile sites.

The second approach has the advantage of putting no constraints on the desktop site, but it increases the amount of work involved. Generally, the first approach should be acceptable. Depending on the design, you may want to introduce a few new styles for tablet devices to make click targets a little larger and further apart.

Note that tablet browsers generally will scale a web site automatically, so a 960-pixel-wide site, for example, displays without a horizontal scrollbar on a 768-pixel-wide iPad in portrait orientation. This scaled site, however, will have text smaller than designed and links closer together than intended, so it is less optimal than a site that uses a responsive design approach to scale to a true 768-pixel-wide layout.

For tablets with smaller screens, this issue is even more important. Some Android tablets are only 480 pixels wide in portrait orientation, so a 960-pixel-wide design would display each element at just one-half its intended size.

Our Approach to Mobile and Tablet Design

To summarize, our approach to mobile and tablet design is:

Understand the top tasks for mobile users of a particular site, and design the mobile site accordingly.
Deliver different HTML pages to mobile phones, so the site can be fully optimized for mobile users.
Use responsive design, as needed, along with eliminating any UI that depends on hover, so the desktop site can serve tablets as well. Any Flash components must have an HTML5 alternative, and clickable areas may need adjustment.

The world of mobile and tablet devices is young and still evolving rapidly, and no doubt these approaches will evolve as well. For some sites, a pure responsive design approach will be fine; for others, every platform may need to be treated separately. You should have all of these techniques in your toolkit.

Mobile Web: Responsive Design or Separate Pages?

Tue, 26 Jul 2011 06:15:53 GMT

In the past few months, we've seen a dramatic increase in interest among designers and their clients in mobile and tablet websites. There's also been a surge in books on related topics, such as Ethan Marcotte's excellent Responsive Web Design.

In investigating our customer's needs and looking at a variety of design approaches, we've found that responsive design is the answer for some situations, but that a separate set of pages is more appropriate in many cases.

Responsive design: sometimes the best approach

Responsive design takes the approach of using a single HTML page for all devices, but delivering different CSS for different devices, typically using media queries to differentiate based on browser dimensions. It also involves letting the browser scale images for different layouts. For something like a blog, this is a great approach.

While these techniques work well when the changes for the mobile site are modest, in many cases the mobile site should be more drastically different than responsive design readily supports. Mobile sites have such dramatically reduced screen real estate that they require ruthless trimming of everything that is non-essential.

Crafting an optimized mobile design

To choose what is most important and what is non-essential, you must understand the top tasks for your visitors. The top tasks for a visitor using a phone often often will be different than for a desktop visitor. For example, for a restaurant site, a desktop visitor may want to see a slideshow of photos, or a video tour, to get a feel for the restaurant. A mobile visitor is more likely to be looking for directions, a phone number, a way to make a reservation, and a look at the menu.

Thus, we have found that it is often better to create an entirely different set of pages for mobile users. This may seem like more work, and duplicate sets of content to display. In fact, it is often easier that making a responsive design work well, and if the content is primarily coming from a database, it may not require any duplicate content entry.

Automatically providing mobile pages to mobile devices

To facilitate this approach, we've added to the Webvanta system automatic detection of mobile devices, using server-side code that looks at request headers. The system then delivers a different set of pages, within the same site, to mobile devices.

For some examples of sites using this approach, take a look at:

MI EnergyCore, discussed in a recent blog post
Our own site
A prototype restaurant site

With a phone-optimized site taken care of, the next question is what to do about tablets, which I'll discuss in my next post.

Web Site, Mobile Site, and iPad App Create Potent Sales Tool

Fri, 22 Jul 2011 23:08:17 GMT

It's been a long time since we've blogged about all the great new sites being built on the Webvanta platform. We'll be writing up a number of them in the coming weeks, and also updating our example sites page.

There's one site we're particularly excited about, not just because of the site itself, but because of the accompanying iPad app and mobile site.

MI Windows and Doors provides energy-efficient door and window systems. The new site, built by Webvanta's services team working with MIWD's designer and marketing strategist, Patrick Schutte, showcases the products and provides text, video, and images for homeowners and professionals.

In addition to the desktop site, we built a mobile site that uses a different set of page templates but draws from the same database of content.

We also created an iPad application that encapsulates the content from the site. Each member of MIWD's sales force has been equipped with an iPad with this application.

On the web site, the videos are delivered via embedded YouTube players. But on the iPad, the company wanted the videos to be available off-line. So we created an iPad app that uses an HTML5 video player to show locally-stored video files. The PDF spec sheets are also stored on the iPad.

This combination of desktop web, mobile web, and iPhone/iPad apps makes a remarkably potent tool for any marketer.

Searching for Our Next Employee

Thu, 12 May 2011 05:15:34 GMT

We're expanding, and we're searching for an outstanding front-end web developer to join our team.

This is an opportunity to join a fast-growing startup working at the leading edge of web technology, right in downtown Sebastopol.

Check out the details and let us know if you'd like to join us.

DesignCast a Big Hit! You Can Watch the Recording

Thu, 12 May 2011 04:46:46 GMT

Yesterday, we presented a DesignCast for HOW Magazine about how designers can create great sites without getting buried in technology.

Apparently we struck a cord, because we set an all-time attendance record for one of HOW's webinars, blowing out the GoToWebinar system when it hit 1,000 attendees.

In this webinar, I presented a strategy for how designers can remain focused on design while delivering leading-edge web sites. The keys are to:

Learn enough of the key web technologies that you know what's possible, and so you can edit what's been created.
Adapt your design tools so you can specify the site design well.
Find a reliable implementation partner who can build your designs.

To all those who say "real web designers must code their own sites," we say B.S.

Does an architect need to be a contractor to design great houses? Of course not. They just need to understand the materials and the principles.

We've worked with dozens of designers to create hundreds of sites. Design and coding are very different skill sets. There's no need for great designers to feel they need to become great coders to deliver great sites.

In fact, it's likely to hold them back, because it will distract them from what they're good at, and they aren't likely to ever be as good at coding as the people they could hire to do that for them. They'll leave out interactive features because they don't know how to code them, and aren't likely to take advantage of leading-edge techniques.

The recording of the 60-minute webinar is now available for free, along with the slides:

Video file for Mac users (warning: big mp4 file!)
Video file for PC users (warning: big wmv file!)
Presentation slides

If this approach resonates with you and you'd like to understand more about how we can help you boost your design business, request a free consultation.

HOW Magazine DesignCast: A Graphic Designer's Guide to Building Dynamic Websites

Sun, 01 May 2011 02:00:48 GMT

If you weren't able to attend my presentation for AIGA San Francisco on Building Dynamic Websites Without Getting Buried in Technology, you have another chance: I'll be presenting similar material in a free "DesignCast" webinar organized by HOW Magazine.

The DesignCast will be held Tuesday, May 10, at 1 pm Pacific/4 pm Eastern.

Creating Dynamic Sites Without Getting Buried in Technology

Thu, 28 Apr 2011 23:50:20 GMT

Many experienced designers grew up with print and want to focus on their creative skills, rather than on web technologies. At the same time, clients expect increasingly complex sites that require multiple layers of technology to design and deliver.

The good news is that you don’t need to deal with all the technical details of the web to design great websites. However, you do need to embrace the conceptual language of the web, learning what each technology does and what it is capable of, so you can create modern designs and work effectively with an implementation partner.

On May 5, I'm giving a talk for the AIGA's San Francisco chapter, on how to create dynamic sites without betting buried in technology.

In this talk, I'll give a quick tour of what graphic designers need to know about web technologies, including the opportunities presented by HTML5, CSS3, jQuery, database-driven design, and the mobile web. I’ll also show how to document your designs so they can be efficiently built in a way that fulfills your creative vision.

More information on the AIGA SF talk

Web Design Wednesdays: Free Talks & Lunch

Thu, 21 Apr 2011 06:18:30 GMT

We've launched a new series of talks for the North Bay web design community, which we'll be hosting at the Webvanta offices in downtown Sebastopol. And we're even providing lunch.

The first talk, on May 4, 2011, will be on web fonts.

Attendance is free, but pre-registration is required so we know how many people to expect.

Details and Registration

An Event Apart Wrap-Up: The Leading Edge of Web Design

Sun, 17 Apr 2011 19:34:44 GMT

If you’ve been reading this blog, you already know that we’re big fans of An Event Apart. The world of the web is moving quickly, and attending a conference like this is a great way to make sure you’re on top of the trends and current with the latest techniques, as well as to meet like-minded folks.

The conference runs in six cities. The Seattle event is past, and Boston is sold out, but you can still go to Atlanta, Minneapolis, Washington DC, or San Francisco.

We’ve posted six interviews from the Seattle conference:

Jeffrey Zeldman, cofounder of the event and one the leaders of the web standards movement.
Eric Meyer, the cofounder of the event and one of the world’s top experts on CSS.
Jeremy Keith on web standards and design principles.
Kristina Halvorson on content strategy.
Jason Santa Maria on web typography.
Luke Wroblewski on mobile web design.

The conference presentations themselves are not published, other than for use by the attendees, but there a number of online resources to learn more about what was said:

A Feed Apart shows the tweets from each session. You can follow this live during a future event, or look back on past events.
Luke Wroblewski wrote up his notes on most of the presentations.
Jeffrey Zeldman published his notes from Luke’s mobile design seminar.
Pictures on flickr.

Finally, here’s an interview with Ron Zasadzinski of CodeGeek.net, one of the conference attendees:

Interview with Jeffrey Zeldman on the State of Web Design

Sat, 09 Apr 2011 06:26:27 GMT

The last of the interviews we did at An Event Apart in Seattle was with Jeffrey Zeldman, the cofounder of the event.

Jeffrey has been a prominent figure in the web design world since its earliest days. He was one of the first web designers, bloggers, and teachers, and he has written since 1995 at Zeldman.com. He was a cofounder of the online magazine A List Apart and, more recently, the conference An Event Apart and publisher A Book Apart.

Jeffrey cofounded the Web Standards Project, which he led during its formative years. He also wrote one of the first books on web standards, Designing with Web Standards, now in its third edition.

Jeffrey founded the wonderfully named design studio Happy Cog in 1999. He’s on the faculty of the MFA in Interaction Design program at New York’s School of Visual Arts, and co-hosts the podcast The Big Web Show. It makes my crazy life seem so simple…

In the following interview, we discussed how all this started, and what the hot issues are in web design today. (Note: my apologies for the terrible focus—getting used to a new camera and trying to be interviewer and cameraman at the same time defeated me.)

Interview Transcript

Michael: This is Michael Slater with Webvanta at An Event Apart in Seattle. I’m glad to be here with Jeffrey Zeldman, who is the producer of this event.

Jeffrey: Hi Michael.

Michael: This is such a high quality event you put together, that you have been doing for a few years now.

Jeffrey: Eric Meyer and I have been doing this event since Christmas of 2005, and we started it as two men with a shoe box. We really started kind of amateurishly. We knew there was a community for it but we were not producing it on a massive scale like this. Well, not that it’s massive now, it’s really intimate. We try to keep it intimate. But yeah, 5 years.

Michael: You do it in five cities or so?

Jeffrey: Six cities this year, all three-day events. There’s a two-day conference with an optional third day. Tomorrow, it will be on mobile. In Washington DC, it will be on accessibility. In other cities, it will be on CSS3 and HTML5. We have Kristina Halvorson on content strategy in Atlanta. We are putting on two special sessions with Andy Clark on Hardboiled Web Design later this year.

Michael: And you created a whole franchise around the “Apart” brand I see. You have An Event Apart, A List Apart, and now A Book Apart, and A Feed Apart.

Jeffrey: It’s all true. Originally, A List Apart, the magazine, started as a mailing list. At the time, early 90’s, there were a lot of good mailing lists of people who were interested in web design and interaction design, but there were lots of trolls. There was lots of spam. There were lots of flame wars. So a guy and I decided to create a mailing list where everyone would submit the mail and we would edit and curate it and put it out as a digest once a day. The name stuck and we turned it into a web magazine. And the “apart” name continued to stick. I think my friend Brian Alvey suggested to Eric Meyer that we name our conference An Event Apart, and it makes sense. Same people, same audience.

Michael: So your day job, if we can call it that, is at Happy Cog, is that right?

Jeffrey: Right. I founded Happy Cog in 1999. It’s a web and interaction agency. At first it was just me in my underwear. It’s big in terms of reach but it’s still boutique size. We have a small office in San Francisco. A medium-small office in Philadelphia. And a very small office in New York. Small, but all really great people. We design sites for companies like Zappos. And it’s a lot of fun.

Michael: What do you think the big challenges are that web designers are facing today? There were a lot of things discussed here about taking advantage of HTML5 and CSS3. Now there's opportunity to do animation, and mobile. We work with a lot of freelance designers and small design shops, and they are really struggling with all the technologies that they have to cope with.

Jeffrey: Exactly! From about 2004 to about 2009 or 2010 we had this lull were everyone was whining and complaining because nothing was happening. Nothing seemed to be happening. We didn’t seem to be getting near CSS3. We didn’t really like the direction we were going with XHTML2. It didn’t seem like web standards were getting anywhere. And now we are in the opposite situation were so much explosive stuff is happening and going on.

Mobile is huge. The iPhone, iPad, and Android are huge. On the one hand, they are standards-facing, because they all support HTML5 and CSS3, so you can create great mobile experiences using web standards. You can create apps using web standards. On the other hand, there is also the temptation to go a proprietary route. In a strange way, although the browsers are much more standards compliant, it seems like we are redoing the browser war. Only now, it’s not the browser wars, it’s platform wars.

Magazine publishers are rushing to do stuff in a proprietary iPad-only format. Then redo it for Android. Of course, they could do it for everything at once if they wish to. It’s a really interesting time. My friends Roger Black and Filipe Fortes have started Treesaver, which is an open source JavaScript framework for basically creating magazine formats automatically using web standards. They work in iPad, iPhone, and Android and everywhere. Same as the web standards idea. Don’t make the same thing five different ways. If you have extra money, spend it on content. Spend it on photography. Spend it on better design.

Michael: Do you think the lure of apps is largely misguided then?

Jeffrey: No. There’s amazing things apps can do too. I think in some cases an app needs to be an app. I’m not saying that. I think content publishing can use web standards instead of rushing to make an app out of something that doesn’t need to be an app. Like making a closed proprietary format for a book instead of using EPUB. It seem like a misguided impulse, though I do understand it. Publishers are terrified and want to make money, and users do want to have a thing that they can own in some way. I think we are in a very transitional state, and it’s very interesting right now.

We are addressing the challenges of that and content strategy that we have been putting off dealing with 15 years. For 15 years we have gotten better and better at designing websites and web apps, and really smart about all kinds of stuff, but we still can’t really get the content. We can never get it on time. We don’t know who is responsible for getting it to us, or fixing it, or deciding where it goes, or maintaining it. So I think content strategy isn’t really a revolution, it’s been around the whole time we have been doing this stuff. But I think the charge lead by Kristina Halvorson and joined by others (such as Jeffery MacIntyre and Erin Kissane, who wrote a book for us on content strategy) is an exciting, big challenge right now.

Another important issue is responsive design, and whether it’s adequate, being posited as saying you don’t need a mobile site because you can just do responsive design. Really, no one is saying that, but there are lots of arguments around it.

Basically, everything is exciting. Everything is moving really quickly. Everything is controversial. Whether HTML5 is just HTML again. Typography, the excitement of web fonts, and the challenge of web fonts and devices. Like Jason Santa Maria said in his talk, we have gotten really good at, we have really gotten great at, using Georgia and Verdana and making beautiful things with that. Now we have a thousand fonts again, are we going to be tasteful and good? It’s a challenge; there's a lot of people in our field who learned design doing interactive design on the web. They are really good designers now but they didn’t study graphic design. They didn’t study font pairings and things like that.

Michael: In that sense, people who grew up with print and are moving onto the web are in a better position, but in a way they struggle more with all the technology.

Jeffrey: In a way they are, yes. And they are the ones who maybe still think that a proprietary animation format is the way to go, or that a proprietary platform is the way to go.

I was one of the judges of the Interactive Awards for the Art Directors club this year. There was fantastic work submitted but most it was really fantastic film someone had embedded on their website. Several times I went up and said, I feel I can’t deny the quality of this brilliant film. The concept that the ad agency had was great. Clearly people responded to it and it went viral. Yet, I feel awkward giving this an award, and saying this is the best interaction design on the web, when most of the apps that I think are phenomenal were not even submitted for an award. Most of the content sites that I think are really important, that people turn to every day, that are changing the way content is distributed, that are really meaningful, are not even being submitted to award shows like that.

I think ad agencies have brilliant people in them, doing really interesting work, but I think they are resisting this change. Some publishers are on board and ahead, but a lot are resisting this change. And I think the people at An Event Apart are really interesting. Many of them work in-house, but they are not the “I have a secure job and I don’t have to learn anything” crowd, not at all. These people may have a secure job but they want to be the best at it they can be. They want to evangelize better design, better content, better user experience, better code, and they come here to learn that stuff and take it back to their colleagues.

Michael: Great, thank you. I will let you get back to your conference and thank you so much for your time.

Jeremy Keith Interview: Web Standards and Design Principles

Tue, 05 Apr 2011 22:25:07 GMT

Jeremy Keith gave a great talk at An Event Apart about design principles. In the talk, he shows how everything should start with your goals, which then lead to principles that reflect those goals, and finally result in design patterns to implement them.

Jeremy has been an active contributor to the web standards movement for many years. He’s a member of the Web Standards Project and is a frequent conference speaker. He blogs at Adactio.com, his personal site.

By day, he is the technical director at Clearleft, a prominent user experience firm in Brighton, England. And in his spare time, he built Huffduffer, an elegant free service that lets you aggregate links to audio from around the web into your own composite podcast.

I spent a few minutes with Jeremy after his talk and recorded this interview about the state of web standards and the use of design principles, such as the all-important “ignore anything you don’t recognize”:

Jeremy’s most recent book was the first book ever from A Book Apart, HTML5 for Web Designers. It cuts quickly to the heart of the matter and is a surprisingly easy read for a technical book, explaining what’s immediately useful about HTML5 and offering insight into how the standards process works.

His previous books include DOM Scripting, one of the first books to show designers how to use JavaScript to enhance their pages, and its sequel, Bulletproof Ajax.

In addition to the upcoming An Event Apart conferences, you can catch Jeremy later this year at Mobilism in Amsterdam, and at the DIBI Conference in Gateshead, England.

Transcript of the Interview

Michael: Hi, I am Michael Slater from Webvanta and I am here interviewing some of the speakers from An Event Apart. I’m pleased to be speaking with Jeremy Keith from Clearleft in the UK, who just gave a great talk on design principles. Jeremy, can you introduce yourself and tell us a little bit about what you were talking about?

Jeremy: I’m Jeremy Keith and I was talking about design principles, which are essentially the reason why you do something and how you go about doing it right. You’ve got design goals and design principles, and they result in the design patterns. I was making the point that these principles are everywhere, whether you are aware of them or not.

The web itself is based on a set of principles. Every content management system should have a set of design principles behind it. And those design principles are driven by the goal that the content management system is trying to solve. Basically, I’m just hammering home the importance of design principles and showing examples, like the design principles of HTML, the design principles of CSS, and so on.

Michael: It’s remarkable really how far reaching the design principle of ignore things you don’t recognize has been. Was that really conscious or was that fortuitous?

Jeremy: No, that was absolutely conscious. The web at the start was a messy place. There was a lot of evolution and rapidly throwing stuff at the wall; throwing new elements into the browser and seeing if people would use it or not. It was kind of Darwinian, seeing if it would survive.

It was really a bad time for web developers in the 90’s because all of this proprietary stuff was being thrown in. But in and amongst all this proprietary crap being thrown in, there’s really useful stuff. And that useful stuff would end up being in a spec because it turned out to be simple.

Essentially, browsers, because they have to deal with who knows what coming at them, had to be able to handle all sorts of rubbish markup. Stuff we would look at and think, that is badly nested or that element doesn’t exist—why are they using that? A browser doesn’t break when you throw this stuff at them. It’s going to ignore stuff it doesn’t understand.

It turns out that that is really, really useful for adding to HTML. Same for CSS. If a browser doesn’t understand the CSS rule, it doesn’t break. It doesn’t stop processing the document. It just ignores that rule and processes the next one. That is sort of a fault tolerance, I guess you would call it.

It’s the same with product design. You want to make sure that one small error doesn’t cost someone their life, right? You want to have fault tolerance built in. You absolutely want to have it built in to web browsers, and it’s definitely by design.

Michael: Is there anything going on today in the HTML and CSS standards world that concerns you?

Jeremy: I actually do think it’s on a good track. In the CSS world, I think one of the useful innovations is the rise of vendor prefixes. If they go to far, it’s going to be awful. If everything is getting vendor prefixes, -webkit, -moz, -o, that’s not good. But there’s been just enough use of it to push the boundaries and figure out we really want to have gradients. We really want to have these transitions and transforms to see which directions the specs should take. See what authors start using; if they start using this stuff, it’s useful, let’s put it in the spec.

In the HTML world, people think things might not be going that well but I think things are actually going great. People look at the bizarre kind of process in place now with the W3C & the WHATWG and it just looks like a mess, but actually I think they balance each other really really well. Yes, they have a very different approach, but they balance each other out very well.

Michael: Are we going to get to HTML6 at some point?

Jeremy: Oh yeah. This is a common misconception that a standard body will work on one version and once thats done they can move onto the next version. HTML5 will probably hit last call this year, in a couple months. From that point, W3C could be working on HTML6, even though there will still be lots of work done in browsers implementing this stuff. This stuff can be asynchronous, right? Work goes on.

You can work on CSS 2.1 while still working on specs for CSS3. It’ not wait until everything is done and dusted, then move onto the next number. This stuff can happen in parallel. So yeah, there will be an HTML6, HTML7, and HTML8 from the W3C. Over at the WHATWG they’re just saying it’s HTML, and that they are just having this living document, this living standard that will evolve as the browsers add these features.

If that were the only living spec I would be a bit concerned, but the fact that we also have the W3C nailing down the specific versions (HTML5, HTML6, HTML7) again they balance each other out really well. They make a good interplay.

Michael: Great, thank you for taking a few minutes to talk to us.

Jeremy: Thanks Michael.

Kristina Halvorson Interview: Content Strategy for the Web

Sun, 03 Apr 2011 04:47:26 GMT

Content strategy is one of the hot buzzwords in the web design world today. The main force behind all the attention content strategy is getting is simply how badly it is needed—so many sites have big problems with their content. After years of focusing on design, it is finally dawning on everyone that the design exists to serve the content, and that content needs to be more than an afterthought if you're going to build an effective site.

The explosion of interest in content strategy is also due, in no small part, to the efforts of Kristina Halvorson, whose landmark 2009 book Content Strategy for the Web is the most widely read book in the field. Her company, Brain Traffic, was one of the first to focus on content strategy work.

We caught up with Kristina after her talk at An Event Apart and recorded this interview. Although her work, and much of her book, focuses on the issues that face large-company sites, in this interview we discussed how freelance developers and small design shops can apply content strategy principles to small and midsize business sites.

Kristina also created a content strategy conference, Confab: The Content Strategy Conference, which will be held May 9-11, 2011 in Minneapolis. As an indication of the high interest in content strategy, the conference is already sold out, but you can join the waiting list.

Kristina is leading a three-hour workshop at Web Content 2011, June 6 in Chicago, and an all-day workshop at An Event Apart Atlanta on June 15.

You can follow Kristina on Twitter as @halvorson.

Interview Transcript

Michael: I’m Michael Slater from Webvanta and we are here interviewing a few people from An Event Apart to share some of the knowledge. Could you introduce yourself?

Kristina: Sure, I’m Kristina Halvorson. I am the CEO and founder of Brain Traffic. We are a content strategy consultancy. And I am the author of Content Strategy for the Web.

Michael: A landmark book, I must say.

Kristina: Thank you!

Michael: It gets pointed to all the time. How did you come to your focus on content strategy?

Kristina: I started out as a copywriter, and I started specializing in websites probably in 2003 or 2004. Content was always the last thing people would think about. I was always the last person they would call and every time I would go in ready to write there would be a million unanswered questions. Inevitably, I would go in and do my best work but there were too many obstacles in my way. So I sort of backed into content strategy in that I just became very persistent in asking a lot of questions, and the agencies I was working with would call me early next time.

Michael: It seems there is so much design focus on the web, but ultimately that design is there to present the content.

Kristina: Yes, sir! I’m a fan of that.

Michael: In a lot of what you talk about it sounds a lot like enterprise-level stuff, bigger companies, bigger budgets, bigger websites. We work with a lot with freelance designers and small design shops that are working on, you know, $5,000 websites for some small business. How do you apply this to that kind of project?

Kristina: Content strategy is about asking, at the heart of it, smart questions about the content very early in the process and being persistent about it. There is a lot of fancy documentation that goes along with any process. For a designer, or someone who is doing all the planning, project management, the design, the code, all of it, I think the most important thing you can do is making sure you are asking tough questions about the content within that first kick-off meeting. Not just, “Will you be providing the content?” “Yes, I’ll have the content ready for you,” because that never happens, it never works.

Who is going to be providing the content? How long does it typically take to get the content? Who owns the content on your website right now? Do you have any plans to take care of that content after you launch the website? What does that look like? Really, really digging in. Otherwise, what happens is it comes time to launch, or the client is pushing to launch, and they say, “oh, we’ll just go with the copy we have.”

Help the client understand that it’s not just about writing a little bit of copy, especially writing your own copy for your own website. If you are an independent proprietor, or a very small company, for whatever reason that tends to be much more emotional because your small company is your baby. You want to be sure that what you say about it is exactly right. So it becomes a time management issue more than anything, I think.

Michael: What level of projects does Brain Traffic typical work on? What’s the smallest sort of site you get involved in?

Kristina: It has shifted quite radically over the past 18 months since the book came out, and larger organizations started talking about content strategy really for the first time. We work almost solely now with larger enterprises. We aren’t doing enterprise strategy per say but we are working with smaller departments within them, on their specific web properties. We do have a couple of global initiatives that we are doing, and that has been really fun growing into those. But you know, I cut my teeth, and we cut our teeth as a firm, writing for small websites. So I know the challenges and the obstacles and the complexities are different, but they exist for content whether your site is 12 pages or 12,000.

Michael: Do you find that site owners typically get this now, or is it still a hard sell getting site owners to focus on the content?

Kristina: We are in a little bit of an unusual position in that when people call us now, they call us for content or content strategy. I think that agencies are still struggling with that, even when clients call them and say “We need a new website” or “We need a website redesign and we definitely want you to provide some of the content strategy.” What they really want are content deliverables, and not so much the strategic thinking. So that I think is still a challenge. I don’t think people understand that the entire point is not jumping to tactics. The entire point is to just think about content as an entirety that involves both product and people.

Michael: Do you deal with SEO? It seems like there is a lot of content marketing going on these days where people are just having content on their sites to draw traffic. So I assume you work with people initially about what the goal of the content on the site is? Is it about drawing traffic, or converting visitors into customers?

Kristina: We try to take even a step back from that and say, “What are your business objectives? Those need to be informing your web strategy. And the content you choose, the decisions you make about your content, that core content strategy really needs to be supported by your business strategy. I think that having a desire to attract traffic, that’s not enough, and that is going to result in content for the sake of content.

I understand the content marketing movement. Joe Pulizzi, who is sort of the godfather of content marketing, and I have been speaking to one another for years about that. He’s actually speaking at Confab, our content strategy conference, and I will be speaking at his Content Marketing World in September.

My concern is that, as with SEO, as with blogs when they came out, as with social media, that marketers in particular are going to say, “Yes! This is the next silver bullet. This is the trend that I need to focus on. I just need to go get content.” And that’s going to backfire. A, because you can’t just go get content. You can’t just pull it off a shelf in a warehouse. B, because I think actually delivering quality content to become a real resource, a real expert, which is what the content marketing movement is all about, requires an enormous amount of time. It requires a totally different skill set that a lot of entrepreneurs and small businesses maybe don’t have within their four walls.

So I think it’s a good thing to be paying attention to the power and value of content, but I think we are going to see a lot of organizations see it backfire because they take it on as a larger initiative without really understanding the level of commitment that they are taking on.

Michael: This latest Google search change seems like it’s backfiring on people now.

Kristina: Yes! That’s what I asked for for Christmas. So I’m delighted to see that.

Michael: Great, thanks for taking the time to talk with us.

Kristina: Sure, absolutely!