GiveBack NY Round 2

Bootsoft is always trying to find ways to contribute to the community, and one of our favorite ways is using our skills to give back! Over the weekend of November 1st-3rd, we had another GiveBack NY event (formerly named Create-a-thon). Since our last event in April 2013, we’ve partnered up with GiveBack DC, rebranded, and made another website for another well-deserving non-profit.

The group we worked with this time was Sports2Success. They use sports as a platform to empower today’s youth to help them pursue employment and become contributing members to the workforce. Through Sports Leadership Training and Apprenticeship programs, they build up kids with the confidence to excel in life, and through a career.

Working with Jamaal King, the Founder of Sports2Success, we were able to gather all the information and content for the website to get going. By creating wireframes prior to the event, it helps us plan a swift course of action for designing, coding and testing over the weekend. One of the challenges we faced, was the fact that there weren’t any photos of the group yet, so, Jamaal had an idea of creating a dynamic animation for the home page to help show what the organization is about. He sent us an idea for what it could be based on, and our designer Seung-Yun took it and ran with it! She was able to create the impressive animation that is on the home page using solely CSS and HTML. (You can view the site >>here<<)

The look-n-feel was created by myself, Kate B (the event coordinator for GBNY). I was inspired by S2S’s original logo, which was updated and simplified on the new site, and a theme of orange and dark grey/black used on their previous site. I wanted to add another accent color to the layout that wasn’t as bright as the orange color, and I felt that a pleasant teal-blue color complimented the orange and blended with the black and greys. I wanted the site to be engaging but simple, so a user could go to the site and quickly know where to go depending on what they wanted to do. I also wanted the site to have a fun and youthful look to it, seeing that it is a program for kids, but because the target audience is volunteers and supporters, I still wanted it to have a professional and organized feeling, as well.

Once I had the overall design ready to go, the developers were ready to jump in! We worked away all day on Saturday and got a ton of work done, to come in on Sunday to finish off the project and do some testing. For this project we used WordPress as a framework with Foundation and SASS. Everything went pretty smoothly, and we are so happy with the finished product!

Thank you to everyone who participated in this incredibly successful weekend, and can’t wait to begin planning our next event. If you or someone you know are involved with a non-profit in need of a website revamp – please apply at www.givebackny.org

#LHWInTheMovies

Companies are constantly striving to differentiate themselves from the competition and part of our job as a software consultant is to create a product that helps them achieve this goal. Whether it’s increasing efficiency by simplifying their process or purely taking an idea and bringing it to life, Bootsoft takes on many roles (pun intended) when it comes to client satisfaction. When we were approached by one of our long-standing clients, The Leading Hotels of the World, with a marketing campaign idea combining film and travel, we could not have been more excited.

The main premise was to detail iconic movies that have been filmed on location at LHW member hotels or simply put, #LHWInTheMovies. With 85 featured films and the associated 85 hotels, there was no shortage of brilliant images and back-stories. After the initial discovery meetings, our team was feeding off the energy of enthusiastic project stakeholders excited to celebrate both LHW and the Academy Award’s 85th anniversaries. As one would expect, we incorporated the “must have” social media hooks for Facebook, Twitter, and Pinterest to allow a smooth flow across those sites. Custom verbiage and URL’s were crafted by the client to ensure the messaging was in-line with the rest of their campaign.

To implement the immense amount of static content (in 5 languages nonetheless), we attacked this microsite exclusively on the front end. Breaking from the “traditional way” of including multiple script tags on each page in a specific order, our front end team used Require.js to organize and handle dependencies for the assigned JavaScript files. By doing this, we can call one base file for the page and it will load any module and those modules’ dependencies easily. This boosts performance, as these files are not called asynchronously post page load, i.e. no more JS blocking.

Backbone and Underscore were used to build the dynamic templates for the pages, as well as create a convention for organizing high level JS classes. Finally we marked up the pages using HTML5 and CSS3.With all these factors in place, the code is far more reusable and maintainable.

With a wide range of properties across the globe and movies filmed in every decade dating back to 1925, everyone was eager to share the new site with the world. Check out the final product here and be sure to share with your friends and family. Big thanks to everyone involved on the project!

Coldwell Banker Previews Website Redesign

The Bootsoft team recently completed the development of coldwellbankerpreviews.com. Coldwell Banker Previews is the Luxury arm of Coldwell Banker and therefore a high level requirement of the project was to convey an air of luxury with the website. This meant using high quality images while maintaining fast page load speeds, rendering single image files in color and black & white and sophisticated property search technology.

Speed vs. Consistency

With such a visual site, it’d be easy to load the page with lots of data for the user to download in order to achieve the desired look and feel. A few years ago, a site like this would easily be over 2mb to download. Fast forward to today, one of mantras that we always say when developing:

“Delivering speed and good UX is more important than visual or functional consistency”

Creating a website to be “pixel-perfect” across all supported browsers should no longer be a priority. When users interact with your site, it’s more important to deliver the content quickly. The New York Times recently published an article, where users’ expectations of page loads are getting shorter and shorter. If the page takes too long to load, users will click away. There was also a recent case study of how Wal-Mart improved online business through better page speed performance.

Paul Irish, one of the leading developers on the Google Chrome team, wrote a blog post about “Tiered, Adaptive Front-end Experiences”, or the TAFFEE approach:

TAFEE (pronounced: taffy): tiered, adaptive front-end experiences. Customizing the experience to the unique capabilities of each browser, prioritizing a fast and good UX over consistency.

A good way of illustrating this approach is by comparing this to an escalator. You can associate a working escalator to the latest browsers used today (Chrome, Firefox, etc). However, when an escalator breaks down, you can still use it as regular stairs (IE7/8, in some cases IE9).

(cartoon by Jody Zellman from BWOG.com)

Another way of illustrating, as mentioned in Paul Irish’s blog post, is to compare to the various TV sets out in the market. There are black & white TV sets, then there are the latest and greatest HDTV’s you can get today. It doesn’t make sense for TV broadcasters to deliver their shows all in black & white, just so that the show can look the same on all TV sets.

HTML5/CSS3 With Fallbacks

To that end, we looked to HTML5/CSS3 for delivering a visually stunning site, while providing a graceful fallback for older browsers based on feature. To achieve this, we used the following technologies/tools:

Not too long ago, front-end developers had to use a fair amount of jQuery or equivalent to achieve visual effects like animations and fading. Today, we can leverage most of these effects through CSS3. This brings the heavy lifting more to the browser, and also cuts down the code that is loaded on the page. Some of these effects are even hardware accelerated, which is better for users’ batteries on their laptops/tablets.

Reducing Images

With CSS3, we were able to shave off our image download size by cutting corners, essentially by not cutting corners (amongst other tricks). We use CSS3 rounded corners, gradients, opacity, text shadows, transitions, the works. Even the styled buttons are not images, which was especially helpful since Coldwell Banker Previews is a multi-language site. Older browsers will simply fallback to non-gradients and non-rounded corners, which are fine since the site will still load quickly and still will look fine.

The biggest “bang for the buck” was to utilize HTML5 canvas in order to render the black & white versions of all images. While the site itself is very lightweight, the largest download is the large image carousel on the homepage, where each image actually accounts for more than half the file size of the entire homepage. Downloading just one color image, then allowing the browser to render the black & white version reduces the download size tremendously.

Resource Loading

One of the key goals for any website we create is to only deliver what the user needs. It doesn’t serve the user to load the entire kitchen sink of images, styles, and JavaScript files when they only need to see a fraction of that at any given time. With that in mind, we utilize a couple of techniques: lazy loading and resource management.

Lazy Loading

There is no shortage of image carousels on the Coldwell Banker Previews website. It would be a huge amount of images to download if the user had to download all of the images at once. This is why each carousel only loads what the user sees, then lazy loads any image that comes into view when the user interacts with it. In addition to this, all pages load images only when the image comes above the fold. This is especially useful for smaller screens, and when the user has to scroll through anywhere from 10-50 properties or specialists on a search result page.

In the screenshots below,the image on the left shows images only below the fold loaded, while the image on the right shows the page after it’s been scrolled to the bottom of the page, enabling lazy loading of all images on the page.

We also do not limit lazy loading to images. Many JavaScript/template files are only loaded when there is a user interaction that requires it. A good example is the property detail page. When the user scrolls down, there is a mini-map that shows the property location via Bing maps. However, the Bing map library is somewhat large, so we only load it when the map comes above the fold.

Resource Management

While users are browsing the site, they only need a fraction of the resources used for the entire website. For example, when a user is on the homepage, they do not need any JavaScript files or styles necessary for the property detail page. Since this site runs on Java, we utilized wro4j, a web resource optimizer for Java. One of the benefits of using this tool is that it also pre-compiles our LESS files, which is highly recommended over processing the files on the client side.

Filling the Gaps With Polyfills

In an ideal world, we can leave behind the browsers that do not support the latest and greatest features in modern browsers. Allowing functionality to simply fall off in older browsers, like HTML5 placeholder, HTML5 form validation, etc., would otherwise be acceptable if we didn’t have a large enough user base using said browsers. In order to fill this gap, we use what are called “polyfills”. As described by Paul Irish, it is “a shim that mimics a future API providing fallback functionality to older browsers”.

In order to only include these polyfills for the browsers that need them, we use Modernizr for feature detection, and will only include the polyfill if the feature cannot be found.

An example of how it works:

Modernizr.load({

//checks if the feature “HTML5 placeholder” exists in the browser
test: Modernizr.input.placeholder,
// if the feature isn’t found, it will load the jquery plugin for placeholder
nope: ‘jquery.placeholder.min.js’,

callback: function(){

// after the polyfill is loaded, initializes the polyfill for older browsers

},

complete: function(){

// runs a set of code regardless if the feature exists or not

}

});

As illustrated, the polyfill only loads if it is needed, otherwise it saves the bandwidth. Modernizr has a built-in utility/plugin called “yepnope”, which adds the flexibility of conditional loading and behavior.

Putting It All Together

Today, the site averages 2-3 seconds on first time view, and coming in at a fraction of a second on repeat views.

A few novel approaches to development that were employed in addition to our normal process include:

  • New object model for fetching and saving customizable data utilizing a website -> page -> components pattern that saves data directly in JSON format so that little to no pre-processing is needed for display, making front-end AJAX calls really fast.
  • New versioning strategy employed to avoid merging issues that occur when the trunk gets too far out of sync with the development branch.
  • Language support built in for supported languages, including Spanish, German, French, Japanese and English.
  • Locale support to handle automatic selection of currency and area unit based on selected language.

Both Coldwell Banker and Bootsoft are very happy with the final product. Great job team!

Visit http://www.coldwellbankerpreviews.com.

Experimenting with WebGL

One of the features I’ve been excited to experiment with in HTML5 is WebGL, as I’ve been continually amazed with the various Chrome Experiments pushing the limits of our browsers. A very popular JavaScript 3D library is THREE.js, so I decided to give it a whirl.

View demo >>

As you probably would guess, you can only view this in the latest and greatest browsers (IE is again sent to the back of the class). I personally would recommend viewing this in Chrome.

I started out the experiment using the THREE.JS Boilerplate, just to get a good starting point. I originally was thinking of using an image to render the 3D object, but decided that when zoomed it would get too pixelated. Instead, I used a very useful Ai to Canvas plugin that converted a vector image of our logo to the canvas equivalent.

To get that 3D effect, I ended up stacking a number of planes with the same canvas object.

Though a simple experiment, it shows how far browsers have come with rendering more complex animations/interactions without Flash. Have any favorite WebGL examples to share? Post it in comments!

Jeffrey Chew
Director of UI Design & Development

Easter Eggs

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

Redesigning BootsoftSoftware.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

HTML5 showing some promise: GMail achieves full drag-and-drop support

dragdrop

Cross-browser support be damned, because Google recently released drag-and-drop support for file attachments in GMail last week. Currently, the only supported browsers are Chrome and Firefox 3.6. And no need to turn this on in Google Labs, this feature completely bypassed that and was switched on for all GMail users.

The beauty of this feature is that this works with files outside of the browser. Go ahead and drag files from your file browser or desktop, it will begin uploading once you drop it into the dropbox that appears in your email.

So how does it work? One of the key properties of the new drag-and-drop events is “dataTransfer”. This property is exposed by the following command:

var dt = event.originalEvent.dataTransfer;

The two main methods are “setData()” and “getData()” in the dataTransfer property. “setData()” sets the data type and data to elements. This is usually set in the “dragstart” event. For example, say you have an <li> element on the page:

<li draggable=”true” id=”draggableLI”>This is the element</li>

You then want to bind the “dragstart” event to the element and the data associated with it:

$(‘#draggableLI’).bind(‘dragstart’, function(event){

var dt = event.originalEvent.dataTransfer;
dt.setData(‘text/plain’, ‘HTML5 is groovy!’);

});

Next, we need a receiver. This is done in “getData()”, and is normally set in the “drop” event. Let’s add this to a dropbox div on the page:

$(‘#dropbox’).bind(‘drop’, function(event){

var dt = event.originalEvent.dataTransfer;
var elementText = dt.getData(‘text/plain’);
alert(elementText);

});

There are a handful of other drag-and-drop events, and a list of recommended content types. This example illustrates the basics of what HTML5 drag-and-drop is capable of, and what we can look forward to as more major websites (and smaller ones too) follow Google’s lead.

For a more in-depth article on HTML5 drag-and-drop and the full list of events associated, you can check out an article by Les Orchard from the Mozilla development team:

http://decafbad.com/blog/2009/07/15/html5-drag-and-drop

Jeff Chew
Director of UI Design and Development

HTML5: Underbaked

There has been plenty of recent talk of how the HTML5 specification could potentially be a full replacement of Flash, some even arguing that platforms like the iPhone OS doesn’t need Flash support because of this. Although HTML5 has been around for the past couple of years, this new markup specification isn’t slated for W3C recommendation until at least late 2010. It still proves to be a bit unstable and doesn’t have full support in all layout engines. Currently, the browsers that do have a fair amount of support of the new API’s are the recent versions of Chrome, Safari, Firefox, and Opera. Not surprisingly, Internet Explorer is the one at the back of the class. The latest IE8 beta versions do have minimal but fairly unstable support, and is nowhere near the same functionality as other browsers.

Regardless, this hasn’t stopped developers from testing the waters and seeing what HTML5 can bring to the table. Although still a working draft, we’ve been slowly seeing more functionality added into each browser revision, with Chrome and Safari leading the pack. This makes sense of course, considering that both use the Webkit layout engine and HTML5 is being written by Google’s Ian Hickson and David Hyatt of Apple.
There are plenty of articles and examples out in the webiverse, some notable references include:

What to look forward to

In a nutshell, the major benefits of HTML5 include API’s like offline storage and application caching. This opens up many possibilities such as offline web applications, and reducing application startup. Other API’s include the video/audio tags, geolocation, and the canvas tag.

Google has already begun to introduce some HTML5 goodness, with their preview of Google Wave. This is a huge step, as Google was initially pushing their Google Gears extension last year, including the introduction of offline Gmail. Though still buggy, Google Wave shows the potential of what HTML5 can do.

Youtube has also entered the HTML5 realm, with an experimental opt-in preview of their HTML5 video player. Currently, the only browsers supported are Chrome and Safari, and do not have the same amount of features as their tried and true flash player. You can read more and test drive at http://www.youtube.com/html5. However, one of the ongoing debates is the codec to use as the <video> tag standard. This typically was handled in the flash plugin, though now the battle is between H.264 (owned by the MPEG standards organization) and the open-source alternative Ogg Theora. You can read more about the debate at http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars.

The Geolocation tag, according to W3C’s Geolocation specification (http://www.w3.org/TR/2008/WD-geolocation-API-20081222), makes use of location information provided by the hosting device. This may not be as useful for desktops, but is a more obvious choice for mobile devices and laptops. Most mobile phones include GPS, and laptops can provide a location via wifi from wifi towers.

And what about animations, you ask? That’s where the <canvas> tag comes in. With the combination of Canvas, SVG, and JavaScript, developers can create flash-like animations to the point of even full-featured games with keyboard interactions. You can find a good number of demos at http://www.canvasdemos.com, though here are some examples worth checking out:

Some great resources for canvas development are at:

https://developer.mozilla.org/en/Canvas_tutorial
http://html5doctor.com/

Are we ready?

HTML5 is definitely shaping up to be a promising future for web and mobile development. We will certainly see the benefits of a less resource-intensive animated and interactive experience without anything additional to install. This could also bridge the gap between mobile apps and the “HTML5 experience” on smartphones and, dare I say, iPads and tablets. However, we are still a bit of a way from solidifying the standards for this new specification, well beyond dotting any i’s or crossing any t’s. Not to mention, we still have to wait for certain web standards challenged browsers to keep up with the rest, even though it still continues to maintain the largest market share for browsers to this day.

So unless we see a huge turn in the browser wars, as well as HTML5 versions of Farmville and Hulu, users will not be uninstalling Flash anytime soon.

Jeff Chew
Interface Guru