Category Archives: Design

Friday, August 19^th marked yet another Brew Day at Bottlecap. But it wasn’t just any Brew Day; this one had a little more structure from the outset: a focus on our brand, our process and our work.

The goal of every Brew Day is simple: spend eight hours or so working on those little things that will help us learn and grow – either as individuals or as a company.

Gabe (left) and Elliott from The SuperGroup talk about Microsoft's Kinect platform.

Easier said than done.

Most of us made it until about 2p when the demands of our clients pulled us away from our pursuit of innovation. Some folks never even got started. And that’s something we’ll continue to work on each month, allowing each member of the team the freedom to step away from the day-to-day demands of agency life in order to work on projects that draw from each individual’s professional passion.

Still, we were able to accomplish some exciting things in a somewhat limited timeframe:

• One of our developers worked on an automated deployment feature that would allow us to automatically launch websites at a certain date and time. It may not sound like much to you, but when’s the last time you had to leave a family picnic because you had to push a website to a production environment?
• Another developer worked on a proprietary bug-tracking tool that will allow us to keep our QA efforts separate from our project management system. Clear paths of communication + better issue resolution tracking = win.
• Our Traffic Manager collaborated with our Creative Manager to talk through our existing traffic process and see if we could streamline how information is passed from resource to resource.
• We brought in our friends from The SuperGroup to discuss cutting-edge technologies, like Microsoft’s Kinect platform, and how they could be used in practical marketing applications today.
• We researched solutions that would allow for automatic browser caching, as well as cross-site performance reporting … but not at the same time.
• Our senior designer created an app that will allow our designers to turn a series of screenshots into an interactive, online proof that will eventually be enhanced to track comments/notes.

And we attempted to document the whole thing on Twitter, too. It’s our goal to make Brew Day an inclusive experience, one which inspires not just the people participating at Bottlecap, but others who catch a glimpse of what’s going on via blog entries, tweets, and Facebook posts.

And what should only be seen as a harbinger of things to come, Team Bottlecap easily handled the mustachioed men from Team Scoutmob in some post-Brew Day bocce at our favorite after-work establishment.

It’s still early, but we’re getting there. And we’re going to enjoy every second of the ride.

Recently Adobe released the latest version of their Creative Suite software, CS5. There were a ton of upgrades and enhancements, but the one that is absolutely mind-boggling is the “Content-Aware Fill”.

It took 8 years to put a man on the moon after President Kennedy challenged the nation to put a man on the moon before the end of the decade. But with CS5 it took less than 2 minutes to take the man off the moon.

For other videos of the “Content-Aware Fill” and some of the other new enhancements to CS5 check out this article.

One of the biggest challenges in meeting design needs when developing a web site is dealing with the lack of web-safe fonts. Sure, there’s been ways to work around this problem, such as using sIFR, which embeds a small flash video for EVERY LETTER that needs to be displayed in the non-web-safe font. As you could imagine, sIFR takes quite a toll on a site’s performance and speed, plus its painfully tedious to get setup from a development standpoint.

Well, for the past week the web development community has been buzzing about the new, viable solution to this problem. Google has started a directory of open-source fonts that can be embedded on any page. This library of fonts is likely to grow with time, as font designers continue to donate fonts to the cause. Not only does this solution work well with browsers dating back to IE 6, but having the font hosted by Google’s servers increases overall site performance. Not to mention how easy it is to include on a web page.

If you’d like to browse the font directory, you can find it here.

In the UX field, it’s essential to dissect what exactly makes certain devices user friendly as opposed to those that are not intuitive and confusing. In this case, I’m talking about the OS that Apple has put into place with their Apple mobile devices. What makes them so easy to use? Why can someone  who has never seen an iPhone, (or iPad for that matter) pick it up and easily navigate through the system?

Well, it all begins with options. In the user experience field it is understood that the more options a user has at one given time, the likelihood of them becoming confused increases exponentially. Certain tasks can become daunting if they’re overloaded with options or if the user interface isn’t easily understood. The problem is, as devices become increasingly complex with options, whether it be the addition of the internet, email, text messages, or apps (the list goes on…and will always go on) the user interface and experience of these devices becomes more complex to interact with and pick up for the first time. This is where Apple products shine compared to its competitors…

At any given time on an Apple product, you are only given a few options (more often only one) and a back button (the home button at the bottom). This keeps information organized and easy to navigate without confusing the user. Instead of some devices that give you drop down menus all over the place, Apple instead creates processes that usually only have two options: Move forward into the action or use the home button to go back to the main screen. This simplifies tasks into easily dissectible processes without confusing the user. Other mobile devices try to combine tasks but instead of making the user experience easier, it’s daunting and confusing to someone who’s never used the device.

Take the video below for example. A two and a half year old is easily navigating the iPad OS with intuitive hand gestures and the simplified ‘forward or back’ control system. Entering any type of action isn’t as daunting when you know that with one touch of a button, you’re back where you originally started. This cannot be said with most of the competitor’s handheld devices. For example, although a Blackberry has an abundant amount of options, they were often nestled into some dropdown that make them difficult to find. It shouldn’t be a matter of remembering where to find a particular option but instead, having it presented to you only when you need it.

Here’s to keeping it simple…if only other companies in this world would follow suit, it might just be a much more intuitive place.

A 2.5 Year-Old Has A First Encounter with An iPad

We have a saying around here at the Cap, “Make it Awesome.”

It doesn’t matter if we’re working on a simple brochure site or a full-blown system, at the end of every dev meeting we leave with the parting message “Make it Awesome!”  It’s a belief that resounds through every project we work on and I feel like we deliver on that.  While we can’t promise Awesomeness as a deliverable, it’s definitely what we aim for.

So know that whenever you work with Bottlecap, our aim is to make your idea real and to make your idea awesome.

We look forward to making your next big idea a reality.

In today’s world of 20+ inch monitor’s and HD resolutions,  it becomes a greater challenge to determine the optimal resolution to develop a website for .   An additional challenge to this is the growing number of mobile devices with web access, such as smartphones and netbooks.

One of the main considerations for in deciding what resolution to design at is to take note of the core demographics of the site.  By analyzing statistics of traffic to similar websites, it is possible to see the range of resolution that the majority of users will be viewing a particular site with.

A  solution for this problem is to provide multiple stylesheets for different types types of devices. As a developers, by utilizing the “handheld” stylesheet media type, we are able to specify which stylesheet should be applied to a certain page when it is being requested.  This allows us to provide sites that are easier to navigate on mobile devices, while still providing the full experience via a standard web browser, all without having to provide a seperate URL address for a “mobile version”.

Another alternative is the development of better mobile browsers which are able to scale down full resolution websites, however this will never be as good, in terms of usability, as a specially designed stylesheet.

So what resolution should your site be intended for?  It really depends on a number of factors, but it is becoming increasingly important to keep mobile devices in mind especially if you’re core audience is a young and technologically savvy crowd.

While Flash may at times be a very effective tool in web design (when used correctly), many times it’s abused and fails to add value to the website it’s used in. Flash could even detract from the website’s usability. Here are a few reasons why:

1. Flash distracts from site’s core values, such as the actual content
   Flash content tends to be created once and then left alone. Frequently updating content is key to generating traffic. Also, human awareness is usually dominated by anything that moves, so Flash could distract users from the most important part of your site, the content!  Human-computer interaction expert, Dr. Jakob Nielsen,  points this out in his Guidelines for Multimedia on the Web .  “Never include a permanently moving animation on a web page since it will make it very hard for your users to concentrate on reading the text. “
2. Flash reduces accessibility for users with disabilities.
   For one thing, users can’ t zoom in on text appearing in flash videos. This can be annoying for your older visitors or those with vision problems. Also, screen readers aren’t able to decipher flash embedded on a page. Plus, a site that depends heavily on Flash forces users to install the Flash Player in their browser if they haven’t already done so.
3. Flash encourages design abuse
   Just because we can make things move doesn’t mean we should. Flash usually encourages this “gratuitous animation”, which as mentioned in the first point, can easily distract users.  Some Flash designers also tend to decrease user interactivity (which is what Flash is good for in the first place!) by “reverting to presentation styles that resemble television” (Nielsen). This is a big no-no in web design usability.
4. Flash is not search engine friendly.
   This isn’t necessarily a usability issue, but its still a huge drawback to using Flash. SEO is usually a vital part to the success of a website.

Flash development isn’t completely evil and has its place in web development. Discretion is necessary to carefully balance the pros and cons of Flash to create the best experience for your users.

Software developers realized years ago that we were solving the same problems over and over.  In order to keep from reinventing the wheel on each new project, programmers began developing self-contained, reusable ways of structuring sofware to solve common problems.  They dubbed them Design Patterns.

Ok, ok.  So that’s boring.  But what’s not boring is that some really smart user interface designers have started to take the design pattern idea into the realm of user interfaces.  I’ve found two websites that have catelogs of proven design patterns waiting to be used.  Some of them are simplistic, such as pagination and breadcrumbs, while some are more complex, but each solution has been time tested to solve common UI problems, ensuring a great user experience.

Check it out!

Infragistics Quince: http://quince.infragistics.com/

Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/

User Experience, as defined by Wikipedia, is a term used to describe the overarching experience a person has as a result of their interactions with a particular product or service, its delivery, and related artifacts, according to their design.

But I would argue to say that it is not only about the user it is also about the business.  If the user has a great experience, but the business has not met any of its goals than the project has not done its job.   So how do we approach this thing called User Experience?

As a development company, we are always trying to find the best way to create our projects utilizing the latest technologies and methodologies.  Though when exploring our options, we always have to keep the User Experience in mind.  A site can be the most amazing piece of art on the back and front-end, but if the user can’t find what they’re looking for or if their interaction with the site is difficult, then you have not done your job and you won’t have a successful project.

When Bottlecap is developing a site, whether it is brochure site with a simple CMS or if it’s a full-blown SaaS application we always take the mindset that the user needs to be able to understand the system intuitively and without a 300 page user guide.  And we always make the effort to understand our client’s goals so that the User Experience for both the business and the end-user is a success.

User Experience, isn’t just the responsibility of one member of the team, it’s a group effort between the designers, the developers and the client and quite honestly everyone that is going to be involved with the project.

Here at bottlecap, we spend a lot of time building web forms for all kinds of projects. Personally, I don’t have anything against forms. The information architect in me enjoys the challenge of organizing and validating a user’s input in a way that makes sense to them, and ensuring that the information received is accurate. As an avid fan of digital services and generally impatient person, another part of me view forms a bit differently.

I recently read an article by Luke Wroblewski (author of Web Form Design: Filling in the Blanks) titled Sign Up Forms Must Die. It really got me thinking about the concept of gradual engagement. Why do websites spend so much time and money marketing their “revolutionary” web services, and then hide the experience behind a ten step signup process. If the service is a good fit for a user, the experience itself should be the strongest selling point.

Gradual Engagement bridges the gap between offering a fully functional service (without hasseling the user at all), and collecting the vital information needed to successfully market and maintain a web service. Basically, information is collected during use of the service, or when the user wishes to complete the process (i.e. publish a video).

It’s kind of like dating, the user gets to know the service without having to make a major commitment. This leads to more exposure for the web service and better first impressions.