This week Google launched GOMO, a new initiative that is clearly part of Google’s new mobile advertising strategy.

The site, designed in the latest flavors of HTML5 and CSS3, is one giant page that you can scroll around to find tips on mobile design, design services, and a simple test of mobile functionality.

If you’re web browser doesn’t support the latest in web technology, you may have trouble with the website. Google Chrome is the (no surprisingly) recommended choice of browser. Warning, surfing the site with Safari on an iPad can lead to blank screens when you click on some links, but if you stumble around you can get it to (mostly) work.

If you’ve been wondering whether it was worth the effort to make your site mobile friendly, clearly Google thinks it is. If you’re a web designer specializing in mobile design, you should definitely be aware of this new initiative.

Check it out at:

http://www.howtogomo.com/en

Even if you typed in a mobile URL such as http://www.bbc.co.uk/mobile/web/ many sites will still display a desktop version of the site if you visit on a desktop computer, but there are advantages to viewing mobile sites on desktop computers, such as being able to easily view the source code behind a mobile web page, or take screenshots for a presentation, book, or other project.

In those cases, user agents switchers can really come in handy. User agents identify the browser and device a visitor is using when they arrive at a web site. As you might then deduce, ‘user agent switchers’ pull a fast one, identifying your desktop browser as if it were a mobile device. Users agent switchers are also useful for testing how a web page might display in many different browsers.

Some browsers, such as Apple Safari, have a user agent switcher built in. Others, such as Firefox, make it easy to add a user agent switcher by downloading and installing an add on https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ (don’t forget to tip your programmer .

Safari, which is available for free for both Mac and Windows computers http://www.apple.com/safari/ includes a built-in user agent agent switcher and is the best choice for testing your sites appearance in an iPhone, iPad, or iPod touch.

To change the User Agent in the Safari Web browser, follow these simple steps:

1. Click on the small icon in the top right corner of the browser window that looks like a page or document icon.

2. Choose Develop > User Agent

3. Select the desired agent, such as Safari OS 4.1 iPhone to see how a web page would appear in an iPhone 4.

4. Don’t forget to change the user agent back to the default setting when you want to go back to browsing the web the ‘normal’ way…

After much research, writing, editing, and testing, iPhone & iPad Web Design For Dummies is done!

We created this book to help you design the best web site for the iPhone, iPad, and iPod Touch. In this straightforward-but-fun guide you learn how to use HTML5, CSS3, and JQuery to produce highly interactive web sites for these sophisticated devices.

Look for it in bookstores in July or preorder this book on Amazon now.

Mobile Web Design For Dummies by Janine Warner and David LaFontaine

After much research, writing, editing, and testing, Mobile Web Design For Dummies hit bookstores this week.

Pick up a copy at a bookstore near you.

Table of Contents

Part I Designing for Mobile Devices

Chapter 1: Understanding What Makes Mobile Different

Chapter 2 Designing for the Mobile World

Part II Following Mobile Web Standards

Chapter 3 Creating a Simple Mobile Site

Chapter 4 Introducing XHTML and CSS (was Chapter 3)

Chapter 5 Comparing Mobile Markup Languages

Chapter 6 Developing Multiple Mobile Designs

Chapter 7 Testing and Publishing Mobile Sites

Part III Multimedia, Marketing, and E-commerce

Chapter 8 Using Images and Multimedia in Mobile Designs

Chapter 9 Creating Mobile Friendly Blog pages

Chapter 10 Mobile Marketing and Social Media

Chapter 11 Adding E-commerce to Mobile Sites

Part IV Part of Tens

Chapter 12 Ten Mobile Interface Challenges and Opportunities

Chapter 13 Ten Great Mobile Sites

Appendices

Appendix A: Interviews with Mobile Design Experts

Appendix B: Image Optimization

On the other hand, if you’re a designer trying to figure out if your site will work on a Blackberry 8350i on Sprint in Kankakee, a Samsung SGH-F250L on Brazil’s VIVO carrier network AND a Sony K550im on France’s Bouygues network, then DeviceAnywhere is a dream come true.

Playing with all the various devices they have is addicting.

DeviceAnywhere maintains a network of mobile devices on racks with trickle charges of electricity feeding into them, just waiting for you to check them out. You can use them to access your mobile web page to see how it looks on the device — the screen actually is a pixel-for-pixel output from the video output on the device, not a camera pointed at the device’s display. Makes geting a decent screenshot of a mobile site a helluva lot easier, I can tell ya.

So far, you can only test about 30 phones in Brazil, but they are adding more all the time.

You can also load an application into the phone and test to see how it works. Of course, using your mouse & cursor to click, twirl, press or tap the control surfaces on the phone is not the most intuitive or real-life test of how the app responds. I spent a couple anxious minutes trying to figure out if my mouse was broken when trying to get the Blackberry Storm to check out this blog; it turned out I just had to be a bit more patient.

Anyway, to use DeviceAnywhere, you have to download its proprietary application and install it locally on your computer (Mac or PC), and establish an account. They give you 3 hours of test time to start out with, and it’s measured out in 6-minute chunks, kinda like how a lawyer bills.

You can also use the phone to send and receive SMS messages, play multimedia content, and even make calls. I can’t help it – my mind immediately went to some “Bourne Identity” type scenario, where you could use the phones to make calls that make it look like you’re calling from Germany or Spain … although anyone savvy enough to use a service like this one to “launder” their user information would be more than sharp enough to figure out easier ways.

Anyway, to use the phones, you right-click on the handset that you want to check out, and choose “Acquire Device” (see below).

You can also click to bring up a window with all the data about the phone in it, such as the OS, memory, processor speed, whether it runs Flash Lite, etc.

It’s kinda addictive to put these devices through their paces – for anyone who’s got a real curious streak, DeviceAnywhere warns that the quickest way to run through your trial minutes is to check out a whole bunch of phones at once and get so caught up with toying with them that you forget to keep an eye on the little taxi cab meter.

To me, one of the cooler things is the little broom that appears after you’ve “hung up” the phone when your test session is done: the DeviceAnywhere guys basically run a script (and how many hours it took to grind out something that will do this across all the thousands of handsets they have on file) that wipes the memory and OS free of whatever programs you’ve uploaded or sites you’ve visited. Dunno why this strikes me as so cool, but it does.

Lastly, check out the DeviceAnywhere blog. Good stuff there, such as this recent post on trends in the mobile development world – particularly revealing are the shift in numbers in what people are working on in mobile. A couple years ago, most companies were focusing in on games or ringtones, because that was pretty much the only way to make money from mobile content.

These days, the mobile web is blowing up (a 100% jump YOY), and mobile banking/payment is hot on its heels. There are twice as many people working on mobile web sites and apps, well, pretty much because a couple of yo-hos in a garage can dream of hitting it big with an iPhone app, while not everyone can set up their own bank (the antics of the various players involved in the subprime mortgage mess notwithstanding).

Warning — the mobile tester is ruthless;  it’s not an easy test to pass, but it’s worth the effort.

To get started, just enter your URL (or anyone else’s) into one of these online testing services at the W3C. I recommend you run all three tests on all your sites — CSS, HTML, and the mobile test site.  They will quickly help you identify any common mistakes you’re making, and help you get them cleaned up. Your pages will work better in Web browsers once they are error free, and search engines will like them better, too.

Test the HTML/XHTML on your site
http://validator.w3.org/

Test how mobile friendly your site is
http://validator.w3.org/mobile/

Test the CSS (Cascading Style Sheets) on your site for mobile
http://jigsaw.w3.org/css-validator/

No matter what phone you use, you can test how your site will look on an iPhone with any computer and the latest Web browser. Just visit any of the iPhone emulator sites listed below, type in the URL of the site you want to test, and it will display in the little window that looks like — you guessed it, an iPhone.

Before you use these iPhone testers, be ware that if you visit a site that uses an auto detect to direct sites to an iPhone optimized version, these online emulators may not detect it, because you’re using a computer to visit the site… kind of a serious limitation IMHO, but if you just want to get an idea of how your site looks in an iPhone, these are a good place to start.

http://www.iphonetester.com/

http://www.testiphone.com/

Making your site lo0k good in all the web browsers out there is hard enough, now you have to test your sites on iPhones, Blackberries, and a wide range of other mobile devices.

If you don’t have multiple computers and phones or all the browsers in use on the web today, you can use one of the online simulators covered in this post to test your site — even if all you have is one web browser you can use to access the web site simulators.

Here are a few places you can use online browser testing tools:

The Browser Sandbox: By far my favorite online tool for testing web sites in different browsers on a computer screen, this site gives you the chance to surf through any site with the most popular browsers on the web. Just click on the browser you want to test with to launch IE, Firefox, or Safari (in multiple versions) as if the program were installed on your computer. Then enter a URL and see how it looks. It’s easy and robust.

BrowserShots.org — Enter any URL into this online tool and it will return a collection of screenshots of the site as it appears in a long list of browsers. You can pick and choose which browsers to test in, the more you choose, the longer it takes. You usually get results in 5 to 45 minutes (faster if you pay for their premium service).

For more advanced testing (albeit more time-consuming) visit CrossBrowserTesting.com where you can use  ‘virtual machines’ to test your site on different operating systems and browsers. Want to see what your site looks like on IE 5 on Windows XP? (Brace yourself, it may not be pretty, but you can do it on this site). The biggest advantage of the CrossBrowserTesting.com is that you can experiment with interactive features on your sites, so you can see how drop-down menus, collapsible panels, animations, and other dynamic features will work in different environments (which can be far more useful than just how they look in a screenshot).

Now I’m looking for the best mobile phone emulators. If you know of any good places to test how a web site looks on a mobile phone, please email me janine@jcwarner.com

If you’re looking for the ultimate emulator where you can test your Web pages designs, mobile designs, and HTML email messages in just about any program any of your visitor is likely to use, BrowserCam is the place.

It’s not free (although there is a free trial) but it sure beats having to maintain all those computers and software programs yourself

At BrowserCam you can test any Web page online using:

• Mobile emulators for the: Iphone OS, Android, Blackberry, and Windows Mobile
• Any Web browser on any operating system

• Email messages in HTML can be tested across multiple desktop & web-based email clients

If you want to see how a web page looks on some of the most limited mobile phones on the Internet,  you can test any site on the Internet using Opera’s Mini demo site.

The result is not pretty for most web sites today. If you’ve done nothing to optimize your site yet, odds are it won’t look very good in the Opera Mini emulator, but if you can handle the consequences, you’ll have taken the first step toward thinking about how you may need to redesign your site if you want it to look good on most of the cell phones on the planet.

To use Opera’s microbrowser emulator you’ll need to enable Java in your web browser (takes just a minute to add the Java plugin to Firefox).

You can run the emulator in Firefox on most desktop computer. Opera Mini , displays web pages in a tiny window designed to simulate the limited screen size of most of the cell phones in use today.

Anyone with an iPhone has the benefit of a much larger screen and the Safari web browser, which displays most pages remarkably well by comparison (unless the site uses Flash, which is not supported at all).

Opera Mini is capable of reading HTML, but only limited HTML, and Opera makes many ‘adjustments’ to web page designs in an effort to cram them into the limited space of a small cell phone screen.

Opera Mini does a number of things in it’s effort to ‘fix’ web page designs that don’t fit small screens.

Among the many changes Opera Mini makes to web pages:

• Resize all of the images, which can lead to significant changes in how  a page looks, especially pages that use large graphics, background images, or multimedia.

• Opera also alters the layout of many pages, stacking images and columns on top of each other in ways that sometimes make pages easier to read on a small screen, and sometimes make them incomprehensible.

Before you subject yourself to the often disturbing effects of the Opera Mini on your carefully crafted web pages, keep in mind that the browsers available for the iPhone, and a growing number of other smartphones and touchphones, do a much better job of displaying web pages than Opera Mini.

The good news (for now), is that the experience of surfing with Opera Mini is so bad most people don’t do it. Owners of smartphones and touchphones are much more likely to visit your web site, unless you’re trying to reach the broader audience that still uses more limited phones.

Until everyone can afford the coolest new phones, it’s not that hard to create a simplified (read stripped down) version of your web site optimized for a small screen.

Here’s a bonus tip: it’s not just about creating a simple design with fewer images, it’s about creating a mobile-optimzied version with the information most relevant to mobile users, such as how to find you when they get lost on the way to your office.

If you want to reach the growing audience of mobile phone users who surf the web with Opera Mini, you’ll need to create a stripped down version of your site and then test, test, test.

You can start testing here (but really, brace yourself):

http://www.opera.com/mini/demo/