{"id":20993,"date":"2015-09-23T08:34:14","date_gmt":"2015-09-23T07:34:14","guid":{"rendered":"https:\/\/www.inovex.de\/\/?p=860"},"modified":"2015-09-23T08:34:14","modified_gmt":"2015-09-23T07:34:14","slug":"usability-guideline-mobile-web-views","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/","title":{"rendered":"Usability Guideline for Mobile Web Views"},"content":{"rendered":"<p>The fact that more and more users are currently using mobile devices to access the internet increases the importance of usability for those appliances. In 2014 about 27.5% website requests around the whole planet were mobile. <a href=\"http:\/\/www.dailymail.co.uk\/sciencetech\/article-3069322\/Google-reveals-searches-mobile-devices-PCs-time.html\" target=\"_blank\" rel=\"noopener\">Google revealed<\/a> that this year more search requests were\u00a0made from mobile devices than desktop computers\u00a0for the first time in the USA and many other parts of the world. That&#8217;s why web developers have to shift their focus to the mobile user experience \u2013\u00a0read on for a detailed analysis of the current situation and its consequences for developers.<!--more--><\/p>\n<p>The user experience of websites and web applications is more important than ever to create good products with which users can manage their tasks as easily as possible. Still, implementing\u00a0appropriate GUI components on the front end for an effective and efficient usage is neglected all too often. Developers have to focus on the structure and design of future websites and extend their usability skills.<\/p>\n<figure id=\"attachment_873\" aria-describedby=\"caption-attachment-873\" style=\"width: 469px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/mobile_vs_desktop_internet_usage.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-873 size-full\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/mobile_vs_desktop_internet_usage.png\" alt=\"Internet usage: mobile vs desktop\" width=\"469\" height=\"281\" \/><\/a><figcaption id=\"caption-attachment-873\" class=\"wp-caption-text\">Increasing number of mobile devices from 2007 to 2015<\/figcaption><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#GUI-Elements\" >GUI Elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#Responsive-vs-Adaptive-Design\" >Responsive vs. Adaptive Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#Summary\" >Summary<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#Dos\" >Do&#8217;s<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#Donts\" >Dont&#8217;s<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#Literature\" >Literature<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#Get-in-touch\" >Get in touch<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"GUI-Elements\"><\/span>GUI Elements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p class=\"p1\">A Key difference\u00a0between\u00a0desktop and\u00a0mobile devices is the limited space. This directly impacts on\u00a0positioning and choosing sizes of GUI elements when porting a website from desktop to mobile. You should always keep the <strong>Fat Finger Syndrome<\/strong> in mind \u2013 users control the app with their fingers, thus touch elements need to be increased in size.<span class=\"Apple-converted-space\">\u00a0 <\/span><\/p>\n<p class=\"p1\">Also <strong>Progressive Disclosure<\/strong> is a\u00a0strategy you should use wisely<\/p>\n<ul>\n<li class=\"p1\">On first sight, only show the main functions and control elements<\/li>\n<li class=\"p1\">For users who know your app better, put advanced options into menus<\/li>\n<\/ul>\n<p>A study of GUI\u00a0components used in the web leads to the following\u00a0categorization:<\/p>\n<ol>\n<li>Basic HTML-Tags\n<ul>\n<li>input<\/li>\n<li>button<\/li>\n<li>form<\/li>\n<li>select<\/li>\n<li>slider<\/li>\n<li>font<\/li>\n<li>embedded media<\/li>\n<\/ul>\n<\/li>\n<li>Navigation\n<ul>\n<li>navigation bar<\/li>\n<li>search bar<\/li>\n<li>side menu<\/li>\n<li>breadcrumb<\/li>\n<li>pagination<\/li>\n<li>scrollspy<\/li>\n<\/ul>\n<\/li>\n<li>Content\n<ul>\n<li>list (e.g. table, accordion, checklist)<\/li>\n<li>symbol<\/li>\n<li>gallery<\/li>\n<li>calendar<\/li>\n<li>dialog<\/li>\n<li>i18n (language internationalization)<\/li>\n<\/ul>\n<\/li>\n<li>Additional information\n<ul>\n<li>popup<\/li>\n<li>tooltip<\/li>\n<li>spinner<\/li>\n<li>badge<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>These\u00a0GUI components represent the most commonly used elements on websites. You should always consider which component is most effective for your use case. For mobile\u00a0views you\u00a0have to keep best practices in mind and choose\u00a0the element that promises\u00a0the best efficiency and effectiveness.<\/p>\n<p>Jennifer Gove presented nice ideas and principles for designing a mobile view at Google I\/O 2014:<\/p>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-embed _brlbs-video-youtube\"> <img class=\"_brlbs-thumbnail\" src=\"https:\/\/www.inovex.de\/wp-content\/plugins\/borlabs-cookie\/images\/cb-no-thumbnail.png\" alt=\"YouTube\"> <div class=\"_brlbs-caption\"> <p>By loading the video, you agree to YouTube's privacy policy.<br><a href=\"https:\/\/policies.google.com\/privacy?hl=en&amp;gl=en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Learn more<\/a><\/p> <p><a class=\"_brlbs-btn _brlbs-icon-play-white\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Load video<\/a><\/p> <p><label><input type=\"checkbox\" name=\"unblockAll\" value=\"1\" checked> <small>Always unblock YouTube<\/small><\/label><\/p> <\/div> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"youtube\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC94cXZpR3d5eTd5MCIgZnJhbWVib3JkZXI9IjAiIGdlc3R1cmU9Im1lZGlhIiBhbGxvdz0iZW5jcnlwdGVkLW1lZGlhIiBhbGxvd2Z1bGxzY3JlZW49ImFsbG93ZnVsbHNjcmVlbiI+PC9pZnJhbWU+PC9wPg==<\/div><\/div>\n<p>More and more mobile devices are sold each year. In 2013 more than one billion smartphones (devices with extended system and connection functionality) were sold for the first time. Market analyses show the rising demand for flexible and easy to use tools and devices.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Responsive-vs-Adaptive-Design\"><\/span>Responsive vs. Adaptive Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There is an incredible amount of different screen sizes out there.\u00a0In 2012 <a href=\"http:\/\/opensignal.com\/\">OpenSignal<\/a> started a six month <a href=\"http:\/\/opensignal.com\/reports\/fragmentation.php\" target=\"_blank\" rel=\"noopener\">survey<\/a> to figure out how many different mobile phones are in use. They found 681.900 Android devices in total with 4.000 different phones and 230 different screen sizes.\u00a0The fact that each manufacturer can create his own screen size and screen resolution leads to an infinite variety of sizes.<\/p>\n<figure id=\"attachment_892\" aria-describedby=\"caption-attachment-892\" style=\"width: 645px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/mobile_screen_sizes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-892 size-full\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/mobile_screen_sizes.png\" alt=\"Uncountable different screen sizes and resolutions\" width=\"645\" height=\"400\" \/><\/a><figcaption id=\"caption-attachment-892\" class=\"wp-caption-text\"><a href=\"http:\/\/www.thisisentropy.com\/chatterbox\/2014\/8\/12\/phablets-phablets-everywhere\" target=\"_blank\" rel=\"noopener\">Variety of different screen sizes<\/a><\/figcaption><\/figure>\n<p class=\"p1\">So modern websites have to be dynamic to cater to all these different screen sizes.\u00a0There are basically three ways to achieve\u00a0this:<\/p>\n<ul>\n<li class=\"p1\">Responsive Design<\/li>\n<li class=\"p1\">Dynamic Deployment<\/li>\n<li class=\"p1\">Separate Website<\/li>\n<\/ul>\n<p>The most commonly used solution is \u2018Responsive Design\u2019, as there is no redundant information. The information of the site is provided only once. <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_mediaquery.asp\" target=\"_blank\" rel=\"noopener\">Media queries<\/a>\u00a0recognize\u00a0screen dimensions\u00a0and adjust the view components.<\/p>\n<p>Creating a separate website for mobile devices (Dynamic Deployment) means\u00a0more effort, because the whole application has to be built multiple times. This\u00a0approach\u00a0is\u00a0only recommended if the app is very complex and provides certain\u00a0mobile-specific elements.<\/p>\n<figure id=\"attachment_895\" aria-describedby=\"caption-attachment-895\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-14-at-14.50.19.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-895 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-14-at-14.50.19-1024x473.png\" alt=\"Difference between responsive and adaptive Design\" width=\"800\" height=\"370\" \/><\/a><figcaption id=\"caption-attachment-895\" class=\"wp-caption-text\">Responsive Design and Adaptive Design<\/figcaption><\/figure>\n<p>As you can see in the graphic above there is only one version needed when using Responsive Design. However you need two or more version when using Adaptive Design (one version for each layout). The user agent sends its information to the server to check whether the needed functionality and dynamic is given. Dynamic Deployment and a separate website distinguish between the way of accessing the content. In Dynamic Deployment the user agent decides which version is delivered to the client&#8217;s device. With a separate website the developer can create a different domain, so that users can decide which version they want to see through the URL.<\/p>\n<p>Today in most cases it&#8217;s definitely the best to create one version and use media queries to rearrange elements for other\u00a0layouts.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This was\u00a0a very short introduction to the usability of mobile views. I hope you got an insight into usability and its\u00a0complexity.<\/p>\n<p>Provide your website or application to mobile users!\u00a0Use frameworks like <a href=\"http:\/\/getbootstrap.com\" target=\"_blank\" rel=\"noopener\">bootstrap<\/a> that help you creating mobile views. Also start using <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"noopener\">Flexbox<\/a> and <a href=\"https:\/\/medium.com\/@patrickbrosset\/css-grid-layout-6c9cba6e8a5a\" target=\"_blank\" rel=\"noopener\">CSS Grid Layouts<\/a>\u00a0to easily structure your HTML\/CSS and separate content and\u00a0style.<\/p>\n<p>To summarize, here are the most important rules you should stick to when creating a mobile optimized website or web application.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Dos\"><\/span>Do&#8217;s<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li class=\"p1\">Reduce your content to the most important<\/li>\n<li class=\"p1\">Make use of Progressive Disclosure<\/li>\n<li class=\"p1\">Create clear and easy navigation<\/li>\n<li class=\"p1\">Optimize usage of space<\/li>\n<li class=\"p1\">Recognize the Fat Finger Syndrome<\/li>\n<li class=\"p1\">Make the few main actions clearly visible<\/li>\n<li class=\"p1\">Target the audience of\u00a0your website\/web application<\/li>\n<li class=\"p1\">Consider different screen sizes and performance of devices<\/li>\n<li class=\"p1\">Place an \u2018intelligent\u2019 search bar on front page, not (hidden) in menus (autocorrect, make suggestions while user is typing etc.)<\/li>\n<li class=\"p1\">Create smart forms where the user knows intuitively what to do (show hints, use labels, correct mistakes or give tips)<\/li>\n<li class=\"p1\">Think about a side menu only\u00a0if there is content that\u2019s worth\u00a0mentioning<\/li>\n<li class=\"p1\">Use the Law of proximity to group elements before adding lines (they quickly\u00a0become visual noise)<\/li>\n<li class=\"p1\">Try to find appropriate symbols for actions because they are recognizable more easily and space is limited<\/li>\n<li class=\"p1\">Icon fonts help your webapp to be more performant (vector icons are scalable, icons can be treated as text)<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Donts\"><\/span>Dont&#8217;s<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li class=\"p1\">Don&#8217;t demand a registration before showing content (users want to see what you can offer them before they give their private information)<\/li>\n<li class=\"p1\">Avoid using images to enhance your websites design &#8211; only show images if they contain information<\/li>\n<li class=\"p1\">Use modal dialogs only for critical actions (e.g. before deleting something important)<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Literature\"><\/span>Literature<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you are interested in usability and creating mobile views you should check out the following resources<\/p>\n<ul>\n<li>Mobile Usability \u00a0(Jakob Nielsen and Raluca Budiu, 2013)<\/li>\n<li>100 Things every Designer needs to know about People (Susan Weinschenk, 2011)<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/principles\/\" target=\"_blank\" rel=\"noopener\">Principles for web design<\/a><\/li>\n<li><a href=\"http:\/\/www.smashingmagazine.com\/guidelines-for-mobile-web-development\/\" target=\"_blank\" rel=\"noopener\">Guidelines for Mobile Web Development<\/a><\/li>\n<li><a href=\"http:\/\/www.creativebloq.com\/mobile\/mobile-design-912823\" target=\"_blank\" rel=\"noopener\">Tips for mobile website design<\/a><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Get-in-touch\"><\/span>Get in touch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Don&#8217;t want to get your hands dirty? Our developers have years of experience in developing mobile and web applications. Visit <a href=\"https:\/\/www.inovex.de\/en\/our-services\/mobile\/\" target=\"_blank\" rel=\"noopener\">our website<\/a> for a full portfolio, ask for a quotation at <a href=\"mailto:list-blog@inovex.de\" target=\"_blank\" rel=\"noopener\">list-blog@inovex.de<\/a>\u00a0or call\u00a0<a href=\"tel:+497216190210\" target=\"_blank\" rel=\"noopener\">+49 721 619 021-0<\/a>.<\/p>\n<p>Found this guide useful? Comment and share it using the social buttons below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The fact that more and more users are currently using mobile devices to access the internet increases the importance of usability for those appliances. In 2014 about 27.5% website requests around the whole planet were mobile. Google revealed that this year more search requests were\u00a0made from mobile devices than desktop computers\u00a0for the first time in [&hellip;]<\/p>\n","protected":false},"author":29,"featured_media":12251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[131],"service":[],"coauthors":[{"id":29,"display_name":"Daniel Eckelt","user_nicename":"deckelt"}],"class_list":["post-20993","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-ui-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Usability Guideline for Mobile Web Views - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Web developers have to shift their focus to the mobile user experience \u2013\u00a0 a detailed analysis of the current situation and its consequences for developers.\" \/>\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.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usability Guideline for Mobile Web Views - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Web developers have to shift their focus to the mobile user experience \u2013\u00a0 a detailed analysis of the current situation and its consequences for developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-23T07:34:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1150\" \/>\n\t<meta property=\"og:image:height\" content=\"339\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daniel Eckelt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano-1024x302.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Eckelt\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Daniel Eckelt\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/\"},\"author\":{\"name\":\"Daniel Eckelt\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/91fffe365c2311c98b1818e45b989db5\"},\"headline\":\"Usability Guideline for Mobile Web Views\",\"datePublished\":\"2015-09-23T07:34:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/\"},\"wordCount\":1149,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/DesktopMobile_pano.png\",\"keywords\":[\"UI\\\/UX\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/\",\"name\":\"Usability Guideline for Mobile Web Views - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/DesktopMobile_pano.png\",\"datePublished\":\"2015-09-23T07:34:14+00:00\",\"description\":\"Web developers have to shift their focus to the mobile user experience \u2013\u00a0 a detailed analysis of the current situation and its consequences for developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/DesktopMobile_pano.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/DesktopMobile_pano.png\",\"width\":1150,\"height\":339,\"caption\":\"Responsive Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/usability-guideline-mobile-web-views\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Usability Guideline for Mobile Web Views\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/91fffe365c2311c98b1818e45b989db5\",\"name\":\"Daniel Eckelt\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg3b89ef212a06b595edab827642fa13e4\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg\",\"caption\":\"Daniel Eckelt\"},\"description\":\"Daniel arbeitet leidenschaftlich gerne im Frontend und sieht den Endnutzer stets im Zentrum seiner Arbeit. Dabei verfolgt er das Ziel, Produkte zu schaffen, die nicht nur funktional sind, sondern auch eine positive Erfahrung f\u00fcr den Benutzer bieten. Um diesem Anspruch gerecht zu werden, besch\u00e4ftigt er sich intensiv mit den neuesten Trends und Technologien im Bereich der Webentwicklung. Au\u00dferdem betreut er verschiedene Abschlussarbeiten im Bereich Web.\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/deckelt\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Usability Guideline for Mobile Web Views - inovex GmbH","description":"Web developers have to shift their focus to the mobile user experience \u2013\u00a0 a detailed analysis of the current situation and its consequences for developers.","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.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/","og_locale":"de_DE","og_type":"article","og_title":"Usability Guideline for Mobile Web Views - inovex GmbH","og_description":"Web developers have to shift their focus to the mobile user experience \u2013\u00a0 a detailed analysis of the current situation and its consequences for developers.","og_url":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2015-09-23T07:34:14+00:00","og_image":[{"width":1150,"height":339,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano.png","type":"image\/png"}],"author":"Daniel Eckelt","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano-1024x302.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Daniel Eckelt","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten","Written by":"Daniel Eckelt"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/"},"author":{"name":"Daniel Eckelt","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/91fffe365c2311c98b1818e45b989db5"},"headline":"Usability Guideline for Mobile Web Views","datePublished":"2015-09-23T07:34:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/"},"wordCount":1149,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano.png","keywords":["UI\/UX"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/","url":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/","name":"Usability Guideline for Mobile Web Views - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano.png","datePublished":"2015-09-23T07:34:14+00:00","description":"Web developers have to shift their focus to the mobile user experience \u2013\u00a0 a detailed analysis of the current situation and its consequences for developers.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2015\/09\/DesktopMobile_pano.png","width":1150,"height":339,"caption":"Responsive Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/usability-guideline-mobile-web-views\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Usability Guideline for Mobile Web Views"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/91fffe365c2311c98b1818e45b989db5","name":"Daniel Eckelt","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg3b89ef212a06b595edab827642fa13e4","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg","caption":"Daniel Eckelt"},"description":"Daniel arbeitet leidenschaftlich gerne im Frontend und sieht den Endnutzer stets im Zentrum seiner Arbeit. Dabei verfolgt er das Ziel, Produkte zu schaffen, die nicht nur funktional sind, sondern auch eine positive Erfahrung f\u00fcr den Benutzer bieten. Um diesem Anspruch gerecht zu werden, besch\u00e4ftigt er sich intensiv mit den neuesten Trends und Technologien im Bereich der Webentwicklung. Au\u00dferdem betreut er verschiedene Abschlussarbeiten im Bereich Web.","url":"https:\/\/www.inovex.de\/de\/blog\/author\/deckelt\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/20993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=20993"}],"version-history":[{"count":0,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/20993\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/12251"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=20993"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=20993"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=20993"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=20993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}