The tax that comes with introducing any new feature into your product is high. I cannot stress this enough. Sure, maybe the new feature isn’t hard to build, maybe it only takes a couple days and a handful of people, maybe it can be shipped and delivered by next week. And maybe the additional cognitive load for a user isn’t high — it’s just an extra icon here, after all, or an extra slot in a menu there. But once your new feature is out there, it’s out there. A real thing used by real people.

Good guidance about adding new features into any product and some tips about how to manage it going out.

▪

• Intranet
• Updates
• Versions

(You can also get a free 30-day trial and bring back Cake Fridays here.)

Sponsorship by The Syndicate.

▪

If you’re selling a vacuum, don’t start by pitching its bells and whistles. Instead, sell a clean home. It’s the reason people look to buy a vacuum in the first place. Once you’ve established that you understand — or better yet, sympathize with — your customers’ needs it becomes easier to justify each feature by tracing it back to the product’s intent.

A good analogy for Jobs to be Done – people don’t buy for features, they buy to solve a problem in their life.

▪

Do it well, and you might be Don Draper, with the power to leave the room breathless, unified behind a vision that stirs an emotion deep inside your gut. Do it poorly, and you might sentence a promising young idea to an untimely death or fail to gather useful feedback.

Presenting designs is an art, and Julie gives some great points on how to do it well.

▪

▪

I’m angry because Apple not only engages in the questionable practice of stashing its cash in offshore tax havens, it has become the greatest offender, avoiding US taxes on $74 billion over the past four years. There’s something fundamentally wrong when the wealthiest company in America pays 12.6% in taxes, while my father’s small business, my grandfather’s store and the Korean Deli across the street pay a rate nearly three times higher. And it’s not just savvy accounting or a strategic maneuver—Apple’s tax avoidance has a profoundly damaging effect on our whole country.

Earlier today, Tim Cook testified for a Senate Committee in regards to this exact issue. If you were just to listen to the loudest voices, you’d think Apple had become a mafia style tax avoider that stashes money in a secret Cayman account to hide it from the government.

But Apple has done absolutely nothing illegal. Unlike Brian’s grandfather’s store and Korean Deli, Apple does business in dozens of countries. They pay taxes in each country they do business, so if an iPhone is sold in the US, they pay income taxes in the US. But if it’s sold in Russia, they’ll follow whatever the local tax practices are.

For some reason, the US Congress feels entitled to income taxes on business that was not done in the US in any way. An iPhone manufactured in China and sold in France had nothing to do with the United States, except for the time it took to design it. But income taxes aren’t based on time, they’re based on products sold.

I’m no tax expert, but that’s why Apple’s income tax rate looks so low. It’s dividing taxes paid by income earned everywhere, not just the US.

Apple hasn’t broken the law, and if you think people have called for Tim Cook to be fired because of the iPhone 5 or share prices, I can’t even imagine a CEO that would be giving money unnecessarily to the government. That would be irresponsible to shareholders.

If you don’t like Apple’s tax practices, talk to your local representative, but don’t get angry at Apple. They’re just playing the cards they’re dealt.

▪

In early 2012, Southwest Airlines began reducing seat pitch—better known as legroom—in their 737s by a single inch, from 32” to 31”. This allowed them to add an additional six seats per flight.

That means, every year that single inch earns them $773,074,040 of additional revenue. I guess every little bit really does count.

▪

Mad Mimi also offers robust APIs, integrations, and add-on features. This makes it a perfect fit for today’s visionaries, artists, and entrepreneurs, including great digital brands like Fancy and StumbleUpon, who use Mad Mimi to communicate with their customers.

Best yet, Mad Mimi is free for up to 2,500 contacts. We hope you’ll give us a try or email us with questions.

Sponsorship by The Syndicate.

▪

LinkedIn fails to hit absolutely basic product features that should have been in there 5 years ago, both on mobile and desktop. Instead, the core features get buried under successive layers of mediocre non-core products, the latest being a flood of me-too news aggregation that’s creeping through the product like ivy, and none of which can be properly configured, let alone turned off.

Evans’ criticisms of LinkedIn as a product are spot on. The problem is, the incentives are in the wrong direction. The company makes money off recruiters paying for premium accounts to contact you, not to help you find a job. I realized that switch when I stopped getting the “Upgrade to a premium account!” emails.

Ben Thompson elaborated on the jobs to be done of LinkedIn:

LinkedIn is the poster child for value chains: the jobs you pay LinkedIn to do work very well, and the stuff you get for free doesn’t.

His advice is very apt:

For too many years, I fell into the LinkedIn/resume trap, but after starting stratechery, I’ve received more offers for better positions with more interesting companies worth more money than I ever did on LinkedIn.

I’ve found the same to be true. Writing this blog for several years now has led me to connect with more interesting people and gotten me more jobs than I’ve ever been offered from recruiters spamming me on LinkedIn. If you invest in doing a great job and owning your online presence, it says a lot more than just updating your LinkedIn resume every couple of years when you change a job.

I guarantee the quality of opportunities will be much better as well. Any company that is turning to recruitment firms is having it’s own issues attracting great talent. There’s probably a reason why they can’t hire on their own¹. The best firms never post a job listing.

▪

1. I will admit there are gold nuggets out there, but they are few and far between.

SASS is one of the two popular CSS precompilers (along with LESS). If you’re not already familiar with the language, it’ll be important to get familiar with what it’s capable of before this article. There are great guides on getting started at The SASS Way and A List Apart.

After you’ve written (and come back to) code on projects, we start to see the 30,000 foot view of how SASS can help code maintainable. In this post, we will focus on a few rules regarding how to build more maintainable CSS through SASS.

Project Structure in SASS

Thinking about how we use SASS all starts with how we structure our projects. John W. Long at The SASS Way recently profiled a great way of doing this:

project/
..css
.....main.css
..stylesheets/
....modules/
......_mixins.scss
....partials/
......_layout.scss
....vendor/
......_bootstrap.scss
....main.scss

In the project directory, we’ll have two CSS related directories: stylesheets and css. The first will contain our working SASS files and the second our compiled CSS. Inside stylesheets will be three other directories:

• /modules/: For SASS code that doesn’t actually output to our compiled CSS like mixins, partials, and variables
• /partials/: Where most of your CSS will be constructed. It’s a good idea to break your stylesheets into functional pieces. We’ll cover this in a discussion of SMACSS.
• /vendor/: Any CSS that is prepackaged should live in here. At Credera, we’re fans of Bootstrap, and this is where we will put those stylesheets.

The main.scss file will do the @import for all the files inside the three directories.

Using Bootstrap in SASS

Bootstrap is a fantastic framework on which to build many sites. The goal is not to keep the stock UI elements, but to extend them to match your visual style. Unfortunately, it’s not maintained natively in SASS, but John Long maintains a port from LESS to SASS on Github.

The best way to start is to download Long’s files and drop them into the vendor directory. The bootstrap.scss and responsive.scss should compile into their own .css files in the css directory.

If you’ve used Bootstrap previously, you’ll be well on your way to building your project at this point. However, don’t forget that SASS also means extra features on top of CSS. Luckily, Long has included some very useful files in his port that you should dig into further:

• _variables.scss: Ever get frustrated that everything in Bootstrap is the default blue/black/white? Instead of setting those in a global partial file, make the changes in here. Want to get rid of all the blue links? Just update $linkColor and $linkColorHover and watch the changes across the whole site
• _mixins.scss: Also included are a set of mixins that can do a lot for you

SMACSS & Object-Oriented CSS: The Real Secret to Maintainable CSS

Any developer that has updated a user interface that written by someone else will understand the spaghetti code that becomes a fight for preference rules to properly style elements. In CSS, it’s too easy to break the first rule of development – don’t repeat yourself, but SASS can help that.

Our workflow starts with Jonathan Snook’s book, Scalable and Modular Architecture for CSS or SMACSS (pronounced Smacks) for short. The important chapters are available for free on his site. The key rules are included in chapters 2-9.

What’s important to understand are the five categories of CSS rules:

1. Base Rules
2. Layout Rules
3. Module (or style) Rules
4. State Rules
5. Theme Rules

Understanding these categorizations helps define a new workflow for writing front-end code. Each level builds on top of the last and we should write our front-end code in this order.

As we walk through this example, the source files are available on Github to follow along.

I like to start with a _layout.scss file in my partials directory and focus on getting things where they need to be on the page, regardless of how they look.

We’ll start with an example Photoshop comp (Fig 1):

Fig 1 – Our example Photoshop comp

The first step is to build a layout that applies no visual style (Fig 2). The goal is to get things where they need to be on the page without worrying about backgrounds, drop shadows, and colors.

Fig 2 – Step 1 of building our CSS, applying our layout

This helps us to achieve the first rule of Object-Oriented CSS, which is separating structure from skin. By having a set of structure/layout rules, we can reuse those across the entire site without repeating the style declarations like margins and easily update them later.

Next, we add our skin styles as separate classes, focusing on making everything pixel perfect. A div might have multiple classes applied to it: <div class="layout style1 state1">. Just keep in mind the principle of not repeating yourself.I If a visual style gets used in multiple places, consider the following: 1) making it a single reusable style or 2) applying it as a mixin. The goal is to change it once and have it update everywhere.

Naming Classes for Maintainability

Naming your classes is always a big debate. One rule to keep in mind for long-term maintainability is to name your classes based on what they do, not what they are. For example, instead of naming an alert .message-red, name it .message-alert. That way when your visual design changes and it goes from red to orange, your class names continue to make sense.

Wrapping Up

Creating precompilers for CSS was a brilliant move. By shifting the compatibility to the developer tools rather than the browser, provides new features for CSS that lead to more maintainable code and we can use it in 100% of projects today. No IE6 style compatibility issues here.

I’ve posted a sample project template on Github that incorporates Long’s SASS Bootstrap template and Compass, and can serve as a base for any new project.

SASS allows us to be more granular and organized with our CSS, but still compile it out to something optimized for file size. We just have to keep a few simple rules in mind as we move forward.

If you’ve had experience building maintainable sites in SASS and have any comments, please share those with us below.