A blog about design & technology by Opoloo
Feed-icon-28x28

The Future of Mobile Apps

Building and publishing a Firefox OS app in no time

Dear developers out there,

I know you are tired of building mobile apps for nibbled apples and for millions of green robots with different screen resolutions. I’m sure you want to feel free again: to be able to see the horizon, smell a fresh summer breeze, and taste a sip of clear crystal water again. I would like to take a minute and introduce you to the future of app development:

Phone

We’ll build a Firefox OS app. I’ll walk you through the process of developing and releasing a Firefox game that I called BLIP.
You’ll see: app development for Firefox OS is very different and surprisingly easy—especially for frontend web-developers. You neither need to learn any complicated new languages nor a strange IDE. Just take your favorite editor and some web skills, like HTML5, CSS3 and Javascript.

1. App-Manifest

To get started with our game, we first need to store basic information about your app. You need a file called manifest.webapp, located in the root directory of your application and served as a JSON file. Generate the file and add this to your .htaccess file:

AddType application/x-web-app-manifest+json .webapp

All set up, you’re ready to fill it with information. You can find an example manifest at the Mozilla Developer Documentation.

{
  "version": "0.1",
  "name": "Blip",
  "description": "Blip is a minimalist Whack-A-Mole game.",
  "launch_path": "/",
  "orientation": ["portrait"],
  "fullscreen": "true",
  "icons": {
    "30": "/assets/images/icon-30.png",
    "60": "/assets/images/icon-60.png",
    "128": "/assets/images/icon-128.png"
  },
  "developer": {
    "name": "Max Boll",
    "url": "http://opoloo.com"
  },
  "locales": {
    "de": {
      "description": "Blip ist ein minimalistisches Whack-A-Mole Spiel.",
      "developer": {
        "url": "http://opoloo.de"
      }
    }
  },
  "default_locale": "en"
}

2. Offline Cache

All your application data can be stored in the local storage of your device to provide faster and offline access for further app usage. It’s as easy as setting up the manifest file. First, let your HTML document know the name of your cache manifest:

<html manifest="offline.appcache">

In this case, the cache file is named offline.appcache and it’s located in the root directory of our application. You can now add new lines inside that file. Each line means a new document that has to be cached, like this:

CACHE MANIFEST
/index.html
/assets/stylesheets/application.css
/assets/javascripts/application.js

For more information about application caching, see an example at the the Mozilla Docs.

3. Firefox OS Javascript API

All this is reason enough to say: app development for Firefox OS is so much easier than for Android or iOS, at least for web-developers. The JS API provides access to native software and hardware functions like, in the case of our game BLIP, vibration, screen, and speakers. Meanwhile, there are a lot of plug-ins that you can use to make, for example, in-app-purchase possible. You get a list of all installed apps on the device and can check if yours is already installed. If not, you can install it with one simple function via the browser. You may submit your app to the marketplace, but you don’t have to.

function is_installed() {
  var request = navigator.mozApps.checkInstalled("http://app.myxotod.de/manifest.webapp");
  request.onsuccess = function() {
    if (request.result) {
      return true;
    } else {
      return false;
    }
  };
  request.onerror = function() {
    console.log(this.error.message);
    return false;
  };
}

function install() {
  var request = navigator.mozApps.install("http://app.myxotod.de/manifest.webapp");
  request.onsuccess = function() {
    return true;
  };
  request.onerror = function() {
    console.log(this.error.name);
    return false;
  };
}

function vibrate(ms) {
  if ('vibrate' in navigator) {
    navigator.vibrate(ms);
  }
}

Read more about the Mozilla Javascript API.

4. Spread the word

When you are done and happy with your application, submit it to the Firefox marketplace by adhering to these guidelines or make a landing page with an install button on it.

Summary

Even if you’re not sick of app development for iOS and Android, you should check out Firefox OS. The system itself is in an early stage and I am looking forward to more stable versions, but app development and publishing is amazingly simple. Add your apps to the marketplace or just display an install button on your website.

Now, if you want to play around a bit, have a look at the little prototype of my Javascript game BLIP.

BLIP is a very simple and minimalist whack-a-mole game: a 6 by 6 grid and randomly appearing “squares”. If you tap on a square, it vanishes and another one appears in a random position. Every time a square is tapped, the phone will vibrate for 200ms and a sound will be played. The squares also have random colors and sounds. It’s a fun little game and pretty good for testing the basic functionality of app behavior on Firefox OS. The idea is to see how to trigger and play with the hardware and controls of the phone.

You can test it on your phone and find the source code on Github. Installing it to the dashboard from Firefox browser even works on my Google Nexus 4.

Any questions? Comments? Made your own Firefox app? Share it!
Happy coding!

Discuss this article at Google+

Hook 008

About reading on screens

We read. All the time. Novels, newspaper headlines, blog posts, twitter status updates, inscriptions, street signs, code, labels, instructions, poetry. We even read involuntarily: as soon as we see a combination of letters that seems decipherable, we immediately try to make sense of it. We read on paper, on metal, on walls, on plastic, on screens. On screens, we even have to distinguish between different purposes of the things we read: links, button labels, hashtags, navigation items, body copy. We, the web people have to take care that everybody can decipher, read, process, and understand what to do with the readable things that live on our screens.

Reading is our primary intake of information, but we still try to figure out, who reads what, when, where, how, why, how much, for how long, while doing what, and what is done with what has been read afterwards (i.e. sharing, commenting, recommending, etc.). It may depend on the readability of a button if someone buys your product, or if she uninstalls it. It depends on the processing of a headline if your smart and funny post about, say, a typographic paradigm change goes viral and boosts your reputation. It depends on the reading habits of that MP if your email to her will find a way into decision-making. You get the picture. It’s important, but it’s a mess.

This hook will explore some starting points of reading in all the aspects that can’t be ignored when you’re working with screens.

01 In defense of readers

by Mandy Brown / on A List Apart

I’m quite aware that this post is almost five years old. However, Mandy Brown’s statements still hold true and continue to be relevant for the way we treat text today. At its core is a respect for the reader: we want them to read our content, so we must enable them to read it, effortlessly, exactly like they want it.

02 Changing Times, Changing Readers: Let's Start With Experience

by Tim Carmody

Tim Carmody, long-time writer for WIRED talks about how the reading experience changes over time. What happens when reading habits change? What happens when new technologies arise, like newspapers, telegrams, screen readers? What about more unusual devices, we wouldn’t typically associate with reading, but that also depend on text to let users perform actions? If you care about reading experiences, listen to this man.

03 Responsive Typography: The Basics

by Oliver Reichenstein / iA Blog

The awareness of a need for responsive typography that allows you to read comfortably (if not perfectly) on different devices, with different resolutions, at different distances, is not such a new thing. Still, it appears to be one of the hardest things to get right. Line length & height, contrast, size, etc. This article provides for an excellent overview of things to think about.

As an addition, take a look at this comprehensive, practical guide on how to make your typography responsive and great: Techniques for Responsive Typography by Sara Soueidan.

04 Typographic Readability and Legibility

by Jeremy Loyd / Tuts+

Jeremy Loyd pulls apart legibility and readability in relation to typography on screens. He shows how an awareness of typographic details, however small, may help you improve your design.

05 You're not going to read this—But You’ll Probably Share It Anyway

by Adrianne Jeffreys / on The Verge

Is there a correlation between reading and sharing? Apparently not, as a new analysis by Chartbeat shows. Of course, it’s not that easy. But how do we know and decide what kind of writing really reaches many people, how do we know what people are really interested in? As slightly different take on the reading vs. sharing issue.

06 A Reader-First Internet

by Paul Jarvis

Ask yourself, honestly: are you creating readable content for yourself or for your readers? A great piece on people, their intentions on the web, reading, distraction, and value.

Discuss this article at Google+
 

Androidicons Font is Here

A beautiful icon font for developers and designers

We’re happy to announce the all new Androidicons icon font—finally, and only because we love you. No kidding: we mostly did this because of popular request. Truth be told, this is also our first ambitious icon font project, so we rely on you, dear icon friends, to give us feedback.

For the Web. For Native Apps, too.

In the more progressive web design community, it has already become a best practice to work with fonts, not graphics to implement icons. Mostly so for reasons of scalability, simplicity, and performance.

Native apps have been more reluctant to adapt fonts instead of graphics, but may in the long run also profit from them. Please do take this post as an invitation for discussing the use of icon fonts in apps.

Why an Icon Font?

The benefits of an icon font are tremendous:


  • The icons scale wonderfully

  • Referencing becomes much easier

  • Styling is not an issue anymore. Color, opacity, shadows, transparent knockouts, hover effects? Not a problem.

  • Using a font instead of graphics makes for smaller file sizes and better performance

  • A font looks great on all display sizes and resolutions

  • Animations become easy and don’t impact performance

  • You don’t need any additional HTTP requests

Why does this cost me 9 bucks?

There are many free icon fonts available. Even many good ones. We made this as an alternative or use case, for making our beloved developers’ lives a little easier and letting everyone enjoy clear iconographic communication. We chose to charge you for the set because we think that good work has a value, because we spent many hours developing the set, and because it wouldn’t be fair to our other supporters who bought the set if we gave away the font for free.

If you like, head over to androidicons.com and take a look.

We’re always happy to hear your thoughts.

Discuss this article at Google+

Hook 007

Opoloo's UX link digest

“UX” has become almost a derogatory term. Sadly so, because the industry has finally realized that there’s a lot of money in it. The problem is that everyone now wants their share in UX, with most of them simply claiming that they are UX experts, just because it sounds totally cool. A result of this is that the people who do know what they’re talking about smell a rat whenever they hear the term and start running.

As an attempt to work against this, today’s hook tries to encompass some aspects of UX (and its relationships to IA, CS, UI, research, animation, etc.) in what we think is meaningful material. As always, this is to be considered a starting point. Do tell us your favorite resources, so we can all profit from them.

01: UXD — What is UX?

by Nazmul Idris & Izabel Grey / on Android Developers Channel

If you don't have a good idea of what user experience design means, yet, or have somehow lost track of it, because the word has been “thrown around” too much, here's a good opportunity to get an overview.

02: What UI Really Is (and how UX confuses matters)

by Ryan Singer / on feltpresence

UX is tricky because it doesn’t refer to any one thing. Interface design, visual styling, code performance, uptime, and feature set all contribute to the user’s “experience.”

Ryan Singer un-confuses the relationship between UI and UX in this short, comprehensive piece, with the analytic precision we appreciate him for.

03: UI Animation & UX: A Not-So-Secret Friendship

by Val Head / on A List Apart

Val Head’s elaborate piece on how animations can enhance the user experience by giving visual cues, without getting in the way of interaction, but rather supporting it and making it more intentional.

04: Content Strategy & UX: a Modern Love Story

by Christina Halvorson / on UX Magazine

How Content Strategy and UX are related? “...it’s inherently impossible to design a good user experience for bad content", Christina Halvorson says.

If you’re passionate about creating better user experiences, you can’t help but care about delivering useful, usable, engaging content.

Simple as that. But Christina Halvorson really sorts out where, when, and why UX and CS come together and when they should stay apart.

05: Connected UX

by Aarron Walter / on A List Apart

The director of user experience at MailChimp talks about organizing and conducting research and its relevance for the user experience. Also, about how to bring teams together to tackle large amounts of data, what to do with rankings, and user studies.

06: User Experience Has Stunted Information Architecture

by Peter Merholz

This short post pushes and stabs at important points and questions. Its relationship with the discussion underneath makes it even more interesting and actually increases its value tenfold.

Discuss this article at Google+
 

Home Is Where The Cookies Are

Icons, designed by a 14-year-old

In interaction design and visual communication, we rely on metaphors and patterns that seem established and well-known. As time goes by, we revisit some of them and question their contemporary legitimacy. Is the magnifying glass still a good representation for a search? How does the ever-saving floppy disc stand the test of time? Once adopted, we assume that those metaphors communicate clearly forever, for young and old alike.

Bobby was our intern for two weeks, a couple of years ago. He was interested in design and interfaces, so I gave him the assignment to draw up some metaphors for an icon set we were commissioned to create at that time. Most seemed like obvious solutions to me, so I certainly didn't expect the creative extravaganza he handed over to me a couple of hours later.

One of my favorites is the mother presenting a tray of cookies as his personal interpretation of ‘home’. What kind of emotional connection would a kid like him have to a classic one family house, when he might be living in a high rise?

Alt text

Also, note the pop culture influences in his drawings, like The Legend Of Zelda’s Link as a web-link, or the iconic Clockwork Orange eye for a clock. Hellraiser’s Pinhead also gets his cameo due to his name.

Alt text

The most interesting sketches, though, are based on human language variations. There’s a log of wood within a small house and outside of it, as interpretations for ‘log-in’ and ‘log-out’. The wave or shower for ‘refresh’ is also closer to natural language than two arrows displaying a circle.

Alt text

After having designed icons for more than 10 years, I had to admit that the boy taught me quite a lesson. Not only did he summarize the complexity of human language in a couple of quick scribbles—he further added a level of creativity to the task that had been lost under the pressure of standardization.

Enjoy the whole set below.

Alt text

Discuss this article at Google+

The Apple, The Green Tin Man & The Fox

A short review of Firefox OS

Alice was beginning to get very tired of sitting by her green tin man on the bank, having nothing to do: once or twice she had bitten into her apple, but it had tasted dull that day. So she was considering, in her own mind, whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a red fox with black eyes ran close by her. Burning with curiosity, she ran across the field after it, and was just in time to see it disappear down a large fox-hole under the hedge. Throwing the apple away and waving her green tin man good-bye, down went Alice after it, never once considering how in the world she was to get out again.

I’m feeling slightly sorry for butchering Lewis Carroll’s masterpiece like this, but running with Firefox OS for the first time certainly feels like a trip to wonderland.

We ordered an Alcatell One Touch Fire, the weakest Firefox OS phone yet available—not necessarily a bad thing if you want to test the performance of applications and mobile sites. It arrived two days after our first Nexus 5, making for quite an interesting comparison: Android’s latest and greatest flagship device versus the entry level newcomer. Barely a fair fight, so let's give the Fox a little headstart.

Unboxing & Hardware

The box is nothing less than boring and unexciting. You get basic headphones and an USB charger bundled, adding to the generic experience.

Picking up the orange phone from the box and unwrapping its plastic changes this impression. I definitely expected a less solid build quality from a 70,- Euro smartphone. It feels sturdy yet light and has a good grip in my hand. Don’t try to compare the plastic shell with the hardware quality of an iPhone 5 or Nexus 5. Still, after a couple of minutes I’m convinced that this phone will easily keep up with every day use and even survive being dropped on the street, at least once or twice.

The removable battery didn’t let me down in a week of testing. 16 to 24 hours at moderate use is generally fine.

Boot up & Launcher

‘Curiouser and curiouser!’ cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English).

Dealing with the high-end spectrum of web-development and Android devices every day, we didn't buy a Firefox phone for the hardware or to call Mommy. We wanted to see for ourselves how the operating system would perform and have a look at the ideas that went into its development.

Booting up the device with the top left hardware button, we’re greeted with a basic setup tutorial and an introduction to basic gestures. Without going into detail, one can already notice familiar patterns from other mobile operating systems. At the bottom: a centered home-button, as introduced by the first iPhone. The lockscreen layout feels a lot like Android, with the option to slide up or go straight to the camera. Pulling down from the top finally reveals notifications and quick settings, and you get a sense of homecoming. The familiarity of all those elements coming together luckily does not feel like a blunt copycat; rather like the best of both worlds combined. Picking up the device for the first time and being able to use it within seconds is a manifest to standardized mobile patterns.

Unlocking the screen continues with established analogies. There’s a hot-seat bar at the bottom for your favorite apps. All other apps are revealed in an iOS-like grid by swiping to the right. Here, they can be rearranged and deleted with a long press. The most unique element you’ll notice is a prominent input field right on the home screen, called Adaptive App Search, which says “I’m thinking of...”. Typing anything into that field will offer multiple relevant apps and suggestions to those keywords, and change your wallpaper accordingly. A search for “breaking bad” instantly shows me Walter White in panties and access to IMDB, Serienjunkies, YouTube and more. Picking the first takes me straight to IMDB’s search results, as expected. While this feature might not be as innovative nor as polished as Google Now is, it’s a great way to help people who are new to smartphones dive into its possibilities.

Core apps

The Caterpillar was the first to speak.
‘What size do you want to be?’ it asked.
‘Oh, I’m not particular as to size,’ Alice hastily replied; ‘only one doesn’t like changing so often, you know.’

Like every solid operating system, Firefox OS comes with a decent set of core apps. Dialer and texting, gallery, clock and calculator are hardly more than the bare bones of what you would expect. Other applications like maps and the music player are further developed and offer quite a mature feature set.

Since the whole operating system is built on web technology, users can simply bookmark any website and call it an app, assuming there’s a permanent online connection. Mozilla has further established a marketplace, which promotes apps that are optimized for its OS with offline support and device-specific API capabilities. To date, this store offers over 200,000 apps, unfortunately many of those simply linking to the mobile website of its services. Digging through the featured apps and categories, one can find a good game or helpful app already, though the scope of highlights is limited. While users expect a certain quantity of well-known apps on a new platform, I found myself quickly bookmarking my favorite web services, and switching fluidly between native and online apps.

Now, this is something where plenty of opinions and criticism arises. We’re so used to perfectly consistent experiences and interfaces on our mobile companions that we forget the chaotic beauty of the web. While most Firefox OS core apps share a unified visual language and patterns, most additions don’t. One can quickly get stuck with an un-optimized app, leading to frustration.

Who is this for?

After a full week replacing my Nexus 4 with the One Touch Fire, I am quite convinced that there’s a future for Firefox OS. Not only did the device work fine for most daily tasks, but I quickly started to enjoy the limitations. During that week I spent plenty of time focusing on the smaller things, instead of trying to manage the flood of constant information running through my hands.

While it’s obvious that Mozilla has quite a long way to go with Firefox OS, the One Touch Fire clearly shows that the vision is very strong and manageable. Having the overwhelming, chaotic web in your hand certainly feels different to the bottleneck ecosystems we’ve grown used to—challenging and frightening at times, but also empowering and limitless. Time will tell if the operating system will find its audience while Apple and Google nuke it out at the top of the market.

This device is definitely not for everyone. If you’re an iOS fanboy or Android addict, you might want to stay in your personal safety zone. If you remember the early days of Android and realize how far it has come, you should follow along. There might be adventures waiting in Wonderland.

The table was a large one, but the three were all crowded together at one corner of it: ‘No room! No room!’ they cried out when they saw Alice coming. ‘There’s plenty of room!’ said Alice indignantly, and she sat down in a large arm-chair at one end of the table.

Discuss this article at Google+
 

You & the Squirrel

A map and a style guide

After bragging about our blog's output, we've been very quiet the last couple of weeks. That's because January, with his fat, wet butt of last year's residues was hanging around at our office. We had to kick him out first to make room for more beautiful things.

We thought we'd share our plan for what's happening with our blog in 2014 as well as our rudimentary style guide for those to whom it may concern.

Our primary goal still is: Publish good content, regularly. Squirrel Park is a beautiful and fairly popular playground. It will stay that way, but the toys will become more focused and more technical.

Our objectives are:
+ Write and communicate better
+ Develop ideas by expressing them
+ Connect with our community
+ Be of value: share knowledge, exchange thoughts, keep the conversation going

Features

As we go along, we'll add a couple of slim, new features. This goes for design decisions, too, such as perfecting readability by reworking some of the typography. Of course, the improvements will be incorporated into LINES:

  • Easy email subscription
  • Suggestions for further reading in Squirrel Park

For now, we decided against comments or more social interaction. We still believe in taking the discussion to the people.

Publishing Schedule

We will aim for two good Opoloo articles per month. Ideally, one will be more technology-oriented, the other rather design/strategy/philosophy-related.

We want you to be a part of this blog, because we value your ideas, feedback, and criticism—in fact, we need them to continue building good stuff and do our share for the community. So, we will try to host one awesome contributor from outside Opoloo each month. Yes, we hand-pick some people we admire, but (as we established in the very first post) we would like you to tell us your ideas for guest posts. Playing in Squirrel Park will be even more fun, if we can achieve a nice miscellany from new and established voices.

An interview series is planned, in which we’ll record some conversations with interesting people in the industry. If you’d like someone particular to be interviewed, please do tell us and we’ll see to it that we drag that person in.

Now it’s your turn to send in your idea. We’ll work it out with you, but just so you’ll be prepared, here is:

The Short Squirrel Park Style Guide

This is a very rough guideline for writing on Squirrel Park.
It is not the place for advice on how to become a better writer.

Length

Articles will be mid-form, about 4–8 paragraphs. Make sure you write to the point and bring something relevant to the table. Don’t start articles with “10 years ago, when I was young, the bees bla bla bla ...”. Find a strong introduction that gets to the point and move on from there.

Also, don’t try to dive too deeply into philosophy or lengthy explanations. If your story is very complex, break it down into multiple articles.

Paragraphs

A paragraph consists of more than one sentence. It should outline an idea in the first sentence. Then, you elaborate on your idea and explain what you really mean, or give proof for the argument outlined in the initial sentence. The goal is that all paragraphs contribute to the overall idea/argument of the article. Try to link paragraphs.

Tone

Each piece of writing should reflect the personality of the writer. The tone should be relatively warm, human, informal, without being cuddly, cute, or flamboyant. It should be lean, to the point, using common language while technically correct and specific, without being corporate and interchangeable.

Please be opinionated and not afraid to say what you think.

Generally, prefer short words to long ones (if your word ends with
“-dezificationaliciously”, there’s probably a better one out there).

Prefer short sentences to long ones.

Structure

An article does not need to have sub-headlines, but it might profit from them (e.g. when they expose and concisely sum up ideas). Be sure, in any way, to adhere to a structure (i.e. beginning–middle–end) to guide your reader.

Grammar & Usage

Do worry about using language correctly, but focus on your writing. Don't worry about the finer details, such as capitalization, using curly apostrophes, Oxford commas, semicolons, or em-dashes. Squirrel Park's editorial process will take care of this.
Still, use a dictionary (Wordnik is perfect).
If you haven't yet, get The Elements of Style by Strunk & White. Read it.

More immediately ...

We're looking forward hanging out with you this year in Squirrel Park. If you have an idea for a guest post, do tell us about it. Coming soon: An introduction to Jekyll by Max Boll, a Firefox phone review by Günther Beyer, and lots of insight into our latest projects.

Discuss this article at Google+

The Power of Jekyll

From dynamic content to a static website

I'm a stubborn guy. I always go down the hard way, trying to reinvent the wheel. This includes plenty of systems and web projects over the years. In the beginning of 2013, I felt a bit lazy, so I used Wordpress for my blog — it’s easy to use and you don’t have much trouble with it, eh? The problem is that you will mostly have features you don’t need, but some that you definitely need are missing. So I was right to develop my projects without any popular system.
Now, I had two major problems:

  1. Building an own system requires way too much time for only my private projects, because they are not that big.
  2. Using common systems like Wordpress are... We don’t need to talk about it at all. Overall it’s good but as a developer you feel caged because of the aforementioned “feature problem”.

My good friend Kevin told me about the magical power of Jekyll. When I first checked the website, I wasn’t very impressed, because I really like external databases like MySQL. Jekyll, instead, was proclaiming:

No more databases, comment moderation, or pesky updates to install — just your content.

Nonetheless, I thought it would be a good idea to test it. Just in case it would turn out to be as good as Kevin told me. It’s really quick and easy to install, the only requirement is to have Ruby already installed.

gem install jekyll

Alright, let’s start a new blog:

jekyll new my-awesome-blog
cd my-awesome-blog

Jekyll creates a new folder with your project name and generates a clear structure in it:

Alt text

Even if you have never worked with such a kind of system, it’s easy to follow this folder-structure. It connects HTML, YAML, Liquid, and Markdown.

  • HTML to build the structure of your website
  • YAML & Liquid to work with dynamic content
  • Markdown to write your posts/articles

Open the project folder with your favorite editor, which is of course Sublime Text. Before you start to change anything, go back to your terminal and type $ jekyll serve or $ jekyll serve —watch to build the site. Open your browser and go to http://localhost:4000, and voilà. You can now see your new website running on Jekyll with sample posts.

To customize your layout (or anything else), go back to your editor. You’ll probably find out yourself what to do, but I’m going to publish another article about ”building own templates” for Jekyll. Until then, try to find out how it works. I’m sure you don’t even want to know anymore when the follow-up is published once you've started your own layout.

For help, you may want to refer to the Jekyll website: http://jekyllrb.com.

Discuss this article at Google+
 

Hook — End of 2013 Edition

The end of the year is nigh. It's been weird, fun, intense, terrible, and wonderful all at once. But then again: what year isn't?

Because we think that all these Christmas and New Year's wishes are mostly bullshit, we would like to say "Thank You" for hanging out with us this year by feeding your head with some pieces of the web that influenced us the most in 2013.

Günther

2013 was certainly not an easy year. While we are used to horror stories and catastrophes on the news, this time drama reached our safe little world of technology. The NSA debate ultimately made us rethink right and wrong in our always connected societies.

While I was surrounded by HD photos, video-games and apps all year, I learned that the written word still carries farther and moves stronger. Enjoy some links, below.

The Shape Of Design

by Frank Chimero
Admitted: I was late to get my hands on this gem of a(n e)book. Taking the time and absorbing it in one sitting was a little revelation. We use the word “design” for almost anything these days that tries to carry value or has a human component. Frank Chimero gives meaning back, helps us understand what we’re really doing with context and clarity. Read it and think.

Medium

A strong brewed coffee and medium.com were the two things I enjoyed every morning, when 2013 was still young. At the end of the year, mostly coffee remained.
The constant quality of grounded articles and opinions soon gave way to bragging texts, fighting for some quick attention. I’m not saying that there’s no place for this on the internet, but Medium’s example clearly shows the importance to curate and filter on today’s web.

The Last Website

Building lastwebsite.io together with the talented Brothers Chapman was an influential experiment for Opoloo. It did push our technical skills on the mobile web and sensitized us for deep, immersive experiences and storytelling as a fundamental part of modern communication.
If you still haven’t found the easter-egg, maybe revisit it and enter the Gateway again ...

Jochen

A lot of things happened in 2013, and it’s hard to keep track of all the fascinating, mind-blowing, funny, and immersive moments lived and experiences made. Throwing it all together in just a couple of links is an impossible task, since most of what really mattered happened in the real world: Conversations with lots of people, some really good books (yep, some of us still read old school books :) ), and finally the mandatory trial and error life experience.

Nevertheless there are some specials I’d love to present, and my third “link” refers to one of my favorite business related books for 2013.

Steam OS

After decades of struggling with dual boot (Linux for work environment and Windows for the spare time gaming experience) Valve’s announcement of Steam OS being based on Linux was long overdue and like Easter, Christmas and all past birthdays all at once. Lets hope that it will succeed and revolutionize the gaming world and especially the mindset of hardware vendors to support more than one operating system.

Lines

Upon making “The Last Website”, we needed something new to play with and keep up the team spirit. Some weird ideas rose and were thrown over board again, but what’s lasted was our mindset to share things and enlighten people. Developing our own blogging software to publish what matters for us personally as well as open sourcing the source code was a perfect fit.

Paperwork you should have read

“Team Geek: A Software Developer's Guide to Working Well with Others” was one of my favorites in 2013. Coding is not all about your code, but mostly about your team. This book teaches and/or reminds you on how to get a better developer by improving your “social coding skills”. Read it now if you haven’t yet.

Happy New Year to you all.

Nino

“I Am Here to Crush Your Dreams”

by Erin Kissane

You might have to have a really good life. It might be fucking amazing.

Something in me resonated when I read this short piece by Erin Kissane. She’s as emotional as she’s smart here, just speaking my mind about some things that have actually plagued me this year. Some of those things, I feel, are just capital-T-True.

“Subcompact Publishing”

by Craig Mod

Sometimes I really feel a certain way, but the right kind of words to describe that feeling can’t be formed just yet. Then, I’m all the more astonished that there are people who feel the same but are already 20 steps ahead of my naive ass. So is Craig Mod. This is what publishing on the web should look like, even a year after this article saw the light of day.

“Learning to See”

by Oliver Reichenstein

For me, Oliver Reichenstein remains one of the most influential people in all things web-related (even iA writer Pro left aside). What he writes is always accessible and useful—there’s no other way for you to feel about it, because you know he has thought about everything he says thoroughly (that might be his philosophy background showing, too). I haven’t read or heard a single stupid sentence by this man. This article, though, is him at his finest.

Max

Codepen.io

Codepen was one of my most visited links in 2013. I've never learned that much about web stuff as I did in 2013 on this site. Together with other codepen users I created a new dev-group to exchange our code and experience. It's fun and was a really good decision I made in 2013.

Jekyll

This ruby gem is really made for me. It's a small engine to convert dynamic content into a static website. Most of my friends and I use it for our personal websites. Small but powerful, I love it.

Discuss this article at Google+

Linguistic Implications of Content Strategy

Towards another definition

“The brain is hungry not for method but for content […].” —Frederick Turner

Names, Labels, Definitions

Despite, or maybe precisely because of the continuing buzz about Content Strategy, we still seem to have only a vague idea of what it contains. I love some of the definitions smart people have come up with and I don't mean to amend them. The following is to be seen as part of the discourse on how we, as content strategists, think about what we do.

Names and labels — especially successful ones — are usually not happy coincidences. We can learn from their implications if we turn them inside out. So, I'm proposing a structured analytic view of the term “Content Strategy” to hopefully connect some of the loose threads.

Part of our job is to take things apart, find out what the pieces are about (their intent, purpose, conclusions, and on), and then re-assemble them to get a clearer view, to find the “more” that's hidden in the sum of the parts.

Let's start with the taking-apart.

Content

A look into a dictionary tells us that content encompasses a wide scope of meaning.

n. Something contained, as in a receptacle.

But content is more than something passive, unilateral:

n. The material, including text and images, that constitutes a publication or document
n. The substantive or meaningful part
n. The meaning or significance of a literary or artistic work

Content, thus, also establishes and enacts substance, meaning, and significance. Put in a pedestrian way, it is not something thrown in a box that we then rummage through. That which is contained also shapes the container, defines it, becomes its essence. By that, the content starts to communicate, but only — and this is merely implied in the above — if it is given a structure, a pattern that we can make sense of.

We do so, as Rahel Bailie points out, by contextualizing data. Content does not create meaning by itself, but relies on our ability to arrange it and form mental relationships, so that its individual parts can be mentally connected to form something coherent.

n. Containing capacity or extent.

Content itself contains something that we have to read and bring to the foreground. It is (and here we get philosophical again) potential meaning that we are after. Especially if we think about “capacity” and “extent”, there is quite a material feeling to it: Content takes up space. We have to create enough space for possibility and development, because they are an inherent part of content. (Notice again that terms like “capacity”, “extent”, and imply something active.)

So okay: content is not static, but rather dynamic, in motion — if alone for the fact that it communicates.

But funnily enough, content implies something more:

adj. Desiring no more than what one has; satisfied.
n. Contentment; satisfaction.

As strategists who deal with content, it is our job to make content satisfying. I would argue that what makes it satisfying is essentially “meaning”. Few things are more satisfying for us humans than obtaining meaning. On the other hand, things without meaning are, for the most part, utterly worthless, even frustrating to us. We have to make sure that our content contains meaning by way of its structure and contextualizations, and that this meaning is easily understood by the ones who peruse our content.

Let's dig a little deeper:
Etymologically, content is derived from medieval Latin: contentum, a plural form, and merely meant “things contained”. It's also worth noticing that there is hardly a singular meaning inherent in “content”. We generally speak about multiple elements.

Contentus is the past participle of continere, which also meant “to hold” and “to restrain”. Not only, then, is our content the holder of meaning. There is (etymologically at least) a limit implied, beyond which containment is impossible. We have all experienced this: too much content for the container obscures meaning.

For now, I hold that the main goal of “content” is making meaning possible.

Strategy

According to our trusted dictionary, strategy is

n. The science and art of military command as applied to the overall planning and conduct of large-scale combat operations.
n. The art or skill of using stratagems in endeavors such as politics and business.
n. The use of artifice, finesse, or stratagem for the carrying out of any project.
n. an elaborate and systematic plan of action
Synonyms: generalship, tactics

“Strategy”, therefore, implies an approach both scientific and artful, elaborate but not artificial. It implies a certain artfulness even, in the positive sense. A “project” (whatever that might be) lays down very clear boundaries and restrictions — the space in which the strategist moves is limited — she cannot start from scratch, but has to use what is already there. The image of war and warfare is inherent to the word. From etymology:

Strategy. From Old French strategie, from Ancient Greek strategia, “office of general, command, generalship”, from strategos, “the leader or commander of an army, a general”, from stratos, “army” + ago, “I lead, I conduct”.

The commander-in-chief, the general, is the highest office in the military (in ancient Greece and today). Responsible for the carrying out of actions according to an elaborate plan that comprises many individual parts, the general uses stratagem (artifice to surprise an enemy) to successfully take over foreign ground. For this, naturally, he has to have an all-encompassing overview of capabilities, resources, and the terrain he is working with. It's not only what the strategists do, it's above all how they do it: according to an artful, meticulous plan. This might sound trivial. But it's the understanding of those trivialities that makes endeavors successful in the end.

Difficulties (A Short Excursion)

General! We have to fight those damn Baccarudas!
It’s ‘Barracudas’, my Lord.
I can’t pronounce ‘baccaruda’.
It's easy: say ‘ba’.
‘Ba.’
Now ‘ra.’
Ra.
‘Cu.’
Cu.
‘Da.’
Da.
‘Now put it all together!’
Babararacucudada!

Much can go wrong with plotting a strategy. There's the capabilities and understanding of the strategist to consider, the material she has to work with that will pose difficulties, as well as the (sometimes limited) understanding of the client. The strategist’s responsibility, therefore, is to have a clear view of those constraints, the matter she works with (container of the content, its specifications with their constraints and freedom), the terrain she is working on, and the decision-makers she works with.

And yes, we have to guide our client through the whole process and take care of all matters, big or small, because the client can’t be bothered with what seems like “minor details” to her, but is a huge issue for us due to the fact that we think it is relevant for our users.

On a side note: It does not bring you into disrepute to ask for help. In fact, you will need to — generals always depend on input and help from other experts or informants. And clients.

Content Strategy

To return to Frederick Turner, why is the brain hungry for content, anyway? Because it is already equipped with some very elaborate methods, so we can do the meaning-making ourselves, alright — if we get structured access to content. Let’s make sure nobody leaves hungry.

If we apply the implications of both “content” and “strategy” outlined above, one definition of “content strategy” could be: “The science and art of structuring meaningful communication.” That would make the content strategist the commander of the architecture of elements needed for creating meaning with communication. Does that sound in any way less vague?

I’ll spell it out again:
We try to establish meaning with our content.
Content is inherently dynamic.
It serves to satisfy the user.

Strategy has a scientific and artful approach.
It focuses on the how over the what.
A successful strategy imports an overview of all elements.

Content Strategy is the systematic, dynamic approach to creating meaning with structure.

Discuss this article at Google+