Webvanta Blog

Happy 20th Birthday Web!

Mon, 06 May 2013 03:56:11 GMT

Last week, the global technology community celebrated the Web's 20th birthday. Considering its impact, the Web must rank as one of the most important inventions of all time.

It is stunning how much the Web has evolved in two decades, from a text-only medium useful only for researchers to the world's dominant publishing and communication medium. As with most big technology breakthroughs, the Web builds on decades of work that went before it, and the initial creation was only a glimmer of what was to come.

The Web began life at CERN, the European Organization for Nuclear Research. Tim Berners-Lee (now Sir Tim Berners-Lee), who wrote the first proposal for what he named the WorldWideWeb, was seeking to make easier access to the vast and diverse information the research center created.

In the original proposal, Berners-Lee noted, "There is a potential large benefit from the integration of a variety of systems in a way which allows a user to follow links pointing from one piece of information to another one." That, to be sure, has turned out to be one of the great understatements of all time.

In recognition of the 20th birthday of the Web, CERN has posted the first Web page at its original URL, http://info.cern.ch/hypertext/WWW/TheProject.html. It's worth a look to see how basic was the seed of our modern communications world.

Standing on the Shoulders of Giants

The invention of the Web centered around the recognition of the incredible value of connecting all information resources in a universal way.

Berners-Lee invented the URL (Universal Resource Locator): a simple text string that can provide a pointer to any piece of information anywhere. Deceptively simple, the URL is an incredibly powerful concept. Together with HTML markup and the HTTP protocol, also invented by Berners-Lee, URLs provide the glue that makes the Web work.

The creation of the Web was possible because Berners-Lee was able to add his insights about hypertext, markup, and protocols to a vast body of work that had already been done.

Hypertext

The idea of hypertext was at the heart of the concept for the Web. Linked text was not new, however; the concept was first elucidated by Vannevar Bush in his prophetic paper, As We May Think, written in 1945 when he was head of the Office of Scientific Research and Development, guiding wartime military R&D.

It was almost two decades later that the name hypertext was coined by Ted Nelson, whose Project Xanadu, begun in 1960, was a more ambitious but ultimately unsuccessful version of the same vision that drove Berners-Lee.

Nelson's vision included mechanisms that made links bidirectional and prevented broken links from being published, as well as a micropayment system to compensate authors for use of their content. It turned out that the simpler and more open system of the Web, focusing on the core concept of a universal link format and basic text markup, took off like a rocket.

The Internet and TCP/IP

The Internet, of course, is not the same thing as the Web, though people relatively new to the industry often fail the make the distinction. The creation of the Web was possible because the Internet was already there.

Like Vannevar Bush's vision of a world of interconnected information, the Internet was a direct outgrowth of the scientific efforts driven by World War II. The need for a communications infrastructure that could withstand a nuclear attack led to the creation of the ARPAnet in the 1960s, building on the concept of packet-switching to create a distributed, highly reliable network.

The creation of a standard protocol stack, TCP/IP, in 1982, made it possible for a number of different networks to communicate as one, and the Internet was born. For its first decade, however, the Internet was a decidedly nerdy tool, used only for non-commercial purposes and generally requires some technical skill to use effectively.

Visual Browsers

When the Web first emerged at CERN in 1992, it was a decidedly utilitarian place, designed by and for researchers.

Soon after the Web's debut, Marc Andreesen's Mosaic browser provided an easy-to-use interface and added the embellishment of images. By 1993, all the key pieces were in place for today's Web.

The Power of Universality

The spectacular success of the Web is a tribute to the power of universality. The inventions of Berners-Lee, Nelson, Andreesen, and many others were major achievements in themselves, but they would have been far narrower in their application had they not been combined to create an open, distributed, universal method to connect all the computers of the world and all the information they store.

To be sure, there is lots of brilliant technology that underlies the Web. But the key principles that make it work are relatively simple; their importance comes not from breakthrough technical features, but from their competent implementation of fundamental concepts of universality, reliability, and extensibility.

Looking at the Web today, it has already become far larger, and been used in much more diverse ways, than any of its creators could have envisioned.

Google is something these innovators may have foreseen, but probably not its economic basis as an advertising system. That a business like Amazon could become a dominant retailer of nearly everything, or that a website called Facebook could become the center of many people's social lives, would have been much harder to anticipate.

What will the next 20 years bring? Answering that question is just as hard as predicting Google, Amazon, and Facebook would have been when seeing Berners-Lee's text-based, non-commercial WorldWideWeb.

For a fast-paced five-minute tour of the people and inventions to led to the Web, see High-Tech: The Incredible Depth of Simple Experiences.

Music Academy Site is Carefully Tuned

Tue, 30 Apr 2013 05:19:40 GMT

The Music Academy of the West is a remarkable place. Founded in 1947, the classical music institution serves about 150 of the world's best classical music students with an 8-week summer festival. The school, located on a beautiful 10-acre property in Santa Barbara, is funded entirely by charitable donations—it is entire free for the "fellows" who are selected to attend each summer.

We were thrilled to be selected by the Academy and its marketing consultant, Patty Gessner, to build and host a new site for the Music Academy. The previous site was due for an overhaul, and the team wanted to get away from the MODX CMS that it used.

I worked with the Academy's team to define the requirements for the new site. Once the functional needs were established, our professional services team implemented the visual design, created by Ginny Laughlin at Athena Design Group, along with the database structures required to manage the details about the hundreds of events and people involved in each summer's program.

A custom JavaScript-based calendar widget allows visitors to quickly find events from the many performances and master classes offered by the Academy, selecting by date, instrument, or type of event.

This summer, another 150 lucky musicians — selected from more than 1,700 applicants — will spend the summer at the Academy. A private, password-protected area of the site will provide them with all the details they need for their day-to-day activities, from rehearsal locations to bus schedules.

The Changing Requirements for Manufacturer Websites

Wed, 24 Apr 2013 02:26:07 GMT

Not too long ago, manufacturers that sold through distribution felt little need to have sophisticated websites. Providing product information to purchasers was largely up to their distribution partners.

The World Has Changed

Today, however, manufacturers are missing a huge opportunity if they don't have sites comparable to high-quality, consumer-facing sites. There are two primary reasons for this shift:

The ultimate purchaser of a product, even if he or she has no direct relationship with the manufacturer, is likely to use the web to research the products they are considering. If a manufacturer's website doesn't reflect the quality of their products and provide detailed information, sales are going to be lost.
Distributors, retailers, and other channel partners need up-to-date, detailed information about the manufacturer's products. Distributing printed datasheets and catalogs, or even e-mailing PDFs, is expensive and inefficient, compared with having everything available in a web-based repository.

The Sad State of Manufacturer Websites

Many small and midsize manufacturers still have websites that range from poor to ordinary. Such companies typically have not paid much attention to their websites, especially as the economy slid into recession and budgets were slashed.

Often, these sites don't have detailed product information. And when they do, typically there are many products listed on one page, which slashes the opportunities for the site to show up in search engine results.

Invariably, these older sites also don't have any support for mobile devices, making them hard to use for anyone browsing on a phone.

Taking Full Advantage of the Web and Mobile Devices

Now, with the economy rebounding and purchasers of all stripes having come to expect the web to serve all of their information needs, there's a compelling case for manufacturers with sub-par websites to revamp their approach and distinguish themselves with great sites.

A quality, modern, manufacturer website will increase demand for the company's products and cut the cost of providing product information to the sales channel.

Purchasers of all kinds of products, whether consumers or professionals, are often using phones and tablets as well as desktop computers to browse the web. Effective sites need to be optimized for this environment.

Introducing the Product Information Marketing System

We're now offering a customized, turn-key solution for manufacturers to put their product information on the web and in the hands of their channel: the Webvanta Product Information Marketing System. Our mission is to enable manufacturers to take full advantage of the web and mobile devices, at an affordable cost and with a minimum of hassle.

The Parade Comes to Webvanta

Mon, 22 Apr 2013 04:38:18 GMT

We had a great open house last week, and would like to thank everyone who stopped by.

We had such a good time, we didn't remember to take any pictures — but here's a few of our town's annual Apple Blossom Parade, held two days later.

My office faces Main Street and provided an excellent view of the parade!

New Site Highlights Spectacular Friesian and Warmblood Horses

Tue, 16 Apr 2013 03:13:44 GMT

We're excited to take live a beautiful site we've been working on for several months, for Iron Spring Farm in the hills of Pennsylvania. Check out the amazing Friesian stallions and Warmblood stallions that the farm owns.

Before diving into this project, we had no idea how complex a horse farm site could be. While maintaining simple and intuitive navigation, there's information on thousands of horses, with more than 100 pieces of stored information for each, plus unlimited photos and videos.

We worked closely with Iron Spring Farm's marketing consultant, Beckie LaSalle of Energize.info, to craft an information architecture that supports the idiosyncratic nature of the high-end dressage horse world. The result is a new site that presents a lot of information in an attractive format, all driven from a database that is easy for the farm's staff to update.

Horse owners who register with the site can submit horses for sale. Webvanta's membership system enables each horse owner to maintain their own horse listings, once approved by the site's moderators.

It's been a real pleasure to work on a site that is full of such incredible animals.

Please Join Us At Webvanta's Magical Open House Party!

Wed, 03 Apr 2013 23:26:39 GMT

To Our Bay Area Friends:
Come Party!

Do you love sushi, magic, Webvanta, raffles, afternoon drinks, websites and that new office smell?

Of course you do! So please join us at Webvanta’s Magical Open House Party in majestic downtown Sebastopol.

But wait! Don’t hop in your electric car yet. First, you’ll need our new address:

241 South Main Street, Sebastopol
Map and Directions

We’re right next to the West County Museum, across the street from the post office.

Also, you’ll need to know when the fun starts:

Thursday, April 18, 4 pm to 6 pm

Building great websites may seem like magic, but you know what’s really magical? The Real-life Magic throughout our open house, starring local magicians Ken Garr and Gregory Slater.

But wait, there’s more! We have tickets to a concert at the fantastic Green Music Center to give away. Just drop your card in our raffle bowl for a chance at a pair of ’em.

So bring your kids, or just the kid in you, and be ready for a mysterious and, quite possibly, hilarious good time.

If you can set aside the time to get offline... then make a bee line to sip some wine, talk development and design, and have a good ’ol fashion fun time at Webvanta’s Magical Open House Party!

We hope to see you there!

Are You Using Content-Empty Marketing for Content-Full Products?

Wed, 03 Apr 2013 03:51:53 GMT

Gerry McGovern has an interesting new post about content-empty vs. content-full brands and products.

If you're marketing soft drinks or beer, he notes, you don't really want to give details about the product; it's an emotional sell, with pictures of happy people and lots of information that is essentially unrelated to the actual product.

On the other hand, if you're selling doors and windows, building hardware, lumber, electronics, or cars, you have a content-full product, and you should have a content-full website. Visitors want to get details, and they can be put off by a lack of detail, or by too many pretty pictures and unrelated information.

So be careful in following the flashy examples of mass consumer websites. Pictures of happy people and other feel-good content aren't necessarily bad, but if you're selling products for which buyers want lots of detailed information, make sure your website does a good job of presenting that info and doesn't let the fluff get it the way of the substance.

Webvanta CMS Platform Adds Web App Capabilities

Tue, 26 Mar 2013 23:23:57 GMT

We've recently added a series of advanced capabilities to the Webvanta hosted CMS, to enable features that are more in the web-app domain—well beyond what you'd expect a CMS to provide.

Dynamic PDF Generation

PDF files are common on websites, because they provide the easiest way to deliver formatted-for-print electronic documents. Usually, they're created from Word, Excel, PowerPoint, or other desktop applications.

We've now added the capability for sites built on the Webvanta hosted CMS to create PDFs dynamically, like web pages, from database content.

JavaScript API for Database Access

The Webvanta CMS now has a powerful API for reading, writing, and modifying a site's database from JavaScript code. This makes it possible to build web pages that not only display information from the database, but can add to or modify information.

Modifications to the database via JavaScript are tightly restricted to keep sites secure. Visitors with user accounts (site members) can modify only database items to which they are connected.

Email and Ecommerce Integrations

We've also developed tight integrations with Foxycart, MailChimp, and Mandrill, so sites on the Webvanta CMS can provide ecommerce, email marketing, lead capture, and even generate transactional emails.

These include:

Tight integration with Foxycart for ecommerce, including single sign-on and transfer of purchase confirmation information to the Webvanta database.
Integration with MailChimp, so you can synchronize information (including opt-in confirmation) between a member database on a Webvanta site and a mailing database at MailChimp.
Ability to trigger sending of emails on a time (e.g., daily) or transactional basis, using the Mandrill service.

Automatic Background Processes

Most of the action on a website happens in direct response to visitor actions. But sometimes you need to have something happen automatically, such as sending your members a weekly email of new content on the site.

We can now set up processes to run every day, or other period, which use standard CMS pages to create database-driven content that can be automatically emailed.

Using These Advanced Features

These features require some setup by the Webvanta team, so they are not offered as self-service features. The Webvanta services team will do the setup for you, at a modest cost.

With these new features, you can use the Webvanta platform for sites that are really web apps, rather than just content presentation sites.

To inquire about these features, please schedule a free consultation. We'd love to learn more about what your business needs.

How and Why to Make Your Website Shine on Tablets

Wed, 13 Feb 2013 22:31:27 GMT

Does your website work well on tablets? If not, it's time to fix it. The good news is that it usually isn't difficult.

The Explosive Rise of Tablets

Tablets have become a huge part of the web-browsing landscape. In 2012, more than 120 million tablets were shipped — 52.5 million in the fourth quarter alone. Of these, Apple's various iPad models accounted for an impressive 22.9 million units in Q4.

To put these numbers in perspective, about 350 million PCs and laptops (not including tablets) were shipped worldwide in 2012. So tablets have not yet overtaken PCs, but they already account for more than a quarter of the combined PC and tablet market.

Furthermore, tablet sales continue to grow rapidly, with 4Q 2012 shipments an astonishing 75% higher than shipments in 4Q 2011. PC shipments, on the other hand, shrank by a few percent. IDC projects tablet shipments in 2013 to hit 172 million units. That's about the size of the entire PC market in 2004, which is not so long ago.

Making Your Website Work Well on Tablets

I hope the data above has convinced you that ignoring tablets is a bad idea. So now, what do you need to do?

As a first step, you just need to make sure that your desktop site is usable on a touch-screen device. You may also want to use responsive design to optimize the design for smaller screens, but that is secondary.

The critical issues that you must address are:

Don't depend on separate click and hover actions. On a touch screen, hover and click are the same thing. There are two places that sites commonly use hover events: to display pop-up boxes with additional information (often called tooltips), and to trigger drop-down menus. Make sure click works as well as hover, and that the design doesn't depend on hover and click triggering different actions.
Touch targets must be bigger than click targets, with more spacing between them. Drop-down menus often have items too close together for easy touching. Lists of links in a sidebar or footer are another common source of problems.
Eliminate Flash content. iPads won't display it at all. If you must have Flash content, make sure it is secondary, and not required to browse the site.
Make your lead-generation forms touch-friendly. With HTML5 elements, you can specify whether an input field is ordinary text, numeric information, or an email address. Tablets will show different touch-screen keyboards depending on the input type, easing the visitor's job (and increasing the number who will complete your form).
Check your font sizes. Tablets have smaller screens than typical desktop and notebook computers, so if you've designed to a fixed width, it will be shrunk down on a tablet. Make sure that the text is not too small to read, and the touch targets are big enough, when displayed on a 7-inch tablet such as the iPad Mini.

Implementation Strategies

The easiest way to support tablets is to make your desktop site tablet-friendly. Once you've done this, you don't necessarily need to distinguish between tablets and desktops.

You might not want to make your clickable items, as displayed on a PC, big enough to be good touch targets on a tablet. In this case, you can use CSS media queries or other techniques to deliver different styling to tablets.

If you are delivering different pages for mobile phones, you'll need to consider whether tablets should get the desktop version or the phone version. For 10-inch tablets, the desktop version is always preferable; for 7-inch tablets, it depends on the design.

You'll need to look carefully at how your implementation chooses whether to deliver the desktop or the mobile site. With typical solutions, an iPad Mini will show the desktop site, while many Android tablets will show the mobile site. Unfortunately, there's no easy, reliable way to distinguish an Android tablet from an Android phone, short of using an extensive list of model numbers to detect tablets. You (or your developer) will need to have a wide range of devices available for testing.

Further Optimization for Tablets

You may also want to use responsive design techniques to drop sidebars and other secondary content for smaller tablets. As the tablet audience grows, it becomes more compelling to put extra effort into delivering an optimal experience, not just a decent experience, for all tablet users.

The next level of optimization is to consider touch gestures. If you have a slideshow, for example, experienced tablet users expect to be able to swipe to move to the next photo.

If you expect repeat visitors, consider prompting users to bookmark your site and add an icon to their devices screen. You'll need to provide an appropriately-sized icon, and add some JavaScript to suggest that users bookmark the site.

Need Help?

We'd be glad to look at your site and give you a free assessment of its usability on tablets. Give Justin a call at 888.670.6793 ext. 4, or request a free consultation.

Reconsidering Motion in Web Page Elements

Wed, 23 Jan 2013 19:09:59 GMT

The top-of-page slideshow or carousel has become very common in modern web designs. We've built quite a few ourselves, such as for Post Carbon Institute and Green Music Center.

These design elements allow that precious top-of-page real estate to contain more content, by adding the time dimension so the same spot can contain multiple items. They also introduce some motion into the page, which makes it seem more attractive.

However, as a recent article by Jakob Nielsen, Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility, points out, they have their downside. Users might miss content, either because it moves away too quickly, or because they don't wait on the page long enough for it to show up. There is also the risk that users pay less attention if it looks too much like an ad.

In the Nielsen Norman Group study, the user was given the following task: "Does Siemens have any special deals on washing machines?". At the top of the page was a horizontal accordion, with a timed auto-advance from one section to the next. The first accordion section described a deal on washing machines. But as the article notes:

"Could the user answer the question? Given that the biggest item on the homepage — in both screen space and font size — is an offer of £100 off "selected Siemens appliances" next to a large photo of a washing machine, you would think so. ... Nonetheless, the user failed the task. After an extended visit to the website — including much time scrutinizing this homepage — the user gave up and assumed that Siemens didn't have any special deals for her."

Our advice is to tread carefully when adding motion, but not to avoid it entirely. Here's some suggested guidelines for making this type of design element most effective:

Limit the number of items in the sequence to no more than five, and ideally stick with three.
Don't advance too quickly.
Include controls (such as the common "row of dots") that can be clicked on to jump to a particular slide and stop the auto-advance.
Be sure that there is another easily found place where the content appears in a static form.
Support the "swipe" gesture for taking manual control over the advance on tablets and phones.

Auto-advancing carousels have their place as well. We humbly suggest that the company logos at the bottom of the Webvanta site are a good example. The idea is to show lots of customers, and it isn't critical that the user see any particular one. If they are interested, they can wait a few seconds and they'll all come by again.

Best Wishes & Holiday Hours from Webvanta

Thu, 20 Dec 2012 17:34:30 GMT

The holiday season is now upon us and we'd like to take this opportunity to thank you from the bottom of our Webvanta hearts. It is people like you who make our jobs a pleasure and keep our company successful.

Holiday Hours

In observance of the upcoming holidays, Webvanta will be closed for two four-day weekends:

Beginning at 5:00 p.m. (PST) on Friday, December 21, through 9:00 a.m. (PST) on Wednesday, December 26
Starting at 5:00 p.m. (PST) on Friday, December 28, through 9:00 a.m. (PST) on Wednesday, January 2.

We will continue to monitor support tickets over the holidays, so please continue to create tickets if you need help, and mark tickets as "Urgent" if you need a response during the holidays. Should you have any questions or concerns, feel free to email or call us prior to December 21st for customer assistance.

Holiday Wishes

To our customers and friends, we at Webvanta extend our best wishes for a joyous holiday season and prosperous new year. May the new year be filled with much joy, happiness and success.

Webvanta is Growing: Two Developer Openings

Wed, 14 Nov 2012 05:49:46 GMT

Are you an outstanding developer with a passion for delivering great web and mobile experiences?

Webvanta is growing, and we have two developer openings: one for a front-end developer, with a JavaScript and mobile focus, and another for a back-end developer with Ruby on Rails and server ops experience.

See our Jobs at Webvanta page for details.

We'll be moving into a great new office in early December, with room to grow. You could join us!

Optimizing Your Site for the iPad Mini and iPhone 5

Sun, 04 Nov 2012 03:38:15 GMT

In the past few months, Apple has rolled out an iPhone and an iPad with different screen sizes than previous devices.

If you haven't yet paid attention to making your site mobile-optimized, the popularity of these new devices, along with many other options from Apple and in the Android world, make it that much more important for you to do so.

Let's assume that you already have a mobile-optimized site. What do these new devices mean for your website?

iPhone 5's New Screen Size

The iPhone 5 introduces a taller screen size. The hardware display resolution is 1136 x 640, compared with 960 x 640 for the iPhone 4. The effective resolution is half of these numbers (due to the retina display), or 568 x 320 compared with 480 x 320 for the iPhone 4. So there's an effective height increase of 88 pixels.

Typically, the pages of your mobile site are all taller than this anyway, and users scroll to see more content. Since you will also have lots of visitors from Android phones with a variety of screen sizes, you can't make any assumptions about screen dimensions.

If you've used responsive design and haven't done any iPhone-specific tweaking, you're probably all set for the iPhone 5. If you have sized any pages to exactly fit an iPhone screen, there will be an 88-pixel blank space at the bottom on an iPhone 5. If you want a non-scrolling home page that fills the screen on a variety of devices (without blank space at the bottom of all but the smallest ones), you'll need to add code (using either CSS media queries or JavaScript) to resize some element(s) depending on the screen height.

Apple's New Maps App

The iPhone 5 also introduced Apple's new Maps app, replacing Google's Maps app. Older iPhones also get the new Maps app when they are upgraded to iOS 6.

You have no doubt heard the complaints about Apple's Maps app. In time, Apple's data and features will grow to match Google's, but today, they are behind.

In any case, any links to Google Maps on your website will still display Google maps on iOS 6 devices; they will just be shown in the browser-based version of Google Maps, instead of in the maps app. (Note that this is not true for native apps; if you have an iOS app that links out to the Maps app, it will now display the Apple Maps app.)

The iPad Mini: Just a Smaller iPad

While the iPhone screen got bigger, the iPad family gained a smaller version, the Mini.

Despite it's smaller size, the iPad Mini does not introduce a new effective screen size; like earlier iPads, it is 1024 x 768. It is physically smaller, of course, with a diagonal measurement of 7.9 inches, compared with 9.7 inches for earlier iPads. As a result, each pixel is smaller, but from an HTML rendering perspective, the devices are identical.

As a result, if your website works well on earlier iPads, it should be fine on the iPad mini. However, everything will be about 20% smaller. If you have small text that is barely readable on the iPad, it will be even harder to read on the iPad mini. And if you have menu items, buttons, or other touch targets that are hard to hit on an iPad, they will be a bit harder to hit on an iPad mini.

If you are using high-resolution images to optimize for the retina display on other recent iPads (which gives you twice as many physical pixels as effective pixels), that effort is wasted on the iPad Mini. The Mini's pixel density, at 163 pixels per inch, is greater than the effective density of the iPad (132 pixels per inch), but not as high as the physical pixel density of the Retina display (264 pixels per inch). The higher-resolution images won't hurt anything on the iPad Mini, but they won't help either.

Bottom Line: No Big Changes

If your website is well-designed for the iPhone and iPad, it's probably just fine for the iPhone 5 and iPad mini. If you have pages that are tuned to the height of the earlier iPhone screen, or if you have text or buttons that are already too small on a regular iPad, you may want to do some tweaking.

Still Wondering if You Need a Mobile Site? Check Out This Data

Fri, 28 Sep 2012 03:21:44 GMT

Google recently conducted a survey of consumers that asked about their use of mobile websites. Here's some key results:

67% of mobile users say that when they visit a mobile-friendly site, they’re more likely to buy a site’s product or service.
52% of users said that a bad mobile experience made them less likely to engage with a company.
48% said that if a site didn’t work well on their smartphones, it made them feel like the company didn’t care about their business.

There's nothing surprising here: people browsing the web on their phones are turned off when a site behaves poorly. Yet we still hear from site owners all the time who question the value of investing in mobile sites.

How many people are browsing the web using smartphones?

According to a April 2012 study by Pew Internet, more than half of American cell-phone owners (53%, representing 46% of all U.S. adults) now own a smartphone, and 90% of these smartphone owners use their phone to go online. Almost one-third of them (31%) say that they mostly go online using their cell phone.

The prolific Luke Wrobleski quotes a variety of statistics that show this trend is even more pronounced is some other countries. In the UK, 42% of adults who own a smartphone say this device is the most important one for accessing the Internet. In Africa, more than half of Internet users are exclusively on mobile.

Using a Single Database for a Mobile App and a Website

Sun, 23 Sep 2012 04:49:27 GMT

Often, a mobile app uses data that is also displayed on a website. For ease of administration, it's best to have all the information stored in one place and automatically made available wherever it is needed.

If a mobile app must be online to view the content, you can use HTML from the website to deliver the content through the app as well. But if you want to store the data on the phone, or do anything with the data other than displaying it, using a format called JSON (JavaScript Object Notation) is often the best approach. It provides a compact representation that is easily read by the app.

It's best if the app can store all its data on the phone or tablet, so it doesn't require Internet connectivity. At the same time, you'd like the data to be updated whenever new data is available, and you don't want users to have to update the app just to get new data.

You can get the best of both worlds using the following approach:

Include a "starter" set of data as part of the app
Provide an "update" file from the server that includes any changes that occurred since the last build of the app
When the app is launched (or wakes), if it has Internet connectivity at the time, fetch the update file and store it on the device

Tour the Finger Lakes Site and App

We've used this approach for an app called Tour the Finger Lakes, which provides curated tours of the Finger Lakes region of New York, based on the user's starting point, interests, and desired trip length.

All the content is stored in a database on a Webvanta site, and a subset of the information is available as part of the Tour the Finger Lakes site.

When the user installs the app (for iPhone or iPad) from the AppStore, it includes all the data that was current as of when that version of the app was created.

Each time the app starts, it checks for updates and merges them in with the stored data. The app can run without an Internet connection, using the data it has already stored.

The staff at the company that provides the app, Culinart Media, can update the information at any time by logging in to the website's control panel. Updates are immediately reflected on the website, and are also added to each user's installed copy of the app the next time the app is launched (if the phone or tablet has an Internet connection at the time).

We've found this to be a flexible and powerful approach that gives app users the best of both worlds: access without requiring a net connection, and content that is updated when new information is available.

Happy 5th Anniversary, iPhone

Thu, 05 Jul 2012 15:54:17 GMT

With the incessant, rapid change we all deal with daily in order to work in this crazy, wonderful industry, it is sometimes hard to keep a clear perspective on just how big a change we have lived through in recent years.

Anniversaries, such as last week's 5th anniversary of the introduction of the iPhone, provide a great excuse for retrospection.

Just five years ago, in the pre-iPhone era, the mobile phone world was a very different place. The iPhone triggered a massive, seismic shift in the mobile phone landscape, from carrier-controlled phones with lousy software and pathetic web capabilities to the smartphones we enjoy today.

The Bad Old Days of Carrier Control

In the pre-iPhone world, carriers — the companies that provide cell service — held the cell-phone hardware and software universe in a death grip. Afraid of losing control and driven by goals of maximum monthly fees and minimum customer support requirements, carriers had minimal interest in making mobile devices into smartphones. Just getting an app installed on a phone required a tortuous, usually unsuccessful process of working first with the phone manufacturer, and then with the carriers.

Apple wrested control from the carriers by producing such a superior device that the carriers were forced to accept it on Apple's terms. The carriers' role was reduced to that of hardware distribution and wireless connectivity, leaving the device and software innovation to Apple.

Growing Up Into a Platform

We are now accustomed to thinking of the iPhone as a platform, but it wasn't always that way.

The early iPhones were catapulted to success by the already soaring popularity of the iPod, making the music player Apple's Trojan horse for attacking the phone market. The early iPhones were great music and video players, made phone-based web browsing an enjoyable experience for the first time, and, yes, they were decent phones too! It was a powerful combination that led Apple to sell 218 million iPhones in five years.

A year after the iPhone's launch, the App Store made its debut, creating the biggest software market ever, at least in terms of unit volume, and the emergence of the iPad in 2010 made iOS into a broader platform. Apple says it has more than 650,000 apps in the store and that more than 30 billion have been downloaded—that's more than 4 apps for every man, woman, and child on earth.

iOS vs. Android

Google, which seemed reasonably aligned with Apple five years ago, has turned into an arch-competitor with the Android platform. While Microsoft has had little success in the phone and tablet space, Google is playing Microsoft's role as the owner of a platform that hundreds of vendors can build upon.

Devices running Android now make up a significantly larger market than iOS devices, but no single Android vendor approaches the revenue that Apple earns from iOS devices. Now Google is selling Android devices under its own brand, making the company even more of a direct challenger to Apple.

A Complete Restructuring

The complete reshaping of the mobile device ecosystem in the past five years, with most of the parties who were leaders at that time being reduced to near irrelevance today, is truly stunning.

Thanks to the tidal wave of change that the iPhone triggered five years ago, we now have the opportunity to extend the web from something used primarily on desktops, to being an intimate part of the fabric of nearly everyone's lives through devices that the majority of people now carry. It is an extraordinary time, and the next five years are all but certain to see equally great changes.

So far, all iPhones have the same screen size (despite different pixel densities). If the rumors can be believed, we'll soon see both larger iPhones and smaller iPads. In time, I hope we see larger iPads as well.

It is less clear how the behavior of the devices will change. With Siri, we see the beginnings of the phone acting as an automated personal assistant—a trend that is likely to continue. Remember the knowledge navigator? I think we're just about there.

Optimizing Your Designs for Humans

Fri, 22 Jun 2012 16:54:55 GMT

In creating a great website or app, you have a diverse set of guidelines and considerations to deal with. Despite the wide variety of issues, opinions, and platforms, there is one underlying constant you can depend on (we hope): the user is a human being.

If you'd like to understand how human perception should inform your design, I highly recommend Jeff Johnson's new book, Designing with the Mind in Mind.

The book is a fascinating blend of cognitive science and user interface design. It doesn't present UI principles in the usual sense, but rather illustrates principles of human perception, and how to use that knowledge to improve your designs.

Visual perception is an amazing thing. It's all too easy to think of our eyes as a sort of digital camera, with an array of pixels at high density. But it's really something very different, with a tiny spot in the center with very high resolution, and then quite low-resolution sensors for areas even slightly off-center. This fact, combined with the ways visual perception is influenced by memory and expectations, has enormous implications for user interface design, and this book explains them lucidly.

Webvanta Platform Upgrade: Flexible URL Generation

Thu, 21 Jun 2012 18:44:29 GMT

In any system that uses database-driven pages, you need to pass database identifiers along with the URLs. For example, suppose you have a database of products. In typical (non-Webvanta) systems, you'd see URLs like:

www.mycompany.com/product.asp?pid=123456

In this case, a URL parameter is being used to pass a product identifier code to the page.

In the Webvanta system, we've always incorporated these sorts of identifiers into the URL itself, which is better for caching, and also added a URL-safe version of the item name after the ID. This results in URL strings like:

www.mycompany.com/product/123456-baby-stroller

We've now introduced several features that make URL generation much more flexible, so you can get rid of the item ID entirely as long as the product names are unique. Now, for example, that URL can be:

www.mycompany.com/product/baby-stroller

In addition, you can now pass any number of variables into a page, and still have that page be fully cacheable (and appear to be a static page from a robot's perspective). So now you can have URLs like:

www.mycompany.com/products/retail/furniture

And have the values "retail" and "furniture" passed to the page as variables, which you can then use to select the appropriate content.

We've published three new support articles that explain all the details:

These features are available immediately for all new sites. If you want to use the new features on an existing site, it may need an upgrade; please create a ticket if this applies to you.

In July, we'll be updating our SmartThemes to use the new approach.

Mobile Will Soon Be One-Third of Web Traffic

Thu, 07 Jun 2012 21:53:27 GMT

This is going to be an explosive year for mobile web growth, especially for businesses like restaurants that people are selecting while they are on the go.

A prominent restaurant group in Atlanta reportedly now gets more than 30% of its web traffic from mobile devices. This is more than twice the level of one year ago.

According to another report, mobile browsers now account for 20% of all web traffic in North America. About one-third of that traffic is tablets, so phones represent about 15% of all traffic.

According to Nielsen, two-thirds of Americans aged 24 to 35 own a smartphone — and that was back in January.

A study from Pew Internet reports that nearly half (46%) of American adults are smartphone owners as of February 2012, an increase of 11 percentage points in 9 months. Smartphones are now completely mainstream.

There can be little doubt that these figures will increase dramatically in the next 12 months. The mobile tsunami is growing.

For a restaurant (and most other retail businesses), having a good mobile web site may have been a luxury a year ago. Today, it is an essential element of any serious marketing strategy. When people are looking for someplace to eat, and are researching using their phone, if a restaurant's website isn't mobile optimized, that restaurant is likely to be ignored.

High Tech (Live): the incredible depth of simple experiences

Fri, 01 Jun 2012 02:05:03 GMT

Back in April, I gave a talk at O'Reilly's Ignite event in my hometown of Sebastopol, California (also O'Reilly's hometown). I created a "studio" version of the talk and posted it then, since it takes a while for the live videos to get edited (O'Reilly takes the time to edit in the slides, so the video goes back and forth between the slide images and the video of the presenter).

The live version has now been posted, and here it is:

It's interesting to look at the differences between the two versions of the talk. The live version does not use builds in the slides, and of course it was a one-shot deal, so there are a couple blunders. The studio version is more polished, I was able to fix the mistakes, and the slides are more animated.

The studio version lacks the energy of the live one, however. Try as I might, I have not been able to create a similar delivery when recording in a room by myself. It's curious how much the presence of the audience affects me. I aspire to being able to imagine the audience, and present as if there was one, when recording by myself—but I'm not there yet.

North Bay Web Design Conference Coming Up

Sun, 06 May 2012 17:53:09 GMT

Webvanta is pleased to be a sponsor of the North Bay Web Design Conference, coming up May 20 in Rohnert Park, CA.

Last year, we created this event to provide a focal point for the web community in the north bay, including not only Sonoma County but also Marin and Napa.

This year, Joshua Simmons and a number of his colleagues are running the event. They've put together a great program.

This year's event will be held on May 20, at the same venue as last year: the Sonoma Mountain Village Event Center.

I will be giving a presentation at the conference on taking advantage of the mobile opportunity, and also co-chairing panels on designer/developer workflow and tools.

Outsmarting Google: an Excellent SEO Book

Fri, 27 Apr 2012 23:51:28 GMT

Among all the web-related disciplines, search engine optimization (SEO) surely has the greatest volume of conflicting information. In a field filled with everything from bad advice and outdated information to outright scams, it is hard to know what to believe.

We've just read one of the newer books on the topic, Outsmarting Google by Evan Bailyn, and we recommend it highly.

Evan doesn't shy away from giving specific advice, and his opinions seem solid. He's done the experimentation and had the experience to be able to make meaningful suggestions about things that just aren't knowable from the little that Google discloses, without going into snake-oil or black-hat territory.

The book is also quite up-to-date, covering the differences between the Bing/Yahoo and Google algorithms and other recent developments.

If you're looking to improve your SEO knowledge, this book is well worth your time.

The Mobile + Social Boom, in Hard Numbers

Tue, 24 Apr 2012 22:12:41 GMT

Financial reports for first-quarter 2012 have started coming out, and there are some impressive unit numbers embedded in them.

47 Million iOS Devices in Q1

Apple shipped 35 million iPhones, 12 million iPads, and 4 million Macs. This makes 47 million iOS devices shipped in the quarter, which comes to 188 million iOS devices per year, if the rate doesn’t go up over the course of the year (which it almost surely will).

Apple will soon be shipping about 200 million iOS devices per year. That is an astounding number (and the heart of Apple’s financial health). To put it in context, consider the IBM PC and all the PC-compatibles, from Compaq, Dell, and countless other companies. This is, so far, the most successful computing platform of all time, in terms of unit volume.

25 Years of PC Growth to Get to 200 Million/Year

The IBM PC was introduced in 1981. It took 25 years, until 2006, for shipments to hit 200 million per year! That’s where iOS is today.

I haven’t seen consolidated Android shipment data for 1Q12 yet, but it is clear that as a platform, worldwide, it is growing even faster, and is larger, than iOS. It won’t be long before iOS + Android ships more than half a billion units a year.

Worldwide PC shipments were 89 million units in 1Q12, for a run rate of 356 million/year. iOS + Android will, this year, ship roughly the same number of units as the entire PC industry.

Starting from a roughly equal annual-shipment level today, mobile platforms are growing rapidly, while PC growth is leveling off. As a result, within a few years there will be vastly more mobile devices than PCs.

Facebook’s “Off” Quarter: 900 Million Monthly Users

Facebook’s profits were down, but the size of the user base is awesome. In the first quarter of 2012, they had 526 million daily active users (901 million monthly active users). There were 488 million users on mobile devices.

To have achieved daily use by a user base larger than the entire population of the U.S. is a stunning achievement.

Mobile + Social Tsunami

These facts should put an end to any lingering doubt you may have about the importance of mobile and social. These are massive trends that are both larger and much faster growing than anything the world has ever seen.

Green Music Center Website Debuts

Fri, 20 Apr 2012 16:47:58 GMT

We recently launched a new site for the Green Music Center, a world-class performing hall on the Sonoma State campus that has been more than a decade in development. The 1400-seat hall, modeled after the Seiji Ozawa Hall at Tanglewood, is acoustically designed to rival great venues such as Boston Symphony Hall and Vienna Musikvereinssaal.

About $120 million has been invested in the facility, including $62 million from private donations. Don and Maureen Green started the project with a $10 million donation in 1996. Former Citigroup CEO "Sandy" Weill and his wife Joan donated $12 million near the end of the project, giving the hall its formal name of the Joan and Sanford I. Weill Hall.

The first concerts will be held in September, with a full lineup running through Spring 2013. Performers range from bluegrass artists Alison Krauss and Union Station and soprano Karina Gauvin to the San Francisco Symphony and the Santa Rosa Symphony. Tickets are on sale now, by the series only, with individual tickets available in July.

Yo-Yo Ma will be performing in January 2013, but if you don't have tickets, it's already too late: the concert sold out in less than three weeks when tickets went on sale in March.

About the Site

The website provides a variety of information for visitors, including details about the upcoming concerts and the ability to purchase tickets. The Webvanta database system organizes all the information about performers and performances, making it easy for music center staff to update the content while preserving the design.

Ginny Laughlin of Athena Design created the visual design and user interface, and worked in partnership with Webvanta to deliver the site.

Ryan Ernst, the Green Music Center's director of marketing, commented, “When it came time for the Green Music Center to switch gears — from ongoing construction project, to up and coming performing arts venue in need of a sophisticated website — we turned to Webvanta. They took our ideas and suggestions, and created an end-product that is tailor-fit to our needs. The Webvanta team has worked incredibly hard to meet our often challenging deadlines, and they always do so with a pleasant disposition. They have helped us to establish a brand as we enter our Inaugural Season, in addition to creating a lovely website that meets all of our technical needs. We always prefer to support local businesses at the Green Music Center, but this time, it was really Webvanta who was supporting us!”

The Webvanta platform makes a great solution for performing arts halls, organizations, and any sort of music or theater venue. Here's some other examples of Webvanta sites in this area:

Responsive Design is Not the Only Good Answer

Sun, 22 Apr 2012 05:36:13 GMT

We are big believers in the importance of mobile devices. But I am troubled by the degree to which responsive design is preached as the only modern approach. Just as clients (who generally don’t know what it means) sometimes ask for “HTML5”, they are now asking for “a responsive design” when what they need is a low-cost way to have a good mobile site. There’s more than one way to skin that cat.

Recently, StatCounter, an analytics service that also publishes browser statistics, announced that the 1024-pixel-wide screen had lost its spot as the most common resolution, with 1366 x 768 taking the crown (thanks to the prevalence of netbooks).

In response, .net magazine published an article titled Browser screen resolution stats rile devs, quoting Jeffrey Zeldman as saying, “The most popular size is every size. If you’re not thinking in a mobile-first, content-first way, if you’re not planning an adaptive or responsive redesign, if you still think we have a standard canvas that ‘everybody’ uses, and if you can’t feel the hot breath of mobile singeing the hairs on the back of your neck, you don’t deserve to be a designer, or a consultant, or whatever these people think they are.”

I’m a great fan of Jeffrey’s (see the short interview I did with him a year ago). His religious fervor about web standards made a great contribution to the web design world, and the various Apart enterprises he leads (A List Apart, An Event Apart, and A Book Apart) all produce great stuff.

Is Responsive Design the Only True Path?

On this topic, however, I must disagree with Jeffrey and the other members of the “every site should use responsive design” club.

First, statistics are just statistics, and it is interesting and useful to know what the most common display size is. To attack the creators of the statistics is just silly.

More significantly, responsive design is not the only thoughtful approach to supporting mobile devices. I don’t disagree, of course, that there’s an increasingly broad range of devices and screen sizes, and that quality websites should adapt appropriately.

There is a very different character to a website on a phone-size screen, however, vs. a tablet or desktop screen. With so much less real estate, you need to think differently about how you lay out content, and about what you put on each page. It’s also important to think about the different needs of people who are on the go, even though people also use their phones when they are sitting on their couch.

To think of phones and desktop screens as part of a continuum, as responsive design requires, unnecessarily constrains the design of the phone experience. There are cases where this works fine, but many others where it creates more pain than it alleviates.

There is no single answer for every context. For the kinds of sites we create, which are typically midrange projects with lots of content, we have come to prefer having one set of HTML pages for phones, and another set for tablets and desktops.

With this approach, we can better optimize the phone experience, for a variety of reasons:

We can think from scratch about how to optimize the phone and desktop/tablet experience, without the constraint of deriving one from the other.
We can use different CSS and JavaScript frameworks for the mobile experience. For example, we find jQuery Mobile to be a great framework for building effective mobile sites quickly, but we wouldn’t use it for a desktop site.
We can easily provide different versions of text, where appropriate. The home-page intro for a mobile site, for example, should be much shorter than the corresponding thing on a desktop site.
Since we store most content in a database, it is easy to use the same content on both the mobile and the desktop sites, yet use different HTML markup where appropriate.

We’ve incorporated device detection into our server-side code, so we can easily deliver one set of pages to desktop/tablet devices and another to mobile phones. (This can also be done in JavaScript if you don’t have access to modifying the server configuration.)

Another benefit of this approach is that it allows us to serve customers who don’t want to redo their desktop site right now, but want a better mobile experience. Adding a jQuery Mobile site for mobile is much easier that trying to make an existing, fixed-width design into a responsive design. “Mobile First” can be a great strategy when you can do it, but for the majority of our projects, it just doesn’t match the clients’ situation and priorities.

So I find myself agreeing with Jakob Nielsen, in this case; his recent post Mobile Site vs. Full Site argues for this approach from a user experience perspective.

Does “Most Common Screen Size” Matter?

Absolutely. In some cases, such as for a photo site with a big grid of thumbnails, having a fluid page design that fills all of the available space offers a compelling benefit. But for most sites, it is difficult to create a layout that works well for a very wide window, because line lengths become too long, the relationships between text and graphics get out of whack, and there often just isn’t enough content available to fill the width.

It therefore makes sense, for most sites, to pick a maximum width. Today, most sites have chosen something around 1000 pixels, because of the prevalence of 1024-pixel-wide screens. The data now suggests that increasing this to 1300 pixels or so may make sense. You can design for 1920-pixels-wide if you want to optimize the experience for that 5% of the users, but for most sites it just isn’t worth it—it typically won’t deliver a better user experience than a fixed-width page.

For a fixed-width site, the minimum width and the maximum width are the same. This remains a reasonable approach if your budget is small; there’s no getting away from the reality that creating a comparable-quality fluid or responsive design is more work, and it may not yield much near-term benefit.

A better approach, however, is to use responsive design to enable your “desktop” layout to adapt to a modest range of widths, perhaps 768 to 1350 pixels.

Dealing with Tablets

If you don’t depend on hover events and keep your click targets large and far apart, this same design will work well for tablets. Or, you may want to use responsive design (i.e., media queries) to adapt the design for touch-screen devices, so you can make your click targets smaller than your touch targets.

Mobile sites must, of course, use fluid designs, so they can adapt to phones with different screen sizes and to landscape and portrait orientations. This does not require responsive design techniques, since the range of sizes is modest. (Phone screens aren't going to get much bigger, because you need to be able to hold a phone in one hand.)

Small (7-inch) tablets, such as the Kindle Fire, occupy a borderland that is extra work to serve optimally. We typically serve all tablets with the desktop site, but there is an argument that 7-inch tablets would do better with the mobile site. If using responsive design for the desktop/tablet site, it may be worth adding another breakpoint to deliver an optimized design for small tablets.

The Best of Both Worlds

With a responsive design covering the tablet/desktop range, and a separate design for phones, you have the best of both worlds: true optimization for phones, and good support for a wide range of tablets and desktops.

You might think that this is more work and more expensive than covering the entire range with a responsive design, but we have found that generally not to be the case. The narrower the range of sizes you are worrying about for the responsive design, the easier it is to do a first-rate job.

Mobile (i.e., phone) sites are, in many ways, easier to build than desktop sites, when you build them separately. All the pages are much simpler. And because the sites need to be more functional than design-driven, frameworks and libraries can take you a long way quickly. We can build an effective mobile site using jQuery Mobile in less time than it would take to extend a responsive design to cover mobile phones as well. The end result is a better user experience at a lower cost.