Basic Packaging Industries – Responsive

Basic Packaging's New Responsive and Retina Ready Website

Earlier this past week we launched the new Basic Packaging Industries Inc. website. We’re particularly proud of what we’ve done here because this new site is a reflection of our new design and development policy. That policy being that “henceforth, all new sites that we design and develop will be done so with responsive layouts in mind, unless we have specific instructions and/or reasons not to do so.”

Our reasoning behind this ‘responsive’ based design policy is quite simple; making one of our dynamic designs responsive, really doesn’t require that much extra work. The thought of putting the responsibility on whether or not a site is responsive on the client’s shoulders, by asking that they pay extra, isn’t something we want to do, as we feel that a failure to deliver a website that is standards compliant and utilizes all the newest web features, results in us cheating both our customers and the end-user. There is a vast number of tools and methods that have been devised to make responsive web design and development relatively straight-forward and if we didn’t use these tools, then Endless Digital wouldn’t be the company that we want it to be.  

All of the tools we used to develop Basic Packaging’s responsive site are free and open source:

By applying all of the above utilities and some of our own ‘elbow-grease-and-know-how’ we feel we managed to come up with a final result that we’re extremely happy with.

While it was important to have the site’s layout behaving in a responsive manner depending on device viewports, what we also felt was important was that the flow of content continued to make sense, regardless of what device one was using. So in addition to the responsive scaling and reshuffling of sections, we also wrote our own, very simple, jQuery show/hide script for the navigation that only displays on mobile devices (iPad screens and smaller).

jQuery Menu Progress on Responsive Screens

As is illustrated by the image above, viewing the site with an iPhone 5 hides the full navigation menu and in it’s place, displays a single “Menu” button. Clicking on that button activates an animation that quickly scrolls out the full list of navigation options. Clicking the “Menu” button a second time, collapses the list back to it’s original state. Furthermore, for devices that aren’t capable of displaying jQuery, there is a simple fallback that just forces the navigation to be displayed without the fancy transition. The reason we chose to take this route with the navigation is so that users on mobile devices would still be offered up the important site content instead of having every page load with nothing more than a header and a menu.

We also made sure to include Retina-Display quality images (2x the size of regular images) and have them loading dynamically only if the device is, in fact, Retina-Display enabled.  (Retina Displays are Apple’s proprietary name for devices with higher pixel density than the human eye is supposed to be able to perceive – other manufacturers already are, or soon will be, releasing similar devices but with different names.) 

It’s the little details that often make the biggest difference. It’s quite possible that 90% of the individuals who visit this site will be entirely unaware of all the dynamic underpinnings that give it great responsive and mobile capability – however, this doesn’t mean it’s an unimportant asset. Those that do see the site in its full mobile compliance will certainly appreciate it.

Feel free to visit with both your desktop/laptop and a mobile device and let us know what you think.

This entry was posted in Blog, Projects, Web Layouts and tagged , , , , , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.
    • |
    • |