Friday, August 10, 2012

Content: A Blessing, A Bubble, A Burden

Everyone is talking about content. Googling the phrase “content strategy” retrieves almost 50 million results — a clear indicator that interest in content is very much in the zeitgeist. By the time you read this, I expect that number will have grown even higher.
But I also suspect that the substance of the talk would be quite different if content were truly respected. I believe this because the way we talk about content is beginning to sound a lot like the way we talk about money.

The Content Bubble

The trouble with this is that we don’t really get money, either. Few are foolish enough to say it aloud, but the actions of many betray a single fallacy that remains the pernicious root of recurring fiscal irresponsibility: that with enough money, any problem can be solved. Removed from crisis, we know this to be untrue. We’ve seen it. We’ve lived through it. Yet, we continue to obsess over how much we have and how much more we think we need.
Money, however, is not simply a quantitative measure of units — a figure that can be repeatedly plugged into an equation until it produces something positive. Money is a representation of value. It is a symbol — not a quantitative measure, but a qualitative one. Indeed, the concept of value is a chimera; it evades objective meaning just as readily from one person to another as it does for the same person from one context to another.

Consider movie tickets: Breaking down a $10 ticket to its cost per minute — roughly 11 cents for a two-hour picture — gets you no closer to a true valuation of the movie than assuming its initial production costs are a relevant indicator. After all, could anyone seriously argue that its $200 million price tag made the phenomenally bad film 2012 better than The King’s Speech, an Academy Award-winning independent production that cost only $15 million? Neither a movie’s length nor its cost can predict value, at least as far as the consumer is concerned. But after the last frame fades from view, ask any moviegoer about value and you’ll certainly get strong responses. Duration alone doesn’t satisfy. Quality will be the subjective basis on which people decide whether seeing a film is worth $10. That much is plain to viewers, yet elusive to creators who have other pressures in formulating their expectations of success.
As this simple example shows, when it comes to money, we could certainly stand to distance ourselves from a units-based perspective and consider the story that a qualitative perspective tells. One day, I imagine, it will be clear that our insistence on focusing only on the quantitative was at least in part responsible for the mess we ended up in back in 2008. We may wish for a formula to solve our financial woes, but we know that they are rooted in our system of value, not in our system of measure.
Sadly, the same thing is happening in marketing. Whereas a disconnect between money and value has created disastrous fiscal bubbles, a disconnect between content and value is inflating a bubble of its own. Content — today’s currency of attention — has taken the place of money as a panacea. To be sure, vanity is also a factor here. The visibility that an individual or group can have today as a result of content is unprecedented, motivating production when silence might be wiser. But I am more interested here in exploring the inflation of content’s business value than the inflation of egos. After the last recession, we learned enough about bubbles to be able to watch this one inflate from the inside.
As I write this, I’m overwhelmed by content — everything from blogs to books — by marketers, social scientists and others, who are studying in detail the expanding content bubble from their unique points of view, fascinated by the transformative force of creativity on society, especially of course on marketing, but perhaps discounting the fact that they write from within it. Yet writing about the content bubble from within the content bubble is not producing the criticism it should. The complexity of content surely merits study, but my simple understanding of what is happening is this: Because we can create content, we do.
In the first chapter of my new book, The Strategic Web Designer, I set the stage by asking the question, “What is the Web?” and taking the “scenic route” to the answer, however subjective it may be. But I suppose a more accessible definition could be that the Web simply is content. In an article written for SEED magazine about our struggle to manage the information we’ve produced (among other things), Iris Vargas accounts for the almost incomprehensibly large corpus of digital content in the world:
“As of January 2010, the total amount of digital content that humans had collectively produced was estimated at 1 zettabyte. To put this into perspective, the letter “z” in a standard Word document amounts to roughly 1 byte. A typed page comes to about 2,000 bytes. A high-resolution photograph? 2 million bytes, or megabytes. Add six more zeros and you get two terabytes — the equivalent of all the information contained in the U.S. academic research library. Another six zeros (we’re now at 18) brings us to the exabyte. Five exabytes, according to some scholars, could store all the words ever spoken by human beings. One thousand exabytes equals one zettabyte, the total amount of digital content in the world as of this time last year.”
One zettabyte sure does sound impressive, but its meaning is still elusive. We easily understand megabytes and gigabytes — even terabytes — and we can visualize the space they require by thinking of the portable hard drives we carry around. But envisioning a zettabyte? I’m not sure I can do that in the same way. That’s where Eli Pariser comes in. In his fascinating book The Filter Bubble, he offers a bit more detail on the specific kinds of content that account for these numbers:
“We are overwhelmed by a torrent of information: 900,000 blog posts, 50 million tweets, more than 60 million Facebook status updates, and 210 billion e-mails are sent off into the electronic ether every day. Eric Schmidt likes to point out that if you recorded all human communication from the dawn of time to 2003, it’d take up about 5 billion gigabytes of storage space. Now we’re creating that much data every two days.”
Accounting for the kinds of content that make up this massively growing corpus is helpful — I know what a typical blog post looks like. Granted, much of the content that Vargas and Pariser mention (such as status updates, emails and the like) is not typically what we’d consider Web content, but enough of it is to infer a sobering point: The Web does not need any more content.
And yet, content is the point of every website. For those who design things for the Web, this provides a bit of a paradox, doesn’t it? Amidst a glut of content, one is left to question: What is it all for?

The True Cost(s) Of Content

Our collective prolificacy makes at least one thing quite clear: We value content. Or, at least we think we do. Gaining insight into value, its subjectivity notwithstanding, has always been the pursuit of advertising. And today, the assumption of the value of content — undifferentiated as it is — has been enough to create a new “currency” in marketing (or, to employ a historical metaphor more fitting of the frenzy let loose by Web 2.0, a new Gold Rush). In scrambling to get a piece of the action, we build our marketing strategies upon the same logic of “more” that failed to keep financial collapse at bay: If we create enough content, people will pay attention to us and line up, ready to buy.
But content isn’t free; even lousy content costs something. And if a balance sheet doesn’t include a budget line for content creation, then it’s not detailed enough. Someone is paying for it, in time.

In this regard, content marketing has taken many of its cues from the wrong source: print publishing. The publishing industry — magazines, especially — has been propped up by advertising, which is problematic on two levels. The first is that advertising-subsidized publishing avoids the reality of the true cost of content. Before it even reaches the reader, content gets distorted in value. Without some advertising, readers would have to pay the full cost — something that publishers at some point believed would be impossible, thus creating a self-fulfilling prophecy. This leads to the second problem: that a system that has always depended on subsidies will tend to carve the path of least resistance. Rather than slowly wean off advertising and increase the cost to the reader, it will depend more heavily on advertising and reduce the cost to the reader.
That is, until the ratio reaches an imbalance and readers begin to question why they are paying to see ads. This is a simple law of… well, economics. Before the bubble pops, readers will accept that advertisers have subtle, unspoken editorial control. But as soon as the tipping point is reached, where advertising volume supersedes everything else, readership will begin to drop for one simple reason: readers’ sense of value has been violated.
In 2008, when the overall market experienced a significant decline, magazine advertising dropped by almost 12%. That may not sound like much, but when you consider that only 42 magazines saw an increase in advertising of any kind that year, the dramatic reality of the situation becomes clearer. In fact, Folio Magazine pointed out that it was the “biggest dropoff since 2000, the earliest year comparative PIB numbers are available.”
I personally remember receiving a much slighter than usual issue of Advertising Age in 2009 and chuckling at a sticker placed over the masthead that read, “Marketing in a Recession: It might be only 28 pages, but it’s jam-packed with good advice.” Though I was aware that the previous issues’ bulk was inflated by ads, not by more content, picking up the newly lean and austere 25-page issue certainly made me question my subscription. Advertising, it seems, not only has played an integral role in the economics of publishing, but has also created an illusion of health. I had to see AdAge reduced to almost nothing in order to realize that, for me, the value hadn’t been there for quite some time.
Unfortunately, the imbalance between advertising and content intrinsic to the print publishing industry has not substantially changed in its online form. In fact, it’s gotten worse. Just about every mass media website has an immediately obvious imbalance of ads and content. Take a moment to open an article from your favorite website — you know, The Huffington Post, I Can Has Cheezburger, Perez Hilton or Engadget (which, for better or for worse, are the most popular destinations on the Web today) — and notice how the page is filled mostly with peripheral stuff that has very little to do with the article on the page.
All you have to do is glance at these tiny screenshots to see the obvious imbalance:

“Stuff,” by the way, isn’t meant to be casual; it should be the new standard term for content that is carelessly stuffed into every last pixel available to it. After all, when I use the word “content,” advertisements, social media widgets and lures to even more (supposedly related) content aren’t what I have in mind at all. Nonetheless, by force of volume, stuff is evidently what the publishers value more than content. Surveying pages like these, you certainly shouldn’t conclude that enabling users to read is high up on the priority list for online publishers, either. Nor are many other things that readers — or designers, for that matter — hold sacred.
If publishers don’t care whether their websites’ content is read, what do they care about? It’s simple: they care about clicks, because clicks validate advertising. Mass media publishers know that their websites receive such a high volume of traffic that crowding their pages with as many opportunities for users to click makes statistical sense. When hundreds of thousands of users access a Web page on a daily basis, it’s highly probable that a significant number of them will click a link (any link will do) that either prolongs their visit or sends them elsewhere via a paid advertisement.
Both scenarios are valuable to the publisher. A click on an ad… well, that’s just easy money; a click to another page on the website just increases the chance that the visitor will eventually click on an ad. At this level, it simply doesn’t matter whether the visitor’s experience with the content is satisfying. For publishers, it is about volume — that’s all. The more visitors their websites get, the more money they will make. This is shock and awe; the special ops happen behind the scenes, and there’s no hero stuff going on. It’s number crunching and content farming all the way up.
It might sound cynical, but quality couldn’t factor any less than it does in the content strategy of most mass media. This isn’t just true on the Web. The statistical value of volume is at the heart of cable television programming, as well. Cable news, especially, employs the same shotgun tactics of the website publishers I’ve been describing, except that instead of measuring the value of viewer attention by page views and clicks, they measure it by the amount of time viewers remain dialed in to their broadcast.
By creating the illusion that important news is happening all the time — so much so that a perpetual feed of news runs at the bottom of most programs, while the rest of the screen is divided Brady Bunch-style into smaller boxes of talking heads, social media commentary and, of course, sponsored messages — cable news captures us in a steady yet unsatisfying trance and leads us on with repeated promises that the really important stuff is “coming up, just after this.”

Image source.
Television has the added advantage of being able to speak, literally, to both viewers and listeners, simultaneously weaving complex and unrelated audio and visual messages in and out of its programming, while our brains filter through only the information that is relevant to us. Unfortunately for readers’ attention, that just doesn’t work well on the Web.
Yet, the advertising-subsidized publishing model carried over from print to Web has worked as well as those who profit from it require. In fact, it has worked so well that advertising-subsidized content has reached an inflection point at which the more apt phrase is content-subsidized advertising. But the term you’re likely more familiar with is one I used earlier: “content farming,” the process of creating content with such great prolificacy — if not promiscuity — that it becomes purely a platform for advertising.
Put simply, a content farm is distinguished by its prioritization of advertising opportunity over quality of content — a disingenuousness made clear to any user who arrives at one from a search, only to find its articles too brief, too promotional or just too stupid to be useful. Just as there is no such thing as unlawful stupidity, there are, of course, no regulations against stupidity online. Adam Gopnik, commenting in the New Yorker on the “cognitive exasperation” of the online experience, puts it in terms I immediately connected with:
“Our trouble is not the over-all absence of smartness but the intractable power of pure stupidity, and no machine, or mind, seems extended enough to cure that.”
Nevertheless, Google will try — the irony of its effort notwithstanding. Though the minds at Google have taken a clear stand against content farming — and, implicitly, for the machine arbitration of quality — by updating its algorithm to pinpoint its harvest, content farming is actually a logical extrusion of what Google created in the first place.
This entire system — the complex interweaving of consumer demand for content and various industries’ demands for consumer attention — as far as it exists online, has been perpetuated by search engines. Because search engines are best suited to index words, written content has become the focus of marketing.
You’ve no doubt heard the very popular marketing motto that epitomizes this: “Content is king.” I, for one, couldn’t think of a worse catchphrase. Forgiving the sense of entitlement engendered by the word “king,” shouldn’t a phrase like this be aspirational instead, linking content and value in a way that causes us to reach for something bigger than ourselves, better and more true, rather than complacently accepting a slave economy in which we almost certainly exist at the bottom?
While nothing is inherently wrong with profitably matching user interest to content — specifically, in the various ways in which Google does so — the absence of value as an essential and reliable factor in the equation, as well as the fact that the structure of this economy is strongest when content is text, makes for the instability we are experiencing. Indeed, it has led me to question numerous times, for myself and my clients, whether written content truly is the best way to represent expertise.

Working Content

There are, in fact, plenty of instances in which the written content model is undeniably inadequate. With a few exceptions, most consumer products are not easily marketed with much text. Typically, consumers prefer to let products “speak for themselves” both in usage and in researching their performance in reviews — which, of course, are found in abundant supply on the Web — rather than defer to what the maker has to say about their wares. In most cases, our aversion to being sold to is so strong that we struggle to believe the seller even when we believe in the value of their product!
For instance, do the Marriott and Skittles really need blogs?

Image source.
Those in the health-care industry might also perceive reasons to take up content strategies of their own, but often locality and emergency are the primary factors in a consumer’s choice of care providers, rather than researched, advance consideration. Similarly, utility-type services — plumbers, electricians, mechanics and cleaners — are more likely to be selected on the basis of what is nearby, immediately available and affordable, rather than any pitch that a blog or newsletter may provide. That isn’t to say that some form of content shouldn’t occupy a piece of the overall marketing strategy; there may be opportunities to use audio, video and social media that could be quite effective, while not being the lead marketing initiative.
On the other hand, there are instances in which written content marketing works quite well. At the products end of the business spectrum, those manufactured for businesses (rather than consumers), are typically heavily researched by buyers — who make active use of search engines to do so — before being purchased. Case studies, white papers, blog posts and other articles can satisfy the researcher’s need for sharable, decision-reinforcing information, especially if they are enabling a buying decision that will ultimately be made by someone else. The same dynamic exists within any “knowledge industry” service. For professionals in design, advertising, marketing, public relations, law or finance, the essential intangibility of their expertise must be carefully described in depth in diverse ways to qualify the specific nature of what they do and for whom they are best suited to do it.
I list these considerations in order to point out that our role as strategic advisors to our clients is not to promulgate the latest marketing practices but to diagnose their needs and prescribe the best solution. Content marketing, though essential to the success of some enterprises, is not the best fit for others. Naturally, our own fraught experience in employing content marketing for ourselves may be instructive of that point as well.

To many designers, marketers and other advertising professionals, content marketing presents many challenges, the most dire of which is so rarely discussed that most don’t realize it exists until they’ve struggled (if not failed) to create content for so long that they’re ready to give up for good. The problem is that, when all is said and done — when we’ve accepted that writing content and optimizing it for search engines is critical to expressing expertise on the Web in a way that increases qualified, likely-to-convert traffic to your website — many of us never wanted to be writers in the first place!
Not every expert wants to write. Yet somehow, we’ve found ourselves facing the prospect of spending more and more of our time creating content that describes what we do than doing that actual thing we do best, whether it be design or something else. It is this conflict, in concert with other factors — those I’ve explored so far in this essay having to do with the glut and occasional misappropriation of content, as well as the limited mental bandwidth we each have to filter useful signal from the noise — that often predetermines the parabolic trajectory of many a content marketing plan. What begins with a burst of enthusiasm and creativity rises to an early peak, only to plummet just as fast as it began in rapid stages, from exhaustion to frustration, hopelessness, then bitterness. In the end, in the dysphoric coda, one questions everything: “I’m a designer. Why am I doing this?”
If you have asked that question, whether in a similar struggle or something a bit less dramatic, you are not alone. While some have discovered an affinity for writing and gladly added it to their repertoire, many once-confident designers contend greatly with it, the strain coloring the rest of their professional practice and giving them a feeling of inadequacy that only builds with the decline of their energy.
The rise and fall of the content marketer will almost certainly lead to a redefinition of the role of content within marketing, as well as a redistribution of labor that more closely corresponds to the reality that not everyone is a writer, just as not everyone is a designer. Search engines, which provided the inception of this new writing industry, will also likely provide a needed transition to something more sustainable. As the technology of today is optimized to interpret meaning and expertise from indexable text, the technology of tomorrow will be capable of doing the same thing with content in less tangible forms. Authority algorithms will process sound, video, social media and any other data relevant to discerning expertise — such as tenure, revenue, growth, recommendations, professional certifications — in addition to text, reducing the inordinate pressure on individuals today to make what was once a peripheral discipline in their profession a central one.

Practical Content

In the meantime, creating content remains a challenge we must address practically. If you don’t want to do something, you’re likely to either struggle doing it at all or struggle doing it consistently and effectively. As I have already discussed, not everyone has the desire to create marketing material, which presents a dilemma to content marketers working today: Those who should do it are often least likely to do it well.
A solution to this predicament is unlikely to present itself spontaneously, nor is any content strategy alone airtight enough to keep creators from struggling. The key is to understand the different roles necessary to fulfill a content strategy in a sustainable way. In her excellent book The Elements of Content Strategy, Erin Kissane stresses the importance of discerning between those who conceive the strategy and those who create the content as a means of preserving quality and output over time:
In its purest form, content strategy does not produce content. It produces plans, guidelines, schedules, and goals for content, but not the substance itself, except inasmuch as examples are required to illustrate strategic recommendations. But if you have the ability to create good content, you’ll have a real advantage over content strategists who do not.
This is a significant distinguishing factor that is often overlooked. In fact, while many of the firms I have consulted have enthusiastically adapted the content-marketing approach to their website and quickly conceived of a feasible content strategy, just as many have failed to consistently implement it. This is largely due to a lack of leadership.
A successful content strategy relies less upon the content itself — although that element certainly is essential — than upon a person who is able to inspire those who create the content, coalescing their unique voices around a consistent point of view, even as the stream of conversation around them ebbs and flows. Depending on the size of the team, this person may or may not create content themselves; a truly hard line between roles might not be necessary unless the content output is great enough to warrant one. In my firm, for example, I perform this role, among others, while also producing plenty of content of my own. The more important facet of this role is the authority and responsibility that accompanies it. This person, regardless of the title they carry, must view the direction of the firm’s content marketing as being a major part of their job description. While I came down hard on the print publishing industry for the ways in which its economic foundation devalues content, its editors in chief — whose production, if any, is secondary to their leadership — provide the best example of how this role should function.
For those who create content, of course, the content itself is a priority. But no single piece of content, no matter how excellent, will be as successful as a steady, long-term flow of quality content. This is why the success of any content marketing strategy is achieved by committed leadership.
While the leader’s job is first and foremost to ensure that the content’s point of view remains consistent with the firm’s purpose and that quality is preserved, various management techniques will also be critical to sustaining the production of fresh material. The ways of dealing with the complexity of content marketing will vary greatly according to the size of the organization, but two particular techniques are essential to teams of all sizes: establishing a workflow (the process by which content is conceived, executed, evaluated, approved and delivered) and establishing an editorial calendar (which identifies topics, content types, authors and deadlines in advance). The various points of the workflow process, especially those that place quality control barriers between the content creators and the websites on which their content will eventually be found, are those that require the team to be comprised of a diversity of roles. Kristina Halvorson’s book Content Strategy for the Web is a comprehensive enough treatment of the topic to serve as a primary handbook for anyone involved in content marketing, whether leading, managing or producing.
Though strengthened by proactive, intentional leadership and management, your content marketing strategy will still be vulnerable to something that is mysterious enough to slip through the cracks of any well-conceived machine: the creative process of producing the content itself. Writing, especially, is difficult to do well and often. As discussed earlier, it requires a level of focus and investment that sometimes comes into direct conflict with the job you’d rather do, whether that is design or something else. One solution may be to employ dedicated writers, but few marketing teams have that luxury. The reality is that, for now, many designers will have to write and create other forms of content in order to sustain their livelihoods. It is not within the scope of this piece to offer advice on how to write well — there are many fine resources on that topic — but I can share some insight by invoking what I call the nonwritten disciplines of writing.
There are four nonwritten disciplines that make for successful professional writing: reading, planning, research and editing. None can be left out; each is just as important as the other. But if I had to prioritize one, it would be reading.
Reading is a discipline that many books on writing strangely leave out. (The other three — planning, research and editing — are all essential pieces of the content workflow that are covered in great detail by some of the books mentioned in this essay, including my own.) Yet, there is no writing without reading. Perhaps better said, there is no good writing without reading. If you want to write, or need to write — the two need not be in agreement — then you must make reading a part of your life. (If you are thinking to yourself, “I don’t like to read,” then I promise you right now that’s not true; you just have yet to find what you like.)
Any aspiring writer, whatever their purpose, must actively seek out content, in any form, that covers the topics they’re interested in, even if they do not need to cover those topics in their writing. Reading is about exposing yourself to the ideas of others in order to enrich your own thinking — which need not be truly novel to merit writing about. There is an art to revealing ideas through the written word, one that good writers practice primarily with restraint, reserving the majority of their knowledge as an unwritten foundation for what they actually put to words — the tip of the iceberg. Because reading will supply much of the knowledge that makes up the background of your writing, it is indispensable.

It’s Content All the Way Down

I began this essay by looking at the staggering volume of content available on the Web and by challenging our sense of its value and purpose. When content is seen purely as a means to an end, as a unit as divorced from value as our monetary currency so often is, it will tend toward an articulation that is so cheap as to have no hope of achieving even its ill-conceived goals. On the other hand, when content is not focused enough on a concrete goal — even one that is not particularly motivating to a writer, such as advertising — it can just as easily head in the opposite direction, self-indulgently alienated from its purpose and with no future other than online obscurity. It’s not that no one reads purposeless content (very few do, though), but that no one takes action after reading it. Eliciting action, whether it be buying a product, service or even just an idea, is a worthy purpose for any piece of content — and one that should shape how it is conceived, produced and promoted.
Promotion, of course, presents plenty of difficulties of its own, far too many to cover adequately here. This entire essay, from the admonition to restore content to its own gold standard to the process by which the purpose of content should align with the purpose of the business, could be reframed to address the content that we create to promote our content. Indeed, our email blasts, comments on forums, message boards and other blogs, as well as our social media engagement, is all, in the end, content. Yet, it has a slightly different purpose. All of these kinds of promotion, insofar as they are done to increase awareness of your content, share that goal of eliciting action. But in this case, the action is not “buying” anything but simply agreeing to offer attention to what you have to say. The job of promotion should be to enable your content to do its job. When the relationship between content and promotional content is reversed — when it’s all promotion — ugly things happen. It certainly doesn’t take much time for an intelligent person to see when the emperor has no clothes, or for that person to spread the word far and wide. In that regard, it bears consideration that what we say to get attention is very different from what we say once we have it.

The Art Of Staying Up To Date

An important part of our job is staying up to date. Technologies don’t really change that fast — HTML5 and CSS3 take a long time to be specified and implemented. But the ideas surrounding these technologies and the things we can do with them are constantly evolving, and hundreds of blog posts and articles are published every day. There’s no way you can read all of those but you’ll still have to keep up to date. Here are some tips on doing that while still having some time left to work.
Ideas Surrounding These Technologies and the Things we can do With Them are Constantly Evolving


The hardest part of staying up to date is not reading too much. So many articles are published on a daily basis, so you’ll need filters. It’s unfortunately hard to make a living by reading articles all day, so you don’t want to read marginally interesting stuff, and you don’t want to read too much. You only want to read relevant stuff. You could try to automate this filtering, but I found that the best filters are actually people and time.


Some people produce lots and lots of ideas. Not all of these ideas are worth your time, but some of them are excellent. If you follow these people directly there’s a lot of noise you have to filter and you need a good sensor to recognize the good stuff. A very easy way to solve this is to not follow them directly but only follow the people surrounding them — they will do the filtering for you. If there’s an excellent idea, they will link to it. So in order to keep your sanity, don’t follow loudmouths (follow their more silent friends).
Don't Follow Loudmouths Directly
This tip works very well for Twitter, but it works for blogs as well. Don’t follow overactive sources, follow the people who follow these sources.


A few years ago I noticed that my RSS feeds started to dry up — especially blogs with opinionated articles. Articles where many people would leave their comments were all of a sudden gone. These discussions had moved to Twitter overnight. That’s the reason why I started tweeting (although I have to admit that I was addicted to it within a week). If you tend to your Twitter stream with care, it can become a very valuable source of good and relevant information. But if you follow the wrong people, or too many people, it will be exactly the opposite. My stream consists of mostly people who generally agree with each other. This means that it usually isn’t filled with tedious discussions about irrelevant details that can easily grow to gargantuan proportions. Now, I don’t say you shouldn’t listen to people you don’t agree with, I just think that Twitter is not the right place to follow these people.


Related to this Twitter-management (where I try to avoid heated discussions) is this other excellent filter I use: time. I almost never read articles the moment they are published, I wait a few days, or weeks or even months. If they are still interesting after a period of time, they are worth reading. You’ll see that lots of stuff is outdated even after a few days. Many articles are written in an emotional state, and many responses to these articles are written with even more emotion. These rows can certainly be entertaining, but they are rarely interesting after a week. I use Pinboard to create this buffer of unread articles, but there are many other handy tools available like Instapaper or Pocket (or you could just use your browser’s bookmark functionality).
Being up to date isn’t about knowing the latest trends and keeping track of all the gossip, it’s about knowing the right stuff by reading only the right stuff. But it isn’t just about reading the right stuff, it’s also about remembering it.

Backup Your Knowledge

The good thing about our current era is that we don’t have to learn everything we read by heart: we have computers these days to do the remembering for us. We just have to make sure that our computer can find the stuff we want it to remember. So create a database of the links to interesting articles that you read. I always write a small comment with these links when I save them to Pinboard, this way I can easily find them when I need them. You could buy the archival option from Pinboard, this makes it even easier to find older articles. I also created some IFTTT rules to backup these links to Evernote and Dropbox. I don’t want to depend on one tool, so I spread my knowledge around.

Use Your Knowledge

A very important part of understanding a new technique or design trick is by playing with it. You could of course immediately start using it in a big-production website (or you could also just first try it out). There are many tools out there that make it easy to test some snippets of code, like the amazing Dabblet and the incredible JS Bin. Playing around with code snippets that you find in articles will greatly improve your understanding of how things work.


There are many tools you can use for gathering and keeping your knowledge (and I already named quite a few). Here are a few more:


I use YoruFukurou as my Twitter client. It’s an unobtrusive client with some very handy tools for power-users, like muting certain words. It has some very handy advanced custom filter options as well. Tweetbot is a similar tool which works especially well on iOs devices. I fave every tweet that might have an interesting link (yes, that’s why I fave all of your tweets, but I’m not stalking you). All of these faves are automatically stored as unread items in a Pinboard account.


I read my feeds using the excellent self-hosted feed reader Fever. It has a feature that detects what articles are hot by checking how many people link to it. It uses the clever principle of Sparks — feeds that link to interesting things, but are not worth following to determine what’s hot. You can save articles for later (and yes, these articles are also saved as unread items in my Pinboard account, as well).
I Use Fever to Read My Feeds


As I mentioned before, by creating some clever filters you can make sure that your list of unread articles is manageable. But reading the articles and actually doing something with that knowledge can be pretty time-consuming. Every now and then I hit one of my two Pinboard bookmarklets that either show me the oldest unread item or a random one. As I said, many articles are outdated after a few days (but still many remain to be read). If an article is small, I read it right away. If it’s very long and very interesting, I either e-mail it to myself or I save it to Instapaper.
I save every article that is worth remembering to a second Pinboard account using Delibar, with a small comment and a few tags attached to it. There are many more ways to better organize these links, but this system works for me (I usually find a link I need within a few seconds).


IFTTT is a very handy tool that connects Web services. I use it to store my bookmarks on as many locations as possible. For instance, every article I save to my second Pinboard account is saved to Evernote and Dropbox. This makes it easy to access all these bookmarks from every device I use with specialized tools like nvAlt.


This whole article is just about staying up to date by reading articles, but one of the best ways to stay up to date is by talking to people. In real life you can talk to colleagues or attend conferences and workshops, as there are many regular meet-ups of like-minded people all around the world. You can use things like Twitter or IRC to start discussions or ask questions, or post your question on one of the many online fora out there.
Talking About Your Work is a Great Way to Form an Opinion

Other tools

There are many other tools out there that can help you with staying up to date. Many people use Instapaper, Delicious or Pocket to collect links. Others use email to send these links to themselves. Some people use the native bookmarks of their browser and others write their own bookmarking service.


Professionally I am specialized in HTML and CSS, and I have an interest in Web Design and some other areas. Since I have expert knowledge of CSS, it doesn’t make much sense for me to follow websites that offer CSS tutorials for beginners. So on this particular subject I follow the real experts and even the people who write the specs: my knowledge about CSS has to be more than up to date. Bas Poppink, a colleague of mine, calls this principle following the sources of your sources until you found the headspring. I call it the Poppink-principle. So if you’ve outgrown tutorials, ask the authors of these tutorials what websites and which people they follow.
What sources are right for you depends on a lot of things, like your experience and your fields of interests. Below you’ll find some of my sources. You might find some interesting stuff in there…

My Sources

My main source of information comes from people who tweet something that might interest me. Twitter is also great for discussing articles and opinions, or asking for advice. But there is more…
There are some feeds I rely on: the bookmarks saved by Jeremy Keith, Kazuhito Kidachi, Peter van der Zee, and Paul Irish. They usually add a helpful description to their bookmarks. There are a few people who regularly post high quality reading lists: you should definitely follow a few of those too, if not all. The rest of the links are distilled from a somewhat random collection of ancient and newer RSS feeds that definitely need some weeding. Do you really want to know what they are? Here is the OPML file.
But you’ll probably be better served by the excellent collection of Front-End and Web Standards feeds that Paul Irish curates. He also points at these great weekly email newsletters about JavaScript, Web design, CSS and HTML5. Definitely worth a follow if email is more your thing.

Your Own Sources

Whether you want to be the very best in your profession or someone who is good enough, staying up to date is essential for every professional. The exact people and feeds to follow depends on your own interests. Just take your time to find and collect them and be sure to critically look at them every now and then. Also, what tools you choose to use in order to stay up to date is totally up to you, as there are many more ways to stay up to date than I described here. I hope that this article somehow helps you in finding the right sources and in creating your own, better, flow of information.

Designing For Device Orientation: From Portrait To Landscape

The accelerometer embedded in our smart devices is typically used to align the screen depending on the orientation of the device, i.e. when switching between portrait and landscape modes. This capability provides great opportunities to create better user experiences because it offers an additional layout with a simple turn of a device, and without pressing any buttons.
However, designing for device orientation brings various challenges and requires careful thinking. The experience must be as unobtrusive and transparent as possible, and we must understand the context of use for this functionality.
Nearly all mobile and tablet applications would benefit from being designed for device orientation. This article covers some of the basic concepts that designers and developers can use to add device orientation to their process. We’ll present some of the challenges when designing for device orientation, along with some solutions.

Using Device Orientation For A Secondary Display

YouTube’s mobile application is a great example of device orientation design. Portrait mode offers a feature-rich interface for video discovery and the user’s account. Landscape mode provides an immersive experience with a full-screen video player and playback controls. When the video ends, the display switches back to portrait mode, prompting users to quickly tilt the device back and browse for additional videos.
However, using orientation to display a secondary interface can be confusing for users. For instance, in CardMunch (a business-card reader by LinkedIn), users can convert business-card images into address book contacts using the smartphone’s camera. Rotating CardMunch to landscape mode changes the interface altogether to a carousel overview of all of your saved cards.

YouTube’s mobile interface in portrait and landscape modes.
This interface lacks any visual clues about its orientation, and it has limited controls. You are unable to edit or add business cards, making the carousel screen somewhat frustrating and confusing, especially if you’ve launched the app in landscape mode. In addition, the lack of visual clues in this landscape mode will deter most users from rotating the device and discovering the app’s other features.

CardMunch by LinkedIn is missing visual clues about its secondary interface.

Categories Of Orientation Design

To help UX professionals and developers, I have categorized four main patterns of device orientation design.


This interface simply adjusts to the new orientation’s size.

In Skype’s mobile interface, the icons change position when the screen moves from portrait to landscape.

Pocket’s mobile interface: same layout, different width.


This interface adjusts to the screen’s size, adding or subtracting layout components according to the dimensions of the chosen orientation. For example, IMDb for the iPad uses the wider screen in landscape mode to add a filmography on the left. This list is also accessible in portrait mode by clicking the “All filmography” button in the middle-right of the screen.

IMDb for the iPad.
Providing visual elements and functionality in any orientation ultimately gives convenience to the user. However, not forcing the user to hold the device a certain way is crucial, especially if the desired functionality does not appear in the default orientation.


With this interface, a changed orientation triggers an auxiliary screen with relevant supplementary information. An example would be a mobile financial application that displays data in the default portrait mode, and then provides a visual graph when the user rotates to landscape mode. The orientations show similar or complementary data and depend on each other.

An example of a complementary design interface


Like YouTube, a continuous design enables the user to access a secondary interface by a simple rotation of the device. An example would be using a smartphone as a remote control for a smart TV. Rotating the device to landscape mode would reveal a full program guide, while also maintaining functionality for changing channels, browsing programs and recording future episodes.

A smart remote and program guide.

Considering The Default Orientation

Above & Beyond is an interactive eBook for the iPad about the life and work of the American caricature artist John Kascht. The beautiful art in this book is displayed in both portrait and landscape modes. However, horizontal mode shows important interactive elements that do not appear in portrait mode, such as a way to return to the main menu. Portrait is the iPad’s default orientation, so including this type of added interactivity only in landscape mode might confuse many users.

A page from Above & Beyond. The interactive elements do not appear in the default portrait mode.
While portrait mode shows a detailed look at the art, and the interactive eBook provides some instructions at the beginning, a solution might be to allow users to tap the screen to reveal the menu. The default orientation for most smartphones and for the iPad is portrait. However, landscape is the default for Android, Windows 8 tablets and BlackBerry’s Playbook. To avoid confusion, remember that the primary orientation of your app should always serve the device’s default mode and functionality, not the other way around.

Understanding The Context

When designing an application for smart devices, consider the context and circumstances in which that application will be used, particularly when designing for device orientation. Case in point: interactive cookbooks have become very popular. Hardware and accessory manufacturers are creating devices to help us use the iPad in the kitchen, including a washable stylus for use while cooking.

We can use orientation to create a better experience in a cookbook. Using the iPad’s default portrait orientation, users can flip through the book and view the full recipe and ingredients list for a particular dish. Rotating the device to landscape mode will change the interface to a cook-friendly layout, with large buttons and step-by-step instructions. This cook-friendly interface would also prevent the tablet from auto-dimming, and it would allow users to flip pages by waving their hand in front of the built-in camera to avoid touching the screen with messy hands while cooking.

The Betty Crocker Cookbook for iPad is an example of a cook-friendly interface.
Understanding the context of the kitchen and how people cook with the iPad would make the interactive eBook much more functional. With the added consideration of device orientation, the user experience would be better overall.

Visual Clues About Orientation

An auxiliary screen or added functionality that depends on orientation can sometimes be counterintuitive. Without any visual clues in a particular orientation, a user might miss the added functionality altogether. A classic example of this is the iPhone’s built-in calculator, as pointed out in Salon’s post “How to Change the iPhone Calculator Into a Scientific Calculator” — functionality that many users do not know about.
When designing for device orientation, visual clues increase findability and makes the user experience intuitive and transparent. Below are a few examples of visual clues for device orientation.

Title Bar

Affixing the title bar to the top of the default position in either orientation is a subtle clue for the user to tilt their head (or device) to read the text in the bar. This technique is essential when using orientation for a secondary display and serves as a gentle reminder about the added functionality.

Note: This method will not give affordance to the added display in the default (portrait) orientation. In this case, I recommend coach marks, a quick tutorial or a walkthrough video (when appropriate) to illustrate that the application is using orientation for a secondary display.

Toggle Switch

Much like the universal icon for sharing or Apple’s familiar action button for sharing, I propose a standard icon to represent device orientation. You can download the icon shown below and use it freely.

The icon should appear at all times and be used as a toggle switch between orientation displays. Using the toggle would not require the user to rotate the device for the secondary view, but it would gradually encourage users to rotate the device to view the secondary interface without pressing the icon. Rotating the device back to the default orientation would automatically adjust the display. Ultimately, this icon would serve as a visual reminder for the added functionality; the user would not need to use this control to switch between orientation displays but would simply rotate the device instead.
Below are illustrations of this toggle icon in use:

Toggle button in the title bar.
If standardized, the orientation icon would give affordance and serve as a visual clue. Here is an illustration of this toggle icon in a corner triangle.

Orientation toggle in corner triangle.
Note: The device orientation icon is not a proven idea, and the value of adding this somewhat redundant UI control is debatable. However, in my opinion, the idea is simple and effective and would enable designers to more fully rely on device orientation to enhance and extend their applications. Hopefully, the proposals here will spark a conversation in the design community and lead to a solution whereby, with a simple turn of the device, essential functionality is added to any application.

The Drawer

The idea here is to show a drawer-like control that users can tap or swipe in order to see the secondary view. Rotating the device would automatically open the drawer, much like a curtain opening. By using an animation to open and close the drawer, the designer can create a memorable effect for displaying data based on orientation.

Illustration of a drawer control.


Designing for device orientation is not new. For example, when rotated to landscape mode, smartphones open a larger virtual keyboard, and the email applications in tablets switch to a master–detail interface. However, device orientation design is widely treated as secondary to the main interface because it is often missed by users who stick to the default orientation, mainly because they are not aware of its availability. By adding simple visual clues to the interface, UX professionals can make the case for using device orientation to enhance their products and, ultimately, for providing more engaging and user-friendly experiences.

How to move WordPress

If you are a WordPress developer, there are times when you need to move WordPress around within your server ( move the wordpress site from one directory location to another directory location), and times when you need to move WordPress from one server to another (move the wordpress blog from one host server domain to new host server domain ). You don’t need to reinstall. WordPress is flexible enough to handle all of these situations. This “How to move wordpress from one server to another” post will outline the steps involved to successfully migrate a wordpress website.
Follow the below given instructions,
1) Back up the files and database.
If you are moving WordPress from one server to another, begin by backing up your data. This includes backing up your WordPress files on your site ( copy all files on the wordpress directory by using FTP client like filezilla ) and as well as WordPress database by entering your server control panel phpmyadmin database area and export your database in to ““ format.
2) Create new database details.
Go to your new host account phpmyadmin via control panel and create a new database, database user and database user password.
3) Edit the old database.
Then open a copy of extracted database sql file saved on step 1 ( ““ ) with a text editor and edit the following details,
a. Using the search and replace function, find all instances of the blog’s old URL and replace it with the new URL. Suppose the URL originally in “ ” and you moved them to ““.
b. Repeat the process of search and replace function with your directory path mentions. Suppose the files were originally in “home/user/public_html/old/folder” and you moved them to “home/newuser/public_html/new/ “.
c. Repeat the process with your email address ( if necessary ). (For example, replacing with
d. Using the search and replace, edit the old database name in to new database name.
e. Save your changes.
4) Import the new database.
Go to new server control panel phpmyadmin and import edited database file on step4.
[ Save the file may be compressed (gzip, zip) or uncompressed. A compressed files name must end in .[format].[compression]. Example: ]
5) Move WordPress files to the new server.
Upload the backup wordpress directory in to the new server domain folder via using a FTP client.
6) Update the database details file.
Download and open wp-config.php file on the wp directory and edit the old database, database user, password details in to new one. Then upload and replace the same file.
7) Reset permalink settings and copy widgets.
Now you can check the home page and also login in to the admin dashboard of your wordpress blog. If you will get a “404 – error not found” message for other pages than your home page, then you need to reset permalink settings. For this purpose go to backend permalink settings area, change the settings in to default and back to custom setting which is used on old server. If your .htaccess file were not writable, you need to edit .htaccess file manually.
In some themes the widget areas are not moved into new server by all these above settings, so you need to copy all widgets from old server to new live server manually.

How to move magento from one server to another

If you are a Magento developer sometimes you need to move the Magento ecommerce shop from one host server domain to new host server domain or from one directory location to another directory location. Migrating Magento to a new server is a simple task once you know how to do it. This “How to move Magento from one server to another” post will outline the steps involved to successfully migrate a Magento website.


Follow the below given instructions,
1) Back up the files in the test server.
Go to your test site admin backend and refresh Cache by System > Cache Management. Then download and save  the whole magento shop root directory via File manager or FTP tools.
2) Export the magento Database.
Enter your server control panel phpmyadmin database area and EXPORT your magento shop database in to “ “ format.
3) Move magento files to the new server.
Upload the root directory ( all the files) of your test magento shop backup taken on the step 1 in to the new server domain folder.
4) Import the database to the new server.
Go to your new host account phpmyadmin and create a new database, database user and database user password. Then open the database sql file saved on step 2 with a text editor and edit the database name mention in to the new database name, save it. Then import the “ “  database backup saved on the step 2 in to this new database.
5) Update the database details file.
Next step is to edit the database details file. To do this go to magento live site folder, find out “app/etc/local.xml” file and enter the latest Database details which is created on the step 4.
6) Modify the base URL database table.
Next is to replace old server domain name with new domain name. For this go to your new server phpmyadmin magento database and modify core_config_data table as shown below.
web/unsecure/base_url     >
web/secure/base_url         >
7) Refresh cache and Reindex Data.
The final step is to clear the cache. Go to your sites admin panel ( Login with the test site username and password ) System > Cache management > Select all & disable cache management. Then navigate through System—>Index Management. Select fields in Status — ‘REINDEX REQUIRED’, then choose ‘Reindex Data’ from drop down and click Submit or delete all the files in “var/session” and “/var/cache” folders of new site.
Take a look to your new magento ecommerce store frontend.


Here is an another method ( one problem is on this method both magento setups must be the same version ),
1)  Go to your test site backend and refresh cache by system > cache management. Then take a backup of test site phpmyadmin database by exporting database in to “” format ( or any suitable format).
2) Next is to take a backup of below folders on the test site to your system
(a)  Contents inside frontend folder    (app\design\frontend)
(b)  Contents inside frontend folder    (skin\frontend)
(c)  Catalog & other required folders    (media\catalog)
3)  Install a new magento store in to the new server.
4)  Go to the new server phpmyadmin database and delete all the tables.
5)  Unzip backup database on the first step “” and import “dbname.sql” file to the new database.
6) Copy below folders to their respective new magento server directory
(a)  Contents inside frontend (app) folder to app\design\frontend.
(b)  Contents inside frontend (skin) folder to skin\frontend.
(c)  Catalog & other required folders to media\catalog, xx\
7)   Edit base URL mentioning table (  core_config_data table ) on the new magento.
web/unsecure/base_url     >
web/secure/base_url         >
8)   Go to your sites admin panel System > Cache management > Select all & disable cache management. And also index data by go to System—>Index Management. Select fields in Status — ‘REINDEX REQUIRED’, then choose ‘Reindex Data’ from drop down and click Submit.
Check your new magento store.
………….ALL THE BEST……….

Wednesday, August 8, 2012

20 Awesome Resources for Twitter Bootstrap Lovers

Twitter Bootstrap has simply exploded in the web development community. There will always be skeptics and haters but on the whole the project has been a smashing success and can constantly be seen at the top of the Forked and Watched charts at GitHub.
As a result of Bootstrap’s fame, lots of great related resources have been put forth by the development community. Today we’ve collected our favorites into a list of everything you need to get started with Bootstrap. From introductory tutorials to wireframing kits and custom generators, there’s something here for every Bootstrap lover.


Bootstrap Custom Build

Before diving into great third party Bootstrap resources, it’s worth pointing out a great little tool right from Twitter that allows you to completely customize an impressive range of Boostrap features so that you can create a custom build that’s perfect for your project.
If you haven’t checked out Bootstrap in a while, you should give this a look because it’s new with Twitter Bootstrap 2.0. Not only can you use it to take an overweight download and transform it into something lean, you can also save yourself a lot of CSS work by customizing colors, fonts etc. before you even initiate the download.

As with Twitter’s own tool above, this tool allows you to use a simple interface to customize various aspects of Bootstrap. The difference here is that this one focuses primarily on the visual, design aspects. You can easily go in and change colors, fonts, borders, and a lot more.
The app itself is also more visual than Twitter’s generator and allows you to see what your styles will look like before you hit that download button.

Beautiful Buttons for Twitter Bootstrappers

This is a simple little tool that only does one thing: helps you design great looking buttons for use with Twitter Bootstrap. It’s only comprised of fours sliders and a box to copy the resulting CSS, no less, no more. It won’t revolutionize the way you use Bootstrap but it is fun to play with.



“WrapBootstrap is a marketplace for premium Bootstrap themes and templates. Impress your clients and visitors while using a single, rock-solid foundation.”
Think of WrapBootstrap as ThemeForest for Bootstrap. You can buy or sell custom styled Bootstrap themes. If you think it’s silly to spend money on a premium theme for a free resource like Bootstrap, just take a look at the success of the WordPress theme market. By default, Bootstrap sites all start to look the same and nicely designed themes can really add some nice variation while allowing you to hold onto the great benefits that Bootstrap offers.

Bootswatch: Free themes for Twitter Bootstrap

If you’re not convinced that a premium Bootstrap is the way to go, check out Bootswatch, a great resource for absolutely free Bootstrap themes. They’re not as overhauled as some of the premium themes, but they do offer a nice quick way to choose an alternative color scheme and typography setup.
Even if you don’t want to use a third party theme, these themes are worth checking out so that you can get a feel for how to alter the design of Bootstrap so you’re not always stuck in the same old boring format.


Built With Bootstrap

Built with Bootstrap is an unofficial Tumblr blog that showcases various websites that, as the name obviously implies, have been built using Bootstrap. This is a fantastic resource for designers working with Bootstrap as it allows you to see what real developers are doing with the framework, which will inspire you to take it further yourself.
If you think that Bootstrap isn’t capable of leading to anything but plain looking design, this gallery will prove you wrong. Sites like Provo Restaurant really surprised me by not looking anything like a clone of the Bootstrap example pages.

For Mockups

Bootstrap Fireworks

This is a completely vector based UI toolkit built to mirror Twitter Bootstrap. This is great if you’re not a coder or just need to have a place to shuffle the pieces around without bothering with CSS.
This kit was created based on Twitter Bootstrap 2 so it should be up to date with elements that look just like they will in CSS.

Omnigraffle Stencil for Twitter Bootstrap 2

OmniGraffle is a Mac application that makes creating charts and diagrams super easy. It’s been adopted by many members of the design community as a great way to wireframe apps and websites.
The Stencil kit in the link above is an exhaustive attempt to bring all of Bootstrap’s UI elements into OmniGraffle so you can simply drag and drop to create mockups on the fly.

Free Twitter Bootstrap Widgets Library for Axure RP

Axure is a powerful, professional level application that allows you to build complex wireframes and interactive mockups. At $589 per license, it’s a solution for serious wireframers only.
If you’d like to work with Twitter Bootstrap and Axure, be sure to download this great free widget library, which includes perfect customizable representations of the Bootstrap items that work seamlessly in Axure.

Bootstrap PSD

I know what many of you are thinking, “Fireworks? Axure? OmniGraffle? Just give me a PSD!” Well you’re in luck, because Repix Design has take the time to create and distribute a detailed, customizable PSD containing all of Bootstrap’s various components.
If you like to do your wireframing in Photoshop and you’re a Bootstrapper, this free download is a no brainer. Go grab it now.

Other Goodies

Grails Twitter Bootstrap Scaffolding

Grails is web development framework or scaffolding for “agile, industrial strength, rapid web application development.” If you’re a fan of Grails but want to mirror the simple visual style of Bootstrap, you’re in luck because this is exactly what you’re looking for.

Font Awesome

Font Awesome is probably my favorite Twitter Bootstrap resource. It’s basically just an icon font, so anyone can use it for any project. However, it was specifically designed to complement the visual aesthetic of Bootstrap.
Font Awesome is free for commercial use, screen reader compatible, and contains a whopping 150 icons (a number that continues to grow). Bookmark this one because you’re going to love it.

Sass Twitter Bootstrap – Projects

When the Twitter folks built Bootstrap, they decided to make it even better with LESS, a popular CSS preprocessor that brings the magic of variables, mixins and a lot more to CSS.
The thing is, there’s a big split in the preprocessor fan base. Some people love LESS because it’s simple and incredibly easy to use, but many opt for the more powerful alternative: Sass. We can’t blame the Twitter devs for taking the LESS route but Sass fans need some love too! Fortunately, John W. Long has ported Bootstrap to Sass so now both sides of the preprocessor debate can at least agree on one thing: Bootstrap rocks.
Stylus fans need not mourn the fact they often fail to get a mention, there’s a Bootstrap Stylus port as well.

jQuery UI Bootstrap

jQuery UI is a library of interactive interface elements built on top of the immensely popular jQuery JavaScript library. It includes all kinds of great widgets and web elements to easily add a lot of functionality to your site.
jQuery UI Bootstrap attempts to bring the visual style of Bootstrap to the jQuery UI elements. The developer says that you can even use most of Twitter Bootstrap side-by-wide with it without components breaking visually.

WordPress Bootstrap – A WordPress theme based on Twitter Bootstrap

“We’ve built the WordPress Bootstrap theme so that it could be used as-is or as a starting point for theme developers. It’s built on top of the brilliant Bones theme framework by Eddie Machado and based on v2.0.1 of Twitter’s Bootstrap.”
It’s a responsive WordPress theme built on Bootstrap that allows you to use the awesome themes from Bootswatch. What more do you need to know? This thing is awesome.

Colorpicker and Datepicker for Twitter Bootstrap

Here are a couple of additional elements that you can add to Bootstrap. Both are free, well documented and fit right in with the Bootstrap aesthetic.


5 Incredibly Useful Tools Built Into Twitter Bootstrap

This article serves as a beginner’s introduction to Twitter Bootstrap and goes over some of my favorite features. It was written before the launch of Bootstrap 2, so there are even more features now, but it’s still a great first look at how the framework can be helpful to you.

Twitter Bootstrap 2: Bootstrap Goes Responsive

To follow up the previous article, I released this overview when Bootstrap 2 was launched. In it I mostly discuss how the responsive side of Bootstrap functions and briefly go over some of the other great new features.

Twitter Bootstrap 101

If you really want an all-in introduction to what Bootstrap is and how to use it, look no further than this Tuts+ multi-part video series from Dan Cochran. As with all their content, this series is top notch and super educational.

Articles: Building Twitter Bootstrap

In this fantastic article from A List Apart, Twitter Dev Mark Otto takes you behind the scenes and tells you about the logic behind Bootstrap, how the idea evolved and became a reality, and how it represents a key pairing of designers and developers.

#328 Twitter Bootstrap Basics – RailsCasts

Thus far we’ve gone through all of these resources without a single reference to the widespread Rails community. You guys can join the fun too though, this video will show you how to integrate Bootstrap with Rails via the twitter-bootstrap-rails gem.

How Do You Complement Bootstrap?

Now that you’ve see our list of awesome Bootstrap resources, we want to hear from you. Leave a comment below and tell us about how you use Bootstrap in your workflow and what third party resources you’ve incorporated into that process.

How to Tackle Spam With The BuddyPress Spam Link Plugin

BuddyPress spam is a perennial problem that can negatively affect your social network. At times it can seem like weeds taking over your beautiful garden. Everyone knows what it’s like to receive spam emails but when your members begin receiving spam messages through your community, they may feel as though their profile, participation and experiences are not secure. That is why, when building a community, it’s important to maintain good spam protection; a spam-free experience produces subtle confidence that will keep your users returning.
Stephanie Leary has developed a plugin that does two things to help you quickly combat spam on your BuddyPress site:
  • Adds the “Mark as spammer” link back to the admin bar
  • Adds a “Spammer” button to the activity stream entry meta row
Below is the new “Spammer” button that lets you easily mark a user as a spammer from the activity stream, which is where you most often become aware of spammers having infiltrated your community:

The BuddyPress Spam Link plugin is currently available for download from github. Stephanie is considering adding it to the WordPress repository, depending on how discussion shapes up regarding this related ticket in trac.

How to Use the BuddyPress Spam Link Plugin

Download the buddypress-spam-link.php file and upload it to your plugins folder. Alternately you can copy the code from that file and add it to your bp-custom.php file. However, I’d recommend keeping it as a separate plugin for the sake of troubleshooting and updating.
Killing BuddyPress spam accounts goes much faster with the BuddyPress Spam Link plugin installed. Many thanks to Stephanie Leary for making it available to the community on github. This plugin is a must-have for BuddyPress community managers who want to be able to quickly combat spam as soon as it’s reported.
photo credit: freezelight via photopin cc

Monday, August 6, 2012

10 Excellent Tools for Testing Your Site on Mobile Devices

10 Excellent Tools for Testing Your Site on Mobile Devices
With the ever-increasing sales of smartphones and the burgeoning tablet market starting to skyrocket, coupled with far greater access to more robust mobile data networks, the internet is now being accessed by our users in a multitude of new ways.
The huge range of mobile devices used to browse the web now means you really have to consider making your site mobile-compatible.

But how do you go about it? Testing your site on mobile devices can be time-consuming and expensive due to the vast number of different mobile devices.
Fear not, because there are some handy tools available at your disposal for making sure that your website renders appropriately on the Mobile Web. This article shares and discusses 10 such tools.

1. iPhoney

An excellent free iPhone tester, iPhoney isn’t exactly an emulator, but allows developers to create 320x480px websites for use on the iPhone. It allows you to test images and code in a pixel-perfect Apple-Safari-powered environment, with all the normal features including Portrait and Landscape modes, fullscreen, zoom and plugins.

2. W3C mobileOK Checker

W3C mobileOK Checker
This checker is a web-based automated validation tool that checks to see how mobile-device-friendly your website is. The tests are checked against the W3C mobileOK Basic Tests specification developed by W3C.

3. iPad Peek

iPad Peek
This handy web-based tool allows you to see how your websites look when rendered on the iPad. It’s recommended that you use a WebKit-based browser such as Apple Safari or Google Chrome to have as accurate a simulation as possible — or at the very least, a CSS3-capable browser that supports transformation properties (like Opera) because it uses them to render the page in Portrait mode.

4. Modify Headers Add-on for Firefox

Modify Headers Add-on for Firefox
There are add-ons for Firefox that can manipulate the data sent to servers to make it seem as if the user agent is browsing on a mobile device, even when they’re not. To do this, you need an add-on called Modify Headers (for Firefox).
Once you have downloaded and installed this add-on, the new options, Tools > Default User Agent and Tools > Modify Headers should appear in your browser.
To emulate browsing on a mobile device, you need to find the User Agent Profile (UAProf) value of your mobile device, which can be found with a quick search on Google for "user agent" followed by the model of your phone (e.g. see Google results for "user agent ipad"). Alternatively, check out this list of UAProf values.
Once you have located the UA Profile value for the phone you want, enter it into the Modify Header dialog box, and bingo, you will see how it’s like to browse from that device.
For Google Chrome, you can try out the User-Agent Switcher extension.
For a browser-independent desktop application that works on virtually any internet-enabled app, try out Fiddler Web Debugger that lets you modify HTTP requests, among other things.

5. Adobe Device Central CS5

Adobe Device Central CS5
As part of the latest Adobe Creative Suite, Device Central emulates the operation of mobile devices on your desktop allowing you to test HTML and Flash from the comfort of your desktop.
To open a page or site, select Device Profiles > Browse Devices, then right-click and choose Add To Test Devices. Now that you’ve added a device, simply go to File > Open (for local testing) or File > Open URL (for remote testing).
Though far from being free, if you’re a professional designer or developer, you’ll have a high chance of being able to access Adobe’s creative suite of applications.

6. Google Mobilizer

Google Mobilizer
Google Mobilizer is a simple web tool that lets you input a web page address and then makes the page mobile-web-friendly by trimming the content down to its bare essentials. This is an excellent tool for seeing where you can make performance optimizations on your site.

7. Gomez

Gomez mobile readiness test gives you a score between 1 and 5 based on an analysis of over 30 proven mobile web development techniques, ranging from stylesheet use (e.g. media queries) to caching techniques and standards-compliant code. The results are displayed in an easy-to-understand document that offers advice on how to make your site better.
Unfortunately, to be able to test your site, you must enter in a bunch of information including your email address, country, zip code, and phone number.

8. MobiReady

In the same vein as Gomez, MobiReady is another online testing site that allows you to enter a URL so that it can perform a set of evaluations, including Page Test, Markup Test and Site Test of the web page. This is a slightly more detailed version of Gomez above and provides a comprehensive test result page including dotMobi compliance, W3C mobileOk tests, device emulators, detailed error reports, HTTP tests and a code checker.
However, the results aren’t as succinct as Gomez’s results, a disadvantage when it comes to presenting your information to your less technically astute clients/employers.

9. DotMobi Emulator

DotMobi Emulator
The dotMobi emulator gives you a live preview of your site from a (fairly small, to be honest) range of different mobile phones. This mobile testing tool is great if you need to test your page on older mobile devices.
What can be annoying to potential users of this tool is that it requires the Java browser plugin for it to work.

10. Opera Mini Simulator

Opera Mini Simulator
With over 120 million smartphones sold that has Opera pre-installed[1] and an edition available for almost any OS, making sure that your site works on Opera Mini (the mobile version of the Opera web browser) is a good practice to include in your testing workflow.
Thankfully, Opera has obliged us by offering a free web-based emulator for testing and evaluating your web design on a mobile device that uses Opera Mini.
This tool requires the Java browser plugin to function.