Choosing the Right Tools for Your Mobile Project

واضح آرشیو وب فارسی:پی سی سیتی: Choosing the Right Tools for Your Mobile Project

************************************************************ **********************
************************************************************ ***********************8 (*********************************************************** *****/ck.php?zoneid=8) ************************************************************ ***********************9 (*********************************************************** *****/ck.php?zoneid=9) ************************************************************ ***********************10 (*********************************************************** *****/ck.php?zoneid=10)
Mobile web browsing is the next big thing. At least that’s what the pundits say. Recent data shows there are about 4 billion mobile users (almost half the planet) (source (http://bit.ly/c44gQM)). In 2011, smartphone sales will surpass desktop/laptop computer sales, moving over 400 million units per year (source (http://bit.ly/Sg0A2)).

But haven’t we heard this all before? Hasn’t the mobile web been the “next big thing” for each of the last several years? What gives? It doesn’t really matter that 4 billion people have mobile phones unless they are using them to browse the web.

In previous years, two big factors have prevented the mobile web from taking off like everyone thought: inferior hardware and sub-par web browsers. The iPhone changed both for the better in 2007. Smartphones have taken a giant leap forward in the last three years and mobile Safari has led to several WebKit-based mobile browsers being developed.

So thanks to the iPhone and several other mobile innovations that proceeded it, mobile is for real this time. 25% of those 4 billion people are using the web from their phone today. (source (http://bit.ly/9UYl73)).

If you haven’t built a mobile website before, the whole scene might seem a bit overwhelming. Today we’re going to give you the information necessary to answer some of the tough questions that come up when designing a mobile experience:

Do we need a dedicated mobile site or just a mobile-optimized one?
What browsers do we optimize for? How can we test them?
Should we use a mobile framework? If so, are we depending on it for the UI?
Which mobile framework is the best fit for my project?
Which frameworks work best for building a native app?
The Browser Landscape

Prior to diving into your text editor and starting your first mobile site, it’s important to understand the lay of the land. Here are the worldwide browser leaders measured between July and December, 2010 according to StatCounter (http://gs.statcounter.com/#mobile_browser-ww-monthly-201007-201012):

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/browser-ww.jpg (http://gs.statcounter.com/#mobile_browser-ww-monthly-201007-201012)

One clarification to be made is that iPhone and iPod Touch are treated separately above, but they are both the same browser from a web developer’s point of view. So if their market share is combined appropriately, it comes in ahead of Opera by 3.34%, making it the market leader.

Opera is a big deal now because it’s platform-independent, available on most smartphone operating systems including iOS, Blackberry, Android, Windows Mobile and Symbian. Opera Mobile v10+ and Opera Mini v5+ (different browsers) both have solid web standards support. Opera also provides excellent developer tools (http://www.opera.com/developer/tools/) for testing.

Most modern mobile browsers are built on the open source WebKit framework, which debuted in a mobile capacity on the iPhone. iOS, Android, Symbian (Nokia), webOS (Palm) and Blackberry v6+ devices all have WebKit browsers by default. WebKit’s javascript and web standards support is excellent, so the only real thing to worry about is optimizing for various device resolutions.

A few other browsers are not big players at the moment, but are worth keeping an eye on. SkyFire (http://skyfire.com/) tops the list, available on Android and iOS devices. It recently made headlines for generating over $1 million after only three days on the app store, forcing Apple to temporarily disable sales for a short time because of the demand. SkyFire is known for it’s social media integration and ability to convert flash video to a native format that can be seen on the iPhone.

Firefox Mobile (http://www.mozilla.com/en-US/mobile) is another up-and-comer. It’s available for Nokia N900 phones or any Android 2+ phones and is based on the same technology as Firefox 4 for the desktop. It boasts great video support (including flash), social sharing features and even user agent switching for more advanced users.

Even Microsoft’s Windows Phone 7 is holding it’s own alongside iOS and Android browsers (http://pocketnow.com/windows-phone/exclusive-windows-phone-7-web-browser-comparison). So even a browser with the infamous “Internet Explorer” name gets a fresh start in the mobile space.

Mobile First

Luke Wroblewski was the first to boldly proclaim that we should design websites for the Mobile First (http://www.lukew.com/ff/entry.asp?933). Luke argues that designing for mobile first helps you focus on the most important elements since you have such limited screen space. He also says that mobile phones are now capable of more than desktop browsers, such as location-aware features and multi-touch gestures. So why not have the full arsenal of capabilities available to you when designing?

Perhaps the most compelling reason to consider designing for mobile first revolves around media queries. Media queries are part of the CSS3 specification that allow you to specify certain styles based on device parameters, most notably width or height. With either of the following lines of code, I can show styles for a device no wider than 480px:

@media screen and (max-device-width: 480px) { .column { float: none; }}For a great run-down about media queries, check out “Responsive Web Design” (http://www.alistapart.com/articles/responsive-web-design/), an article by Ethan Marcotte.

The problem with media queries is that they don’t resolve properly on many mobile devices (source: Rethinking the Mobile Web (http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu)). They are, however supported well on modern desktop browsers and even enabled in not-so-modern browsers with help from a javascript file (http://code.google.com/p/css3-mediaqueries-js/). So if we start with mobile and use media queries to progressively enhance the layout for the desktop, everything works out! By using media queries to optimize a desktop site for mobile, you run the risk of the mobile browser not rendering it properly.

Meta Tags

Mobile meta tags aren’t nearly as important as they used to be, but there are still three mobile-specific tags worth understanding:

The viewport meta tag is the newest and most powerful when it comes to mobile, allowing developers to share the width/height of their content with the browser and control how the content is allowed to be zoomed/scaled by the user. Most modern mobile browsers support this tag. Apple gives a nice overview of what the viewport tag is capable of and also details a few iOS-specific tags in their HTML reference library (http://bit.ly/a75buH).

When the viewport tag is not supported by the phone, it can fall back on one of two older meta tags. Both should become more obsolete in the coming years, but are a good fallback presently. “HandheldFriendly” simply identifies your site as “mobile friendly” to the phone, but doesn’t let you set any additional parameters. “MobileOptimized” is a proprietary Microsoft tag, which does allow you to specify a width, but isn’t flexible as to zooming or scaling. (source: http://davidbcalhoun.com/tag/mobileoptimized)

Use a Mobile Framework

While it’s not required, most great mobile experiences start with a framework. They help developers create rich, interactive mobile sites with minimal code and are optimized for several platforms out of the box. Popular frameworks also have growing communities, dedicated to improving the product across different browsers as the technology rapidly evolves.

jQTouch

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/jqtouch.jpg

This framework is primarily focused on optimizing websites for the iOS operating system, although it can be easily adjusted to work well for other WebKit-based browsers as well. It’s very flexible and has a solid community of developers working to improve it. (http://jqtouch.com/)

Pros

Very popular framework with an active community
Optimized for WebKit, especially iOS
Great native-like animations and themes
Good for javascript novices
Cons

Nearly 70k minified, includes desktop version of jQuery
It takes some research to find good tutorials
Meant for smaller sites, probably not web applications
jQuery Mobile

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/jquery.jpg

jQuery is the big player we all know and love on the desktop. They have recently released an Alpha of their mobile framework, which brings a lot of the same goodness to mobile devices. What’s most impressive about this framework is it’s adaptability across all the most popular browsers and operating systems. Their graded browser support chart (http://jquerymobile.com/gbs/) clearly outlines the support across all platforms. (http://jquerymobile.com)

Pros

Built on the world’s most popular javascript framework
Huge community
Supports virtually every modern mobile browser
Only 13k minified
Great UI tools, better for cross-device consistency
Great documentation, novices can pick it up easily
Cons

Only in Alpha 2 phase, still has a little ways to go
Doesn’t really look “native” on any device because it supports so many browsers
Zepto

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/zepto.jpg

Zepto, created by Thomas Fuchs (script.aculo.us author), is the perfect mobile framework for jQuery pros. It’s less than 3 kb minified, enables jQuery-compatible syntax (most of it) and is optimized for mobile WebKit browsers. There are no default UI controls, so it’s definitely for the more minimalist coders that are interested in a custom design. The fun chalk iPad project (http://chalk.37signals.com/) from 37signals was created with Zepto. (http://zeptojs.com/)

Pros

Only 3.3k minified!
Active community led by someone with serious javascript chops
Designed with jQuery-compatible syntax
Cons

No UI tools, only the basics
Documentation is good, but demos are lacking
Geared towards more experienced jQuery developers
Sencha Touch

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/sencha.jpg

Sencha (includes EXT JS desktop framework) touch is a very impressive javascript framework specifically geared for mobile web apps. It’s probably the best all-in-one framework right now. However, it’s not for beginners. All of the front-end syntax is javascript, so you need javascript chops and experience with the library to make the most of it. Right now it is compatible with iOS and Android devices. (http://www.sencha.com/products/touch/)

Pros

It’s beautiful
Great documentation and (paid) support
Scalable, built for serious web apps
Has all the UI tools you would need
Cons

Only optimized for iPhone and Android so far
Steep learning curve, must be experienced with EXT JS
All javascript front-end syntax
Runs fast, but framework is 369k
Yahoo! Blueprint

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/yahoo.jpg

Blueprint is a robust framework meant to optimize for literally thousands of different devices. It takes raw XML, communicates with Yahoo!’s web services to generate the pages, then renders the content optimized for the device. The SDK is for more advanced users, but for anyone that has experienced the mobile Yahoo! properties, you know it is very powerful. (http://mobile.yahoo.com/devcenter)

Pros

Comprehensive device support
Robust features and APIs
Cons

As mobile browsers evolve, this might be overkill
Requires Yahoo! web services to work
Steep learning curve
Developer site and documentation is confusing
SproutCore Touch

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/sproutcore.jpg

SproutCore is a popular javascript framework for desktop browsers that gives web apps a native look and feel. It’s best known for running Apple’s MobileMe and iWork web services. SproutCore Touch basically adds touch support to the existing framework. It’s still one codebase as I understand it. So if you already have a SproutCore app, it’s pretty easy to optimize it for something like the iPad. (http://blog.sproutcore.com/post/531215199/introducing-sproutcore-touch)

Pros

Gives almost instant touch support to existing SproutCore apps
Mature codebase with some big supporters, like Apple
UI tools are beautiful on the desktop and mobile devices
Cons

All javascript front-end syntax
Steep learning curve
Jo

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/jo.jpg

This newer framework is lightweight (8k) and has some really nice elements to it. Compatible with webOS, iOS, Android and Symbian, it’s probably a great fit for smaller sites that don’t have a lot of UI demands. Jo is still new, but it will be really interesting to see how the open source community builds on this solid foundation. (http://joapp.com/)

Pros

Lightweight (8k), still has nice UI tools out of the box
Compatible with several operating systems
Cons

Community is not as active as with other frameworks
UI doesn’t really feel native on any device
Codebase still needs more work to be considered with the top-tier frameworks
DHTMLX Touch

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/dhtmlx.jpg

This framework is much like Sencha and SproutCore in that it’s all javascript syntax on the front-end and the code is derived from a desktop framework. With that comes an arsenal of robust UI elements and functionality. The touch framework just came out in December of 2010, but look for it to be a player moving forward. (http://dhtmlx.com/touch/)

Pros

Comprehensive UI tools to fit any need
Built to do heavy lifting for web applications
Cool drag & drop visual designer tool (see video (http://dhtmlx.com/touch/designer.shtml))
Rich feature set based on desktop framework, lots of potential as the framework grows
Cons

All javascript front-end syntax
Steep learning curve
Still in Alpha at the time of writing, documentation is evolving
CSS Grid Framework

The CSS Grid (http://cssgrid.net/) framework is completely different from the above-mentioned tools because it doesn’t include any javascript or UI tools. Technically, it’s not a mobile framework. It’s a fluid, 12-column grid that scales from 1140px wide down to 430px beautifully. You can build with a Mobile First mentality and use media queries to scale your site all the way up to 1140px.

The days of fixed-width websites are numbered as mobile becomes more of a focus for designers and their clients. The CSS Grid framework gives designers the ability to design for one flexible grid and optimize for devices across the entire spectrum.

Pros

Same HTML/CSS works for your desktop and mobile site
Progressive enhancement at it’s best thanks to media queries
No javascript dependencies to render on mobile devices
Cons

Not all designs can work with this framework; you have to design for it.
No native or touch-friendly controls
Best with smaller sites, probably wouldn’t scale for a web application
Testing Tools

Testing on real phones, while optimal, isn’t always an option. The next best thing is to use a simulator to test your mobile website. It takes quite an effort to find all the available simulators online, so I’ve compiled a list here:

Nokia (Symbian S60)- 5.0 is for touch devices, 3.0 is the latest for non-touch devices. SDKs can be downloaded here- http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Symbian_SDKs/

Opera- simple Mac/PC versions of the Opera Mobile emulator are available for download and they have a web-based version of their Opera Mini Simulator. (http://www.opera.com/developer/tools/)

iOS (Apple)- Apple’s simulator is in their SDK and includes support for the iPhone and iPad. The SDK requires OSX to run. (http://developer.apple.com/devcenter/ios/index.action)

Blackberry- Blackberry simulators are available for download on their website and require Windows in order to run. (http://na.blackberry.com/eng/developers/resources/simulators.jsp)

Android- the Android SDK is available for Windows, OSX and Linux, which includes an excellent device simulator. (http://developer.android.com/sdk/index.html)

webOS (Palm/HP)- the Palm SDK is available for OSX, Ubuntu and WIndows computers on their website. (http://bit.ly/cl9jc1)

Microsoft- the 6.5 developer kit is publicly available (http://www.microsoft.com/downloads/en/details.aspx?FamilyID=20686a1d-97a8-4f80-bc6a-ae010e085a6e), while nothing has been officially released for version 7 yet. Engadget ran a tutorial on how to get it running if you are anxious- http://www.engadget.com/2010/03/20/taking-the-windows-phone-7-series-emulator-for-a-test-drive-vid/

Firefox Mobile- the Firefox Mobile browser is a simple download for Windows, OSX or Linux computers on their website. (http://www.mozilla.com/en-US/mobile/download/)

In Conclusion

So it turns out building a mobile website in 2011 and beyond isn’t so bad. For the most part, mobile browsers now support HTML5 and CSS3 better than desktop browsers. Plus, there are all these open source frameworks to help you with the design and interactions. When it comes time to build your next mobile site, hopefully this article will eliminate the guesswork and help you make a great decision.

(rb)

http://feeds.feedburner.com/~ff/Noupe?i=6DkNc5f0URc:HDi5kPeqOA8:V_sGLiPBpWU (http://feeds.feedburner.com/~ff/Noupe?a=6DkNc5f0URc:HDi5kPeqOA8:V_sGLiPBpWU) http://feeds.feedburner.com/~ff/Noupe?i=6DkNc5f0URc:HDi5kPeqOA8:F7zBnMyn0Lo (http://feeds.feedburner.com/~ff/Noupe?a=6DkNc5f0URc:HDi5kPeqOA8:F7zBnMyn0Lo) http://feeds.feedburner.com/~ff/Noupe?i=6DkNc5f0URc:HDi5kPeqOA8:gIN9vFwOqvQ (http://feeds.feedburner.com/~ff/Noupe?a=6DkNc5f0URc:HDi5kPeqOA8:gIN9vFwOqvQ) http://feeds.feedburner.com/~ff/Noupe?d=7Q72WNTAKBA (http://feeds.feedburner.com/~ff/Noupe?a=6DkNc5f0URc:HDi5kPeqOA8:7Q72WNTAKBA)

نکات طراحی صفحات وب
افکت های زیبا
تکنیک های طراحی صفحات اینترنتی
جدیدترین کد ها - منو های زیبای css

این صفحه را در گوگل محبوب کنید

[ارسال شده از: پی سی سیتی]

[مشاهده در: www.p30city.net]

[تعداد بازديد از اين مطلب: 303]