Should I use svg icons for responsive mobile design ? because of retina display. I read that it is good idea for small icons like header or title etc..
Are you talking exclusively about iOS - you mention retina? I do not know about this platform but SVG is not supported by default on Android. Instead you create a different sets of icons with different sizes.
I recommend this reading
This is quite a good read on the matter.
http://net.tutsplus.com/tutorials/why-arent-you-using-svg/
Bassically, it depends on what you want with your implementation. If you only want to use it on Safari on iOS? go ahead. Fast and fluid. however, if you want users to be able to use other platforms like Android, different browsers on iOS or even Windows Phone, this is not the best option.
Related
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'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/
:-)
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.
Is it possible to use a WYSIWYG text editor (especially TinyMCE) for a mobile device or is that not supported yet? Will it ever be supported?
This weblink Compatibility table for support of contenteditable attribute in desktop and mobile browsers. will give you a clue about this issue.
I was looking for the same thing today, so I thought to share this link with you.
It is possible to use it on a mobile device, but the javascript functionality in those browsers is limited, so not everything is possible (own plugins and several interactions with own CMS i.e.).
Keep in mind too that heavy js-usage on a page will slow down all its functionality on mobile devices cause the system is not as powerfull as a personal computer. I had the problem that the js overhead of a CMS delayed js-functionality in the browser so that clicking checkboxes and selecting input fields was almost not usable.
It might be necessary to redisign the whole CMS around such an editor to run fast enough to make it work.
I host a small web shop for a client who wants it to be easily accessible from mobile devices.
How do I detect if the user is browsing my site from a mobile device?
When I have done that, should I:
Check if the user has mobile device and then forward them to another site?
I think the advantages would be:
I can optimize layout from both sites for screensize
I can use different techniques in the two sites (eg. jquery mobile for mobile)
Use CSS for the different screen sizes => like on tutsplus
I think the advantage would be:
I only need one site but it seems to me heaps of work when talking about a small webshop
Ideally, you should try using jQuery Mobile page structure with your own CSS and JavaScript for non-mobile devices.
You can easily detect user's browser and conditional script includes as per html5 [boilerplate]:3
/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
#media screen and (max-device-width: 480px) {
Main things to consider when aiming at iPhone users:
ensure there's no vital flash objects
on the page as it isn't supported by
many mobile browsers (yet?)
appropriate screen size (using
viewport meta tag)
keeping in mind that there's no mouse
cursors, meaning no
hover/double-clicks are available any
mouse dragging gestures are different
on touch devices
remember all pop-ups are open in new
tabs and won't be seen at the same
time as the main window, use
javascript modal divs as alternative
test all your javascript and css to
ensure everything looks and works the
same (Safari requires -webkit- prefix
for the newest CSS properties)
create a Home screen icon for your
website (a nice thing to have)
most of these things are covered here
take a look at Safari Dev Center for tutorials/videos/coding how to's etc.
There are several options but this is my favorite:
http://code.google.com/p/mobileesp/
Comes with a API in a couple of different languages as well
You don't need jQuery at all if you don't want to use it. We don't. Not that there's anything wrong with that.
Number 2 is the best option. If you create a site with mobile in mind first, it's far, far easier to expand and manipulate for the desktop than trying to shrink things to a mobile screen.
JQuery Mobile is currently in beta 1 right now. Beta 2 will be out within a month. It is fairly stable at the moment and you can gain a lot of knowledge about what is considered "best practice" from them. You can use media queries for screen sizes for different platforms which JQuery Mobile also supports.
http://jquerymobile.com/