Bock Lighting: Product Placement Gone Right

When you work in the internet business, it's critical to stay on top of current design trends and development best practices.

In the same way writers improve their writing abilities by reading other great authors, graphic designers and programmers can seriously expand their repertoire by surfing the web for inspiration, reading design blogs, and keeping a watchful eye out for methods that might help get the job done better and faster.

With so many tools available online, you might think "those internet people have it easy." Sure, there's plenty of resources online to help us get better and keep our sites looking fresh and hip, but there's really nothing more vital to a web professional than people skills (a.k.a., the ability to relate to a client in such a way that their needs are fully understood and fulfilled).

Meet Our New Client, Bock Lighting

When Bock Lighting came to Digett to design their site and deploy it on Drupal (music to our ears, btw), they came with an added bonus that made our job easier: This client was knowledgeable, had a vision, and was cool. Bock found inspiration from Crate&Barrel.com and wanted their new design to share some similar qualities with the contemporary houseware site:

After IA (Information Architecture) and design had been approved by the client, we began to build. The following is a breakdown of the site's big-ticket items:

Amusing Product Perusing

Bock Lighting sells lights—lots of lights, and they needed a visually appealing and functional way to show off their inventory to visitors. We listened. (See image above or see it in action.) Our solution was as follows (and it works wonders for their site!):

Behind the Scenes of a Bock Product Page

Once you've clicked through to an individual product page, there are plenty of ways to learn about each specific product and see it in a variety of forms.

1. Scrolling Image Gallery—If the client has uploaded images for a product, the page features a gallery display with manual scroll buttons to peruse through large thumbnails of each associated picture. They slide left and/or right and give visitors a quick idea of if the product will meet their needs.
2. Large-Scale Pop-Up Images—If, from that area, an image looks particularly intriguing, viewers can click directly on the thumbnail from the gallery to engage a pop-up window with a larger, more-detailed rendering of the exact same image. (As shown above)

Smashing Image Caching—Defined

Additionally, almost every image on Bock is cached. What's that mean, and why is it entirely fantastic? Put simply, the client's job is tremendously simplified. Instead of being inundated with the tedious task of constantly resizing pictures in a photo editor, content managers can upload images of any size and they'll be scaled "automagically" upon submission.

With image caching (which we can build into your site on the back end), you'll never have to worry about an image being too large to fit a space or about pictures looking inconsistent on a page with repeating image elements.

The screenshot above is a great example of a page pulling a large number of images uploaded at different sizes, but thanks to image caching, it's rendering them perfectly to dispaly the images consistently in their height & width specific containers. Jackpot.

Presenting Bock to the WWW

In our office, we're an ensemble cast. That's why we genuinely like working together and it's our secret sauce for the work that goes into every website we create. But it never hurts to have fun clients with big ideas. Visit the new BockLighting.com, and enjoy. We certainly enjoyed creating it.