Articles & Tools: Design & Development

You're reading my blog on the art, business and culture of web site design. After you enjoy the latest articles, check out my portfolio and get in touch to learn how I can make your next web project your best yet.

ExpressionEngine: The Ideal Content Management System for Designers – Video Case Study


In today's video case study, I'll introduce you to ExpressionEngine, the content management system I recommend for the vast majority of my projects. As a partner to designers and creative firms, it's crucial that I work with software that allows us to deliver a pixel-perfect web site and an easy-to-use control panel – something that even non-technical clients or content editors can jump into without a huge learning curve. ExpressionEngine's flexibility, highly customizable back-end and robust, professional development community have made it a huge asset for me and my design partners. 

Check out the video above, then dig in to the article below to learn more.


Choose your developer first

The question of which content management system to recommend for a project is actually a big point of controversy among developers.

Ask 10 programmers to recommend a CMS, and you'll probably hear seven or eight responses about how one software option is "the best" in absolute terms, or how anybody who doesn't use Software X is asking for trouble. The truth is, many goals can be accomplished successfully with many different software options.

There are some types of sites for which I will recommend a system other than ExpressionEngine, and there are many developers out there who've chosen to focus on other systems (and who build great web sites with their software of choice). By the same token, there are bad web developers who'd build a low-quality site regardless of the software they choose.

That's why I encourage my design partners to choose their developer first. Find a person or team who will communicate with you effectively, meet your deadlines and become an integrated part of your team. Find someone who you enjoy working with and who can help you and your clients make decisions that allow you to deliver a great final product.

From there, allow your developer to recommend the system that works best for the goals of each project. Software is secondary to a great relationship.

There are some projects that require content management systems other than ExpressionEngine – for example, perhaps a university wants to build a new site within its current infrastructure, which is based on another CMS. I'll never try to force ExpressionEngine on a client, and I have a large network of partners whom I'll bring on to a project (or refer potential clients to) when appropriate. That said, when we're making the recommendation from a clean slate, there's a host of big advantages to working with ExpressionEngine.


Design Flexibility: Never "work backward" from a theme again

For designers, ExpressionEngine's biggest benefit is the fact that it allows absolute flexibility on the front-end design of your site. If you've worked with other content management systems, you've probably had the experience of being encouraged to "work backward" from a theme, or to make compromises in your design because "the CMS doesn't do it that way." With ExpressionEngine, we totally remove the concept of "themes" from the equation, and you're able to design your site exactly as you want it, without having to factor in the assumptions other systems make about how a site should look or operate.

The result is that we're able to build pixel-perfect pages from your Photoshop or Illustrator designs, then integrate those pages directly into the CMS without making any changes. Rather than pushing assumptions and expectations about how content should appear, ExpressionEngine allows us to drop in the appropriate data in the appropriate spots, staying 100% loyal to your designs.

This saves a huge amount of headache for designers. It can be frustrating and disruptive to get to the development stage of a project and have your developer tell you that the design needs to change to fit in with the assumptions made by the content management software. You shouldn't have to backtrack at that point – especially when the client has already signed off on the designs – and ExpressionEngine gives us the flexibility to precisely match the design you worked hard to create and finalize.

To get a feel for the wide range of designs that can be seamlessly integrated into ExpressionEngine, check out the dozens of EE projects in my portfolio. You'll see that there's no theme, no common set of design standards – my design partners have the freedom to build exactly the site they want.


An easy-to-use, highly customizable control panel

The second big win with ExpressionEngine is its incredibly customizable and easy-to-use back-end – it's so straightforward that even the most non-technical of team members can easily jump in to one of our trainings (which we do via GoToMeeting and provide as a recorded video for future reference) and be comfortable updating the site in less than an hour.

ExpressionEngine's user interface gives content editors a clear visual path to updating the appropriate pieces of content – without the risk that they might break something else in the process. The client will never have to touch code unless we want them to, and we're able to eliminate all the extraneous pieces that are often hanging around in other content management systems, waiting for someone to click the wrong button and mess something up on the public site.

By way of example, check out the screenshot below. This is an image of the "Site Map" page of the ExpressionEngine control panel, which provides a clear visual hierarchy for all the pages and content you'll need to edit. From this simple landing page, you're able to click on any page to edit its content, or click on the "Add or Edit" links next to some of the pages to modify the articles or content items listed on that page. For example, clicking "Add" next to the Newsroom page launches the form that allows you to create news article. It's a super-simple interface that eliminates the complex instructions many content management systems require just to find the content you want to modify.

There are some other great features here, too. For example, if you mouse over a page and drag the page up or down the list, you can automatically change the order of your pages – and this change is immediately reflected on all navigation on the front-end of the site. Likewise, you can quickly add a child page anywhere in the Site Map, making it easy to expand your site with new pages that use the layouts we've already created for other pages.


The ExpressionEngine Site Map Interface (Click to Enlarge)

ExpressionEngine's content editing forms also go above and beyond the typical content management system in terms of their flexibility and customization options. This means that there are no unnecessary fields and no "traps" the client can fall into when editing content. It may sound crazy, but many other content management systems don't allow you to remove unused fields and functionality in the same way EE does, and the end result is the client having far too many options on the screen, only a few of which actually accomplish their goals. That type of overload quickly overwhelms non-technical users – and gets on the nerves of the most seasoned veterans, too.

Check out the first image below, which shows a page editing form for the "About Us" page from the Site Map above. You'll see a handful of fields that are designed specifically for use on the interior pages of the site. The second image, by contrast, shows a form that's specifically designed to handle News Articles – a different type of content that requires a unique form. Many of the field types carry over, which means it's easy to learn how to edit many different content types after you've learned the first one.

However, you'll see that each content type is treated differently, allowing you to access the exact fields and data that needs to be edited – and eliminating everything else.


A custom page editing form (Click to Enlarge)


A separate, custom news editing form (Click to Enlarge)

The screenshots above come from the new site for Denver Health Foundation, which I developed as a partner to Rassman Design.


A self-selected, highly professional development community

The third and final benefit of ExpressionEngine is that it's commercial software based on an open-source framework. This means that we get all the benefits of open-source software – including a well documented and widely adopted code framework and the ability to work with the PHP programming language and MySQL database engine, which are two of the most widely used and supported technologies on the web. You can run ExpressionEngine on just about any typical web hosting service, and developers who work with PHP (including those who may be on your client's internal IT team) can realistically work with the site, even if they're not ExpressionEngine gurus when they start.

ExpressionEngine also adds a commercial, professional component to the picture – because experienced developers know that free open-source software has a price. The fact that anyone and everyone is encouraged to use other free content management systems means you get a development community that's a lot like the "Wild West" – some developers are true professionals, but many are novices or people who have chosen the system because their budgets require them to use something that's free. The challenge for designers and creative firms is that it can be hard to tell the difference, so you'll often run into situations where you download a plugin for your CMS and find that it breaks your whole site because it was poorly designed by a novice programmer.

ExpressionEngine totally eliminates this "Wild West" scenario, because it's created and supported by a commercial company, and every ExpressionEngine project carries with it a small software license fee. The license fee is just a few hundred dollars, and is included as part of the fixed fee for every project we'll work on together, but it creates a powerful barrier to entry for developers. The developers who choose ExpressionEngine almost exclusively work for larger agencies or higher-end development firms, and they have chosen to invest in software that will contribute to the success of their high-value projects.

EE's self-selected, professional development community also encourages its developers to create powerful, well supported third-party add-ons. For example, if you're looking for a really robust calendar or Google Maps addition for your site, you can stand on the shoulders of the high-end programmers who have built similar systems before – and in many cases, they've now turned those software packages into commercial products of their own. When a third-party developer is able to sell high-quality add-ons, it means building great software becomes their job, not just a hobby or side project. This creates a totally different dynamic in terms of the trust we can place in the software, and the fact that add-on software is a commercial enterprise creates motivation and inspiration for third-party developers to do great work and support their customers as they use their software.

Lastly, the high-end, self-selected nature of the ExpressionEngine makes it a smaller and tighter group – but still big enough (and growing fast enough) to support many thriving companies and thousands of expert-level developers. The side effect of a more tight-knit community is that attempts to hack the system are less of a day-to-day concern. ExpressionEngine has an impeccable track record for stability and security, and you won't see a new version getting rushed out every couple weeks to address the latest threat or hack that's been publicized.

The reason for this is that it is simply more profitable for hackers to focus on the widely distributed, freely available content management systems. There are many more sites using those free systems (by virtue of the fact that any novice can use them), and there's a higher likelihood that developers would leave big holes in their implementations when building lower-budget sites on those free systems. The combination of the smaller size and highly professional nature of the EE community means there's simply less time and energy put into breaching the system by the dark side of the hacker community. That's not to say ExpressionEngine is immune from problems, but it has historically been a far more stable and secure system than many alternatives.


ExpressionEngine is a winner – so what's next?

Thanks for taking the time to read today's case study – and if you haven't had a chance to watch the video at the top of this article yet, please take a few minutes to check it out.

Many of my design partners have greatly benefited from having a written knowledge base they can share with their clients on why we recommend ExpressionEngine, and I've created this article to make that knowledge a permanent fixture for everyone to use. Feel free to copy and paste directly from this article into e-mails with your clients, or link them directly to this page if you prefer. And of course, you can pick up the key points that will resonate with each client and integrate them into your phone calls, discussions and proposals.

Finally, I'm always glad to get on a call with you and your clients to help explain our software recommendations and answer any questions they may have. If you're interested in chatting in more detail, please contact me at (720) 708-6590 or rob@howarddc.com. Looking forward to it!


Rob Howard
President, Howard Development & Consulting, LLC


More Case Studies:

Case Study: Designer-friendly e-commerce with Stripe, CartThrob and Shopify

The latest e-commerce solutions allow us to build flexible, powerful sites without costly security overhead.

Adding an e-commerce component to a site can be hugely valuable to your clients – but, as most designers who have delved into e-commerce sites have discovered, creating a secure and user-friendly e-commerce site can be a complex and challenging process. I've searched far and wide to find the most designer-friendly, easy-to-use and reliable e-commerce platforms to make these integrations as easy as possible for you and your clients, and today I'll be detailing three of my favorite solutions for taking payments for products, donations and services on your clients' sites.

Stripe: The answer to e-commerce security woes

One of the biggest challenges of e-commerce is security – traditionally, processing credit cards on a web site requires a lot of additional security procedures that can dramatically increase hosting costs for the client. (Unfortunately, some fly-by-night developers skip over these security requirements, which opens the client up to liability that can be even more costly than an expensive hosting solution.)

In the past, the only alternative to investing in a highly secure, PCI-Compliant hosting environment was to use an off-site payment processor like PayPal. This usually got the job done, but also pushed the user to pages that were off-brand and could be confusing and difficult to navigate. PayPal is also notorious for distracting users with messaging intended to convert your customers into PayPal members, which could create a barrier to completing the purchase as they intended.

Enter Stripe, a new way to securely accept payments via your web site that eliminates the need for costly PCI Compliance and allows us to build beautiful, custom payment forms in a flash. Rather than pushing the user off-site like PayPal and other similar services, Stripe handles all payment processing in the background without ever transmitting sensitive credit card data to your client's web server, which means we can deliver custom payment solutions while Stripe handles all the security heavy-lifting. The best part: it's as easy to sign up for as any simple web service, there are no monthly or recurring fees, and the transaction fees are identical to PayPal.

With a simple Stripe integration, we can build custom donation forms like this one or custom payment forms like this one, both of which I developed as part of recent projects. Beyond those examples, you can check out many more integrations in the Stripe Gallery.

CartThrob and ExpressionEngine: Beefing up your storefront

When you're looking to expand your e-commerce presence to a more traditional storefront, we can also incorporate Stripe into a site developed with the ExpressionEngine content management system and its powerful CartThrob e-commerce add-on. If you've worked with me on an EE project already, you know that ExpressionEngine provides designers with an extraordinary amount of flexibility – it gives you full control over your designs, rather than forcing you to “work backward” from a theme as so many other content management systems do. On top of that, its robust back-end and highly professional development community make ongoing updates a breeze for even the least tech-savvy clients.

An e-commerce site built with ExpressionEngine is no exception. With CartThrob, we can build a fully custom e-commerce site – products organized however you want, viewable however you want – that combines all the great things about EE with an easy-to-manage product creation and order management system in one simple control panel. And since both EE and CartThrob are based on an easily extensible, open-source framework, there's virtually no limit to the customizations we can create to accomplish the unique goals of each client.

Check out an array of example sites at the CartThrob Gallery, and remember – the only limit to the site's design is your imagination.

Shopify: A powerful, out-of-the-box e-commerce solution

If you're looking for a more turn-key solution, a third-party-hosted e-commerce site built on the Shopify platform may be the perfect fit. Like CartThrob, Shopify can also use Stripe as its payment platform (in addition to many other traditional payment processors). Shopify is different in that you're not building your own site from scratch – instead, you're customizing the design and some of the functionality of the Shopify platform to build a site that fits your client's goals.

The plus side of Shopify is that you get a ton of great functionality (not to mention 24/7 support and ongoing updates and feature additions) right out of the box – in other words, we can create a site using one of Shopify's existing themes relatively quickly. The trade-off of this easy start-up is that you have less ability to customize the design and functionality than you would if you built the site using CartThrob. That being said, there are many clients whose sales and design goals are well-suited for Shopify, so it's a great solution that allows you to create a user-friendly e-commerce experience without building a full site from the ground up.

Check out a collection of sites built with Shopify at the Shopify Examples gallery.

Which solution is right for you?

Every project has different goals, requirements and limitations, and it can be tricky to find the perfect software solution without a trusted developer on your side. That's why I'm always happy to help out during the planning stages of your e-commerce projects – just drop me an e-mail or give me a call. We'll talk through your client's needs and objectives, and I'll recommend a solution that will allow you to present them with the ideal software to accomplish their goals.

A Mobile Solution for Every Project

More than 97 percent of our designer partners see mobile optimization as a valuable addition to their web projects, as we learned in a recent survey.

It's no secret that mobile web browsing is explosively popular – and that it's forcing us, as designers and developers, to re-think how users interact with our web sites. Mobile web traffic has increased 69% in North America over the past two years, and now accounts for more than 10% of web surfing worldwide. What's more, most mobile users expect to have just as zippy and convenient an experience on the mobile web that they do on their desktops, which poses a big challenge for designers of modern, mobile-ready sites.

The push for mobile is even bigger for clients in the retail sector: half of all local searches take place on a mobile device. That means that if a client or customer is trying to find your client's store, product or office location and they're not greeted with an easy-to-use mobile experience, they may head elsewhere or, at the very least, have a frustrating experience with your brand. And mobile's not just for those who are on the go: 86% of mobile internet users surf on their mobile devices while watching TV, which means mobile and tablets are quickly replacing desktops and laptops for leisurely web browsing.

We won't even get into the predictions for future growth – needless to say, mobile and tablet browsing are here to stay and growing fast. That's why I've compiled four options for addressing the mobile needs of every project – from a simple mobile “splash page” to an in-depth native mobile application. By recommending the right mobile solution for each of your clients, you can help them future-proof their sites and provide a valuable service to visitors who engage with them through a mobile or tablet device.

Mobile Splash Page or Mini-site

For many clients, a mobile mini-site is an excellent, resource-effective solution to bring their sites into the mobile world. Easily added to an existing site or as part of a larger redesign, mobile mini-sites allow us to get the key facts about a client in front of mobile users without burdening them with long load time or forcing them to squint through tiny text when viewing the desktop version of the site on their phone.

Most mobile mini-sites include a home page and few interior pages, presenting just enough information to give visitors a glimpse at the organization and a way to call, e-mail or visit the client's office or location in person. They can be custom-designed or use one of many simple, proven templates (with custom colors schemes, logos and photos) to streamline the design process. And for clients who just need the bare minimum mobile presence, a mobile splash page gets the job done – that's just a mobile mini-site made up of only one page. If visitors decide to dig deeper, they'll have access to a link that allows them to view the full site and bypass the mobile mini-site.

Separate Mobile Design

For clients who want more of their content to be optimized for mobile devices, we can deliver a separate mobile design, which will include most or all of the content of the original site. This is a bigger project than a mini-site from both a design and development standpoint, but, like the mini-site, can be easily added on to an existing project or baked in to an overall redesign. In this approach, we'll design and develop an entirely new set of page templates to house the site's existing content, and dynamically serve the mobile-optimized templates when we detect that a user is on the mobile device.

The amazing convenience of this method, when coupled with a high-quality content management system like ExpressionEngine or Wordpress, is that it allows the client to manage all their content in one place and have those updates immediately reflected on both the desktop and mobile versions of the site. In essence, we're serving up the same content with a different presentation, allowing us to minimize the resources required for content management while delivering a unique experience tailored specifically to mobile users.

This is also a great option for sites that have a large catalog of content, such as publications or “knowledge center” sites, because it allows for users to share links to individual articles and have the presentation of that article customized depending on whether they click that link on a mobile or desktop device – increasing readership and ensuring a positive experience with every exposure to the brand.

Responsive Mobile Design

The next step up the ladder is building a “responsive” mobile site, which means that rather than building a separate set of templates for the desktop and mobile versions, you're building one set of templates that dynamically re-organizes itself based on the size of the visitor's browser. When you're viewing a responsively designed site, you can even see this in action by resizing your browser window – the page's elements will move around as your window gets smaller, and you'll eventually have a “mobile-sized” page in a very small browser window.

This is the favored approach among the higher-end design and development community because it incorporates relatively new advancements in web coding. And for what it's worth, it's also trendy and cool.

The process for building a responsive design is considerably more involved than building a desktop site (or building a separate desktop and mobile site). Rather than conceiving of two related but separate designs as in a separate mobile template project, the designer and developer must consider how each element on the page will be re-positioned and re-designed as the screen gets smaller, and there are generally between three and six variations designed for each page of the site. This means not only more design work, but also more back-and-forth between the designer and developer during the design process. This often leads to a wonderful final product, but those extra design and development considerations also require more time and resources to be put into the project. It also makes it difficult or impossible to “add” responsive design to a site after the fact – it really needs to be part of the original design rather than something that gets added post-launch.

Like many parts of the design and development work we do, the choice between separate mobile templates and responsive design is all about helping the client find the right balance – and that's a conversation we'll have early on when we embark on our next mobile project together.

Mobile Apps

The final category of mobile development is the big kahuna: native mobile apps. As opposed to a mobile-optimized web site, apps are separate software programs that are downloaded to your phone or tablet and appear on your home screen. They're really a different category of programming from regular web sites, but because many organizations can benefit from integrating their products or services into a native app, the idea of building “an app for that” often comes up during larger branding or design projects.

Apps can be incredibly valuable as a complement to a web site that provides a vast catalog of articles or resources – for example, a publication like The Washington Post or a resource like the Internet Movie Database. It gives users who access the service frequently the opportunity to spend a few minutes downloading the app in exchange for a smoother user experience compared to a mobile-optimized site. (Even compared to the best mobile-optimized sites, a well-designed app is generally faster and easier to use.) Apps are also integral to many businesses that run web-based applications – think Facebook, Twitter, Gmail, or the countless other web-based applications we use every day. They can be cumbersome via the mobile browser, but are much smoother and more feature-rich when accessed via an app.

There's also an opportunity to build apps that complement, rather than directly duplicate, your client's products or services. For example, a personal finance writer might build a “Negotiate It” app that helps his readers reduce their bank fees and get a deal on their cable subscription. These types of apps may have no direct tie to the client's web site itself, but they expand the brand by offering a useful tool or a fun experience within the mobile environment. With this category of apps, the designer or branding team has the freedom to let their imaginations run wild.

While apps have been an incredibly valuable innovation, building one is also generally a big project, which means it's not right for every client or at every stage of an organization's growth. Apps require a big investment of design, development and marketing resources to really be successful, and also need to be maintained across multiple platforms (Apple's iOS and Google's Android, at a minimum) and navigate the sometimes cumbersome process of getting added to or featured in the app stores.

In short, an app can be an amazing boost for a client, but it's not a project to dive into without a clear vision and the proper expectations in terms of the time and resources you'll need to make the app a success.

What's Next?

It's never to soon to start planning mobile solutions for your next design or branding project. Get ahead of the curve by presenting a mobile site with your next proposal, or fill an existing need by delivering high-quality mobile services for a current project. Whether you have a quick question or are embarking on a big new project, please don't hesitate to get in touchI'm always ready to lend a hand!

Case Study: Building a custom web video solution

Creating a custom video solution gives your client flexibility and power that YouTube and Vimeo can't always provide.

For most clients' video requirements, using a third-party service such as YouTube or Vimeo accomplishes the project's goals and saves a lot of legwork. However, for some projects, using a third-party video service isn't an option – for example, if the video sites are blocked by an office firewall. And in some cases, the client is looking for more flexibility, privacy or control than a third-party service can offer.

Over the next few minutes, I'll explain how we can combine flexible hosting, cross-platform-compatible video players and a content management system to build a robust video solution that delivers video quickly, works on both desktop and mobile devices, and gives us the flexibility to meet all the client's goals and needs.

The Video Player

The first component of a robust, custom video project is the player we'll use to display our videos. There are tons of options out there, and one of the best is JW Player. This player allows us to combine the various different video player technologies (including Flash and HTML5) into one package, so much of the work that would normally be required to achieve cross-platform compatibility is done for us. For example, if a user visits your site on an iPhone, which doesn't support Flash, she'll be served the HTML5 video player. On the flip side, if a user visits your site in an old browser that doesn't have HTML5 support, he'll get the Flash player. The JW Player allows you to use one video file and one code snippet to serve playable video to just about any user on any device or browser.

That feature alone makes JW Player stand out, but it's also capable of some pretty fancy “skinning” – changing the design of the player to fit your needs. There are a number of pre-made customizable skins that can be purchased or downloaded, and if you're up for some additional custom design work, you can build your own skin with some basic images and CSS.

Encoding Your Videos

One of the challenges of building a custom video solution is that we can't rely on services like YouTube to “encode” the videos for us – that is, convert them from a format that's viewable in a specific desktop player (like Quicktime or Windows Media Player) to a format that's more widely accessible for users who are visiting your site with many different web browsers and operating systems. This used to be really difficult – and solving the problem of doing it seamlessly is one of the reasons YouTube became such a big hit. Fortunately for us, technology has advanced since then, and there are some good options out there that allow you to convert many typical video types into a format that is ideal for JW Player's cross-platform delivery.

The ideal format for JW Player is MP4 video – it works on the greatest number of browsers and devices, and can be served via Flash or HTML5, all automatically detected and delivered by JW Player. Not all clients will be able to provide video in this format, though, so a tool like Miro Video Converter is crucial for converting whatever format the client provides into the best format for web video delivery. You may also find that the QT Index Swapper comes in handy after converting Quicktime videos to MP4, as sometimes the timing gets out of whack and needs to be fixed using the Index Swapper software.

That's all a bit technical, and may not be something you'd tackle yourself, but your web developer or video provider should be able to make it all happen for you now that the right tools are in their hands.

The Content Management System

Every client will have slightly different requirements for the organization and presentation of their videos, and that's where making it easy to manage that content really pays off. For a project like this, we'll build a custom content type in the CMS we're using for that project – usually ExpressionEngine or Wordpress – that allows the client to change the title, description, categories, thumbnail images, and any other data they want to associate with a particular video. Throw in a drag-and-drop re-ordering system, and managing video is as easy as clicking a few buttons for the client's non-technical team.

We'll then create a content management system template that takes the name of each video – for example “mysite.com/player/my-video-here” and generates an instance of JW Player with all the proper file information inserted automatically. You'll have easy-to-share URLs for each video, and the flexibility to add, edit or delete videos whenever an update is necessary. Best of all, your clients won't have to deal with any code or programming – it's all done automatically behind the scenes.

Fast, Flexible Hosting

The final, and perhaps greatest, hurdle in setting up a custom video solution is determining how to host your videos. The challenge with video is that the file sizes are so huge that even a moderate amount of traffic can really put a dent in the data transfer your normal web host allows you each month. You can certainly host the videos on the same server that hosts your web site – but you are taking a chance that a surge in traffic could cause you to go over your data transfer limits, which can mean a huge overage bill or your site being temporarily suspended by your host. Even if you don't hit your limit, a large amount of video traffic could slow down other parts of your site, worsening the user experience all around.

The solution to the question of flexible video hosting is Amazon S3, a hosting service that allows you to scale up and down based on your moment-by-moment storage and data transfer needs. S3 stands for “simple storage service,” and while the setup can be a bit technical at times, it's truly an excellent solution for hosting video. S3 allows you to upload your video files (the MP4 files we created a few paragraphs back) and serve them to as few or as many visitors as you'd like – all for very low rates and without the risk of slowdown or overage charges.

How cheap is S3? Most clients can run a substantial amount of video traffic for a few bucks per month. Even if you find yourself with a huge surge in traffic, you can be comfortable that your site and videos will remain online and moving at top speed, since Amazon S3 can flex to meet any bandwidth requirements. You'll get a bill each month for exactly the amount of storage and data transfer you used – so you can be comfortable that you're neither overspending nor underdelivering.

There are a number of ways to upload to Amazon S3 – it can even be done through a web site or CMS in some cases. My favorite is Transmit, my Mac FTP client of choice, which has an S3 interface that is identical to the one you're familiar with if you've used FTP. There are a bunch of Windows-based clients out there as well – check out this review for a list of some of the big ones.

One last thing that puts the icing on the cake for S3 – it can be totally white-labeled, so your Amazon S3 server looks just like a subdomain of your site (for example, media.mydomain.com). This adds that extra layer of personalization and white-labeling that many clients are looking for when they invest in a custom video solution, and is a really nice finishing touch. If you're interested in the technical details of how to do this, you can check them out here.

Ready for Launch!

Creating a custom video solution may be more complicated than a quick upload to YouTube – but for many clients, it provides the big pay-off of increased flexibility, customization and white-labeling, making their site appear more powerful and professional. With the combination of the technologies I've outlined here, we can do just about anything you can imagine with web video – and make it fast, easy to update and compatible with just about every device and browser.

I hope you've enjoyed this quick tour of a custom video platform – and that it gets you thinking about all the new technologies and tools you can offer your clients on future projects. If you have any questions, don't hesitate to get in touch – I am always glad to help. Thanks for reading!

3 Steps to Designing a Great Mobile Web Site

Designing a great mobile site is about much more than a smaller screen size.What separates a great mobile web site from more of the same? It's a deep understanding of how mobile users interact with the web – what they're looking for, what makes life easy for them, and how to address their needs as quickly and painlessly as possible. Mobile design is more than just converting a web site for a smaller screen size – it also means revisiting all your site's pages and content to make them as relevant as possible for visitors on the go.

In today's article, I'll walk you through the best practices for choosing content and creating a design for a mobile site, and I'll hook you up with two great resources to get you started on a mobile design today.

Step 1: Deliver the info your mobile visitors need right now

The first question to answer as a mobile designer is what information on-the-go users will most need from your site – and in the case of many businesses, that means the address and contact information need to be at the forefront of your mobile design. While this information might be buried in small text in the footer or on a contact page on the desktop version of the site, it's often the primary reason a user would hit the site on their phone. If you're looking up a restaurant where you'll be meeting friends after work, you probably want the address, cross-streets, phone number or closest metro stop – not a fancy introductory slideshow or detailed PDF of the dinner menu.

Mobile users are looking for the basics, and the design should deliver that information with an understanding of the urgency of many mobile web site visits.

Since so much of the mobile web is centered around finding or contacting people and businesses, there are a few cool tricks built into the operating systems that a mobile-optimized site can take advantage of. Here are a few examples of powerful buttons or links to add to a mobile home page:

  • Call Us – Clicking the button or link launches the phone app directly
  • E-mail us – Launches the e-mail app directly
  • Map It – Launches the maps app directly, with the address of the business pre-populated
  • Make a Reservation – Launches the OpenTable app or web site for restaurant reservations
  • Download a Coupon – Links to a PDF that the user can show on their phone to get a discount

You can even add buttons to send a text message or launch the iPhone App store, if those options make sense with your client's marketing plan. A home page that takes advantage of these items provides a much smoother experience for mobile users, and definitely makes a good impression on these tech-savvy visitors.

Step 2: Streamline your content for the mobile web

Now that we've got a functional home page that highlights the most valuable information, it's time to think about the approach for interior pages. On some sites, such as magazine or article-based sites, it may make sense to duplicate all the site's content in a mobile-friendly format. That way, if a friend e-mails me a link to an article and I view the e-mail on my phone, I'll be redirected to a mobile version of the article without having to jump to a new page or navigate to the same article from the home page. This is great for sites that have a lot of content and a lot of social link sharing.

For many small and medium business sites, though, it might not make sense to duplicate everything word-for-word on the mobile site. Instead, a trimmed-down site could include three or four interior pages that highlight the key talking points for the business, perhaps even with copy that is written with the shorter attention span and fast pace of a mobile user in mind. These pages can be written and designed with the goal of initiating an immediate phone call or e-mail from the potential customer, especially since we know they are literally a click away from calling for more information.

When a user visits a regular page's URL in a mobile browser, we can redirect them automatically to the mobile version of that page – and optimize that page's content for the mobile experience.

Every site will be different, but the key takeaway is this: for sites that are very content-heavy, make sure not to allow your users to get lost just because they're viewing the article on a mobile device. And for less frequently updated or content-rich sites, optimize your content and copy to provide for a quick mobile read, and then push the user to your desired “call to action,” whether that's a call, e-mail or in-person visit.

Step 3: Dig in to the technical details

Now that we understand the big design and organization concepts behind the creation of a mobile site, let's spend some time on the nitty-gritty of the technical side of things. The first and most obvious change you'll need to make in your design is the size – the mobile screen is much smaller than your desktop or laptop monitor. That means that rather than building sites that are up to 980 pixels wide, you're working with just 320 pixels (that's the narrowest dimension for an iPhone-optimized site). This will change a lot of your design techniques, but you can still maintain the same look and feel while providing an optimized mobile experience.

Remember to keep buttons and links large and easily touchable – just think about all the times you've accidentally pressed the wrong button or dialed the wrong number because your thumbs were just a little too big. Also keep in mind that “hover” states of items, such as links, will not be as easily accessed (if they can be seen at all) on mobile devices, and consider removing those from your designs. There are lots of fancy JavaScript tools that allow you to simulate iPhone screen transitions on your site (so the page neatly slides from right to left, for example), but for starters, build a simple, clear and stripped-down version of the design, and make sure the most important content is easily accessible for those of us with oversized thumbs.

One of the big drawbacks of iPhone development (and something that iPhone's competitors are racing to beat them on) is the fact that Flash is not supported in any way. Most designers and developers are moving away from Flash as a presentation tool, but it's still an important part of web video, audio and other media. If you want to include these types of media on the mobile site, you'll need to use an HTML 5 player. This will work with the most newer mobile browsers and provide your users with a streamlined experience so they're not running into Flash errors or getting pushed out to other applications to watch video. The process for setting up HTML 5 video is a bit different than Flash, but still something that we can easily integrate into a mobile site.

One last thing: Even though it's generally better for a user on a smartphone to see the mobile-optimized version of a site, there are exceptions to every rule. For that reason, it's good practice to include a “view full site” link at the bottom of your mobile site, allowing a user who wants or needs the content on the desktop version of the site to get there even after being redirected to the mobile site.

What about the iPad?

While you don't need to redesign your whole site for a tablet, there are a few things to watch out for.We've covered smartphones, but that brings up another question: what about the mobile phone's bigger cousin, the tablet (and, most commonly, the iPad)? In most cases, it's not necessary to display the mobile version of a site on the iPad – because the screen is larger, the regular version of the site will do just fine. What's more, many iPad users will be accessing your site with less urgency than phone users – they're just as likely to be sitting on their couch at home than trying to look up your address while flagging down a cab.

The exception is with sites that use a lot of advanced JavaScript – Gmail and many other Google applications are a good example. In these cases, the advanced scripts might crash or otherwise mess up the iPad or tablet's browser, so the development team has created a streamlined tablet version of the site. This is also a good place to consider any functionality that might require the “hover” effect – again, it won't be readily available on a tablet (or, if it is, it will be much less helpful in terms of the user experience). If you have big parts of your site that are hover-centric, it might be valuable to redesign those specifically for tablet users.

What's next?

If you've got a client who would benefit from a mobile version of their site, it's a great way to add value to a project and help your clients make life easier for their mobile customers. Attractive, easy-to-use mobile sites can be both a valuable addition to your client's marketing strategy and a way to build prestige and goodwill among tech-savvy and mobile customers. They're also easy and fun to design, develop and play with after they're online.

If you're looking for some design material, check out this great collection of mobile icon sets – it will get you designing with big fingers in mind in no time. And for even more inspiration, check out CSSiPhone, a site that compiles some of the best iPhone-optimized designs from around the web.

And, as always, if you have any questions on best practices on mobile design or development, don't hesitate to get in touch! I'm always available and ready to rock on your next great project.

Thanks for being a part of the Howard Development & Consulting community!

Engage visitors and boost traffic with Facebook’s social plugins

Social Marketing is notoriously difficult – but Facebook's new social plugins make engaging with visitors a breeze.

You've seen it all before: an enthusiastic client pours hours into a Facebook page without seeing tangible results. They get discouraged and stop updating, leaving their pages to become little more than ghost towns – not exactly the image they're hoping to convey to potential customers.

Designers, developers and marketers have longed for a way to better engage visitors on social networks – and not long ago, Facebook unveiled a solution.

The leading social network's new batch of plugins allow users to interact with Facebook friends on external web sites, making it easier for businesses to get their visitors involved in their social campaigns. Hundreds of thousands of companies have rolled these plugins out on their sites, with amazing results:

The Washington Post and ABC News saw 250+ percent increases in traffic from Facebook just a few months after adding their plugins.

And it's not just for big media companies – the plugins are a simple and valuable addition to any site, and a great way to help your client kick-start their social media campaigns.

In the next five minutes, I'll show you:

  • How social plugins are dramatically boosting word-of-mouth traffic for all types of companies, from travel agencies to The Washington Post
  • Why these plugins are different, and how they create genuine interaction between visitors and goodwill toward a brand
  • How you can start integrating these techniques on your web site today

With these new social plugins, a Facebook presence that used to be a ghost town can become a bustling metropolis of mutual interests that spur status updates, wall posts and shared links about these newly Facebook-enabled brands. Here's how it all began:

Connecting with friends outside of Facebook

In the past, a company's interaction with Facebook users was confined to the Facebook.com site – you could create a page or an app, but all interaction with a brand was contained within that app. Lots of pages and apps gained popularity, but for each successful one there were thousands that went unnoticed by their target market.

The new plugins, revealed last year and rapidly gaining steam ever since, allow Facebook friends to interact on external web sites – removing the barrier of finding an app, figuring out how to use it and (at best) remembering to use it again.

Most importantly, visitors can see what their Facebook friends are doing on connected sites without even having to log in – creating huge opportunities for networking, sharing and cozying up to a brand.

When Facebook announced these features, they stirred up some privacy concerns, but as the Facebook account has become more ubiquitous and major brands have further embraced social networking as an integral part of their web sites, those concerns have faded and the value of the social plugins has shone through.

Let's take a look at examples of some of my favorites, starting with the Recommendations plugin that has made me an even bigger fan of my favorite sites.

Automatic social proof with "Recommendations"

The Recommendations box is an unassuming plugin that you'll find on newspapers, magazines and content-driven sites – and it's also one of the best pieces of social promotion ever to hit the web.

This plugin, pictured below in a screenshot from WashingtonPost.com, compiles a list of articles that your Facebook friends have recently “liked” or shared – encouraging you not only to check out the stories, but also to engage with your friends to discuss what they've read. On top of that, all the action inspires you to share your own favorite articles so you show up in your friends' feeds.


The Recommendations box on WashingtonPost.com,
showing my friends' latest activity on the site

The Recommendations plugin creates an incredibly strong feeling of social proof: if my friends get their news from The Post or their laughs from The Onion, it must be the right place for me too. Every item in the recommendations list is a testimonial for that site from a trusted friend. What marketer could wish for more?

The plugin turns every reader into a potential promoter, because those shares and “likes” are getting posted to their Facebook accounts, where hundreds of their friends will have a chance to see the article they enjoyed. As an article gets more popular in a circle of friends, it also gets more likely to appear on other people's feeds, creating a positive feedback loop that means more traffic and more engagement. The stats speak for themselves:

The Washington Post's traffic from Facebook increased 280% just a few months after installing the Recommendations plugin.

The Recommendations plugin creates the sense that you're not just on a web site, but also in a coffee shop where you can chat, interact and share with like-minded friends.

The influence of Facebook's social plugins expands far beyond content-driven, article-based sites. Let's take a look at how smaller sites can catch the new on-site social wave.

The tiny, powerful "Like" button

The Facebook social plugins aren't just for sites generating lots of new content every week – there are plenty of options for more-static sites to make their brands “stickier” with a Facebook connection. The simplest and most common is the “Like” button. It may be tiny, but it packs a real punch in terms of engagement with a brand.

The key benefit of the “Like” button is that it's an alternative to soliciting a newsletter or RSS subscription from a user. By clicking this button, a visitor subscribes to the company's Facebook page, allowing future publications to land on that user's Facebook news feed.

Clicking the "Like" button is a very casual action with very powerful results.

Let's look at some real world examples. While traveling in South America this year, I “liked” a few companies via the buttons on their sites. Here's how each kept me in the loop:

  • Alerting me of promotions and deals: Buenos Aires Delivery popped up on my news feed to let me know that sushi deliveries were 20% off – and of course I jumped on the deal.
  • Providing useful and enjoyable content: Vamos Spanish Academy posts weekly language-learning tips – and I always recommend them to friends since they are always top-of-mind. 
  • Whetting my appetite for more: Gate 1 Travel posts promotions and pictures of their many destinations – and it always sucks me in to daydreaming about my next trip.

The “Like” button allows a brand to communicate with a user while they're in their comfort zone – casually checking the news feed, seeing what friends are up to, and now seeing what their favorite brands are up to as well. A single “like” can make a brand a permanent fixture in a visitor's social world.

The “Like” button and its many cousins (check out the Share, Like Box and Comments plugins for more) are fast and effective ways to add social engagement to a web site. If you're in the market for something even more powerful and have the means to do some additional development, you'll like what's next.

The fully integrated Facebook experience

Some of my favorite Facebook experiences don't take place on the Facebook site at all. Instead, they connect me with friends on external sites that I never would have considered part of my social network.

Exhibit A is TripAdvisor – a site that provides reviews of hotels and travel destinations. I've used the site for years, and one day a new social feature caught my eye: TripAdvisor knew that a Facebook friend had recently reviewed the same hotel I was researching! It gave me an opportunity not only to see (and chuckle at) his review, but also to reach out to him if I had questions or wanted to share my own experience.

Again, I got the feeling that TripAdvisor was cool (and trustworthy) because my friends are using it – and the fact that my friends use the same site adds even more value to the overall experience.


Surprise! My friend has already visited the same city, and
TripAdvisor shows me his review front-and-center.

TripAdvisor also takes it to the next level and allows me to use my Facebook account as my TripAdvisor account, eliminating the need for me to maintain a separate password for a relatively low-priority site and hooking me up with even more cool social features.

My favorite is the social travel map, which allows me to post places I've been and see all the places my friends have posted themselves. It endears me to the TripAdvisor brand and keeps me on the site for much longer than I'd otherwise stay.


My Facebook friends have logged their travels on TripAdvisor,
making for a fun and useful social travel map.

The same concept has been applied to thousands of other sites – for another example, check out Rotten Tomatoes, a movie review site that proudly connects me with 182 friends who have read reviews or opined on their favorite flicks. I even used my Facebook account to connect with a site called Push Ups Logger – and when I accomplish my 100-push-up challenge (four weeks left!), I'll be able to instantly post that to my Facebook wall.

You can connect just about any web site or content management system to Facebook in this way.

Wordpress and ExpressionEngine have add-ons that allow users to connect their web site accounts to their Facebook accounts, just like in the examples above. Throw a little more development into the mix, and the possibilities are nearly limitless.

How to get connected today

Among the host of options we've covered here, there's an excellent Facebook plugin for just about every client and every marketing goal.

How can you get started implementing these simple and powerful new plugins onto your clients' web sites? Head to the Facebook Social Plugins developer page, where you can generate code for all the plugins. In many cases, the copy-and-paste code will automatically recognize the URL of your site, allowing you to add a Recommendations box or "Like" button with very little customization or technical knowledge.

Social media has always been trendy – but with Facebook's new, powerful and easy-to-integrate plugins, it's simpler than ever to add genuine social networking value to your clients' sites.

Give it a shot today by adding a social plugin to your site with just a few clicks. And if you have any questions, let me know – I'm always glad to help!

I hope you've enjoyed this article, and I'd love to hear your questions and ideas. Get in touch by phone or e-mail any time. Enjoy your new social connections!

The Designer’s Guide to E-Commerce

For most clients who need to accept payments online, a full-fledged e-commerce solution is overkill – and it adds a lot of new costs and potential security issues to your project. The good news: there are some great solutions for small and medium-size clients who need e-commerce that are reasonably priced and take the big security concerns off our hands.

In this 18-minute audio consulting session, I discuss the five solutions I use to help designers avoid the biggest pitfall of e-commerce: trying to build your own Amazon.com. I also addressed this question in my recent Designer Q&A Workshop -- check out the recap and audio, which also includes discussion of SEO and social marketing.



Download
(Right click and "Save as...")

Summary: 

  • PayPal (4 minutes): We recommend this for clients who need a safe and simple way to accept payments from their visitors, but who don't need a full-featured shopping cart. PayPal is a free and flexible solution that you can use to sell products, subscriptions, memberships and more. Like all these solutions, the actual credit card processing takes place on a third-party server, so we don't have to worry about security. The drawbacks: there can be a bit of a barrier to entry on the checkout pages, because PayPal encourages (or in some cases forces) your visitors to create an account.
  • 1ShoppingCart and E-Junkie (9 minutes): These solutions take it a step further, allowing you to provide lots of products, recurring payments, affiliate programs and more through simple links to their hosted checkout pages. They take the security and administration of e-commerce off our hands, and are a popular choice for selling digital products like e-books and subscriptions, though they work for physical products too. They come with a small monthly fee attached, and you can hook them up to PayPal or your own credit card processing merchant account.
  • Shopify and Volusion (13:15): These hosted shopping cart solutions are full-featured online stores, so they're a great choice for clients who really do need to replicate the features you'd find on a site like Amazon. They are the most robust of the options here, and they still save us from the security liabilities and costs of hosting our own e-commerce site.

SEO for Designers: Q&A Recap

Last week we had a great Designer Q&A Workshop, where we talked about search engine optimization, e-commerce and social marketing, as well as some tips for building and expanding the business of graphic design firms and solo professionals. Thanks so much to Karl at Graphic Beans, Ziv at Vizualle, and the whole team at Orange Element for being a part of the call!

The full audio and recap is below. If you're interested in attending the next free teleseminar, sign up here and I'll let you know when we schedule the next call.

Download MP3 (27 MB - Right click, save link as...)

Search Engine Optimization (Start of MP3)

Question: How do I set a client's expectations for an SEO project?

  • Search engine optimization isn't about a magic bullet or quick fix. It's one element of a strong marketing campaign, and when we do SEO, we work through a client's business model to find their most valuable customers and figure out the most cost-effective way to target them onilne.
  • Remember: SEO isn't about "beating Google," it's about truly answering the questions that Google searchers are asking. That means building great content and positioning your content so it's easy to find.
  • I divide SEO into three phases: development, analysis and outreach. The development phase is all about optimizing the code on your site -- making sure your pages are clean, clear and easily indexable, and making sure you have an XML site map and other tools in place so that Google can easily browse all your pages.
  • In the analysis phase, we dig into the best keywords to target with your site. I recommend finding keywords that are popular, but not highly competitive -- you would avoid something general like "bookstores" or "restaurants", and instead go for something less competitive but still frequenty searched, such as "thai restaurants in dupont circle".
  • The outreach phase is all about creating valuable content and sharing it on authoritative sites. Google measures value by how many sites link to you, and how valuable those sites are. So it makes sense to reach out to big sites (and create relevant, legitimate directory listings) to build your list of authoritative links.

Question: Should I worry about content management systems when it comes to SEO?

If you're working with ExpressionEngine, Wordpress or Drupal, there are plenty of offerings and lots of things you can do to ensure your site is optimized. Since the projects we work on generally don't rely purely on "themes", it's more about what your developer works best with and what makes the most sense for the other content requirements on your site. In my experience, a well-developed site on all of those platforms can be very SEO-friendly.

Question: What's a realistic time-frame in which my client will start seeing "results"?

If you just do a development project, you'll see that your site is more clearly and properly indexed the next time Google spiders it (within a few weeks). When you find some effective keywords and re-write key pages to optimize for those, you should start seeing some movement within a few months. The real traffic boost comes from the outreach phase, where you'll be simultaneously building authority from links on other web sites and getting direct traffic from those authority-building articles. The SEO results of that may take some time to kick in, but the traffic boost from links on high-value web sites will be immediate.

Question: Among my clients, who are the best prospects for an SEO campaign?

Everyone can benefit from a well-executed SEO project, but the types of clients who I think see the biggest value are those with a specific, high-value customer group. For example, if a graphic design firms knows that every major client they sign in a certain industry will generate $10,000 in revenue each year, it makes perfect business sense to spend money on an SEO campaign that could bring in 5 or 6 more clients like that in the next year. On the flip side, if you're not selling a product or service or your site isn't effectively turning your prospects into customers, you might want to step back and work on the business model before spending money on SEO.

E-Commerce (Starting at 34:40)

The biggest mistake in e-commerce development: trying to build your own Amazon.com. For most projects, the client doesn't need anything close to a full-fledged retail store. Building one unnecessarily -- and hosting it yourself -- introduces tons of unnecessary development costs and security liability for you and your client. Instead, try a third-party hosted solution like PayPal, 1ShoppingCart, E-Junkie, Volusion and Shopify. For all the details, check out my Designer's Guide to E-Commerce.

Social Marketing (Starting at 48:35)

The key to effective Twitter and Facebook outreach for small businesses: use social media to keep in touch with your current customers. Everyone has a parade of social icons on their site these days, but in my experience, they're rarely an effective way to bring in new customers who have never encountered your brand. Instead, social networks are an awesome way to keep your current customers engaged. Offer coupons, make advance event announcements, and give people real value from keeping in touch with you through these social services. Check out my in-depth article on getting a return on your social marketing investment.

Boosting Your Business (Starting at 54:15)

A few months back, I mentioned The Wealthy Freelancer as an awesome resource for solo professionals and small business owners looking to hone their business and bring in new customers. In this month's Q&A session, I recommended Book Yourself Solid, an awesome book (with lots of offshoot products) on defining your service, marketing your business and delivering true value to your clients.


Thanks so much for checking out the Q&A Workshop! If you enjoyed it, attend the next session or send me some questions of your own. Thanks for being a part of the Howard Development & Consulting community!