What method are you using for the Facebook Like button functionality for your mobile web sites?
On desktop sites, I've used the following:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="websiteurl" show_faces="true" layout="button_count"></fb:like>
However, this does rely on JavaScript libraries being loaded, which can be problematic for some mobile devices, especially since the Facebook JavaScript library is pretty big, and we're trying to keep the size of the site to a minimum.
The other option is to use an the iframe functionality, which seems to be the best way to handle it, however, some mobile devices don't support iframes.
We're supporting the following:
iPhone
Android
Blackberry
Windows Mobile
So looking to target as many of those devices as possible. I'm beginning to think the iframe is the best way to handle it, but am not sure how supported it is across the board for the devices above.
Thanks all
Recently announced:
https://developers.facebook.com/blog/post/2012/06/20/bringing-like-to-mobile/
There is unfortunately not a great way to do this at the moment. Facebook is working on it, but there is not yet a timetable for launch.
Related
I have learnt some basics about developing iOS apps and curious to learn more. I recently came across the way websites are displayed on mobile and was willing to know as to are there are particular design patterns/methods supporting it. I tried opening walmart.com on mobile which gives same display of the website as on the screen, but if I open homedepot.com; the view I get on mobile is an optimized one.
How does this work? How do I get same/optimized display for different devices i.e. desktop screen, ipad or iphone??
There are several ways:
use the browser agent information and serve the customized files (html, css, js, etc) for that client (Generally, not recommended)
use the browser agent or screen-width to redirect to a mobile-specific site (what a lot of sites do; relatively easy)
do responsive design, which essentially uses screen-widths and css to custom the display of a site, This also has a nice side effect of responding to window resizes for a desktop browser. But this method requires more work than a mobile-specific site.
Any of the methods above usually require some mobile-specific things, such as meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells the mobile browser to set the page width to that of the screen, and prevent zooming.
For responsive design, you can use a css framework like 320-and-up to help. It's also a good reference to see how various mobile stuff can be done.
For a mobile-specific site, something like jquery-mobile can help a lot.
You can detect the type of browser that's loading your page and redirect to your mobile-optimized URL. You should probably make both the mobile-optimized and the full version of the site accessible to mobile users (see: www.progressive.com).
Google something like "iphone optimized website tutorial" to learn how.
I am creating a mobile site and was thinking jQuery Mobile would be the right platform. However, in getting through the requirements it seems what's needed is CSS for styling - nothing extreme, HTML forms with some dynamic elements (i.e. select option 1 and some things change), and some AJAX for grabbing data.
Do I need jQuery Mobile to make sure a site with that simple of an architecture is uber-cross browser compatible? I'd like to hit iPhone 3 & 4, Blackberry, and Android. Don't have to worry about tablets or the like, this is strictly mobile phone. We'll show the desktop site to everyone else.
jQuery Mobile is actually more about using mobile (mostly ios) type components, and gesture support. Yes, it helps to create a consistent cross-browser experience, but you don't need it to have your site show up correctly in various browsers. For that, you really just need to make sure all your code is valid, and that you're not using css (or other) hacks.
I want to make a mobile version of a website (you know, those with .m in the URL). How is this done, and what is different from a regular website? Can I still make my website in HTML/CSS/JavaScript, or do I also need some additional tools for mobile sites?
Final question - is there a difference viewing a mobile website on an Android phone versus an iPhone?
Thanks.
How is this done?
In the same way as you do websites, is just HTML/CSS/JS and a bit more.
What is different from a regular website?
Basically but not only:
The display size is the biggest (or in this case, the smaller) difference, you have to take care of small displays and viewports.
The user will interact with the finger and not with the mouse, so the clickable area must be bigger.
Can I still make my website in HTML/CSS/JavaScript, or do I also need some additional tools for mobile sites?
Yes you can (and should) use just HTML/CSS/JS but check for the different video/audio tags already on webkit mobile.
Is there a difference viewing a mobile website on an Android phone versus an iPhone?
Both come from webkit but they have small differences (like the touch events) but for mostly websites the differences are minimal.
A website, even a mobile one, is still a website, which means you'll use the same stuff as for any other normal website : HTML, CSS, Javascript, images...
The main thing you'll generally have to think about are :
Mobile devices often have small screens, and various resolutions,
Mobile networks are not really fast, and sometimes have awful ping ; so, your pages must be lightweight, and not include too many external files/images.
Touch-screens mean you'll have to put some spaces arround the things that must be clickable (to prevent the user from clicking the wrong link because two are too close)
iPhones and recent Android devices have some quite advanced browsers ; there should not be that many differences between them (you might find more differences between android 1.6 and 2.3 than between android 2.3 and iPhone ; and there are also many different browsers on android) -- still, don't forget testing on as many devices as possible
You can make your mobile version using HTML/CSS just like any other website. There are guidelines you can follow to help you with the process. Search Google.
You can also look at platforms that help you put things together like jqTouch
I have a software that eventually will have some reports to be accessed via iPhone.
Once I am not willing to develop an iPhone app, I´d like to make these reports accessible via iPhone Safari browsers.
GMail in iPad uses HTML 5, so I guess I can do the same.
My question is where can I find some resources to learn best practices doing so and how can I test it in a PC computer.
Thanks
Here is a similar answer I've given: Exclusive CSS for iPhone/Android
For testing you can use Chrome or Safari, as they are both webkit browsers (which is what the iPhone uses). Safari can even render as the iPhone user agent.
Hope this helps.
Please take a look at PhoneGap, I think that is what you are looking for.
You can emulate the program in xCode, but you will need an Apple for that. For PhoneGap also..
From the app architecture view-point you should also consider introducing app-specific optimization such us:
Simplify the app (show only what you need for mobile)
Minimize Application and Data Size
Aggregate Images into a Single Composite Resource (Sprites)
Include Background Images Inline in CSS Style Sheets
Keep DOM Size Reasonable
Ensure Paragraph Text Flows
Avoid Redirects
I'm beginning the process of learning the ins and outs of developing sites for mobile web browsers. Are there any good resources/communities online that discuss mobile specific site development issues?
My initial understanding is that to cover different phones you need to build one site that is enabled for browsers with the webkit engine (iphone, android, etc.) and another more basic site for other older browsers, is this assumption correct?
Also what does developing for webkit mean exactly? How is it different than just using javascript/css/html? Is it the same except that you limit yourself to webkit specific functions and css? I looked on the webkit site, but it didn't explain it in those terms.
Are there any other snafus I need to watch out for when developing for mobile browsers?
Your assumption is correct, you will need to develop multiple versions of your site targeted at different browser types.
Webkit is the engine used by Safari (mobile Safari), Chrome, and Andriod Browser (mobile Chrome?) you can use standard Javascript, XHTML, and CSS, the main thing, is making your site "fat-finger-friendly" since these devices are all driven by touch screens.
What I mean by "fat-finger-friendly" is that you have large links/buttons that are easy to hit with your finger, most mobile browsers are good at approximating which link you intended to touch, but if you have alot of stuff jammed together, it frequently gusses wrong.
Another consiteration is screen size, and thus the width/height of your site.
The best illustration I have of this is from Ars Technica -- checkout their site in your desktop browser, then check out their site in your mobile browser. Its a very slick version of the site. (http://www.arstechnica.com/)
Webkit is rendering engine designed to allow web browsers to render web pages. It provides the set of classes to display the web content in windows and implement different features which are provided by browser (such as links, fwd/backward etc).
You don't need to build the different sites for different rendering engines such as webkit. Designing of mobile web site should consider the screen size and how different components look/behave in different rendering engines.
Look at this question for more details of how to build the mobile friendly site.
If you want to support older browsers, then you should have multiple sites. But take a look at mobile browser stats first to decide if it's worth it. If you just want to make your existing website work for iPhone/Android or other phones with A-grade browsers, then you can customize with a mobile friendly CSS (for small screens). But to get good performance on mobile devices on slow/unreliable connections, you probably need to have a separate stripped down html.
Apple has a very good guide to help you optimize your site for iPhone. Most of it will also work on modern mobile browsers:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Peter Paul Koch has done an excellent research on different mobile browsers. He has several articles, but this one is a good start:
http://www.quirksmode.org/mobile/browsers.html
Like Nate Bross mentioned, you should optimize for touch devices. Unfortunately it's very difficult to know if a device has touch or not, since there is no media query for it. You can do user agent sniffing for some devices, but I don't recommend it. More discussion here: Optimize website for touch devices
For the moment, I detect touch events (with an exception for Chrome). If this returns true, I inject a touch CSS. A bit nasty, but the other options are worse:
function() {
if( /Chrome/i.test(navigator.userAgent) ) {
return false;
}
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
You specifically asked for sites for mobile web browsers, but you might also check out the possibilities of creating a mobile web app. It looks like an iPhone app (or Android for that matter), but it's built with the help of HTML5. You can do pretty slick animations with the CSS3 in the webkit image, and iPhone also has meta tags to hide the Safari navigation toolbars. Users can then bookmark your page to their home screen, and it will work just like a normal iPhone app. Of course you're limited to the browser and it's performance. But you can create multiplatform apps :) HTML5 + JS is the only multi-mobile-platform language Steve Jobs approves, and with the help of PhoneGap you can even get it into the AppStore!
If web-app sounds interesting you should check out jQTouch, jQuery CSS Transition plugin and of course Building iPhone apps with HTML, CSS and JavaScript by Jonathan Stark.
If your site is pretty simple (just content delivery) I'd suggest a service like mobify: http://mobify.me/
A lot of big publications use it, and I have too. In fact, Ars Technica (which Nate Bross pointed to in an earlier reply) uses this service to display their mobile content.
You have control over style, and that's about it, so if your site is more complex it might not be for you. Otherwise, it's a good service. You can have a mobile site up almost as quickly as it takes for the DNS for your mobile site's address to update.
I disagree that you need to build multiple versions of a Web site.
One simple HTML5 Web site will work across all mobile browsers and desktop browsers too.
The beauty of the latest developments of HTML5 is that you could use new Iphone/Android features like Geolocation, and older browsers will simply ignore the JS code if you carefully put it within try catch statements.
For "fat finger" type problems you can serve a different CSS which makes buttons bigger if you really must. Good browsers should make default buttons easy to press in any case.
Keep it simple and you won't have to see these fragmented & costly device dependent approaches. Write HTML5 by hand and use a validator. Good luck!