What is a smartphone versus a feature phone?, Differences between mobile Web & mobile Apps, Mobile Website Critiques, Mobile Design Considerations, Extending Your Capabilities, Mobile Usage, Other Important Considerations, Getting Back, Sticking to the Bottom, Cover the Hover, Layout, Responsive versus Adaptive Web Design, Ten Top Mobile Websites
A Smartphone combines the functions of a cellular phone and a handheld computer in a single device. It differs from a normal phone in that it has an operating system and local storage, so users can add and store information, send and receive email, and install programs to the phone as they could with a PDA. A smartphone gives users the best of both worlds–it has much the same capabilities as a handheld computer and the communications ability of a mobile phone.
What is a smartphone?
Is palm/pocket sized: it needs to be portable so it can be used everywhere and anytime
Primarily operated through a touch-based user interface: hardware buttons and a physical keyboard can be present but are optional.
Has an average screen size of 3 to 6 inches: anything smaller makes touch-based interactions hard; anything much bigger makes it hard to transport everywhere easily.
Is used with a data plan (not just voice!)
What is a feature phone?
Is palm/pocket sized
Primarily operated through trackpad/trackball/joystick physical controls and/or a keypad or keyboard
Has an average screen size of 2 to 3 inches
More likely to be used without a data plan
What are the differences between a mobile Web site and a mobile App?
Mobile apps are built using Objective-C, C++, Java
Mobile apps only work on the phones they are designed for.
A mobile website is viewed in a browser. Mobile websites can be designed to work on any device with a web browser.
If you’re interested in mass market appeal for your content, mobile websites are the way to go.
If you’re only interested in reaching a niche market represented by usage of a particular device and operating system, a mobile app is a good choice.
Mobile apps can provide more feature-rich functionality–at least for now–because apps can work seamlessly with a device’s native applications in more complex ways, and apps don’t necessarily require a connection to the internet to function. This means that apps are better for utilities and games.
Mobile websites are better choices for delivering content, catalogs and shopping functions since that content is accessible by search engines. Since the number of mobile phone browsers that support richer versions of HTML is increasing rapidly, expect mobile website functionality to rival app functionality in the near future.
With mobile apps, you need to develop a new app for every type of device you want to reach, while just one mobile website can reach anyone with a device that has web browsing.
Lastly, mobile websites tend to cost less to maintain over time. That’s because to change an app you (probably) have to hire a programmer, and you need approval from the app store. Plus, every time a particular device is updated, you’ll need to change your app accordingly.
When you design and develop for mobile, you can use exciting new capabilities on the web to create innovative ways of meeting people’s needs. Technical capabilities like location detection, device orientation, and touch are available on many mobile web browsers today.
And additional capabilities may be here soon, including:
Direction: from a digital compass
Gyroscope: 360 degrees of motion
Audio: input from a microphone; output to speaker
Video and image: capture and input from a camera
Dual cameras: front and back
Device connections: through Bluetooth
Proximity: device closeness to physical objects
Ambient light: light/dark environment awareness
NFC: Near Field Communications through RFID readers
Starting with mobile puts these capabilities in your hands now so you can rethink how people can interact with your website and the world around them. As mobile web browsers continue to gain access to capabilities currently reserved only for native mobile applications, these opportunities will only increase.
Mobile usage generally consists of a couple of interaction types:
Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.
Other Important Considerations
It’s always interesting to see how design solutions migrate across digital borders. For example, many native iPhone applications have prominent “back” links in their navigation header. Apple’s mobile devices lack a physical back button and don’t display any system chrome actions for native apps.
But the presence of a “back” button in the header has unnecessarily migrated to mobile web experiences. Many devices (Android, Blackberry, Windows Phone 7, etc.) have physical back buttons. Even Apple’s mobile web browser includes a prominent back control in the application toolbar. Adding another back button in your mobile web experience’s header only confuses things. Someone using the site must ask, “Do both of these back buttons do the same thing?”
Sticking to the Bottom
While navigation menus fixed to the bottom of the screen might be a good idea in some native mobile applications, the variable presence of web browser menus and physical controls below the screen on mobile devices means they are often a poor idea in mobile web experiences. If you need a fixed menu, better to fix it to the top, as Twitter has done in their redesigned mobile web experience.
Cover the Hover
Since we’re on the topic of tips, it’s worth noting that any tips or actions that happen “on hover” (when a mouse pointer is positioned over a trigger) won’t work the same way on touchonly devices. Quite simply, there is no pointer to position over an interface element. There’s just our fingers, and though they cast a shadow, no mobile device I know of considers that a hover yet.
Therefore, any actions that rely on mouse hovers in our desktop web experiences need to be rethought—and that’s a good thing.
If you’re not interested in maintaining two sets of images (and who would be?), lean more heavily on CSS for your mobile web experience’s visual design. The gradients and rounded corners in Yahoo!’s design are rendered using CSS3 and look great on both high and low resolution screens, saving you the need to manage multiple images and your customers the need to download them.
Mobile browsers that don’t support CSS3 properties like gradient and rounded corners can simply default to a solid background and square corners. No harm done.
We can’t count on a single width for our mobile web experiences. For starters, even if every mobile device used 320 pixels for its devicewidth, we’d still have different widths when one of these devices changed its orientation.
To cope with this and whatever new device widths may come our way, we need to be highly elastic in our layouts. Whether you call them fluid, liquid, or flexible, designs that expand and contract based on available screen space are a must.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market. http://3200tigres.wwf.fr/
Adaptive design is just that, it is design which adapts to its surroundings, like a chameleon. Adaptive design is something which relies much more heavily on media-queries. A site itself will ultimately not adapt or change until it hits a media-query marker such as 320px or 768px. Adaptive design revolves around how a site is presented on a screen rather than the content.