Category Archives: Interface

#LHWInTheMovies

Posted on by
Reply

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!

Moving at the speed of JavaScript – Or The Interpreter!

Posted on by
1

JavaScript seems to be an odd candidate for a language on the rise. After all it’s not new, and in fact is by most accounts a flawed language. Many would argue that it fails to deliver on the 3 pillars of Object Oriented programming; encapsulation, specialization, and polymorphism. Javascript is very loose in it’s typing, and the apparent lack of those types may drive a “classic” programmer out the window. We have functions as first class citizens and can pass them about without a care in the world. The endless flow of callbacks and a-synchronous patterns can quickly turn any well crafted script into an unwieldy goulash. Within the function body of an event handler we suddenly loose scope and find ourselves hanging from the window, looking in on our locally scoped friends we so desperately need. Yet somehow, someway all the “newness” and “hotness” and “hipster meta tech framework jargon ipsum” is leaning on the back of this once berated language.

With the death of Flash there is one way to script that all the browsers you care about can handle, and that is JS. It’s like our “too big to fail” banks and insurance companies. What happens if a browser decides “nah, I don’t like JS, we are going to introduce a new sexy, semantic language that is going to blow the doors of that antiquated piece of junk”, and stops supporting it? People stop supporting that browser. We have parity; Chrome, FF, IE, Safari, Opera etc … IE is no longer the hegemony it once was, and cannot push us around. In fact IE has to play catch up and support the magnificent modern feature set that webkit and Mozilla dream up.

With that, and the increasing efficiency of the JS interpreters we are driven to code the way of the JS Ninja. The FE days of sad code monkeys pushing pixels has given way to some seriously kick-ass client side devs who are moving this wave further and faster. JQuery is almost a forgone conclusion at this point – some of use are running multiple versions *gasp*. It has made selecting, parsing, and manipulating the DOM dead simple, normalized events and AJAX across browsers, gave us simple animations, and brought IMHO brought the first glimpse of sanity to Client Side Programming. WOW, the term “Client Side Programming” was an oxymoron at one point, wasn’t it? Now there is a sea of emerging frameworks, libraries, tool-belts(?) all calling for our attention and loyalty.

We recently built a prototype for client that was purely on the front end. With the help of local storage, an app experience was born that could be stateful for the user and provide an excellent preiview of a potentional product. After much researching and second guessing I arrived a set of libraries and frameworks to use in our venture. They were Require.js, Underscore.js(required by backbone), Backbone.js, and jQuery. Backbone has a hard dependency on Underscore, and looks for either jQuery or Zepto for DOM work. I was fimiliary with jQuery so that was an easy choice. The decision to use Require was inteded to provide structure and convention for JS dependancy management. Node has it’s own built in “require” and as someone who does not do a whole lot with Node – I was envious.

Backbone.js

Backbone claims to be a client side MVC. Model – View – Collection … I hear you, what’s a collection? Where’s the Controller? Backbone had a controller, once, but that is gone now and all that remains is the view – which is actually more like a controller, and where you might think view code should be exists JS templates. JS templates, oh right – and which templating library should I use; mustache, handlebars, underscore/lodash, srender? I’ll say underscore for the sake of simplicity as it’s a hard dependency of Backbone – but I hear people like the handlebars and mustache because they have opinions on logic in your templates. I digress – Backbone, right, so What’s so awesome about it?

  • Nice “extend” synatx for dealing with JS prototype inheritence – very common these days
  • Event Delegation – clean usage of jQuery.delegate, handles the “this” gotcha of the scope bounce with event handlers
  • Patterns for binding views to data models – this is really where the juice is.
  • Native underscore methods of collections (Array of JSON Objects)
  • Reusable code patterns

Underscore.js

Underscore is the only dependancy of Backbone, but shouldn’t be needlesly tied to it. If there is one thing that you take away from this post, it’s that you should go get Underscore/lodash right now. Underscore gives MUCH needed functional tools to JS objects, arrarys, arrays of objects(collecionts) and has some other bonus love as well. There is NO reason why you should not be using underscore, unless your in some larger framework i.e. Sencha. Another glorius takeaway from underscore is that you can now reuse your BackBone data models and collections from Node in the browser, as it has brought all those functional compemenets up. Brilliant!

Require.js

You should be using AMD patterns for your JS, just like you should never use == and always use ===. Require isn’t perfect and can be ugly, but it’s better than nothing and comes with a handy dandy optimizer (r.js) – which runs on Node of course. The learning curve for me was steepest with Require. Not using a singleton global APP object pulls the rug to be sure – it takes some getting used to. In the end it results in better more re-usable JS code IMO.

There are many JS frameworks and plugins and helpers and tools, and it’s moving super fast. Being able to use one of these tools is the only way to learn, and decide if it’s right for you. There is no right way to use them, though certainly there are wrong ways but the most important thing is keep opening them up, diving head on, and hoping for the best. This is NOT an industry where you can sit still – and I like that way. JavaScript may give way to CoffeeScript of ECMA 6 or Dart, or who knows what – but right now you should know it and love it.

Nailed It! – Byron Matto – January 2013

Posted on by
Reply

Byron joined Bootsoft a year and a half ago and has consistently nailed it.  With increased responsibilities in recent months he has continued to put hammer to nail -making him an obvious choice as the recipient of the January 2013 Nailed It! award.

As a front-end developer and tech lead, Byron’s skills are top notch. More than anything, what sets Byron apart is his ability to combine his strong work ethic, excellent teamwork and thoughtful leadership. Despite moving his base of operations to Portsmouth, NH, Byron has maintained a strong presence within the team and has proven an effective manager as Director of User Interface.

Byron is leading us on the cutting edge of front-end technologies having successfully implemented the following tools as part of a highly interactive responsive design tablet project for Pearson:

I am proud to count Byron as a colleague, and I know that he will always deliver work that is on-time  and of the highest quality while simultaneously bringing a humorous, uplifting and creative voice to the table.

 

 

Coldwell Banker Previews Website Redesign

Posted on by
Reply

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.

My Response to Responsive Design & Why You Should Be Besties with The Devs

Posted on by
Reply

I recently began to redesign my personal website which is just a place for me to show off all the different kinds of work I do (illustration, design, photography). I like to consider myself a pretty qualified front-end developer, so I am always interested in new practices and technologies.

I’ve been hearing and seeing the term “Responsive Design” everywhere. From the amount of screentime its getting all over the interwebs, its definitely only becoming more and more prominent. The reason it is so huge right now, is because everyone has a smart phone and tablets are on the rise. Everyone can get a google result or a webpage up in seconds with the little computer in their pocket or purse. The thing is, the layout of a phone’s screen is completely different from a computer screen, and people are viewing the web in so many different environments. What responsive design does is create a fluid transition between different site layouts, by determining what screen size the viewer is looking at.

So, instead of making three different websites, like one for a desktop, one for a tablet, and one for a phone, you make one website. Within the CSS, you just write different attributes for classes that will change and assign them to a specific screen size media query. Anything that is global, is written once in the global CSS and will apply to each layout.

For example, let’s say I want a different font size on the desktop version as I do for a mobile version. So, I’d go about my way for the desktop version, write the simple class like so:

.leftColumn {font-size: 12px;}

Cool, now on my computer’s browser the font is 12px. But on the phone I find that a little bit hard to read so I want to make it a bit bigger. I create a new section in my css and write this:

@media handheld, only screen and (max-width: 767px) {

.leftColumn {font-size: 14px;}

}

And voila! When it is detected that I’m viewing the site on a browser smaller than 767 pixels, it will change the font to 14px.

SIDE NOTE *** I should also note at this point, that a few of these attributes do not play nice with IE (surprise, surprise). This will like total doodie on IE6 (www.responsiveie6.com), and so far I’ve only tested in IE9 and 8. Looks pretty okay in 9 but 8 gets a little wonky. ***

A lot of the changing layouts rely on percentages and a columned grid. On my site, I have three columns for my content each at about 30% width (taking into consideration margins and padding). I also put a max-width on the columns, so if the screen is enormous, the layout is controlled.

I ended up using a template called the 1140 css grid (cssgrid.net) and it couldn’t have been easier. I often get completely intimidated by new coding styles and technology I’m unfamiliar with, so I was very hesitant to get immersed in this for fear of severe self-humiliation and potential pillow-punching… but it ended up feeling like I’d done it a million times before. This is why people should absolutely start implementing this. Its SO DARN EASY PEOPLE! This is coming from someone who didn’t really know what floats were and what they did until about a year ago. Just do it. There are so many templates out there (just google ‘Responsive web design template’).

This brings me to a topic that has also been popping up a lot, and that is the thinning line that divides designers and developers. There has been such a distinct separation in the past where its two completely different steps. The designer figures out the architecture of the site and then makes the pretty PSD files. Then those get handed off to the developer who just builds off of that psd. There is hardly any collaboration. With responsive design, the functionality and working parts  are now the designers’ concern, as is what the site will look like in three or more different ways is the developers concern. Both parties need to be conscious of the deliberate decisions the other is making.

I read an article recently that discussed working together and how important it is to involve the designer in the development process, and vice versa. I know from personal experience that sometimes some developers end up needing to create a new, minor functionality. Usually, they’ll just make it work and make their own decisions on how it should look because they think it is so minor, and then months later I just happen to see it and it looks terrible!!! (No offense devs… but its my job to pick out colors :) and emphasis on some.. some devs do know good design) and at that point, the project will be too far along to fix or change it. I’ve experienced handing off designs, and then feeling like I’m no longer a part of the project.

Especially with the current state of programming, its not all about being pixel perfect anymore. Its about making the site display correctly across many different browsers and operating systems. But, just because the designs are guidelines, doesn’t mean that the designer shouldn’t be questioned when there isn’t a deliberate design available to reference. A really important step is to assess any and all interactive functionality with the designer. I’ve seen a few hover effects appear out of nowhere after development that I did not design that way. Any page transitions, or changes in appearance, however slight the function may be, should be intentionally designed. One bad gradient, and the site can go from super classy to mismatched and funky.

So, designers, become besties with the developers and communicate with project managers that, yes, it is okay to come to me for a minor thing like a popup modal. And developers, you are amazing at what you do, thats why you do it, and same goes for me… I was hired to make the aesthetic decisions, but I want your input. Its hard to keep track of every little thing that should occur on a site, along with bajillions of potential use cases. So, its really important that if there is a certain function that was not designed, it should be just as important as every other designed element. This is all reliant on communication, and usually there is a middle man and/or woman, like a Project Manager, that needs to be a liaison between the two. If there is any uncertainty about something, everyone should discuss with each other to figure out the best course of action.

Viva responsive design!!

I would love to hear what you think about this… is responsive design the way to go? Do you actually think designers and devs should be separated in their work?

Should you base64 encode a large image sprite?

Posted on by
1

At the end of my last post on base64 encoding I wanted to see how numbers changed when using a large image sprite and also how page speed was affected.

To do this I decided to work with one Google’s larger image sprites nav_logo107.png

And to focus the test I removed 2 of the previous test cases (the individual binary images and split base64 encodes) as it was clear from the first post that they would not be small enough to compete.

So that leaves a pure binary sprite and a sprite encoded as base64 for which I created 2 test pages:

First: File Size

The good news is that results from my previous post were still true.

If we set the baseline that the delivered css for both cases is minified and gzipped then both end up being almost exactly the same overall byte size.

Byte Size Comparison

Second: Page Speed

To check page speed I ran 3 sets of tests using webpagetest.org:

Each test was run 5 times for both First View (no cache) and Repeat View (cache)

My initial thought was that the base64 encoded sprite would be faster (as it would be 1 less request)… and it is when looking at total page load time.

In most tests b64-sprite.html total page load time was around 200ms faster without the additional image request.

So if we were only looking at total load time then we have a clear winner.

But take a moment and look at start render times in those same tests.

On “First View” tests sprite.html has start render times that are around 200ms to 300ms faster in each comparison.

You can see what this translates to visually in this video:http://www.webpagetest.org/video/view.php?id=120412_5129cebbfde1452b10358afa3a1f5dacd106366d

Have you ever heard a user say the phrase “this page feels slow”?

I find that in most cases when questioned further the feeling of slowness was due to the time they were waiting for something (anything) to render to the screen.

This is important to keep in mind when deciding if base64 encoding sprites will make sense for your site.

Yes you are saving a request (which will reduce total load time) but you are also making your css files larger (which could increase start render time).

Even in “Repeat View” where resources are cached locally the start render times for sprite.html are faster.  Yes I know we are talking about 10s of milliseconds but try to think of this on a full production site with lots of other resources.  Remember even though the css is cached locally the browser still needs to pull it from local cache and render it.  So if the cached file is larger in size it will take longer to render.

As an aside: IE8 throws a nice wrench into the gears on this as well. IE8 only supports data URIs up to 32k in size. So if you plan to base64 encode large image sprites you will run into issues with IE8 (basically they won’t render at all in that version).

Conclusion:

I hate to say this but when choosing which option is best it will depend mostly on the project.

I would ask the following questions if you are using a large image sprite:

1) Are start render times more important than overall load time for your users? If yes then based on the above findings it would make sense to try the image in pure binary first and run speed tests.

2) Do you still support IE8? If yes then go with a pure binary sprite.

3) Do you plan to set expires headers the same on css and images? If no then consider a pure binary sprite. That way when a user’s local cache is cleared on your css they won’t have to download a larger file each time.

Thank you for reading and please let me know your thoughts in the comments below

Remedies for Writer’s Block and Other Mental Constipations

Posted on by
Reply

Writers’ Block. Everyone gets it whether they’re a writer or not. Its that part of your process where you hit a brick wall and your brain cannot process any new thoughts. I tend to get this when I’ve been staring at a design or wireframes for a few hours and my eyes start crossing. It usually hits in the afternoon, and sometimes just getting up to get a snack or glass of water remedies my predicament, but other times its a bit more serious.

All I need is some serious inspiration… and with the internet at my fingertips, its not hard to find some.

Designers (and non-designers!) can be influenced by so much. Everything in the world can somehow be interpreted into something creatively plausible by anyone with the ability to see. Color, light, movement, and shapes are everywhere, its impossible not to notice.

Here are some blogs and websites that I immediately go to to gain some creative input.

tympanus.net/codrops/

I always go here, even when I’m not stuck, just to check out the new stuff they’re doing. There are constantly new write-ups and demos with all the fancy new trends. I tend to do keyword searches like, typography or design and browse multiple articles within one theme to get in a certain mindset. Originally shown to me by Jeff Chew, I quickly became enamored with this group for their vast skill-set and wide arrange of knowledge across design, the web and usability.

www.thenewgraphic.com

I love coming to this site to clear my design hang-ups. This group of illustrators, designers, writers, photographers and thinkers compile a wonderfully simple, continuously scrolling blog. I find that their design aesthetics reference a lot of vintage and traditional graphic design, which is, appropriately, very graphic. The bold use of color with minimalist type is seen often, along with nostalgic photography and tons of patterns. This blog always brings me back to the basics and reminds me why I love to create.

www.ffffound.com

ffffound is a great site that just has tons of images. What I love doing is scanning through until I see something that catches my eye, and then losing myself in an infinite cycle of clicking related images. There’s a lot of content on here, but with proper determination, you can find tons of inspirational posters, illustrations, designs and photos.

www.jjjjound.com

Clearly, the name is referencing ffffound, but this is a blog created by one guy who has a love for all things menswear, women and sleek design. Warning: There are nude images intermingled amongst so most definitely NSFW. He only posts occasionally but he posts so much its fairly easy to lose track of time scrolling through. This brings out the minimalist in me… his taste and aesthetic are beautifully simple.

www.cdryan.com

Christopher David Ryan is a designer that I keep coming back to. He is incredibly talented with iconography and imagery. He invokes so much thought and feeling through his charismatically simple and joyful images. I usually keep up with his blog, but its always refreshing to just go back and look at his portfolio. A lot of his designs end up being my desktop!

www.designsponge.com

Design Sponge is one of the most renowned design blogs out there, for good reason. Mostly directed towards interior design and decorating, Grace Bonney overflows her blog with tons of design-driven posts that are sure to inspire anybody. She has a ton of different writers from all walks of the earth that keep the content fresh and ever-changing. The DIY and Before-and-After posts are huge for getting you motivated to use your hands and get those creative juices flowing.

www.pinterest.com

This is an invite only site, but once you’re in, it is incredibly addicting. You follow people who like the same kind of things you do, and the homepage pushes other users that are similar to you as well. This is honestly just a huge burst of inspiration… you can search any kind of keyword and just pour over images upon images.

www.forrst.com

Forrst is also an invite only site, but specifically for designers and developers. It is a social network directed towards those who design sites and those who code sites. They encourage critique, feedback and sharing your knowledge with others who ask. I spend a lot of time checking out other people’s designs and reading all the feedback to keep up with what audiences are seeing and feeling. Its like a virtual classroom, and its very rewarding for users who are active in the community.

At this point, I’ve probably lost you to at least one of the above websites, but I hope that if any readers are ever in a pickle, they can find solace and get revived from one of my suggestions.

Would love to hear other people’s suggestions for sites that spur creative thinking, so please share in the comments!

Experimenting with WebGL

Posted on by
Reply

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

Client Side Optimization: Pseudo Granular Beginings

Posted on by
Reply

On Why.

We spend time trying to find ways to optimize web pages.  Client side optimizations can take place in many areas, and perhaps the most basic is the number of DOM elements.

Any page speed testing suite will provide a list of places one can look to increase performance.  We like page performance because…

  1. SEO boost :: 1st time visitors
  2. Snappier rendering time for the user :: repeat traffic
  3. Bragging rights :: Clients
  4. More page views and conversions
  5. etc…

Always on that list are those pesky DOM elements.  We can all remember a time ( showing my age? ) when table layouts were the standard, and you can bet those html costs where high.  With more refined uses of HTML and CSS the web has settled into some common layout structures.  Grid systems, boilerplates, templates etc.. all have similar beginnings and for the most part are sound foundations.  No-one can code the pages for us however(nor should they) and it’s the meat of the docs where things can get out of hand.  Complex designs, unreasonable requirements, and time constraints often lead to developers just “making it work”.  There is something to be said about getting it done, but if we can get it done a bit cleaner each time … don’t forget your platonic forms.

Let’s say there are 2 html elements for every icon/text; 1 for the icon, 1 for the text.  I will discuss how to use pseudo elements to remove 1 of those elements.  I know it does’t sound like a lot; but it means less coding, less maintenance, less rendering, more speed, happier browsers, and you on that edge between madness and genius.

On How.

A previous post by one Anthony C. discusses base64 encoding of images, spriting and some interesting combinations of the two.  I will be using individual base64 encoded pngs as background images to illustrate the use of pseudo classes for iconography. So let’s jump right in!

.icon:before {
    content:" ";
    display:inline-block;
    vertical-align:middle;
    padding: 0 3px;
    background-repeat:no-repeat;
    background-position:center center;
}

I am going to use this .icon class as a base for all of my icons. Let’s examine each declaration, because we don’t want to have extra code.

  1. content: ” “; :: This is so we have “something” with which to work, think of it as the a canvas of sorts. Literally it tells the pseudo element to contain a “space” character.
  2. display: inline-block; :: Inline elements won’t take height / width, and Block elements will break inline layout so we use inline-block.
  3. vertical-align: middle; :: Really a matter of preference, but I like my icons to be centered vertically against the text, if it’s there
  4. padding: 0 3px :: Also a bit of preference, giving some breathing room to the icon.
  5. background-repeat: no-repeat; We only want to see the image once, avoid ugly “clipped” repeats in padding.
  6. background-position: center center; If we’re using padding, let’s keep that image in the center;

At this point, if your asking “what’s a pseudo element?” you may want to take an obligatory visit to w3schools or hit that google for quick derp.

Next we have an image specific icon declaration in our css, this one is for a “save” icon.

.icon-save:before {
height:16px;
width:16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAzLzQvMTIovRTHAAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAB+ElEQVQ4jZXTPWgUQRjG8f/ezulekRiJJKmCGqOWwaAIJx6IlUoQiV+VtQh2IqKFYGdhESxsFCEWh7HwinBYSAxiGpEDiWiRpNjz1JgjHvFyLnvzzlis97EXSPCBhXkH5sc7MzvY/8ydJ6/sVH62WTvWWpt99JKfSxX6jnazVZ75/ZiqSzpZ5PbN8yiAHwu/ODU6zv5zXdiOBffyX/m8HDTrrh7IXNjHi4c1hqdnIsAaQxiGaGsRkRjwYbHMybMjfFmD3zqamyvDyJUTPM3mGoDFGEMoQr1ejwG7exxyk2+bteM4VI8fY34iy42xXREgYtBaE4oQdAC3xvbE6vH7c+jJaUaDVS6PXYoAIwYRITRmA9CZob7tHEh24TpFgDiw/j1kW7+3KXD3zCGW8xVmvpkW0NjCwvPiposbSaVSiLQBjQ4KhQLWdl5kFMdxmuNMJoNpB0RHHbiuS/r60IabSCaTvJtYZHBwkFKphNYa0TFAEBGUUlSrAbMPPgFw5OreZstKKQA8z0NEEC0tQNc1iUQCpRS1WsjAwAAAtVoIgLVuDDDGoOvRX5UAOH0tTe71FOXVFcLQopRCKYW10deYawfW1/5EHfi+z47ebg5fHObN44/U3i/Bzn+bL7TOYWU+fqi9Bz1838epVCo2CIINb2CruK6L53n8BdiVNWjQvqNqAAAAAElFTkSuQmCC);
}

…and the a touch of reasoning

  1. height/width :: The literal size of the icon
  2. background-image :: Telling the browser we’re using a base64 png, and image data.

That’s the nitty gritty, all you need now some html to hook into.

<a class="icon icon-email">Email</a>

You can add helpers to your icon class later, for example perhaps you don’t want to display the text, but you still want the page to contain it.

.icon-notext { font-size:0; text-index:-9999em; }

Caveats:

You knew it was coming… What browsers support pseudo elements?  Most do, all but our favorite two class clowns; IE6 and IE7.  IE6 we can put to rest, but IE7 is still in that market % for some folks where it commands attention.  The silver lining there is that a fail of this doesn’t result in something ugly, just no icon.  So if you’re cool with that, so am I ;) .

And So On…

If you’re looking to push things further, check out this bit about pure HTML/CSS GUI icons.

The goal is flexible code but not alot of it, and hopefully this is a step in that direction.

Happy Coding!

Byte size difference between Image Sprites and base64 encoding

Posted on by
3

A good friend introduced me to the concept base64 encoding and I have gone down the road to research what scenarios it is best suited for.

On that road I found a great post by David Calhoun testing byte sizes by comparing binary images to their base64 counterparts. After reading it I thought it would be interesting to extend his UI icon test one step further and include an image sprite to see how that compares in byte size.

Note: I understand the drawbacks David has mentioned regarding sprites however I believe those drawbacks are manageable considering the potential gains to be had from a file size standpoint. Especially if you are managing more than just icons in your sprite files.

How I setup the test:

So lets see how the numbers work out…

What I thought I would see:

  1. Test Case#2 (icon-sprite.png + combined-binary.css) would be the smallest in total filesize when compared to Test Case #1 (split-binaries.css plus its images) and Test Case #3 (split-b64.css)
  2. Test Case#4 (combined-b64.css – which replaces the image sprite with its base64 counterpart) would be the smallest total file size after Gzipping was done
  3. Gzipping Binary Images would sometimes lead to larger filesizes as those binaries would typically be compressed fairly well to begin with (or at least should be if you care about responsiveness)

The Results:

  • View on Google Docs
  • assumption #1 turned out true.  The creation of a sprite from the 5 icon images was smaller in file size than both separate images and separate base64 encodes.
  • assumption #2 did not turn out to be true.  However it was by such a small amount that you could pretty much say it is equal to Test Case #2 (we are talking about 23 bytes here)
  • assumption #3 was interesting as gzipping of the binary spite resulted in a slightly larger filesize but gzipping the images individually ended up being smaller in total size.  The differences are pretty tiny anyway and because of potential overhead in the gzip process this would probably not be needed if you are good about optimizing your source images.

So what does this really mean?

I think the numbers above depend on what you prefer to use and how you like to work.  To be transparent I have always preferred image sprites.  My opinion is managing them becomes easier the more you use them and there are a lot of good techniques today to get around some of their earlier drawbacks (such as using pseudo selectors to help get over clipping issues).  So considering the findings above I personally would probably continue to stick with sprites.

However… you could possibly get benefit by making a sprite, converting to it base64 and then gziping it.  The gain here would be 1 less request (and that could mean a lot on a larger site).  To really test this idea I am going to build a case using a larger sprite file that has more than just icons in it to see how it scales.

In the future I am going to try to run performance testing to see baseline speed for each case from different locations (I’ll use webpagetest.org).  Number of requests can sometimes make a huge difference in those tests so that might help put some additional clarity around this topic as well.

Further reading on base64:

  • Wikipedia entry
  • ftp://ftp.rfc-editor.org/in-notes/rfc3548.txt
  • Understanding Base64 Encoding
  • http://calebogden.com/base64-encoded-fonts-images/
  • http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/