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, …)
Related
hopefully my questions won't be too vague.
I designed a pretty simple website. You can see an image of it >>> here
But now I'm trying to make a mobile version.
However I'm contemplating using a different html for the mobile version since the desktop version has jquery pop-ups (prettyPhoto) and a very large backround that scales, which aren't great on mobile screens.
I'm unsure of how to do that. My first question therefore is:
1.) How do I call a different html for mobile?
Also, for tablets, the website renders pretty well in landscape mode but becomes weird in portrait mode. So my second question is:
2.) Can this different html be called based on width? If so, any ideas how?
So if tablet is viewing website in portrait mode, they get the mobile version, if they are seeing it in landscape mode, they get the desktop version.
I am not sure what you are attempting to do, but from experience as both developer and mobile user, what you propose is not a good idea. Again, since you have not mentioned what you are attempting to do, I am speaking generally. Consistency is very important for UX, and delivering completely different behaviours and looks for orientation does not sound like a good usability. Also, remember that on today's tablets, switching orientations is very easy. Would you load each version on each orientation change? What if the user is on 3G?
But technically, it is possible to load depending on width or orientation. Use AJAX, and load the appropriate content.
Currently, front-end developers rely on CSS3 media queries (resolution detection) for targeting mobile devices. With the Galaxy Nexus and other new phones coming out at resolutions greater than 800x600 (1280x720 in the case of the G.N.), how will developers be able to strictly target mobile devices with those resolutions, and not grandpa/grandma's aging desktop running Windows XP?
EDIT: It's becoming clear that what I'm looking for, in an ideal world, would be some additional API to specifically target a handheld/tablet device. The "handheld" media query exists, but considering neither Apple nor Android support this, it might as well be forgotten.
Given the great foresight HTML5 and CSS3 have shown recently, it puzzles me why this problem hasn't been given greater thought.
The whole point of mobile detection in CSS is to accomodate the usually lower resolution. If a mobile device has a bigger resolution, it's obviously perfectly capable of viewing a webpage like a normal computer. I believe that's the point of having bigger screens.
If you need detection, use JavaScript and load in stylesheets as needed.
Resolution detection is not the only detection that media queries allow; you can target pixel density on devices too:
http://menacingcloud.com/?c=highPixelDensityDisplays
Many of the newer devices with higher resolutions will also be using higher pixel densities.
I have an existing website running. I want this site to be able to be viewed on mobiles smart phones as well. I am ready to shave off some stuff, but would like to know how can I test this and are there any tools/guidelines on how to repurpose the site to be best viewed on mobile phones ? How to detect on the web site whether a mobile phone or a PC is hitting the site and accordingly serve the appropriate content.
There are few factors to consider such as:
- screen size
- touch vs non-touch
To detect whether the mobile phone hitting your site, you can simply verify the user agent.
There is a good article on this at A List Apart which will answer your implementation questions: Put Your Content in My Pocket
You can test by setting the user agent of your browser to that of mobile device. This can be done in safari under the develop settings, or firefox has various plugins.
And a tip, don't use anything that requires hover functionality. Touch screens don't hover.
You will find out it's a strange new world at http://mtld.mobi/
First decision you should make is which mobile platforms you want to support, then start coding...
As some one mentioned http://mtld.mobi/ is the best place to start for resources but for testing I would use http://ready.mobi that will test and debug your site and provide interface to viewing your website in mobile platforms.
First you need to decide what platforms/browsers you are going to support. If it is only smart phones like Android/Iphone/Blackberry it would be a pretty safe bet that as long as the website works in crome and isn't VERY javascript intensive and the site is catered for smaller screens it would be fine.
That is the theory in practise mobile is mobile and real world testing is the only way to go for 100% coverage.
I would like to develop on a mobile device, probably with Windows Mobile platform, which device would you guys recommend for me to use? But one requirement on the device is that I need that device to be able to capture signature (human writing on the device).
Many Thanks
Sounds like any PocketPC (or "Professional") device would do. Personally I currently have an HTC Touch Pro, which would be suitable for what you describe. For testing purposes, it might also be a good idea to also test on a device with smaller resolutions (I have an HTC Elfin for example that would do well here, but it shows its age..). Or on the emulator provided with the SDKs.
However some of the newer ones have capacitive touch screens and no stylus. (For example HTC HD2.) So while HD2 is otherwise an excellent phone, capturing a human writing on it probably wouldn't work as well as older devices with resistive screens and a stylus.
Any Windows Mobile 6.0/6.1 based phone with resistive touch screen. A good example is HTC Touch Pro2.
Also, some S60 5th edition phones, such as N97, may be a good choice.
It depends on the languages you intend to use to write the application.
If it's Java, I'd go with an android system.
If you're a c# coder I'd say any windows device would be ok.. You could likely get one on EBay for dirt cheep and for the most part you can be sure your code will run on most of them (I know this is a generality), especially if you keep the code simple.
If you're a c++ developer then the same as above, any pocket PC/winmobile will do.
If you own a mac, and you've written apps in objective c then IPhone is a good choice.
In part you have to base decisions like this on what you know going in.
If you're a blank slate.... well then you've got to figure out what direction you want to take your knowledge. I've personally picked Java and Android because I've recently been convinced it's the road to the future.
Developing an application with impressive and a little complex GUI is quite easy for Pocket PC platform. But if I want the same application to run on SmartPhone platform as well, I need to make extensive changes in my application.
Smart Phone doesn't even support radio buttons.
I want my application be usable on as many mobiles as possible. Can anyone help me regarding this.
If I say that I should only develop for Pocket PC because SmartPhone platforms are a very small part of the market, to what extent is this true or false?
Or I have to develop for the both platforms? :S
I've developed for both using a single UI-- it's a bit annoying but not impossible. You have to avoid certain controls (use LinkLabels instead of Buttons, etc.), or even switch out whole forms depending on the device.
For example I have a form that really just needs a whole different layout for smartphones. I build two different versions of the form and have them both. The system picks which form to display at run-time based on the OS version. It's not a lot of extra work since the smartphone form is fairly scaled-down.
Even though there are a more pocketpc users out there, the smartphone people are very happy to have options.
I can't say if you should develop for Windows Mobile Standard or not, that's dependent upon your market and application. I do know from experience that you have to treat Standard and Professional as two completely separate platforms and can share very little code between the two. They need two different designs, both UI and program wise, and also two different approaches in terms of features and functionality.
Unless you have the need for WM standard devices then I personally would go Pocket PC only. I would say that 95% of the WM devices I have seen in the 'real world' are touchscreen pocket pcs.
I wouldn't touch Windows mobile standard with a barge pole as the devices are soo rare! I mean just look at HTC's website. Out of the 26(or something I cant be assed to count) windows mobile devices they currently sell, only 6 are Windows mobile standard!