Motorola Droid x 3. Updated on: March 14 with a few additional resources. Start with a basic fluid CSS design. Use the CSS tools at your disposal. They're resolution independent and bandwidth friendly. Create solid color, pattern or gradient layers with vector masks just make sure you have snap to pixel turned on, where possible. More complex objects get drawn in Illustrator to the exact pixel size, then pasted into Photoshop as a shape layer. Even more complex objects, that require multiple colours, get drawn in Illustrator to the exact pixel size, then pasted into Photoshop as a smart object.
Conveniently enough, the iPhone screen is x points on both iPhone 4 and older models. On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen.
To add high-resolution images to your app, you have to include a second set of all your graphic files. Photoshop fans should learn to get comfortable with Illustrator. By building your app graphics in vector format, you can export them in whatever size you like with limited muss or fuss.
Most Web site authors have traditionally thought of a CSS pixel as a device pixel. Safari actually supports PDF as an image format the hands of the clock Dashboard widget are an example of this. However other browsers do not support this format. The agreed-upon standard for scalable graphics on the Web is SVG. In order to preserve the design of existing websites, images are automatically pixel-doubled.
Having sufficient retina display means crisp and cleaner images. It also offers you smoother text and font rendering. When it comes to images, there come more details. This is very advantageous to web designers because costly web design will possibly mean more revenue for them. Using this retina display also has a number of disadvantages. Using it probably means greater load times for websites. Using devices with full resolution may cause eye straining.
It may also make standard websites from looking bad. Lastly, increased retina display means costly design, which means higher costs for prospective website owners. Gauging the pros and cons of using retina display, you yourself can decide whether it is a good idea to continue its use or not. Different Retina Display Resolutions Different forms of devices have different levels of resolution.
What Should You Do? Advantages of Increased Retina Display Having sufficient retina display means crisp and cleaner images. Disadvantages of Retina Display Using this retina display also has a number of disadvantages. Share Pin Tweet.
The purpose of this document is to guide you, not to provide solutions for complex and unique design problems. Pixels are the smallest physical element that we can control on a digital display. The more pixels can be fitted into a specific screen size, the higher the PPI pixels-per-inch , and the clearer the rendered content becomes. Points are a resolution-independent measurement. Depending on the screens pixel density, a point can contain multiple pixels e.
How pixel density works and how it affects your designs. Read more about it on Peter Nowell's Blog. When you are designing for various display types, you should think in points, but design in pixels. This means you will still need to export all your assets in 3 different resolutions, no matter in which resolution you are designing your app.
If you need the value in pixels, just multiply by 2 for Retina screens or by 3 for Retina HD screens. The iPhone X requires some special attention from designers. Unlike all other iOS devices, it features a display with round corners and also has a cut-out at the top of the screen where you can find the front cameras, sensors and speaker.
Layout margins and safe zone on the iPhone X. App icons assets are generally added to the application package as plain, squared PNG files in various dimensions. When rendered on a device, iOS applies various effects to app icons. The old simple radii values for rounded corners are gone. Since iOS 7, app icons have been using the shape of a superellipse. When designing app icons for iOS, I recommend to use the official app icon templates provided by Apple.
The rounded corners should not be included in the final exported assets, but you might need them in your design process if you want to add effects, such as a stroke or shadows, that are aligned to the corner of the icon. If you are masking your icon asset with the superellipse shape because you want to apply effects aligned to the corners, make sure not to use any transparency for the area outside the mask. Transparency is not supported at all for app icons and instead is rendered as plain black.
If the app icon you are using has a white background, a 1 pixel gray border stroke will be applied to make it easier to recognize the edges of the icon. This is only done in the settings app if your application is listed there and the AppStore. Apple developed a golden ratio grid system that can be used to size and align elements on your icon correctly. Feel free to break the rules if your icon simply works better without aligning all elements strictly to the grid.
In addition to the default font, many alternative font faces are available to use. You can find a complete list of pre-installed typefaces here. Below you can find the standard iOS label types since iOS Most labels can be used in various font weights, depending on the situation.
All scales are stated in points pt. Technically, any True Type Font. It should be safe to use fonts that are completely free for commercial usage. App licenses for commercial fonts are rarely available, and if they are, securing them can turn out to be somewhat expensive. MyFonts currently offers the biggest collection of fonts that can be licensed for mobile app usage. Since iOS 7, Apple has been using a vibrant color palette for the interface of the OS and pre-installed apps.
While you can use the default iOS color palette listed above, you can also and probably should, if you want to stand out use your own colors. Icons used in Navigation Bars and Toolbars should be in outlined style with a stroke width of 1 or 1. You should never include any additional effects such as a drop-shadow or inner shadows on button icons because these are relicts from previous iOS versions before the iOS 7 redesign.
Button icons should be drawn in one solid color on a transparent background—the shape of the icon is used as a mask, and the color will be applied programmatically. The font contains about 1, style consistent icons in 9 different stroke weights, as well as 3 different scales.
The full set is available for download on the Apple Resources page. Some elements can be customized to a certain level, but other cannot and probably also should not be. When designing an application for iOS, you should know your set of tools and stick to them whenever possible. However, in some cases, it might be worthwhile to build a custom control because you need a more custom look or want to change the functionality of an already existing control danger zone.
Almost anything is possible,and sometimes it makes sense to break the rules, but always think twice before doing so. The Status Bar contains basic system information such as the current carrier, time, battery status and more.
To match the style of your app and guarantee readability, the content of the status bar comes in two different styles: dark black and light white. On the iPhone X, the status bar is taller than on all other iOS devices. Due to the notch that cuts into the display area, the new status bar is split in two parts.
It is possible to hide the Status Bar, but think twice before doing so. For example, users might be interested in knowing if they are connected to a WiFi network when the app regularly downloads web content or if Bluetooth is enabled when the app requires a Bluetooth link to third-party hardware.
A valid reason to hide the Status Bar is when you want to remove all distractions from a single element, for example, when displaying full screen content such as an image gallery. The navigation bar contains the controls for navigating through the applications views and optionally to manage the content of the current view. It will always appear at the top of the screen, right below the status bar. By default, the background is slightly translucent and blurs content underneath the bar.
The background fill of the bar can be set to a solid color, a gradient or a custom bitmap-pattern. With the release of iOS 11, Apple introduced a new navigation bar style: when the app content is at scroll position zero at the top , the title is moved into a separate line underneath the original navigation bar area and is massively enlarged.
Navigation Bar on iPhone in landscape mode. The height of the bar is reduced by 12pt, except on iPads. It's also a common practice to hide the status bar in landscape mode. With the release of iOS 12, Apple increased the height of the base navigation bar by 6 points on iPad devices only. Large titles continue to add a further 52 points to the height of the navigation bar.
A toolbar contains a set of actions for managing or manipulating the content of the current view. On the iPhone, it will always appear aligned at the bottom edge of the screen, while on the iPad, it can also be displayed aligned at the top of the screen. Similarly to the navigation bar, the background fill of toolbars can be modified, is translucent and blurs the underlaying content by default.
Toolbars should be used when a specific view requires more than three primary actions that would hardly fit or would look messy in the navigation bar. Search bars come in two different styles by default: prominent and minimal. Both versions do have the same functionality. Search bars can make use of a prompt — a short sentence to introduce the functionality in the context of the search. To provide even more control over a search query, it is possible to chain the search Bar with a scope bar.
The scope bar will use the same style as the search bar and might be useful when there are clearly defined categories for the search results. For example, in a music app, the search results could be filtered again by interpreters, albums or songs. The tab bar is used to allow the user to quickly navigate through the separate views of an application, and it should only be used for this purpose. It always appears at the bottom edge of the screen.
By default, its slightly translucent and uses the same system blur for underlaying content as the navigation bar. A tab bar can only contain a fixed maximum number of tabs. Just want to clarify that that the 1px will still display as 1px even on Retina because it's CSS based.
If not, a workaround that allows me to place the border strictly at the top. Add a comment. Sorted by: Reset to default. Highest score default Date modified newest first Date created oldest first. This is one of many reasons why using CSS to create your graphics is useful. See, bradbirdsall. Rob - that post seems to be incorrect. I actually just ran a test. I used an iPad Mini standard display and an iPhone 5 retina display.
I'm not seeing the 1px border on my iPhone appear as a 2px border, which is what I would expect. I ran this test locally and inspected the borders visually. Here is the code I used: jsfiddle. I would love to see someone else chime in here with a post explaining what should happen. I'm going only off of observation. I suspected as such as other articles wrote about how CSS pixels still displayed correctly as they are not device pixels. That article just made it more confusing.
Hopefully someone can confirm this as I also lack any form of high density pixel display. The Overflow Blog. The robots are coming for the boring parts of your job. Episode How a college extra-credit project became PHP3, still the Featured on Meta. Question Close Reasons project - Introduction and Feedback. Overhauling our community's closure reasons and guidance. Linked Related Hot Network Questions. Accept all cookies Customize settings.
An indicator at the bottom of the screen offers a hint about this interaction. This indicator is displayed over your app's interface. You'll need to account for this when designing your app. If your app uses UIKit controls and auto-layout, designing and developing for iPhone X and our other devices should be straightforward. Standard UIKit elements such as navigation bars, tables, and collection views, automatically adjust when viewed on iPhone X. Navigation bars, tab bars, and toolbars are positioned and scaled appropriately on all iOS devices.
The navigation bar's background material is extended to the display's top edge, and the background material of the tab bar and toolbar is extended to the bottom, while the elements they contain are positioned to prevent underlapping or clipping by other elements. In landscape orientation, table views will span the full width of the display, while the table cell's content view is inset. If your app uses auto-layout, views can automatically adapt to the iPhone X's larger display size.
For iOS 11, a new layout guide was added to auto-layout called a Safe Area layout guide. The Safe Area layout guide helps avoid underlapping system UI elements when positioning content and controls. On iPhone 8, the Safe Area is the same size as the viewport if no bars are visible. If a status bar is visible, the safe area's top edge is lowered to account for the status bar's height.
The Safe Area is further inset to accommodate a navigation bar and toolbar or tab bar. On iPhone X, the Safe Area layout guide provides an additional benefit. It's inset from the top and bottom of the screen edges in portrait orientation, even when no bars are visible on screen. This helps you to prevent interface elements from getting clipped or covered by positioning them away from the sensor housing, the display's rounded corners, and the Home indicator.
In landscape orientation, the Safe Area is inset from the sides of the screen and the Home indicator for the same reason. So, for example, the width of the content view in these table row cells is constrained by the Safe Area to keep them from underlapping the sensor housing or getting clipped by the display's rounded corners.
And the table's top edge has been inset to avoid underlapping the navigation bar. On iPhone 8, where occlusion and clipping is not an issue, the Safe Area width matches the display's width and the table is allowed to run edge-to-edge. You'll notice that text and controls are actually inset from the safe area. This inset is achieved using another layout guide called a layout margin. Layout margins provide consistent content margins across apps and help you to align content to other controls like navigation bar buttons.
Even if you're not using auto-layout, UIView provides the Safe Area insets and layout margin values as properties. Now, one final note about auto-layout. This essentially means that your app's layout should be consistent on all these devices.
If your app has custom controls or non-standard layouts, you may need to make slight alterations to your app's interface to work well on iPhone X. There are two aspects to this. First, your app or game should always fill the display that it runs on. Placing black bars at the top or bottom of the screen makes your app feel small, cramped, and inconsistent with other apps on iPhone X.
When designing background graphics, or rendering background scenes, keep in mind that iPhone X's display has a different aspect ratio than a 4. Background graphics designed for iPhone 8's aspect ratio will be cropped along the left and right edges on iPhone X if they're scaled to fill, or letter-boxed if scaled to fit. Similarly, background graphics designed for iPhone X, will either be cropped along the top and bottom edges on iPhone 8 or pillar-boxed. It's best compose images so that critical visual information remains visible regardless of the display's aspect ratio.
The second part of updating your layout involves insetting, or repositioning interactive elements and key information. Any element that's positioned too close to the viewport's edges or corners may get clipped by the display's rounded corners or covered by the sensor housing.
So be sure to inset controls and other elements to avoid this. Again, Safe Area layout guides and layout margins should be used for determining proper inset values. It's also worth noting that controls placed along a device's edge could be more difficult to reach depending on how the device is held.
Insetting controls can make interacting with them faster and more comfortable. Visual elements that appear tucked into corners or under screen edges may need to be revised since insetting them probably won't look right. In some cases, a different visual treatment may be necessary. Please also note that status bars are taller on iPhone X. Content views that have been inset by a fixed point value will have their top edges covered by the status bar. On iPhone X, the status bar no longer changes height when background tasks, like a phone call or location tracking, are running.
This helps create a more consistent user experience regardless of the status bar style. While not strictly a resolution-independent technique, using a fluid layout can help an app grow to take advantage of a larger window or screen by adding padding or by changing the layout dynamically. A lot of Mac, Windows and Linux apps use this method, as do some websites. This is partially how Apple handled the difference in resolution from iPhone to iPad — a lot of UI elements are the same pixel size, but padded to make use of the extra screen real estate.
The status bar is a good example of this. It works because the pixel densities of the iPhone 3GS and iPad are similar ppi vs ppi. Full view. The image below demonstrates what would happen if an iPhone app was simply padded to cater for the higher resolution display of the iPhone 4. Buttons and tap areas would be the same size in pixels, but half the physical size due to the higher pixel density, making things harder to read and to tap. Another approach to handling widely different resolutions and pixel densities is to draw everything using code or vector-based images like PDFs at runtime.
It lets you design or code once, and display at any resolution, even at fractional scales. Unfortunately, using vector-based images tends to be more resource-hungry and lacks pixel level control. The increase in resources may not be an issue for a desktop OS, but it is a considerable problem for a mobile OS. The lack of pixel level control is a very real problem for smaller elements.
Small icons are caricatures: they exaggerate some features, drop others and align shapes to a sharp grid. Even if all icons could be executed as vectors, the largest size would never scale down well. Although here he is talking exclusively about icons, his description is apt for most UI elements.
The decisions involved in scaling are creative, not mechanical. The best quality results — and the method Apple chose for the iPhone 3GS to iPhone 4 transition — comes from pre-rendered images, built for specific devices, at specific resolutions: bespoke designs for each required size, if you will. The difference in screen size and form factor means each device should be treated separately. Building apps for the iPhone 4 Retina display involves creating two sets of images — one at ppi and another at ppi.
When it comes to building UI elements that scale easily in Adobe Photoshop, bitmaps are your enemy because they pixelate or become blurry when scaled. While a little awkward at times, switching to all vectors does have significant advantages. Layer groups can have vector masks too, which is handy for complex compositing option-drag a mask from another layer to create a group mask. More complex objects get drawn in Adobe Illustrator to the exact pixel size, and then pasted into Photoshop as a shape layer.
The workaround is to zoom in, scroll around the document with the Hand Tool, and paste again.