How to Make Mobile App which is base on Responsive Design.

[hsn752]

Hi,

I have created some mobile app using ProfoundUI. and its quite easy to do that. But the problem comes When i Run that App on Iphone its look good but the same App run on TAB the button appear so Big cause of 100% and the TABLE layout using.

How can we acheive the responsive design according to that Device and the button and other elements can be fit to the screen once the device size has been detected.

Please provide help regarding this. or Some document if you have

Thanks

[Scott Klement]

Maybe you don't want the size of the button to be a percent, but just the position?

I'm having a hard time picturing what you're saying. Can you post screenshots?

[hsn752]

Hi Scott,

See the Attached Snapshot for find the Difference.

I have Design the App.
- When i view on Iphone its look fine the button and other thing look Good.
- But When i Swtich to the Tablet or Tab the Button layout and other things goes horrible its size and other things increase.

I Check the CSS file as well. And find that The CSS is applying inline cause of that i can't able to apply the external CSS file to control this layout.

I need the Responsive Design for my APP. Whatever the Device either IPHONE OR TAB. The button, Grid and other related thing will be decrease or increase according to the size.

Can this possible ??

Thanks

[Scott Klement]

It looks to me like it is increasing according to the screen size (which is what it should do when you use percentages.) So on the iPhone, one button is maybe 80% of the screen, and the other is 100% of the screen.... when you go to a tablet, where the screen is larger, they are still 80% and 100%, but since the screen is larger, the buttons are larger.

Are you looking for something else? Do you want the buttons to be less than 80%/100% when they are on a tablet, but to be at the full 80%/100% when displayed on an iPhone?

Or, can you explain what you'd like to see?

[hsn752]

Yes exactly i need the button and other widgets to be behave like this. When i run on iphone it should look nice n increase the size till 80% or 100% and when some other mobile like tablet or ipad it should adjust according to the size of screen. So my App look nice and work perfectly according to the needs and mobile size.

Can you help me in this how can i do this. ?

Also need to know if i apply external CSS so can it change the full layout of the screen instead of using moblie_layout CSS which is by default CSS use when i drag the mobile layout.

Thanks

[hsn752]

Any update regarding this Scott ?

Thanks

[Scott Klement]

Sorry, I still don't understand what you are asking. It looks to me (from your screenshots) that it's already doing what you say you want to do.

[hsn752]

I'm Talking about the LAST POST you have send to me. This is your below Reply..

"Are you looking for something else? Do you want the buttons to be less than 80%/100% when they are on a tablet, but to be at the full 80%/100% when displayed on an iPhone?"

Yes i'm looking for this sort of thing. When i run on iphone or android its should be like 80% or 100% button and widget size and when i switch to the Tablet or IPAD it should be 75% or 70%.

Currently if you see the screenshots it can be clearly seen that When i run the APP on Iphone its looking good but when i switch to the Tablet or Tab the button goes BIG which looking quite bad not like a professional or elegant app.

Hope you got the point now what i'm looking for.
The Design should be adjust according to Screen size and behave like its size.

Thanks

[Scott Klement]

To me, your screens look exactly the same, aside from the size of the screen. So your app looks the same on an iPad as it does on an iPhone, which is really the point behind responsive web design.

I understand that you feel that it would be better if it used a smaller percentage of the screen as the screen gets larger. I'm not sure how we could know which percentages would be used at which screen size, however -- what "looks good" is a very subjective thing. Who decides what percentages look good on different screen resolutions?

If you were coding this in pure CSS/HTML (instead of using Profound UI) you could perhaps control your layout with stylesheets. But, you'd need to write a different stylesheet for each possible viewport, and you'd need to code all of the display sizes (or ranges of display sizes) as media queries. That would be a lot of effort -- and each time a new device was created, you'd need to review it and possibly create a new stylesheet. This would be a difficult process, at best.

If you wanted to accomplish the same thing in Profound UI, you wouldn't be able to use media queries and stylesheets, because many things are specified in-line. But, you could work around this using Javascript (or, for that matter, RPG code and bound fields). You could simply check the device type or resolution, and change your widths accordingly with the applyProperty() API.

But, I think it'd be much easier to code separate screens. Make a tablet version of your screen (for devices with larger resolutions) and a phone version (for smaller resolutions) and display the proper display file. This seems significantly easier than trying to dynamically adjust things.

But, personally, I think that's a lot of work with very little gain. Instead, I'd try to find a "happy medium". Find a design that looks nice at both resolutions so that a single screen can do the job.

[hsn752]

Hi,

Thanks Scott for your suggestion but the thing is can't we do with single screen design which works for both doesn't matter whats the device it would be adjust accordingly.

Also if i have create each screen for each resolution it would be HARDER for me to handle and to play with it. As if one app contain 10 screen then i have to design 40 for four device type.

Can we override this in-line html/css as cause of this i can't able to apply any custom div elements. If we have some widgets which add the DIV HTML tag instead of table so it would be easy to play with it and instead of inline CSS if we can apply some external CSS.

thanks