we have a mobile application developed using Kony. We are trying to port the same to desktop version. Everything goes well but there are small challenges wrt UI i.e., responsive UI. Since I am new to Kony please guide me if there is a way to include media queries in a Kony application or what could be trick to make the app responsive on browser.
Thanks.
Kony does not currently support media queries to say "for screens of this size use this css rules". Remember in Kony your styling is done with skinning, not CSS3. Skins do translate into css for web apps, but that's a different story.
In Kony the approach is different. You design your forms for different screen sizes based on the type of mobile device: Mobile phone, tablet, desktop, watch, etc.
If you come from a web development background like I do, you might even be expecting a grid system like in Bootstrap or Foundation. But bear in mind that the real value of responsive design is not having to worry about the resolution of the screen, except Kony already gives you this through the use of Dp units instead of pixels. So the same mobile form design will adapt to any mobile device resolution. The same tablet form will adapt to any tablet resolution and so on.
For different device types, the premise is that your desktop and mobile screens will most likely be very different, or even start alike but evolve differently over time.
So the solution is to just copy your form from the "Mobile" subtree (right-click>copy) and paste it under the "Desktop" subtree. Then you'll be able to edit them independently.
I hope this helps.
Edit:
Starting with Visualizer V8 SP2 Kony does support Responsive Design.
Related
I'm using the visibility-classes of Foundation (http://foundation.zurb.com/docs/components/visibility.html) in order to display my website differently on mobile devices.
However the more recent smartphones have insane scree-dimensions (e.g. Nexus 6 2560 × 1440 Pixel).
I don't have such a device and therefore can't test whether classes like hide-for-small-onlystill work there. Afaik small means less than 640 pixels.
So how can I deliver the same page across all smartphones? Even though these devices have huge screen-dimensions I'd still like to display a simplified homepage.
Foundation visibility classes are based on media queries that checks only screen width.
If you want to target mobile devices you can detect mobile device (not the best practice but useful many times). here is a good way to do it: http://detectmobilebrowsers.com/
once you detect the mobile user (on the back-end or front-end) you can add a class to your body and target that separately on your css.
Unfortunately, I don't think there an easy workaround this.
I'm trying to make a site that will be responsive on mobile devices but not on desktop computers.
I created a media query with the following breaking points: 320px, 321-480px, 481-680px, 681-778px, 779-1280px. The problem is that these apply to resized browsers on desktop computers too and display the mobile version. I want it to ignore these breaking points and display the desktop version of my site regardless of window size.
Is this possible? Thank you very much for an answer!
It doesn't make a lot of since to make a responsive site that is only responsive for mobile. Maybe use a server side script for device detection and make two separate sites for mobile and desktop.
Is it possible to remove mobile first approach in bootstrap and use regular desktop first? Basically from desktop to tablet to mobile, as it used to be.
I want to keep the responsive features, but when creating media queries to target smaller devices, I want to go from desktop > tablet > mobile. Do I need to edit some files?
Bootstrap was completely built in that 'mobile first' mindset.. It wouldn't be a simple thing to make changes on that scale. If you want to use desktop first, as it used to be, I would recommend just using the older versions of bootstrap.
You can find Bootstrap 2 here:
http://getbootstrap.com/2.3.2/
If I'm not mistaken, that one uses the desktop first approach.
I'm not sure I would use the terms Desktop first, or mobile first, as IMHO they are not really representative of what bootstrap is.
Bootstrap 2.3.2 (as to what has been mentioned as Desktop first) did not have responsive features built in, you had to 'turn them on' by including an additional CSS file (bootstrap-responsive.cs I do believe).
I wouldn't have called this Desktop first, simply that the base CSS had limited flexibility for different screen sizes.
They changed that paradigm in Bootstrap 3, now you do not need to include an additional CSS file for the responsive features, it is all included So I wouldn't call this a Mobile first approach, but an approach that is flexible for different screen sizes, regardless of the device, weather it be Desktop Tablet, Mobile, Projector, etc, I would say more its more device agnostic approach.
Now you say you still want the responsive features (so reverting to Bootstrap 2 without the responsive CSS you would lose the responsive), so is there something specific you seem to be concerned about with Bootstrap 3 that would somehow be of hindrance?
Ultimately the CSS simply rendered based on the screen size, I wouldn't call it a Mobile First, Then Desktop then Tablet approach at all, simply responsive to the screen size.
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
Based on the MSDN link
http://msdn.microsoft.com/en-us/library/system.web.ui.page.clienttarget.aspx
Assuming I want to see how my page will look like on safari or mobile firefox, how do I implement it using Page.ClientTarget?
I can't seem to find any good resources for this API.
Thank you.
You could just use responsive design, that way you are not relying on the ClientTarget, but rather on the size of the browser.
Responsive Design basically means your design adapts to the size of the screen ... so tablets and phones can have different views of the same page.
Bootstrap is a decent place to start, but there are other frameworks.