{"id":923,"date":"2018-09-26T10:14:48","date_gmt":"2018-09-26T10:14:48","guid":{"rendered":"https:\/\/devexperts.com\/blog\/?p=923"},"modified":"2022-05-18T10:47:28","modified_gmt":"2022-05-18T10:47:28","slug":"5-unbreakable-mobile-app-design-rules","status":"publish","type":"post","link":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/","title":{"rendered":"5 Unbreakable Mobile App Design Rules"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">1. Use the grid<\/h3>\n\n\n\n<p>The use of a grid makes a developer\u2019s life much easier by helping arrange the core elements. It also assists setting the pace of the design with the aim of creating a consistent experience.<\/p>\n\n\n\n<h3 id=\"h-2-adapt-to-every-screen-size\" class=\"wp-block-heading\">2. Adapt to every screen size<\/h3>\n\n\n\n<p>Carefully consider the varying screen sizes an application may be used on, and test the main design layouts for all possible devices. A modular grid can be of great assistance here. It\u2019s often difficult to predict what problems irregular screens may reveal.<\/p>\n\n\n\n<h3 id=\"h-3-check-the-contrast\" class=\"wp-block-heading\">3. Check the contrast<\/h3>\n\n\n\n<p>The more attention you give to contrast the better. People frequently use mobile devices outside in bright sunlight.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Stick to the guidelines of the platform (iOS Human Interface Guidelines and Material design)<\/h3>\n\n\n\n<p>Although guides can frequently help end-users work in any application in a familiar environment, it\u2019s always tempting to break the rules, because guides restrict creativity and do not always dictate the best ideas to solve a specific problem. When you have enough practice with guidelines, you will understand where it is possible to deviate from them for better UX. Until then follow the rules.<\/p>\n\n\n\n<h3 id=\"h-5-adhere-to-accessibility-standards\" class=\"wp-block-heading\">5. Adhere to accessibility standards<\/h3>\n\n\n\n<p>One of the major accessibility standards these days is the size and location of tap areas, such as buttons or controls. Locate key interface elements where users can easily reach them with the thumb of the active hand.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Use the grid The use of a grid makes a developer\u2019s life much easier by helping arrange the core &hellip; <\/p>\n","protected":false},"author":1,"featured_media":1381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2020],"tags":[23,34],"class_list":["post-923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fintech","tag-design","tag-mobile"],"acf":{"nifty_post_card_image":null,"nifty_post_card_index_big":null,"nifty_post_inner_image":null,"nifty_post_card_banner":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Unbreakable Mobile App Design Rules \u2013 Devexperts Blog<\/title>\n<meta name=\"description\" content=\"A set of rules which help to make a developer\u2019s life much easier. Various screen sizes, attention to contrast, accessibility are mobile app design basics.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Unbreakable Mobile App Design Rules\" \/>\n<meta property=\"og:description\" content=\"A set of rules which help to make a developer\u2019s life much easier. Various screen sizes, attention to contrast, accessibility are mobile app design basics.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/\" \/>\n<meta property=\"og:site_name\" content=\"Devexperts Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/devexperts\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-26T10:14:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-18T10:47:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app-medium.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1156\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stas Mikheenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@devexperts\" \/>\n<meta name=\"twitter:site\" content=\"@devexperts\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stas Mikheenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/\"},\"author\":{\"name\":\"Stas Mikheenko\"},\"headline\":\"5 Unbreakable Mobile App Design Rules\",\"datePublished\":\"2018-09-26T10:14:48+00:00\",\"dateModified\":\"2022-05-18T10:47:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/\"},\"wordCount\":233,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png\",\"keywords\":[\"design\",\"mobile\"],\"articleSection\":[\"Fintech\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/\",\"url\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/\",\"name\":\"5 Unbreakable Mobile App Design Rules \u2013 Devexperts Blog\",\"isPartOf\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png\",\"datePublished\":\"2018-09-26T10:14:48+00:00\",\"dateModified\":\"2022-05-18T10:47:28+00:00\",\"description\":\"A set of rules which help to make a developer\u2019s life much easier. Various screen sizes, attention to contrast, accessibility are mobile app design basics.\",\"breadcrumb\":{\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage\",\"url\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png\",\"contentUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png\",\"width\":3840,\"height\":700},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devexperts.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Unbreakable Mobile App Design Rules\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devexperts.com\/blog\/#website\",\"url\":\"https:\/\/devexperts.com\/blog\/\",\"name\":\"Devexperts Blog\",\"description\":\"We make complex finance ideas on technology, innovation and business simple\",\"publisher\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devexperts.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\",\"name\":\"Devexperts LLC\",\"url\":\"https:\/\/devexperts.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png\",\"contentUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png\",\"width\":167,\"height\":30,\"caption\":\"Devexperts LLC\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/devexperts\/\",\"https:\/\/x.com\/devexperts\",\"https:\/\/www.linkedin.com\/company\/devexperts\",\"https:\/\/www.youtube.com\/channel\/UCF3FRmes2KrcVsTXQ1aAB5w\/featured\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Unbreakable Mobile App Design Rules \u2013 Devexperts Blog","description":"A set of rules which help to make a developer\u2019s life much easier. Various screen sizes, attention to contrast, accessibility are mobile app design basics.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/","og_locale":"en_US","og_type":"article","og_title":"5 Unbreakable Mobile App Design Rules","og_description":"A set of rules which help to make a developer\u2019s life much easier. Various screen sizes, attention to contrast, accessibility are mobile app design basics.","og_url":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/","og_site_name":"Devexperts Blog","article_publisher":"https:\/\/www.facebook.com\/devexperts\/","article_published_time":"2018-09-26T10:14:48+00:00","article_modified_time":"2022-05-18T10:47:28+00:00","og_image":[{"width":1156,"height":600,"url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app-medium.png","type":"image\/png"}],"author":"Stas Mikheenko","twitter_card":"summary_large_image","twitter_creator":"@devexperts","twitter_site":"@devexperts","twitter_misc":{"Written by":"Stas Mikheenko","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#article","isPartOf":{"@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/"},"author":{"name":"Stas Mikheenko"},"headline":"5 Unbreakable Mobile App Design Rules","datePublished":"2018-09-26T10:14:48+00:00","dateModified":"2022-05-18T10:47:28+00:00","mainEntityOfPage":{"@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/"},"wordCount":233,"commentCount":0,"publisher":{"@id":"https:\/\/devexperts.com\/blog\/#organization"},"image":{"@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage"},"thumbnailUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png","keywords":["design","mobile"],"articleSection":["Fintech"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/","url":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/","name":"5 Unbreakable Mobile App Design Rules \u2013 Devexperts Blog","isPartOf":{"@id":"https:\/\/devexperts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage"},"image":{"@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage"},"thumbnailUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png","datePublished":"2018-09-26T10:14:48+00:00","dateModified":"2022-05-18T10:47:28+00:00","description":"A set of rules which help to make a developer\u2019s life much easier. Various screen sizes, attention to contrast, accessibility are mobile app design basics.","breadcrumb":{"@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#primaryimage","url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png","contentUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2018\/09\/mobile-app.png","width":3840,"height":700},{"@type":"BreadcrumbList","@id":"https:\/\/devexperts.com\/blog\/5-unbreakable-mobile-app-design-rules\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devexperts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Unbreakable Mobile App Design Rules"}]},{"@type":"WebSite","@id":"https:\/\/devexperts.com\/blog\/#website","url":"https:\/\/devexperts.com\/blog\/","name":"Devexperts Blog","description":"We make complex finance ideas on technology, innovation and business simple","publisher":{"@id":"https:\/\/devexperts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devexperts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/devexperts.com\/blog\/#organization","name":"Devexperts LLC","url":"https:\/\/devexperts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png","contentUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png","width":167,"height":30,"caption":"Devexperts LLC"},"image":{"@id":"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/devexperts\/","https:\/\/x.com\/devexperts","https:\/\/www.linkedin.com\/company\/devexperts","https:\/\/www.youtube.com\/channel\/UCF3FRmes2KrcVsTXQ1aAB5w\/featured"]}]}},"_links":{"self":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/comments?post=923"}],"version-history":[{"count":16,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/923\/revisions"}],"predecessor-version":[{"id":4128,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/923\/revisions\/4128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/media\/1381"}],"wp:attachment":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/media?parent=923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/categories?post=923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/tags?post=923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}