{"id":4348,"date":"2012-07-24T07:54:08","date_gmt":"2012-07-24T12:54:08","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/blog\/?p=4348"},"modified":"2022-11-22T11:25:36","modified_gmt":"2022-11-22T17:25:36","slug":"what-do-your-web-apps-look-like-on-a-smartphone","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2012\/07\/what-do-your-web-apps-look-like-on-a-smartphone\/","title":{"rendered":"What do your web apps look like on a smartphone?"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\" alt=\"Education\" title=\"Education\" width=\"76\" height=\"100\" class=\"alignleft size-full wp-image-725\" \/>With smartphone adoption rates setting records, it\u2019s time that you asked yourself one question: What do our web apps or web sites look like on a smartphone?  After all, the probability that your users will access your apps\/site on a mobile device is growing daily. <\/p>\n<p>Now, the best way to address the growing mobile trend: Create intelligent web apps that automatically adapt to each device.  But, while that may be the best option, what if your company doesn\u2019t want (or isn\u2019t ready) to create mobile apps yet?  Can you just ignore mobile users?  Of course not.  At the very least, you must ensure that your web apps aren\u2019t completely unusable on a smartphone.<\/p>\n<p>Why is that important?  Because some common web design elements don\u2019t translate over to mobile, and will negatively impact usability for smartphone users.  What are they?  While I\u2019m sure there are more, here are 4 common web design elements that will cause problems for smartphone users:<a name=\"20120723\"><\/a><!--more--><\/p>\n<h3>Hover Boxes<\/h3>\n<p>Hover boxes are great for mouse-based interfaces, letting users hover over certain page elements to quickly view more information.  Unfortunately, there\u2019s no way to replicate a \u201chover\u201d in a touch-based interface.  Instead, mobile browsers treat hover elements just like hyperlinks.  For instance, while users must hover the cursor over a specific element to view the hover box on a PC browser, they must click that element to see the hover box in a mobile browser.  This can lead to issues, particularly when the hover element is also a hyperlink.<\/p>\n<h3>Flash<\/h3>\n<p>This should go without saying, but I still run across sites built mostly (if not entirely) on Flash.  As you may know, Flash does not work on some popular mobile devices, like iPads and iPhones.  If your web apps rely heavily on Flash, assume that they are unusable on many mobile devices.<\/p>\n<h3>Small Links<\/h3>\n<p>A computer mouse is precise.  A finger is not.  If your web apps are not formatted for use on mobile devices, consider how hyperlink size affects usability on a smartphone browser.  As any smartphone owner will tell you, trying to press a small hyperlink is frustrating, and often results in clicking the wrong link.<\/p>\n<h3>Pop-ups<\/h3>\n<p>If your site displays pop-up boxes when users first visit a page, you\u2019re most likely alienating your mobile users.  Why?  Pop-up boxes are a mobile user\u2019s worst enemy.  Most often, they cover the whole mobile screen, rendering the site useless and making the \u201cclose\u201d button difficult to find.  Usually, this leads to an early exit.<\/p>\n<h3>Conclusion<\/h3>\n<p>The best way to address the growing rise in mobile users is with mobile-specific interfaces.  However, if your company can\u2019t (or doesn\u2019t want to) go that route right now, you must at least consider how your apps and site look on smartphones, or risk alienating mobile users.  After all, you can\u2019t control which device your visitors use.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>With smartphone adoption rates setting records, it\u2019s time that you asked yourself one question: What do our web apps or web sites look like on a smartphone? After all, the probability that your users will access your apps\/site on a mobile device is growing daily. Now, the best way to address the growing mobile trend: &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.mrc-productivity.com\/blog\/2012\/07\/what-do-your-web-apps-look-like-on-a-smartphone\/\"> <span class=\"screen-reader-text\">What do your web apps look like on a smartphone?<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","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":"","slim_seo":{"title":"What do your web apps look like on a smartphone? - mrc&#039;s Cup of Joe Blog","description":"With smartphone adoption rates setting records, it\u2019s time that you asked yourself one question: What do our web apps or web sites look like on a smartphone? Aft"},"footnotes":""},"categories":[8],"tags":[34,35],"class_list":["post-4348","post","type-post","status-publish","format-standard","hentry","category-education","tag-mobile","tag-mobile-apps"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/4348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/comments?post=4348"}],"version-history":[{"count":12,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/4348\/revisions"}],"predecessor-version":[{"id":14022,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/4348\/revisions\/14022"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=4348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=4348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=4348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}