At Urban Influence today, I launched a new project for Redfin – The Redfin Real-Time Blog.
A mobile-first, super custom WordPress build, Real-Time is a magazine-style news site that employs clean and simple UI patterns, focused on long-form content, usability and engagement.
About Redfin
Redfin is a tech-minded real estate brokerage, on a mission to reinvent real estate in the consumer’s favor. Real-Time supports that mission by serving as a one stop shop for all aspects of home owning, selling, nesting, and beyond. Covering real estate on Wall street, main street, and your street, the Real-Time team employs boots-on-the-ground reporting and insightful market research to offer up meaningful and entertaining stories.
The Low Down
They had the content, the authors, the engagement… but project lead Christin Camacho (Lifestyle Public Relations and Editorial Content Manager at Redfin) knew it was time to step it up. Her team came to us looking to set Real-Time on the path to rival any large-scale news site.
Taking an inventory of their existing content and merging this with the site’s long-term goals, we established a hierarchical outline of parent and child categories that dictated the site’s overall structure. By breaking everything down into logical modules, we crafted a home page consisting of parent category previews, and parent category index pages featuring their own subcategory previews.
The UX supports this architecture with clearly defined category units, a featured posts hero, custom ad blocks, and a variety of Redfin-oriented CTA elements. Clean and consistent UI furthers these objectives via well-defined typographic rhythm, and fluid, proportional layouts that keep things looking fresh from mobile to largest desktop.
Features and Authorship
Front-end UI is just one piece in developing a large-scale blog or news site. Equally important is authorship. We developed a highly customized WordPress build chalked-full of native features to support authors in their efforts, while still keeping everything lean and mean.
Features include a custom ad builder, post layout builders, featured image sliders, custom toolbars, improved video handling, and code-free management of all non-post content. But, let’s not forget performance. All those category feeds can add up to a boat-load of database queries, which can prove more than problematic on such a high traffic site.
To deal with this concern, I wrote a modular get_posts function using a simple counter to deliver different display templates without increasing queries.
/**
* Modular Get Posts Function
*
* @param string $post_cat = (‘category-nicename’ or null for all posts)
* @param int $num_posts = number of posts to show
* @example redfin_get_posts(‘category-name’, 7) or jumpoff_get_posts(null, 7)
* @return $posts
*/
function redfin_get_posts($post_cat, $num_posts){
global $post ;
$args = array(
‘posts_per_page’ => $num_posts,
‘category_name’ => $post_cat,
);
$counter = 1;
$posts = get_posts( $args );
foreach ( $posts as $post ) : setup_postdata( $post );
if ($counter == 1) {
// Get the cat featured template for first post
get_template_part( ‘partials/content/content’, ‘category-featured’ );
} else {
// Get micro cat template for remaining
get_template_part( ‘partials/content/content’, ‘category-micro’ );
}
$counter++;
endforeach;
wp_reset_postdata();
return $posts;
}
Stay Tuned
We really enjoyed working with Redfin team on this project, and we’re excited the watch the site continue to grow. Stay tuned for a more detailed case study.