How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.
Related
I have a website that I am trying to design to be responsive on mobile. Without doing much responsive styling, I actually like the way it looks on mobile. I read that mobile phones automatically make certain adjustments to websites to make them more compatible with mobile devices. I am pretty certain that is what mobile devices are doing with my site.
My question is, if I am content with the way my site looks on mobile without doing much responsive design, is it not necessary to do any further design. Can I rely on the mobile phones to ensure my site is reponsive? If it is better to do all of my own responsive styling, how important is it that I add responsive styling immediately?
Note: I am referring to that way my site looks on mobile without the meta viewport tag. When I add that tag, the mobile adjustements go away and I encounter some issues with my own styling (but I have a whole other question devoted to that). Also, I am looking at my site primarily using my Samsung Galaxy S4 using the Google Chrome browser. I did do certain responsive styling, but not a ton.
If all you care about is what the design looks like on your mobile phone specifically then no, you wouldn't need to design any further.
However, you should take into consideration what it might look like for other users with different devices and device widths.
It is best practice to use the meta viewport tag to work across all devices and allow your site to be truly responsive.
Is your site mobile friendly? Try using Google's mobile friendly test: https://www.google.com/webmasters/tools/mobile-friendly/
Google is updating their search algorithms to place a higher importance on a site being mobile friendly. If it is not your site will not rank as high in their search index. Read more about it here:
http://googlewebmastercentral.blogspot.com/2015/02/finding-more-mobile-friendly-search.html
I'm trying to build a website using the technique described in this article: pure CSS parallax.
This technique requires browsers to support 3D transforms (and specifically perspective/preserve 3d).
It's working on the majority of devices and browsers no problem, and where it doesn't it is easy to detect if it'll break (such as lack of transform-style: preserve-3d in IE, or lack of 3d transforms at all) and fix it accordingly.
However, one browser stands out in exceptionally f*******g me over when I try and make it compatible to any degree - Android stock browser. Versions of the browser on Android 4+ support css3d transforms but are completely incapable of rendering them properly, with the big bug being that -webkit-perspective: 1px, while technically supported has absolutely no effect in this case (transform: translateZ(xpx) elements).
As far as I see it I have two options:
Detect the Android stock browser and serve CSS accordingly
Detect perspective not to be working and serve CSS accordingly (unlikely)
I've yet to find a foolproof/futureproof, elegant way of detecting the Android browser on the back end with PHP, with the only options being hefty API's and what I consider to be lacklustre abuse of mobile detection libraries.
I have absolutely no idea how I'd go about doing no.2.
Any help appreciated
I don't know if this applies to Android or iPhone. I have an Android 2.3.3 for testing and an iPod Touch 3rd generation with iOS 5 on the way. But I know its a problem on my buddy's new Blackberry.
Basically, my buddy has text zoom (or whatever you call it) turned on so that text is displayed at like 150% of its normal size on any web pages he views on his Blackberry. Well, I have optimized my sites with media queries so the text already increases to 150% on small screens. On his device, the device setting is compounded with my CSS settings and the text becomes absolutely enormous!
I'm sure this is a problem for a lot of users since there are so many sites out there with tiny text that has to be zoomed for mobile.
So my question is: Is there some kind of best practice approach or any solution to dealing with these folks that have turned on text-zoom or an equivalent feature? How can I make my text not be obscenely large and unuseable for them? Do I just leave it in their hands to turn the text zoom down?
Also, does Android 2.3 have some kind of feature like this that I should be testing for?
Thanks ahead.
I don't think there is a solution to cases where users have increased their text size. If someone knows of one, please indicate so. In the meantime, I DID find out that you can make device-specific adjustments for mobile devices with these:
-moz-text-size-adjust
-webkit-text-size-adjust
-ms-text-size-adjust
Details can be found here:
https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust
I'm going to mark the question as answered since I don't believe a solution to the original issue actually exists at this time.
The Android Browser can't scroll inner divs. That means using SlickGrid with its default configuration is impossible.
Fortunately, SlickGrid has an autoHeight argument that makes it not use inner scrollable content, so it works on the android. Unfortunately, when autoHeight is enabled, onViewportChanged gets called once to span the entire viewport and is never called again, so it attempts to load all the data at once. I'm lazy-loading and displaying so much remote data that if you try and load it all at once it crashes mobile devices, so that's a no go.
If SlickGrid were smart enough to know what's on the screen even if autoHeight is enabled, that would solve my problem. I'd love it if that was a feature in core, since that would solve many problems on the desktop as well as on Android devices.
I also tried using iScroll 4 to get around the Android limitation. Unfortunately, it doesn't trigger onViewportChanged at all when I use iScroll.
I will probably have to solve this by ditching or modifying onViewportChanged to handle my own scrolling events. I was wondering if there is an existing solution for this though.
I ended up writing my own version of slickgrid for this purpose. Also, this will become irrelevant when Google Chrome becomes the default browser, as it actually has decent support for scrolling.
I would not recommend using SlickGrid for apps/pages targeting mobile devices. The grid was not developed with mobile devices in mind. They require a completely different approach optimized for that particular use case.
The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!
We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?
This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.
What it currently looks like:
What it should look like:
(I do not have the specific device model used in the screen cap)
In CSS, pixels are not pixels.
Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.
Samuels answer is correct.
There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).
There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.
There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.