Articles & Tools: Design & Development

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 touch – I'm always ready to lend a hand!

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!

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?

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!

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.

• Generate the "Like" button code
• Generate a "Recommendations" box

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!

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.

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.

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.

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!

I've recently worked with a number of my clients to pitch the ExpressionEngine content management system -- it's by far my favorite, and it has earned a great reputation that is spreading fast. One of my favorite things is its commercial, professional nature: like many products, putting it behind a small pay wall dramatically improves the quality of both the software and the development community that has grown around it.

The fact that EE is already a commercial product also opens the door for third-party developers to build high-quality add-ons -- and make some extra dough in the process, allowing them to offer better support and better software. Here's a list of my favorite commercial EE add-ons, which are the icing on the cake for the thousands of smaller open-source contributions that make the CMS great. There's a price tag on each, but they pay for themselves every time.

Structure

The Structure module allows you to build a simple, flexible site hierarchy, making it easy to share templates across multiple pages. It also makes the control panel editing process leaps and bounds easier for the client to understand: they just see a site map, click on the title of the page, and make any changes they desire. It's not perfect for every site or content type, but for a lot of sites, it makes content management a breeze.

Wygwam

Speaking of editing content, the Wygwam extension hooks EE users up with the best what-you-see-is-what-you-get editor I've encountered so far... and I do a lot of content editing. It integrates seamlessly with EE's upload directories, allows you to create as many different toolbar combos as you need, and works with FieldFrame Matrix, allowing you to create more complex custom fields and more flexible content.

User

For sites that need more complex user signup and management, the User module frees you to build custom templates for all your member-related forms. By default, a lot of these forms are stuck in the somewhat rigid default EE templates (in the 1.x versions, at least), so this really frees you up to build a member interface to your unique needs. Also check out Tag, Rating, Favorites and many more from the same developer, Solspace.

Playa

Perhaps the most sexily named of the EE add-ons, Playa adds some promiscuity to your ExpressionEngine content. Built by the same prolific developer as Wygwam and FF Matrix, it allows you to create robust relationships between your blogs and content types, complete with AJAX filters and search options to ensure that your clients can pinpoint just the right content on a larger site. Although I build a lot of sites that don't need this functionality, this plugin has been my salvation on more complex jobs.

There are tons more great add-ons out there, too. Check out the EE Forums and Devot-EE for a vast database of options -- or just Google "ExpressionEngine" + whatever you need to do. There's something out there for just about everything.

In other news, don't miss my first published extension, Control Panel Home Page Redirect. What are your favorite ExpressionEngine add-ons?

I'm excited to release my first ExpressionEngine extension, the Control Panel Home Page Redirect. I've always found the EE control panel home page largely useless and confusing for my clients, and usually the first thing in my instructions is sending them to a certain tab -- often the one for the Structure module, but sometimes the publish or edit pages as well.

This extension allows you to redirect the home page to the control panel page of your choice, so your users will see exactly what you want them to see upon logging in (or clicking the CP Home link in the header). The settings work just like those of the "New Tab" page - type in the querystring of the control panel page you want to redirect to, save your settings, and you're done!

DOWNLOAD

• Download hdc_cp_home_redirect.zip, version 1.0 (updated Feb 21, 2010)

INSTALLATION

• Intended for use with ExpressionEngine 1.6.8.
• Unzip the downloaded file, then upload the included files to your system folder. The final paths should be /system/extensions/ext.hdc_cp_home_redirect.php and /system/language/english/lang.hdc_cp_home_redirect.php.
• In your control panel, navigate to Admin > Utilities > Extensions. Activate the extension, and click the "Settings" link to set up your redirect.
• Enter the querystring of the page to which you'd like to redirect your CP home page. This usually likes like "C=modules&M=Structure", or something in a similar format. If you need help with this, go to the desired page, click the "New Tab" link in the top right, and copy the value you see in the "New Tab URL" field.

QUESTIONS AND SUPPORT

• Hit up the ExpressionEngine forum thread for this extension for support, questions or suggestions.
• Looking forward to lots of new features and plenty more extensions to come!

--

Don't forget to check out the rest of my blog, and hit up my full portfolio site for expert ExpressionEngine development and consulting services. Enjoy!