This post is not about code-syntax but about work-strategy, before I start developing the site.
If I need to design the front-end of a mobile-site for smart-phones (Androids { 3 different sizes}, iphones {2 differents sizes}, and other non - smartphones phones) how shall I proceed? (MY DESIGN HAS TO WORK AND BE THE SAME FOR ALL THESE DEVICES)
1- shall I design my work following the idea about flexible images and fluid grids (flexible DIV:s).
or
2- set different media queries-sizes for every target model? (this solution might create more development-work isn't it?)
Thanks very much for yr thoughts...
Use fluid grids first. Then you can use media queries to do some final tweaks. Like e.g. float an image to the right if there is room (landscape mode).
This way you support nearly every device out there, and not just the big 2 (although Blackberry is bigger than Android I believe).
# YoniGeek; may be you have to use fluid layout.
For this just define screen width instead of device width & define css for maximum device screen size. So; you no need to define different css for different devices.
Read this article http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Check this site for inspiration http://mediaqueri.es/ & look same in all devices.
It's a matter of preference really. You can use a fluid design, media queries (with css transitions) or a combination of all techniques.
On my most recent project, I went with media queries. Once I had the basic design done it took me less than an hour to have it working on varying resolutions from 240 pixels to 960 pixels wide. So more development work... it was not.
My previous recommendation on one of your prior questions still stands:
Design (ie: one design.css file or split up into multiple files such as fonts.css, typography.css, etc...) the site without positioning anything. You cam start with a HTML 5 reset, implement font faces, set the backgrounds, color the links, style the inputs but do not position anything (ie: if you have header, nav, content and footer sections, don't position them).
Use media queries (ie: layout-240.css, layout-960.css) to target your viewports and position each everything accordingly. They will generally contain less than 100 lines of CSS and take up less than 3 KB of diskspace but that's irrelevant.
Related
I am about to deploy my first React Native application to the iOS app store. I am having a problem however when it comes to layout. I am utilizing the flexbox system and currently designing for iPhone 6. I have done all the mockups and Sketch and have everything how I would like it to look.
I have run into a problem however whenever I try to run the application in iPhone 4. The design that I have implemented for the iPhone 6 does not fit with the constraints that iPhone 4 possesses.
I can try to redesign things for iPhone 4, but then things become too small / ugly on the iPhone 6. I really need things to look great on all of the screen resolutions (i.e., iPhone 4 - iPhone 7 plus).
I have seen on the web many different solutions: apply a constant to each stylesheet value, dependent up the aspect ratio of the device; check the device and render different components based off the device your are on; and make better use of flexbox in order to make the layout responsive.
The first solution doesn't seem like it will give an accurate representation on each screen size, the second solution seems to create too much excess code just for styling, and the third solution seems to not account for static sizes and font sizes.
I normally would begin to follow the third solution, but there are some things that can simply not be a percentage of the container (e.g., button height, font size, some margin and padding, etc.)
Therefore, I am asking the question: What is the best way to approach this problem in React Native? I really need a thorough de-facto answer that can explain the best way to go through the development process as well (e.g., should I design for the smallest screen size and then fit it to bigger sizes? should I design for all resolutions? etc.).
A big thanks in advance for those of you who have felt my pain and have discovered a great solution, please let me know what that solution is.
Ok, so I think i understand how to go about doing this now. It looks like the key for designing for multiple screen sizes in iOS is not to necessarily make things bigger on bigger phones and smaller on smaller phones, but to design for what works on the smallest screen size, and let the items look small on the bigger devices.
It seems that the idea behind this type of responsive design is that individuals with bigger phones desire to see MORE CONTENT, not blown up content. Therefore, if it works on small phones, it can also work on big phones.
Take buttons for instance: If a button at 40pt looks good on an iPhone 4s, it will also work well on an iPhone 7 plus. The benefit is that the user of the iPhone 7 plus is able to see more content, rather than just a bigger button.
This design also makes it to where multiple screen sizes are not necessary for styling.
There is still a role in determining the dimensions of the device you are on, but this is more to determine whether you are able to display more content (e.g., in the case of iPhone 5 vs iPhone 6, whether or not to display an additional tab button), as well as the layout (e.g., where should I place the menu).
You can see this type of design on most of the very popular web application native apps.
Images and videos are one of the only exceptions. It seems that it is helpful at times to automatically grow the images whenever the device and the design call for it. Fortunately, this is very simple by using a flexbox and responsive technologies as are included with react-native.
I hope this helps others and saves them some time. Note: this does not provide for the problem of landscape vs portrait. Under that situation, it is probably best to use some sort of varying styles.
I have felt your pain and choose a similar solution to your first one also similar to the blog post mentioned by Shukarullah Shah. In my style.js file first I obtain the device width and height using;
const x = Dimensions.get('window').width;
const y = Dimensions.get('window').height;
Then I divided each dimension, x and y, to 10, 20 and 40. For width, it become like;
const widthS = x / 40; // ~10 px
const widthM = x / 20; // ~20 px
const widthL = x / 10; // ~40 px
Then I use these values to define any size for margin, padding, image size etc. Also I use a common style.js file for each component I have. So that I define these constants once and I can see/compare every style piece I have easily. Of course you can improve these kind of definitions like in the blog post mentioned. But I am a developer not a designer so that I am not so edgy about perfect ratios.
I have read useful blog on medium about Responsive Design in React Native. I did not get time to try it but I think it will solve your issue, let me know how it works for you.
I have a fundamental question that I would like to get addressed. I'm almost done with my universal app and I was told that I need to specifically customize the UI controls for iPad screens (e.g) labels, buttons. So, for example, I have the following code in viewDidLoad event in one of my xibs.
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
{
[_lblRandomDisplay setFont: [UIFont fontWithName: #"Helvetica Neue" size:100]];
}
else
{
[_lblRandomDisplay setFont: [UIFont fontWithName: #"Helvetica Neue" size:250]];
}
Here _lblRandomDisplay is UILabel IBOutlet property and I increase the font for iPad and reduce it for iPhone. Is this the way to approach the iPad screens or does iOS automatically scale the screen when viewed on iPad?. As a side note, I have named the xib filenames as filename~iphone.xib and filename~ipad.xib and it loads correctly based on the device selected in the simulator.
In those lines, I have a Settings screen (not using the Settings bundle) using UITableViews that I have designed for iPhone and programmatically load data from NSArray. When loaded on iPad using the settings~ipad.xib (copied the controls from settings~iphone.xib), I haven't adjusted the row height specifically for iPad to make it look bigger. The screen shows OK on the iPad but it looks smaller. Is this the right approach or what is the best way to approach this?
Please advise.
The advice that you have been given, to customise UIControls for screen size, seems wrong. UIControl sizes, and text sizes in general, should remain the same on all devices. These items are designed in sizes appropriate for readability and touchability, neither of which has any relationship to screen size.
iOS is designed with this in mind. If you make a universal project with iPad and iPhone xibs or storyboards, you will find that user interface widgets are the same pixel/point size regardless of the device (I am ignoring Retina/non-retina distinctions here for simplicity). For example, the default size of a standard button is 73 x 43 with a font size of 15pt in both cases. A Navigation Bar is 44 px/points high on both devices. This is as it should be. If we assume that reading distance on an iPhone, or an iPad mini, or an iPad is approximately the same, then there is no reason to adjust text size. The idea of redesigning for the iPad is really that you can get more information on one screen, not a bigger version of the same information.
There are two circumstances in which iOS "scales the screen":
is if you create an iPhone-only app and run it on an iPad. Then there is a user option to run it at double size. In this case everything including font sizes are scaled up, but this is done by pixel-doubling, so the effect is a big blur. Take a look at it - and you will understand that this is precisely the reason why you should not design in this way.
if you use a single xib/storyboard for both iPhone and iPad, and rely on autolayout (ios6+) or autoresizing masks (ios5-) to auto-adjust the layout for different screen sizes. This method can -depending on your settings - proportionally resize image content of views, but will not dynamically resize text content, if you wanted to do that you would have to adjust in code. This is not a good way of designing an app anyway, it is better to make a dedicated design for iPhone and for iPad in separate xib/storyboards as you have done.
I expect when you say the iPad "looks smaller" you mean, the UI appears smaller as it gets lost on the larger screen... but the answer is not to just enlarge the size of your data, it is to reconsider your layout to fit more data on each screen. That is why with the iPad Apple provided the SplitViewController and introduced the pattern of the Container ViewController.
I wonder if you are also raising a related, but separate issue of proportional sizing of views for graphic design purposes (you mention font sizes of 100 and 250pt, not usual sizes for UI controls labels). You may want the look of your app to scale with the screen, a bit like the so-called fluid web design approach to variable window sizes. So for example you may have a graphic device based on a huge letter 'A' that fills your iphone screen, and want that letter to similarly fill you ipad screen. In this case you may need to set font sizes as in your code example.
You are certainly doing the right thing by not altering the row height of your table cells for the different devices, but for the larger screen you can of course make your table height larger, and accomodate more table cells in your view.
All of these comments are a bit general, as you haven't posted enough detail of your problem. It often helps to post a picture or two...
My developer's box has a screen resolution of 1680 x 1050. I'm developing a full-screen Silverlight 3 application that I'm considering deploying to the Internet. So, I want to make sure the application looks good on a variety of screen resolutions. I just started testing on other boxes, the first one having a screen resolution of 1024 x 768. During the test I found some of the pages on the application were partially truncated. It seems the controls on the page didn't adjust for the lower screen resolution. So, I'm looking for some tips on how to make a Silverlight application, to the extent possible, adjust for screen resolution. For example, are there things one should or should not do on XAML to make adapting to screen resolution easier? Should I just optimize for a minimum screen resolution? Your thoughts and suggestions are welcomed.
You can easily enforce a minimum acceptable resolution by setting the MinHeight and MinWidth properties of your root visual. (Of course, this should be less than the minimum screen resolution to account for browser chrome.)
Try to specify absolute Width and Height only when necessary: for example, for images or icons of fixed dimensions, or for obvious cases like TextBoxes (whose width should reflect the average length of the data entered).
Grid panels are excellent for mixing scalable and fixed layout areas. The star sizing specification takes a bit of getting used to--it's not as simple as a percentage-based proportioning--but it's much more flexible, especially in combination with row/column min/max dimensions.
You don't really need to test on multiple resolutions unless you're interested in testing a range of dots per inch--just resize the browser to approximate different screens. Since there's always a bit of give and take depending on the user's browser configuration, you'll have to account for some variance anyway.
You can make your application scale with the Silverlight Toolkit ViewBox or make it strech with layout controls like the Grid, StackPanel, and WrapPanel. Make your main UserControl have a Width and Height of Auto (or remove the width and height entirely) and the size of the app will resize to the size of the parent div (the default HTML template uses 100%x100%). Then just resize the browser accordingly. IE8 has developer tools that can help you see your app resized to specific screen resolutions.
Testing on a variety of screen resolutions is always a good idea.
I covered the resizing of elements and making it resolution independent on another thread.
You can have a look here, there are multiple ways to sizing and resizing things automatically.
I'm currently designing a web application which may be viewed by people in all kinds of resolutions 1024..1920 or even larger resolutions.
I've opted for a fixed-width design (as many other popular websites are, e.g. StackOverflow, CNN, Mint, WSJ, BofA etc.) with the lowest common denominator fitting in, meaning 1024.
Now a problem is that on some pages in my application I have to display grid-based data. I think I'm really going to anger people with large screens if I restrict them to 1024 width compacted grid data while keeping most of their screen empty.
I thought about making different style sheets and so forth for different resolutions but that will increase much of the maintenance work, graphics work etc. above of what I can manage.
Do you have any ideas how to solve this is a graceful manner (I'm just thinking maybe I have a 'creative block' here right now :) ) without having to go fully to a fluid design, which brings a bunch of problems in itself?
1) Multiple hard-coded views of the same data: Brief, Detailed, Verbose
Quick links, or tabs to allow the user to view different numbers of columns. If they need more details, they can choose the view that has more detail. They want to know, and will not be annoyed by having to scroll vertically.
2) User-Controlled columns
Allow the users to control what they see, and what columns are included in their view. You can even store and remember the views they select. The default should be the view you think most people would want to see.
3) Combination of the previous two
Allow them to choose a default, and then customize columns on a one-by-one basis. This is how MS Project works with its views, and it's very nice to work with.
Size the columns so that a reasonable number fit onto 1024, and use a horizontal scrollbar for the rest. Since your app doesn't use the extra real estate on other pages, you might decide to just stop there.
Otherwise, let the elements resize to fill the full width of the page if there is extra room (either use a table, or use min-width on the divs and 100% on the parent.
I’m creating a windows mobile app which uses a custom GUI. It has an image as background and some text and images rendered on it. I want to do as little image processing in the app itself, so I’m creating different skins for different screen resolutions. If I need to support another screen resolution I’ll just add another skin.
But what concerns me is that different emulator images have different sizes on their taskbars and menu bars, so the size of the actual form is not the same for all devices with the same resolution. So far I’ve found emulators where the taskbar and menu is either 104 (usually VGA, WVGA…) or 52 (QVGA, QWVGA…) pixels high. Do those menus always take up 52 or 104 pixels, or do device vendors or power users install things like a 3px high battery meter so the menu suddenly takes up 107 pixels?
From what I've seen with windows mobile, there is a standard screen size and the various emulator's sizes are scalings of that standard size IE 104px is a scale factor of 2 over 52px. In NETCF at least, the drawing API handled the scaling fairly well.
yep i remember having problems with this in the past as well - iirc the default bar size was a multiple of 26 or something (so 52 and 104 seems to fit) - i dont have the code here unfortunately, but i think it used something like this:
uint titleBarHeight = GetSystemMetrics(SM_CYCAPTION);
if(!titleBarHeight)
{
GetLastError()
..blah
blah..
}
i remember there being a problem with the apps detecting if the bottom button bar was present, but that might have just been the order i did things in at load-time..
hth
fusi