Skip navigation
Help

Zynga

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Wilson Page

  

When the mockups for the new Financial Times application hit our desks in mid-2012, we knew we had a real challenge on our hands. Many of us on the team (including me) swore that parts of interface would not be possible in HTML5. Given the product team’s passion for the new UI, we rolled up our sleeves and gave it our best shot.

We were tasked with implementing a far more challenging product, without compromising the reliable, performant experience that made the first app so successful.

promo-500-compr

We didn’t just want to build a product that fulfilled its current requirements; we wanted to build a foundation that we could innovate on in the future. This meant building with a maintenance-first mentality, writing clean, well-commented code and, at the same time, ensuring that our code could accommodate the demands of an ever-changing feature set.

In this article, I’ll discuss some of the changes we made in the latest release and the decision-making behind them. I hope you will come away with some ideas and learn from our solutions as well as our mistakes.

Supported Devices

The first Financial Times Web app ran on iPad and iPhone in the browser, and it shipped in a native (PhoneGap-esque) application wrapper for Android and Windows 8 Metro devices. The latest Web app is currently being served to iPad devices only; but as support is built in and tested, it will be rolled out to all existing supported platforms. HTML5 gives developers the advantage of occupying almost any mobile platform. With 2013 promising the launch of several new Web application marketplaces (eg. Chrome Web Store and Mozilla Marketplace), we are excited by the possibilities that lie ahead for the mobile Web.

Fixed-Height Layouts

The first shock that came from the new mockups was that they were all fixed height. By “fixed height,” I mean that, unlike a conventional website, the height of the page is restricted to the height of the device’s viewport. If there is more content than there is screen space, overflow must be dealt with at a component level, as opposed to the page level. We wanted to use JavaScript only as a last resort, so the first tool that sprang to mind was flexbox. Flexbox gives developers the ability to declare flexible elements that can fill the available horizontal or vertical space, something that has been very tricky to do with CSS. Chris Coyier has a great introduction to flexbox.

Using Flexbox in Production

Flexbox has been around since 2009 and has great support on all the popular smartphones and tablets. We jumped at the chance to use flexbox when we found out how easily it could solve some of our complex layouts, and we started throwing it at every layout problem we faced. As the app began to grow, we found performance was getting worse and worse.

We spent a good few hours in Chrome Developers Tools’ timeline and found the culprit: Shock, horror! — it was our new best friend, flexbox. The timeline showed that some layouts were taking close to 100 milliseconds; reworking our layouts without flexbox reduced this to 10 milliseconds! This may not seem like a lot, but when swiping between sections, 90 milliseconds of unresponsiveness is very noticeable.

Back to the Old School

We had no other choice but to tear out flexbox wherever we could. We used 100% height, floats, negative margins, border-box sizing and padding to achieve the same layouts with much greater performance (albeit with more complex CSS). Flexbox is still used in some parts of the app. We found that its impact on performance was less expensive when used for small UI components.

layout-time-with-flexbox-500_comp
Page layout time with flexbox

layout-time-without-flexbox-500_comp
Page layout time without flexbox

Truncation

The content of a fixed-height layout will rarely fit its container; eventually it has to overflow. Traditionally in print, designers have used ellipses (three dots) to solve this problem; however, on the Web, this isn’t the simplest technique to implement.

Ellipsis

You might be familiar with the text-overflow: ellipsis declaration in CSS. It works great, has awesome browser support, but has one shortfall: it can’t be used for text that spans multiple lines. We needed a solution that would insert an ellipsis at the point where the paragraph overflows its container. JavaScript had to step in.

ellipsis-500_mini
Ellipsis truncation is used throughout.

After an in-depth research and exploration of several different approaches, we created our FTEllipsis library. In essence, it measures the available height of the container, then measures the height of each child element. When it finds the child element that overflows the container, it caps its height to a sensible number of lines. For WebKit-based browsers, we use the little-known -webkit-line-clamp property to truncate an element’s text by a set number of lines. For non-WebKit browsers, the library allows the developer to style the overflowing container however they wish using regular CSS.

Modularization

Having tackled some of the low-level visual challenges, we needed to step back and decide on the best way to manage our application’s views. We wanted to be able to reuse small parts of our views in different contexts and find a way to architect rock-solid styling that wouldn’t leak between components.

One of the best decisions we made in implementing the new application was to modularize the views. This started when we were first looking over the designs. We scribbled over printouts, breaking the page down into chunks (or modules). Our plan was to identify all of the possible layouts and modules, and define each view (or page) as a combination of modules sitting inside the slots of a single layout.

Each module needed to be named, but we found it very hard to describe a module, especially when some modules could have multiple appearances depending on screen size or context. As a result, we abandoned semantic naming and decided to name each component after a type of fruit — no more time wasted thinking up sensible, unambiguous names!

An example of a module’s markup:


<div class="apple">
  <h2 class="apple_headline">{{headline}}</h2>
  <h3 class="apple_sub-head">{{subhead}}</h3>
  <div class="apple_body">{{body}}</div>
</div>

An example of a module’s styling:


.apple {}

.apple_headline {
  font-size: 40px;
}

.apple_sub-head {
  font-size: 20px;
}

.apple_body {
  font-size: 14px;
  column-count: 2;
  color: #333;
}

Notice how each class is prefixed with the module’s name. This ensures that the styling for one component will never affect another; every module’s styling is encapsulated. Also, notice how we use just one class in our CSS selectors; this makes our component transportable. Ridding selectors of any ancestral context means that modules may be dropped anywhere in our application and will look the same. This is all imperative if we want to be able to reuse components throughout the application (and even across applications).

What If a Module Needs Interactions?

Each module (or fruit) has its own markup and style, which we wrote in such a way that it can be reused. But what if we need a module to respond to interactions or events? We need a way to bring the component to life, but still ensure that it is unbound from context so that it can be reused in different places. This is a little trickier that just writing smart markup and styling. To solve this problem, we wrote FruitMachine.

Reusable Components

FruitMachine is a lightweight library that assembles our layout’s components and enables us to declare interactions on a per-module basis. It was inspired by the simplicity of Backbone views, but with a little more structure to keep “boilerplate” code to a minimum. FruitMachine gives our team a consistent way to work with views, while at the same time remaining relatively unopinionated so that it can be used in almost any view.

The Component Mentality

Thinking about your application as a collection of standalone components changes the way you approach problems. Components need to be dumb; they can’t know anything of their context or of the consequences of any interactions that may occur within them. They can have a public API and should emit events when they are interacted with. An application-specific controller assembles each layout and is the brain behind everything. Its job is to create, control and listen to each component in the view.

For example, to show a popover when a component named “button” is clicked, we would not hardcode this logic into the button component. Instead “button” would emit a buttonclicked event on itself every time its button is clicked; the view controller would listen for this event and then show the popover. By working like this, we can create a large collection of components that can be reused in many different contexts. A view component may not have any application-specific dependencies if it is to be used across projects.

Working like this has simplified our architecture considerably. Breaking down our views into components and decoupling them from our application focuses our decision-making and moves us away from baking complex, heavily dependent modules into our application.

The Future of FruitMachine

FruitMachine was our solution to achieve fully transportable view components. It enables us to quickly define and assemble views with minimal effort. We are currently using FruitMachine only on the client, but server-side (NodeJS) usage has been considered throughout development. In the coming months, we hope to move towards producing server-side-rendered websites that progressively enhance into a rich app experience.

You can find out more about FruitMachine and check out some more examples in the public GitHub repository.

Retina Support

The Financial Times’ first Web app was released before the age of “Retina” screens. We retrofitted some high-resolution solutions, but never went the whole hog. For our designers, 100% Retina support was a must-have in the new application. We developers were sick of maintaining multiple sizes and resolutions of each tiny image within the UI, so a single vector-based solution seemed like the best approach. We ended up choosing icon fonts to replace our old PNGs, and because they are implemented just like any other custom font, they are really well supported. SVG graphics were considered, but after finding a lack of support in Android 2.3 and below, this option was ruled out. Plus, there is something nice about having all of your icons bundled up in a single file, whilst not sacrificing the individuality of each graphic (like sprites).

Our first move was to replace the Financial Times’ logo image with a single glyph in our own custom icon font. A font glyph may be any color and size, and it always looks super-sharp and is usually lighter in weight than the original image. Once we had proved it could work, we began replacing every UI image and icon with an icon font alternative. Now, the only pixel-based image in our CSS is the full-color logo on the splash screen. We used the powerful but rather archaic-looking FontForge to achieve this.

Once past the installation phase, you can open any font file in FontForge and individually change the vector shape of any character. We imported SVG vector shapes (created in Adobe Illustrator) into suitable character slots of our font and exported as WOFF and TTF font types. A combination of WOFF and TTF file formats are required to support iOS, Android and Windows devices, although we hope to rely only on WOFFs once Android gains support (plus, WOFFs are around 25% smaller in file size than TTFs).

icon-font-500-compr
The Financial Times’ icon font in Font Forge

Images

Article images are crucial for user engagement. Our images are delivered as double-resolution JPEGs so that they look sharp on Retina screens. Our image service (running ImageMagick) outputs JPEGs at the lowest possible quality level without causing noticeable degradation (we use 35 for Retina devices and 70 for non-Retina). Scaling down retina size images in the browser enables us to reduce JPEG quality to a lower level than would otherwise be possible without compression artifacts becoming noticeable. This article explains this technique in more detail.

It’s worth noting that this technique does require the browser to work a little harder. In old browsers, the work of scaling down many large images could have a noticeable impact on performance, but we haven’t encountered any serious problems.

Native-Like Scrolling

Like almost any application, we require full-page and subcomponent scrolling in order to manage all of the content we want to show our users. On desktop, we can make use of the well-established overflow CSS property. When dealing with the mobile Web, this isn’t so straightforward. We require a single solution that provides a “momentum” scrolling experience across all of the devices we support.

overflow: scroll

The overflow: scroll declaration is becoming usable on the mobile Web. Android and iOS now support it, but only since Android 3.0 and iOS 5. IOS 5 came with the exciting new -webkit-overflow-scrolling: touch property, which allows for native momentum-like scrolling in the browser. Both of these options have their limitations.

Standard overflow: scroll and overflow: auto don’t display scroll bars as users might expect, and they don’t have the momentum touch-scrolling feel that users have become accustomed to from their native apps. The -webkit-overflow-scrolling: touch declaration does add momentum scrolling and scroll bars, but it doesn’t allow developers to style the scroll bars in any way, and has limited support (iOS 5+ and Chrome on Android).

A Consistent Experience

Fragmented support and an inconsistent feel forced us to turn to JavaScript. Our first implementation used the TouchScroll library. This solution met our needs, but as our list of supported devices grew and as more complex scrolling interactions were required, working with it became trickier. TouchScroll lacks IE 10 support, and its API interface is difficult to work with. We also tried Scrollability and Zynga Scroller, neither of which have the features, performance or cross-browser capability we were looking for. Out of this problem, FTScroller was developed: a high-performance, momentum-scrolling library with support for iOS, Android, Playbook and IE 10.

FTScroller

FTScroller’s scrolling implementation is similar to TouchScroll’s, with a flexible API much like Zynga Scroller. We added some enhancements, such as CSS bezier curves for bouncing, requestAnimationFrame for smoother frame rates, and support for IE 10. The advantage of writing our own solution is that we could develop a product that exactly meets our requirements. When you know the code base inside out, fixing bugs and adding features is a lot simpler.

FTScroller is dead simple to use. Just pass in the element that will wrap the overflowing content, and FTScroller will implement horizontal or vertical scrolling as and when needed. Many other options may be declared in an object as the second argument, for more custom requirements. We use FTScroller throughout the Financial Times’ Web app for a consistent cross-platform scrolling experience.

A simple example:


var container = document.getElementById('scrollcontainer');
var scroller = new FTScroller(container);

The Gallery

The part of our application that holds and animates the page views is known as the “gallery.” It consists of three divisions: left, center and right. The page that is currently in view is located in the center pane. The previous page is positioned off screen in the left-hand pane, and the next page is positioned off screen in the right-hand pane. When the user swipes to the next page, we use CSS transitions to animate the three panes to the left, revealing the hidden right pane. When the transition has finished, the right pane becomes the center pane, and the far-left pane skips over to become the right pane. By using only three page containers, we keep the DOM light, while still creating the illusion of infinite pages.

Web
Infinite scrolling made possible with a three-pane gallery

Making It All Work Offline

Not many Web apps currently offer an offline experience, and there’s a good reason for that: implementing it is a bloody pain! The application cache (AppCache) at first glance appears to be the answer to all offline problems, but dig a little deeper and stuff gets nasty. Talks by Andrew Betts and Jake Archibald explain really well the problems you will encounter. Unfortunately, AppCache is currently the only way to achieve offline support, so we have to work around its many deficiencies.

Our approach to offline is to store as little in the AppCache as possible. We use it for fonts, the favicon and one or two UI images — things that we know will rarely or never need updating. Our JavaScript, CSS and templates live in LocalStorage. This approach gives us complete control over serving and updating the most crucial parts of our application. When the application starts, the bare minimum required to get the app up and running is sent down the wire, embedded in a single HTML page; we call this the preload.

We show a splash screen, and behind the scenes we make a request for the application’s full resources. This request returns a big JSON object containing our JavaScript, CSS and Mustache templates. We eval the JavaScript and inject the CSS into the DOM, and then the application launches. This “bootstrap” JSON is then stored in LocalStorage, ready to be used when the app is next started up.

On subsequent startups, we always use the JSON from LocalStorage and then check for resource updates in the background. If an update is found, we download the latest JSON object and replace the existing one in LocalStorage. Then, the next time the app starts, it launches with the new assets. If the app is launched offline, the startup process is the same, except that we cannot make the request for resource updates.

Images

Managing offline images is currently not as easy as it should be. Our image requests are run through a custom image loader and cached in the local database (IndexedDB or WebSQL) so that the images can be loaded when a network connection is not present. We never load images in the conventional way, otherwise they would break when users are offline.

Our image-loading process:

  1. The loader scans the page for image placeholders declared by a particular class.
  2. It takes the src attribute of each image placeholder found and requests the source from our JavaScript image-loader library.
  3. The local database is checked for each image. Failing that, a single HTTP request is made listing all missing images.
  4. A JSON array of Base64-encoded images is returned from the HTTP response and stored separately in the local database.
  5. A callback is fired for each image request, passing the Base64 string as an argument.
  6. An <img> element is created, and its src attribute is set to the Base64 data-URI string.
  7. The image is faded in.

I should also mention that we compress our Base64-encoded image strings in order to fit as many images in the database as possible. My colleague Andrew Betts goes into detail on how this can be achieved.

In some cases, we use this cool trick to handle images that fail to load:


<img src="image.jpg" onerror="this.style.display='none';" />

Ever-Evolving Applications

In order to stay competitive, a digital product needs to evolve, and as developers, we need to be prepared for this. When the request for a redesign landed at the Financial Times, we already had a fast, popular, feature-rich application, but it wasn’t built for change. At the time, we were able to implement small changes to features, but implementing anything big became a slow process and often introduced a lot of unrelated regressions.

Our application was drastically reworked to make the new requirements possible, and this took a lot of time. Having made this investment, we hope the new application not only meets (and even exceeds) the standard of the first product, but gives us a platform on which we can develop faster and more flexibly in the future.

(al)

© Wilson Page for Smashing Magazine, 2013.

0
Your rating: None

Social Media Insights is a new daily newsletter from Business Insider that collects and delivers the top social media news first thing every morning. You can sign up to receive Social Media Insights here or at the bottom of this post.

Facebook Owns Your Phone (Fast Company)
Over the last couple of years, Facebook has packed its mobile apps with much of the same functionality as operating systems like Google’s Android, Apple’s iOS, or Amazon’s version of Android for Kindle Fire. It has not, however, launched the Facebook phone that once seemed inevitable. That's because your phone already is a Facebook phone.

facebook apps

According to comScore, Facebook already owns 23 percent of time spent in apps on Android and iOS. It also owns Instagram, one of the apps with which mobile users spend the second most amount of time (it's tied with Gmail and YouTube at 3 percent). The more time the company controls on its competitors' phones, the less important it is that it doesn't have its own devices. Read >>

What's In Your Wallet? A Facebook Card? (The Huffington Post)
Facebook announced a major addition to their Gifts product on Jan. 31— Facebook Cards. Facebook Cards, as the name implies, are physical, multi-use gift cards that users can order for friends directly through Facebook. Facebook Cards uses the existing Facebook Gifts infrastructure to allow a user to send a Facebook Card with a credit from a participating retailer. The recipient is prompted to enter their mailing address (more data!) in order to receive the physical card. Facebook sees it as a multi-use, multi-retailer product. This nudges it up close to, but not fully into, the mobile wallet space. For one thing it's still a physical object and for another, Facebook has no immediate plans to allow users to load up dollars or deals, but this could change rapidly. Read >>

Facebook Can Totally Undermine Apple And Google (Wired)
We’re in uncharted territory here since platforms-on-top-of-platform configurations are relatively new. Yet we do have one related industry example that could shed some light on this case. It’s one of Japan’s leading mobile social game developers: GREE. GREE makes up to four times more average revenue per user (ARPU) than Zynga. And Facebook has far more reach than GREE. Given that social applications, and particularly games, are the most popular and highest revenue generators of all mobile applications— a Facebook multi-sided platform similar to GREE would divert a lot of value away from Apple’s and Google’s smartphone platforms. Read >>

Wall Street Rethinks Facebook Earnings (Reuters)
Pivotal Research Group analyst Brian Wieser upgraded Facebook to a "Buy" rating, calling Wall Street's reaction to the results "downright dazed." The stock market incorrectly interpreted Facebook's "mobile revenue figures as a negative when in fact they are part of a story that we can see as qualitatively more favorable," Wieser said. Shares of the company finished regular trading the day after earnings down 0.8 percent at $30.98. The company reported a better-than-expected fourth-quarter profit on Wednesday and said mobile advertising revenue doubled to $306 million, suggesting it was making inroads into handheld devices such as smartphones and tablets. Investors were looking for at least $350 million in mobile advertising revenue, Piper Jaffray analyst Gene Munster said in a note to clients.  Read >>

Developing A Strategic Social Media Plan For Your Business (Ahain Group)
After you’ve taken time to discover how customers would like you to engage on social media, you now need to develop a social media strategy that will generate meaningful and real returns for the business. The 10 steps in developing strategic social media are:

  1. Align with the business
  2. Discover opportunities
  3. Define goals
  4. Identify KPIs
  5. Assign values to KPIs
  6. Decide on channels
  7. Determine tactics
  8. Select analytics
  9. Roll out strategy
  10. Measure and refine

Quantifying an ROI from social media is only possible after you’ve developed a strategic plan that will make measurement both clear and easy. Read >>

Super Bowl, Commercials, And Social Media (NetBase)
Now that the game is over, here is what NetBase found about Super Bowl commercials during the last 24 hours:

  • Go Daddy (249,273 mentions: 14.67 percent positive)
  • Doritos (137,509 mentions, 90.87 percent pos)
  • Pepsi (47,176 mentions, 69.99 percent pos)
  • Volkswagen (31,052 mentions, 84.08 percent pos)
  • Budweiser (24,658 mentions, 83.37 percent pos)
  • Dodge Ram (19,619 mentions, 77.66 percent pos)
  • Taco Bell (19,783 mentions, 93.20 percent pos)
  • Calvin Klein (16,532 mentions, 75.17 percent pos)
  • NFL (Leon Sandcastle) (12,700 mentions, 91.54 percent pos)
  • Blackberry (10,773 mentions, 55.36 percent pos)

most buzzed about football commercials

The graphic compares 8 of the 15 most buzzed about commercials by mentions, sentiment and passion intensity. The amount of chatter about a brand is indicated by the size of the bubble, while the placement of the bubble shows the sentiment (from top to bottom) and the intensity of passion (from left to right). Read >>

How To Measure Social Media ROI (Jason Fox)
Is it enough to have a Facebook profile, a Twitter account, and a YouTube channel? To be putting original content onto each platform on a consistent basis. To be monitoring for comments and likes that you can connect with and create relationships. Maybe venturing out into less common social media channels like Pinterest or Google+. To be collecting Fans, Friends, Followers, and Likes with a reckless abandon. Possibly promoting an occasional Facebook post to maximize exposure. Is that enough? Perhaps it is to much. The only way to know for sure is to measure social media ROI:

social media solutions

No matter how you are using Social Media there is a way to measure its value.  Whether you interested in a general overview or you want to create a closed loop marketing campaign.  There is a system that will help you to Measure Social Media ROI. Read >>

Twitter Blew Out Facebook In The Super Bowl (Business Insider)
As the Baltimore Ravens were narrowly beating the San Francisco 49ers, Twitter featured in 26 out of 52 nationally aired advertisements, while Facebook only featured in four, and Google+ was not mentioned at all. YouTube and Instagram were mentioned once each, according to the website MarketingLand.com. In last year’s Super Bowl, Twitter and Facebook tied with only eight mentions each out of a total of 59 advertisements. For Twitter, the change from eight mentions to 26 represents a gain of more than 300 percent. For Facebook, it is a 50 percent drop. Read >>

The Social Credit Card? (The Huffington Post)
BarclayCard tapped the power of the crowd (their card members) to collaborate on building a better credit card experience. They launched a community where card member could exchange ideas, vote on product features and earn "credits" for their participation. The result is BarclayCard Ring — the world's first community-designed credit card. Benefits include:

  1. Full transparency — insight into how Barclaycard Ring makes money, including metrics on Ring's financial performance.
  2. Continued influence over the offering — a chance to guide Ring's benefits, rates, rules and penalties through an idea submission and peer evaluation system.
  3. A share of Ring profits — including options to donate profits to community-chosen charities.
  4. A robust social experience — topical forums, ask-and-answer, idea-sharing, polls, blogs, and credits earned for community participation.

If your social strategy doesn't include new ways of thinking about how your social customers fit into your business, it better. 2013 will be a game-changing year for social media. Brands like Barclaycard who are serious about social will make sure of that. Read >>

Social Media Is Changing The Way You Fly (WFAA)
Airlines no longer just make money taking travelers where they want to go. Some carriers now show up where their passengers already are. Southwest has six employees dedicated to social media, often only during regular business hours. The airline created its team by drawing employees from different departments, including customer service, marketing, and communications. This team doesn't just respond to questions, comments, and criticism on Twitter. Southwest employees also rebook flights, track bags, and issue travel vouchers all in 140 characters or less. Airline customer service has always been a thankless job. But its presence on social media continues to evolve as the power of participating for passengers does, too. Read >>

Social Media vs. Email: Which One Is Best For Your Business? (Publicity Mag)
The following infographic shows the peculiarities of social media and email. The stats are a bit dated, but you can get a fair idea about the power of both tools. Read >>

social media vs email

Please follow SAI on Twitter and Facebook.

Join the conversation about this story »

0
Your rating: None

female gamer

Irina Galtsova has to concentrate on what she’s doing. If she makes a mistake, the inhabitants of Bonga Island won’t be able to plant any more palm trees, go fishing, or make pottery. Plus she could ruin the fun for hundreds of thousands of women who love the computer game she designs.

The 29 year-old is a developer for the Hamburg-based computer gaming company Intenium. On average, the company puts a new game on the market every two days. The firm, which employs 90 people – of which 18 are women – is one of the largest games providers for female players. In its studios in Hamburg and Kaliningrad, Russia, games are specially developed for women who constitute a rapidly growing target group. Of the 25 million Germans who regularly play computer games, 11 million are women, according to the German Trade Association of Interactive Entertainment Software (BIU).

In games that are targeted for women – like AlamandiLady PopularFarmerama or Bonga Online – fighting and shooting have been replaced by flirting and craft-making, and players play with and not against each other. The goal is to find solutions to puzzles and crimes -- and things are created instead of destroyed. The main priority is for the games to offer relaxation and distraction.

From Bigpoint and Wooga to Zynga, nearly all gaming companies employ men to create digital worlds. Women are the exception on development teams. At least right now – because gaming companies are actively looking to recruit women. "We need a female influence on development teams," says Christina Barleben, a freelance game designer in Berlin. She intends to open her own studio.

[This article by Jürgen Hoffmann at Süddeutsche Zeitung was translated by WorldCrunch and partially syndicated here.]

Read the rest at WorldCrunch >

Please follow The Wire on Twitter and Facebook.

Join the conversation about this story »

0
Your rating: None

Venture investors still have a healthy appetite for early-stage consumer Internet companies, but those startups are having a harder time raising follow-on financing.

Overall the amount invested in consumer information services was off 42% in the first nine months as the difficulties of newly public Internet companies such as Facebook and Zynga cast doubt on the business models and valuations of social media companies.

Read the rest of this post on the original site

0
Your rating: None