Articles & Tools: Workshops

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.

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!

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!