

{"id":14902,"date":"2015-10-14T07:06:44","date_gmt":"2015-10-14T14:06:44","guid":{"rendered":"http:\/\/www.questionpro.com\/?p=14902"},"modified":"2023-01-11T07:01:40","modified_gmt":"2023-01-11T07:01:40","slug":"mobile-layout-difference","status":"publish","type":"post","link":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/","title":{"rendered":"Mobile: Layout Difference"},"content":{"rendered":"<p>This blog is an insight to why desktop and mobile should not be considered a single development project. Any project that considers both desktop and mobile should be tailored according to both. We will be looking at some of the reasons why one size doesn&#8217;t fit all and why it should not be taken for granted that it does.<\/p>\n<p>Let\u2019s kick off with screen size, the most obvious of all differences. The average size of a phone screen is one fifth to one tenth the size of monitors (Unless someone has made a 20+ inch phone that I don\u2019t know about). This means that more information must be displayed in less space, at the same time elements that are not the point of attention for the page must less noticeable . An example of this is sites that change the display accordingly. On a large screen they have buttons at the top or left of the page but on a smaller screen it becomes hidden in a slide out menu.<\/p>\n<p>The second on the list is touch input. Touch inputs aren\u2019t as accurate as the good old mouse, to handle this elements should be easily tapable. So instead of putting the word \u201cBack&#8221; on a page it makes more sense to have an arrow icon in it&#8217;s place. Swapping text to icons as much as possible helps to provide information in limited space along with making it easier to use on a touch device. (Added bonus: if you have sites or apps in multiple languages you don&#8217;t need to translate an icon)<\/p>\n<p>Third (this one is not too obvious) is load. By load I mean the system requirements required to run the app or page. I&#8217;m a gamer so I have a nice desktop, at the same time I use a Nexus 4 and an HTC sensation as my phone. I very rarely have loading problems on the desktop but on the days I take the HTC out to the same sites I see the phone slow to a crawl. When going for mobile pages keep them as simple as possible, don&#8217;t try and run every javascript, ajax and the like on a mobile version, keep it as lite as possible. For apps: unless a mobile version of a game is being made try to keep the requirements really low by considering the worst device you can think of as the target.<\/p>\n<p>That being said, do make a mobile website. With the growth of mobile very few visitors are coming from a desktop. Most are probably coming in from a portable device.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This blog is an insight to why desktop and mobile should not be considered a single development project. Any project [&hellip;]<\/p>\n","protected":false},"author":132,"featured_media":772104,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[310,191],"tags":[284,548,549,550,551,552],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mobile: Layout Difference | QuestionPro<\/title>\n<meta name=\"description\" content=\"This blog is an insight to why desktop and mobile should not be considered a single development project. Any project that considers both desktop and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile: Layout Difference | QuestionPro\" \/>\n<meta property=\"og:description\" content=\"This blog is an insight to why desktop and mobile should not be considered a single development project. Any project that considers both desktop and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/\" \/>\n<meta property=\"og:site_name\" content=\"QuestionPro\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/questionpro\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-14T14:06:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-11T07:01:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2015\/10\/difference-in-mobile-and-web-layouts-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"675\" \/>\n\t<meta property=\"og:image:height\" content=\"372\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zohayr Rege\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@questionpro\" \/>\n<meta name=\"twitter:site\" content=\"@questionpro\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zohayr Rege\" \/>\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\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/\"},\"author\":{\"name\":\"Zohayr Rege\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/#\/schema\/person\/da16393239533013c8b1bf93c1b6bd8e\"},\"headline\":\"Mobile: Layout Difference\",\"datePublished\":\"2015-10-14T14:06:44+00:00\",\"dateModified\":\"2023-01-11T07:01:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/\"},\"wordCount\":440,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.questionpro.com\/blog\/#organization\"},\"keywords\":[\"Best Practice\",\"desktop\",\"differences\",\"layout\",\"Mobile Design\",\"style\"],\"articleSection\":[\"Mobile\",\"Tech News\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/\",\"url\":\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/\",\"name\":\"Mobile: Layout Difference | QuestionPro\",\"isPartOf\":{\"@id\":\"https:\/\/www.questionpro.com\/blog\/#website\"},\"datePublished\":\"2015-10-14T14:06:44+00:00\",\"dateModified\":\"2023-01-11T07:01:40+00:00\",\"description\":\"This blog is an insight to why desktop and mobile should not be considered a single development project. Any project that considers both desktop and\",\"breadcrumb\":{\"@id\":\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.questionpro.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Surveys\",\"item\":\"https:\/\/www.questionpro.com\/blog\/category\/survey-software\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mobile\",\"item\":\"https:\/\/www.questionpro.com\/blog\/category\/survey-software\/mobile-2\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Mobile: Layout Difference\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/#website\",\"url\":\"https:\/\/www.questionpro.com\/blog\/\",\"name\":\"QuestionPro\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.questionpro.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.questionpro.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/#organization\",\"name\":\"QuestionPro\",\"url\":\"https:\/\/www.questionpro.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2022\/10\/questionpro-logo.svg\",\"contentUrl\":\"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2022\/10\/questionpro-logo.svg\",\"caption\":\"QuestionPro\"},\"image\":{\"@id\":\"https:\/\/www.questionpro.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/questionpro\",\"https:\/\/twitter.com\/questionpro\",\"https:\/\/www.linkedin.com\/company\/questionpro\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/#\/schema\/person\/da16393239533013c8b1bf93c1b6bd8e\",\"name\":\"Zohayr Rege\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.questionpro.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/48c57043ac62a6f1f4263acc145ef95d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/48c57043ac62a6f1f4263acc145ef95d?s=96&d=mm&r=g\",\"caption\":\"Zohayr Rege\"},\"url\":\"https:\/\/www.questionpro.com\/blog\/author\/zohayr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile: Layout Difference | QuestionPro","description":"This blog is an insight to why desktop and mobile should not be considered a single development project. Any project that considers both desktop and","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:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/","og_locale":"en_US","og_type":"article","og_title":"Mobile: Layout Difference | QuestionPro","og_description":"This blog is an insight to why desktop and mobile should not be considered a single development project. Any project that considers both desktop and","og_url":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/","og_site_name":"QuestionPro","article_publisher":"https:\/\/www.facebook.com\/questionpro","article_published_time":"2015-10-14T14:06:44+00:00","article_modified_time":"2023-01-11T07:01:40+00:00","og_image":[{"width":675,"height":372,"url":"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2015\/10\/difference-in-mobile-and-web-layouts-1.png","type":"image\/png"}],"author":"Zohayr Rege","twitter_card":"summary_large_image","twitter_creator":"@questionpro","twitter_site":"@questionpro","twitter_misc":{"Written by":"Zohayr Rege","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#article","isPartOf":{"@id":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/"},"author":{"name":"Zohayr Rege","@id":"https:\/\/www.questionpro.com\/blog\/#\/schema\/person\/da16393239533013c8b1bf93c1b6bd8e"},"headline":"Mobile: Layout Difference","datePublished":"2015-10-14T14:06:44+00:00","dateModified":"2023-01-11T07:01:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/"},"wordCount":440,"commentCount":0,"publisher":{"@id":"https:\/\/www.questionpro.com\/blog\/#organization"},"keywords":["Best Practice","desktop","differences","layout","Mobile Design","style"],"articleSection":["Mobile","Tech News"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/","url":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/","name":"Mobile: Layout Difference | QuestionPro","isPartOf":{"@id":"https:\/\/www.questionpro.com\/blog\/#website"},"datePublished":"2015-10-14T14:06:44+00:00","dateModified":"2023-01-11T07:01:40+00:00","description":"This blog is an insight to why desktop and mobile should not be considered a single development project. Any project that considers both desktop and","breadcrumb":{"@id":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.questionpro.com\/blog\/mobile-layout-difference\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.questionpro.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Surveys","item":"https:\/\/www.questionpro.com\/blog\/category\/survey-software\/"},{"@type":"ListItem","position":3,"name":"Mobile","item":"https:\/\/www.questionpro.com\/blog\/category\/survey-software\/mobile-2\/"},{"@type":"ListItem","position":4,"name":"Mobile: Layout Difference"}]},{"@type":"WebSite","@id":"https:\/\/www.questionpro.com\/blog\/#website","url":"https:\/\/www.questionpro.com\/blog\/","name":"QuestionPro","description":"","publisher":{"@id":"https:\/\/www.questionpro.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.questionpro.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.questionpro.com\/blog\/#organization","name":"QuestionPro","url":"https:\/\/www.questionpro.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.questionpro.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2022\/10\/questionpro-logo.svg","contentUrl":"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2022\/10\/questionpro-logo.svg","caption":"QuestionPro"},"image":{"@id":"https:\/\/www.questionpro.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/questionpro","https:\/\/twitter.com\/questionpro","https:\/\/www.linkedin.com\/company\/questionpro\/"]},{"@type":"Person","@id":"https:\/\/www.questionpro.com\/blog\/#\/schema\/person\/da16393239533013c8b1bf93c1b6bd8e","name":"Zohayr Rege","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.questionpro.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/48c57043ac62a6f1f4263acc145ef95d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/48c57043ac62a6f1f4263acc145ef95d?s=96&d=mm&r=g","caption":"Zohayr Rege"},"url":"https:\/\/www.questionpro.com\/blog\/author\/zohayr\/"}]}},"featured_image_src":"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2015\/10\/difference-in-mobile-and-web-layouts-1-600x372.png","featured_image_src_square":"https:\/\/www.questionpro.com\/blog\/wp-content\/uploads\/2015\/10\/difference-in-mobile-and-web-layouts-1-600x372.png","author_info":{"display_name":"Zohayr Rege","author_link":"https:\/\/www.questionpro.com\/blog\/author\/zohayr\/"},"_links":{"self":[{"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/posts\/14902"}],"collection":[{"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/users\/132"}],"replies":[{"embeddable":true,"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/comments?post=14902"}],"version-history":[{"count":1,"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/posts\/14902\/revisions"}],"predecessor-version":[{"id":772116,"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/posts\/14902\/revisions\/772116"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/media\/772104"}],"wp:attachment":[{"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/media?parent=14902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/categories?post=14902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.questionpro.com\/blog\/wp-json\/wp\/v2\/tags?post=14902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}