Web Development

• There is a new breed of online video consumers: those who consume via mobile devices. Is your business utilizing HTML5 video to tap this growing marketing?
• We share more of our Internet marketing predictions on the Galvin blog. 2012 is the year to really think about how you are engaging, converting, and retaining your website visitors.
• Did you know you that by employing certain web technologies, you can create a game? Check out the reality of HTML5 Game Development and where it’s headed in 2012.
• Web developers will love this! “HTML5 Please” allows you to keep track of what parts of HTML5 and CSS3 that are supported in today’s web browsers.
• Firefox 10 was released January 30, 2012.Mozilla’s Firebug interface got a makeover, focusing on making the user experience a bit more polished. What do you think?

Project Management

• Our senior project manager, Crissy Koger, shares her experience at a restaurant. It’s not a surprise to find out that even waiters have trouble getting requirements from clients.
• Thomas Paine once said we should lead, follow, or get out of the way.Project managers are no stranger to this philosophy. Do you think followship is what makes a project manager effective?
• Project managers can ask questions all day long, but are you asking these 20 questions that should always be asked, regardless of project or organization?
• Generational awareness is another skill that project managers must learn how to master. Are able to recognize generational differences within your team?
• We admire the Veterans who have defended our country and protected our freedom, so we thought it was right on par to hear why veterans make good project managers.

Interactive Design

• Great mobile designs consider the clumsiness of our fingers and limitations of our hands. Are you designing for touch in an ergonomic way?
• Our senior interactive designer, Kiley LoCascio, shares her predictions for the responsive web in 2012by laying out the changes to the development process. Are you ready for a more agile approach to responsive design?
• Typekit released a new feature, which allows you to browse by list. List features include font organization by theme, intended use, and defining characteristics.
• A responsive website demands flexible images. Responsive images can work, but there is a better solution waiting to be discovered by designers and developers alike.

Software Engineering

• Many software developers do not fundamentally understand the nature of the SharePoint beast and what exactly it can do. Are you able to wrap your head around this application?
• Sometimes those 30-day trials aren’t worth the download. As more and more software is spit out on a daily basis, we hope that businesses keep in mind that features and functionality should be communicated to the user before they hit the ‘Download’ button.
• Salesforce released a new help-desk application this week called Desk.com, which helps you reach end users through social media networks like Facebook and Twitter.
• Performing inspections and walkthroughs reaps benefits to your software development team, such as sharing a knowledge of the code. Is it time to rethink software development, testing, and inspection?

Expansion & Change

With the expansion of different web devices the context in which people view web design has changed dramatically. The number of people using internet-based applications and websites on their TVs, smartphones, netbooks and tablets has grown exponentially in 2010 and 2011. It was “The Year of the iPad For the Second Year in a Row“, according to Horace Dediu of Asymco Research Blog.

These changes have paved the way for how web designers think about web design as a whole. Web designers knew the way they created user experiences needed to evolve, as well as the strategy for how the content was going to be delivered. The acceptance of thinking beyond one explicit screen size is now more than just a trend, it’s the foundation for how designers think about user experience design. Responsive Web Design shows how designers are committed to giving the best experience possible no matter what the context. A plethora of information exists out there on this topic in many different forms: events, books, blogs, galleries, slide presentations, tools and grid systems.

With this adaptive design strategy, web developers and designers now have to not only educate themselves on a technical level, but devise new processes and strategies for their teams to be able to utilize. For any size company this can be a bit of a struggle. There are budgets, timelines and client expectations to consider. Any significant leap in evolution in any area of study constitutes a significant change to the methodologies and processes that create it.

“Action and reaction, ebb and flow, trial and error, change – this is the rhythm of living. Out of our over-confidence, fear; out of our fear, clearer vision, fresh hope. And out of hope, progress.”
- Bruce Barton, BDO Advertising

Design Process

For Galvin, our design process consists of wireframes and design compositions for those wireframes. Most project’s wireframes account for the “highest common denominator” screen size. This information comes from the World Wide Web Consortium (W3C) and basically means that we account for the highest probable number of users. A few years ago, before the dramatic change in the popularity and number of different screen sizes, developing for this common denominator was standard. The percentage of users at one given size was usually above 50. But now in 2012 with more users viewing sites on large desktop displays and small mobile devices, the common denominator has dropped to under 20%. Responsive Design allows us to account for these different screens sizes, so we can target a much wider user base and give them the best experience possible.

This new design strategy will change our process as follows:

1. Understand targeted audiences and their contexts.
2. Devise strategies and goals for each specified screen size being targeted.
3. Create wires for specified screen sizes.
4. Create comps for specified screen sizes.

Development Process

The changes to this phase will have the biggest impact on the success of a responsive site. Designers are asking front-end developers to essentially be designers and vice-versa. The way the site moves and handles elements from screen size to screen size is very organic, so the process that created those elements needs to be organic.

An example of a less responsive approach to this phase would be:

1. The Designer creates compositions.
2. The Coder then takes compositions from the visual designer and develops them.
3. The Designer reviews and tests code.
4. Lastly, the changes are made and site is complete.

This process is limited because the designer and developer have only one chance to be successful. With responsive sites there are so many different scenarios and opportunities for inaccuracies that a more agile approach is needed. Something similar to this:

The Designer creates compositions, the coder then develops them and they both test the site on different devices. That entire process continues until the project’s goals are accomplished.

Management Process

A more iterative creative process means more work and more time. The essential strategies and concepts would get flushed out in the design and development phases, so it would certainly make budgets go up and timelines widen. The biggest opportunity to overcome the hardships for these two items is to plan for them in the beginning of the project. Sales and management teams can do this by following a few key tips:

Create a Specific Question Checklist for New Clients

A. Does the client’s audience support many devices?
B. Does this application only need to support one screen size?

Get a Feel for Timeline

A. Can you deliver specific experiences to multiple devices in the allotted amount of time?
B. Are there devices that are a higher priority for a phased out approach?

Weigh the Pros & Cons

Although it would be wonderful for the client’s new site to be completely responsive with four different screen sizes, sometimes their budget and timeline just won’t allow for it. So in this case start backward for the strategy; from one screen size, to two, to three until there is a middle ground met. The great thing about Responsive Design is that it’s so easy to change in the future if you plan for it at the start.

Looking to the Future

Responsive Web Design is not only changing design for the web, it’s changing its processes. Any company that wants to create sites that are responsive has a good deal of work ahead of them. Companies, especially small ones, can’t just change overnight. It takes education, planning, commitment and even better internal and external communication. Timelines, budgets and client expectations are affected and should be accounted for from the very beginning of project conception. Even with these hardships, companies that adapt to and adopt this new optimized design strategy have a great opportunity to distinguish themselves from the rest. I encourage all development companies to overcome the fear in changing and help others advance design for the web.

Web Development

• How do you cope with HTML5’s dueling standards bodies while supporting web browsers that are becoming more fluid?
• The line between writing books and programs has gotten more blurry these days. Will you take advantage of the tools Amazon has released to allow you program e-books with HTML and CSS?
• Great news for mobile web developers! They can now utilize jQ.Mobi, a lightweight and faster mobile-optimized HTML5 rewrite of the JQuery Framework.
• Firefox has slipped in the web browser market, falling behind Google Chrome. Many users have their reasons for switching, but what will Firefox need to do to get back on top and regain dominance in the market?

Project Management

• How do you kill the switch on a project that is doomed? First of all, don’t declare “done!” Check out these five key strategies that will help your organization to fail fast on projects.
• Project managers should carry out a Lessons Learned meeting with the project team at the conclusion of a project to reinforce both the positive and negative experiences. What kind of questions would you ask your team?
• Project expectations and deliverables are equally important, and should be your focus of every project. Our VP of Professional Services, Tom Schaetzle, shares what it means to go above and beyond client expectations.
• Are you showing your appreciation for your project team? Positive feedback is crucial to any project team’s success. Here’s what it matters so much.
• Ten Commandments of Project Management is a great set of rules that any project manager should follow to help lead them to success.

Interactive Design

• Mobile design is about your audience’s culture, the tasks they want to complete, and the context in which they complete these tasks. Are you raising the bar for mobile standards?
• The Internet is not an interactive Postcard according to the Big Spaceship! There are stark difference between digital and print typography. What would you add to the discussion?
• Responsive design is a process that first requires you to define your break points. Here are some tips that will help to create a better workflow when designing for Smartphones, tablets, and wide-screen monitors.
• When you design a landing page, it is important to make it as visually appealing as possible. Likewise, it should be easy to navigate and error-free. Here are some other unbreakable rules to consider when designing landing pages.

Software Development

• Application developers are expected to favor the Android platform over the iOS platform within the next year. However, good news for mobile users: nearly all developers will choose to support both platforms.
• Have you ever wondered how open-source software is made? If you use the web browser Firefox, it might be easier than you think to contribute.
• Windows 8 Beta is coming out in February with the release of the Windows 8 store. Some of the store app developers speak out against the lack of proper documentation during development.
• Search engine optimization can easily be integrated in your web development process. Developer can use these 7 tips to enhance websites without the magic work of an SEO expert.
• Does America have a developer shortage? Employers are saying that they can’t find enough programmers, but could they be going about it all wrong?

Web Development

• Want to establish an online authority? Here are 11 ways to use content to do so.
• The World Wide Web Consortium (W3C) publishes a draft of media accessibility requirements.
• Web developers have a lot to look forward to in 2012, like saying goodbye to IE6 support. Here are 4 other predictions.
• Foursquare’s mobile recommendation engine, Explore, hits the Internet this week.
• Did you know people spend an average of 94 minutes per day using mobile apps? Web consumption wanes as mobile app usage skyrockets.

Project Management

• Here’s a great project management tip for the week: remember to send a follow-up and offer help after a project status meeting.
• We’re half-way through the new year, but here’s 10 project management trends to watch out for in 2012.
• An effective status report should accommodate the needs of executives, the project manager, and the project team.
• Do athletes make good project managers? Here’s a look as to why this may be true.

Interactive Design

• Now is an important time for design; we can’t deny its role in the evolution of the Internet.
• Do you want to tell your client’s story? Then make web content and design impactful.
• The web community is still predicting the top web design and web development trends for 2012.
• To communicate effectively in web design, use the proximity principle.

Software Development

• Need to align people, technology, and process? Then check out this SharePoint implementation checklist.
• There are several ways to capture mobile users, including through the development of mobile-friendly sites, custom mobile sites, and native apps.
• The future of software development is ever-changing, but it might include “probabilistic” applications.
• Building secure .NET websites and web applications isn’t easy, but here are some tips and techniques to consider.
• We thought this was a great read. Ever wonder how to to get software developers to document their code? Here are few tips that might help.

Other Noteworthy Highlights

• This week, Congress felt the backlash against SOPA and PIPA, two bills that threaten the Internet economy as we know it.
• Many websites, including Wikipedia and Google, planned an blackout on Wednesday, January 18 to spread awareness to users.
• The results were stunning. More than 2.4 million Tweets were sent and Google collected 4.5 million signatures to stop SOPA and PIPA.
• As a web company, we understand the significance of these bills and plan to share our thoughts on the issue soon.

When I made the decision a few weeks ago to purchase a tablet I started to do some preliminary research.  To that point in time, I really hadn’t investigated what was available. Sure, I’d heard about the e-reading manufacturers branching out in to the mobile browsing market, but I wasn’t quite sure to what extent.

What I found I really surprised me. There were no fewer than 12 seemingly good options from a hardware standpoint that were available.  This got me to thinking about how we, as the web and software development industry, will deal with the explosion of available devices that should be accounted for from both a technical and strategic standpoint.

Do we test against Amazon’s Kindle Fire Browser? If so, how do we account for the upgrade that will be released mid-way through a project? I would think that they’ll be enough browser versions, hardware types, and screen sizes to make all of our heads spin.

I’m not sure that the businesses we serve have fully adapted to the explosion in HTML browser compatible smart phones yet. Now they need to be budgeting for design and testing considerations for screens ranging in size from 3 to over 10 inches in size as well? What a challenge awaits our industry, along with the marketing industry, as we go through these changes!

For the time being, I suppose that we’ll all do our best to identify key systems and audiences like we always have, we’ll just have to broaden our view of what the possible answers could be. It probably won’t be so simple as to account for iPhone, Blackberry, and Android devices any longer. You’d have to expect that budgets will be raised to account for these key users and their respective platforms. 2012 is going to be an interesting year for our industry and I am excited to see how these changes affect the way in which we approach our work.

And…for the record, I did end up going with the Samsung Galaxy Tab 10.1. I’ve had good luck with the Android platform to date, although the app selection does seem to be a little less well-developed than the iPad offerings, but I’ll save that for another post on another day.

Merry Christmas Everyone and happy Tablet-ing!

Principle #1: Wording (Unity)

My husband and I recently bought a new Blu-ray player for our home. After doing some research we decided to buy an LG. It had all the features we wanted; 3D compatible, built-in hard drive, WI-FI and streaming; the works. So we set it up and the first screen we were presented with was this:

LG User Interface

Simple enough right? Well not really. The most important feature for me was connecting to streaming content. Pandora, Hulu, Netflix, etc. Now, in these six options which one would you think takes you to those? I’ll give you a hint, it isn’t Movie, Music or LG Apps. Out of only six options I still found myself trying to deduce which choice was the correct one. The designer chose to name this area “Premium” and the areas that didn’t take me to streaming content something similar to the type of content I was looking for. The naming of this section is misleading and doesn’t define for the user what content is in that section. Your users shouldn’t think of interfaces as multiple choice questions; I know A, B and D are definitely not it so it must be C. This naming convention is simple, but not effective. Simplicity in interface design is good but not at the expense of confusing the user. If the nomenclature simply describes what the user will see, you will see them using it.

Principle #2 : Consistency (Harmony & Variety)

I have read many recent articles discussing how consistency in interface design can stunt creativity. Many user experience designers believe that without openness for change there is no room for growth. Without variety users will stop being interested in the product. If your users aren’t interested than what is the point of making it usable? The most popular example of this ideal that I have personally experienced is in mobile devices. The opposite end of this spectrum would be Harmony, using the same element for the same action in all scenarios; road signs, parking lots and elevators. These day-to-day events that people have interactions with feel more transparent; almost forgettable. There is some truth in both of these logics and it’s the balance of these that will make the experience diverse enough to be enjoyable but still consistent enough to be intuitive.

Denver Union Station homepage

Denver Union Station section landing page

I came across this site the other day, unionstationdenver.com, and felt not only was the design aesthetically pleasing (using the elements in an effective way) it was also unique. So what makes this site unique, or more specifically how does the user experience evolve? An example of this is when the user travels from the homepage (first image) to a main navigation section (second image). The location of the main navigation changes when the user makes this transition. We have seen many sites that are within a 1 page space, but the main navigation items actually go to a different URL. The user is aware of the change but accepts it because of how the designer uses the elements consistently. We don’t mind the location of the navigation changing because it looks exactly the same in size, color, value and shape. This balance of change and consistency in the example creates excitement yet inspires trust and acceptance into the user. The site grows the idea of how to use a very fundamental part of a website and at the same time keeps it easy to use. It is harmony and variety working together to create a better experience.

Principle #3 : Layout (Balance)

I grew up on Windows machines and then when I got to college I bought my first Apple computer. Since that first iMac I have seen Apple’s interfaces evolve. So, before I discuss Balance, I want to say I absolutely love the experience on a Mac. In saying that, I am now going to pick apart an interface in OS Lion I find to be a rather poor example of this principle.

iCal OS Lion 10.7

iCal OS Snow Leopard 10.6

With any new operating system there will be changes that the user will have to learn. How else would designers improve experiences? It’s when designers stop thinking about how their product is used on a regular basis the experience starts to fail. The new iCal interface for Lion (first image) has the “View” buttons at the top and centered. The “Today” button, that takes you to the current day, week or month, is now below and all the way to the right. I use iCal quite a bit during the day and I always have to go back and forth between weeks and months. To have the Today button is a great way to bring me back to the present without changing views. I’m already using the controls at the top and now have to go all the way to the right and down to get back to where I started. While the “Day” view will take me to the day at hand, what if I want to stay in “Week” view? Comparing it to Snow Leopard (second image) the “Today” button was at least in the same area of the View buttons. The rational for deciding the layout of elements really stems from thinking, “If the user takes this action, what is going to be the next most common action.” Adopting this principle for all decisions concerning layout will keep it balanced and usable.

The Final Piece

The Principles of User Experience are the same principles of any design medium. Wording, consistency and layout all have to be there for the interface to be successful. Utilizing these basic principles will create an effective user interface, therefore creating a pleasurable experience for all users.

Design is the most important part of any website or software project because it’ll impact the user experience. Don’t get me wrong, without the database, the software code, the testing and everything else “under the hood” the application won’t work so I don’t want to give the impression that those aren’t important because they are. But it’s the user interface design that allows a user to interact with all that functionality and put it to work.

But does functionality drive design or does design drive functionality? Ultimately, they need to come together at the same time. We have taken on development projects and the designs for the user interface were already complete but the functional requirements have not even been defined yet. We have also taken on design projects where everything has been developed but nothing has been designed yet. These have each created obstacles and some rework.

The ideal situation is to make it a collaborative effort. Design teams and development teams have to work in unison and the best way to do that is to get all sides engaged from the very beginning. When the functional requirements are being defined you would want the development team and the design team discussing how each requirement will function as it relates to the overall experience while being mindful of the budget. Once the functionality has been defined then both developers and designers go into their corners and work on their next deliverables while the business analyst starts writing the use cases (or user stories) for those requirements. The user interface designers now know how the application will be architected and what the solution needs to be so they are able to take those requirements and start creating the wireframes. Each wireframe will be designed so the functional requirements can be met. After all this is complete then the beauty starts by creating the graphical design which now matches the wireframes which matches the functional requirements.

The first step in understanding the differences in strategy between the two is to understand the difference between a mobile website and a
“mobile friendly” website.

“Mobile Friendly” websites on the other hand, utilize traditional web design, but are developed in such a way that they will display accurately on a mobile device. In this way, the website will work on a mobile device, but because of the difference in the size of the display area, the user must manipulate the site to find the information they seek.

Because of this difference in display size, and the poor user experience it can create, a best practice is to account for the mobile user while design your website. This specialized mobile interface is customized to the smaller display areas of mobile devices and is automatically loaded when a user visits your site via a mobile device.

In order to make maximum the use of the smaller display area, while ensuring the smoothest user experience, you should streamline the immediately available information within the mobile design. This is probably done shortening the navigation of the site.

Another difference between a traditional website made to be ‘mobile friendly’ and a truly mobile website, is the bandwidth, and subsequent load times, of a mobile device. With this consideration in mind, you should also look to limit the size and quality of the images you select. Smaller, less high resolution images load faster and, due to the smaller overall display, look no different than their traditional (full high resolution coupled with large display area) counterparts.

Combine all three of these techniques and you’ll have a good looking, fast loading, and easy to navigate version of your website that caters to the mobile user. This leads to a positive user experience and an increased awareness of your company and your products or services.

Let’s take a quick look at Panera Bread as an example. The first photo below is of their traditional website. Large high resolution images highlight a full featured website with a full navigation system. This works splendidly in a traditional desktop environment where a high speed connection
and full display is readily available.

This second photo from Panera Bread is of their mobile website interface. As you can see, they shortened the navigation system and made use of smaller images. This causes the site to load faster, while presenting users with specific information that a mobile user might be looking for. The end result is a great case study on understanding the differences between traditional and mobile environments.

While growing up just outside of Detroit, Michigan, Gary Galvin had a close relationship with grandmother.  She also happened to suffer from Rheumatoid Arthritis. Even as a child, Gary could see the pain and suffering this brought on his grandmother. At the time, there just wasn’t much that could be done to counteract the effects this debilitating disease.

Fast forward 20 some odd years, when Gary had become a successful business owner an a outgoing member of the Indianapolis business community. It was then that Gary’s own mother was also diagnosed with Rheumatoid Arthritis. At first, this was terrible news, leaving Gary to think back to the effects the disease had on his grandmother and fearing that those same effects would now burden his mother as well.

After talking a little bit more with his mother and her doctor, however, Gary learned that advances in drugs and treatment methods over the previous 20 years had significantly reduced the footprint that Rheumatoid Arthritis took from people’s lives. This advancement, in large part, could be attributed to the work of the National Arthritis Foundation.

It was then that Gary decided to make a commitment to the Arthritis Foundation and went so far as to join the board for the Indianapolis Branch of the organization. As a member of the board, Gary was exposed to many of the fundraising events that the Arthritis Foundation put on each year. One new event in particular caught Gary’s eye. The Jingle Bell Run was scheduled for early December and was intended to be a fun filled, festive, 5k run/walk, full of the holiday spirit.

When the need arose for a website that would help the Arthritis Foundation market this new event, Gary was happy to donate the design and development of the website for the initial Jingle Bell Run. That initial commitment continues today. It has become a July tradition for the Arthritis Foundation staff to come to the Galvin offices for lunch, while noting what aspects of the site will be revised for that particular year’s event.

With the 2010 event raising just over $50,000 for the research and development of treatments for arthritis, the Indy Jingle Bell Run has continued to grow over the last 4 years and is now one of the largest Indianapolis Arthritis Foundation events of the year, as well as, one of the top Jingle Bell Run events for the National Arthritis Foundation. Even today, the Indy Jingle Bell Run website is the only dedicated marketing website that any regional Arthritis Foundation has and is the envy of Jingle Bell Run event coordinators nationwide.

Galvin Technologies’ commitment to the Arthritis Foundation has also continued to grow. In 2009 my own father was diagnosed with RA. I, much like Gary, hated to see a loved one be limited in the things that they enjoyed doing. As a result, my wife and I joined the event planning committee as the Logistics and Planning Coordinators for the 2010 event.

I can tell you firsthand that event is growing and the magic of the holiday season really makes it something special. There is nothing quite like hearing Christmas carols echo off the downtown Indianapolis skyline just before as the race starts, only to have them be drowned out by the ring of complimentary jingle bells that the 4,000 participants each tie to their shoes. It is that moment that makes all of the time and effort that we put towards the event so very worth it.

For more information on the Jingle Bell Run, please visit www.indyjinglebellrun.com . You can register for the event here. For more information on the Jingle Bell Run or on Galvin’s continuing efforts to enhance the Indianapolis Community, please give us a call.

My husband and I recently bought a new home in the urban but antiquated town of Mt. Lookout in Cincinnati, OH. Being as it is our first home and more space than our usual 900sf, we required some furnishings. What does one think about when they have to furnish almost an entire home; how much can I stretch my dollar? Enter in IKEA. To our delight, and to my bank account’s demise, the notorious moderately- priced home furnishings mega brand was only 20 minutes away! Hip-hip hooray! We spent an entire day in this store and from the very first moment we walked in the experience was engaging, fun and rather addicting. Taking into consideration all of these wonderful emotions it was also a bit overwhelming and at the very end, a bit aggravating. Will this stop us from returning, not in the least.

So how does this relate to designing and architecting for the web? When we start creating a wireframe or start planning a user-flow we can begin to see the different paths the user might take. All of these paths will cause them to have different emotions. Analyzing the paths I took in the IKEA store, we can learn how to control user’s paths and give them the most desirable experience possible.

Set the Tone with First Impressions

From the very first moment you walk-in IKEA you are greeted with a smile from a friendly employee and a large yellow bag to put items in you will inevitably purchase. Right next to the bags are huge bins filled with many new and trendy items that you obviously just have to have! Genius!

Your homepage is your first impression. The homepage should say in the most concise way possible, who you are and what you do. It’s a bright bag for you users to fill with hot topics and tantalizing tidbits as they click and want to learn more. Are you giving your user’s what they need right from the beginning?

Give Users Options While Creating Shortcuts

The IKEA Maze, as it has become notorious for, is to keep people interested and shopping. The architects of their floorplans want to give people options incase they don’t know what they are looking for. Therefor their store has different paths you can take to get right to a certain department.

A well developed layout on all pages is just as important as one on the homepage. Use these inside pages that have a larger amount of content to call-out important topics from other parts of the site that your users might not have known they wanted. What are the topics you think they could be interested in and what do you want them to take away?

Exits Shouldn’t be Difficult to Find

The only real issue with my experience in IKEA was at the end. That day my husband and I spent many hours going through pathways, hallways and doorways of their impressive layout and at the end of our journey we just wanted to check-out! Surprisingly enough it was difficult to know where to actually purchase my must-have trinkets.

Your user should always know where they are in the site. A clear typographic scale in all navigation areas will help insure this. Make active states easy to deduce from inactive states. Titles for pages can be unique but should be easy to find. Also, editing the amount of pages and controlling the different types of navigation you have will keep them from not being overwhelmed.

An Enjoyable Experience

The user experience of a website or web app should be engaging and never difficult to navigate. Your users should always know where they are, where they were and where they are going. By not aggravating the user with too many options the experience can be enthralling and the important information is digested.