I'm struggling to understand what width size to design my mobile theme in. A previous design company drafted me an app design and it was all produced using a 640px wide template, this is the ideal size I want to create my new theme in because it works well with the outline icons I want to use which are 48px and this is the right size for the Navigation Bar.
However the coder who will be putting the mobile theme together has suggested I produce the theme at a width of 1080px which is almost double the width size I am currently using and I will not be able to size up the icons to fit this size.
I'd really appreciate some advice on this, I've read that it's also an option to create multiple sizes which automatically convert depending on which device is used.
It depends what kind of application are you talking about. If it is a website, then 320-480 is the ideal for portrait, around 640 for landscape.
If it is a native application, then you might want to use 1080p, because modern mobile phones support full HD apps. Therefore it will look much nicer & crisper.
Also you want to think about if its going to be responsive ( adapting to screen width ) or not.
Related
I am new in Appcelerator framework, I have developed one application in appcelerator, but that application looks good on IOS but for android its not look good.
I want to develop a screen which is responsive like html.
Is there any way to design appcelerator screen like responsive screen.
Thanks you.
Don't define width, unless calculated. iOS is fairly simple with only a handful different resolutions, on Android you never know what resolutions you might encounter.
Luckily, you can specify widths differently in Titanium than you can in HTML. For example
var view = Ti.UI.createView({
left: 20,
right: 20
});
This will make your view the width of the parent, with 20 padding right and left, the width will be calculated.
Also, always stick to native UI elements. So tabgroups, actionbar/navigationBar should all be used so you don't have to worry about cross platform support, styling and sizing of those elements.
Furthermore, most view should be put in ScrollView's when you don't know how tall the UI is going to be. It could fit on iOS, but not on a small Android device. Putting it in a scrollview will always fix the screen as the scrollview will automatically enable scrolling when the content is taller than what fits.
So conclusion
Width should be defined relative. Either with left/right properties, or calculated
If height of content is not yet known or not designed to be fullscreen wrap it in a scrollview
Stop thinking of apps as websites, start thinking of them as Apps. Layout works differently
Lastly, Appcelerator is the company, Titanium is the technology you're using :)
I have been looking for an adequate way to make my design responsive and easily used with mobile devices, within google app maker. Using 'auto' for the horizontal width or vertical height does help with this but the resizing of text even using the css font size by vw results in my content not being compatible with mobile devices and web. Any ideas how to make Google App Maker more 'mobile friendly' so to say, would be greatly appreciated.
The best option is to start with flexible layouts. Panels will adjust to the space available if you set fit to content or fill parent, and widgets will scale in the space available by setting minWidth, maxWidth, minHeight, and maxHeight.
After that, you can design CSS formats that tweak the layout for each screen size you target.
According to the Google App Maker guide for page styles:
To automatically adjust the layout for different screen sizes, use media queries in your global CSS. For an introduction to responsive design, see Responsive Web Design Basics. For an example, see Responsive layout grid.
How do you handle control size on touchscreen, so it is easily used?
I have seen most examples have TextBox Height set to 40 pixels, or buttons 40x40. So, when I make controls this size and use it on my 13" Full HD device. it is OK.
However, I have noticed that lately there are laptops with very high resolution (ex 3200x1800), and small screens (ex 13-14"). How do you handle such scenarios? They usually set text (app) size to 250% in display settings, although this is mandatory.
Do we programmers need to use text (control) scaling as parameter when building UI?
Writing a DPI–aware application is the key to making a UI look consistently good across a wide variety of high-DPI display settings. Applications that are not DPI–aware but are running on a high-DPI display setting can suffer from many visual artifacts, including incorrect scaling of UI elements, clipped text, and blurry images.
link: Writing DPI-Aware apps
I have developed a custom wordpress template based on theme twentythirteen.
The theme works fine on desktop, it's so so on tablets, and looks really wrong on smartphones.
The customized parts (the one that I made) resize correctly to take all the width possible, but the content structure that I kept of the original theme becomes more narrow that the screen. On smartphones the content width is like 20% of the available screen width.
How can I check what is wrong to fix it? I do suppose that it could be the other way around: the customizations stay too big, while the responsive layout resize itself correctly, with the result that the mobile browser scales everything to fit and I get my changes fine and the responsive part very small.
In that case, how could I fix the resize of my custom parts to fit nicely?
I looked for remote debugging and I solved my issue using this solution:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
I have a mobile game developed by U3D and NGUI and targeted to platforms such as android and IOS, but there are so many mobile resolutions and aspect ratios change from 1.3 to event 2. My UI are designed under resolution 1136x640, and UIRoot Scaling style is FixedSize, Manual Height is 640.
I am not going to use anchors in NGUI widgets because distance is defined in pixels but not in percentages, when resolutions are changed, relative position of widgets are also changed, this is not what I want.
I refer this but still have no idea to handle this tricky problem perfectly, I need some suggestions on how to use NGUI in right way to handle different mobile resolutions.
The newest (3.x.x) NGUI allows you to use their new anchoring system. As you said, it is specified in pixels, however you can specify different targets and distances to different edges, and it will behave similarly to percentages.
Are you familiar with NGUI team videos explaining their new releases?
https://www.youtube.com/watch?v=6k5iIzKTEBQ
Some of the information there could be helpful, and playing with Custom settings of anchors either.
Another useful things is to create scaling script attached to root, which scales all elements down, basing on the detected dpi. If your UI is prepared for phones, you probably won't need all the buttons to take the same percent of the screen on tablets.