Five Lessons from Geo Bootstrap, Our Successful April Fool’s Gag

On Monday we were blown away by the positive response and popularity of Geo Bootstrap, our retro-inspired April Fool’s Bootstrap theme. With more than 4,000 tweets, 100+ points on Hacker News, becoming a daily trending repo on GitHub, and a healthy spike both in Twitter followers and daily signups for Divshot Geo was an unqualified success. Of course, it could have also fallen completely flat, or worse, been lumped into the “groaner” category of April Fool’s gags. So what set Geo apart?

Don’t Force It

We didn’t sit around for hours brainstorming what might make a great April Fool’s gag; in fact, we didn’t do much planning at all for Geo. On March 28 I randomly thought of the idea, pitched it to the team and got an immediately positive response. My cofounder Jake took a couple hours and threw together the beginnings of it and it still seemed funny, so we decided to go for it.

Most of the failed April Fool’s jokes that I’ve seen seem to be trying way too hard. If it doesn’t come easily, don’t force it.

Aim to Amuse Your Company’s Audience

Divshot is a startup aimed directly at people who build web apps for a living. These people are likely to have strong memories of just how awful web sites used to look, and probably built some of those awful sites themselves. My own first website was a Geocities-hosted Duke Nukem 3D fan site. It had bright green text and animated GIFs of radioactive symbols all over the place.

We have also connected strongly with the Twitter Bootstrap community as it’s a core component of our product. Bringing web nostalgia together with Bootstrap hit a very sweet spot for positive reaction for our gag.

Make It Easy to Share

While we wrote a blog post about the theme, it went viral thanks largely to the tweet button front and center on the public GitHub page. Twitter was by far our largest referrer, outpacing even HN by a large margin. What’s the fun in a joke that only one person knows about?

Don’t Overmarket It

This falls again into the “trying too hard” bucket. While we put our name on the theme, we didn’t embed secret marketing messages or try to optimize a conversion funnel out of it. People have become jaded about April Fool’s online because now it’s just seen as a marketing gimmick, and if you try too hard to turn a bit of fun into business objectives you’re likely to destroy the “fun” part.

Of course, the lovely thing is that at the end of the day it is a great marketing gimmick. Hundreds, maybe thousands of people who hadn’t heard of Divshot on March 31 have heard about it now because of the gag. Be content with a little bit of raised brand awareness and don’t milk it too much.

Don’t Work Too Hard

All told, Geo was less than a day’s worth of effort from start to finish for our team. It was a fun thing to collaborate on and watching the reaction was rewarding for the team. April Fool’s, if you choose to participate, should always be more about having fun than getting results.

Any time you try to make a joke you take a risk: humor is an inherently subjective medium. We didn’t bet on Geo succeeding, but we’re very happy that it did. So next year when April 1 rolls around, I hope we’ve got another fun gag to pull. But if we don’t, we don’t, and that’s OK too.

Introducing Geo, a Timeless Theme for Bootstrap

Here at Divshot we’re committed to moving web development forward by embracing new technology and enabling best practices in rich, visual tools. It is also important, however, to bring forward those things from the past which prove to have timeless value. Today we’re proud to announce Geo for Bootstrap, a theme that draws inspiration from the timeless design elements throughout web development’s history.

The new theme is open source and available on GitHub and is also immediately available for use within Divshot.

Geo for Bootstrap features many unique elements, including:

• A stunning, high-contrast color palette that will immediately draw your users into the interface
• Playful typography designed by luminary Vincent Connare
• Call attention to your content with the brand-new blink tag

To use the new theme from within Divshot, simply create a new Bootstrap page and select the “Geo” theme from the Page Options menu in the sidebar.

We hope you find new and innovative ways to utilize this new theme in your own projects. In fact, we’d love to see what you make, so feel free to post links in the comments!

Scouter: The CSS Selector Specificity Calculator

When you’re developing a tool like Divshot there’s no shortage of fun and interesting challenges. One such challenge we ran into was prioritizing components with similar selectors in our component engine. Two components could target the same element but we wanted to select the component with the most specific selector between the two. Here’s a simple example:

Component #1 is a title bar button with options designated specifically for buttons inside title bars:

.title-bar > .button

Component #2 is a button for use anywhere:

.button

So when I click a button inside a title bar it should default to Component #1. Otherwise, default to Component #2. A simple solution would be to determine the specificity of each selector string. I created Scouter for a quick and easy way to get the specificity score of a selector. Like many of our smaller utility projects it’s open source. It also relies on regular expressions, something that I’d love to have scrutinized and improved by an unsung regex hero on GitHub.

Scouter adheres to the W3C specification of calculating a selector’s specificity:

A selector’s specificity is calculated as follows:

• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the selector (= c)
• ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

The specification is very straightforward, only requiring 40 lines of CoffeeScript. Let’s walk through the code and figure out how it works:

First things first we split up the selector by descendant, sibling, and child combinators (” “, >, +, ~).

Next we pick up all the matches we need: IDs, classes, attributes, types, pseudo-classes, and pseudo-elements. However, we omit the :not() pseudo-class since it doesn’t count toward the specificity score.

That’s our parse method in a nutshell. Parse returns an array of matches and now we need to figure out which match belongs to which number: A, B, or C.

We filter the matches by checking for “#” and throw the IDs inside A. Classes, attributes, and pseudo-classes go inside B. Afterwards we filter out everything in A and B from the matches array to get the remaining matches. Those remaining most likely belong in C.

That’s it. The final score is tallied and you have your specificity score.

Check it out on GitHub. If you have any questions leave a comment. Enjoy!

P.S. Are you a developer obsessed with JavaScript and cutting edge frontend development? Get in touch. Seriously, we’re hiring!

Announcing Divshot Docs: Our Open Source Documentation Site

Today we’re happy to launch Divshot Docs, the official, open source documentation repository for Divshot.

We know that our users deserve better than being thrown into the deep end, so we’re starting with some introductory guides that walk through the different aspects of the Divshot interface. Over time we will bring out step-by-step tutorials, advanced tips and tricks, and more.

Of course, no one can tell us how to improve our docs better than the people using Divshot which is why the documentation is open source on GitHub. If you come across a typo or want to see something covered that isn’t there, just file an issue and we’ll take care of it ASAP.

For the technically curious, the docs site is powered by Jekyll and hosted directly on Amazon S3. I’ll be writing up an in-depth rundown of our static site stack in the next week or two, so stay tuned!

JavaScript Editing & Emmet Integration

Last week we pushed an update that brings JavaScript and CoffeeScript editing directly into the source editor. Custom JavaScript is an important stepping stone toward interactive components and exciting new features on our roadmap. To check it out click the “Source Editor” button and select the “JS” tab from the editor menu.

Divshot automatically includes jQuery on every page so you can easily write code to handle page behavior. It’s great for binding events and manipulating the DOM in your prototypes. In the screenshot below I’m toggling an alert on a click event:

More good news! Our source code editor now supports structural markup (HTML), presentation (CSS), and behavior (JS) for fully customizable pages with more improvements in the pipeline.

One such improvement just released is Emmet integration for HTML and CSS. Emmet speeds up your editing workflow by combining CSS-like expressions with TextMate-style snippets. It allows you to type a CSS selector, press the tab key, and instantly generate HTML.

For more info check out the docs and watch Emmet in action:

On Ovens, Bad UX, and Customer Loyalty

Bad user experience is a slow-acting poison for customer relationships. Small frustrations build up over time and, if left unchecked, will send customers to more intuitive pastures.

Let me give a specific example: I hate the UX of the microwave and oven at my apartment. Absolutely hate it. Let me count the ways:

1. When I set a timer on the oven, it doesn’t display the time remaining but the temperature. I have to push the “Bake Time” button every time I want to see the amount of time remaining.
2. If I happen to press the “Bake Time” button twice, it cancels the timer.
3. There is no way to stop the timer’s beeping without turning off the oven, so when I set a timer to turn or check something, I have to use the microwave’s timer, which brings me to…
4. The microwave timer is set by pushing “Timer”, entering a time, and pressing “Timer” again. Pressing “Start” does nothing.
5. Rather than “enter time, press start” this is one of those microwaves with “one touch” starts for one, two or three minutes. I’ve always disliked that as I rarely want exactly one, two, or three minutes.
6. I do not know how to enter a cooking time on the microwave. It isn’t “press cook time, enter time, press start.” I usually just push “one” and then push “add 30 seconds” until it’s where I want it to be.

I could go into detail on all of the ways these problems violate UX principles and how they could be improved, but more important is the fact that after enough of these problems built up it caused action on my part. I took a look at the brand (Frigidaire, in this case) and I decided that if I ever am in a position to be buying appliances, I’m going to try to avoid them. I just don’t want the headaches.

There hasn’t been any problem with the functionality of the products; they both heat up food in the way I expect. But it’s unpleasant to use them and small annoyances repeated dozens of times over the course of months add up to one big headache.

So it goes with software. There are 50 different bug trackers out there and I bet that 35 of them were born out of developers who were fed up with the UX of existing solutions. GMail’s thread view retroactively made all non-threaded email programs seem to have terrible UX.

UX is much more noticeable when it is bad than when it is good. There are relatively few moments I can think of where software has pro-actively impressed me (wow, that’s a great UX) but I can think of dozens of times when it has frustrated me (ugh, I hate how to do ____ I have to ___). Much of the time my decisions to “switch” between products are driven by frustration with what I have more than desire for what I don’t.

Make sure that, in addition to adding features and fixing bugs, in additional to building a beautiful UI, you take the time to smooth out your user experience. You may not get praised for it, but it also may prevent your users from throwing up their hands and saying “that’s it, I’m looking for something else.”

Announcing Full-Page Source Editing and More!

After hundreds of commits and several months of effort, we’re excited to unveil the biggest update to Divshot since our launch. This release brings with it full-page source editing, a reimagined component panel, zipped downloads of pages, and tons of new components.

Read on to learn more (also check out this video introducing our biggest new feature, the source editor).

Full-Page Source Editing

Divshot’s new source code editor allows you to modify a page’s HTML directly and see the results in real time. Even better, it works both ways: you can also see the code update as you drag new components onto the canvas.

We’ve built our product on the vision that visual tools don’t have to sacrifice code quality, best practices, or fight the developer workflow. We believe that the source code editor is a big step towards realizing that vision.

In addition to just editing the code, here are a few interesting things to try:

• Dragging components into the source code instead of onto the canvas
• Right click a component and click “View Source”
• Move the cursor in the code editor and watch the appropriate component automatically select itself
• Write out a Bootstrap-compatible component (e.g. <a class="btn">Hello</a>) and then click it in the visual editor

This is our most important new feature, ever. We’re proud of where it is today and even more excited for where it will be going in the coming months.

Improved Component Panel

We’ve rebuilt the component panel to make it more useful and easier to explore. Now components come with live previews so you can get a quick visual look at what it will look like on the page. These live previews adapt to the page theme and any custom CSS you’ve added, so you’ll always know exactly what you’re getting.

Components are now grouped into appropriate hierarchies: for example, all form components are nested beneath “Form.” In addition, we’ve added a quick search tool to make it easy to find components by name.

Export to .zip

One of our most requested features has been to export all assets for a page together in a package. We’ve now rolled out basic .zip export in place of our old HTML download: the HTML, CSS, and Javascript is all included automatically and linked appropriately.

Tons of New Components

We had to rebuild our component engine from scratch to make it work with the new source code editor, but we also took that as an opportunity to expand our library. Now available are oft-requested components such as tables, button dropdowns, more form components, the media object, and more!

Go Check it Out!

If you already have a Divshot account, we encourage you to log in and give the new features a spin. If you haven’t tried Divshot before, now’s the perfect time to join the beta! It’s 100% free while in beta and your feedback helps us shape the product for future customers. Thanks, and happy hacking!

This Week in Web Tech #18

Every week we post links about web technology and design to our Twitter feed. Once a week, we roll those links up into a blog post we call This Week in Web Tech.

• 5 Content Marketing Best Practices to Drive Your Design
• 21 Inspiring Examples of White Space in Web Design | Inspiration
• Responsive CSS Timeline with 3D Effect
• Code smells in CSS
• Adding A Personal Touch To Your Web Design
• A more robust version of the Bootstrap modal window.
• User Motivation Determines the Best Color Scheme for Your Website
• Involve Developers In The Design Process (Divshot can help facilitate this kind of communication)
• Native CSS feature detection via the @supports rule
• Adapting your WebKit-optimized site for Internet Explorer 10

Short and sweet this week. If you enjoy the content follow us on Twitter!

This Week in Web Tech #16 - #17

Every week we post links about web technology and design to our Twitter feed. Once a week, we roll those links up into a blog post we call This Week in Web Tech.

• Chrome Canary for Developers
• Placeholder Attribute Is Not A Label!
• Microsoft put out a free eBook on Programming Windows 8 Apps with HTML, CSS, and JavaScript
• Inspiration for web development with Twitter Bootstrap
• Kort: A thumbnail preview concept.
• Slider toggles can be confusing. Here’s one potential solution.
• Why good design and open design often conflict
• Being a web developer “is as awesome as Chewbacca riding a squirrel, fighting Nazis with a cross bow.” @codepo8
• Writing Fast, Memory-Efficient JavaScript
• Two things about the iPad mini
• liffect: CSS3 effects for lists
• People like circles. Use ‘em in your designs.
• WebRTC is now shipping in Chrome 23. No flags, no special build.
• 20 Awesome jQuery Plugins for Responsive Layout
• The usability experts were right: 5 changes Thumbtack made to increase conversion by 50%
• 5 More HTML5 APIs You Didn’t Know Existed
• Watch Divshot co-founder @mbleigh talk about Cross-Origin Resource Sharing (CORS) at RubyConf 2012!
• Simple Methods For Writing Scalable CSS Right Now
• CSS-aware HTML Minifier for PhantomJS
• Mobile Design Typography is Vitally Important … and Challenging
• Mobile Design Details: Hide/Show Passwords
• On HTML5 and the proposed main element | Ian Devlin
• FinancialTimes exec expounding the virtues of HTML5
• CSS Custom Filters
• HTML5 will change design – if we let it
• Using CSS Transitions in Responsive Web Design
• How to use Twitter Bootstrap to Create a Responsive Website Design (or just let Divshot do it for you)
• Wait, DevTools could do THAT?
• How to Detect DOM Changes in CSS

This Week in Web Tech #15

Every week we post links about web technology and design to our Twitter feed. Once a week, we roll those links up into a blog post we call This Week in Web Tech.

• Last week @mbleigh spoke at RubyConf in Denver about what you can do with CORS.
• We upgraded the Bootstrap CSS and JavaScript in Divshot to 2.2.0!
• Kick-Start Your Project: A Collection of Handy CSS Snippets
• 5 Really Useful Responsive Web Design Patterns
• Towards A Retina Web
• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
• 9 Common Usability Mistakes In Web Design
• List of Bootstrap Resources from Bootsnipp
• Bootstrap 2.2.0 released
• Becoming Device-Agnostic
• A Closer Look At Font Rendering
• HTML5 mythbusting
• The Responsive Designer
• Stop Thinking in Pixels: Improving Web Layout