The 5 Commandments of Mobile Web Design
A one-size-fits-all approach to solving problems rarely seems to work in the real world, and the mobile Web is no different.
Up to this point, most mobile sites have been developed by re-hashing traditional Web content and squeezing it onto the small screen—an unfortunate “Mini-Me” approach to mobile Web design. The result? While the traditional Web becomes more useful and creative every day, the significance of the mobile Web has largely stalled. The mobile Web has yet to realize its awesome potential, and the problem isn’t a technology issue like you may be already thinking. The problem is design, or rather, a lack thereof, within the mobile medium.
1. The Mobile Web is Not the Little Sister of the Traditional Web.
What makes a mobile site so different?
It’s not the screen size—it’s the intent of the user. Very often, traditional Web users browse the Web for entertainment or to kill time. Even when traditional users need to perform work-related tasks, they are easily sidetracked by Twitter, YouTube, or any of the thousands of social networking sites.
Mobile users, on the other hand, typically browse the mobile Web when they are in need of specific information. These experiences tend to be much shorter than they are on the traditional Web, and users rarely browse for entertainment purposes. Let’s just be honest with ourselves—if a user could be in front of a computer, that’s where he or she would be.
Suppose that you were offered a chance to view a new Red Hot Chili Peppers music video on your phone. Would you actually navigate to the video and watch it, when you could just as easily view it on a speedy home computer? Re-purposing traditional Web content and stuffing it into a mobile browser is a recipe for disaster. Instead, it’s time to look at the mobile Web as a uniquely distinctive medium.
2. Give People What They Want, When They Want It.
All mobile Web users across the globe want the same thing: the ability, at any time, to easily access any information.
What this means for mobile Web designers and developers, is that first and foremost, we need to approach mobile Web sites as an information-architecture problem, and NOT as a technology problem. Mobile Web sites should be formatted in a way that allows users to easily navigate and make decisions. Users don’t want to dig through the clutter of a traditional Web site to find the tiny link they were looking for.
Companies that merely ensure their existing Web site is viewable on mobile phones, have, for the most part, wasted their time and money. This is primarily because this type of mobile Web site will likely be hard to navigate through, or be terrible looking. All too often, users get frustrated when they can’t find the content they are looking for. This fact is exactly why wireless carrier “decks” exist.
3. Build Unique Mobile Content, or Don’t Bother Building Anything at All.
Mobile is a unique medium and it should be designed with this idea in mind. If you are not willing to rewrite, modify, or create custom mobile content, then don’t bother creating a mobile site in the first place.
This point is best illustrated by an example:
A university could easily mobilize its existing Web content to create a mobile Web site, but do freshman really need to be able to schedule classes from their phone when they are lost in the Quad? The answer should be, obviously, no.
Wouldn’t the university mobile site be more effective if it was limited to custom information that is relevant for on-the-go students—such as mobile maps, a one-click phone number directory and faculty office hours? The answer is yes.
4. Make It Useable. Make It Useable. Make It Useable.
Mobile Web sites MUST always work on every phone. Period.
What this means is that mobile Web designers need to consider multiple screen sizes, as well as multiple technologies. A mobile Web site should dynamically transcode content such as forms, images, videos, ringtones and layouts, so that any user, with any phone, can enjoy a seamless browsing experience. Users should never have to tell a mobile site what kind of phone they have—it should already know.
Consider that for the traditional Web, designers and developers need to account for differences between Internet Explorer, Safari, Firefox, Opera, screen sizes, color depth, Flash versions, and more. Why would mobile be any different?
5. Don’t Forget About Design. Seriously.
Mobile Web surfers are still consumers, and consumers are deeply impacted by design. Don’t believe this? Allow us to introduce you to a fine company called Apple.
Because the concern at the forefront of people’s minds has been technology, brands and agencies often neglect the importance of design in the mobile space. It is almost assumed that because the mobile Web has to work on every mobile device, it can’t also look great. We couldn’t disagree with this mindset more.
When a mobile marketing firm approaches a mobile Web design project, it should design a series of visual layouts for a client that illustrate how the mobile site will look on a variety of different devices. For example, our firm refines a selected visual design concept into a WML layout (old school WAP 1.0), an XHTML-MP (WAP 2.0) layout at several different screen sizes, and (when possible) an iPhone-specific layout. The goal here is to ensure that no matter what phone is viewing the content, it will look its absolute best.
In Summary:
1. Think about the mobile Web in a new way. Get creative.
2. Clear and concise information-architecture specific to mobile is an absolute must.
3. Create compelling mobile content or don’t bother at all.
4. Mobile sites have to work—always. No ifs, ands, or buts.
5. It’s called mobile Web DESIGN. Not mobile Web cram-it-on-the-screen.
About Punchkick Interactive
Punchkick Interactive is America’s first design firm to focus exclusively on full-service mobile marketing. The firm specializes in creating text-message campaigns, mobile games, Flash Lite content, branded mobile Web sites, custom BREW and Java ME applications, iPhone apps, mobile media distribution systems, Bluetooth proximity marketing campaigns, and more. For additional information about mobile marketing visit http://www.punchkickinteractive.com or call (800) 549-4104.
Punchkick Interactive cited in Mobile Web Design book by Cameron Moll
Cameron Moll has just finished and released his book, Mobile Web Design.
Much has been written about mobile devices. Plenty has been written about developing websites for the so-called “standards era” of the web. However, little has been written about the two colliding. This resource aims to fill that void.
As a reviewer of the book, and more specifically the Flash Lite section, I have had a chance to read through the entire book and it is really a great piece of writing. It is certainly not written for the mobile Web expert, but rather, it speaks perfectly to anyone in a position to develop for, manage, or give advice regarding your organizations foray into a web strategy for mobile devices.
PDF copies can be purchased for $19. Well worth it for anyone interested in the mobile space. You can also download a preview sample.
I am trying to get a feel of who actually uses the mobile Web and what your favorite mobile Web sites are. Some good ones that I have seen are mobile.google.com and mobile.nikebasketball.com.
Please don’t be shy—post your best and worst mobile Web site examples. If you vote on the poll, I’d love to hear why you do or don’t use the mobile Web. Also, what phones do you use to browse? If you don’t browse the mobile Web, what is stopping you?
Adobe released Mobile Device Profile Update #5
First noted by Aniway:
Adobe released the mobile device profile update #5. Get it here. This update contains or makes changes to the following device profiles:
- Nokia 3250
- Nokia 5200
- Nokia 5300
- Nokia 5500
- Nokia 6085
- Nokia 6125
- Nokia 6131
- Nokia 6151
- Nokia 6300
- Nokia 7390
- Nokia 8800
- Nokia E50
- Nokia E60
- Nokia E61
- Nokia E62
- Nokia E70-1
- Nokia N70-1
- Nokia N71-1
- Nokia N73
- Nokia N75
- Nokia N80
- Nokia N91-1
- Nokia N92
- Nokia N93
- Nokia N93i
- Sony-Ericsson K600
- Sony-Ericsson K600c
- Sony-Ericsson K600i
- Sony-Ericsson K606c
- Sony-Ericsson K606i
- Sony-Ericsson K608c
- Sony-Ericsson K608i
- Sony-Ericsson K610iM
- Sony-Ericsson V600i
- Sony-Ericsson V800
- Sony-Ericsson W300i
- Sony-Ericsson W550c
- Sony-Ericsson W550i
- Sony-Ericsson W600c
- Sony-Ericsson W600i
- Sony-Ericsson W710i
- Sony-Ericsson W810i
- Sony-Ericsson W830a
- Sony-Ericsson W830c
- Sony-Ericsson W830i
- Sony-Ericsson W850i
- Sony-Ericsson Z712a
- Sony-Ericsson Z800i
- Verizon Motorola RAZR V3c
- Verizon Motorola RAZR V3m
- Verizon LG VX9800
- Verizon Samsung SCH-A950
Download here.
Samsung takes a stab at the iPhone with new F700
Via In an effort to keep up with the touchscreen buzz generated by Apple’s iPhone, Samsung as created the F700. The F700 is part of Samsung’s new Ultrasmart line of phones and sports 7.2 Mbps HSDPA, a 5 megapixel shooter, your typical media functionality, Bluetooth, 2.78 inch touchscreen display, and a slick looking interface designed by Adobe.
and
Via Electronista:
Samsung on Thursday unveiled what it says is one of the world’s most advanced smartphones. Closely resembling the minimalist design of the iPhone, the Ultra Smart F700 is conspicuously targeted at “the recent trend” in touchscreens, according to the Korean company. A 2.8-inch, 440×240 screen is used to control calling, Internet, and music functions. It further includes VibeTonz, a vibration system introduced in the recent W559 that simulates tactile feedback to touchscreen presses. A further resemblance to its American counterpart is a singular navigation button. In contrast to Apple’s device, however, the F700 also contains a slide-out physical keyboard for messaging and heavy-duty browsing.
Better photos can be found here.
Nokia To Intro N77 Consumer-Priced Mobile TV Cellphone Next Week?
Via Gizmodo, Nokia may unveil the N77, a consumer-aimed, moderately priced cellphone with TV capabilities.
Big bad Reuters let it slip that Nokia will unveil at the 3GSM conference in Barcelona next week the N77, a consumer-aimed, moderately priced cellphone with TV capabilities. The N77, which should resemble other N7x phones like the N70 here, will be able to receive TV broadcast by way of DVB-H, a nascent mobile TV technology that is currently undergoing tests in several markets around the world. So what?
Nokia wants to jump start the mobile TV market, which up until now has really only taken off in Korea, if that. And no, we’re not talking about downloading hot videoz picked out by your cellphone carrier, but actual programming. One problem seems to be that people just aren’t that excited to watch video on their mobile devices if the screen isn’t large enough. We should find out more once the Barça conference hits, hopefully with pretty pics of the phone, too.
– Nicholas Deleon
The only question left—will it have Flash Lite? My guess is yes.
Cleveland, OH (PRWEB) February 1, 2007 — Mobile technology is the newest media channel of advertising, say market researchers. And with over 200 million mobile phone users in America, today’s mobile phones have become capable of much more than flashy ringtones. The possibilities for creative marketing and product branding are limitless — and innovative design firms are taking notice.
Cleveland-based design firm Punchkick Interactive recently made the leap to mobile when it shifted gears from Web design to working exclusively with mobile devices.
“We saw a potential for unbelievable growth,” said Punchkick Interactive co-founder Ryan Unger. “Mobile marketing is so new that we haven’t come close to seeing its full capabilities. It’s like the Internet of the early 90s — a sleeping giant.”
And he’s not alone in his belief. This year alone, billions will be spent on mobile phone based advertising, and an increasing number of companies are recognizing the value of non-traditional marketing strategies. The recent success of viral videos on YouTube® have proven that niche marketing can be a powerful way to stretch advertising dollars and produce impressive results.
Mobile marketing can take on a number of different forms, including product-branded games, text-message campaigns and customized mobile applications.
“Mobile development can be challenging because it requires a strong grasp of programming and interface design in order to develop content compatible with different mobile phones,” added Unger. “Every phone is unique and has its own screen size and memory specifications.”
“Nevertheless,” he said, “It’s a type of marketing that, when done correctly, can create an incredible impact.”
330,000 dotMobi names registered
According to an article on Mobile Monday, 330,000 .mobi domain names have been registered since October 2006. It looks like people might be taking this mobile thing seriously.
The Essential Mobile WAP and Web Site Development Tools and Resources
If anyone is interested in designing or developing WAP sites for mobile phones, I have found some very useful information and put together this list of 11 essential tools for mobile Web development. You can also learn more about Punchkick Interactive’s mobile WAP and Web Site development capabilities.
Tools and Resources:
1. Mobi Ready score
Get your free page analysis and Mobi Ready score. This report tests the mobile-readiness of your site using industry best practices & standards
2. XHTML mobile phone emulator
Type in your .com / .net / .org / .biz, etc. site address and you can check how your site looks to a typical mobile phone user. Available handsets are the Nokia n70 and a Sony K750.
3. Submit Your Mobile Site to yahoo.com
This form lets you submit a mobile site to yahoo.com so that the mobile site will be included in search results when someone searches via their mobile handset at http://wap.yahoo.com.
4. The Mobile Domainatron
The Mobile Domainatron demonstrates a domain name’s mobile usability including: Calculating total keystrokes required to input the domain name on a typical i-mode mobile.
5. Mimic
Mimic (formerly i-Mimic) emulates either an N400i (European) or N505i (Japanese) i-mode mobile. Simply enter a URL and select the mobile you want to emulate.
6. YOSPACE.com phone emulators
You can either use the free online emulator for the 40+ handsets or you can use the standalone developer version on your PC. From here you can download the standalone version with a restriction of 5 minutes of use. Alternatively, you can buy a single user license is £299 + UK VAT.
7. WURFL – the Wireless Universal Resource File
The WURFL is an XML configuration file which contains information about capabilities and features of several wireless devices. The main scope of the file is to collect as much information as possible about all the existing wireless devices that access WAP pages so that developers will be able to build better applications and better services for the users.
8. Article :: The Mobile Web Top 10
Pukupi’s top 10 hints for building interoperable mobile web sites really spells out much of what has been questioned regarding mobile Web site development.
9. Article :: Making Small Devices Look Great
Opera has put together this wonderful resource that gives code examples, tips, and emulator advice for developing mobile XHTML pages.
10. Article :: Global Authoring Practices for the Mobile Web
This document gives general guidelines for web developers and content authors who are searching for directions to help create sites for the mobile web.
11. Blog :: http://www.handheldusability.com/
Handheld Usability is the first book to cover the emerging field of handheld product design. The book covers everything from product design cycles to optimum menu length and audicon (audio-icon) characteristics. Read the first chapter and preview other sections here.
PunchkickInteractive.com is live
After several weeks of development, punchkickinteractive.com is officially live.
Punchkick Interactive is an advertising agency that works exclusively with mobile devices. Specializing in mobile technology and development, Punchkick Interactive utilizes a team of programmers and designers to create engaging mobile content. Underlying all that we do is a passion for combining fresh ideas and technical know-how with incredible design.
Founded in Cleveland, Ohio, Punchkick Interactive began as a freelance Web-development company headed by then design student Ryan Unger and his frequent collaborator, Zak Dabbas. Over time, Punchkick Interactive evolved into a mobile design firm, thereby keeping in line with the company’s objective of constantly creating within the cutting edge.
Our business relationships and the quality of our craft are possibly the two most important elements of who we are. It’s the relationships we make that fuel our creativity and keep us going—we suppose you could call it a compulsion to please. But quality of craft—that can never be compromised. Ever. We don’t do “half-finished.” And we don’t do “acceptable.” And we certainly don’t do “just fine.”
