Use these super-simple but astoundingly powerful tips and techniques to bump your mobile sites from mediocre to magnificent.

1. Speed up rendering by harnessing the GPU.
Mobile devices have very powerful gpu processors, but they’re only used by mobile browsers if there’s an animation-esque style(s) to trigger them. Toss -webkit-transform: translateZ(0); in your css to make it happen
via html5rocks.com

2. Scale images in the browser.
By default, images will stay fixed to their original size. With a tiny little css we can tell the major browsers to scale these images in relation to their container with max-width:100%;.

3. Fix safari landscape to portrait resize bug.
Sometimes safari fails to scale correctly when rotating from portrait->landscape->portrait. That’s bogus. Update your meta viewport tag with the fix via stackoverflow:
<meta name = “viewport” content = “user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width”>
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
via stackoverflow.com

4. Put Content first
Switch the order of content and navigation using display declarations:
@media screen and (min-width: 30em) {
body {
display: table;
caption-side: top;
}
[role="navigation"] {
display: table-caption;
}
}
via adactio.com/journal/4780/

5. fix page navigation
empty a tags <a href=”#”> won’t moving pages to the top of the page like they do on desktops. If you have pages with long content, help folks jump around wiht a little js
$('#jump-to-top').click(function(e) {
window.scrollTo(0,0);
e.preventDefault();
});
$('#skip-to-bottom').click(function(e) {
bottom = $(document).height();
window.scrollTo(0,bottom);
e.preventDefault();
});

Mobile detection: When people visit your main website there should be a script that checks if they are using a mobile browser. If so, they should be redirected to your mobile site.

Ability to switch from mobile to full site: Unless you are confident that your mobile site completely replicates the functionality and content of your desktop site, there should be a link on your mobile site to switch back to your desktop site. You should also be aware that people may be sharing the URL of your mobile site’s pages to social networks, and people on desktop computers may then click on those links. If warranted by your traffic, you may want to consider having a script on your mobile site that sends desktop users to your primary site.

Button size: The buttons on your mobile site should be uniform in shape and color, and stand out from the rest of the content on the page. You’ll want buttons to be large enough for people to hit easily, generally at least 30 x 30 pixels.

Easily clickable links: Ease of use in clicking is important with text links as well. If two links are placed near each other (either horizontally or vertically), there should be enough space between them to not make accidental selections.

Non-hover based navigation: Many websites use hover menus, but these won’t work on most mobile devices.  If your standard website doesn’t have an easy way to navigate to subpages, outside of a hover-based menu, that is a significant reason by itself to start thinking about designing a mobile version of your site.

Minimalist approach to form input: Entering information is much more difficult on a mobile device, so reduce the fields required to a bare minimum. You can always ask them for more information when they get back to their desktop. In addition, wherever possible, user should be offered the choice to select from options, rather than being required to type out response. You can also leverage mobile phone’s personalization capabilities to automatically fill in personal information. Predictive text suggestions for open text fields can also help minimize the amount of typing required.

Form usability: Many of the best practices of desktop site design become even more important on a mobile form. For example, all checkboxes and radio buttons should allow users to select the text labels next to them, rather than only allowing people to click on the button / box. For more advice, take a look at these articles on mobile form design from Luke W, Smashing Magazine, and UX Booth.

Large images containing text: If you have a large image, be aware that it will be sized down significantly on a mobile device, and any text contained within it may no longer be readable (think infographics, for example)… or will require a lot of zooming and panning! Images should be designed to resize without breaking.

Links to files:  If there are links to files on the website, those files shouldn’t be essential to any primary user tasks. (An example of this is downloading and filling in a word document registration form that needs to be emailed in.) File types should be clearly indicated near the file download links, as well as an indication of file size (especially for larger files).

Flash:

We’ve helped a lot of nonprofits set up their mobile sites, so if your nonprofit is considering adding a mobile site, feel free to contact us.

User Agent Switching: Some browsers, such as Safari (on the PC), allow you to switch user agents to an iPhone or iPad. This tells the website that you’re browsing from that device, and it sends you the version of the website that it would normally send to that device. This is an imperfect emulation, however, since the dimensions of your computer monitor probably differ somewhat from  an iPhone. (If not, it’s probably time to switch to a new monitor).

Emulator Software: We often use BrowserCam, which will allow you to do a screenshot of many mobile browsers. The software isn’t perfect, however. It doesn’t allow you to use authentication for example, and other inconsistencies from the mobile version may appear from time to time. It is, however, one of the best options available right now.

Specific device testing: There’s a good iPhone tester available, as well as Blackberry emulators to mimic individual phones. Be aware that the Blackberry emulators are very large downloads.

In the end, you really do need to test on mobile itself. Testing in an emulator means you’re using a keyboard and a mouse. So you may know what things look like, but you won’t know what will happen if you tap versus mouse-click, swipe, or whether or not your text is too small for medium sized fingers.

The map is not the territory

To really test, you need the devices themselves to see how they are going to respond.  Emulators are great for layout and design testing, but not great for testing how devices will respond to device detection (server side), media queries (client side), and of course any interaction with the hardware (besides gesturing and typing, think click to call or click to email functionality for now on mobile web sites – though the list will grow as new approaches are established for leveraging mobile hardware from websites).

Determine which browsers to focus on

As with any kind of testing, you should come up with a target browser/device list based on your site analytics. Most mobile sites will focused more on Safari/iOS and Android phones, as that is the devices used for browsing on most US based sites. You shouldn’t lose sight of Blackberry and Windows mobile, however, and perhaps even Nokia if you have a more international reach.

Beaconfire used Mobify to create the Zoo’s mobile site.  The free Mobify service allows us to pull live content from the site, present it in a way that is specifically optimized and designed for mobile users, and create HTML templates that are only served to those users.

The result?  We create a fully dynamic site using content from the CMS-managed desktop version and deliver it in a highly usable format for mobile devices.

The Mobify version of the site has been streamlined to provide the most useful information for people on-the-go but still includes a link to the full site for those who want a deeper dive into the information.

So, who’s up for watching the penguin feeding at 3:30?

AP Style Guide Drops the Hyphen from Email

Finally! It is perfect timing too because Beaconfire has just switched over to using the AP Style Guide with the launch of our refreshed logo and website. Before this announcement, there was an internal staff debate whether we could all handle the shift to using “e-mail”. Now we don’t have to decide.

Oxford English Dictionary Features OMG and LOL

Just announced this month, the Oxford English Dictionary Online has decided to include noteworthy initialisms OMG and LOL. Already on the list are IMHO (‘in my humble opinion’), TMI (‘too much information’), and BFF (‘best friends forever’).

Web and Mobile Marketing

Key Tips for Mobile Web Design Strategy
Mobile websites are becoming more common as businesses and organizations realize that a growing number of people access the internet over their smartphone. Microsoft Tag predicts that mobile usage will overtake desktop usage by 2014.

With that in mind, perhaps you’re an organization who already has a website, but wants to engage more users through mobile, or you’re creating a totally new website and starting fresh. In that case, you need to consider implications for a mobile website from the start. Check out Mashable’s 10 Key Considerations for Your Mobile Web Design Strategy.

Google Analytics Rolls Out New Dashboard

Google will be launching a new Analytics in the near future, and to get things started they’ve begun rolling out the newly designed dashboard to select users. The new dashboard will be customizable with user-selected widgets and give you the ability to have more than one dashboard in order to track multiple initiatives.

Color Mobile Photo App Takes Social Interaction to a New Level

New App Alert – Color, made by Color Labs, allows you take pictures and then share them with people within 100 feet of you. Keep in mind that the sharing of these new photos takes place with anyone in that 100 foot radius who is also using Color. For example, we tested in our office today and saw some shots of another business’ team meeting, including white board notations. Just keep in mind that if you’re going to use Color, you may want to be selective about the photos you take. The app is available for iPhone and Android.

There are a variety of ways that you can detect mobile devices and tailor the website experience for them – and that’s a post for another time.  Regardless of how you decide to proceed there is one overarching theme that informs many of the decisions that need to be made: “what do mobile users want?”

Your existing site is most likely made up of a bunch of different sections, pages, calendars, slideshows, videos, promotions, articles, and other miscellaneous widgets.  Do mobile users want or need all of them?  Do you want to deliver all of those elements to your mobile users?  Why or why not?

Simply because of the space available on a mobile device, you may want to turn off, or at least reposition left and right columns, leaving the main content area as your primary mobile experience.  You may want to deactivate calendars that are two big for the display.   Many features (flash, for instance) do not play nice with some web browsers installed on common mobile devices so there’s certainly a technical component to your decisions, but beyond that there is the question of how mobile visitors are using the site and what they (and you) want them to experience that may be different from someone sitting at home.

I recently heard someone talking about a mobile experience of a restaurant website and saying something along the lines of “mobile users only want two things: directions and the menu.”  Pretty simple then, yes?  Just deliver those two pieces of the content and be done with it.  But that’s a pretty big assumption to make.  Especially as people start to move to their mobile device being the primary way that they experience the web.  If I’m out on the town looking for a place to chow down (I have kids now, but I remember what it was like to be out on the town), I may want to know more about your restaurant than just how to get there and whether you have any vegetarian options.  I might also want to know if I’m dressed appropriately.  Photos of your dining room would be great!

Likewise, with your organization’s mobile site: I may not be simply looking for a way to donate (though that may be your primary interest).  Perhaps I want to know more about what you do.  Don’t assume I’m not interested in your programs, staff, or history.  Much of the time I spend browsing sites on my smartphone is when I’m stuck somewhere in line, or in a waiting room.  I’m bored, and when I’m bored I’m far more likely to browse aimlessly around a site than I am when I’m in front of a computer working.  Unless your navigation is awful, in which case I’ll find another site to look at.

Regardless, it is often decided that, in the interest of streamlining the mobile experience, we will reduce the scope of the site for those visitors.  Which demands that we ask: “If it’s not important for your mobile visitors to get parts of your site, why is it important for anyone else?”  If you decide that an entire section of your site should be removed from the mobile experience because you don’t think mobile users will be interested, or you don’t want to distract them from the goal you have for them, then why would you assume that those same people will be interested when the visit using their computer?

There are those who recommend designing a site primarily for the mobile experience rather than the other way around.  The “Mobile First” argument goes that if you force yourself to design to a restricted viewport you separate the wheat from the chaff.  It’s a tempting vision: your sprawling organizational website reduced to only that which directly serves your mission and is intended to elicit immediate action from your visitors.  If you are interested in learning more about the thoughts around designing for mobile first, check out some of these articles from Luke Wroblewski, former Chief Design Architect at Yahoo! and general usability smarty-pants:

http://www.lukew.com/ff/entry.asp?933

http://www.lukew.com/ff/entry.asp?1117

So what’s the answer?  As with nearly anything you can ask about Web design and user experience: it depends.  In some cases you will absolutely be able to determine that mobile users want something different from your site than users sitting at a computer.  Or at least that you want to deliver a different experience to them.  Take it as it comes, but just remember that your assumptions about what people want will nearly always be wrong unless you ask them.

That is why I was a little disappointed at the lack of sessions on the mobile web at NTC. There were a few sessions on mobile fundraising, but they seemed to primarily focus on using SMS.

There seems to be a lot of interest in the non-profit world on creating mobile-enabled web sites and applications. Hopefully, next year, that interest will manifest itself in a few sessions demonstrating some great non-profit work.

For me, not much has changed (although my phone does text). But now that I saw the ubiquity of Smart Phones at NTC, I’m ready for a change. I was jealous at all the Blackberries, iPhones, and Androids. Poor little old me – I had to do all my note-taking and email-checking on my big, bulky laptop! When it’s time to renew my mobile contract on June, you can be sure I’ll be asking about a data plan.

My favorite Smart Phone display of might occurred on Thursday night, as our very own Michael (Android) and Cara (iPhone), raced to see who could look up the address for a restaurant (Six Feet Under – Primo shrimp tacos!) and make a reservation faster. And the winner…Android! However, once we were in the taxi cab to the restaurant, the Android couldn’t hold a candle to the iPhone — which gave us excellent directions.

Cara and Michael battle it out for Oysters Rockefeller

A recent study by PEW found that more than roughly 6 in 10 American cell phone users text message. It’s no wonder that everyone from Presidential campaigns to police officers to WalMart to nonprofit causes (highlighted by MobileActive.org) seek to leverage the popularity of text messaging.

1. The mobile audience is wide and deep: Worldwide, more people have access to and use of mobile phones than the Internet. As Ethan Zuckerman of TechSoup points out, “The only technology that compares to the mobile phone in terms of pervasiveness and accessibility in the developing world is the radio.” Given the penetration, personalization and simplicity of mobile devices, there is no better tool to reach both wealthy individuals and underserved populations. In addition, you can activate young, tech savvy people using the communications channel that makes the most sense to them.
2. Simple is superior: I may be biased given my blog style is list format, but people like byte-sized – and actionable – information. In an information economy, it’s easy to be overwhelmed with the breadth of accessible knowledge. Communicating with individuals via the limited 160 characters in a text message requires the messenger to cut the window dressing and deliver messages that are simple, clear and clever to make an impact. To educate and motivate, it’s all about the words themselves (which is great since haikus are so cool).
3. Reach people where and when they matter: All politics are local and all advocacy is timely. When someone is checking email at 10pm after a long day of work, sending a letter to an elected official may be overdue. With text messaging, you can give people a specific address of a place to be, a direct action to take or short talking points while they are in a meeting or at an event so they can act on it when it actually matters. However, this means the action must be real and serious not just a faux-urgent engagement effort. The technique also allows you to reach people when their emotional senses are heightened before they lose their enthusiasm (or anger) about an issue.
4. Penetrate the “Circle of Trust”: While studies show that people will offer up their email address for almost anything, cell phone numbers remain relatively protected, both by the individual and the mobile service providers. Therefore, if your supporters give you their cell to reach them on their most personal device, you can assume you’re in the circle of trust and that your message will be read. The key is to maintain that level of trust through infrequent, authentic and relevant subsequent messages. Mobile communications elevates the level of accountability for all campaigns and requires listening to what supporters want.
5. Another spoke on the wheel of integration: Continuing to blur the lines of offline and online, text messaging allows marketers to both capture and measure the success of offline events and print advertising like never before. Supporters can text from an ad they’ve seen or post on a website a photo or podcast they record from an event. A mobile strategy is another tool to use in conjunction with traditional advertising and media, online marketing and in-person events but should not just replicate what’s being said through other channels.
6. Experimentation is expected: Because it’s still a relatively new channel, text messaging campaigns leave a lot of room for trial and error and users expect it. Advocacy organizations and corporations alike can promote their “products” in innovative ways that push the interactive brand experience envelope. Successful campaigns will think about marketing as two-way conversation and not just another medium to push an agenda.

Editor’s  note: Each week, we do a survey of Beaconfire staff to get impressions on a variety of non-profit technology issues. All opinions expressed here are solely those of their authors. With NTC next week, many of our readers will be browsing from mobile devices like phones and blackberries. So this week, we asked the Beaconfire staff:

Jeff, Principal Consultant: Most of the staff already know and ridicule my ability to check the metro “next train” information from my phone. This simple WAP enabled application on the WMATA metro site is by far the most useful mobile site I use.

Other must haves include fantasy football sites where you can check the score of your matchup while at the game or at your favorite watering hole without dragging around your computer.

Lastly, there is a mobile site for zipcar, my other must have transportation option. However this app is less necessary since the easiest way to access when not in front of a computer is through the automated phone system. Sweet.

Milo, Marketing Consultant: Central Desktop.  Bringing their online project management software to the next level of seamlessness will require making their tools more accessible on mobile browsers.  As of now, it’s not even possible for users to login from Blazer (the mobile browser I currently use).  

John Brian, Marketing Consultant: LogMeIn, or other remote desktop apps. I sometimes need more power than I could get from my iPod or phone, and would like to be able to enlist my desktop to help out.

I’d also like to see blogging software use a mobile version; updating WordPress from an iPod was painful.

Taylor, Software Engineer: Google, particularly the maps and yellow pages. If I can look up locations, I can generally get the other information I need.

Kristin, Project Manager: I’d say sites that I need to access when I’m out and about. Like mapquest or google maps when I’m driving around and lost. Or like Jeff said, the metro arrival/departure info.

David, Software Engineer: Restaurant finders and gas station finders.

Eric, Senior Consultant: I’d like to see a good mobile feedreader. Email as well, of course; I find that Yahoo mail is barely passable. If I was going to tinker with my phone, though I think of it not as much as a substitute for the internet, instead I wish that there was better hardware. A better camera and a camcorder, as well as the applications to blog mobile. I’d like to see a way to upload video to WordPress.

With the mobile revolution, web design firms like Beaconfire are paying more and more attention to making sites look good on mobile devices. Make sure you check back for more on this, and keep reading the Beaconfire Wire on your mobile device next week as we blog from NTC.