Codeflow LLC - Chicago Web Development Agency

The Role of “The Fold” in Web IA

moon — Fri, 19 Aug 2011 18:02:17 +0000

One very common concern we hear at Codeflow when discussing design proposals with our clients is how much of the site is visible “above the fold”.

The “fold” is a term borrowed from the print newspaper world, where editors wanted be sure to put the most eye-catching content on display at the top-half of the folded newspaper as a device to sell papers. It’s used as “the hook” into the rest of the paper.

The analogy, while imperfect, does makes some sense on the web, where often, a user can only initially see a certain amount of the web page before needing to scroll down the page. But all too often, this concept is taken too far and the site design ends up for the worse as a result.

This happens when people take the idea of the “fold” to mean that the user will not scroll down, so all the important content needs to be visible at the top of the page. All too often, this leads to poorly designed sites with all the page elements densely compacted into a very short page.

It’s not often that ideas can effectively be conveyed in this manner; the page loses any ability to narrate and communicate information in an effective way.

The purpose of the fold in web design should be to display something intriguing to the visitor, which invites the user to scroll down to see the rest of the content on the page. As the reader scrolls, the story unfolds at an effective pace, using its content, ideas, and supporting evidence to persuade the user. It may be to purchase something, to get in touch, to hire you for a job.

In marketing, this technique has an acronym: AIDA, which stands for Attention, Interest, Desire, Action. Web pages can pull the reader into a narrative that tracks this pattern, but only if we’re not slaves to the Fold.

Inspiration: Life Below 600px

Fast atomic counters in Python

tim — Fri, 12 Aug 2011 00:02:02 +0000

Getting concurrency right is a tough job. Nothing new here, but this code will fail:

class BadCounter(object):
def __init__(self):
self.value = 0

def inc(self):
self.value += 1

counter = BadCounter()

def add(c):
for _ in xrange(10000):
c.inc()

threads = []
for _ in xrange(25):
t = threading.Thread(target=add, args=(counter,))
t.start()
threads.append(t)

map(lambda t: t.join(), threads)

assert 25 * 10000 == count, count

And then there was:

AssertionError: 56965

The reason this fails is due to a classic data race between the threads. In order to perform the operation x = x + 1, the Python compiler emits the following instructions:

1
2
3
4

LOAD_FAST x
LOAD_CONST 1
BINARY_ADD
STORE_FAST x

With multiple threads, these instructions are interleaved as they execute and two threads can LOAD the same value, increment it, and STORE it again. As the scheduling of the instructions on the CPU varies, each run of this code will produce a different result.

So in order to build a counter that is thread-safe, we use a lock to ensure that the block of instructions above runs atomically:

class SlowCounter(object):
def __init__(self):
self.value = 0
self.lock = threading.Lock()

def inc(self):
with self.lock:
self.value += 1

This time we get the right answer, but we spend all of our time managing the mutex. To make it fast, we need to avoid locking as much as possible. Given the way a counter like this is used, the majority of calls will be to inc(). Only holding a lock when the value is read will eliminate most of the contention.

To do this, we take advantage of the way that itertools.count() works. Being implemented as part of the cPython core, each call to __next__() on the iterator is guarded by the GIL and requires no mutex guard. The only trouble is that there is no way to get the current value of the iterator. Instead, we trade a bit of memory for the speed-up:

class FastCounter(object):
def __init__(self, initial=0):
self._lock = threading.Lock()
self.reset(initial)

def reset(self, initial=0):
with self._lock:
self._count = itertools.count(initial)
self._offset = 0

def inc(self):
self._count.next()

@property
def value(self):
with self._lock:
val = self._count.next() - self._offset
self._offset += 1
return val

FastCounter is ~30% faster than SlowCounter.

>>> print 'Fast: ', timeit.timeit('c.inc()', 'c = FastCounter()')
>>> Fast: 0.956966876984
>>> print 'Slow: ', timeit.timeit('c.inc()', 'c = SlowCounter()')
>>> Slow: 1.24885392189

2 Sites Win DC AdClub Addys

moon — Wed, 16 Mar 2011 16:14:56 +0000

Working in partnership with Porter Novelli, Codeflow again provided development services for projects that garnered Addy awards from the DC Ad Club. The FINRA Investor Education site and The Laughing Cow site won a Gold Addy for Consumer Website/Services and a Silver Addy for Consumer Website/Product, respectively.

We’re truly excited to be contributing and participating on projects that achieve such a high standard of concept, design and execution, and hope to continue the trend!

New extranet developed for True Blue Inclusion

moon — Wed, 10 Nov 2010 14:12:49 +0000

True Blue Inclusion is a business organization whose members include the Chief Diversity Officers of a number of corporations. Codeflow was contacted to design and develop an extranet site that offered members a way to find relevant news and resources, as well as share their knowledge and insights with the entire community. We executed this project using the Drupal CMS.

New features for Laughing Cow

moon — Thu, 05 Aug 2010 15:38:42 +0000

Following closely on the heels of a major site re-design implemented in WordPress, Codeflow was tapped by Porter Novelli to implement a second phase of additional features to the site, including site registration with profiles using Buddypress, and community-oriented features such as submission of user recipes to the recipe database.

We’re happy with the results — if you’re a fan of BabyBel or Laughing Cow cheese (and who isn’t?), check it out.

Codeflow helps Widmeyer relaunch science.pfizer.com

moon — Fri, 11 Jun 2010 20:29:00 +0000

science.pfizer.com

Widmeyer Communications and Pfizer have created a site called Think Science Now, a place where a group of about 100 of Pfizer’s best scientific minds can come together to share ideas, inspiration and research. Through the use of various social networking tools, Pfizer scientists are talking with the world about their deep passion for science and showing how everything at Pfizer starts with science. Codeflow provided the technical management and implementation, building this site using WordPress platform.

Recent Accolades

moon — Wed, 07 Apr 2010 21:08:04 +0000

Codeflow was pleased to learn that several sites that we helped develop were recently recognized by PRWeek and the DC Ad Club. PRWeek recently named “The More You Know, the Safer Your Money” public sector campaign of the year. This campaign, created by the fine minds at Porter Novelli for the FDIC, included the development of an online deposit insurance web application, EDIE, which was developed in partnership with Codeflow.

The DC Ad Club also recently awarded a Porter Novelli / Codeflow project with a Gold Addy for in the Websites, Consumer Flash, Services category. Again earned on behalf of the FDIC, the award recognized the website EconomicInclusion.gov, for which Codeflow developed many of the site’s interactive features.

EDIE Gets Embedded

moon — Wed, 27 Jan 2010 23:43:05 +0000

For the past several months, Porter Novelli has been working with the FDIC to provide an embedded version of their electronic calculator, EDIE. Codeflow has been involved with this great project from its inception, and has been responsible for much of the concept’s technical implementation. Now banks can easily embed the entire calculator on their webpages with just a small javascript snippet, and further customize the interface with their own theme, including their own colors and logo. The program is still in its pilot phase with a small initial set of banks, but Cardinal Bank has already rolled out an initial version and we think it’s looking great!

Community website for Pfizer Legal Alliance

moon — Sat, 12 Dec 2009 00:33:04 +0000

Working with Widmeyer Communications, Codeflow designed, developed and deployed a community-oriented website for The Pfizer Legal Alliance, a group of 18 law firms and hundreds of attorneys that with Pfizer.

Built on top of WordPress and Buddypress, Codeflow developed a heavily customized theme that provided much of the specific features that Pfizer was looking for, including personalized profile pages, member and firm directories, news feeds, and document publishing and robust content management.

Delivered under an extremely tight development schedule, Codeflow and Widmeyer went from design concepts to a polished and full-featured release within just a few short weeks.

EconomicInclusion.gov launched

moon — Mon, 07 Dec 2009 05:04:47 +0000

Codeflow LLC has just completed the development of a website for Porter Novelli and the FDIC at http://economicinclusion.gov. The site was created to visually present the findings of a new survey conducted by the FDIC measuring unbanked and underbanked households across the U.S.

Working under an incredibly short timeline, Codeflow worked on an agile team to assemble the site, and was responsible for loading all of the FDIC survey data, as well as implementing all of the data presentation/charting elements and associated programming.

The end result came together quite well. Read the press release.