{"id":5255,"date":"2017-09-29T12:40:58","date_gmt":"2017-09-29T10:40:58","guid":{"rendered":"https:\/\/wpkraken.io\/?p=5255"},"modified":"2017-09-29T12:40:58","modified_gmt":"2017-09-29T10:40:58","slug":"designing-websites-for-iphone-x-guidelines","status":"publish","type":"post","link":"https:\/\/wpkraken.io\/blog\/designing-websites-for-iphone-x-guidelines\/","title":{"rendered":"Designing Websites for iPhone X and Making Them Compatible"},"content":{"rendered":"Apple held an event on September 12 in their brand new Steve Jobs theater to present new products. iPhone X<\/a> was the star of the evening (The proper pronunciation used by Apple is “ten” – don’t ask me why<\/em>). With a brand new bezel-less design, no home button and a cut-out (aka “notch”) at the top which houses some very cool sensors. It also has a brand new Super Retina OLED display which requires a @ 3x resolution (the same goes for the iPhone 7-8 Plus). The Ten’s resolution is 1125 x 2436px. Also, the brand new iPhone has rounded corners of the screen. This may cut out up some of the elements stuck to that area. Recently WebKit blog published an article with design guidelines<\/a>. Below you will find all you need to know about designing websites for iPhone X. \n

Default Behavior<\/h2>\n

Out of the box, the brand new iPhone in landscape orientation will be displaying the website content with safe areas on the sides. The space between site content and the edge of the screen will be filled with a\u00a0background-color<\/code> specified in the <html><\/code>or <body><\/code> HTML tags. That’s a good move from Apple because none of the websites will look broken. The content won’t be covered by the \u201cnotch.\u201d The site won’t look as good as it would if it was fully embracing the gorgeous edge to edge display. For websites with a full-width header that would be a problem because the experience of the site would be different.<\/p>\n

Furthermore, the iPhone X does not have a home button, Apple replaced it with a line that seats at the bottom of the screen. For websites with a secondary navigation stuck to the bottom of the screen that might be a problem. WebKit does not manage this issue by default. You will have to adjust your markup to be iPhone X compatible.<\/p>\n

\"Designing
Image from WebKit.org blog<\/figcaption><\/figure>\n

Designing Websites for iPhone X<\/h2>\n

Apple Developers have implemented few new features into the WebKit, which were made especially for the iPhone X. I will describe them below.<\/p>\n

See also:<\/strong> Most Important Web Design Elements And Principles You Should Know<\/a><\/p>\n

Viewport Extension<\/h3>\n

With iOS 11 release Apple introduced an extension to the already existing viewport<\/code> meta tag. It’s called viewport-fit<\/code>. Its default value is auto<\/code>. This feature will give you the control over the insetting behavior. As you might guess when the viewport-fit<\/code> value is set to\u00a0auto<\/code>, the website will inset automatically. To alter the default behavior, you can set it tocover<\/code>. It will result in edge to edge display of your website.<\/p>\n

Here is an example of how the meta tag would look like:<\/p>\n

[k_blog_code]<meta name=’viewport’ content=’initial-scale=1, viewport-fit=cover’>[\/k_blog_code]<\/p>\n

As a result, your site appears at a full width of the screen. The sensors housing probably covers the content. Additionally, without proper padding<\/code>, your content will be stacked along the edge of the screen. You can quickly see that it is essential to respect the safe area inset.<\/p>\n

\"iPhone
Image from WebKit.org blog<\/figcaption><\/figure>\n

Safe Area Inset<\/h3>\n

While the page is set to full width, probably your website has its content stacked to the side of the screen. Of course, if you have a full-width header, it would be great if you could just add padding to it. That way, the background will display across the screen, but your content will be inside the safe area.<\/p>\n

Therefore to resolve this Apple implemented new safe-area-inset<\/code>, pre-defined set of 4 constants and a new CSS function called constant()<\/code>. The safe area pre-defined constants are as follows: safe-area-inset-top<\/code>, safe-area-inset-right<\/code>, safe-area-inset-bottom<\/code> and save-area-inset-left<\/code>. When you combine all four of those constants, you can reference the current size of safe area inset on each side. The constant()<\/code> works everywhere a var()<\/code>\u00a0does.<\/p>\n

\"iPhone
Image from WebKit.org blog<\/figcaption><\/figure>\n

Here is an example:<\/p>\n

[k_blog_code].post {
\npadding: 12px;
\npadding-left: constant(safe-area-inset-left);
\npadding-right: constant(safe-area-inset-right);
\n}[\/k_blog_code]<\/p>\n

Most of all, you must remember that not all browsers support constant()<\/code>\u00a0While not supported it is ignored by the browser. Make sure to prepare a fallback for those browsers.<\/p>\n

\"Designing
Image from WebKit.org blog<\/figcaption><\/figure>\n

In addition on the WebKit blog, you may also find information about two new functions min()<\/code> and max()<\/code>. Most browsers, including Safari does not support them (they will be in feature releases). If you want to learn more, please read this blog post<\/a>.<\/p>\n\n

Conclusion<\/h2>\n

Making a website iPhone X compatible seams easy enough for any developer\/designer to implement. Apple has introduced some cool new features for developers, to make sure they will use fully the new gorgeous screen on iPhone X.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how your website will be displayed on the brand new iPhone. How to make it compatible or design from scratch.<\/p>\n","protected":false},"author":25,"featured_media":5260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[19,39],"tags":[40,20,41,42,43],"_links":{"self":[{"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/posts\/5255"}],"collection":[{"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/comments?post=5255"}],"version-history":[{"count":0,"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/posts\/5255\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/media\/5260"}],"wp:attachment":[{"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/media?parent=5255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/categories?post=5255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpkraken.io\/wp-json\/wp\/v2\/tags?post=5255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}