Monthly Archives: October 2011

Part of developing a site or deliverable is adding fun easter eggs in your work. For the longest time, “Rick Astley” has been the ongoing username used in our wireframes. Sometimes, when a video placeholder is needed, you would even see the first frame to Mr. Astley’s iconic video.

When we developed our redesigned website, we also had a bit of fun.

Doctype
Back in the days of HTML4 (although most people are still living in it), it was required to declare the DTD (Document Type Declaration) after the “public” keyword. However, this is optional for HTML5. These days, the only thing we care about is to declare the doctype at all, just so Internet Explorer doesn’t drop into quirks mode:

<!doctype html>

So now, the quotes after the public keyword can be customized to however you like. As an example, if you go to html5boilerplate.com, you’ll notice that they customized their doctype with a star.

Go ahead and check out the source for our site, as well as this blog. Here’s a hint of what you’ll find:

Shake It Up
Another great feature that gives a new dimension of interactivity is the “devicemotion” event, which can detect the x/y/z motion of a device with an accelerometer. On your iOS, Android, or even Macbook with an accelerometer, try shaking your device on our “Who We Are” page.

Jeffrey Chew
Director of UI Design and Development

In my role as a business analyst at Bootsoft I see a lot of technical writing, much of it terrible. For some reason, people whose job it is to be precise and logical often fail to do so when the language of expression is English, rather than Java. While the problems in technical writing are varied, the offense I most often see is overuse of the passive voice.

For those who don’t remember their junior high school grammar, passive voice is a grammatical construct in which the object of a sentence is repositioned as its subject. “Tom throws the ball” is active voice, while “The ball is thrown by Tom” is passive. The use of passive voice in itself is not grammatically incorrect, but it often weakens the clarity of the writing by obscuring who or what is doing the action in the sentence.

Technical writing is a veritable breeding ground for passive voice proliferation, in many cases because the actors in technical writing are not tangible. The actors are software code, or systems, or networks. My phone today popped up an alert that said, “The server cannot be reached.” Who exactly is the one not reaching the server? Is it the phone? Is it the app I was running? Is it me?

But just as a writer would avoid passive voice in “normal” English prose, so too should a technical writer avoid it in his work. Phrasing technical ideas in the passive voice dampens the agency of the thing doing the action, making it seem unfamiliar and disembodied. Technology does things. To render technology in the passive voice is to distort its power to create change.

This is especially evident when technical writing refers to error conditions, as in the case of the alert above. It’s almost as if the authors of the software were deflecting blame away from themselves with the message, “The server cannot be reached.” They could just as easily have said, “It’s not our fault that you can’t access this page. Talk to the dudes who run the server.” (People in IT love to blame the other guy, but that’s a story for a different post.)

It’s never that difficult to clean up language like this in one’s technical writing, but it often requires ascribing some degree of agency to to the technology. Instead of “The server cannot be reached,” one could write it as, “The application failed to reach the server,” or, “The application failed to connect to the server.” If English had a better indefinite subject pronoun, we could even write something like, “One cannot reach the server at this time.”

There are any number of solutions to the problem of passive voice in technical writing. The main thing is to be aware of the easy pitfall, and to think about technology more as an agent of change than as some hidden force behind the things we observe.

read more from Jamie at jamieforrest.com

Over the seven years I spent with Bootsoft, I’ve seen the company grow from a development company, to a fully evolved team that provides everything from well-defined discovery, smart development, and a refined maintenance/support process. During that time, I was able to add usability and information architecture to the many services that Bootsoft provides today. However, one of the bigger milestones for both Bootsoft as well as my career was the birth of the Creative team last year.

As with any client’s redesign (or initial design for that matter), it’s important to understand the business goals, objectives, identity, and overall brand. Our creative process includes many steps and deliverables in order to identify these points, as well as a game plan on how to achieve the client’s needs. We deemed Bootsoft as a client, and treated ourselves no differently.

The User Experience

As part of our research, we studied the competition as well as applying what we know about our previous site visitors. We identified the target user personas, then began to structure how we want to deliver our message using UX design and information architecture techniques.

In parallel to this, we generated and explored various mood boards to get a better idea of the look and feel we wanted to achieve.

Based on feedback and several iterations, we were able to determine the general feeling we wish to convey to our visitors, as well as how our visitors can find the information they need quickly. This brought us to two different design directions; circle and square.

As with any design process, iterations can conceivably go on forever. We tasked ourselves with defining the pros and cons of each direction, then ultimately deciding on one. From there, we took the things we liked from the other and applied more detailed iterations. The end result is the site that you see today.

Interaction Design
The look and feel is only half the battle when it comes to design. What the user sees has been established, now how about when the user starts clicking around? One of the continuing mantras said throughout the discovery process was “no flash”. The whole Internet industry is abuzz with “HTML5”, and we wanted to flex our muscles as a company to show some of the latest and greatest your browser has to offer.

It’s easy for a designer to get carried away with how a site should behave in their mind. This is when it’s important to sync with a front-end tech lead on what we can and cannot do, according to the browser scope of the project. Storyboarding the site interactions is important to convey these ideas, either by conceptual or detailed wireframes.

In the past, we were accustomed to developing the “pixel-perfectness” from browser to browser. However, the industry is gradually seeing the importance of delivering speed and good UX over visual or functional consistency. This is why progressive enhancement is Bootsoft’s approach today over yesterday’s idea of graceful degradation.

Progressive Enhancement
As a front-end developer, I was no stranger to browser sniffing and conditional behaviors. I still cringe when I think about how much Netscape 4’s DOM differed from Internet Explorer. As part of progressive enhancement, the idea instead is to set a baseline that all browsers can understand, then go from there. We use a couple of tools in order to achieve that “reset”, then feature detection:

Because we want to develop our site using HTML5 semantics, it’s great that Modernizr includes an HTML5 shiv that will allow “oldie” browsers like IE6/7/8 to interpret tags like HEADER, NAV, SECTION, etc. For anything more complex, we use Modernizr’s feature detection to determine if the user’s browser can handle certain code. Because our site is almost completely based on CSS3 transitions, here’s one we used multiple times:

if (Modernizr.csstransitions){
// do some awesome stuff
}

CSS3
Everyone talks about HTML5. In layman’s terms, when a user sees something that is accomplished without flash, it’s easy to say “oh, that’s HTML5”. Well, that’s partially right. By definition:

HTML5:
(n) 1. The next version of HTML. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices

In general, HTML5 is the combination of HTML, CSS, and JavaScript. A good chunk of the “magic” in Bootsoft’s new site is in CSS3, both rendering and animations. Because we chose the “circle” route, the site heavily uses rounded corners on elements. If you look at the http requests on our site, the only images that are loaded are the employee images, carousel images, and logos.

Another added benefit of CSS3 transitions is that animations are hardware accelerated. If we tried to achieve the same kind of animation on the “Who We Are” page using JavaScript, the page would get choppy. We made use of the “translate3d” attribute for transitions especially so webkit browsers will take advantage of the acceleration. Try using one of the dropdowns, then repeatedly clicking one of the options.

Google Chrome Frame / IE[x]
The benefit of progressive enhancement is that the site will still generally look fine even on the most stubborn of browsers (i.e. IE). Short of forcing the user to switch to a different browser entirely, another option we give our users (for those viewing our site in IE7 or below) is to install a plug-in called “Google Chrome Frame”. This was developed by Google, and is a plug-in for Internet Explorer that generally makes it behave like Chrome. The added bonus is that it automatically updates, just like Chrome. It installs in seconds, and the user can see all of the new and fancy things that Chrome has to offer, while still browsing comfortably in a browser they have grown used to using.

Although realistically we still need to support the browsers our clients task us to develop for, we hope that this “solution” catches on. As we’ve developed more HTML5-friendly sites, the more we’ve realized that IE[x] is the new IE6. Paul Irish, one of the developers on the Google Chrome team and leading front-end developers of the industry, has a great write-up on this.

Responsible Web Development
Whether if we’re developing a generally small site like ours, or an enterprise level web application, we always hold ourselves to the best practices of web development. The front-end in particular is rapidly becoming more robust, and can become unwieldy and harder to maintain when losing focus on how it is built. And with this great power, it means that much more responsibility that falls on the developer.

Wrap-up
Any project can easily stray off the path, especially in our own site redesign considering this project has a very close emotional attachment to all members involved. That is why our process played a crucial role in moving forward with our milestones and eventual site release. It also doesn’t hurt to have a stellar team working beside you every step of the way.

Jeffrey Chew
Director of UI Design & Development

Every year, more and more people are using the internet to read the news, go shopping, and pay bills. But the pace of change on the internet has been accelerating faster than anyone expected. As a result, businesses are increasingly looking for technologies that allow them to react quickly and keep their online content fresh.

One such solution is a Content Management System (CMS). A CMS allows site administrators to easily add, update, and delete content on their site. For example, if the business is launching a new product or marketing campaign, administrators can rearrange their homepage to feature the new product, or create a new landing page for an email campaign they sent out to 1 million users. They can even add web analytics tags to track conversions without assistance from their development team.

Of course, not all CMSs are created equal. Each has its strengths and weaknesses, and each has quirks that make it good for certain sites and bad for others. We discovered this as we went through the process of selecting a CMS for one of our clients.

Before we even began thinking about technology, we started with a phase that we call discovery, during which we get to know everything about the client’s business strategies and goals. The idea is to leave no rock un-turned, ensuring that the solution is designed with the client’s needs in mind. Based on our findings, we knew an open-source PHP-based CMS was the best solution for this client.

Once that important decision was made, we evaluated close to 40 different solutions and narrowed the list down to the top five: Concrete5, SilverStripe, Drupal, Joomla, and WordPress. We performed a side-by-side comparison based on the following criteria: Ease of Development, Ease of Design, MVC Architecture, User Registration, User Permissions, Ease of Upgrade, Ease of Administration, Performance, Security, and Licensing. Our main goal was to select a CMS that satisfied as many of the Client’s business requirements as possible and would serve as a solid foundation for future development.

As we compared the solutions, it was quickly apparent that WordPress would not support the breadth of functionality needed, and it would require a large amount of development to add such features as message boards and slideshows.  Drupal and Joomla on the other hand both have a large number of add-on modules, but the quality of the modules varies greatly, since most are developed by individuals and have little or no customer support.

That left two contenders: Concrete5 and Silverstripe, both of which are mature, stable and extensible. After some testing, we found that Concrete5 better suited the needs of the client as it was easier to customize and more intuitive for site administrators.

Once we selected Concrete5, it was time to implement it. Although this CMS was new for Bootsoft’s development team, they found it very easy to work with. More importantly, the client has been very satisfied with the CMS and how easy it is for their administrators to make updates.

If your company could benefit from a Content Management System, please don’t hesitate to contact our sales team by email at sales@bootsoft.com.

Steve Mayotte
Project Manager & Business Analyst