Archive for the ‘Articles’ Category

Source Control, AKA something we do for every website that our clients don’t know about

Monday, July 12th, 2010

If you’re one of our clients, you’ve probably never seen these icons. That’s OK, don’t worry about it. They relate to a techy thing called “source control.” We practice source control on all of our projects to make sure that your code doesn’t get overwritten as we collaborate to make your website awesome. Slice of Lime having a green logo and these icons being green is a pure coincidence…seriously.

While we don’t always use the exact services above (Beanstalk, Versions, and Coda are the 3 icons), we do always implement source control. As a result, we’ve never had to tell a client, “um, all of your work just got overwritten and we need to start over from the beginning.” Source control allows multiple people to contribute to your project in parallel without worrying about writing over each other’s work. Whenever we happen to work on the same file at the same time, our source control system shows us when this happens and allows us to merge our code together. In this way, even changes two people want to make on the same file can happen in tandem.

What this gives our clients is a seriously efficient process. On top of a speedy delivery, your code is always backed up in case we ever need to go back in time to resurrect a version of your site that got modified along the way.

Pretty neat, right? Yeah, we think so, too. Just thought we’d share one more thing that we do on every project that our clients usually don’t even know about.

Proof! A Slice of Lime In-House Project!

Friday, March 20th, 2009

Hi there! Richard here, proud to announce the launch of Proof, our in-house web-application that allows us to easily upload and organize information architecture and design comps for our clients.

This has been a need for a long time, and thanks to Jeff for planting the idea, Travis for the design, Lindsay and the rest of the team for valuable input, we got it built. Before this tool, a designer would have to manually create thumbnails, HTML pages, and upload them all to the server which could take a half hour or more. Now our designers can add a whole round worth of comps in just a few minutes.

The client also benefits greatly from this, by having a much cleaner, consistent experience when browsing through their comps. A client can peruse their comps arranged by project and round, and open full-size comp images in multiple tabs, thereby allowing them to compare comps side by side. And since this tool is a user-based system, with built-in authentication, clients can rest assured knowing that their designs are safe from viewing by others.

Wordcamp Denver Rehash

Monday, March 2nd, 2009

wordcampspeakingpic

Slice of Lime had a great time sponsoring Wordcamp Denver this year. There was a great mix of designers and developers thirsty to learn more about everything Wordpress.

Slice of Lime’s CEO, Kevin Menzie, spoke on the Web Design Panel in the morning (see picture above) right after a great keynote by Matt Mullenweg.

The morning session concluded with a talk on the Open Source Community and Ben Huh describing his Wordpress driven business, I Can Has Cheezburger. Ben’s site features pictures of cats with funny captions – it gets more traffic than any other Wordpress site out there. Go figure.

From there, the conference broke into two tracks; Blogger and Technology. We spent our time hopping from one track to the next, checking out Crowd Favorite’s Wordpress framework and a workshop on building custom plug-ins and then running across the street to see Micah’s talk on promoting your personal brand.

An after party followed at the Paramount Cafe where many drinks were had courtesy of Flying Dog Brewery.

Overall, we’d suggest checking out the next Wordcamp in your area. The day flew by and we thoroughly enjoyed learning some new Wordpress techniques and meeting inspiring people.

Podcamp Boulder Rehash

Monday, January 26th, 2009

Slice of Lime had a great time sponsoring Podcamp Boulder this past weekend. This was an “un-conference”, meaning that the agenda was completely made up the night before the conference by the very people that would be attending. The picture below shows all of the ideas that were thrown up on the board on what people wanted to learn or teach. Ideas ranged from iPhone apps to video podcasting.

Planning Podcamp Boulder

Next we set the lose agenda for the next day, fully acknowledging that things would shift. Jeremy Tanner did an excellent job facilitating the entire event. This picture shows us setting the calendar – 4 events would be going on simultaneously each half hour or hour.

Planning Podcamp

We had the pleasure of attending some neat talks such as Neil Simon’s “How to Create a Wordpress Plug-in” and Michael Sitarwzewski’s startup pitch for yourTuner.com.

podcamp3

We wrapped up the day with an experiment in social collaboration…learning the Thriller dance moves as a team. For better or worse, there was a video camera present and it was uploaded to the web for all of you to enjoy.

We’d highly recommend attending an un-conference if you haven’t. There are some amazing like-minded people to meet, great conversations, and excellent (and more importantly, relevant) sessions.

Inspired: Adobe MAX 2008

Tuesday, December 23rd, 2008

max_photos

Last month we flew out to San Francisco on a last minute whim to check out the Adobe MAX 2008 conference. We left Boulder fully expecting to learn new and interesting things that we could accomplish with their updated line of products, most of which make up the repertoire of software we use to design and build websites at Slice of Lime.

What we didn’t expect was to be blown away by the sheer magnitude of the conference and how being around so many like-minded peers – thousands of them – could really impact the way we felt about the industry we’re so passionate about. People from all different walks of life and a multitude of professions were there, and, whether young or old, designer, developer, manager or anything in between, they all seemed as elated as ourselves to be involved.

It was enthralling to sit in on a session hosted by some of the companies in the business whose work we idolize. To hear these teams describe the way they collaborate on projects, approach similar hurdles in design and development as ourselves, and still manage to produce industry-leading work was a real treat and provided us with an indescribable amount of motivation and inspiration to get home to Boulder and apply it to our next big project.

So we went for the knowledge and returned with the experience and the wild desire to do something even greater than we’ve done before, and it was all a matter of getting inspired when we weren’t necessarily expecting it.

Controlled vs. Socially-Driven User Testing

Thursday, November 20th, 2008

Slice of Lime recently launched an incredibly rich and fun website called Big Green Rabbit. The target demographic is children aged 2-8. To ensure that the website was usable, engaging, and fun for this age group, we ran a series of user tests using the application, Silverback.

The Silverback application allowed us to bring laptops on location (into the child’s home) and to use the built in iSight camera to measure the reaction of the child’s face, where they were looking, what they were saying, and where they were clicking. A moderator took notes, but avoided interfering or helping the child if they were stuck.

This process was immensely helpful pre-launch as it brought some usability issues to light that we hadn’t though about. We wound up making major changes to the nav one week before launching to improve the experience right out of the gate. Here’s a small clip of Max bringing Charlie, the Big Green Rabbit, to life. His reaction is priceless:

This user testing was very valuable to us. However, there’s another sort of “user testing” that we’ve seen lately – “Socially-Driven User Testing.” We’ve found that some of our target demographic will take it upon themselves to blog and even post videos about their experience with the websites we build. This sort of data is almost more valuable since it comes in naturally (vs. us going out to actively acquire it in a controlled environment).

Here’s a YouTube video that we found of a girl dancing along to the “Learn a Dance” portion of the Big Green Rabbit site:

We’ve seen this sort of Socially-Driven User Testing before with the Jibbitz site that we built, where V and Cat talked about how “fly” the site was:

While controlled user testing will always be a valuable way for us to collect data, we’ll be sure to look more and more towards social media channels to collect invaluable information as we move forward.

Kevin Costner is a Liar

Tuesday, August 12th, 2008

We had the opportunity to sit on a User Experience panel for TechStars a couple of weeks ago. TechStars is an organization that mentors 10 start-up companies each summer and Slice of Lime is one of their sponsors.

The panel was comprised of my business partner, Jeff Rodanski, and the CEO of Viget, Brian Williams. We covered a bunch of issues around user experience within the context of a startup and used past clients like Jibbitz and PhotoVu as examples.

The main takeaway we wanted people to have was that simply creating the functionality of a website without consideration of target audience and goals can limit your chance of success. In other words, Kevin Costner is a Liar – if you build it, they won’t necessarily come.

In every project we do, we focus on target audience and goals above all else. Whether it’s information architecture, design, or development, we always refer back to these two things.

Goals

  • What is the primary action you want people to take when they come to your website?
  • What do you want people to do before leaving your website?
  • What are your broader company goals?

Target Audience

  • Research your target audience if you’re not already familiar
  • What is you target audience like? How computer literate are they?
  • What are their likes/dislikes?

We usually start our clients off with a questionnaire that focuses on goals and target audience to help us through strategy conversations.

If the project is more complicated, we may also do industry research or focus groups to get more insight into the target audience.

As we get into information architecture and wireframing of a website, we make sure to always reference the goals of the project and the target audience. Is this user flow going to make sense to our audience? Do the elements on this page really address the action our client wants a user to take?

We go through iterations for most steps of the process. When reviewing designs, we recommend our clients not only offer their gut reactions, but that they also collect feedback from people in their target audience.

Focusing on goals and target audience in relation to user experience may seem straight forward – and it is. As obvious as it may seem, we’ve seen companies approach projects with a “functionality-first” approach many times. In our opinion, functionality should support your goals and target audience, not the other way around.

It was a pleasure sitting on the panel and getting the chance to organize these thoughts for the amazing startup companies TechStars has assembled this year. Many thanks to David Cohen for hosting.

WordPress:101 – A beginners guide to using WordPress

Thursday, January 17th, 2008
For a more updated tutorial on Wordpress, please visit our Wordpress services page. This article covers an earlier version of Wordpress.

Do you like to visit blogs on the web? Are you not sure? Chances are, you have several bookmarks saved that are powered by blogging software. There’s also a good chance several of those sites are powered by WordPress- a popular, full-featured blogging tool that we often utilize for our client’s blogs. A big reason for its popularity is that it’s very easy to use and manages posts, users, and more.

But, like any software, there is a learning curve required to understand how to maximize its benefits. This article will introduce you to WordPress’ back-end administration and get you blogging in no time!

This article covers the following topics:

  • Admin Overview
  • Adding/Editing users
  • Writing/Managing Posts

Admin Overview

WordPress’ back-end administration app is where you’ll write, manage, and edit all your posts, comments, users and more. To get started, you’ll want to access the WordPress admin section, and log in.

WordPress Login

Once you’ve logged in, you’ll be presented with the Dashboard, a quick way to see new activity on your blog such as posts, comments, and stats, as well as activity in the WordPress community. There are also helpful links to WordPress documentation and support.

Across the top of the admin app you’ll see the title of your blog with a link to view the site and the WordPress admin navigation with several tabs running across the screen. It’s a lot of tabs, but as an admin you get to see everything and the kitchen sink! (If you plan to have additional people contributing to your blog, you can assign them different user roles, which helps simply the navigation they see quite a bit.)

WordPress Admin - Dashboard

In your daily routine you’ll only be using a handful of these tabs, but lets review them all to give an idea of what they do:

  • Dashboard - Your site at a bird’s eye glance
  • Write – Add new posts to your blog
  • Manage – Review/Edit posts, categories, uploaded files, and more
  • Comments – Review/Edit all comments that have been added to your blog
  • Blogroll – Add links to other blogs that you’d like your visitors to know about
  • Presentation – Change the look and feel of your blog
  • Plugins – Install free plug-ins to further customize your blog
  • Users – Add/Edit users on your blog including administrators, editors, writers, and more
  • Options – An advanced area to manage the way WordPress handles your blog

Lets start in the Users tab. (If you don’t plan on having multiple users, you can skip to the Write section.)

User Management

The Users tab lets Administrators add and edit users on your blog. There are several different user roles available, which gives you the ability to scale your blog from a small, personal blog, to a large, web magazine with multiple authors, editors, and contributors.

WordPress Users Tab

Let’s review the five different types available so you know how to assign the right role to the right person:

  • Administrators – Administrators have access to every option in WordPress
  • Editors/Authors – Editors and Authors handle the publishing/editing of posts, and comments on your blog. They can see the Write, Manage, and Comments tabs; all other tabs are only available at the Administrator level. Editors have the additional ability to manage static pages and categories.
  • Contributors – Contributors are able write and save posts, but they can only submit them for review, they can’t publish to the site. Contributors can see the Manage and Comments tabs, but are only able to view items, not edit.
  • Subscribers – Subscribers can only see their profile. The subscriber role is if you require visitors to register to post comments or for visitors who comment often and want to save their info on your blog.

We recommend the Author role for most situations. Authors have no restriction to write, edit, and manage the content on your blog, but aren’t burdened with the more complicated aspects available in WordPress.

Writing Posts

When you first click on the Write tab, you’ll see the Write Post page. There is also a Write Page tab in the sub-navigation, which is only available to Administrators and Editors. WordPress defines pages as static content that won’t change often, such as About pages. For this article, we’re going to concentrate on the Post page.

WordPress Post Editor Page

The first thing you should see is text boxes for your Post’s title, content, and tags in the main content area. This is where people will be spending most of their time, but other options very important to the posting process run along the side. Let’s review the post sidebar:

  • Categories – select one or more categories to make it easier for visitors to parse and search content. Categories are created outside of the post in the Manage tab.
  • Discussion – set whether you want comments and/or pings for the post. Comments allow visitors to respond to the post; Pings are a list of other sites that are linking to your post.
  • Post Password – lets you password-protect the post.
  • Post Slug – lets you customize the way the post appears in the URL, making it easier for bookmarking. For example, typing my first post into the slug field will appear as http://www.mysite.com/blog/my-first-post/.
  • Post Status – lets you set the post as published, pending, draft or private. This is an important option for authors. If they’re writing a long post, they’ll want to set it as draft to prevent inadvertently publishing a work-in-progress! This also applies if a published post needs major editing. Setting it to draft will prevent visitors from seeing the post.
  • Post Timestamp – lets you define the date you want the post to appear as published. The timestamp defaults to the current date of when the post was first written.
  • Post Author - allows authors, editors, and administrators to select the author of the post.

Moving back to the main content area, lets create a post! Type what you’d like your title to be. In this case, we’ll type: My First Post. Next, move to the post area, where you add all the content for your post.

Post Title

There are two tabs: Visual and Code. The Visual tab is a WYSIWYG editor (What You See Is What You Get) that has common text formatting options similar to word processing applications, as well as other options like adding links, and spell checking.

Visual Post Editor

The Code tab is where you copy and paste html code for images, YouTube videos, widgets, and more. If you’re copying embed code from an external site, you’ll want to make sure you paste it in the Code tab or else WordPress will render all the code as plain text!

Code Editor

On the Visual tab, add a few lines of text, formatting however you wish. Then, click the Save & Continue Editing button below the tags field.

Save, publish buttons

Once your post saves, a preview link will appear at the top-right of the post field. You can click this link to see how your post will look to visitors.

Preview Button

Now let’s move to the Tags field below the post area. Tags are keywords relevant to the subject of your post. If your post was about WordPress you would add the following tags: blog, blogging, posts, comments, etc.

Tags Field

When you publish, WordPress will automatically convert the words before the commas into links that users can click on to see other posts on your site with the same tag. If they clicked blogging, they would see all posts that are related to blogging.

Tags on live site

That’s all you need to create a simple post! At this point, you could click Publish, and add your new post to your blog. But what if you want to upload an image to add to the post?

Below the Tags field is the Upload section. This gives writers a simple way to upload images to the web server and then insert them into their posts. Uploading is simple: select the file from your desktop, add a title and description, and then click the upload button.

File Uploader

Once the file has uploaded to the server, WordPress will switch to the browse tab.

File Browser

This tab contains code to add the image to the post. There are 3 options to choose from:

  • URL – the direct path to the image
  • Thumbnail linked to file – copy and paste this code into the Code tab to create a thumbnail of the image that links to a larger version.
  • Thumbnail linked to page – copy and paste this code into the Code tab to create a thumbnail of the image that links to a new blog page with a larger version of the image.

You can also use the Browse All tab to see all images uploaded to your web server. When you click a thumbnail, it will show the 3 code options for linking to the image. Below the Upload/Browse section are several more panes for advanced options. We’ll cover these in another article, for now, click Publish and add your first post!

Managing Posts

Now that you have a live post, you may want to edit the text, tags, categories or other options. You access published posts through the Manage tab.

Manage Tab

In addition, there are several other types of content you can manage:

  • Posts – View, edit, delete published posts. Available to Admins, Editors, Authors, and Contributors. Contributors will only be able to view published posts.
  • Pages - View, edit, delete published pages. Available to Admins and Editors.
  • Uploads – Edit, delete uploaded files. Available to Admins, Editors, and Authors.
  • Categories – Add, edit, delete categories. Available to Admins and Editors.
  • Files, Import, Export – Advanced options only available to Admins.

To edit a post, click the edit link of the post and it will take you to the Write Post page. From here, you can make any changes needed and click Save to save your edits. Note that this will update the blog immediately if the Post Status is set to published.

Summary

You should now be able to manage users, add posts with categories, tags, and uploaded images, and manage posts that have been published. This is just scratching the surface of WordPress and its features, but should give you all you need to know for a successful blog!

What Legos Can Teach Us About Web Standards

Thursday, December 20th, 2007

by Kevin Menzie, CEO

Legos

Oftentimes, when I mention “web-standards based design” to a client, they get a glazed look in their eye. I usually have to back that statement up with something like, “It will make the site load faster, make it easily indexible by Google, and will be simple to update going forward.” It’s usually that “G” word that makes people excited about web standards, however, the flexibility that you get stretches far beyond search engine optimization.

Slice of Lime has a collector’s edition Lego box in the office for anyone to sit down and play with when they need to get their creative juices flowing. It occurred to me that the Lego story, and it’s success, can be applied to the web standards story in many ways.

Legos

  • Lego started way back in 1934 with bricks made of wood.
  • Eleven years later (1945), Lego started making plastic pieces.
  • Two years later (1947), Lego started making their famous, standard, interlocking plastic bricks.

Web Standards

  • The first publicly available HTML documentation was created in 1991.
  • Eight years later (1999), the first Web Content Accessibility Guidelines (WCAG) were published.
  • Two years later (2001), W3C authored WCAG 2.0, what we now know as “web standards.”

As you can see, both efforts took the same time frame, roughly 10 years, to land on a standard that lent itself to collaboration and growth.

To set the stage for what why web standards is important, here’s an excerpt from Wikipedia’s “Legos” entry:

Lego pieces of all varieties have been, first and foremost, part of a universal system. Despite tremendous variation in the design and purpose of individual pieces over the years, each remains compatible in some way with existing pieces. Lego bricks from 1963 still interlock with those made in 2007, and Lego sets for young children are compatible with those made for teenagers.

So, how does this relate to the web?

As web standards continue to get embraced by browsers, large steps can be made in terms of new technology and innovation.

On the technology front, Cascading Style Sheets (CSS) can almost universally be used to control the way your website displays on web browsers as well as other devices. With standardization, the once-dormant AJAX (a combination of Javascript, XML, and server-side scripting) is now a familiar term in the land of “Web 2.0″.

On the innovation front, entrepreneurs are finding it’s easier than ever to create ideas without worrying about technology limitations. It’s actually quite the opposite – technology is serving as an enabler. Everything from widgets you can install on your blog to entire platforms such as Facebook or OpenSocial are made possible by the basic building blocks that web standards gives us.

At Slice of Lime, one of the things that’s exciting is that the web feels like a pile of Legos has been dumped in front of all of us. We’re all reaching in and seeing what can be created from these pieces. It’s a time of heavy innovation as we test what’s possible.

After all, six 2×4 Lego bricks of the same color can be put together in 915,103,765 ways – just imagine what we can come up with on the web.

The Elongating Tail of Return Path

Monday, December 17th, 2007

by Kevin Menzie, CEO

ChangeThis

One of my favorite web resources is ChangeThis, which packages “manifestos” into tidy, well designed PDFs. Their latest manifesto is authored by Mohammad Iqbal from Ogilivy & Mather Advertising and is titled “The Elongating Tail of Brand Communication.”

The manifesto references Chris Anderson’s book, “The Long Tail,” which is an excellent read outlining how the web is changing our “hit-driven” culture into a “niche-driven” culture. Given a plethora of choices, people’s tastes become much more refined. This fact, coupled with the web audience reaching critical mass, makes niche-industries possible.

Iqbal’s manifesto attempts to relate this to the world of branding. Can a brand have sub-brands that relate to smaller, niche audiences?

I couldn’t help but think about the brand direction of one of our latest clients, Return Path, while reading this article. We just recently launched their new website which takes a “long-tail” approach, in my opinion. They moved from trying to promote stand-alone brands (Sender Score, Postmaster Network, List Growth, and Strategic Solutions) and instead moved them under one core brand, Return Path. This brand then trickles down to the sub-brands, which composes the long tail.

Return Path Homepage

The homepage makes it easy for their niche audiences to quickly find what they’re looking for using either a drop down menu at the top or an interactive menu system in the middle of the page.

Sender Score

Once the user arrives at the “sub-brand”, Sender Score for example, they are asked again to narrow their focus. Are they Email Senders? An Internet Service Provider? A Mail Administrator?

Return Path ISP

From there, the messaging focuses in on that specific person, “We’re stuck in the middle with you.” Return Path talks about how they can help manage spammers. On the left side of the page, whitepapers that relate specifically to this type of customer are dynamically presented.

Iqbal mentions the importance of “trading control for influence” to help promote sub-brands. Return Path turns over control via their popular blog, the “Email Marketing Water Cooler.” Regular posts speak directly to their niche audiences. Each post, written by Return Path staff, re-inforces the sub-brands for eternity. They are easy to find via a Google search and can easily be spread around the web, discussed, or subscribed to.

I especially enjoyed Iqbal’s closing two paragraphs:

A better model to communicate complexity is to let the consumers assemble it for themselves at their end. Just ensure that they have all the essential ingredients—a long tail of diverse yet simple and easy to communicate brand messages—and they will eventually put together a complex, layered and nuanced understanding of the brand.

One of the most surprising and desirable side effects of long tail brand communication is that by merely contemplating more than one message at the same time, your consumer is assembling the complexity you sought to communicate, but wisely didn’t.

I believe that the new Return Path website has achieved speaking directly to its many niche audiences while promoting their core, “Return Path” brand. As we look towards 2008, I’m sure that we’ll continue to explore ways to think about the “long tail” in relation to this company as well as our other clients.