In most splash screen generators, they require a square picture. Splash screens are shown on the entire phone height and phone screens aren't squares. So why do they ask for square images?
The sample you provided (and many others out there in the web) is/are primarily a icon generator and only on the second sight splashscreeen generator(s).
Due to this and the fact that nearly all icons in the world used in app-stores and mobile-os vegetation are square they specialized on square icon generation.
As a consequence you upload a square picture in order to create all the square icons. The splash screen is then only an exception to this.
If they wouldn't take the same picture for the splash screen, the sites would force you to provide a second image just for the splash screen creation process. This would make the site unintuitive and would decrease user friendliness, because you either don't want the splash screen to have a different look or you would have to choose the same image twice.
Related
I've just starting reading about responsive design and I want to start learning more and more about it.
The first thing that has occurred to me is how to actually view your work in different screen sizes.
Is there a standard tool that people use on there computers to simulate there work on all different devices?? Or do you just check your work on the different devices??
Currently I've just been moving my browser to approximate sizes and it feels really unprofessional.
In Chrome, if you press [F12], on the top left corner, you have an icon which look like a mobile phone, then in your page, you can select the device model, and the screen resolution
I am working as a graphic designer. They wanted me design some slider images on a page. But nobody knows the dimensions. I have seen that there are 4 different dimensions for an image when I inspect the page.
Large
Medium
Small
XSmall
So when you enter the website with a mobile phone Xsmall image appears..etc.
I have tried some ruler and responsive view extensions; but it didnt help me.
How can I find exact dimensions?
The exact steps might depend on what browser you are using. Here are some instructions for Chrome (they will be similar for other browsers):
Resize the window to get the image in the smallest dimensions.
Right click the image and "Inspect Element"
You will see a tab for "Computed". This indicates the computed CSS attributes for this image. From this view, you can read the height and width in pixels.
Resize your window and repeat this for each of the image sizes.
A more advanced approach: depending on how they implemented responsive web design, you may be able to view the CSS the page is loading, and look for #media queries which control the size of the image depending on the viewport of the browser. Read more about #media here.
I am building a application in codename one which has a log-in age.
I have a created a UI as the requirements but when i build the application from codename one's server for android then i see that a streamed background image gets distorted and convert in to lines.
The background image has a gradient from 3 dimension to center top.
I checked it in codename one simulator its looks fantastic but in android emulator background image gets distorted.
Please check attached image for it. i have added two image 1st is of codename one's emulator and 2nd one is android emulator.
Please let me know that i do.
You have a background gradient, the devices have a limited number of colors so the background will be distorted to some degree as the colors are adapted to the lower color count on the device.
This is assuming you didn't use a mutable image or a round rect border (not image border), in those two cases the number of colors might be lower because of drawing to an image surface that might be 16bit.
I am having problems in making my iPhone 4 (3.5 inch screen) work on iPhone 5 screen. I have already tried to import Default-568h#2x.png image for a launch image and it works properly in simulator, and when run on real device there are black bars on top and bottom of the screen. Does anybody have similar problem.
All apps that do not include the Default-568h#2x.png file are displayed in a letter box. Include the Default-568h#2x.png will make your app fill the screen on 4" retina devices.
hope this fix the issue.
You could have tested this issue in simulator itself .
There are two possible solutions for this. Listed below:
In the 'Simulated Metrics' section of UIVIew's attributes inspector, you can choose between 3,5" or 4" sizes. Choose 3,5", and make your views and subviews resizable .This will make it automatically scale your view to fit iPhone 5's screen.
2.OR you can make use of Auto Layout (constraints) with the deployment target of iOS 6+.
Hope this will solve the issue.
I am using a script from http://detectmobilebrowsers.com/ to detect whether a site is being viewed on a mobile browser.
If the site is on a mobile browser, I show a pared down, simple slideshow. If it is a regular browser, I show a whiz-bang super slideshow. I'd like to optimize my images, making them as small as possible on the mobile slideshow. My mobile slideshow is responsive, so it will shrink to fit in whatever window, but I don't want to make it any larger initially than it absolutely has to be.
Does anyone know what the maximum width is on the current array of mobile browsers? Or rather, the maximum width of mobile devices that are detected with the http://detectmobilebrowsers.com/ script?
BTW, I'm not asking how to detect the width once the page is loaded in a browser.
Thank you!!
Edit....
I think you guys misunderstood my question. I AM using max-width:100%. My images DO scale to fit any screen-size. And, I DO determine whether to show a simple slideshow or a complex one. Here's my logic:
If the user is using a mobile device (based on the device detector)
show a simple slideshow
Else the use is NOT using a mobile device (based on the device detector)
If this is a small screen (based on media queries)
show a simple slideshow
Else this is a large screen (based on media queries)
show a complex slideshow
End If (based on media queries)
End If (based on the device detector)
Why bother using mobile detection at all? Because even though for small screens I am only showing the simple, low-filesize slideshow on small screens, the images from the complex, image-heavy, high-filesize slideshow ARE STILL DOWNLOADED (http://cloudfour.com/examples/mediaqueries/image-test/). My media query determination of which slideshow to show doesn't save the user from having to download the images of the slideshow that's currently not shown. It's only used because the simple slideshow looks better on small screens than the complex one. Using the mobile detection screen makes sure that images that aren't shown, aren't downloaded.
Why do I care what the maximum width is on current mobile devices, when my images are set to 100% width and will scale down to fit any size? Because a 900px wide image has a larger filesize than a 600px wide image. If I know what the max width is that the image needs to be, I can save the slide down to that size initially, saving some additional bandwidth. Have you guys ever viewed a slideshow on a mobile device? Slow!
I would really appreciate if anyone can point me towards the proper stats. I googled, but couldn't find what I needed.
The answer is almost certain to change as soon as you deploy the software.
It also depends on whether you mean pixels or screen-resolution-pixels (the Retina displays define them differently).
Perhaps it's best to stick with detecting mobile browsers (if you don't like the scripts you're using, see , e.g.:
Detecting mobile browsers on the web?)
and then let users opt into higher-rez images.
Alternately, you could try to detect bandwidth, which is really what you're optimizing for; 'mobile' is just a proxy for this, and only moderately correlated with it.