AIAIO: Our Blog

AIAIO: Our Blog

The pulse and reviews of Alexander Interactive

Archive for the ‘Design’ Category

wEbVOLUTION Timeline

A history lesson and evolution timeline brought to you by Ai…

1993

The World Wide Web debuted to the public, for free, 20 years ago today. Yup, only 20 years ago. Here was the first website, which has been re-released by CERN for this occasion:

First WWW web site

1996

Our founder, Alex Schmelkin, made his first website for Hofstra University 17 years ago. Check it out:

Alex's first web site

2002

The year Ai’s created its VERY FIRST WEBSITE. The lucky client? DonorsChoose.org

Ai's very first web site

2003

We developed our first ecommerce website for FragranceNet.com. FragranceNet.com is ranked 153 on the Internet Retailer Top 500.

FragranceNet.com

2013

That’s now! This month we launched MyRingPop.com, with e-commerce and custom product configuration. Voila!

MyRingPop.com

Any guesses what websites will look like and what technologies will be important in another 20 years?

Ai

Redefining the Post-Mortem Meeting

Thinking back to my first time seeing the meeting subject title ‘Post Mortem for (insert project name that went horribly awry)’ pop up in my Inbox …I remember hitting ‘Accept’ somewhat reluctantly. My mind quickly concocted a visual of a mock funeral for said project, the people there didn’t really like the project, but they attended anyway…out of respect. Afterward they talked about a few good qualities, but mostly complained about it before going back to business as usual.

Yes, a little strange maybe, but that odd visual story in my head proved to be accurate for most Post-Mortem meetings attended in the years that followed. Different agencies, different projects, but they all usually played out in the same way. Typically, one of these meetings would be scheduled only after a project that was riddled with issues, blown budgets & missed deadlines. As for projects that went tremendously well? No need for a Post-Mortem, we’re awesome, go team!

Changing the Perception

Unfortunately, these after-the-fact meetings usually have a negative connotation attached to them. People attend with their backs up, ready to defend their role on the project, air grievances, and place blame elsewhere. Luckily, it doesn’t have to be this way. When it comes down to it, team members want the projects they take part in to be successful. Changing the perception of how a Post-Mortem is perceived is crucial to future success on projects with that specific client, and your company’s process as a whole. Enacting this change is done by focusing on the holistic view of how your company evolves its process over time, not just what they should have done in hindsight on that one project.

Below are the tenants that should always be top of mind for anyone planning on conducting a Post-Mortem successfully. If you stay true to these items, your team will start to view these meetings as a beneficial aspect of the project and you will see the improvements in future endeavors.

1) Keep the meeting structure simple

There are quite a few meeting outlines that exist out there, but they all really break down into five main components. At Ai, the following structure for Post-Mortem meetings has proven very successful.

• What has been working?
• What has not been working?
• What was painful but necessary?
• What did you learn about working with this particular client?
• Any recommendations that we should implement into future processes?

This breakdown requires the team to begin with positive aspects of the project, and end with forward-thinking process improvement ideas to help set an optimistic tone and shift the perception away from the negative. It’s tempting to gloss over everything but that pesky second bullet, but it is so important to make sure all aspects – good and bad – are discussed.

2) Ensure the attendees are prepared ahead of time

By nature, Project & Account Managers are organized. Keeping the client happy, the projects successful, and the team working efficiently is par for the course. This includes getting your Post-Mortem meeting outline in order. But these goals are not always the main focus of the team members executing the deliverables. They are focused on their daily tasks at hand, whether it involves getting a Strategy Recommendation out the door, or the third revision of creative done in time to hand off to Technology. Basically, people are busy and this could fall low on their list of things to get done.

To sidestep any probable delay in receiving feedback, send out a list of questions to the staff at least one week before the meeting. Put a reminder on their calendar, asking them to send responses by a specific date. This forces team members to really think about the answers. If you ask people to physically type out their feedback, you will find the content will be more pointed & specific. People will instinctively recognize in their bulleted list what is legitimate, and what is just whiny.

3) Time It!

The recommended time for a Post-Mortem is no longer than 1.5 hours. Sometimes this can be difficult, especially if there are too many missteps to count. The organizer can sidestep this by identifying overlapping problem areas received in the initial feedback and integrating them into one focus point. Each bullet point has a specified time allotted and, once you reach the maximum time for that item, assess whether it is necessary to schedule a follow-up meeting.

4) Introduce the Mini-Mortem

A few months ago, a PM was trying to see what she could do to correct a list of growing issues on a hectic project…then a light bulb went off. Why wait until after a project has come to an end to course correct issues and highlight achievements? By placing a ‘Mini-Mortem’ at the halfway point of the project, the team as a whole was able to identify problem areas and pain points before the project is over. By providing them a means to voice these concerns and call out things they feel are working well, it allows the Account Managers ample time to refocus efforts where needed. Again, it’s important not to ignore the positive aspects, this is a great time to leverage what has been working well and build upon it.

5) Apply Lessons Learned To the Next Project

When Post-Mortem meetings occur after a project, often times whatever learnings are captured tend to be quickly forgotten. The information shared between coworkers during these meetings is on some level remembered, and corrections of previous issues happen organically, but this isn’t enough. At some point people will roll off and new members will transition onto a piece of client business. If tangible steps aren’t taken to capture the valuable information shared during a Post-Mortem, the ever important ‘Next Steps’ will never be implemented. When mistakes aren’t corrected, these meetings tend to be viewed as a time-suck. Why bother meeting if management isn’t going to fix it the next time around?

When a new piece of work gets underway, make sure there is time allotted to review the previous Post-Mortem notes along with the Next Steps from that meeting. Below is an example of one item that showed up on the whiteboard of a Post-Mortem, and it’s Next Step:

Issue:
“ Having multiple work-in-progress meetings scheduled with the client each week was great in that we got buy in on our ideas throughout the process, but towards the end of the project we needed less meetings and more time to focus.”

Next Step:
PM to check in with the creative team each Monday, at this time we will assess what WIP’s are needed that week. We will also shift the 9:00am scheduled time to 5:30pm to allow creative to be ready.

A Happier Team

By implementing the steps above, you will begin to shift the overall attitude around how the Post-Mortem meeting is perceived by your coworkers. So start changing the perception, assign next steps and hold the team accountable. Next time a new piece of work rolls around, reserve a slot of time to refer back to the items that came up in the last Post-Mortem. Make sure to highlight the good and bad, although correcting mistakes is crucial…touching upon what the team excelled at will boost morale and remind everyone that ‘it wasn’t all bad’.

And lastly…can we please change the name of this meeting?

Business

Display Facebook Photos on Your Website with Galleria

UPDATED: May 3, 2013:

Finally! I pushed the plugin to our GitHub account so it has a permanent, source-controlled home.  The latest and greatest Galleria Facebook Plugin can always be found here:

Galleria Facebook Plugin on GitHub

In this release:

  • Published initial version to GitHub
  • Fixed &limit= to &photos.limit= in querystring arguments (thanks @RoelDekker)

(Note: I’m going to soon remove the old versions that were uploaded as a zip to this post to prevent people from downloading the older, out of date versions.)

UPDATED: April 29, 2013:

UPDATED: 12-12-12:

UPDATED: August 29, 2012:

  • Now supports Galleria 1.2.8
  • Fixed bug that caused missing thumbnails on Galleria versions 1.2.7+
  • Restructured portions of the plugin to be based on latest Flickr plugin in Galleria 1.2.8
  • Updated post below to include 1.2.8 documented way of loading themes (slightly different than the documented approach in 1.2.6)
  • Latest plugin: galleria.facebook.zip

Facebook provides an easy way for individuals to display photos from their profile using Facebook’s Photo Badge.  You download a small snippet of HTML, embed it in your website or blog, and et voilà.

However, there are a few drawbacks to the tool, most notably:

  • The Facebook Photo Badge does not allow much customization. If you’d like control over how your photos are displayed on your website, you will need another solution.
  • Photo Badges are currently limited to photos from an individual’s profile and do not support company Pages. If you want to display Facebook Page albums and photos on your site, read on.

Galleria

Galleria is a popular, open source photo gallery whose “aim is to simplify the process of creating professional image galleries for the web and mobile devices.”  Best of all, it’s free and comes with an attractive theme for displaying your photo albums.  You can purchase additional themes, though I’ve found the basic, free theme to be attractive and sufficient for most purposes.

Out of the box, Galleria does not currently support loading Facebook albums, but does have excellent support for Flickr and Picassa.  I adapted their Flickr plugin to work with Facebook.  You can see an example of the Galleria Facebook Plugin in action on The Gaga Center site.

Galleria Facebook Plugin How-To

Instructions on how to display a Facebook photo album on your website using Galleria.

1. You will first need to find the identifier for the Facebook album that you want to display. I haven’t yet found an easy way to do this other than looking in the URL when you’re viewing the album at Facebook. Navigate to the album in question, and copy down the album id that I’ve highlighted in red below (for your own album, of course):

http://www.facebook.com/media/set/?set=a.291489504249941.68160.249094895156069&type=3

2. Download and install Galleria:

http://galleria.io/download/

3. Download and install my Galleria Facebook Plugin:

Get a copy of the plugin: Galleria Facebook Plugin

The Galleria library has a directory called plugins/.  Unzip galleria.facebook.zip and place the facebook/ folder directly in the plugins/ directory so the file layout looks like this:

galleria/
  galleria/plugins
    galleria/plugins/facebook

4. Load jQuery, Galleria, the basic theme, and the Galleria Facebook Plugin in your HTML page (this assumes you’ve put the basic Galleria files in a js/ directory):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/galleria/galleria-1.2.8.min.js"></script>
<script src="js/galleria/plugins/facebook/galleria.facebook.js"></script>

5. Add the following snippet of HTML to your page, setting your album_id (gathered in step 1), height, and width:

<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
 facebook: 'album:291489504249941',
 width: 745,
 height: 550,
 lightbox: true});
</script>
<div id="galleria"></div>

6. You can explore more Galleria display options and fun tweaks in the Galleria Documentation.

An Example!

See the Facebook Galleria Plugin in action on The Gaga Center website.

Finally, do consider purchasing additional themes as the developer generously donates this photo gallery to the world and I’m sure would appreciate it! (we have no connection to them) The gallery has great support for mobile and tablet, including native swipe gestures.

Design

Creativity and Organization from a Junior Designer’s Perspective

As a junior designer the thought of “creativity” and “organization” even being in the same sentence seems counterintuitive. But I learned early on that you cannot be an unorganized designer at Ai.

If you don’t organize your work, your designs will suffer. You can’t afford to lose things or forget tasks or client requests. Every missing document or lost bug assignment is time lost. This sometimes can be a difficult task when you have four project managers approaching you at the same time.

Prioritize 

One thing I’ve learned at Ai is how to prioritize. There is never a task too small, but some are more urgent then others. At the beginning of the day I take a moment to gather myself, prioritize my tasks and let all the project managers know where my priorities are and when they should expect their tasks to be completed. It’s always better to let a PM know they might not get their design change till the afternoon than to leave them hanging. (Their jobs are hard enough.)

Make a List

Once my projects are prioritized, I make a to-do list. Now don’t get me wrong; I love the internet and all it has to offer (just look at where I work) but I love the simple joy of Post-It notes. Call me old-fashioned, but there is nothing better than a good old pen and paper for making a to-do list (and the satisfaction of crossing things off).

It doesn’t matter what you use for your list as long as it works for you. Besides Post-Its, I personally find the Action Pads really helpful. If you find it easier to organize your to-do list on the computer, there are lots of programs. A favorite of the Ai design crew is Teux Deux, a free minimalist web-based to-do list.

Name Consistently

Now my workload is assessed, my day is prioritized, and my handy Post-Its are in sight – a to-do list is useless if it falls beneath the pile of papers on your desk. The same applies for your digital organization.

When working on tasks, you should have a consistent way of naming files and folders. I use concise but descriptive names that can easily be found via search. Always use a numbering system so you can track which file is the most recent. This has been especially essential recently in our work with retailers whose products are changing constantly with the season.

Save, Save, Save!

Last (but certainly not least) the Golden Rule: “Save your files. Constantly.” Make ‘Command+S’ your friend. You can have the most organized file system and the best naming method, but none of that will matter when your system crashes and you’ve forgotten to save your last hour (or day) of work. I’m having a flashback of losing hundreds of resized images in a single computer crash.

Don’t let my nonchalance fool you. As a junior designer, I’ve had to learn some of these lessons the hard way. Organization is difficult work, but the more you work at it the easier it gets.

Tracking your tasks, prioritizing, keeping your workspace organized and constantly saving progress will give you peace of mind and save you precious time, allowing you to be more creative. While some new designers may think of the two as mutually exclusive, organization and creativity go hand-in-hand.

Design

Excitement for the Web

During an interview I gave to Alison Enright of Internet Retailer magazine about designing across an increasing variety of devices, and the topic of the current excitement in the web design community came up. It got me thinking about why exactly everyone is so jazzed about what’s going on in the web right now.

While the storm of talk about responsive web design and new technologies are definitely factors in creating a high level of buzz with design oriented techno-nerds like me, I found myself realizing that these things are just a small piece of what makes the future of web so exciting.

We are again at a point where designers and developers are equipped with both new devices and the technologies necessary to create truly exciting content for them. Five years ago today, Steve Jobs unveiled the very first iPhone. Since then we’ve seen smartphones (then tablets) go from newfangled to prolific.

Right now we are creating new patterns and trends that will shape and form the way the web is used for ages to come. The internet is evolving it right now, and we have the power to make it whatever we want. It’s a good time to be in the web industry.

Design

The Font-Bot Project

The Font-Bot Project is something I started for a couple of reasons. The first reason was I wanted to design a site with new HTML 5 markup and CSS3 properties. The second was, as a designer turned full time Front-End-Engineer, I needed a creative outlet.

I didn’t really just want to markup a site for a fake company or a new design portfolio. I wanted to create something that people would enjoy, and visit and maybe even use. As the web is going through somewhat of a type renaissance with the adoption of @font-face, I have become increasingly interested in learning more about typography and how I could use it in my pages. I am also very interested in robots. I have no idea when this started but probably around the time of Transformers and Robotech.

This is where the idea was born – when I was in art school I remembered doing exercises where we would have to design things using only type. So I decided to make the world my classroom and ask my students to create robots out of type.

But what good are dangerous looking robots if they are just standing there?

I figured that since I couldn’t actually make the robots fight that a voting system with a damage bar would bars would be a great addition.  I built the site on WordPress and used one of the many polling plug-ins out there to create the damage system. I also added the comments section so people could talk about the robots they liked and why, or so they could just talk trash about the one they didn’t vote for.

the font bot project

For me Font-Bot is just an ever evolving personal project. I am constantly making small tweaks to it with the feedback I have received from other designers in the community as well as the participants.

It has given me a lot more than I ever thought it would. I get great emails from people who have visited the site and enjoy it. I just received one from a college student in Tennessee who said his entire typography class is making font-bots as a project. I have also been lucky enough to receive a pretty steady stream of submissions. I even get submissions from non-designers, which is great. Just recently I received a submission from a writer. It has also been linked to in several online publications, most notably the recent mention in Smashing Magazine.

I realized the importance of personal projects through this experience. The site was not only fun to build, but also a lesson in design and development for me. It was one of my first experiments with the Modular Scale by Tim Brown. (You can also read more about the scale and Tim Brown here) It was also the first site I ever built using HTML 5 markup, and it built completely on WordPress. Although it’s not the first site I have built on WordPress, each one ends up teaching me valuable lessons.

I encourage other designers to create something for themselves and give it to the world. Doing so keeps your skills sharp and keeps you on top of your craft.

Design

Top 10 Strategies for Next-Gen Ecommerce

Does this sound like you? Two or three generations into your ecommerce site, your business is decent but flatlining. You’re on top of your metrics; you know your RPV, conversion, AOV, and dropoff at each step in your funnel. But conversion and average order have stopped growing, and you’re ready to evolve.

Ecommerce is changing rapidly. Consumers are expecting more of your site, and embracing modern techniques can invigorate your business. We’ve outlined ten strategies you can use to supercharging your ecommerce efforts below. Be sure to come back in the coming weeks, when we’ll describing methods of implementing each of these concepts.

  1. Dynamic Personalization / Collective Intelligence – Your site is collecting analytics data from thousands of visitors every day, and has been for years. How much of this data are you utilizing? Dynamic personalization puts it to use, immediately and with surgical precision. When a customer visits your site, even without logging in, within a few interactions a shopper’s persona is defined and business rules are applied to surface relevant content and functionality. Dynamic personalization providers include Baynote and RichRelevance.
  2. Social Network Integration – Social networking isn’t exactly new, but social shopping imperatives are constantly evolving, as we described in our posts detailing luxury brands and iPad usage and possibilities for the new Facebook API. At the most basic level, integrating a “Share” button that allows users to share your content to their favorite social networking destinations is a good first step, as is integrating Facebook “Like” button functionality. At a slightly higher level of customization and effort, there are login integration and review/ratings integration tools such as Facebook Connect. Sites like Social Commerce Today stay on top of social shopping trends and provide more robust examples of retailers leveraging social shopping integrations.

    steiner_like_button.png

  3. Mobile Sites – Over the past year, Ai has seen massive increases in traffic and transactions completed at client mobile sites. The age of the mobile site is truly upon us. Mobile consumers have different needs than users browsing on the desktop, and mobile devices have their own set of capabilities and limitations. A dedicated, designed mobile site experience is a must for progressive ecommerce retailers.
  4. Location-Based Tie-Ins -The GPS capabilities of mobile devices usher in a new era of exciting location-based cross-channel promotion capabilities. Examples include promoting products that were shopped-for online when the shopper is in proximity to a physical store, pushing promotions available at nearby physical locations, and providing interactive directions and pickup/availability notifications for shopped for items.

    Apps like FourSquare allow you to extend your reach by pushing promotions and specials and rewarding repeat shopping, all while extending your reach to a new customer base.

  5. Experiential UI – Beyond simply being easy-to-use, modern ecommerce sites for innovative brands can be experiential and immersive, transforming shoppers into brand loyalists by evoking an emotional reaction.

    The Wrangler Blue Bell Spring/Summer 2010 site (warning: music/audio) is a great example of an immersive/experiential UI where the interactions are fun and reinforce the brand message. Lowe’s Sunnyville (warning: music/audio) provides a game-based metaphor for shopping for lawn and garden products and project planning.

    wrangler.png

  6. Contextual Visualization – Shoppers increasingly expect to visualize how a product will fit into their life and style. Retailers who allow shoppers to visualize how products look on them and match with other products they are shopping for and already own will have a significant leg up in the ecommerce marketplace. The aforementioned Lowe’s Sunnyville site (warning: music/audio) allows you to “create your own yard” and see how various products will match your custom needs. The Laudi Vidni website allows to shopper to see their products on a virtual model, and takes the concept one step further by allowing robust product customization to suit a product exactly to your lifestyle and needs.

    lowes_sunnyville.png

  7. Dynamic Grid Expansion / Liquid Layouts -Ecommerce sites are typically designed to work in 1024 x 768 resolution in order to support users with older technology. Trapping your product display in this “fixed width” doesn’t cater well to the increasingly larger percentage of users browser your site at resolutions of 1280, 1440, 1600, yet most current e-commerce sites employ fixed width layouts. Utilize liquid layouts to dynamically size your product display based on the shoppers’ resolution. Alternatives include showing more images/product at once, and dynamically scaling to larger images on both category listing and product detail pages.As a corollary, Ai has found that the “view all” link is the most clicked link on the most ecommerce category listing pages. Shoppers don’t want to page through screens of products – they want to see all of it at once. Consider an infinite scroll metaphor in order to display large sets of products in a scrollable list, rather than asking shoppers to jump page-to-page. Ai implemented an infinite scroll on the PexSupply.com category listing pages. As you scroll down, you’ll notice the number of products on the page automatically increases, with no performance penalty.
  8. Minimize UI Cruft – Shoppers come to your site to see your products, not your fancy navigation systems. Yet most ecommerce sites spend a majority of screen real estate dedicated to navigation and ancillary functionality, and a minority of real estate dedicated to product. Modern ecommerce websites will reverse the trend and dedicate 75% of screen real estate to show product, with 25% for supporting navigation, not the other way around.
  9. Rich DHTML and AJAX - Dynamic HTML and AJAX technologies have been a boon to shoppers the world over. Instead of having to reload a page every time the shopper clicks, these technologies enable a world of rich interactions that are nearly instantaneous. While not new, most sites are still just scratching the surface of how to use these technologies in a robust manner. Here are some examples of how to take your DHTML into the modern era:
    • Mega Drop Downs – Mega dropdowns offer large panels that are easy to access, break navigation choices into logical groupings, and can feature dynamic or interactive content. Check out the Jakob Nielsen mega drop down article, featuring Ai-designed mega-drop pioneer Action Envelope. Also check out Ai-designed PexSupply.com and BizFilings websites.
    • Robust Wizards & Comparison Tools – Guiding shoppers to products that are relevant to them based on their needs and providing detailed, interactive comparisons between products can be taken to the next level using DHTML and AJAX. Check out Ai-designed Bizfilings Incorporation Wizard and Comparison Guide.
    • One Page Checkout – Why make your shopper click through multiple page reloads, when you can let them complete their purchase all on one page? Ai-designed Steiner Sports and Cache.com websites feature one page checkout.
    • Product Option Selection – Showing product availability in different option combinations (for example colors and sizes) is a common UI problem. Check out how Ai used DHTML and imagery on the Chelsea Clock website to display options availability by clicking change product options from the page linked above.
    • DHTML Kung Fu – Individually, DHTML techniques like promo carousels, tabs, scrollers, and other DHTML widgets can be powerful merchandising tools individually. Combined, they can allow you to take your site to new heights. Check out the Action Envelope home page
  10. Get Textual - Designers have been limited to a handful of “web-safe” fonts since the dawn of the web, and have had to hardcode anything else into images, slowing downloads and making custom messaging and personalization difficult and time-consuming. Not any more. With the advent of HTML 5 and font serving technologies such as TypeKit, the web designers’ typographic palette has been opened up as never before. This isn’t just a design nicety, but rather a critical innovation that will allow savvy companies to deliver targeted, personalized message in brand-consistent ways for the first time. The impact doesn’t stop there – not having to use images for any custom fonts leads to faster page downloads and great accessibility of type to search engines and disabled users. Ai has used these technologies on sites such as General Atlantic and Internet Retailer (not yet launched). Alternatives include sifr, cufon, and TypeKitga.png

Our focus thus far has been on strategies that are modern, or next generation. These assume you are building on a solid foundation of ecommerce best practices and test-based user interfaces. Consider the two “bonus” strategies below as necessary pre-cursors to the items listed above.

“Boring” Best Practices - Ecommerce best practices are a hot topic for a reason – they work. Ai has evolved a custom set of best practices for ecommerce over our past 8 years of experience, and applies these as the baseline of every site we work on. Yet some clients we’ve spoken to consider them “boring” and would rather skip right over to the sexier stuff. Our message is this: best practices work. We’ve seen far too many sites where the focus was too heavily on brand innovation or winning awards, and where conversion tanked. Make sure your design efforts are based off well-articulated and understood best practices for the site as a whole, and for each discrete stage in your funnel, from home page down to the checkout receipt.

A quick Google search will reveal an abundance of ecommerce best practices. Some good places to start looking are Jakob Nielsen’s Ecommerce User Experience book, and the Marketing Sherpa and Marketing Experiments web sites.

Test, test, test – Designing a best practices-based web site based on a deep knowledge of your customers and products is a great start. Integrating A/B and multivariate (MVT) testing into your process can take your site to the next level. At Ai, we have integrated testing into all of our design projects for the past few years, and have always seen measurable lifts in conversion and AOV. The kicker is that testing actually saves time and money by short-circuiting lengthy debate and review cycles.

If you are just starting out with testing, try Google Website Optimizer, which is a free tool with limited functionality. For the more ambitious, Omniture Test & Target provides a robust suite of MVT testing and reporting capabilities.

Integrating the ideas above into your ecommerce strategy will take your site to the next level. But how? Let Ai do it for you, or come back in the coming weeks as we delve into each topic above in more detail.

Design

SXSW Ideas: Sketching Your Own Design Process

uxd-too-too.pngIn my back-at-home SXSW Interactive rehash, I’m enjoying the slides from Chris Fahey’s talk on sketching and UX innovation. The big takeaway for me isn’t on forging creativity but encouraging pragmatism. Chris preaches a lot of what we practice at Ai: thinking about personas and uses to create clever solutions to design problems. It’s a smart mindset for any web project.

Chris’s slides give a nice insight into just how thorough the design process can be. A well-thought-out initiative considers everything from individual end users to the tone of the site’s calls to action. Most importantly, Chris admonishes UX folks to try. Try things, see what works, and ultimately strike the balance between concept and execution. Indeed.

Reblog this post [with Zemanta]
Ai

Designing for every audience

Did you know Google’s Chrome browser already has 5 percent of the global browser market? That it’s bigger than Safari?

And are you aware that, despite your (or your designer’s) disinclination toward it, Internet Explorer 6 still commands roughly 12-15% of the space?

These figures–and the specifics of browser traffic on one’s own website–matter, a lot, when new projects get underway. Google’s 5% market share means it’s officially a player in the browser wars and not just a side project. That means adding it to QA plans and considering some of its innovations, like proper use of HTML5.

At the same time, the continued prevalence of IE6, however sad, means that cutting-edge site design still needs to degrade gracefully to support the many corporate web surfers that can’t upgrade their browsers. Certain b2b or enterprise-positioned websites may have an even greater percentage of IE6 traffic, just as sites with a more academic or creative bent often have an outsize share of visits using Safari.

All of which just serves as a reminder that multiple browser testing and compatibility remain crucial in web design in 2010. The same hurdles the industry faced when balancing Netscape and IE in 1999 exist today, perhaps even more so. Expect the cries for standardized code to get louder this year and next as the market shifts and fragments. And in the meantime, don’t forget to give your site a proper run-through.

Or four.

Design