When mobile optimising a website, is there any html you should add to the site's phone number so mobile devices recognise it?
Both iOS and Android recognizes phone numbers written in a sequence, like 070-112233, and makes them clickable. However if you use spaces, like 070 - 11 22 33, it won't always do that.
Related
Our testers rely on Chrome's responsive view in dev tools to see how our site works with various devices. Recently, we've been getting some issues reported with the "galaxy fold" layout.
It appears that Chrome considers the Galaxy Fold to be a 280px wide screen. Which seems unusually narrow compared to most every other smartphone out there right now.
In googling this device, though, it appears the Fold actually as a screen of 1536x2152 which is, a bit larger than 280px. And even accounting for retina/virtual pixels, I can't see how 280 correlates to 1536.
Is Chrome just wrong here? Or is it maybe confused with some older Galaxy device with an unusually small screen?
I believe the idea is that when the phone is folded, you should mostly get notifications and general info from the phone, and all view functionalities should be used with the phone unfolded. Because of that I believe in most cases the most appropriate way to deal with this situation is show a message to the user asking to unfold the phone in order to view the page. (Note that even the Galaxy Fold landing page doesn't display correctly when the phone is folded)
Using Chrome Browser DevTools I wanted to add a custom device in the Emulated devices tab.
You can choose several options such as the width and height. And also choose between:
Mobile
Mobile (no touch)
Desktop
Desktop (touch)
So the difference between Mobile and Desktop doesn't seem to be the touch events.
Is a device of 1000*1000px screen size Mobile (no touch)
and a device of 1000*1000px screen size Desktop
the same?
Or a device of 1000*1000px screen size Mobile
and a device of 1000*1000px screen size Desktop (touch)
the same?
So my question is:
What is the difference between Desktop and Mobile from a technical point of view?
Please explain the difference both conceptually (I'm specially interested in this one) and in the DevTools.
Edit for bounty:
I came to this doubt after answering other question and seeing how Google, Amazon and probably some other big companies make the differentiation on the way they display their pages. It is not on screen size but on device type (if I am correct). So I am wondering what are the technical aspects that make them discern between a desktop and a mobile, other than "a mobile can be moved".
I had a look at the source code. It's a little tricky to follow it all through, but I couldn't really see any big differences other than the fact there is capabilities array, which contains touch and mobile options. When touch is enabled, there are four touch events that are emulated. Other than that, there seems to be some scaling logic that differs between the modes.
Not sure if this is of much help. If you or anyone else is interested in looking deeper into this, I'd check out inspector.js, with most of the logic found in the _calculateAndEmulate and _applyDeviceMetrics functions.
Targetting Desktop and Mobile
The key difference between a mobile device and a desktop device, at least as far as the mobile/desktop setting in web browsers are concerned, is the physical size of the screen. This is not to be confused with the resolution of the screen.
When targetting a design at desktop, the interface is expected to include more expanded content on screen at one time, with the mobile version having the majority of the content hidden within icons to be expanded at a touch. The mobile version will be space optimised in comparison.
In fact, when a tablet has a larger than standard screen size e.g. the tablets with detachable keyboards available these days, mobile versions of the site can look over-optimised for space, which is the reason why browsers allow tablet users to opt to display sites in desktop mode.
The resolution of a mobile device might well be higher than on a desktop, but the fact that the screen is (at least assumed to be) so much bigger on a desktop machine, people using desktop machines are comfortable with more expanded content on screen at once than a people viewing on mobile devices.
Prime consideration comparison
Desktop:
Bigger, multiple screens that accomodate more content on screen at once.
More typing - Common input is keyboard.
Hover and click links - Common input is mouse.
Located on desk.
Heavy use.
More capable hardware (memory and processing power is cheaper).
Power performance.
Mobile:
Smaller, single screen where space optimisation is paramount.
Less typing - Common input type is touch-screen.
Touch and gesture.
Located in pocket.
Casual use.
Less capable hardware. I.e. Small and cool running memory and processing means less bang for your money.
Power efficiency.
One main difference is the User-Agent request header Chrome will send.
If you choose Mobile, you will get something like this,
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/46.0.2490.76 Mobile Safari/537.36
whereas with Desktop, it will look like this:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/54.0.2840.99 Safari/537.36
(Specifics depending on your OS, Chrome version etc. of course.)
So it will help you in testing/debugging, if you are doing server-side User-Agent sniffing. (For purposes such as to deliver different content for Desktop vs Mobile, to redirect to a mobile subdomain, …)
Does anyone know the approximately frequency range of a mobile phone microphone?
I tried to search for it everywhere but couldn't find the answer.
I know the range is different for almost every type of mobile but let's say a mobile from the newer generations like an iPhone 5 or something.
Thanks in advance.
We have a site with Cufon-font and it's working fine in all the browsers except IE therefore, we've used Google font for IE css. We are now intend to create mobile site for it using same Cufon-font. My question is, Will it be ideal to use Cufon-font for a mobile site ? And will it cause any performance issues ? if "Yes" is there are any solution for it ?
Because from research I found some bottle necks and positive result for mobile. For example
Opera Mini supports (to a certain degree).
IPhones are good at Cufon-font.
From my personal experience I've visited the current web site (which is using Cufon-font) with the Samsung Galaxy W mobile and for some detail pages it took 18 seconds load. Until it loads the page completely the fonts are displayed as normal.
Is there a way to overcome these issues ?
Any comments would be appreciated.
On the IE issue, IE 10 supports custom fonts and that should work for you, previous versions of IE do not. As far as the time to load, that all depends on the bandwidth, the device, etc. So if you loading of over 3G its going to be slow for a large file.
I'm building an application which I intend to deploy to iphone, android and blackberry. There's a unique characteristic I've noticed about my blackberry bold 9700, which uses an optical track pad for maneuvering around the screen. As an experiment, I deployed a simple phone gap application to my blackberry. I used the optical track pad to move a "small arrow cursor" around the screen to select and click on elements. When I compared my experimental app to some of the other native blackberry applications on my device, I noticed that none of them use this "small arrow cursor". Instead, sliding my thumb across the optical track pad will cause a "hi-light selector" to jump from one available link/button/field/image/list-item/tab etc... to another. This "hi-light selector" is much faster and user-friendly than the "small arrow cursor".
Now I need advice on the best technology to achieve the following:
I would like to write one set of code for an application to deploy to
iOS 4+ , android 2.2+ and Blackberry OS6+
On android and ios devices, you can simply scroll and touch buttons
for call to actions. On blackberry, I would like to replace the
"small arrow cursor" with the "hi-light selector".
I would like to use slide screen effects on android and ios devices.
On the blackberry, I would need a good substitute.
So my question is: Is there a practical way for a solo developer to achieve all the criteria above? If not, then what is the closest I can achieve to the criteria above? And what mobile javascript library would be best for the job[1]? Or do I really have to consider building with native technology (obj c for ios, java for android, java for bbos)?
I've only looked at sencha touch and didn't see anything relevant to the "hi-light selector".
I'd take a look at Appcelerator:
http://www.appcelerator.com/
... and ...
iUi:
http://www.iui-js.org/