10up https://10up.com finely crafted websites and tools Sun, 11 Dec 2016 00:58:47 +0000 en-US hourly 1 https://wordpress.org/?v=4.6.1 Speaking at Remote Working Conference 2016 https://10up.com/blog/2016/remote-working-conference/ https://10up.com/blog/2016/remote-working-conference/#respond Mon, 05 Dec 2016 20:43:53 +0000 https://10up.com/?p=18267 Join team 10up (from wherever you are) on Dec 6 and 7 for the 2016 Remote Working Conference. This two-day streaming event focuses on how to succeed in a remote working environment and will dispel the myths around distributed teams.

On Day 1, John Eckman will present “Distributed, not Disconnected: Employee Engagement for Remote Work.” Remote teams carry the stigma of being less connected than their co-located counterparts. John will share techniques and tools to drive engagement in a distributed workplace.

On Day 2, I close the event with my talk “Designing a Better UX Hiring Process.” Vetting UX applicants can be a challenge for remote agencies. Video interviews and online portfolios help, but cannot be the only metrics used to find the best UX design talent. In this talk, I’ll share our strategy for attracting and hiring top UX candidates.

]]>
https://10up.com/blog/2016/remote-working-conference/feed/ 0
WAMU.org launches, powered by React.js and the WordPress REST API https://10up.com/blog/2016/wamu-react-rest-api/ https://10up.com/blog/2016/wamu-react-rest-api/#comments Fri, 02 Dec 2016 23:25:49 +0000 https://10up.com/?p=18220 Yesterday, Washington, D.C. NPR regional affiliate WAMU released a fully reimagined website in partnership with 10up. Designed to elegantly present written and audio content, we engineered a cutting-edge WordPress implementation that leverages React.js and the WordPress REST API to create an immersive single-page app experience. Visitors can listen to audio content using the player bar pinned to the bottom of the screen, without interruption, as they browse the site on a phone, tablet, or desktop browser.

wamu

Other highlights include:

  • Complete homepage and topic page curation using the WordPress Customizer;
  • Attractive ad integrations, including fully native DFP ads embedded within the audio player;
  • API integrations that provide audio and written content from the NPR API and Public Media Platform;
  • Sitewide alerts and calls to action integrated prominently and seamlessly;
  • Progressive rendering, with a fast-loading app “shell” that initially serves page content from WordPress until the React app renders completely.

Check out our project showcase to learn more about this exciting collaboration.

]]>
https://10up.com/blog/2016/wamu-react-rest-api/feed/ 3
10up at WordCamp US https://10up.com/blog/2016/wordcamp-us-2016/ https://10up.com/blog/2016/wordcamp-us-2016/#respond Thu, 01 Dec 2016 18:02:12 +0000 https://10up.com/?p=18190 wcus-2016

Join me, our Director of Platform Experience Helen Hou-Sandí, our Director of Project Management Grant Landram, and many other 10uppers at the second annual WordCamp US, being held once again in Philadelphia.

On Friday night, 10up is co-sponsoring WP Engine’s Bru Craft & Wurst afterparty at the indoor bierhall and wursthaus. Boasting 39 craft beers on tap (and on the house) with plenty of sausage and pretzels to boot, you won’t go to bed hungry.

The next morning, I’ll be presenting WPDrama, The Four Agreements, and the WordPress Community. I’ll show you how to apply the four agreements—be impeccable with your word; don’t take anything personally; don’t make assumptions; always do your best—to the WordPress community, helping us all interact more positively (and productively) with our fellow open source contributors.

]]>
https://10up.com/blog/2016/wordcamp-us-2016/feed/ 0
Adam Silverstein made WordPress core committer https://10up.com/blog/2016/adam-silverstein-wordpress-core-committer/ https://10up.com/blog/2016/adam-silverstein-wordpress-core-committer/#respond Wed, 30 Nov 2016 16:11:39 +0000 https://10up.com/?p=18183 Congratulations to 10up Lead Engineer Adam Silverstein, recently made a WordPress core committer!

With complete access to the WordPress code repository, core committer status is not given out lightly. Through his work on the Revisions UI for WordPress 3.6, leading the recent WP API Backbone client development and many more core JavaScript features, his countless speaking appearances, and his mentorship during WordCamp contributor days, Adam illustrated his dedication to WordPress and the 10up values of openness and community service.

]]>
https://10up.com/blog/2016/adam-silverstein-wordpress-core-committer/feed/ 0
Sixth Annual All Hands Summit: photographic retrospective https://10up.com/blog/2016/sixth-annual-summit/ https://10up.com/blog/2016/sixth-annual-summit/#respond Mon, 28 Nov 2016 16:58:19 +0000 https://10up.com/?p=18106 atl-skyline

Back in September, team 10up gathered in Atlanta from around the globe for four days of knowledge sharing, team building, and face-to-face time. Our days were filled with inspiring, educational presentations from our peers, while the evenings let us kick back and relax with teammates whom we normally only see on our computer screen.

The event began with an in-depth keynote presented by company leadership: our own 10up State of the Union. The keynote was followed by more than a dozen sessions presented by 10uppers who contributed their time and effort to share their knowledge, lessons learned, and perspective. Topics—to name a few—explored:

  • new tools, best practices, and important concepts for engineering, user experience, and design;
  • techniques we can use to delight our clients;
  • lessons learned from projects;
  • the current and future state of content platforms and distribution;
  • ways to support more performant, effective web ads that are more profitable for publishers without sacrificing visitor engagement, and;
  • how to identify and manage impostor syndrome.

jurick-pmodewey-disneysewardakar-lessonswelcher-not-impostor

We also found some time to challenge our pods (10up lingo for our teams) to a scavenger hunt. Each pod was given identical goals and instructed to provide photographic evidence of completion. Two missions generated the most gallery-worthy results.

Take a picture of 10uppers mimicking a statue’s pose. An inordinate number of us chose to mirror the statue of Pierre de Coubertin, founder of the International Olympics Committee, located in Centennial Olympic Park.

statue-grid

Re-enact an Olympic moment in Centennial Olympic Park. Speaking of Centennial Park, this challenge inspired 10uppers to pantomime sprinting, swimming, and podium-posing with gold medals under a bright, blue Atlanta sky.

olympics-grid

To cap off the event, we held our second annual Uppies Awards ceremony, an internal recognition of jobs well done (hosted by yours truly and our president, Jake Goldman). The ceremony culminates with the honoring of three Uplifters: 10uppers who spur on their colleagues with positivity and a can-do spirit.

uppies

It’s a rare treat for a distributed company to share a physical space. Each year, the Summit aims to provide #team10up the opportunity to learn, teach, inspire, and build stronger personal bonds. I’m already looking forward to next year.

team10up
closeup-logo

]]>
https://10up.com/blog/2016/sixth-annual-summit/feed/ 0
Reintroducing Windows Azure Storage for WordPress https://10up.com/blog/2016/windows-azure-storage-wordpress/ https://10up.com/blog/2016/windows-azure-storage-wordpress/#respond Tue, 22 Nov 2016 20:52:22 +0000 https://10up.com/?p=18097 When collaborating with Microsoft, we are often responsible for making WordPress work seamlessly with Microsoft’s own offerings, including their Azure cloud service platform. An ideal Azure hosting configuration leverages Azure Blob Storage to store and deliver uploaded media assets and attachments. Microsoft’s existing, open source solution, Windows Azure Storage for WordPress, had been neglected for years; we stepped up to overhaul the plugin.

The 4.0 release addresses legacy SDK dependencies and features a refactored code base, bringing it in line with our WordPress Best Practices.

What’s new

  • PHP 5.3+ compatibility with support for Version 2015-12-11 of the Microsoft Azure storage service;
  • Replacement of the legacy PHP SDK with WordPress’s HTTP API;
  • More in-process notifications for an improved UX during long operations;
  • Added the ability to browse images uploaded to the Azure blob storage directly inside the WordPress media library;
  • The ability to store files both in the Azure cloud and your WordPress web server simultaneously;
  • New filters to provide developers with more control over the system;
  • Numerous security fixes.

A complete list of changes can be found on GitHub, where you can also post questions and contribute to the project.

]]>
https://10up.com/blog/2016/windows-azure-storage-wordpress/feed/ 0
IAB unveils a new Ad Unit Portfolio https://10up.com/blog/2016/iab-new-ad-portfolio/ https://10up.com/blog/2016/iab-new-ad-portfolio/#respond Mon, 21 Nov 2016 17:30:25 +0000 https://10up.com/?p=18083 new-ad-portfolio

On October 25, the Interactive Advertising Bureau (IAB)—responsible for setting online ad guidelines and best practices—held a webinar to review an ambitious overhaul of its Ad Standards Portfolio.

So why the overhaul?

The new portfolio of ad units aims to address concerning trends, including an increase in the adoption of ad blockers and content delivery platforms like Google AMP and Apple News that limit ad integrations. The IAB has asserted that, as publishers focused on margins and increased automation, their audiences have increasingly encountered invasive interstitials, purposefully-hidden opt-outs, auto-play videos, and recurring-ad fatigue. Sites have grown heavy with extended load times often caused primarily by third-party ad servers and content discovery platforms like Outbrain and Taboola.

“We messed up,” wrote Scott Cunningham, Senior Vice President of Tech and Ad Ops at IAB. “As technologists tasked with delivering content and services to users, we lost track of the user experience.”

Time to get LEAN

IAB’s proposed solution is its new LEAN Ads Program: Lightweight, Encrypted, Ad Choice supported, and Non-invasive. LEAN strives to optimize the reader experience with quicker load times, by limiting the volume of ads, and instituting “frequency capping” on retargeting (ever see an ad for the sneakers you already purchased?).

IAB insists that these principles do not replace current ad standards, instead existing as an alternative that could create more value over time.

“Publishers should have the opportunity to provide rich advertising experiences, LEAN advertising experiences, and subscription services. Or publishers can simply deny their service to users who choose to keep on blocking ads. That is all part of elasticity of consumer tolerance and choice.”—Scott Cunningham, VP of Tech/Ad Ops, IAB

Enter the new Ad Portfolio

IAB’s new Standard Ad Unit Portfolio features multiple, “flexible” ad units designed for responsive web layouts, meaning, they will look their best across display sizes. Display ads, mobile ads, video ads, and native ads auto-size at specific breakpoints.The Portfolio also introduces guidelines for new forms of content, like virtual reality, 360-degree video ads, as well as social messaging ads that use emojis and stickers. In one example, Coca-Cola created an augmented-reality experience around their cans:

Finally, Load Performance guidelines require ads to:

  • Use fewer and lighter weight assets during initial load of the page;
  • Minimize render blocking scripts like CSS and JavaScript during initial load;
  • Delay large file downloads until the viewer interacts with the unit;
  • Defer ads with heavy file weights to a “subload”—preventing the unit from loading heavier assets until the ad requires them.

subload

The IAB provides a “weight chart” in its Portfolio as well, with file size guidance for all industry-standard creative unit sizes and types.

iab-quick-ref

Looking Forward

IAB’s LEAN program offers a promising path for web ads, suggesting a future where advertising can be compelling and interactive, without the heaviness and other annoyances that has spurred consumers to shun them. Consistent with our mission to “make a better web,” we’re eager to help clients take advantage of the new standards and portfolio.

For more information, or to submit public comment ahead of the November 28 cut-off for feedback, you can visit the IAB Ad Unit Portfolio at www.iab.com/newadportfolio/ And of course, if you’re looking for implementation support or consultation, our Audience & Revenue team would love to help.

]]>
https://10up.com/blog/2016/iab-new-ad-portfolio/feed/ 0
Introducing Twenty Sixteen React and NodeifyWP https://10up.com/blog/2016/twenty-sixteen-react-nodeifywp/ https://10up.com/blog/2016/twenty-sixteen-react-nodeifywp/#comments Wed, 16 Nov 2016 20:17:00 +0000 https://10up.com/?p=18071 twentysixteenreact
As web technologies and mobile devices improve and global internet speeds increase, consumers increasingly expect taps and clicks to deliver results nearly instantaneously; the “app-like” experience has become an expectation in web browsers. To this end, we’ve seen huge strides forward in web platforms and frameworks.

Among its most notable relevant advancements, WordPress introduced a JSON REST API, which opens up new, compelling use cases as a framework and content storage engine, such as headless publishing workflows. However, since WordPress runs on PHP, it can’t be used in conjunction with an important breakthrough: isomorphic applications.

Isomorphic web applications run the same code on the server and client (web browser), providing the flexibility, extensibility, and consistency to build the most modern “app-like” experiences on the web. JavaScript and Node.js are used to create isomorphic applications, since JavaScript runs natively in the web browser and is the foundation for server-side Node.js. (Learn more about isomorphic applications.)

Since we can’t run PHP in the web browser, we have a few options for creating JavaScript-powered “app-like” experiences in WordPress.

  1. Create a traditional PHP-based theme with a client side layer that refreshes the DOM using something like Underscore templates and the REST API. This strategy achieves the desired effect, but is a bit forced in that we have to create templates in PHP and separate ones for JavaScript. This is tough to maintain, from a development perspective.
  2. We can discard WordPress’s front-end (PHP-based) theming system completely, and use Node.js and something like Express to serve our front-end, pulling content from WordPress over the REST API. This presents some serious difficulties. External requests for basic data like theme options, menus, and sidebars. Customizer functionality is essentially useless. Previews are very hard to implement. The admin bar is gone. Front-end authentication is problematic. Plugins can’t interact with the front-end. The list goes on and on.
  3. Some hybrid of the first two options.

In pursuit of a better way, we’re introducing NodeifyWP and Twenty Sixteen React (an example theme powered by NodeifyWP), which we’re extremely excited to open source.

NodeifyWP uses PHP to execute Node.js code on the server. This is made possible by V8Js, a PHP extension for Google’s V8 engine. NodeifyWP exposes WordPress hooks, navigation menus, sidebars, posts, and more within server-side JavaScript. We’ve included a simple API for registering additional PHP “tags” within JavaScript. It also includes a REST API for retrieving route information, updated tags, sidebars, menus (and so forth) as the state of your application changes. With NodeifyWP, we can serve a true isomorphic application from within PHP: we get the benefits of WordPress and the benefits of isomorphic Node.js technologies. No separate Node.js/Express server is necessary.

Twenty Sixteen React is a rebuild of a default WordPress theme, Twenty Sixteen, using the following technologies:

By using popular, new Node.js technologies, we think that developers can make first class, “app-like” experiences with the web’s most popular CMS, WordPress.

Because V8Js and Google V8 can be challenging to set up, we’ve included a fully Dockerized environment within Twenty Sixteen React. Using Docker Compose, you can instantly spin up an environment to run Twenty Sixteen React, or develop another theme or plugin with NodeifyWP.

I will be debuting a full demo of NodeifyWP at WordCamp Denpasar on November 19, 2016.

Contributions are welcome, and we’d love to see—and share—any applications you build with this framework.

]]>
https://10up.com/blog/2016/twenty-sixteen-react-nodeifywp/feed/ 13
Going headless https://10up.com/blog/2016/headless-cio-review/ https://10up.com/blog/2016/headless-cio-review/#respond Thu, 03 Nov 2016 18:23:33 +0000 https://10up.com/?p=18033 I recently published an article on CIO Review discussing the benefits and challenges of implementing a headless publishing workflow to better facilitate cross-channel and cross-platform content distribution.

Traditionally, content management systems handled both the management of content (the “backend”) and the presentation of content to audiences (the “front end”). By going headless, content creators decouple site backends from front ends, enabling many different content presentation applications – websites, mobile apps, social or syndication channels, etc – to  consume content managed in a single backend.

Given the benefits laid out in my article, we’re increasingly encouraging 10up clients to consider “going headless” for their next site builds.

]]>
https://10up.com/blog/2016/headless-cio-review/feed/ 0
Refining our message and design https://10up.com/blog/2016/refined-message-website-design/ https://10up.com/blog/2016/refined-message-website-design/#respond Fri, 30 Sep 2016 18:06:25 +0000 https://10up.com/?p=17991 More than two years ago, we overhauled 10up.com to reflect the company we had become. Conceived and built entirely in-house, we strove for an experience and aesthetic that would project the craftsmanship we offer our clients. More than two years later, we think the art direction and architecture has more than withstood the test of time.

Over the last two years, our mission, message, and value proposition has evolved, presenting an opportunity to improve the way we articulate ourselves, in content and design. I’m happy to announce a site wide update that highlights our refreshed mission statement and improves the way we describe #team10up.

We think that our own story becomes most tangible when telling our project stories, so we’ve also taken the time to completely redesign our work portfolio. Our user experience and visual design team worked closely with internal stakeholders and engineers to craft a portfolio that is as visually stunning as it is functional, across screen sizes and device types.

Clarifying our identity

Previously, our story revolved around a slogan-like mission statement: “We make content management easy. Maybe even fun.” The sentiment remains a part of who we are, as we strive to create delightful experiences in a space that so often lacks delight, let alone reliability. Our new “headline” more concisely explains what we offer customers, and more accurately expresses the breadth of our focus and ability.

“We make a better web with finely crafted websites and tools for content creators.”

Our company overview has been similarly updated to better describe our work and value proposition, emphasizing the benefits of our service breadth and commitment to delivery excellence. 10up is taking ownership of making the web a better place for content creators and their consumers.

new-value-prop

Presenting our work in a whole new way

Our reimagined portfolio presents projects in a grid that invites exploration, with subtle interactions designed for devices of all shapes and sizes. Empowered by greater backend editorial control, our designers have art directed visuals that look compelling everywhere they appear.

The new case study design features bold, curated imagery. By adopting a magazine-style two column layout for wider screens, we have reduced scrolling and increased readability without paring down content. A new layout, typography, and image presentation improve flow and support the content, rather than interrupt it.

showcase-design-2

Content is king

With a refreshed message, a new portfolio design, and a handful of other site design improvements behind us, we’re more excited than ever to refocus our attention on content and customer stories.

]]>
https://10up.com/blog/2016/refined-message-website-design/feed/ 0