Group items tagged

Agile content development is best executed by a partner that has strategy, production, and analytics under one roof, combining what agencies traditionally do best with what production companies traditionally do best.

When strategy, creative, and production teams can sit side by side and collaborate fluidly, agile content is the by-product.

A perfect example of this is Red Bull, which has even gone a step further to combine brand, agency, and production company into one. No one would argue that they are not one of the most successful agile content marketers on the planet.

The most important part of setting your brand’s agile content strategy is having a clear idea of why your brand is creating content to begin with.

Next, your responsibility is to make sure that the content you’re creating is meeting your brand’s overall objectives. Your selected content partner should be responsible for making sure the content you create is something that your target consumer actually wants to see.

Once your brand’s content strategy is set, it should be seen as a living framework that should evolve over time. Recognize that your brand and content both live in a dynamic world that changes constantly.

focus around content and avoid the pitfalls that certain aspects of websites can create.

In the latter block, each division might have a different class name or perhaps different additional classes applied. This allows for greater flexibility in rearranging them in the layout. In the first block of code, the three content divisions will always reside inside their parent container.

With CSS, we have the ability to rearrange blocks inside a container. We don’t have the ability to break content out of one container and move it inside another container. If you want more mixing of blocks, then you’ll need fewer containers.

there are currently far more instances of websites that are dropping columns wholesale

Every element is its own unique block and serves as its own container. The page’s main heading is its own contained block. All of the meta information is inside another container directly below it. After that, every paragraph, subheading and image is also its own self-contained block of content. The same goes for anything else that might end up in a post, such as a block quote or code block.

a challenge to how we think about structuring our HTML, particularly to how we use containers. Elements can’t move from one container to the next. We can fake it with complex CSS, or we can rewrite the HTML with JavaScript; but, ultimately, if we want to intermix elements, we’re best of using fewer HTML containers to create columns. Instead, we should leave more of our content blocks in their own containers and use CSS to create virtual columns in the layout. This solution doesn’t confine our elements to structural containers and instead enables us to more easily rearrange the elements in different layouts.

When people say"page load time" for a website, they usually mean one of two measurements: "document complete" time or "fully rendered" time. Think of document complete time as the time it takes a page to load before you can start clicking or entering data. All the content might not be there yet, but you can interact with the page. Think of fully rendered time as the time it takes to download and display all images, advertisements, and analytic trackers. This is all the "background stuff" you see fill in as you're scrolling through a page.

Since Google was not clear on what page load time means, we examined both the effects of both document complete and fully rendered on search rankings. However our biggest surprise came from the lack of correlation of two key metrics! We expected, if anything, these 2 metrics would clearly have an impact on search ranking. However, our data shows no clear correlation between document complete or fully rendered times with search engine rank, as you can see in the graph below:

With no correlation between search ranking and what is traditionally thought of a "page load time" we expanded our search to the Time to First Byte (TTFB). This metric captures how long it takes your browser to receive the first byte of a response from a web server when you request a particular URL. In other words, this metric encompasses the network latency of sending your request to the web server, the amount of time the web server spent processing and generating a response, and amount of time it took to send the first byte of that response back from the server to your browser.

The TTFB result was surprising in a clear correlation was identified between decreasing search rank and increasing time to first byte. Sites that have a lower TTFB respond faster and have higher search result rankings than slower sites with a higher TTFB. Of all the data we captured, the TTFB metric had the strongest correlation effect, implying a high likelihood of some level of influence on search ranking.

The surprising result here was with the the median size of each web page, in bytes, relative to the search ranking position. By "page size," we mean all of the bytes that were downloaded to fully render the page, including all the images, ads, third party widgets, and fonts. When we graphed the median page size for each search rank position, we found a counterintuitive correlation of decreasing page size to decreasing page rank, with an anomalous dip in the top 3 ranks.

We suspect over time, though, that page rendering time will also factor into rankings due to the high indication of the importance of user experience.

our data shows there is a correlation between lower time-to-first-byte (TTFB) metrics and higher search engine rankings. Websites with servers and back-end infrastructure that could quickly deliver web content had a higher search ranking than those that were slower. This means that, despite conventional wisdom, it is back-end website performance and not front-end website performance that directly impacts a website's search engine ranking.

Our data shows there is no correlation between "page load time" (either document complete or fully rendered) and ranking on Google's search results page. This is true not only for generic searches (one or two keywords) but also for "long tail" searches (4 or 5 keywords) as well. We did not see websites with faster page load times ranking higher than websites with slower page load times in any consistent fashion. If Page Load Time is a factor in search engine rankings, it is being lost in the noise of other factors. We had hoped to see some correlation especially for generic one- or two-word queries. Our belief was that the high competition for generic searches would make smaller factors like page speed stand out more.

TTFB is affected by 3 factors: The network latency between a visitor and the server. How heavily loaded the web server is. How quickly the website's back end can generate the content.

Websites can lower network latency by utilizing Content Distribution Networks (CDNs). CDNs can quickly deliver content to all visitors, often regardless of geographic location, in a greatly accelerated manner.

Do these websites rank highly because they have better back-end infrastructure than other sites? Or do they need better back-end infrastructure to handle the load of ALREADY being ranked higher? While both are possible, our conclusion is that sites with faster back ends receive a higher rank, and not the other way around.

The back-end performance of a website directly impacts search engine ranking. The back end includes the web servers, their network connections, the use of CDNs, and the back-end application and database servers. Website owners should explore ways to improve their TTFB. This includes using CDNs, optimizing your application code, optimizing database queries, and ensuring you have fast and responsive web servers.

Fast websites have more visitors, who visit more pages, for longer period of times, who come back more often, and are more likely to purchase products or click ads. In short, faster websites make users happy, and happy users promote your website through linking and sharing. All of these things contribute to improving search engine rankings.

Fluid layouts are often compared to water, but water isn’t always fluid. H2O has three different states, and depending on the temperature can be a solid, liquid, or gas, transitioning seamlessly from one to another at specific points (0ºC, 100ºC). An infinite grid also has multiple states (single column, multi-column, etc.), and should transition as seamlessly as possible between them at specific breakpoints as well. For example, just as ice is an appropriate state for water when the temperature is low, a single-column layout may be the appropriate state for an infinite grid on smaller devices. Water’s state change is caused by the rearrangement of its molecules. When an infinite grid changes state, we rearrange its components.

Each state in a responsive layout tends to be made up of the same components, such as an image gallery or navigation menu. However, as Ethan Marcotte recently outlined, the form these components take can vary dramatically between one state and another, usually involving a change in one or more of the following attributes: Hierarchy: What’s its order and prominence in the layout? Density: How much detail do you show? Interaction: Should it be a list of links or a dropdown? A carousel or a group of images? Width: Is it fixed (a specific width), flexible (set with max-width), or fractional (set with percentages)?

Pixels size an element relative to a particular resolution Ems size an element relative to its font size; large rems size it relative to the document’s base font size Percentages size an element relative to its container VH and VW units size an element relative to the viewport

Absolute units like pixels effectively give a layout a sell-by date, locking it to a finite resolution range in which it will “work.” Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step on the road to resolution independence.

lets say my largest state is 75em wide (any larger and the white space starts to dwarf the content), and my smallest is 34em (any smaller and the measure is less than optimal). In the largest state it makes sense for my navigation to be a horizontal list (interaction) at the top (hierarchy), but in the smallest state it might make more sense to move it to the bottom of the layout (hierarchy), or collapse it into a show/hide list (interaction). Designing these independently of one another helps you be more objective about what is best for each state, rather than stretching a one-size-fits-all solution across every state.

Just like water changes to steam when its molecules get too far apart, one state should change to another when the relationships between its components begin to break down, such as when the measure is getting too wide, or the left-aligned logo is getting so far from the right-aligned menu that the visual connection between them is broken.

The number of states you require will depend on how much your layout changes from one extreme to the other. For example, my smallest state has a single column with a collapsed menu, and my largest state has three columns and an expanded menu. However neither state looks quite right between 34em and 53em, so I’ve added an “in-between” state which maintains the smallest state’s single column article, but expands the menu and divides the footer into three columns to make the most of the space available. This smooths out the transition from one extreme to another quite nicely.

With each state change, remember to reconsider the hierarchy, density, interaction, and width of each component

the goal is to make the most of the space available, relative to your content, to maximize readability and presentation.

Designing for our readers requires us to understand the information that they will find useful and relevant and then shape that content into a beautiful experience.

Where does this ultimately lead? We’re not there yet, but I suspect it’s predictive modeling, with internal social and content opportunity routing based on artificial intelligence and enterprise knowledge mapping. If we know the specific areas of expertise of each employee and can store that in a relational database, and we can also know via presence detection who is online and/or what their historical response times have been, we can use natural language processing (a la Netbase) to proactively triage and assign social interactions to the best possible resource in the organization.

When you hover over a menu item, a submenu appears. But apart from hovering over an item, you can also simply click on it to follow the link. Now, what should happen when you tap on the item with a touch device? Should the submenus appear, or should the link activate? Or both? Or should something else happen? On iOS, something else happens. The first time you tap a link like that, the submenu appears; in other words, the hover event fires. You have to tap a second time to actually follow the link. This is confusing, and not many people will tap a second time. On Android, the submenu appears and the link is followed simultaneously. I don’t have to explain to you that this is confusing.

It’s very well possible to think of complex solutions11 whereby you define different interactions for different input devices. But the better solution, I think, is to make sure that the default interaction, the activate event, just works for everybody. If you really need to, you could choose to enhance this default experience for certain users.

The same principle that we follow for interactions — whereby we design the activate event first and enhance it later — applies to graphic design. We should start designing the things that we know everyone will see. That’s the content. No matter how big or small a screen is and no matter how minimal the feature set of a browser, it will be able to show letters.

rather than pollute the page with all kinds of links to get people out of there, we should really focus on that thing in the middle. Make sure it works. Make sure it looks good. Make sure it’s readable.

you start by designing the relationship between the different font sizes.

When the typography is done, you would start designing the layout for bigger screens; you can think of this as an enhancement for people with bigger screens. And after that, when the different layouts are done, you could add the paint. And by paint, I mean color, gradients, borders, etc.

When I say to start with typography, I don’t mean that you aren’t allowed to think about paint at the same time. Rather, I’m trying to find the things that all of these different devices, with all of their different screen sizes and all of their different features, have in common. It just seems logical to first design this shared core thoroughly. The strange thing is that this core is often overlooked: Web professionals tend to view their own creations with top-of-the-line devices with up-to-date browsers. They see only the enhancements. The shared core with the basic experience is often invisible.

All of the things we created first — the navigation, the widgets, the footer — they all helped the visitor to leave the page. But the visitor probably wanted to be there! That was weird.

To build a responsive website that works on all kinds of screens, designing for a small screen first is easiest. It forces you to focus on what’s really important: if it doesn’t fit in this small square, it is probably not terribly important. It forces you to think better about hierarchy, about the right order of components on the page.

Once you’re done with the content, you can start to ask yourself whether this content needs a header. Or a logo. Or subnavigation. Does it need navigation at all? And does it really need all of those widgets? The answer to that last question is “No.” I’ve never understood what those widgets are for. I have never seen a useful widget. I have never seen a widget that’s better than white space.

does the logo really need to be at the top16 of every page? It could very well go in the footer on many websites

the option to add extra luggage to a flight booking might be most effective right there in the overview of the flight, instead of in the middle of a list of links somewhere on the left of the page.

does the main navigation look more important than the main content? Most of the time it shouldn’t be, and I usually consider the navigation to be footer content.

I propose we use cultural variables to show the appropriate content for specific groups of users in the same way that we use media queries to show content according to viewports or breakpoints.

Slow Messaging cultures are more easygoing about the speed at which messages and information travel. Fast Messaging cultures demand that information travels quickly and efficiently.

High Power Distance societies tolerate a high level of authority in their leaders, and their orders are often unquestioned. Symbols of this power are important. On the other hand, Low Power Distance societies have bosses that are much closer to their employees in power levels, and instructions can be debated or challenged.

How do we make our fellow humans comfortable with our interfaces and site? Start using cultural queries in our designs.

Instagram may be great for some brands, but not a fit for others, as its audience is largely young and female. Over 90 percent of the 150 million people on Instagram are under the age of 35. And of Instagram's 150 million monthly active users, more than 60 percent live outside of the United States. Omnicom and Instagram must also be careful not to oversaturate the audience with ads or the audience will flee. On a site that is largely based on photo sharing, with no firm editorial context, it will be a challenge to ensure the ads fit into the context of the user’s feed and be relevant. Even if it is beautiful and not disruptive, if it is not providing value, it will not be effective.

As far as best practices, the group found that 76% of content that was shared had a photo attached, and 18% had a video as part of the message. As a whole, tweets sent between 2 and 5pm PST generated the most response.

Share stories visually with photos and videos to grab users’ attention: Posts with photos receive 50 percent more likes.

Page targeting enables page admins to publish stories into the News Feeds of audiences who are going to be most interested in the content, without inundating those who may not.

Use engaging thumbnails for link stories: Links with thumbnails received 65 percent more likes and 50 percent more comments.

Vary your post type — users don’t engage the same way with every post: Mix it up between status updates, links, polls, and photos.

Optimize your page for Graph Search and mobile: Ensure that your page description is complete and up-to-date, which will help its performance in Graph Search results, and pin posts to ensure that users see the most important stories on both desktop and mobile.

Bluegg studio manager Rob Mills reckons 2013 will see a “further step in the direction of storytelling and personality on the web, achieved through a greater focus on content and an increase in the use of illustration”.

Apps remain big business, but some publishers continue to edge to HTML5. Redweb head of innovation David Burton reckons a larger backlash is brewing: “The gold rush is over, and there’s unrest in that apps aren’t all they promised to be. We now live in a just-in-time culture, where Google can answer anything at the drop of a hat, and we no longer need to know the answers. The app model works the old way. Do we need apps for every brand we interact with? Will we even have iPhones in five years’ time? Who knows? But one thing is certain – the internet will remain, and the clever money is on making web apps that work across all platforms, present and future.”

Designer/developer Dan Eden says that with “more companies focussing web efforts on mobile,” designers will feel the pressure to brush up on the subject, to the point that in 2013, “designing for desktop might be considered legacy support”. Rowley agrees projects will increasingly “focus on mobile-first regarding design, form, usability and functionality”, and Chris Lake, Econsultancy director of product development, explains this will impact on interaction, with web designers exploring natural user interface design (fingers, not cursors) and utilising gestures.

We’re increasingly comfortable using products that aren’t finished. It’s become acceptable to launch a work-in-progress, which is faster to market and simpler to build – and then improve it, add features, and keep people’s attention. It’s a model that works well, especially during recession. As we head into 2013, this beta model of releasing and publicly tweaking could become increasingly prevalent.“

“The detail matters, and can be the difference between a good experience and a great experience.” Garrett adds we’ll also see a “trend towards not looking CMS-like”, through clients demanding a site run a specific CMS but that it not look like other sites using the system.

“SWD is a methodology for designing websites capable of being displayed on screens with both low and high pixel densities. Like RWD, it’s a collection of ideas, techniques, and web standards.”

Humans, like the mice in Skinner’s box, crave predictability and struggle to find patterns, even when none exist. Variability is the brain’s cognitive nemesis and our minds make deduction of cause and effect a priority over other functions like self-control and moderation.

Recent neuroscience has revealed that our dopamine system works not to provide us with rewards for our efforts, but to keep us searching by inducing a semi-stressful response we call desire.

Email, for example, is addictive because it provides all three reward types at random intervals. First, we have a social obligation to answer our emails (the tribe). We are also conditioned to know that an email may tell us information about a potential business opportunity (the hunt). And finally, our email seems to call for us to complete the task of removing the unopened item notification in a sort of challenge to gain control over it (the self). Interestingly, these motivations go away as soon as we’ve actually opened all our emails and the mystery disappears. We’re addicted to checking email while there is still variability of reward and once that’s gone, emails languish in our inboxes.

We’re meant to be part of a tribe so our brains seek out rewards that make us feel accepted, important, attractive, and included.

But as sociable as we are, our individual need for sustenance is even more crucial. The need to acquire physical things, such as food and supplies, is part of the brain’s operating system and we clearly wouldn’t have survived the millennia without this impulse. But where we once hunted for food, today we hunt for deals and information. The same compulsion that kept us searching for food coerces us to open emails from Groupon and Appsumo. New shopping startups make the hunt for products entertaining by introducing variability to what the user may find next. Pinterest and Wanelo keep users searching with an endless supply of eye candy, a trove of dopamine flooding desirables. To see an example of how the hunt for information engages users, look no further then the right side of this page. There, you will find a listing of popular posts. Using intriguing images and short, attention-grabbing text, the list is a variable reward mechanism designed to keep you hunting for your next discovery.

We also seek mastery of the world around us. Game mechanics, found everywhere from Zynga games to business productivity apps like to-do lists, provide a variable rewards system built around our need to control, dominate, and complete challenges. Slaying new messages in your inbox stimulates neurons similar to those stimulated by playing StarCraft.

Variable rewards come in three types and involve the persistent pursuit of: rewards of the tribe, rewards of the hunt, and rewards of the self.

As B.F. Skinner discovered over 50 years ago, variable rewards are a powerful inducement to creating compulsions.

The move represents Facebook's latest push to eliminate “low quality” posts from users’ news feeds. In August, the company announced a similar algorithm update to encourage the managers of Facebook pages to post less junky material and to provide users with better-targeted updates.

The key to creating hyper-timely emails is planning and being nimble, says Christopher Stemborowski, associate communication strategist for marketing agency Oxford Communications. “Seeming timely can be the result of preparing multiple emails or just one email and waiting for the right time to send it.”

Build multiple versions ahead of key events: In the same way that shirts are made ahead of the Super Bowl declaring each team the champion, you can design two versions of an email to respond quickly to the outcome of major events.Plan an email for an event that has an unspecified date: Snowstorms will happen each winter. Will you have an email ready to go out the moment it happens? With a little planning, you can.Track trending online memes: In 2011, we have seen a #winning Charlie Sheen and a really excited Rebecca Black ready to have fun, fun, fun. Smart brands can tap into these memes in email blasts. You can keep track of these popular memes by viewing the trending topics section on Twitter.

Blasting irrelevant content to your email subscribers is one of the biggest email marketing mistakes you can commit.“For example, if a salon sends an email to men that highlights services solely for women, it shouldn’t be a shock when the men unsubscribe,” Stemborowski says. “To avoid this, the salon needs to know who in its database are males and who are females and then avoid sending irrelevant messages.”

“Self-selection means subscribers willingly receive emails that are in the categories they asked to get,” Stemborowski said, adding that it’s vital to keep the screening short so users don’t abandon the process.

More than ever, people are reading emails on their mobile devices. Mobile email usage increased 36% in 2010, according to comScore.

The first line of your email should never read, “If you are having trouble reading this email click here,” he adds. “Remember, the first line of the email is what shows up as the preview on smartphones. For this reason, the first line is premium real estate and, with this in mind, you should put your most important message first for a well-crafted call to action.”