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.
Related
I'm planning to use Sencha Touch 2.x for my websites mobile (Light weight) view.
I am new to Sencha development. I know HTML 5 very well. Couple of things I would like to know before I would proceed with the development.
How Sencha manages the images. As I am planning to work with different resolution touch devices (i.e. iphone4s, iphone 5, iPad, Android and Blackberry 10). I know media query that used in HTML 5. Do we need to pass different images for each resolution or sencha will compare image for each resolution. (FYI... I also come across also How to add images for different screen resolutions in sencha touch? suggest the HTML5 media query. Is it the only way? and also refer Creating a splash screen in Sencha Touch for different mobile devices resolutions which is for splash screen)
Is it support Retina Display? (i.e. #2x in iOS). if not than how we can manage the retina display images.
Thanks in advance for any valuable suggestion.
1) For simplicity's sake, I personally go with using the highest resolution/size for each overall platform (Android, iPhone, Blackberry). The phones will scale the images accordingly. It just makes things way simpler; the only reason in my mind to not do this is if you have a truly massive total image size and optimizing is the difference between >10mb. Any time a phone has to scale any images, there is apparently a small performance hit, but it's ultimately not noticeable at all to me.
2) Sencha supports retina display. As long as you use a sufficiently high resolution image, it will be scaled properly. Make sure to include retina display splash screens and app icons, of course.
Don't forget about Sencha.io.....it can automatically resize images for the device, delivering a smaller version so downloads are quicker. Have a read here:
http://www.sencha.com/products/io/
and see an example here:
http://extdesenv.com/tutorials/how-to-create-a-mobile-flickr-app-with-sencha-touch-2/
:-)
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.
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.
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 the past, I've created a "global" style sheet that all browsers and devices that support CSS should be able to receive.
The problem with that is that my old Nokia understood background image but the screen was so bad that the background images made the website look awful.
I then started putting any background images inside a CSS file with a media query so that old phones like this wouldn't understand it. However, this creates a lot more work. So I've started putting "global.css" behind a media query. The idea is that if the phone isn't capable of understanding media queries I don't want it to read my style sheet. Older (desktop) versions of IE are still served the CSS using conditional comments.
SO my question is, if a phone doesn't understand the CSS, would it provide its own fall back just like a desktop browser does? So at least a h1 is bigger than h2 etc and the text isn't all lumped in one huge block?
I'm guessing this could be a "It depends" answer but I'd appreciated feedback on this. I don't have my old nokia to hand so can't see what that is doing at the moment.
Many thanks
It does depend on lots of factors, such as vendor and how old the device is. However, in my experience generally they do render h1's bigger than normal text; can't say the same for h2's of further down the h's, though.
Usually for old mobile sites (back when XHTML-MP was the new thing and WML was all the rage) we used to set font sizes with CSS using these font-size values:
xx-small, x-small, small, medium, large, x-large and xx-large
From my experience, I can tell you that only small, medium and large work reliably across most feature phone mobile browsers.
All Nokia browsers (including the old XHTML MP versions) did include a default style sheet. This included basic styling for all the headers, a basic bullet and default bullet margins for lists and a bold and italic style. The various headers were not always that well differentiated but they was enough of a difference that one was discernable from another. The only real gotcha was with italicised text. There was often no italicised font per se so the browser would shift each character's pixels to the right to simulate a slanted font. This often resulted in poor legibility.