Responsive Valentines: What you Need to Know

blog-header image

With Valentine’s Day only a day away, we probably don’t have to remind you of the immense, soul crushing pressure behind choosing the perfect valentine. You’re not alone. Selecting an appropriate valentine is a problem that millions of Americans face each year. Does it say too much? Does it say too little? Do I really want to say “love?” Didn’t I already give a dinosaur Fonzerelli card last year?

When will technology catch up with this ever growing problem?

We’re happy to announce, the answer is NOW. Introducing…

Responsive Valentines.

Responsive Valentines are the latest in a long line of responsive design best practices. Similar to responsive design, where webpages are designed to work flawlessly across devices and respond to varying screen sizes, Responsive Valentines respond to the RECIPIENT. This allows thousands of variations on a single, simple valentine.

Responsive Valentine in Action

Select the sample recipients on the left to see how a Responsive Valentine might look to them.

  • Default
  • Sweetheart
  • Secret Admirer
  • Kids
  • Co-worker
  • Bromance
  • Anti V-Day
valentinevalentinevalentinevalentinevalentinevalentinevalentine

 

BrainDo has had the privilege of beta testing a fully-responsive, web-based framework which not only fits content to a device, but also to that device’s user.

How’s it done?

It’s all done with a new framework called Cupid 3.

Traditionally, responsive frameworks restyle and reorganize content based on the reader’s screen width. That is the reason why if you are to view our site on a smartphone or tablet (under 600px wide), you will see something completely different than if you were to view our site on a desktop computer. Cupid 3 gives us the ability to use different variables (other than just screen width) to determine which content is displayed for a user. One of these new variable categories, the user-type, is set after a light combing of social media activity and overall device usage. Once a user-type is set, the appropriate styles and content pre-determined for that user-type are displayed on the device.

The Technical Bits

Cupid 3 integrates seamlessly with existing CSS or SASS, just include cupid3.css into your styles folder.

blog-valentine-css

cupid3.js library is also available (pull requests available soon on Github)

blog-valentine-js
Please Note: The above code is not intended for actual use.

Responsive Valentines are a new age solution to a centuries old problem. While there are still some bugs (grandmothers receiving cards meant for the President), the benefits to content creators and their intended end users far outweigh the negatives. We expect Responsive Valentines to become a fully adopted feature within the next few years and are excited by possible future applications. Most importantly, a lot less stress and a lot more love this Valentine’s Day.

*Disclaimer – Responsive Valentines are a fictional creation and do not actually exist. We are not responsible for those of you who expect your valentines to magically change as you send them to different users. It’s made up! Thank You.