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.
Related
I just got notification that my site is now in the mobile first index in Google.
So does this mean that I should change my developing and work at a lower resolution oprimarily and then check "just to make" that it looks OK at higher resolutions?
I would imagine that there's very few people looking at my website on a mobile device due to its nature.
Tablets and smaller PCs maybe though.
I also got notified on Google Search Console.
I don't think that to optimize for it is to lower your website resolution.
Some basic optimization I might suggest are:
Make your website responsive
Avoid using heavy fonts and images
You can declutter your mobile view from the desktop, do not worry if the content will be different, as long that it will still relevant to your desktop.
Make sure your pages are crawlable by search engine robots (Check your javascript)
You can check this timely discussion about optimizing for mobile-first indexing
https://www.propelrr.com/blog/questions-google-mobile-first-indexing
i am developing an ios and android app from Ionic. my problem is since we have different device, different density. How do you handle the displaying of images. Are you just creating one image file that will be used on all the screen device?
The short answer is that yes you use one high quality image and let the browser on the device do the down scaling.
The slightly longer answer is that you can do some optimizations because your locked into a pretty tight set of standards compliant browsers so you'll want to follow best practices for those. By that I mean if you have graphics that are in vector format, great leave them as SVG's if you can. If you have raster images you'll want to have them at a resolution that looks great on your biggest retina display and you'll want to use media queries to adjust where necessary.
You can also use CSS tricks to replace images by hiding and showing appropriate images at appropriate times.
I am trying to convert my current website to a mobile version. I will be creating different views (I am using codeigniter) but want to make sure the CSS will look perfect on all phones. What are the universal/standard specs for a mobile website?
Also, what language is recommended? I was thinking just changing the CSS to a specific width and redesigning according to that width.
As there is no fixed limit of screen width/height of mobile devices. You must consider using percentage value for sizes. That way your mobile site will be more compatible.
For info on effective mobile websites, ie, what you should include and what not. Take a look here
http://www.qsrweb.com/article/202567/3-tips-for-creating-an-effective-mobile-website
For width related queries, see this,
Mobile version of my website, what design width is optimal?
A quick google search yields the following:
W3C's thoughts: http://www.w3.org/standards/webdesign/mobilweb.html
Smashing Magazine's thoughts (I have enjoyed some of their comparison articles before): http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
You will want your page to be easy on the fingers, keep the text displayed to a minimum at first (i.e. summary + expanding things), and overall run fast. You will probably want to have multiple levels of fallback on things like CSS so that people running a CSS 1/2 browser can still use the website, even though CSS3 browsers may have a better experience.
Your site could also make use of media queries to choose a stylesheet based on the size of the user's screen (there are several standard sizes, especially if you consider the popular devices).
Javascript and other things like that should also work well for fallbacks. Using things like HTML5 canvases and WebSockets and such are good since they can be assisted directly by the mobile device hardware, but your script should handle those things not being available as well.
And, as always, an easy to navigate page goes a long ways just as it does with normal development. If the user can tell just by looking at the page how to use it intuitively (remember, intuitive for you isn't always the same as someone else), then I would think you are on the right track.
There are many takes on designing sites for mobile devices. The most straightforward, is to build an entirely separate user interface, just for the mobile site.
The next method would be to use CSS media-queries. This allows you to re-use your current UI and styling, but you can tailor it's content to specific widths and devices.
Lastly, is fully responsive design. It's rather similar to media queries, except that it uses percentages, instead of absolute pixels. It's the most seamless way, that a standard width-webpage can scale to fit the screen of a smaller mobile device. It can even scale up easily!
Here's a good place to start learning about responsive web design, and how it applies to mobile devices - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Try scaling the size of your browser while on that site. Notice how the layout changes. That's CSS media queries at work.
Quick Question
How to show webcam rapidly on Adobe AIR application with Stage3D?
Detailed question
About
My goal is to create prototype of AR (Augmentation Reality) mobile application. I have chosen Adobe Flash AIR for good 3D graphics support on mobile and AIR apps easy to porting to many mobile platforms (iOS, Android, Blackberry Playbook).
Purpose
I want to show up complex 3D model (so i need to use Stage3D). And underneath a video from Front Camera. As usual AR application.
Here is examples
(source: augmentedplanet.com)
Problem
Stage3D not transparent at all so i can't use StageVideo for the rapid showing of content of Camera, because StageVideo doesn't seen under Stage3D.
So
And only decision i have found - it's to create flat surface with dynamic texture updating.
Here is example of integration of webcamvideo with Starling Framework (Stage3D). But with many ordinary mobile devices we get such a big texture updating (almost as size of screen resolution), that any app will fall down to low fps or even crashes down. What i have done on my Galaxy Note for example. With 320x200 texture size it's has fairly good performance but look ugly at AR app.
So is any brilliant solution for create AR on AIR? Is anybody got same challenge?
This use case is unfortunately not well supported in AIR. Your best bet is really the manual upload. It might help to add votes to feature requests on Adobe forums for transparent Stage3D.
Now for why this feature was low priority: If you are doing AR you are probably already doing CPU work on the video. That means you already read back the camera data for processing either on the CPU or as a Stage3D texture. That's the expensive part, not the uploading a texture back to Stage3D.
In order for this to be useful there would need to be a lot of complicated code paths working together flawlessly. On all supported devices:
Read back low resolution camera for CPU or GPU AR image processing
Show passthrough high resolution camera image
Overlay 3D with blending
This is unfortunately very hard. On many mobile chipsets video/camera, CPU, and 3D are very separate units so it is hard to share data between them without stalling or copying. It can be done very well IF you target specific hardware. I know this does not solve your problem but I hope it explains why this use case does not work well in AIR yet. I think you have those options:
Go with AIR and readback/upload. It will be very slow on some HW, but it will work reliably.
Go native. It will be a huge win in the best case, but you need a lot of custom code and testing for every single target.
Go native on a single very narrow platform. Many very cool AR demos do this. Look at SDKs for AR from GPU vendors. Most of them have one.
Make the best out of a bad situation: Stick with low res and uploads but add some interesting filters on the video. Once you paid for the upload doing Stage3D stuff with you texture is very cheap.
I hope this helps a bit. While developing Stage3D this exact use case came up every now and then. I still think it is really cool! Maybe this post explained why it never made the top of the list yet.
In mobile development world, which is the best programming language/technology that we can use so that almost the same code that will run on all versions. I know it is little bit of a broad question and the most probable answer is Java. If I want to provide support for maximum number of devices(android, Iphone and other high end classes only), how many different code bases I should have?
Thanks,
GL
[...] that we can use so that almost the same code that will run on
all versions [...]
All modern mobile smartphones / devices support HTML 5 / CSS / Javascript.
PhoneGap Augments these basic tools with the rest of the functionality you'd need.
Projects like jQuery Mobile are gaining a lot of traction as well.
I'd start there.
I wouldn't say it's "The Most Widely Used" technology... at least not yet... but I have a hard time believing anyone wouldn't agree things are going that direction.
UPDATE: For anyone who hasn't seen PhoneGap before - this (free) product will take your HTML / CSS / JS, and package them up inside a native application (which includes some shims to startup your app, and augment it with access to camera / files / gyro / etc from javascript). Your app works offline, and can be deployed through all of the available standard app stores.
If it's a web app, then you can develop using a highly adaptive layout, HTML 5, CSS, and the JS library of your choice, and you'll be fine.
If you are running native apps, you're pretty much stuck: Java for Android, Objective-C for iOS.
Regarding HTML5/CSS3, even if it is possible to reuse 90% of codebase (mostly non-rendering JS), there are significant differences when it comes to graphical presentations. Even, if you think that because Androids and Iphones use Webkit, so they should have roughly similar capabilities, they are quite apart.
Just to give a few examples: CSS3 3D transforms are mostly not supported on Android phones (Android 2.3), Audio tag implementation varies between Android and Iphone (Androids do not use buffering and streaming, while Iphones do).
And just do not get me started on how Androids lie about dimensions and aspect ratio. It is a bloody mess.
We have not tested latest Windows mobile phones, but until IE10 is shipped, support for HTML5 in windows world is abysmal.
To conclude, currently, there is no technology, "that we can use so that almost the same code that will run on all versions." HTML5 is 'almost' there, but will take perhaps a few years for Androids to catch up and Webkit to get the required speed and functionality to be able to compete head-on with native apps.