{"id":10687,"date":"2011-11-02T21:02:44","date_gmt":"2011-11-02T13:02:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10687"},"modified":"2025-04-04T00:43:29","modified_gmt":"2025-04-03T16:43:29","slug":"designing-for-mobile-devices","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/","title":{"rendered":"A look into: Designing for Mobile Devices"},"content":{"rendered":"

The first iPhone<\/strong> revolutionized the tech world when it was released. Now, almost five years<\/strong> later, the smartphone market has soared in popularity, even attracting competition from Microsoft with its Windows 7 OS and partners<\/strong>. With a surge of Internet users now on smartphones, it\u2019s only logical to anticipate a steep increase in mobile websites<\/strong>.<\/p>\n

However, designing for the mobile web is an entirely different beast than traditional web design. Our websites are crafted for large screens, yet the smartphone\u2019s screen size is significantly smaller, often leading to frustrating usability issues. New design standards and practices<\/strong> are desperately needed for superior mobile site design that ensures a smooth user experience.<\/p>\n

In this guide, we will focus on designing a user-friendly site specifically for smartphone mobile browsers. I\u2019ll be discussing best practices<\/strong> and showcasing useful developer tools<\/strong> to help you design an exceptional mobile website. Let\u2019s dive in after the jump!<\/p>\n

Planning a Robust User Experience<\/strong><\/h2>\n

When constructing a mobile website, it\u2019s paramount to always keep your users in mind<\/strong>, as ultimately, your website is being crafted for their enjoyment. Users often expect a mobile website to operate similarly to the desktop version, so making the user experience seamless should be your prime objective while building a successful mobile site.<\/p>\n

\"dribble\"<\/figure>\n

There are several usability aspects to bear in mind for your users. These considerations encompass screen size, inline images, hyperlinks, font sizes, and page navigation<\/strong>. We have compiled an extensive guide on mobile usability design to help tailor your website for optimal usability. Besides this guide, you should stay vigilant for fresh ideas to enhance your site.<\/p>\n

Planning a robust user experience also entails understanding how a user will interact with your website. On a desktop, your website can be navigated using a mouse and a keyboard, but on a smartphone, users will be tapping, flicking, and swiping<\/strong> their way around your site. You\u2019ll likely need to design the site in a way that allows users to access information effortlessly through these physical movements.<\/p>\n

Keep Pages Short & Sweet<\/h2>\n

The meat and potatoes<\/strong> of any website is the page content<\/strong>. Each of your web pages holds significant amounts of useful information for your users, such as text, photos, or videos. You may also find news articles and blog posts that run on for a few pages. While this can help to break up the text, it\u2019s not recommended for mobile devices as this technique requires more page loading, resulting in more waiting time for the user.<\/p>\n

\"pepato<\/figure>\n

Unless it\u2019s absolutely necessary, I recommend keeping your page content short<\/strong>. You should also consider enhancing its appeal by styling the font to a larger size and perhaps moving images aside. With your content prominently displayed, it naturally attracts attention. Moreover, this optimization makes scanning the pages much simpler. This is also why a single-column layout<\/strong> fits the bill perfectly.<\/p>\n

In most cases, mobile browsers won\u2019t load web pages as quickly as desktop browsers, which could frustrate your readers. That\u2019s why you need to optimize the content and website for high-speed content loading<\/strong>. You can either condense the article while retaining the essential content, or simply remove unnecessary images. Your focus should be on simplicity rather than aesthetics.<\/p>\n

\"fxnine\"<\/figure>\n

Your core navigation<\/strong> is the lifeline for your visitors looking to move between pages. On a mobile device, screen links naturally appear much smaller, making them more challenging to tap. A crucial adjustment to resolve this issue is to maximize the font and space for your navigation links, perhaps occupying the entire block area. Alternatively, you can design the navigation bar to resemble a real iPhone application\u2019s tab bar, like the one showcased above.<\/p>\n

Building Mobile CSS Styles<\/h2>\n

Now that we understand how to optimize a mobile website for enhanced readability and usability, it\u2019s important to discuss CSS styles. A CSS stylesheet contains numerous selectors with properties related to fonts, sizes, positioning, and display settings. For mobile, attention should be given to how your blocks arrange themselves.<\/p>\n

\"fluid<\/figure>\n

A great starting point is to reset your site\u2019s wrapper widths into percentages<\/strong>. Although pixels are commonly used for positioning, line height, font size, and div width, in a mobile context, it\u2019s crucial for your pages to be fluid and transition naturally between devices. By setting container divs to 100% width, the content can easily fill between portrait and landscape modes without overflowing.<\/p>\n

For those aiming to restructure their entire layout, it\u2019s vital to apply a reset<\/strong>. Paragraphs, headings, and navigation links should all be set to display: block, providing a linear, print-style aesthetic. Adjust the margins and padding to remove excess from your layout. If possible, avoid tables, as they tend to render inconsistently across devices.<\/p>\n

Large images<\/strong> can also create issues between devices. Many of your website images may render larger than 480px, which could cause them to exceed their container limits. One solution is to set their width at 100%<\/strong> allowing images to resize naturally. Although it\u2019s possible to create different sets of images for your website and render them differently based on the browser agent, this can add substantial work. Therefore, use this technique only when absolutely necessary.<\/p>\n

Designing Websites for iPhone<\/h2>\n

The mobile market share<\/strong> is sizable and diverse, but Apple holds a substantial portion with their iDevices. Both the iPhone and iPad are Internet-ready devices with built-in touchscreen functionality<\/strong>. They come equipped with the same default web browser, Safari, amongst a plethora of other options.<\/p>\n

\"photoshop<\/figure>\n

When designing for iPhone-specific websites, it\u2019s crucial to consider the screen size<\/strong>. Older iPhone models have a fixed screen size set to 320px by 480px, while iPhone 4 and iPhone 4S are 640px by 960px.<\/p>\n

Due to the limited space on iPhone screens, your layout should contain a single block of content<\/strong> that can span vertically as needed. Maintaining elements in a single column will not only save you headaches but also allow for a fluid layout to comfortably fit both portrait and landscape modes. To achieve this, you\u2019ll likely need to develop another template and devise a method to detect if your visitors are using an iPhone<\/strong>. The small PHP snippet provided below should work well:<\/p>\n

<?php\r\n $b = strpos($_SERVER['HTTP_USER_AGENT'],\"iPhone\");\r\n if ($b){ \/\/ user is on an iPhone }\r\n ?>\r\n <\/pre>\n
Basically the logic pulls our global $_SERVER<\/code> variable for the HTTP agent and checks if the word \u201ciphone<\/em>\u201d appears anywhere. If yes, then we know our visitor is using an iPhone, and from there, we can put up slightly different HTML or even a whole new template layout! This could also be used to include an iPhone-specific stylesheet<\/strong>, change your page titles, remove images, or nearly any dynamic effects.<\/p>\n
When it comes to serving new styles there is an easier way. As mentioned earlier, the maximum screen size for iPhone is 960px wide. Therefore with new CSS3 media queries<\/a> you can add styles directly into your site\u2019s main stylesheet that will only<\/strong> display on iPhone. Below is a small example code:<\/p>\n
@media screen and (max-device-width: 960px){\r\n \/bin \/boot \/dev \/etc \/home \/initrd.img \/initrd.img.old \/lib \/lib64 \/lost+found \/media \/mnt \/opt \/proc \/root \/run \/sbin \/snap \/srv \/sys \/tmp \/usr \/var \/vmlinuz \/vmlinuz.old iPhone css *\/\r\n }\r\n <\/pre>\n
This works because CSS can now detect browsing agents and their properties<\/strong>. Max screen width is one of the properties which can also be detected.<\/p>\n
All-in-all mobile website for iPhone devices isn\u2019t too difficult to design for, there are just too many examples to refer, I.e., CSS iPhone<\/a>. Keep yourself busy studying<\/strong> and don\u2019t be afraid to experiment with new techniques in UI design<\/strong>.<\/p>\n
Mobile jQuery Scripting<\/h2>\n
The jQuery library<\/strong> is a tool that many front-end web developers are familiar with. It offers fantastic shorthand for coding effects, animations, dropdown menus, and a variety of other in-browser functionalities. The library has become even more impressive with the announcement of jQuery Mobile<\/a><\/strong>. It\u2019s crucial not to dive into this tech blindly, filling your website with effects, but for testing purposes, its advanced functionality can be highly beneficial.<\/p>\n
\"jquery<\/figure>\n
jQuery Mobile<\/strong> distinguishes itself from regular jQuery by providing a complete environment for development. The files you\u2019ll work with include not only JavaScript but also CSS styles for buttons, links, and transition effects. While you\u2019re still creating web pages in HTML code, the jQuery Mobile team has provided numerous optional UI design features. There\u2019s a great deal you can achieve with this framework, but since it\u2019s still in its beta stage, it\u2019s advisable to stick to simpler effects for now.<\/p>\n
The DevGrow blog<\/a> offers a helpful tutorial with a range of excellent examples. The official site also provides demos<\/a> for you to explore. It\u2019s important to note that we\u2019re using the HTML attribute, data-transition<\/code>, to add animation effects with any of the pre-defined values, such as slide, pop, flip, fade, and more.<\/p>\n
The effects and transitions are impressively neat, and the ability to construct an entire mobile interface using solely jQuery represents a significant leap forward for this platform. However, with the platform still in beta, it\u2019s not advisable to build your entire mobile site with their library, especially considering it\u2019s not yet supported by all major smartphones, notably Windows Phone 7. That said, support is likely to improve over time.<\/p>\n
Ultimately, I recommend familiarizing yourself with this new mobile framework before deploying it live on any project.<\/p>\n
Helpful Developer Tools<\/h2>\n
Mobile developers aren\u2019t just looking into coding and design resources. There is also a high demand for software tools and IDEs, not to mention powerful mobile frameworks. Web development is a difficult task that requires quite a bit of dedication, but utilizing additional tools will make your job a whole lot easier.<\/p>\n
Opera Mobile Emulator<\/a><\/h3>\n
Looking for a way to check how your mobile website is rendering? This can be a huge pain if you don\u2019t have a smartphone with Internet access. Or you just don\u2019t wish to use your smartphone to test the site every single time an update is pushed onto your server. Well, Opera Mobile Emulator<\/a> is a fantastic piece of software to test your mobile website.<\/p>\n
\"opera<\/figure>\n
The emulator does support around 20 mobile profiles<\/strong> such as Samsung Galaxy S, HTC Desire, and even tablets like Motorola Xoom. It\u2019s also possible to set the custom resolution<\/strong> and pixel density<\/strong> for intensive testing purposes. Best of all, you don\u2019t need to do too much configuration work, just make few clicks, and you\u2019re good to go.<\/p>\n
The download is completely free and the software does run in both Mac OS X and Windows environments. Their developers are hard at work creating proper web standards and tweaking their mobile rendering engine. I recommend their other dev tools<\/a> if you\u2019re looking for extra tools to help you along the way.<\/p>\n
PhoneGap<\/a><\/h3>\n
There haven\u2019t been many APIs developed over HTML5 to build solid mobile applications. Notably, the mobile landscape has been lacking these types of websites, which is exactly why PhoneGap fills the niche so well. Their platform lets you easily construct HTML5-based apps as native applications on 6 different platforms<\/strong>.<\/p>\n
\"PhoneGap\"<\/figure>\n
The process works by first compressing your code and passing it through PhoneGap\u2019s application framework. From there your apps can reach a large portion of the mobile marketplace, including Android, iOS, Windows Phone 7, and BlackBerry.<\/p>\n
If you\u2019re a bit confused don\u2019t fret too much. Their support pages<\/a> neatly outline the process and offer links to helpful resources. The apps which have already been developed have been compiled in a beautiful library-style portfolio. Check out their full apps collection<\/a> which you can then sort by devices with screenshots.<\/p>\n
Aptana Studio<\/a><\/h3>\n
The Aptana website is the premier location for learning about their development tools. The latest suite release, Aptana 3.0.3, features a fully integrated IDE for web development, CSS styles, and HTML tag nesting, and the best part: Aptana is completely free<\/strong> to download! They offer packages for all 3 major Operating Systems (including Linux), which is a huge convenience for developers.<\/p>\n
\"aptana<\/figure>\n
What makes Aptana special is how quickly you can develop a small web application and test out your design. The studio suite allows you to quickly develop and test a web application running over Ruby on Rails, PHP, Python, or simply HTML\/CSS<\/strong>, and their code highlighting features have recently been improved to include new HTML5 and CSS3 tag libraries<\/strong>. It also comes with Git integration, a built-in terminal, a code debugger, and a handful of other nifty features.<\/p>\n
Mobile GUI Kits and Icons<\/h2>\n
What would be the web without freebies lying around? For web designers, the importance of user interface ranks above everything else. Simple GUIs are tough to come by, and only the most creative designers have come up with working solutions.<\/p>\n
However, there are many free yet quality resources available for you web designer to test out. These GUI kits are mostly designed for Adobe Photoshop or Fireworks, where you can move around elements and export them as flat image files.<\/p>\n
Icons are a very handy resource to have. Designers are creating free sets and offering them online more frequently than ever before. One such website Glyphish<\/a> has a showcase of both free and pro icons. These designs are based on a single theme to be used on mobile templates and app designs.<\/p>\n
Our collection of mobile devices prototyping templates<\/a> will be a great help for you along the journey of website and application development. You shouldn\u2019t start coding until you have a strong graphical interface, and these web kits will get you started on the right path.<\/p>\n
iOS GUI Kit<\/a><\/strong><\/p>\n
\"ios<\/figure>\n
iPhone App Icon Kit<\/a><\/strong><\/p>\n
\"iphone<\/figure>\n
Wireframe Magnets (DIY Kit)<\/a><\/strong><\/p>\n
\"wireframe<\/figure>\n
Android Interface GUI<\/a><\/strong><\/p>\n
\"android<\/figure>","protected":false},"excerpt":{"rendered":"
The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even attracting competition from Microsoft with its Windows 7 OS and partners. With a surge of Internet users now on smartphones, it\u2019s only logical to anticipate a steep increase in mobile websites.…<\/p>\n","protected":false},"author":18,"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":[115,107,1815,4646],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nA look into: Designing for Mobile Devices - Hongkiat<\/title>\n<meta name=\"description\" content=\"The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even\" \/>\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\/designing-for-mobile-devices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A look into: Designing for Mobile Devices\" \/>\n<meta property=\"og:description\" content=\"The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/\" \/>\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-11-02T13:02:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:43:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/designing-for-mobile-devices\/dribble.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\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=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"A look into: Designing for Mobile Devices\",\"datePublished\":\"2011-11-02T13:02:44+00:00\",\"dateModified\":\"2025-04-03T16:43:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/\"},\"wordCount\":2198,\"commentCount\":45,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designing-for-mobile-devices\\\/dribble.jpg\",\"keywords\":[\"Android\",\"Apple iPhone\",\"Mobile Devices\",\"Mobile Website Design & Dev\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/\",\"name\":\"A look into: Designing for Mobile Devices - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designing-for-mobile-devices\\\/dribble.jpg\",\"datePublished\":\"2011-11-02T13:02:44+00:00\",\"dateModified\":\"2025-04-03T16:43:29+00:00\",\"description\":\"The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designing-for-mobile-devices\\\/dribble.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/designing-for-mobile-devices\\\/dribble.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/designing-for-mobile-devices\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A look into: Designing for Mobile Devices\"}]},{\"@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\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A look into: Designing for Mobile Devices - Hongkiat","description":"The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even","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\/designing-for-mobile-devices\/","og_locale":"en_US","og_type":"article","og_title":"A look into: Designing for Mobile Devices","og_description":"The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even","og_url":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-11-02T13:02:44+00:00","article_modified_time":"2025-04-03T16:43:29+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/designing-for-mobile-devices\/dribble.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"A look into: Designing for Mobile Devices","datePublished":"2011-11-02T13:02:44+00:00","dateModified":"2025-04-03T16:43:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/"},"wordCount":2198,"commentCount":45,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designing-for-mobile-devices\/dribble.jpg","keywords":["Android","Apple iPhone","Mobile Devices","Mobile Website Design & Dev"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/","url":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/","name":"A look into: Designing for Mobile Devices - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/designing-for-mobile-devices\/dribble.jpg","datePublished":"2011-11-02T13:02:44+00:00","dateModified":"2025-04-03T16:43:29+00:00","description":"The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/designing-for-mobile-devices\/dribble.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/designing-for-mobile-devices\/dribble.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A look into: Designing for Mobile Devices"}]},{"@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\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2Mn","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10687","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=10687"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10687\/revisions"}],"predecessor-version":[{"id":73505,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10687\/revisions\/73505"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=10687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=10687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=10687"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=10687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}