Category Archives: Development

Case Study: Thoughtful Use of Drupal for AOC’s Intranet

Posted on by
Reply

The Architect of the Capitol (AOC) employee portal project adhered to an application development philosophy which balances the strengths and weaknesses of each layer in the application stack, from PHP and Drupal to the client browser and, ultimately, to the user.

Modularization

Almost every functional user interface feature is developed as a theme template (.tpl) with a corresponding preprocess function, accepting both required parameters and optional settings. Then, page-level layout processing can “mix and match” individual features as desired, using any logic needed on a per-instance basis. Each feature self-includes any required libraries or additional CSS and JS files, as needed. Clean .tpl files make it easy to perform finely-tuned UI layouts, while robust preprocessor functions allow complex controller logic.

Limiting Modules

Instead of relying on a hodgepodge of questionable-quality community modules, AOC benefits from one high-grade custom module that addresses almost all of its needs. Ultimately, only 12 top-level contributed modules were installed to meet the system requirements (4 of which are purely API modules). This focus on self-reliance not only reduces the administrative overhead associated with managing many contributed modules, but also mitigates the dangers of regression and/or interoperability bugs that can occur with upgrades or other changes to them.

Store Configs and Admin Settings in the Code, Not the DB

One of the strongest (and legitimate) criticisms of Drupal is that the system administrative data is intermixed with content in the database. This fact is coupled with Drupal’s “point-and-click” administrative philosophy to result in a framework which is very challenging to maintain in a development > quality assurance > production lifecycle. Where possible, the critical configuration settings and logic for AOC are contained in module or theme code, such that deployments across platforms result in much more consistent configurations.

Class-based Entity and Fields Management

While not a traditionally object-oriented framework, Drupal runs on PHP 5 and it is therefore possible to employ a class-based development pattern. For AOC, this is implemented for content types (node types, such as an Event or Notification) and their custom fields. Since node types and fields share many common functional requirements but with disparate properties and logic, they lend themselves naturally to polymorphism.

Client-side When It Makes Sense

Many features of a complex web application can be managed at either the server or the client level, and AOC takes a balanced approach to this topic. The preeminent example of this is the use of the DataTables library to create a robust Search feature, which relies on a custom RESTful service to accept search requests and provide structured data results for theming by the client. The user benefits from a high-performance, response interface and the system benefits from lower overhead due to reduced page calls and the distribution of processing.

Nailed It! – Martin Constantine – February 2013

Posted on by
Reply


Martin recently passed his 5 year mark as a member of the Bootsoft team. During that time Martin has rapidly progressed into one of Bootsoft’s most valuable technical leads. His success can be attributed to his analytical skills, attention to detail, meticulous documentation and a respect for deadlines and schedules.

Martin has a talent for truly understanding business rules and client needs and applying that understanding to his code. When working on complex projects with multiple teams Martin is refreshingly cool and calm, guiding the group to the simplest and fastest solution. As a result our project managers and our clients love working with Martin.

Martin has worked on multiple successful Coldwell Banker projects, including many behind the scenes efforts that keep CB ticking. The recent successful launch of coldwellbankerpreviews.com – and the Webby Award that it won – are largely due Martin’s hard work and leadership on that project. All that aside, Martin’s tastiest contributions at Bootsoft come in the culinary form and have made him a repeat champion at Bootsoft’s potluck lunches.

 

Congratulations Martin for Nailing It!

#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.

Concrete5 CMS: Impressions and Features

Posted on by

It’s hard to imagine the current state of business, entertainment or media without the remarkable impact and contribution of websites in the modern world.

It has to be noted the influence of a website is derived from a combination of its well organized content and the presentation. Content needs to be managed and updated. One of the key technologies in managing content is a Content Management System; a stand-alone application framework responsible to create, manage and deploy web page content. Much to the relief of non-technical website owners and clients, web CMS systems provides users with the ability to edit, publish, administer and even go back-and-forth between versions of their website contents that is instantly reflected to the other side of the world.

I’d like to quickly dive into a particular web CMS framework called Concrete5 and give some of my insights regarding its unique features and functionalities.

Concrete5 is an open source web CMS written in PHP and MySQL. C5 comes with a set of powerful tools and features that are written using object-oriented concepts and the model-view-controller (MVC) architecture. C5 has become being best known for its sleek interface, ease of use, and fast response as well as a resourceful community. Let’s examine some of the interesting aspects that make C5 special.

In-Context Editing

One of the unique features in C5 is its easy and intuitive ability to edit pages on-the-fly: In-Context editing. With a single click of the edit button from the C5 editing toolbar, page is put under edit mode – highlighting the editable page areas on mouse rollover. Users can make all sorts of changes on the editable areas, preview their changes privately, discard them or, if its ready to go live, they can type a description for their current edit version and then publish it. Changes would instantly go live.

One feature many would find useful during an in-context editing is the Scrapbook. Scrapbook is the “clipboard” version of Concrete5, where editors can simply copy one or many already configured and content managed page areas and paste them into other pages without going through the processes they went through the copied areas.

Themes & Templates


Themes define the look and feel of our entire C5 site. A theme is basically a directory of HTML, PHP, image, CSS and javascript files collaborating to render pages. Ideally, developers are responsible to “concretize” their site designs into a C5 friendly theme directory. By concretizing we mean organising the directory structure as per the C5 convention, define common site elements (headers and footers), define templates (page types in C5), define single pages (pages like login and contact-us) and then insert snippets of PHP codes in order to make page areas editable.

C5 allows one active theme at a time but we may have a number of them ready on our themes dashboard section. This list of themes could be a collection of themes from the fresh C5 install, custom made or downloaded/installed from the concrete5.org Marketplace.

Blocks & Block Areas


Blocks are the smallest display units in Concrete5. As the name implies, they are the building blocks of a page and its these entities users manipulate when a page is put under edit mode. Display units like carousel sliders, page navigators and image galleries make a good candidate for a block. When editing a carousel slider a block, for instance, users can specify the number of slides, its speed and the images and once the page gets published, the block’s controller is smart enough to process these inputs (or configurations) and send the processed data to its view.

One thing that always goes together with a block is a block area. A block area is simply the hole a block lives in. These areas has to be predefined on a page so users can manipulate them to add blocks, layouts or even alter their design on-the-fly (i.e. play with fonts, background colors, spacing, borders and even add an inline CSS code).

The fresh C5 install comes with several basic blocks like video player, Google maps, HTML editor, forms and so on.

Page Types


One of the signatures of a well crafted website is its consistent design and layout between pages grouped within the same type of category. C5 has a great way of predefining these types of pages as templates where their common components, layouts and design comes incorporated with their blank page instance. From C5 editing toolbar, users are given an easy task of adding a page, select its type and then fill out their desired content within the block areas defined.

This is very helpful for websites heavy-laden with articles, news and the likes that persistently get created every now and then. Moreover, the desire to improve designs and layouts can easily be achieved on the templates which automatically gets propagated to all other instances of the page type as well as to the newly created ones.

Single Pages


On the contrary to page types, single pages in Concrete5 represent pages that are one-off with unique design and layouts. Pages like Login, Contact and About often are presented with their unique design and layout and C5 does not require these to fall under any of the page types defined; for the simple fact that no more than one of these pages would exist throughout the site. Similar to page type templates, however, single pages could still be set up with block areas as desired so that the actual content can be managed by the end user.

The Dashboard


The C5 dashboard is a hub hosting several admin based tools and global settings like the File Manager – a centralized area to manage site assets like images and docs that could be used by page contents, Users and Groups – permissions and access rights, Reports – system logs, and page errors. The dashboard hosts tools where our custom made blocks, themes, page types and so on are activated before they’re ready for use on the main site section.

Besides these visible features, C5 also comes incorporated with different Zend libraries for its internationalization and powerful caching features geared towards optimizing pages for speed and lightness.

Conclusion

All in all, Concrete5 is an inexpensive, well thought and crafted extensible framework that makes content management a friendly task for regular end users. The number of addons and themes available through the C5 marketplace is an important part of its flexibility and success.

Feel like reading more about Concrete5?
http://www.concrete5.org/documentation/using-concrete5/
http://www.webdesignerdepot.com/2012/08/an-introduction-to-concrete5/
http://www.noupe.com/tools/is-concrete5-the-right-cms-for-your-website-73213.html

Coldwellbankerpreviews.com Wins 2012 Outstanding WebAward

Posted on by
Reply

Bootsoft is proud to announce that coldwellbankpreviews.com has been chosen as the winner of the 2012 Outstanding WebAward in the Real Estate category, for the Web Marketing Association’s 2012 Outstanding WebAward competition! For 16 years the WMA has recognized the best websites across 96 industries based on seven criteria points.

One of the judges commented: “Loved the ability to look through pictures of estates on the search results page. Also, was nice to be able to scroll through images on the listings pages. The most important part of real estate listings is the pictures and this site takes that to heart, great job!” 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. For more information see Bootsoft’s blogpost about the implementation of coldwellbankerpreviews.com. Bootsoft worked together with Coldwell Banker’s digital interactive agency FTI on the design and implementation of the site.

Visit www.coldwellbankerpreviews.com to see the site live!

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!