{"id":9622,"date":"2011-04-11T21:26:02","date_gmt":"2011-04-11T13:26:02","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=9622"},"modified":"2022-09-18T19:59:59","modified_gmt":"2022-09-18T11:59:59","slug":"mobile-web-design","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/","title":{"rendered":"Mobile Web Design: 10 Tips to Enhance Usability"},"content":{"rendered":"<p>Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile devices that fit in a hand because of technology.<\/p>\n<p>Being short in good usability implementation in mobile web design makes it difficult browsing your way around various popular mobile websites. Designing for mobile devices needs to be simpler than its standard website and more task-based to get the job done because users look for something specific and urgent.<\/p>\n<p>You should take into account on how to use the barest minimum of the available space for your major contents and remain interesting for mobile users. Avoid large images and flash animation as it will slow down your site.<\/p>\n<p>Remember that functionality is more important than style for mobile websites. If your website is not coded and designed properly, it could look better on one phone, worst on another or worse, not displaying at all. Test, validate, and check if it\u2019s compatible with all mobile devices.<\/p>\n<p>To aid you in creating website that is accessible not just on desktop or laptop computers but also mobile devices, here are some of the things to consider on mobile web design with sample images together with the mobile website version\u2019s direct link.<\/p>\n<h2>1. Decide on the screen resolution<\/h2>\n<p>The mobile world contains a rich variation of design considerations from different screen sizes and resolution to a variety of shapes. Aim to strike a balance between sufficient screen width and audience size. Find out the specs of current mobile devices and use your best judgement.<\/p>\n<p>What\u2019s challenging for mobile developers is the way to get one to display appropriately across a range of screen sizes without having to recreate pages for different platforms.<\/p>\n<p>Here is a list of web resolutions popular on mobile devices as of February 2011 presented by <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.uxbooth.com\/articles\/considerations-for-mobile-design-part-2-dimensions\/\">Uxbooth.com<\/a> with their published article, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.uxbooth.com\/articles\/considerations-for-mobile-design-part-2-dimensions\/\"><em>Considerations for Mobile Web Design (Part 2): Dimensions<\/em><\/a>, by David Leggett. The author explains a few points about display dimensions and solutions for layout design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg\" width=\"600\" height=\"567\" alt=\"18-top-10-tips-for-mobile-web-design-usability-resolution\"><\/figure>\n<h2>2. Break up web pages into small portions<\/h2>\n<p>Lengthy sections of text can be hard to read so placing them on several pages limits the scrolling to one direction. Get rid of low priority content. Stick to a single column of text that wraps so there\u2019s no horizontal scrolling.<\/p>\n<p>For the example below, CBS News mobile website version shows only the major news section and breaks the news articles into small portions. While Treehugger presents itself with their recent articles and latest tweets with some of the features of the full website. <strong>Both sites have the user click a text link to view the rest of the article.<\/strong><\/p>\n<h3>CBS News<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/01-top-10-tips-for-mobile-web-design-usability-cbs-news.png\" width=\"320\" height=\"416\" alt=\"01-top-10-tips-for-mobile-web-design-usability-cbs-news\"><\/figure>\n<h3>Treehugger<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/02-top-10-tips-for-mobile-web-design-usability-treehugger.jpg\" width=\"320\" height=\"416\" alt=\"02-top-10-tips-for-mobile-web-design-usability-treehugger\"><\/figure>\n<h2>3. Simplify the design<\/h2>\n<p>Simplicity equates to usability. Let them move around the site with no difficulty. Avoid the inclusion of tables, frames and other formatting. If you use padding, remember to keep it to an absolute minimum far less than you\u2019d use for a normal web page.<\/p>\n<p>Compared to desktop computers, the more you click the links on mobile websites, the more you wait because of loading time. With that, you need to strip down and simplify your website with balance between content and navigation.<\/p>\n<p>For our example, the mobile version website of Best Buy list only the most essential product categories trimming down the level of hierarchy for content. While YouTube mobile home page shows only the four latest spotlight videos.<\/p>\n<h3>Best Buy<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/03-top-10-tips-for-mobile-web-design-usability-best-buy.jpg\" width=\"320\" height=\"416\" alt=\"03-top-10-tips-for-mobile-web-design-usability-best-buy\"><\/figure>\n<h3>YouTube<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/04-top-10-tips-for-mobile-web-design-usability-youtube.jpg\" width=\"320\" height=\"416\" alt=\"04-top-10-tips-for-mobile-web-design-usability-youtube\"><\/figure>\n<h2>4. Option to view the full website<\/h2>\n<p>Provide a link for your mobile visitors to switch back to your full website for the user to find and view the other content and features that\u2019s only accessible to the desktop version of the site.<\/p>\n<p>Your viewers will surely be doing a lot of vertical scrolling, so help them out with \u2018Back To Top\u2019 links so that they can jump to the top of the page.<\/p>\n<p>As an example, Ars Technica have their link button to the standard website placed on the heading. While the Shangri-La have their full website link placed on the footer.<\/p>\n<h3>Ars Technica<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/07-top-10-tips-for-mobile-web-design-usability-ars-technica.jpg\" width=\"318\" height=\"416\" alt=\"07-top-10-tips-for-mobile-web-design-usability-ars-technica\"><\/figure>\n<h3>Shangri-La<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/05-top-10-tips-for-mobile-web-design-usability-shangri-la.jpg\" width=\"320\" height=\"416\" alt=\"05-top-10-tips-for-mobile-web-design-usability-shangri-la\"><\/figure>\n<h2>5. Navigation placement<\/h2>\n<p>Get to know your audience and be aware of what they are looking for. Find out how they will want to navigate your site. Position your navigation menu below the content if your targeted mobile users want to see changing content quickly.<\/p>\n<p>The content and headline needs to be visible first to not get in the way of viewing the page content.<\/p>\n<p>For users who want to navigate on a particular category right away, place the navigation at the top of the page. Below are various samples of navigation placement used in mobile web design.<\/p>\n<h3>D&G<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/08-top-10-tips-for-mobile-web-design-usability-dolce-n-gabbana.png\" width=\"320\" height=\"416\" alt=\"08-top-10-tips-for-mobile-web-design-usability-dolce-n-gabbana\"><\/figure>\n<h3>Politico<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/09-top-10-tips-for-mobile-web-design-usability-politico.jpg\" width=\"320\" height=\"416\" alt=\"09-top-10-tips-for-mobile-web-design-usability-politico\"><\/figure>\n<h3>Daily Horoscope<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/19-top-10-tips-for-mobile-web-design-usability-hastral.jpg\" width=\"320\" height=\"416\" alt=\"19-top-10-tips-for-mobile-web-design-usability-hastral\"><\/figure>\n<h2>6. Use text links<\/h2>\n<p>Your main website may employ whizzy fly-out menus, rollovers or other fancy gadgetry, but a mobile browser will likely not. Be aware that dynamic page elements and graphical links consume resources, so opt for well-labelled text links.<\/p>\n<h3>A List Apart<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/10-top-10-tips-for-mobile-web-design-usability-a-list-apart.jpg\" width=\"320\" height=\"416\" alt=\"10-top-10-tips-for-mobile-web-design-usability-a-list-apart\"><\/figure>\n<h3>Reddit<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/11-top-10-tips-for-mobile-web-design-usability-reddit.jpg\" width=\"320\" height=\"416\" alt=\"11-top-10-tips-for-mobile-web-design-usability-reddit\"><\/figure>\n<h2>7. Make a distinction between the selected link<\/h2>\n<p>Moving the cursor down will scroll the page and highlights the links all at once. So, it\u2019s important to clearly advice the user what item is in focus.<\/p>\n<p>This can be done by changing the font and background colour of links and buttons or by simply adding some padding around links to make the clickable area larger about 44px by 44px. Geek Squad and Diesel made use of large fonts for clickable text.<\/p>\n<h3>Geek Squad<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/12-top-10-tips-for-mobile-web-design-usability-geek-squad.jpg\" width=\"320\" height=\"416\" alt=\"12-top-10-tips-for-mobile-web-design-usability-geek-squad\"><\/figure>\n<h3>Diesel<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/13-top-10-tips-for-mobile-web-design-usability-diesel.png\" width=\"320\" height=\"416\" alt=\"13-top-10-tips-for-mobile-web-design-usability-diesel\"><\/figure>\n<h2>8. Balance links<\/h2>\n<p>Each page download consumes time and system resources, the latter of which are in short supply, so try not to force the site visitor to digg through a multitude of pages in order to access the information sought. Strike a balance between the number of links on each page and the depth of the site.<\/p>\n<h3>Flickr<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/14-top-10-tips-for-mobile-web-design-usability-flickr.jpg\" width=\"320\" height=\"416\" alt=\"14-top-10-tips-for-mobile-web-design-usability-flickr\"><\/figure>\n<h3>Twitter<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/15-top-10-tips-for-mobile-web-design-usability-twitter.png\" width=\"318\" height=\"416\" alt=\"15-top-10-tips-for-mobile-web-design-usability-twitter\"><\/figure>\n<h2>9. Reduce user text entry<\/h2>\n<p>It is hard to input text in mobile versions of web sites. Replace with radio buttons or list instead so they can opt from what they need with ease. Remember that mobiles users don\u2019t have access to conventional keyboard and mouse. The shorter the URL , the better because it\u2019s monotonous to type in long URLs.<\/p>\n<p>For our sample below, Fedex made use of checklist and drop down menus. While Tumblr made you choose your language using the drop down menu.<\/p>\n<h3>Fedex<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/16-top-10-tips-for-mobile-web-design-usability-fedex.jpg\" width=\"320\" height=\"416\" alt=\"16-top-10-tips-for-mobile-web-design-usability-fedex\"><\/figure>\n<h3>Tumblr<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/17-top-10-tips-for-mobile-web-design-usability-tumblr.jpg\" width=\"320\" height=\"416\" alt=\"17-top-10-tips-for-mobile-web-design-usability-tumblr\"><\/figure>\n<h2>10. No pops or refreshes<\/h2>\n<p>Mobile browsers do not normally support pop-ups. And if they did, they\u2019d have very narrow space to pop into. Stay away from using them to avoid unpredictable results. Also, don\u2019t have pages refreshing periodically to avoid filling the device limited memory. Let the user refresh the content.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/20-top-10-tips-for-mobile-web-design-usability-popup.jpg\" width=\"500\" height=\"258\" alt=\"17-top-10-tips-for-mobile-web-design-usability-popup\"><\/figure>\n<h2>In A Nutshell<\/h2>\n<p>Get creative and apply your mobile web design in a new way. Make your content compelling enough and usable. Give your users what they want, when they want it. Users don\u2019t want to dig deeper to the site just to find what they are looking for in the mobile web.<\/p>\n<p>Do you have any preferred mobile sites that really inspired you? Can you share some of your mobile web design tips? Let us know!<\/p>\n<h2>Further Reading<\/h2>\n<ol>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/alistapart.com\/articles\/responsive-web-design\/\">Responsive Web Design<\/a> <em>(alistapart.com)<\/em><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/validator.w3.org\/mobile\/\">W3C mobileOK Checker<\/a> <em>(w3.org)<\/em><\/li>\n<\/ol>","protected":false},"excerpt":{"rendered":"<p>Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile devices that fit in a hand because of technology. Being short in good usability implementation in mobile web design makes it difficult browsing your way around various popular mobile&hellip;<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4641],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mobile Web Design: 10 Tips to Enhance Usability - Hongkiat<\/title>\n<meta name=\"description\" content=\"Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile\" \/>\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.hongkiat.com\/blog\/mobile-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile Web Design: 10 Tips to Enhance Usability\" \/>\n<meta property=\"og:description\" content=\"Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-04-11T13:26:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-18T11:59:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg\" \/>\n<meta name=\"author\" content=\"Aurora Gatbonton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aurora Gatbonton\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/\"},\"author\":{\"name\":\"Aurora Gatbonton\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/93a655345bb63d6d11a85583617011f5\"},\"headline\":\"Mobile Web Design: 10 Tips to Enhance Usability\",\"datePublished\":\"2011-04-11T13:26:02+00:00\",\"dateModified\":\"2022-09-18T11:59:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/\"},\"wordCount\":1213,\"commentCount\":47,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-web-design\\\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg\",\"keywords\":[\"Usability Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/\",\"name\":\"Mobile Web Design: 10 Tips to Enhance Usability - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-web-design\\\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg\",\"datePublished\":\"2011-04-11T13:26:02+00:00\",\"dateModified\":\"2022-09-18T11:59:59+00:00\",\"description\":\"Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-web-design\\\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-web-design\\\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-web-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile Web Design: 10 Tips to Enhance Usability\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/93a655345bb63d6d11a85583617011f5\",\"name\":\"Aurora Gatbonton\",\"description\":\"Au a.k.a. AwGatsby is a photographer and portrait artist who works full time creating web content for the Web.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/aurora\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mobile Web Design: 10 Tips to Enhance Usability - Hongkiat","description":"Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile","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.hongkiat.com\/blog\/mobile-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Mobile Web Design: 10 Tips to Enhance Usability","og_description":"Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile","og_url":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-04-11T13:26:02+00:00","article_modified_time":"2022-09-18T11:59:59+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg","type":"","width":"","height":""}],"author":"Aurora Gatbonton","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Aurora Gatbonton","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/"},"author":{"name":"Aurora Gatbonton","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/93a655345bb63d6d11a85583617011f5"},"headline":"Mobile Web Design: 10 Tips to Enhance Usability","datePublished":"2011-04-11T13:26:02+00:00","dateModified":"2022-09-18T11:59:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/"},"wordCount":1213,"commentCount":47,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg","keywords":["Usability Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/","url":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/","name":"Mobile Web Design: 10 Tips to Enhance Usability - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg","datePublished":"2011-04-11T13:26:02+00:00","dateModified":"2022-09-18T11:59:59+00:00","description":"Mobile web browsing is expected to turn into the next major Internet platform. It is now easy to browse the net from nearly anywhere utilizing mobile","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/mobile-web-design\/18-top-10-tips-for-mobile-web-design-usability-resolution.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile Web Design: 10 Tips to Enhance Usability"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/93a655345bb63d6d11a85583617011f5","name":"Aurora Gatbonton","description":"Au a.k.a. AwGatsby is a photographer and portrait artist who works full time creating web content for the Web.","url":"https:\/\/www.hongkiat.com\/blog\/author\/aurora\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2vc","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=9622"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9622\/revisions"}],"predecessor-version":[{"id":62276,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9622\/revisions\/62276"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=9622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=9622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=9622"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=9622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}