Category: Development

As part of our development process for web products (websites, landing pages, microsites, web applications), we focus on the two most recent browser versions.

Occasionally, a client will be concerned that their audience uses older technology, and want us to develop backwards several versions. While we are certainly open to accommodating our clients’ needs, there’s a reason we focus on the most recent two versions.

We are UpTrending, which means we are all about all things trending up (see what I did there?). We are committed to innovation and modernity, demonstrated by an enthusiastic, unwavering support of the latest and greatest digital technologies – but that’s not why we ignore IE8.

We don’t support these browser versions simply because they are “new” – we support them because of what they can do for our clients, and what they can do for our clients’ audience. Let me show you why we support the latest two versions of browsers.

Look Forward, Not Back

The main reason we support the latest browsers is because the latest browsers support the latest technology. Old browsers such as IE8 and IE9 don’t support a lot of the animation and CSS functionality that is desired by most clients and their users.

To be frank, nothing is quite as upsetting as developing a beautiful website that collapses on an outdated browser.

These technologies offer a holistic approach to website positioning; these technologies can only enhance your website, not hinder. Optimizing your website for modern browsers will directly influence user experience, and propel your website into the trendsetting realm of exciting modernity. By supporting the most up-to-date technologies, you’ll position your business as cutting edge and forward thinking. You’ll do more than just communicate with your users — you’ll invigorate them.

Follow the Numbers

When deciding on whether to upgrade to the latest technologies, numbers don’t lie. Take a look at your analytics. What are your users using as browsers?

It’s generally a good practice to build your website to accommodate the platforms that your target audience is already using. Google analytics no longer supports IE8 and IE9 because they are so outdated. In fact, they are also no longer supported by Microsoft.

Look at where your users are coming from and do a comparison. Stat Counter is a great resource for wide-scale comparative analytics. It supplies statistics, by country, all about browser use. Do an internal audit, and honestly weigh the cost of optimizing your website for these outdated browsers (and also consider the very low and decreasing percentage of users still using outdated browsers). Then, you can objectively determine whether or not it’s worth the investment.

Show Me the Money

Coding for outdated browsers that don’t support current technologies adds significant cost and time to development as well as design.

Alternative designs may need to be created to work with the lack of support with certain elements or animations. If you choose to optimize your website to support outdated browsers, any time you request a feature or change, you’ll need to be prepared for the additional investment in resources for accommodating those changes.

The Alternative

Our suggestion? Carpe diem. YOLO. Seize the “right now” of digital technology, and encourage your users to do the same.

You can display a message to users with outdated browsers that will prompt them to update. You can even provide them with direct links and resources for these upgrades.

Supporting the latest browser versions is the perfect way to balance budget efficiency with the benefits of the latest technologies. You’ve invested a lot of time, resources, and creativity into your website. Make sure your users can enjoy that full experience you’ve created, in the best, most modern way possible.

One of the things I love most about working at UpTrending is the freedom we are given to explore and implement better practices for processes and skill sets. Better practices make us more productive, so any time an UpTrender can find an area to improve upon, it is greatly encouraged.

I recently evaluated our development asset pipeline and noticed that we might be able to reduce our compile times. We’ve always been a Sass house, so I wanted to explore ways to make that development faster.

The Problem

Having so many talented and experienced developers is awesome, but sometimes, it can actually lead to pain points. On any given project assets were getting compiled, concatenated, minified, and sometimes images compressed, all via different applications or methods based on the developer working the project.

Some people used CodeKit, others Prepros, Compass, or Grunt. All of these methods work, but some didn’t play well with other methods, and some were just downright slow (I’m looking at you, Grunt). Adapting to each different method took time, and adapting the project to a new method sometimes took even longer.

The Solution — Gulp

The hero of this story, the LeBron (GOAT, haters gonna hate) of this story, is Gulp. Using node streams instead of file I/O (like Grunt) means that Gulp can be blazing fast in comparison. After some research, and finding and tweaking two really useful resources, our team has created a Gulp setup that works for us. This setup allows the flexibility we need to get work done now, and make agile changes if we need to later.

Our Setup

Using this blog post, I was able to get a really nice Gulp setup going in minimal time. For our needs (Sass compilation, JavaScript linting, minification, concatenation, and image compression) our setup uses the following gulp plugins:

gulp-concat

gulp-uglify

gulp-jshint

gulp-rename

gulp-notify

gulp-ruby-sass

gulp-autoprefixer

gulp-minify-css

gulp-imagemin

gulp-newer

That sure looks like a lot of plugins, but trust me, this setup is still incredibly fast. It’s also really easy to maintain, thanks to this blog post on splitting Gulp tasks into multiple files in a gulp-tasks directory. This allows for easier clarity and development of large tasks in task specific files.

We’re also currently exploring the concept of add ons. The goal of add ons would be to allow different compilation settings for things like WordPress editor styling and more.

The Result

After implementing this new process, we are now seeing all of our CSS and JS functions taking up a fraction of the time they used to. In some cases, only half as long as similar functions in Grunt or CodeKit.

But speed isn’t just the only benefit of this work – we now have a unified system for building our assets. Every new project that has used this system is ready for a new developer to jump into the project with a simple npm install. Now we can all work faster and easier.

We build a lot of WordPress sites here at UpTrending, so we often get asked about how it compares to other Content Management Systems. Whether it’s Joomla, Drupal, SquareSpace or even a proprietary CMS, companies want to be sure they get the right platform for their largest digital asset.

Why WordPress is the Best

Nine times out of ten a company building a new website should do it in WordPress. There are so many reasons why WordPress squashes the competition, but we’ve chosen to highlight just five.

Ease of use

One of the biggest points in WordPress’ favor is that the admin interface is extremely easy to manage. The key to this ease-of-use is organization. A well-setup theme will separate out custom post types like press releases or white papers from larger static pages. This keeps everything filed in its proper place in a big grey sidebar that’s always accessible for admins.

A good theme will also break out sections of a page into “custom fields” letting users edit the specific content they want without breaking the html structure of the whole page. The Advanced Custom Fields plugin makes these so easy, it would be foolish not to use them!

Menus are also extremely easy to manage in WordPress. With just two clicks in the admin panel, you can be editing menu links and text. You can independently edit your main menu, footer menu, mobile menu or any other menus you have globally on your site. While most other CMS’ allow for menu customization, they often require an extensive tutorial to understand the process.

Popularity

Statistics show that 24% of the web is powered by WordPress. Why does your business care? Simple – more people are familiar with it.

When hiring a new team member to manage the company website, finding someone with WordPress experience is exponentially easier. Most developers also know how to manage a WordPress site’s code. Choosing a development partner with WordPress is easier because almost everyone knows how to work on them.

Customization

With over 39,000 plugins (and counting!) in the official WordPress directory, plus countless themes at your fingertips, WordPress is by far the most flexible CMS to customize. Most custom features requested for company websites can be implemented with a simple plugin that someone else has already written and is giving away for free, or a relatively low cost.

That being said, it is sometimes better to have a developer custom-build these features, because plugins with bad or bloated code can cause issues down the line. It is always good practice to question plugins (and test them) before throwing them into a site.

Community support

The WordPress Codex offers a wealth of knowledge on how to customize and build a solid theme or plugin. There are also many forums that are regularly updated and dedicated to WordPress theme and plugin support. On the rare occasion when a solution can’t be found with a simple Google search, it is easy to drop a question in one of these forums and get answers, sometimes within minutes!

Open source

WordPress is free to use and always will be. This beats getting locked into a payment plan with SquareSpace or Wix where they control the site and never give up ownership of the code.

The Exceptions to the Rule

There are some cases where WordPress is not the best solution. Here are three cases where another option will work out much better in the long run.

Web or mobile apps

Complicated web or mobile apps are not what WordPress was built for. There are cases where these can be achieved with WordPress, but using a more robust framework like Ruby on Rails or Laravel is probably a better option.

Single-use landing pages

Sometimes a single page site is so static it never needs the content updated. In this case it may be faster to build it out as a flat HTML site.

However, implementing WordPress isn’t all that complicated so it may be better to use the CMS for single page sites that do get their content refreshed every so often.

Complex e-commerce sites

WordPress did recently partner with the popular e-commerce plugin WooCommerce. This does allow companies who sell goods online to use WordPress, and it works very well.

However, some enterprise level e-commerce sites are so complicated that it is much less headache to use the popular Magento CMS to manage the online shop. In these cases it is still nice to use WordPress for the marketing side of the company site to get the benefits of both platforms.

Not convinced that WordPress has what it takes to power your company’s website? Check out some examples of our enterprise clients whose sites are built on WordPress.

Everyone knows that content is king, and one of the ways that you can keep your site fresh is to maintain a blog on your website. This is a great way to engage your audience with relative information to your market, news about your company, and even tips and advice on how to use your service or product.

Once you’ve built up some content, your readers may find themselves searching your site for blog posts relevant to them. But we all know that the first result isn’t always exactly what we’re looking for, or perhaps not the only one that we want to read. So I’d like to present a concept we can use with WordPress that will help readers continue traversing through the results their search returns.

Capture the Results

The first thing we want to do is create a function we can use to retrieve the ID’s of the posts that our search returns.
[php]function ut_search_array( $search_hash ) {
// check for existence of unique transient
if ( false === ( $search_array = get_transient( ‘ut_search_’ . $search_hash ) ) ) {
global $wpdb;

$posts = $wpdb->get_results( $GLOBALS[‘wp_query’]->request );

$search_array = array();

if ( false === empty( $posts ) ) {
foreach ( $posts as $post ) {
$search_array[] = $post->ID;
}
}

// save the transient for 10 minutes
set_transient( ‘ut_search_’ . $search_hash, $search_array, MINUTE_IN_SECONDS * 10 );
}

return $search_array;
}[/php]
This function starts out checking to see if a transient unique to this search result exists. If it doesn’t, we create it using a unique string, the `$search_hash`. This function will return an array of post ID’s. Let’s say for our example that the ID’s it returns are 2, 4, 8, 9, and 11.

Store Data in a Session

Next, we’ll need the plugin WP Session Manager. This gives us a simple way to create sessions with WordPress. We’ll store the search string that was entered into the search box, the search hash – a unique string that WordPress creates when a search is performed – and the array of posts ID’s from the function that we created above.
[php]/**
* Set session search_string
*/
function ut_set_search_string() {
global $wp_query;

$wp_session = WP_Session::get_instance();

// if we’re on a search page, save the search data
if ( !is_admin() && is_search() && isset( $wp_query->query_vars_hash ) ) {
$search_string = $wp_query->query[‘s’];
$search_hash = $wp_query->query_vars_hash;
$wp_session[‘search_string’] = $search_string;
$wp_session[‘search_hash’] = $search_hash;
$wp_session[‘search_array’] = ut_search_array( $search_hash );
}
// if we’re anywhere else, clear the search data
if ( !is_admin() && !is_search() && !is_single() && is_main_query() ) {
$wp_session[‘search_string’] =
$wp_session[‘search_hash’] =
$wp_session[‘search_array’] = null;
}
}
add_action( ‘pre_get_posts’, ‘ut_set_search_string’ );[/php]
This is added on ‘pre_get_posts’ and will let us temporarily store data unique to the current user without them having to be a user in the WordPress database. We can now get this data anywhere else on the site. But take note to where the data is destroyed if they are on certain pages.

Find our Place in the Post ID Array

Now we’ll need a function that we can use inside a post to find out where that post is within the post ID array. So for instance, if we’re on post 4, we’re in the second position in the array. That makes the next post 8, and the previous post 2.
[php]/**
* Get the next or previous post in the array
*/
function ut_get_next_search_result( $next = true ) {
$wp_session = WP_Session::get_instance();

// make sure there’s a search saved in the session
if ( isset( $wp_session[‘search_array’] ) === false ) {
return false;
}

// set variables
$next_key = 0;
$search_array = $wp_session[‘search_array’]->toArray();
$current_key = array_search( get_the_ID(), $search_array );

// get next or previous location in the array
if ( $next === true ) {
$next_key = $current_key + 1;

if ( isset( $search_array[$next_key] ) === false ) {
$next_key = 0;
}
} else {
$next_key = $current_key – 1;

if ( isset( $search_array[$next_key] ) === false ) {
end( $search_array );
$next_key = key( $search_array );
}
}

// return value from that location
return $search_array[$next_key];
}[/php]
This function merely returns the next or previous post ID according to where you are within the search results array. It does nothing if there is no search array stored, which would be true had we visited a page outside of the search results as set by our second function.

Create the Next and Previous Post Links

Finally, we can use all of the data we’ve stored and the functions we’ve created to give the user a chance to go backwards or forwards within their search results, instead of between all of the posts on the blog.
[php]<?php
$prev_url = $next_url = false;
// get next and prev search results or just the links
if ( ut_get_next_search_result() ) {
$wp_session = WP_Session::get_instance();
$prev_url = get_permalink( ut_get_next_search_result(
false ) );
$next_url = get_permalink( ut_get_next_search_result() );
} else {
$prev_url = get_previous_post();
$next_url = get_next_post();
}
?>
<div class=”single-nav”>
<a href=”” class=”prev”>Previous</a>
<a href=”” class=”next”>Next</a>
</div>[/php]
This checks to see if a next or previous link exists within the search results. If you’ve arrived on the current post without searching, then it will simply return the chronologically next and previous post links.

There are a few checks and balances I’ve omitted for brevity’s sake, but I hope that you’ll find this technique useful. If you have any questions about using this technique, you can connect with us on LinkedIn, Facebook or Twitter, or check out our work on GitHub.

Price matters.

Sure, we’d like to think that every development project is focused on building the absolute best, most creative, seamless final product…but that’s not entirely true. Ultimately, budgets are finite, which means projects have limitations.

So how do you make sure that your development project still ends up being amazing, when you don’t have bottomless pockets?

After launching hundreds of successful websites and applications, we’ve identified some key ways to maximize your project’s budget and make sure hours are spent on features and content that produces results.

The Right Way

Identify stakeholders and the project lead

Assemble the team, get the band back together, rally the troops…however you do it, knowing who on your team should make final decisions assures that the right questions are asked. Your project team should cover these key areas:

• Marketing – defines key performance indicators
• Content – decides and approves messaging and copy
• Analytics – establishes measurement requirements
• Technical – makes decisions about hosting and security

Making the right decisions with the right people prevents recreating work, or worse, missing key information about your objectives.

Define your goals

The fastest route to a successful project involves having a clear vision of desired traffic, conversion goals, and publishing requirements. Now that we know who’s in charge of these decisions, stating them clearly will keep the process on track from the beginning:

• What constitutes a successful visit? Ex: a sale, download or form contact.
• Who should be able to update what parts of the site? Ex: Resource uploads, job listings.
• Who is your target audience? Ex: CTO looking for info, developer looking for documentation

By starting out with the end in mind, you can avoid costly mid-project pivots.

Prioritize features

You’re now equipped with the team of deciders and a vision of success. The ideas are flowing and the list of wants is growing constantly. The important task of prioritization is at hand:

• What features are most important for your audience?
• What content will drive conversions?

With all of the great ideas developed during the discovery process, it’s important to map out development phases to focus on the most effective choices to launch with. A lean launch will help focus all your efforts on great execution.

Utilize open source tools

With all of this groundwork, your story is bursting at the seams, ready to be told. A good development partner will suggest unique ways to present your story and deliver conversion-focused results. However, there are several facets of a website or application that don’t need to be custom built.

Open source frameworks like WordPress provide a secure, stable base to build on. By relying on code that has been tested and reviewed by thousands of developers, you can avoid spending your development budget on common features like content publishing and user management.

The Wrong Way (aka How to Wreck Projects and Waste Money)

So, now that we know some ways that save time, focus effort and reduce the complexity of development, lets look at some common pitfalls during projects.

Purchasing pre-built templates

With the popularity and ease of use of open source content platforms like WordPress, many commercial template providers have sprung up. These pre-built resources serve to quickly allow novice and inexperienced developers to build a site and they seem to fit alongside the “Utilize open source tools” recommendation. Low-cost, open source…what could go wrong?

Unfortunately, that ease of use ends up costing more in the long run for lower quality results.

For a template to be commercially successful, they attempt to fit the needs of many potential scenarios at once. The features provided by these themes rely on an extremely large assortment of plugins and libraries that can grind site performance to a halt.

Not only that, but when you’re ready to upgrade, expand, or build out custom features, your development partner will spend even more time wrangling the framework or rewriting code to fit your needs.

Cramming content into fewer pages

While planning out your messaging, it’s tempting to drive for fewer pages with more content. Long home pages can be a great way to tell an engaging story, but there’s a limit to how much information should be on a single page.

Single-page content should take into consideration:

• The attention span of your visitors – How much information is relevant to a visitor before they’ll take the next action?
• Actual and perceived load time – A large number of photos, illustrations and videos can reduce the page load speed, driving a higher bounce rate and lowering search engine ranking.
• Reference and linkability – Is important information buried halfway down a page? It may be hard for someone to remember its location or save a link to it.

Failing to launch

Once the design and development process is in motion, it’s easy to get swept up in the excitement. You start seeing new possibilities for engagement, new features and content areas, and pretty soon, we’ve blown the deadline and budget.

Be patient.

Remember that web design never stops. By staying focused on your priority features, you can focus on a successful, well-executed launch. Once you see the impact of your new design and start to measure the results, then you can expand your vision.

Some Final Thoughts

Remember, an ounce of prevention is worth a pound of cure.

Whether you’re building a full website, a microsite or a custom application, a little preparation goes a very long way towards maximizing your budget and ensuring the initial launch is on its way toward achieving its goals.