Fresh

A never-ending battle has been raging since days of old about the virtues of custom, project-specific photography vs. stock photography. Each has its benefits and drawbacks and depending on your role in a project you could be on one side of the fence or the other. I am a designer with an extensive photography background. I have a bias, so if you’re looking for a true comparison as to which is better, stock vs. custom, look somewhere else. I have very clear views on the role of photography in design and how it can help achieve the goals of a given project. Achieving the goals of the client are always the top priority and finding the best way to do that is the responsibility of the designer.

(more…)

Because we have a team of developers here at eROI and a plethora of projects to build and maintain, it is more than likely that the code written by one individual will need to be edited by another developer at some point in time.  When an edit to a site comes in, the original author of the code will inevitably, at one point or another, be on vacation, be sick, or no longer work here (yes, it happens, sadly).  This is why it is so imperative for our team (and any development team) to follow certain guidelines to keep our code clean and legible, so that anyone can jump onto a project, easily see what the code is doing, and start making edits quickly.  Here are five ways to keep your code readable and maintainable:

1. Indent Your Code
   This is number one on the list for a reason.  No other thing you can do can help or hinder the readability of your code than the indentation style (or lack thereof).  Nested child elements should be indented one level more than parent elements in order to show a visual hierarchy.  Opening and closing tags in HTML should be on the same indentation level in most cases; items inside the opening/closing tags need to be indented one additional level.

   (more…)

Growing up, my mom always stressed the importance of having great undergarments upon which to build your wardrobe. Bras and panties had to match, and it was ideal if the set matched your full outfit. She said, “If you feel good in your underwear, you’ll look great in your entire outfit.”

The same principle applies to website planning. Now, I’m not suggesting that websites wear bras and panties, but each of the websites that we design and build have certain, ahem, undergarments. These undergarments are the building blocks of a good website wardrobe.

(more…)

Don’t drop the ball now that the ball has dropped! That’s right, it’s a new year, and time to make new resolutions and goals as well as re-commit ourselves to standards and quality in web design and development.  One of the most critical periods in the creation of a new (or redesigned) website is what we at eROI call the “Deploy” phase. This is when all the hard work the team has put into a project culminates to one defining moment when you flip the switch and the site “GOES LIVE” for the whole world to see.  But more important than the actual flip-switching is the pre-launch phase where we make sure the site is ready for prime time, so to speak.

One of the most important steps in the pre-launch phase is an in-depth QA process, including usability and cross-browser testing.  But let’s assume that step has already been completed and your site is bug free and looks snazzy in all the major browsers.  Heck, let’s even say you’ve got a kick-ass mobile version and that everything degrades gracefully with javascript disabled, or on a horrible, outdated browser (I don’t think I need to name names here).

Aside from making sure everything works and looks good, here is a list of items to check on and implement (if you haven’t already).  Many of these may seem rather trivial compared to larger issues like site functionality, but the little details are important and you want to put your best face forward when presenting a new website to the world.  The lack of a favicon may not drive people away from your site, but those small details will be noticed and appreciated by users as well as peers in the industry.  Other items on the list can be much more crucial to the usability and success of the site.

(more…)

Finding The Perfect Storm

Often email gets overlooked as a space for telling stories. The primary function is, rightfully, prompting action. However, sometimes the right mix of elements can come together to bring both of these things into one piece. This project was one of those opportunities, so we wanted to share it here.

Icebreaker is an apparel company focusing on a very special product that mixes the versatility of an outdoor technical product, the sleek aesthetic of an activewear product, and the sustainability few companies can boast with its refined merino wool fabric. They have a fantastic brand story and push the envelope with their presence, often using provocative and mythical imagery to support their ethos that reminds us that “it’s about our relationship to nature, and to each other.”

In this instance Icebreaker wanted us to help announce their newest line of clothing for the Spring 2010 season (It’s spring in the Southern Hemisphere). We took this opportunity to not only elevate the presence of their brand in email, but also to use some unique ways of getting their message across. We created two versions of this email, one vertical and one horizontal. Some background on why we wanted to try this out can be found on this previous post by Dylan over on Email Wars.

(more…)

Crafting a Better Experience

We have all sorts of fantastic projects that we get to do on a day-to-day basis. Some amazing clients come to us with challenging problems and often we feel very proud of the solutions. Solutions we think many of you’d probably like to see, and more importantly, know the thinking behind. This is what prompted us to start this new series called Fresh Projects. We hope you’ll find it useful and interesting. As always, we’d love to hear comments and critiques on whether we hit the mark.

This first time around we wanted to show a recently launched site we did for Wacom Technologies – namely, Pen Scrappers – a resource for digital scrapbookers.

Although we had previously worked with Wacom to create the first iteration of Pen Scrappers – which was essentially a contest site that helped generate awareness for Wacom’s Bamboo Craft pen tablet – we were given the chance this time around to up the ante. Wacom had identified this audience as one that they could talk to more specifically, and they wanted to foster the community that already existed by creating a website that would be a strong resource for those looking to hone their craft.

(more…)

Sterling Communications is a technology services provider located in Portland, Oregon with a national customer base. They specialize in VoIP business phone systems, colocation, and hosting.  Sterling came to eROI this year looking for a complete strategic overhaul of their website, which had grown stale over the years and didn’t reflect what they truly had to offer their customers. Take a look at the home page before we got started:

Sterling wanted a solid working relationship with a trustworthy, local agency. After having been through several agencies in the past, they were looking to work with someone new to give them a fresh perspective on their website, company branding, and marketing materials.

(more…)

Part of being a designer for “new media” means constantly exploring new tools and techniques to get the job done. Right now I’m geeking out on LittleSnapper, a sweet little app from RealMac software. It’s not really a new tool, but it’s found it’s way into my workflow quite nicely. It’s essentially a screenshot powerhouse, giving you the ability to capture anything you see on your screen and save it in a beautiful gallery interface for reference later. It uses a system of tags and categories to help organize, and with it’s built-in browser, it can make documenting a website a snap (no pun intended) for things like training guides and case studies.

LittleSnapper from RealMac software

(more…)

Alima Pure is a Portland Oregon based mineral cosmetics brand with a world-wide following. Recently, we completed a super project with them. It was great for a couple reasons; not only is Alima Pure a marvelous brand to work with from a design perspective (which is always nice!), but we were able to get creative with testing.

The primary objectives for the project were to update the current website with a fresh color palette, refine the typography (using our new AutoTTF WordPress plugin!) and most importantly, re-design the home page to feature more shopping avenues for the user. Projects like these are challenging though, because the homepage was already successful for a number of reasons; it didn’t require a lot of change.

Original Home Page Design

The first thing that we knew we wanted to create was a large photography-based area (similar to what was there already) but that featured current products and promotions with clear calls to action. Second, bringing in flexible product areas to feature what is most popular, new or interesting.

(more…)

Rule # 8 – Define, Specify, Implement.

“You should never, never doubt what nobody is sure about.” W. Wonka

Always write specs! They can be long 1000 page specs or they can be 10 user flow diagrams, it doesn’t matter as long as you have all the people working on the project sign off on them as well as the stakeholders and administrators of the finished project. This will save you some of the major headaches and hurt when things start to get squirrely around launch time and you need to ask for more money or an extension on deadlines because of scope creep. If a developer has to define functionality in the middle of development, alarm bells should be ringing. By the time the developer’s fingers hit the keyboard, there should be no questions about what he or she is supposed to implement. It’s critical to have a functional specification to serve as a guide for the developer. The spec can come in many shapes and sizes ranging from nothing more than a to do list, to a full blown information architecture document complete with use cases. In either case the developer should only concern themselves with what’s the best way to implement a feature, never “what’s this for?”, or “what’s supposed to happen when a user clicks here?”.

Having an agreed upon document will ground those conversations in reality and a reasonable client will usually have no problem handing over more cash and pushing a deadline back as long as it is reasonable. Buildings are never constructed with partial or non-existent blueprints and thus neither should large websites. Imagine what buildings would look like in that scenario….. it happens more often than it should with websites. Think about that.