Iphone App Design

Resolutions & Display Specifications

Resolutions

Devices Portrait Landscape
iPhone 5 iPhone 5, 5S, 5C 640×1136 px 1136×640 px
iPhone 4/4S 640×960 px 960×640 px
iPhone & iPod Touch 1st, 2nd and 3rd Generation 320×480 px 480×320 px
Retina iPad iPad 3, iPad 4, iPad Air 1536×2048 px 2048×1536 px
iPad Mini 768×1024 px 1024×768 px
iPad Mini Retina 1536×2048 px 2048×1536 px
iPad 1st and 2nd Generation 768×1024 px 1024×768 px

 

Displays

Devices PPI Color Mode Color Temperature
iPhone 5 iPhone 5, 5S, 5C 326 8bit RGB Warm
iPhone 4/4S 326 8bit RGB Cool
iPhone & iPod Touch 1st, 2nd and 3rd Generation 163 8bit RGB Warm
Retina iPad iPad 3, iPad 4, iPad Air 264 8bit RGB Warm
iPad Mini 163 8bit RGB Warm
iPad Mini Retina 326 8bit RGB Warm
iPad 1st and 2nd Generation 132 8bit RGB Warm

 

App Icons

One of the biggest changes in iOS 7 is the new dimensions and the visual language used for app icons. Apple introduced a grid system, increased the general size of icons on your home screen and also masked icons with a different shape.

Dimensions

Device App Icon AppStore Icon Spotlight Icon Settings Icon
iPhone 5 iPhone 5, 5S, 5C 120×120 px 1024×1024 px 80×80 px 58×58 px
iPhone 4/4S 120×120 px 1024×1024 px 80×80 px 58×58 px
Retina iPad iPad 3, 4, Air, Mini Retina 152×152 px 1024×1024 px 80×80 px 58×58 px
iPad Mini 76×76 px 512×512 px 40×40 px 29×29 px
iPad 1st and 2nd Generation 76×76 px 512×512 px 40×40 px 29×29 px

 

User Interface

The biggest change in iOS 7 is definitely the all new flat user interface design language used across the whole operating system. While pretty much all gradients and shadows got removed from UI elements, the sizes of commonly used design elements got changed in some cases as well.

Commonly used design elements

Device Height of Status Bar Height of Navigation Bar Height of Tab Bar Width of Tables
iPhone 5 iPhone 5, 5S, 5C 40 px 88 / 64 px 98 px 640 / 1136 px
iPhone 4/4S 40 px 88 / 64 px 98 px 640 / 960 px
Retina iPad iPad 3, 4, Air, Mini Retina 40 px 88 px 112 px dynamic
iPad Mini 20 px 44 px 56 px dynamic
iPad 1st and 2nd Generation 20 px 44 px 56 px dynamic

 

 

rollover image style

<img src=”<?php echo get_template_directory_uri(); ?>/images/image1.png”  onmouseover=”this.src='<?php echo get_template_directory_uri(); ?>/images/image1_hover.png'” onmouseout=”this.src='<?php echo get_template_directory_uri(); ?>/images/image1.png'”  title=”werbebucher.at” alt=”Bucher Logo” />

Responsive Meta Tag !

Meta Tag

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 or older doesn’t support media query. You can use media-queries.jsor respond.js to add media query support in IE.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Meta tag for Mobile site

To ensure proper rendering and touch zooming, add the viewport meta tag to your

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don’t recommend this on every site, so use caution!

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

Default Responsive CSS for Template

/*Responsive CSS*/
@viewport {
width: device-width;
zoom: 1;
}

img, video, canvas {
max-width: 100%;
}

figure {
height: 0;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
width: 100%;
}
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

@media all and (min-width: 768px) and (max-width: 1024px) {

}

@media all and (min-width: 480px) and (max-width: 768px) {

}

@media all and (min-width: 320px) and (max-width: 480px) {

}

@media all and (min-width: 240px) and (max-width: 320px) {

}

Text Blink

* Text Blink

<style>
#Blinker {
display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left;
}

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-moz-animation-play-state: paused;
}

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-webkit-animation-play-state: paused;
}

</style>

<div id=”Blinker” >Text to blink here</div>

Floating magically div

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;
  2.     <style type=”text/css”>
  3.         #container
  4.         {
  5.             display: table;
  6.             width:400px;
  7.             height:20px;
  8.         }
  9.         #leftBox
  10.         {
  11.             display: table-cell;
  12.             background-color:#006699;
  13.             width:20px;
  14.             height:20px;
  15.         }
  16.         #centerBox
  17.         {
  18.             display: table-cell;
  19.             background-color:#CC0000;
  20.             height:20px;
  21.         }
  22.         #rightBox
  23.         {
  24.             display: table-cell;
  25.             background-color:#006699;
  26.             width:20px;
  27.             height:20px;
  28.         }
  29.     </style>
  30. </head>
  31.     <div id=”container”>
  32.         <div id=”leftBox”></div>
  33.         <div id=”centerBox”>Content</div>
  34.         <div id=”rightBox”></div>
  35.     </div>
  36. </body>
  37. </html>