Creating for the Mobile Web: 20 Great Resources for Designers and Developers

by Vero on Mar 25

Everyone has a first time. It’s a special moment, one where we enter a world of unknown and uncertainty, fumbling around and finding enjoyment in the discovery.

I’m talking about the first time we design a mobile site. Obviously. Ahem.

So since everyone’s got to start somewhere, here are some choice resources for anyone new to creating for the mobile web. It’s one thing to create a design and hack some code together, but don’t forget the importance of testing and promoting what you create!

Designing

  • Sitepoint’s Brian Suda writes about the basics of designing for mobile, starting with thinking about screen size and why these people are coming to your site.
  • Sender 11 is an extremely useful blog on mobile interaction, filled with great posts and tips on designing for mobile
  • Oriented towards the iPhone, A List Apart suggests ways to exploit the unavoidable device with Mobile Safari and beyond.
  • For those of us who still occasionally crack a book open, Cameron Roll’s Mobile Web Design comes highly recommended.
  • Even further, if you enjoy social interaction, you might like to take part in a MobileCamp, which is an opportunity to get together with people who work in or love the mobile world. It’s a great place to swap ideas, find new development partners or just check out what everyone else is up to.

Developing

Testing

  • Ready.mobi: Score your mobile-readiness with this useful tool provided by dotMobi
  • DeviceAnywhere is the de facto commercial testing tool, allowing you to test mobile sites on a wide range of networks and devices.
  • Tarek Esber wrote a great post about mobile device testing services and products, ranging from non-profit services to manufacturers’ own developer portals and other options like emulators and outsourcing.
  • Forum Nokia Launchpad is a cheaper alternative to the Forum Nokia Pro program, for those who are developing mobile applications.
  • Only available to the American market is Amazon’s Mechanical Turk which can be used to outsource testing. Your mileage will most likely vary, depending on the complexity of the testing you require.

Promoting

  • AdMob is the largest mobile advertising network out there. Useful if you’re looking to either publish ads on your site for some revenue, or if you want to advertise on other sites.
  • Wapreview is not only an excellent blog by Dennis Bournique, but also an index of useful mobile sites, all rated out of 5 for content and usability.
  • Twitterfeed allows you to automatically share your blog entries to your Twitter feed. Why not create a feed of mobile-friendly content for those mates of yours who mainly use Twitter from their phone? They’ll love you for it!
  • AdSense for Mobile Content: Google’s widely used ad network is also available on mobile. Like AdMob, you can sign up as advertiser or publisher to meet your promo goals.
  • Got a great mobile site? If we’re not already including it in the Taptu search engine index, it may not be on our radar yet. Email me on vero@taptu.com and we’ll visit your site when we next let the crawlers loose.

Got some resources you want to share?

Three steps to a clearer email inbox: Trimming the bacn

by Vero on Sep 27

Until recently, we all spoke of ham and spam. The two defined types of mail we receive. Good mail came from friends, colleagues and interesting sources. Bad mail came from strangers who tried to offer us millions of pounds held in a Nigerian bank account or questioned our manhood.

However, over the past year, a new grey area has grown out of control. It’s that stuff lodged between ham and spam. It’s lovingly nicknamed bacn, “the middle class of email. It’s notifications of a new post to your Facebook wall or a new follower on Twitter. It’s the Google alert for your name and the newsletter from your favorite company”, according to Lifehacker.

Ham, Bacn and Spam, your inbox's staple diet
Our inboxes are becoming giant bacn sandwiches, filled with information you don’t mind receiving but that you don’t necessarily have time to triage right now.

If like me, you also check your email over mobile, dealing with bacn is becoming more problematic by the day. I use the Gmail app for S60, which is great, but only shows 20 new email headers per screen. When most of these are Facebook messages, LinkedIn invites and WordPress comment moderation notices, the real email gets lost. So how do you deal with bacn?

Three steps towards a clearer inbox



1. Get rid of the excess fat

Cut out any mailings you receive that you don’t want or need at all. Whether it’s that knitting mailing list you joined “by mistake”, that newsletter you’ve got little interest in, or those wiki entry modification notices you forgot to turn off, just take half an hour to unsubscribe from anything that isn’t relevant anymore.

You’ve probably joined many social networks in the past few years. Some died, some are still going strong, and some are barely still alive, plugged into an oxygen mask and a shrinking investment budget. I bet you could close your account on a number of these sites right now and not miss them at all.

Be ruthless. Anything important enough will come back onto your radar to be re-added later, so better scrap more than too little. Important news and people will find you if they’re desperate to do so.

2. Consider your options

FacebookAlmost every social network or mailing list has notification options. Have a look at your inbox and for every automated email you receive from one of these services, consider whether you really need the email. You know, the notification will still be visible on the system when you log in. Do you need that mailing list to spew 45 messages at you a day, or should you switch to receive the daily digest? Can you replace it with an RSS feed alternative?

Is it any use to find out immediately when a random punter adds you as a friend of Flickr? Or can you just find out next time you log in to upload pictures?

Now, this rule is like Play-doh and needs to be modeled to your very unique preferences.

3. “Iz nice thx but is not mah bucket”

Iz nice thx but is not mah bucketYou’re now onto the last round. Hopefully, there are only a few lucky remaining bacn rashers left now. It only takes a few networks to spew out a lot of reminders, notifications and invites, and while they’re of interest, they might not be an essential read right now.

No matter what email client you use, odds are you can set rules. These serve as buckets for all the automated emails you receive, leaving you with a clean inbox and the opportunity to check them at your own leisure.
Set up folders for your bacnSimply set the rule to move the offending bacn automatically to the correct folder on arrival.

Three simple rules, a tidier inbox.

PS - As an aside, my funny bone was highly tickled by the discovery of Bacon Strips Adhesive Bandages. Nothing quite like a bacon rasher to soothe an injury!

[* Ahem, need I point out that the designers were not involved in the creation of the image at the top?]

[tags]Bacn, spam, email, inbox, productivity, organisation, mail, taptu, taptology[/tags]

Tip from a reader: mobile-friendly web design

by Vero on Aug 10

Last week, we gave a few tips and highlighted some resources available for those new to designing for the small mobile screens.

Dan Appelquist left a comment linking to the W3 Best Mobile Web Practices flip cards, which are the cheat sheets of mobile web design. They’re an invaluable resource for a designer who wants to understand the different challenges of the mobile screen.

Having had a look at these, I couldn’t let this resource sit only in comments, and wanted to share such a useful tool more prominently. Thank you, Dan!

Turning off the content filter on Orange UK

by Vero on Aug 8

In the past few weeks, I’ve spent a vast number of hours in the car as a passenger - mostly on the M25, completely stationary, desperately looking for a source of entertainment. You can only spend so long counting red cars, changing CDs and playing “I spy…” before getting a bad case of cabin fever.

So I thought I’d browse a few of my favourite blogs on a borrowed Orange mobile, instead of my usual T-Mobile web’n'walk, but came to the realisation that my usual reads were blocked. No bloglines, Seth Godin or access to my own blog either. I appealed with Orange that the sites should be reviewed as, surely, I wasn’t posting lewd “adult content” by Orange’s definition. All requests were turned down!

Phone locked by safeguard on OrangeWhile on the road, without an account number at hand, Orange customer service could not make the change for me and I was unable to turn off Safeguard and resume regular surfing. I was destined to be limited to a few websites until I returned home. It was a looong journey…

Now, I’m not picking on Orange - It just happens to be the only one I’ve had problems with. I’m clearly not the only one getting annoyed with networks defaulting users to being mobile-nanny’ed.

While it’s fair enough that users known to be underage are limited to a range of websites - since parents aren’t able to view browsing history or set parental control as one would on a desktop computer - it’s impractical and annoying for the rest of us mobile surfers.

Once I returned to a desktop computer, it was a doddle to turn off Safeguard. If you’re with Orange, you can follow the steps below to do the same.

Turning off Safeguard on Orange

  • Log in to your Orange account
  • Either sign-in using your mobile number and password, or
  • Register to access your account details online
    • Enter your mobile number and click the radio button saying “I don’t have a password and would like to register”
    • If you have your mobile with you, Orange will send you a text message containing a short code which will confirm the mobile is in your possession
  • Once you’ve logged in to your account, you’ll find the adult content settings under Your Details
  • Select “Change” at the bottom of the page to change your settings.

Congratulations, you’ve turned off Orange Safeguard and can now browse freely!

If you’re with a different operator, why not contribute by telling us how you’ve done it or what limitations you face by default? Do they bother you or are the websites you need already whitelisted?

Mobile-friendly web design isn’t rocket science

by Vero on Aug 2

The number of web-enabled mobile devices is growing every day. Worrying about how your site looked on a mobile device used to be a fringe issue, reserved for the geekiest and most niche markets, but it is now beginning to rise on everyone’s list of priorities.

Virginia DeBolt writes an article for Vitamin demystifying how to make your site mobile friendly.

“Making your site mobile friendly can be boiled down to a few concepts. Use validated, standards-based HTML or XHTML, ensure meaningful semantic markup with presentation removed to a stylesheet, and add handheld media rules as needed.”

A number of free services are available to help developers test their websites such as ready.mobi and Bango’s own MobileChecker, with the former providing vastly more detailed information on what caused your site to pass or fail the check.

Google Reader screenSome sites simply aren’t mobile friendly yet but will contain RSS feeds, which can be consumed via readers like Google Reader Mobile. [As an aside, I’m a huge fan of Google Reader Mobile and will review it in greater details at a later date.]

If you’re a reader of a blog or website that hasn’t put much effort into becoming mobile-friendly, why not drop them a line and suggest it? Sometimes, all they need is a show of hands to get the wheels in motion for a new lush mobile-friendly site. If you’re a designer, what steps are you taking to make your website more mobile friendly? The changes needed to make a site mobile-friendly can sometimes surprisingly small, but will make a world of difference to readers who is using a device with a smaller screen to browse it.

In case you haven’t noticed the links in the top left, Taptology comes in both mobile and desktop flavours to suit everyone. Bookmark the mobile version (http://www.taptu.com/blog/m/) or sign up for the RSS feed to get your daily dose of mobile goodness.

[tags]mobile web, web design, thinkvitamin, taptu, taptology, google reader mobile, virginia debolt, bango, ready.mobi[/tags]

Ten tips for preserving your mobile phone’s battery life

by Vero on Aug 1

As our phones become more complex, have larger, brighter screens and more features than any other portable device we use, they also munch through more battery power. My current N95 might last 48 hours with normal use, while my antique Nokia 6100 lasted nearly two weeks between charges.

Here are ten tips to help you extend your phone’s battery life that little bit longer, just until you can get back to base and stick it on charge for a few hours.

  1. Always make sure you have the latest firmware for your phone, (Some firmware updaters: Nokia UK, Sony Ericsson)
  2. If your phone has Bluetooth and WLAN network search, turn them off when not needed
  3. If you have a camera, make sure it’s really off - Leaving your camera lens exposed, for example on a Sony Ericsson P990, the camera circuitry is still running and draining your battery. Doublecheck before putting it in your pocket!
  4. If you aren’t a regular user of mobile data, turn off 3G - running on 2.5G can nearly double your battery life
  5. Limit the length of your light time-out and power saver time-out
  6. If you’re using push email, consider changing the interval to less frequent email checks
  7. Close unnecessary active applications like IM chat, instead of letting them run in the background
  8. Get an extended battery, if one exists for your phone type
  9. Get the ultimate in long battery life ;)
  10. If all else fails, get a secondary battery and an external charger to keep with you (And if you spend a lot of time in your car, charge it while on the go with a car charger!)

Improving camera speed on S60 Nokia phones

by Vero on Jul 24

The Nokia N95 is a fantastic phone, launched in early 2007 in the UK, and arguably one of the favourite high-tech phones of the moment. Even with the iPhone not yet available in Europe, the two have duked it out in comparison reviews, where opinions are as varied as the number of features each phone offers.

I own an N95, and I’m very pleased with it, but I have a hopeless love-hate relationship with its camera. My main bugbear: It’s slow! And apparently, I’m far from the only one who finds that problematic. Steve Litchfield at All About Symbian writes about “not missing the moment”, giving a few practical tips to work around the N95’s lagging camera.

The workaround on the N95 if you’re waving it around at a party, for example, is to:

  1. leave it in ‘landscape’ mode (in ‘Scene’)
  2. turn off display of the captured image (in ‘Settings’)
  3. set the image quality to 2 or 3 megapixels (in ‘Settings’)

I’ll remember this next time I try to catch a sneaky snapshot of our two designers monkeying around the office!

[tags]Nokia, N95, mobile phone, iPhone, camera, gadgets, mobility, taptology, taptu[/tags]