: How to design for iPad screens using a browser interface I am trying to design for an iPad. The design elements are essentially a background image (2048x1536) and some text (based on font size)
I am trying to design for an iPad. The design elements are essentially a background image (2048x1536) and some text (based on font size) - which need to be place in a text area that is defined by percent (x,y start + hxw size).
The image and text is delivered to the ipad from a web database. We plan to upload the images and the text to a webserver that will deliver it
We have been "winging" it - and it has worked well. Is there a way to imitate a iPad screen resolution online - and test how the interface will look like ?
I ask this - as we plan to support additional screens like android - and without a way to guide the placement of the text - it is hard to design for a variety of devices.
thanks for any pointers
More posts by @Ravi4787994
2 Comments
Sorted by latest first Latest Oldest Best
Try Invison. Its your answer to test UI for different platforms using just images. You can get a pretty good idea on how it will look across platforms.
www.invisionapp.com/
There are a lot of options for testing different screen sizes and resolutions. The best will depend on your workflow.
Online Tools
Online responsive tools require a domain to test. This can be a local development server (i.e MAMP, XAMP, localhost) so you don't need a live web domain.
Responsive Design testing Tool - Matt KersleyShows a number of different sizes, side-by-side. Useful for comparing different devices.
QuirkTools - ScreenflyQuickly switch between different predefined devices or enter a custom screen size.
Responsive TestQuickly switch between a large selection of predefined devices or enter a custom screen size.
Browser Extensions
I've only listed extensions for Google Chrome since that's what I use but I'm sure there are similar solutions for your preferred browser.
Screen Resolution Tester - Chrome Extension
Window Resizer - Chrome Extension
Browser Developer Tools
Using the built in developer tools in your browser is the easiest option since you don't need to install any additional software or plugins.
Google Chrome DevTools' Device Mode
Firefox Responsive Design Mode
iOS Simulator
If you are designing a native iOS app (as opposed to a website or web-app) the best option is to use the iOS simulator. As far as I'm aware you need Xcode to run the simulator so this may or may not be an option. You can read more about the iOS simulator at the iOS Developer Library:
iOS Developer Library - About Simulator
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.