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();
});

When Ad Council approached Beaconfire about this monumental project, the FanGirl in me let out an embarrassing little squeal. What self respecting, red blooded Creative Director wouldn’t be thrilled at the chance to help one of the most iconic American brands reinvent itself online? We couldn’t wait to get started.

As the complexity of our task sank in I’ll admit to a few … small… moments of panic. Ya know, like… Would we be able to do justice to Ad Council’s incredible 70 year legacy? How could we represent the massive depth and breath of their body of work in an accessible and engaging way? Would the technical requirements for all that media be a roadblock? OH! And what if we weren’t able to translate Ad Council’s unerring creative vision effectively to the web? And.. And.. And… #omg

These seemingly overwhelming concerns (along with a laundry list of many more) are likely familiar to any organization as they start down the path of a site redesign. So how do you take that first step? It may be simple, but I truly believe that success boils down to a children’s riddle: How do you eat an elephant? One bite at a time.

To get you started, here are a few design/user experience tips to chew on:

Ask a lot of questions
Design requirements are obviously important, but expectations and dreams also need to be uncovered before jumping into a redesign. There are never dumb questions, only opportunities to learn more about who you are designing for.

Think like your audience
When it comes to supporting brand identity and organizational goals, client preferences will guide part of the creative direction. However, it’s the audience who will be using what you create. Put yourself in their shoes and advocate for their needs with every design choice.

Keep it simple
It’s far easier to overdesign than to create something deceptively straightforward on the surface that reveals a complex message underneath. Follow your gut and remember less is always more.

Tell a good story
Content, brand, imagery, media, messaging – these are all facets of a website’s narrative. Make sure that the site design and user experience not only supports your story, but also enhances it.

Design for action
Eye candy can win you awards, but doesn’t always ensure engagement. Design for beauty as well as for purpose and always remember that mindful creative can change the world.

Adcouncil.org represents hundreds of hours of work and the dedication of a focused team that not only embraced rebirth, but championed it at every step. It’s glib to say that any organization can do the same but I truly believe that armed with clear project goals, passionate creativity, smart people who have your back and the unshakable belief that anything is possible, you’d be amazed at what you can accomplish.

Happy Birthday, adcouncil.org. We can’t wait to see what you do next.

Math is easy; design is hard.
— Jeffrey Veen

Design is one of those topics that most everyone will have an opinion on, but few really understand. When I taught web design, the first lesson on the first day of class was a deceptively tricky one: Explain the difference between art and design. In words. Anyone? Beuuulllleeerrr?

The truth is that no matter how much appreciation you may have for a pleasing aesthetic, or consider yourself blessed with an “eye”, not all visual expression is equal. Art’s goal is to create beauty; Design’s challenge is to use that beauty to solve a problem.

Beauty is a subjective concept. Everyone defines and reacts to it differently, and this is where things can go a little pear-shaped for designers. Why? Because the stickier issue of purpose then enters into the equation. Solving for the problem of “We need eye candy” by creating eye candy is a no brainer. But what about something more complex like “We need more people to donate to our cause” or “How do we engage people in our mission”? Making something beautiful is the easy part. Communicating a visual message that moves people to DO something is the holy grail we should be striving for. Anything less is what I call “Wasted Pretty”.

“Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.”
— Shaker Philosophy

The Shakers were onto something with their chairs. They never created a shape that didn’t meet both the visual need for beauty, or the practical requirement to sit. So in our industry, who is in charge of defining what “necessary” and “useful” means? For better or for worse, that job usually falls to a designer. So what do we do with such a weighty responsibility? At best, we make something that transcends the specific technique used to create it. At worst, we get a cool chair that looks great but is really uncomfortable. Lost opportunity. Wasted Pretty.

Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.
— Charles Eames

Many an agency brawl, waged in matching Eames chairs, has erupted over the correct use of design principles. Well, not really, but it’s fun to picture. Seriously folks, just because you know “how” to do something, and you’re very good at doing it, doesn’t mean you’ve solved the problem you were tasked with in the first place. For example, adhering to a strict pixel grid in web design is technically “correct”. It creates clean lines, promotes ease of use, and can efficiently generate nice looking validating code. So what’s the problem? If your design is nothing more than a piece of art to admire instead of moving the needle on a purposeful action, you’ve missed the point. Wasted Pretty.

It is no coincidence that in no known language does the phrase ‘As pretty as an Airport’ appear.
- Douglas Adams

None of this is to say the beauty isn’t important in design. Quite the opposite – visual appeal is the gateway drug. For example, our expectations of an airport are mostly practical, but isn’t it a nice surprise when you find an airy, modern, open & human-centered space to spend your time in? It’s a stretch to attach the word “beautiful” to a waiting area, but your experience is that much more enriched when good design is used to make the mundane feel better. However, design cannot fix bad usability so don’t even try. Focusing on the airport aesthetic at the expense of good signage is massive fail. Waste the pretty like this, and you’ll also miss your flight.

However beautiful the strategy, you should occasionally look at the results.
— Winston Churchill

As a designer, the onus is on us to make sure that we are using our powers for good in our industry. We also have the responsibility to educate our colleagues, clients and audiences about the need to use design as a tool to advance their goals, and ultimately, make a difference. If you happen to snag a Webby or two along the way, mad props to you – but consider that the icing not the cake.

A list, by no means comprehensive, of ways to avoid Wasted Pretty:

DO design your projects to be beautiful
DO design for a purpose
DO design for your audience
DO design for impact
DO design responsibly
DO design for simplicity

and please …

DON’T waste the opportunity we have as designers to change the world.

Keep It Simple, Stupid.

Steve Krug’s “Don’t Make me Think”, one of the classic web manifestos of our time, set out to make web site usability accessible to average mortals through – wait for it – humor and common sense. Well, Duh. Designers the world over (including me) instantly FacePalmed, asking, “Why the hell didn’t I think of that?”

I discovered this deceptively simple book in 2005 when I was the art director for a large national non-profit and struggling with a mind numbing mix of design by committee, fungible timelines, and internal politics. Suddenly I realized I wasn’t the only “over thinker” out there and that there was a very simple way to solve the problem: Cut it out.

In retrospect, of course it wasn’t at all that simple. Making a sharp left turn in the Titanic is easier than changing dug-in mindsets at any organization, but Krug’s masterpiece made me completely rethink my own design process and work hard to lead others by example. Rather than create overly complex interactions or layouts that made perfect sense to me, I realized that an audience didn’t have me over their shoulder to explain my brilliance. It might be liberating to kick best practices in the teeth and forge new visual ground with a small gray-on-white search box in the lower right corner of a 1400 pixel wide page, but expect your site to be as useful as the digital equivalent of a paperweight.

“Don’t Make me think” reminded me of lessons learned in my former life as a theatrical lighting designer. When trying to light a critical scene of The Crucible in grad school, I had nearly all 500 lamps up at 100% and couldn’t figure out why I just couldn’t “see” the stage anymore. My teacher made me go to complete black and one by one, only bring up the single lights that illuminated the story of the characters. A moment that started out blindingly overwrought became dramatically focused, all by remembering why we were there in the first place.

For non profits, when time, money and flexibility are usually in short supply, we need to be even more vigilant about keeping our websites useable and effective. Remember that simple doesn’t have to be boring, sexy doesn’t have to mean complex and innovation can spring from logic. Steve (yes, we’re on a first name basis now) taught me that. I firmly believe that his book helped me become a better designer, communicator and teacher, for which I am forever grateful.

So do me a favor? Next time you can’t explain your design concept in less than 100 words, go to black and start again, light by light. Stop thinking so much – Steve would be proud.

1. Underestimating the time and effort it takes to revisit and augment a new or existing website’s content pool. Procrastination is a close cousin to this, as a major website redesign requires significant attention to a myriad of other aspects of the process, and content is extremely easy to put on the back burner.
2. Once the content begins to be entered into the CMS and take form within the context of the website design and structures, it becomes evident that what worked well in a Word, PowerPoint, or Excel file just does not fit well on the website. This leads to late stage revisions to the content, and sometimes even to page and content structures in the CMS.

While we try to combat the first causative factor by discussing content early, helping with content planning sheets, and pushing them throughout the process, ultimately it is up to the client to begin early and maintain progress. Regular, gentle reminders can devolve into counterproductive nagging rapidly.

The second issue can be ameliorated by trying to get solid samples of each content type early, and incorporating them into the wireframes (and even into design comps) to see what they will really look like when realized on the website. We also share best practices and advice on how to best make the client’s content work on the web.

In addition to those two legitimate issues, there is an unnecessary third – the misperception that all content must be in place and in pristine condition before a website can launch. That is simply not the case. Sure, you need to have all the major sections fleshed out to a certain point, and the content that is there must look decent and properly convey information. But, not every single individual piece of content must be in place at launch, and additional wordsmithing can continue after the website launches as long as the information is in a comprehensible form.

After all, one of the major purposes of a CMS is to make editing, creating, re-using, and re-contexting content quick and easy. A website is intended to grow and evolve, and it is in fact expected to do so by audiences. A lack of change is a signal to visitors that there is no reason to come back to a website. It is important not to lose track of this during the mad rush to perfection that often occurs during the content entry phase of a redesign project.

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.

Many thanks to the good people at NTEN for agreeing to let me stand up in front of a huge cheering crowd at the 2011 Nonprofit Technology Conference to drop some serious science in my session, “Practical HTML5/CSS3 for Nonprofits (or ‘How to Party Like it’s 2011 When it’s Really Still 1999′).” The crowd will be huge, right? And cheering?

HTML5 is the latest in a long line of buzzwords — Web 2.0, AJAX, SEO, B2B anyone? — around Web Design and Development. In my session, I hope to do what I can to dispel some myth, clear up some misunderstandings, try to separate it from some of its buzzwordiness, and start a discussion about what nonprofits can stand to gain from this new standard — nonprofits who may be serving audiences trapped on outdated browsers and using slow dialup connections.

We often hear from clients that they want to convert something to HTML5. What they’re often talking about is a need to take something currently in Flash and make it “not Flash”. This is of particular importance as site visitors increasingly use iPhones or other mobile devices that do not display Flash. It’s a tricky request because more often than not what they actually want is not conversion to HTML5 at all. The misunderstanding, as is often the case, is all about definitions.

Many people hear about things that people have done with HTML5 and don’t understand that the whiz-bang awesomeness they just witnessed is actually a combination of HTML/CSS3/JavaScript that may or may not be (or even need to be) HTML5. If things are moving around your screen in a really exciting way, chances are there is some serious CSS3 or JavaScript doing the heavy lifting and HTML5 has only served as the canvas on which those scripting gymnastics occur. Don’t forget that word: “canvas.” That’s a big one in HTML5 that we’ll discuss in the session in March.

HTML5 is merely the latest in a line of HTML specifications that started with HTML 1.0 back in 1995 and (thankfully) sped pretty quickly to HTML 4.0 by the end of 1997. An HTML specification specifies what code we use to build web pages. That’s why it’s called a specification! It defines what tags we can use (<h1></h1>, <p></p>, <em></em>), describes what they are (first level header, paragraph, and emphasize), and outlines any rules about how we can and cannot use them. It does not describe how these elements look (that’s the job for browsers and for CSS) or what neat things we can make them do (JavaScript). In many ways, and with the majority of tags defined in it, HTML5 is nothing new at all.

The exciting news is that there are some really revolutionary new bits in the soup. Some of these new bits are very, very, cool. Some of them add functionality that is going to prove to be indispensible for building mobile apps and all kinds of interesting, dynamic interfaces. Some of these new additions will cut development time we used to have to spend doing all kinds of mundane validation on forms and whatnot. We’ll focus on these new tags in March and discuss how to use them, when to use them, and when we can start using them.

And that’s the real question, isn’t it? When can we start using them? See you in March!

Since all the panels up for evaluation deal in some way with nonprofit technology goodness, we’re just going to point you in the direction of what we think is a stellar line up of panels that we have submitted for inclusion. We’d love your vote — and would especially appreciate any comments on what you’d like to see in these or future panels.

Practical HTML5/CSS3 for Nonprofits (or “How to Party Like it’s 2011 When it’s Really Still 1999″)
More neat stuff is being done with HTML5 and CSS3 every day and we all want to jump on the bandwagon and make Web sites that are really, truly, awesome. But what does HTML5 really mean? Non-profits have unique technology requirements, including the need to support visitors to your site who may be browsing on really old browsers over really slow connections, so will HTML5 even be viable? (“This will work in IE6, right?”) Will HTML5 make our site work on mobile devices? Is it the Flash killer that you may have heard it was? (spoiler alert: a REALLY BIG “maybe”) Can you start using it right now? (“Please oh please oh please”.)

You can hack it… but should you?
You’re adding a new feature to your website; maybe an online community, or peer-to-peer fundraising, or better Facebook integration. What’s more expensive: investing in a new piece of software, with a new set of features, and integrating it with your existing system? Or stretching the limits of your existing system, making it meet your changing needs? Sometimes it’s worth the cost to make updates with the click of a mouse, instead of making your developer tear her hair out to achieve the same result. Other times, your tools may surprise you, and a little hacking can go a long way. Learn the tricks for extending your existing toolset, and guidelines for deciding which route to take. We’ll share examples of how tools like Convio, WordPress, and Ning can do more than you’d expect… and some cases when they can’t do quite enough.

Money for Nothing and your Software for Free
Free beer! Free kittens! Free software! We all love to get something for free, especially when budgets are tight. We dream of the product that will, like magic, solve our problems without costing a cent. (If you aren’t, your boss probably is.) But free things almost always come with hidden costs, and free software is no different. It won’t give you a hangover, or get fleas, but it could eat up your staff time, control your data, or change the rules on you without notice. This was spectacularly clear when Ning eliminated free accounts, leaving nonprofits with the choice of paying up, or losing years of hard work. Or when Facebook suddenly turned fans into “likers,” forcing page administrators to change their outreach strategy. But not all free software is created equal, and it’s not just about open source vs. closed source. Some tools give you great power – but you have to know how to use it. Others may limit your options, or ignore what you really need. But some may be just what you’re looking for. We’ll explore the ins and outs of free and low-cost software, and ask: what does free software really cost?

Guerrilla UX
While the importance of web usability is indisputable, the sad truth is that paying for usability experts, their tools and facilities often doesn’t fit into the nonprofit web budget. Turns out, it doesn’t have to be this way. You can go guerrilla with usability testing in either your approach and/or the tools you use and still achieve effective results.

Method Tweeting for Nonprofits: Much Ado About Something
When organizations use Twitter to promote themselves, it’s largely about playing a role. The person tweeting is tasked to be on message as the voice of the organization while creating a unique and engaging personality to draw an audience in. At the theater, we gladly accept this fake-me-out, but in social media where do we draw the line between being the playwright and playing a character?

Just ‘Cause: Can Technology Make Brand Irrelevant
Thanks to technology, the line is starting to blur between the power of a household name brand and the passion of scrappy mission-focused organizations. Yet when it feels like nothing short of a crisis will engage people with your cause, how do you compel them to act? The battle of Cause vs Brand is on.

Each site is judged on seven criteria, scored between 1-10: Design, Innovation, Content, technology, Interactivity, Copywriting, Ease of use. All of our honored sites not only exceeded scores for the non-profit Industry criteria average in design, ease of use, and interactivity, but many of the overall WebAward averages as well. We could not be more proud!

American Lung Association
Outstanding Website

“Well done non-profit site. It definitely tells the story, or multiple ones, in a compelling way.”

360 Degrees of Financial Literacy
Non Profit Standard of Excellence

“I was very impressed with the content of this site. There is a good balance of technology and interaction available on the site. I am planning to return to the site and read more of the content for my own personal education.”

American Federation of Teachers
Non Profit Standard of Excellence

“It does a good job of accommodating a lot of information. The Compelling headlines on the home page grab attention. Integration of social media is nice with plenty of opportunity to interact with the organization. Overall, well done”

Huge thanks to all the amazing project teams for this great work, and to our award-winning clients for being such Rockstars!