Ian Larson's Tumblr

2013-06-01

Making your font size responde to your screen size, easy & maintainable

Lately quite a few people approached me asking how I got responsive text sizing working so neatly on my “Out of Words” framework. They went on in great length why this isn’t really possible in HTML/CSS without JS. And if you really get it to work, it’s tedious to develop & maintain.

Well, that’s not true. And I can show you how I did it. It’s purely HTML & CSS. And it isn’t complicated either.

I used LESS to help me with my CSS here, but any other CSS preprocessor can do the same. And you should know a bit about how variables & media queries work. That’s all we need to make it happen.

Lets get started. First, we will be working with the “rem” unit for font sizing. “rem” refers to the font-size of the root element (meaning the HTML tag). So we need to define our base font size on the HTML element.

First, I define a variable in LESS, that I called “@basefont-size-singlecol-traditional” as in my example:

@basefont-size-singlecol-traditional: 13px;

Remember, this is 2013. We are building mobile first & the font size you just defined is the lowest size you want to allow.

After that, you should connected this variable with the font-size on our HTML element. In LESS this would look like this:

html /*.singlecol*/ {
    font-size: @basefont-size-singlecol-traditional;
    line-height: 1.45;
}

Don’t forget to set your line height relative, so it can scale with your font size.

Now you can throw out some media-queries that target the break-points you want your font-size to change. In my case I have 8 defined breakpoints. And I use my variables to increase the font size on every media query for a fixed amount (as much as you would like to increase it for every breakpoint). Later on, if I need to change the base font size for some reason, I only need to change the value in the “@basefont-size-singlecol-traditional” & everything else takes care of its self.

@media only screen and (max-width: 499px) {
    html {
        font-size: @basefont-size-singlecol-traditional + 1;
        &.BigFont {
            font-size: @basefont-size-singlecol-traditional + 7;
        }
        &.multicol {
            font-size: @basefont-size-multicol-traditional + 1;
            &.BigFont {
                font-size: @basefont-size-multicol-traditional + 7;
            }
        }
    }
}
@media only screen and (min-width: 500px) {
    html {
        font-size: @basefont-size-singlecol-traditional + 2;
        &.BigFont {
            font-size: @basefont-size-singlecol-traditional + 8;
        }
        &.multicol {
            font-size: @basefont-size-multicol-traditional + 2;
            &.BigFont {
                font-size: @basefont-size-multicol-traditional + 8;
            }
        }
        body {
            width: @base-body-width-traditional + 40px;
        }
    }
}
@media only screen and (min-width: 600px) {
    html {
        font-size: @basefont-size-singlecol-traditional + 3;
        &.BigFont {
            font-size: @basefont-size-singlecol-traditional + 9;
        }
        &.multicol {
            font-size: @basefont-size-multicol-traditional + 3;
            &.BigFont {
                font-size: @basefont-size-multicol-traditional + 9;
            }
        }
        body {
            width: @base-body-width-traditional + 80px;
        }
    }
}

As you can see I added the width of the content area as a variable as well. This makes it possible to maintain roughly the same amount of characters per line. This way you can preserve the line lenght as your text scales.

2013-05-29

houseofbuttons:

Submit button by Alex Pankratov

Source: houseofbuttons

→

houseofbuttons:

Youtube dropdown hover state

Source: houseofbuttons

→

houseofbuttons:

Camp Basecamp iPhone app

Source: houseofbuttons

→

Gerd Leonhard on the Future of Marketing

1. By 2020, most interruptive marketing will be gone. Instead, marketing will be personalized, customized, and adapted to what I have expressed as my wishes or opt-ins — which essentially means that advertising becomes content. Data will be essential, and as users, we’ll be paying with our data — bartering a bit of our personal information in return for the use of platforms and services. Customers will be forming relationships with brands that are built on trust, and if a company breaks that trust, it will be very quickly viral and very quickly over. By 2020, unauthorized targeting of consumers will essentially be useless. I, as a consumer, am going to choose who I want to hear from. I’m going to like things, or I won’t like them, and you will have to earn that from me.

2. The idea of having a separate marketing department is going to vanish. In the future, the “reason to buy” will be socially motivated. If a product is great and everybody loves it, it will sell. And you’re going to stop buying things from companies that don’t fit your values, just because you can’t see giving them the money.

3. Location-based services will be immensely valuable and useful, but not until we have some kind of a privacy bank — some authorized authority or entity that will keep the public safe, and that has a neutral objective. Because clearly, I’m not going to offer up my location if I don’t feel safe.

4. Companies are going to try to predict how people feel about their brand, and then adjust in real time by changing features, and starting new conversations with customers in real time. All of the companies of the future will have one big job: to make sure that the customer feels cherished and safeguarded. As Amazon calls it, “customer delight,” will be the number one mission. If you screw that up, everyone will leave.

5. Companies can collect all the data they want, but data alone will never be enough. You still need to reach consumers on an emotional level. The bottom line for marketers will be that if a product or service isn’t humanized, it won’t sell — because buying something isn’t an intellectual process of saying “this could be useful”; it’s saying “I really want this.”

2013-05-07

(via jamiew)

Source: brosephstalin.com

2013-05-03

5 Myths of Password Security

1. MYTH: Complexity Trumps Length

The truth here is that password security depends heavily on the attack method. Dictionary attackscan crack different passwords than brute-force attacks. People often think of a short set of random characters like “*K>#)0$j4” as super secure, but a long string of memorable words like “golfkangaroocrispyhalitosis” is actually stronger.

The reason has everything to do with password entropy: a representation of how much uncertainty there is in a password. This translates to how computationally difficult a password is to crack. Simply put, adding length increases entropy more efficiently than replacing letters with symbols.

It is also important for users to use random text in passwords, like ‘golf kangaroo crispy halitosis’, which is comprised of words with no obvious correlation. Using people’s names, repeating characters, sequential numbers or well-known keyboard entries like `qwerty` are expected – the opposite of random.

We recommend the intrigued reader check out this great blog post for a deeper explanation on password entropy, or XKCD’s notorious (and amazing) comic for quicker reference. When enforcing passwords or giving guidance to your users, prioritize length and random text over character complexity. Better yet, aim for both.

2. MYTH: Big Companies Store Passwords Securely

50% of web apps store credentials unencrypted. As in plain text. As in someone who gains access to the app’s database can simply read the passwords. LinkedIn is about as legitimate as companies come, but they weren’t following basic best practices (namely, not using a salt) before their breach last year. Users should use a unique password everywhere, and on account creation screens, you can remind them to do so. Not only does it help the user, it also means someone else’s weak hash won’t have an effect on your system.

3. MYTH: Password Checkers Ensure Strong Passwords

Stormpath uses password strength enforcement on our own registration form, and it’s available to use through our API. It’s absolutely a useful mechanism, but not all password checkers are created equal.

Password strength checkers use custom “security criteria” to assess a password, and a minimum score may be required to finish registration. There are two common methods for calculating these scores: measuring the entropy of the password (often represented as ‘time to crack’) or comparing it against a set of benchmarks. In addition to length, common benchmarks include whether a password contains numbers, mixed case letters, or special characters.

Microsoft’s secure password checker and The Password Meter are two popular third party options. Both are useful tools, but they’re not substitutes for best practices. Less-than-stellar passwords can score high:

PASSWORDMICROSOFTTHE PASSWORD METERjjjjjjjjjjjjjjjjjjjjjjjjjjjjBestVery WeakJessica1234567StrongVery StrongQwertyabc123StrongStrong

For instance, a string of the letter ‘j’ should not receive top marks, even with its high entropy value. An attacker can too easily repeat one character the maximum number of times a login form allows. Does combining ‘Jessica’ and ‘1234567’ make for a Very Strong password? They were among the most common passwords in the massive RockYou breach. The same goes for ‘Qwertyabc123’, which both tools mark as Strong. Blacklisting common passwords is difficult to bake into a password checker (our own form would block the first password above and allow the second two), but they’re easy for an informed user to consider.

Keep in mind that we’ve been assuming a solid implementation of the checker. Unfortunately, scoring criteria are often weak (i.e. 6 character minimum), based on outdated assumptions, or simply nonexistent. Overall, these enforcement algorithms provide improved security to the majority of users. However, their inevitable weaknesses mean they should be viewed as an added bonus and never as a reason to settle for weak encryption.

4. MYTH: Two-Factor Auth Means Any Password Will Do

Two–factor authentication is like every other system in at least one regard: flaws will be found. Last year, CloudFlare CEO Matthew Prince wrote up a detailed account of the hack that gained access to his Email account. The kicker? He had already implemented two-factor authentication—the attacker got around it.

This is absolutely not a dismissal of multi-factor auth. Use it when it’s available! Two factor is on the Stormpath roadmap, and we use it for many backend systems. Just don’t consider it a substitute for strong passwords.

5. MYTH: CAPTCHA Keeps Accounts Safe

Two major weaknesses make CAPTCHA a poor choice for preventing brute-force login attempts. First, it’s difficult for users. Second, most implementations aren’t sufficiently secure. CAPTCHA has the unenviable task of finding that sweet spot where it can fool ever-improving attacks without introducing significant friction to the login process.

Stanford University conducted an interesting study examining just how effective CAPTCHA is at minimizing that friction. A few takeaways:

3 people looking at the same CAPTCHA agreed on the reading just 71% of the time.
Average time to solve a text-based CAPTCHA = 9.8 seconds.
3 people listening to the same audio CAPTCHA came up with the same value only 31.2% of the time.
Average time to solve an audio CAPTCHA = 28.4 seconds.
Time to solve was even longer for Non-native English speakers

That’s a lot of annoyance from a user standpoint, and if usability for usability’s sake isn’t enough, CAPTCHA really does cause users to bounce. The percentage of users who give up in frustration varies, but figures of 20% have been reported. It should be noted that some of these are likely the bots CAPTCHA is intended to thwart.

To cap it all off, most CAPTCHA schemes are quite breakable. There’s a vibrant economy around doing just that. More secure implementations are forced to engage in constant escalation to stay that way—resulting in more difficult CAPTCHAs. At the end of the day, we don’t recommend CAPTCHA for protecting against account hijacking.

→

Drops in search traffic is an analytics problem, caused by “Dark Google”

Looking at their Web analytics, many publishers have seen an alarming shift: their search traffic has dropped, while their share of referrals from social has risen. Perhaps the era of social media has well and truly arrived. The truth, however, is less dramatic but potentially more troubling.

The drops in search traffic is an analytics problem, caused by what some are calling “dark search” or “dark Google.” The issue is a technical one, but in simple terms, it’s caused by certain browsers blocking websites from tracking exactly how users arrived there. For example, when users of Safari on iOS 6 click on a search result, the site they’re visiting has no way of telling they found that content through search. Analytics packages typically lump this traffic in the “direct” bucket, giving an inaccurate picture of where their traffic is actually coming from.

According to digital agency Rosetta, the two biggest sources of dark search right now are Apple devices running iOS 6, which runs on all new iPads, iPhones and iPods, and some recent versions of Firefox. Neither browser passes search referral data to analytics packages accurately, and they account for a growing number of users.

“This misappropriation of traffic is already an issue, and it’s only going to get worse as people upgrade browsers and switch away from desktop to mobile search on iOS devices,” said Stephen Pitts, SEO director at Rosetta. ”Already a lot of search traffic is being misappropriated as direct.”

Many publishers and marketers are looking at this inaccurate and incomplete data and drawing conclusions based on it. Buzzfeed, for example, published a story this week citing aggregate data from 200 publishers in its “Buzzfeed Network.” In the last eight months, traffic from Google to its partners’ sites has dropped 30 percent, it said, while referrals from Facebook continue to rise. It implied this shift is indicative of a “shift in the way readers discover their content.” Perhaps in part it is, but it’s also likely that dark Google played a far more significant role.

Meanwhile, Mail Online has also seen a dip in search referrals from Google in the past few months, according to its internal analytics, but it’s also seen a spike in direct visits. “We are seeing less traffic coming from Google and more traffic coming straight to Mail Online,” said the company’s CRO Rich Sutton. “We’re converting casual users that find us through search into habitual ones,” he added.

It might look that way, but that probably isn’t the case. A more likely scenario is that the publisher’s volume of search traffic has remained roughly consistent but is actually being counted incorrectly as direct visits.

Users are changing their behaviors and habits, of course, and discovering more and more content through channels such as social but probably not to the extent that would account for the type of drastic dip reported by Buzzfeed. The problem is it’s impossible to tell what’s really going on because that referral data simply isn’t being passed.

Dark Google is as much of a problem for marketers as it is publishers. According to Rosetta’s analytics, organic search traffic has decreased for every single one of its clients as a result of this misappropriation of traffic. That’s a big issue, because both agencies and their clients are used to making investment decisions based on hard data. As that data becomes less reliable, it’s becoming increasingly difficult for them to allocate their spending and resources appropriately.

“It puts us in this precarious situation because the total traffic numbers are the same, but the data is telling us the mix has changed,” said Jason Tabeling, who heads up paid, owned and earned media at Rosetta. ”We’re used to making decisions based on data, but if we don’t have that, we’re flying blind. The risk now is that investment levels might shift when they shouldn’t.”

The alarming fact is that the way things currently stand, these gaps will only get bigger unless workarounds are found. That means both publishers and marketers could potentially go from knowing their audiences and customers intimately, to having to make educated guesses based on what little data they do have available to them.

Both marketers and publishers are already making assumptions they have little way of validating as a result of dark search — assumptions like, the rise of social is resulting in fewer search referrals. It often looks that way, based on analytics data, but it’s becomingly increasingly evident that the accuracy of the data itself needs questioning.

2013-05-02

Another nice Captcha alternative from http://letterboxd.com/

→

It is not the employer who pays the wages. He only handles the money. It is the product that pays the wages.

— Henry Ford, 1922