Chris Coyier at CSS-Tricks.com (a fantastic resource for designers and developers alike) released a usage license for all of the great code snippets that can be found on his site and in earnest, this is what I want to see from the rest of the web. I like things open, I like people sharing and helping each other out and generally all just working to make sure that we all benefit one another. I’m nowhere near as good a code writer as Chris is, so the amount of snippets and resources you’ll find on here are limited, at best, but I try to make up for it by offering to help people whose skills are bit behind mine, with some one-on-one assistance. It’s not much, but at present, it’s the best I can do.
Another Facebook Tab for P&G/Wella Professionals TrendVision 2013; this one’s a bit more advanced as it allows users to upload their photo entries for the contest directly through Facebook.
The biggest concern with online forms like this is file validation and security. While CAPTCHA codes are all the rage these days, we found a novel new “click and drag” authentication test to use.
Last year we were asked by P&G’s Wella Canada division to put together a simple Facebook tab inviting student stylists to enter a competition that showcased their talents in one of Wella’s key style trends for the year. The tab was a great success, as was the competition itself, and so we were invited to create a tab for this year’s competition as well.
We turned the volume up a bit and went for a bolder design. We paid a great deal more attention to the mobile web as well; the tabs are not only responsive, but also feature retina ready images for double pixel density devices like iPhones 4 & 5 and the newest generation iPads.
Keeping in step with our new policy of designing and developing sites in a responsive manner, so that they function with both desktop and mobile devices in a manner specific to those devices (unless we have a good reason not to), we decided to put together a framework for Responsive Facebook Tabs.
One of the easiest ways to integrate your site’s or your company’s web presence with Facebook is to use a ‘page tab’ as a Facebook App. It is essentially just an iframe and we’re not going to get into the details of how to get a ‘page tab’ or ‘app’ set up on Facebook, there’s tons of documentation for that already.
Instead, we’re breaking down what we put into our Responsive Facebook Tab Framework, why we put those things in it and a step-by-step guide to setting it up. (Hint: it’s dead simple.)
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. Read More