{"id":832,"date":"2010-01-16T21:18:19","date_gmt":"2010-01-16T11:18:19","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=832"},"modified":"2010-04-26T15:07:23","modified_gmt":"2010-04-26T05:07:23","slug":"tips-on-building-websites-for-mobile-browsers","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/","title":{"rendered":"Tips on building websites for mobile browsers"},"content":{"rendered":"

2010 is predicted to be the year of mobile<\/a> and mobile web browsing is expected to increase this year. To help you build a website that is accessible not just to normal web users on desktop or laptop computers but also to mobile users, let's have a look at some of the tips on building websites for mobile browsers. Here, we will be looking at using HTML instead of WML. <\/p>\n

1. Making the header area stretchable<\/strong>
\nOne of the most common ways to make the header stretchable is to use a background image inside a container that is set to 100% instead of a specific pixel and have the background on repeat. However, please note that it will not work for ALL mobile browsers because some of the very low-end mobile browsers doesn't support css background-image property. (But you can ignore those very low-end mobile browsers for this requirement as long as the rest of the content on the site is readable)<\/p>\n

2. Styling <select> elements and other input elements<\/strong>
\nSome of the common CSS styles that are often used for <select> elements are background, font-family, font-size and color. However, many mobile browsers handle <select> elements differently, some displays the list in a new page, some displays it like a web browser does, some displays it like an iPhone does. Therefore, it is best not to go too crazy with styling of <select> elements (or any other input element for that matter). Many people try to modify the look and feel of <input> elements using jQuery, however, jQuery requires Javascript and it will not work on most mobile devices, apart from an iPhone.<\/p>\n

3. Using the same markup for web and mobile<\/strong>
\nThe first thing you will need to look at if you'd like to use the same markup for both web and mobile is to reduce the size of the page to a recommended page size for a mobile browser. Mobile browsers have a memory limitation and therefore, they have restrictions on the largest page they can accommodate. To give you an example of acceptable page sizes, mobile version of Facebook homepage is 10K and Facebook friends page is between 15 - 20K. (The size of a page also includes the size of all the requests that a page makes, such as, css and images.)<\/p>\n

4. Best practices on writing HTML markup for mobile browsers<\/strong>
\nHave a look at this document by the World Wide Web Consortium (W3C)<\/a> which covers best practices on delivering web content to mobile devices.<\/p>\n

5. Catering for all mobile devices<\/strong>
\nCatering for most (if not all) mobile devices should not be an issue if you follow the best practices. After all, the aim of delivering web content to mobile devices is to make the content accessible to all but not necessarily to provide a rich UI for each device. <\/p>\n

Before jumping into designing a mobile version of your website, have a look at a few websites that are optimisied for mobile devices for an inspiration. There are over 100+ mobile website templates<\/a> by template monster and you can view the live demo of each template to get a feel for how a mobile site works.<\/p>\n

Interested in getting a mobile friendly website<\/a> for your company or organisation? Contact us<\/a> at Anansi Web Development<\/a> to find out how we may be able to help you.<\/div>\n","protected":false},"excerpt":{"rendered":"

2010 is predicted to be the year of mobile and mobile web browsing is expected<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-832","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"yoast_head":"\nTips on building websites for mobile browsers | Tech Leadership Advice & Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips on building websites for mobile browsers | Tech Leadership Advice & Resources\" \/>\n<meta property=\"og:description\" content=\"2010 is predicted to be the year of mobile and mobile web browsing is expected\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice & Resources\" \/>\n<meta property=\"article:published_time\" content=\"2010-01-16T11:18:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-04-26T05:07:23+00:00\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"Tips on building websites for mobile browsers\",\"datePublished\":\"2010-01-16T11:18:19+00:00\",\"dateModified\":\"2010-04-26T05:07:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/\"},\"wordCount\":572,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/\",\"name\":\"Tips on building websites for mobile browsers | Tech Leadership Advice & Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"datePublished\":\"2010-01-16T11:18:19+00:00\",\"dateModified\":\"2010-04-26T05:07:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips on building websites for mobile browsers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tips on building websites for mobile browsers | Tech Leadership Advice & Resources","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:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/","og_locale":"en_US","og_type":"article","og_title":"Tips on building websites for mobile browsers | Tech Leadership Advice & Resources","og_description":"2010 is predicted to be the year of mobile and mobile web browsing is expected","og_url":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/","og_site_name":"Tech Leadership Advice & Resources","article_published_time":"2010-01-16T11:18:19+00:00","article_modified_time":"2010-04-26T05:07:23+00:00","author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"Tips on building websites for mobile browsers","datePublished":"2010-01-16T11:18:19+00:00","dateModified":"2010-04-26T05:07:23+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/"},"wordCount":572,"commentCount":2,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/","url":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/","name":"Tips on building websites for mobile browsers | Tech Leadership Advice & Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"datePublished":"2010-01-16T11:18:19+00:00","dateModified":"2010-04-26T05:07:23+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/01\/16\/tips-on-building-websites-for-mobile-browsers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"Tips on building websites for mobile browsers"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":11,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"predecessor-version":[{"id":1426,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/832\/revisions\/1426"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}