{"id":17128,"date":"2013-05-09T23:01:10","date_gmt":"2013-05-09T15:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17128"},"modified":"2022-10-16T18:59:57","modified_gmt":"2022-10-16T10:59:57","slug":"webapp-design-resources","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/","title":{"rendered":"40+ Resources and Freebies For Mobile Web App Design"},"content":{"rendered":"<p>The <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/smartphones-past-future-infographic\/\" rel=\"noopener noreferrer\">advancements of<\/a> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/evolution-of-mobile-phones\/\" rel=\"noopener noreferrer\">smartphones<\/a> have improved the quality of mobile web development. It is now possible to generate entire web apps using only <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\" rel=\"noopener noreferrer\">HTML5 and CSS3<\/a>. Coupled with many JavaScript libraries, the possibilities for mobile development are endless.<\/p>\n<p>In this post, I have put together just over <strong>70 resources for developing mobile websites and web applications.<\/strong><\/p>\n<p>This collection is more focused on HTML5 \/ CSS3 \/ JS web apps as opposed to frameworks or native applications. The purpose is to give your <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/design-mobile-app-sites\/\" rel=\"noopener noreferrer\">mobile webapp<\/a> a similar look & feel commonplace with native interfaces.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/\" class=\"ref-block__link\" title=\"Read More: Designing for Mobile Devices\" rel=\"bookmark\"><span class=\"screen-reader-text\">Designing for Mobile Devices<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designing-for-mobile-devices.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-10687 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/designing-for-mobile-devices.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Designing for Mobile Devices<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>PSDs & UI Graphics<\/h2>\n<p>Free PSDs are generally the most helpful assets to web developers. If you are not savvy in Photoshop, then it can be stressful attempting to design a beautiful interface.<\/p>\n<p>Likewise this set of graphics will include plenty of buttons, forms, textures, toolbars, and other helpful GUI kits.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/materialdesignkit.com\/android-gui\/\">Android Interface GUI<\/a><\/h3>\n<p>Similar to the first GUI kit we can also find mobile elements related to Android-based native applications.<\/p>\n<p>Depending on how you want to style your mobile webapp these two graphics packs may provide everything you will need. Sticking with basic styles will make your designs appear more blended into the device.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/02-android-graphics-gui-psd-freebie.jpg\" alt=\"Android graphics gui design kits freebie\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/freeuikits.com\/free-psd-passbook-ui-psd-from-ios6\/\">Passbook iOS6 App UI PSD<\/a><\/h3>\n<p>As for more advanced UI kits we have this awesome iPhone app design PSD. This is for a mobile app Passbook which includes a series of screenshots from different pages.<\/p>\n<p>The whole design is layered and free to download.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/03-ios-app-user-interface-psd.jpg\" alt=\"ios iphone app freebie psd download interface\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.pixeden.com\/mobile-apps\/tooltip-ios-app-ui-psd\">Tooltip iOS App UI<\/a><\/h3>\n<p>Menu tooltips are not as common but this doesn\u2019t mean they serve no purpose in an HTML5 webapp. The icons and button styles may be repeated either through images or CSS3 codes. This will give you a leg-up on the competition with a rich interface style.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/04-tooltips-mobile-psd-freebie-interface.jpg\" alt=\"tooltip freebie psd interface mobile graphics\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medialoot.com\/item\/fresh-iphone-ui-kit\/\">Fresh iPhone UI Kit<\/a><\/h3>\n<p>The designers over at <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medialoot.com\/\">MediaLoot<\/a> publish both free and premium content. However a lot of their free content is still of exceptional quality. This UI kit is labeled Fresh iPhone and displays a helpful iOS app design.<\/p>\n<p>You can work with the PSD graphics to duplicate similar title bars and gradients\/textures in your own webapp.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/05-fresh-iphone-psd-webkit-graphics.jpg\" alt=\"Fresh iPhone ui kit freebie download psd\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/595296-Raindrop-iOS-Toggle-PSD\">Raindrop iOS Toggle<\/a><\/h3>\n<p>Toggle switches are actually native to iOS devices but not found anywhere in HTML5\/CSS3. Using this PSD graphic you may attempt to build a similarly styled toggle switch with a more pleasing color scheme.<\/p>\n<p>The backgrounds are much deeper than the normal interface elements plus the text is also larger and easier to read.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/09-toggle-switches-psd-freebie-raindrops.jpg\" alt=\"randrop ios slider on off switch\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/365psd.com\/day\/3-170\/\">Cloudy UI Kit<\/a><\/h3>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/365psd.com\/\">365psd<\/a> is an amazing website which is still publishing new freebies continually every day. Going back in time a bit I want to reference the Cloudy UI Kit which is full of amazing graphical elements.<\/p>\n<p>We can find buttons, search bars, sliders, on\/off switches, dropdown menus, and tons of other cool stuff.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/10-cloudy-ui-interface-kit-psd.jpg\" alt=\"cloudy user interface kit psd freebie\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/365psd.com\/day\/3-236\/\">Map Pointers<\/a><\/h3>\n<p>So many native Android and iOS applications will focus on geolocation. HTML5 web applications have also been created around APIs such as <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/maps\/\">Google Maps<\/a>. And these mini map pin icons are the perfect companion for any style of mobile webapp.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/11-map-pointers-psd-freebie-icons-mobile.jpg\" alt=\"mobile map pointers pins graphics geolocation\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.deviantart.com\/elischiff\/art\/Mobile-Downloads-Freebie-328041571\">Mobile Downloads UI Freebie<\/a><\/h3>\n<p>DeviantArt is a great community full of very talented artists. This particular freebie download includes a mobile app screen featuring loader bars.<\/p>\n<p>When making an advanced webapp you may need to handle avatar uploads or similar content posted by users. This window UI should provide an excellent starting point.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/14-mobile-downloads-ui-interface-freebie-psd.jpg\" alt=\"freebie mobile downloads uploads loading interface\"><\/figure>\n<h2>Mobile Templates<\/h2>\n<p>The process of sketching out your mobile webapp can be difficult. It is often more tempting to jump right into coding and detail the layout afterwards. But taking the time out for planning your results can be a huge help.<\/p>\n<p>This small collection of mobile stencils and wireframes should help you out with this task. I have included wireframing templates for both Android and iOS devices.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/appicontemplate.com\/\">iOS App Icon Template<\/a><\/h3>\n<p>Almost every iOS designer\/developer must know about Michael Flarup\u2019s iOS Icon template over at <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.pixelresort.com\/\">Pixel Resort<\/a>. Recently he purchased a top-level domain for <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/appicontemplate.com\/\">AppIconTemplate.com<\/a> where you can download this free PSD.<\/p>\n<p>I must 100% recommend grabbing this freebie if you plan to support your mobile webapp to be saved onto the iPhone homescreen.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/22-iphone-ios-app-icon-template-psd.jpg\" alt=\"ios app icon templates psd freebie\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medialoot.com\/item\/free-iphone-app-template-appview\/\">AppView iPhone UI Theme<\/a><\/h3>\n<p>I like to think of the AppView theme as more of a template for minimalist designers. This PSD set will include all of the typical interface elements you expect to find in iOS applications.<\/p>\n<p>It makes the perfect starting ground for adding your own content and setting up basic page templates for your webapp.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/24-iphone-ui-theme-template-freebie.jpg\" alt=\"iphone ui freebie templates appview\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.graffletopia.com\/stencils\/578\">Android Sketch Stencil<\/a><\/h3>\n<p>These Android stencils are another tool for building your core wireframe. Keep in mind that your mobile webapp does not need to mimic either of the mobile operating systems. But it does help using the default elements as a starting point for your projects.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/29-android-template-sketch-stencil-wireframe.jpg\" alt=\"iphone sketch stencil ui kit wireframing templates\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/creativevip.net\/resource\/iphone-app-psd-template\/\">iPhone App PSD Template<\/a><\/h3>\n<p>This freebie iPhone app PSD template is courtesy of <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/creativevip.net\/\">CreativeVIP<\/a>.<\/p>\n<p>Their library includes many helpful mobile graphics but this particular iPhone interface offers a tabbar and icon sets. Plus a homescreen and content page design for your own customizations.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/33-iphone-app-freebie-psd-template.jpg\" alt=\"iphone app template psd freebie ui\"><\/figure>\n<h2>Icon Sets<\/h2>\n<p>What mobile webapp would be complete without a series of related interface icons? Think about all the places you will find these glyphs and symbols. The top navigation toolbar and bottom tab bar areas will frequently use icons to represent button actions.<\/p>\n<p>Plus you may embed icon sets into your page content for a more visual approach on mobile screens. Most of these collections will include a retina version along with the standard icon sizes.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/speckyboy.com\/freebie-retina-glyph-icon-set\/\">100 Retina Glyph Icons<\/a><\/h3>\n<p>Just recently Speckyboy published a collection of free retina glyph icons for mobile designers. These icons may be used anywhere in your layout and can also be placed @2x for high DPI screens.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/38-freebie-100-retina-glyph-icons-psd-set.jpg\" alt=\"freebie vector icons set gallery ui iphone\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mfglabs.github.io\/mfglabs-iconset\/\">MFG Labs Icon Set<\/a><\/h3>\n<p>MFGLabs has a good track record of releasing freebies into the design community. The landing page really stands out as you can see how these icons may be placed into a typical layout style. Grab a free download of the pack and toy around in your own time.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/39-mfglabs-icons-tabbar-glyphs-freebie.jpg\" alt=\"mfglabs freebie icons psd mobile tabbar\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.deviantart.com\/chrfb\/art\/Web0-2ama-165156124\">Web0.2ama<\/a><\/h3>\n<p>These well-designed icons are also useful in typical mobile content areas. Not all mobile webapps will need loads of icons aside from interface features. But the collections are all free of use and free to download.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/40-glyph-icons-freebie-set-web02-ios.jpg\" alt=\"iphone glyph icons design freebie ios downloads\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.glyfx.com\/content\/page\/android-common-ii.html\">Android Developer Common Icon Set<\/a><\/h3>\n<p>Most of the collections we have seen pertain to Apple-inspired iOS icons. However the Android GUI pack also have a lot of native icons you can find. And this freebie set is perfect for mobile developers who are looking to mimic the Android interface feeling.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/41-common-android-developer-icons-set.jpg\" alt=\"common app icons set glyphs freebies\"><\/figure>\n<h3>Clean Icons<\/h3>\n<p>Clean Icons from IconDeposit are a bit too small for use in tabbar elements. But they are just the right size and shape for interface features and toolbar buttons. The graphics are colored white to gray but you can update the colors & effects in Photoshop.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/42-clean-icons-set-icondeposit-glyphs-mobile.jpg\" alt=\"glyph icons set freebies transparent\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.iconbeast.com\/free\/\">IconBeast Freebie Pack<\/a><\/h3>\n<p>The IconBeast freebie pack is also full of beautiful glyphs for iPhone tabbars. The grey-colored pack includes over 300 icons which are sized out for retina devices.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/44-ios-tabbar-icons-frebie-png-set.jpg\" alt=\"ios freebies png pack set icons downloads\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/877004-Device-Storage-Icons\">Device Storage Icons<\/a><\/h3>\n<p>This mini device storage pack really stuck out to me and I wanted to include the set here in our mobile resources. These are monocolored icons that fit nicer into your content, in paragraphs, or in menu buttons.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/45-device-storage-mini-icons-set-freebie.jpg\" alt=\"device storage mini icons set freebie\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/840589-Rectangle-Icons\">Rectangle Icons<\/a><\/h3>\n<p>The rectangle icons are another solution for bare content aesthetics. These can easily be updated in size and color, plus they will fit nicely into any mobile layout.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/46-retina-rectangle-icons-mobile-ui-freebie.jpg\" alt=\"dribbble green freebies icons set download\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/yay.se\/resources\/android-native-icons\/\">Native Android Icons<\/a><\/h3>\n<p>Finally we have some more native Android-based mobile UI icons. This freebie is an excellent addition to the set which is mostly controlled by iOS styles.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/49-android-native-icons-freebie-eps-vector.jpg\" alt=\"vector icons iconset native freebies download\"><\/figure>\n<h2>Online Tools<\/h2>\n<p>Admittedly there are not as many online tools and webapps used for building mobile sites. However the tools which are online can provide lots of help in expediting the development process.<\/p>\n<p>Web tools can make your job easier by providing HTML5\/CSS3 code templates, icon generators, smartphone demos, and lots of other goodies too.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/makeappicon.com\/\">MakeAppIcon<\/a><\/h3>\n<p>MakeAppIcon is possibly the greatest tool online for mobile developers. If you do not have the time for resizing and creating the different icons, this webapp will handle the job for you. It is completely free to use and will work with all the common icon formats.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/50-webapp-tool-make-app-icon-mobile.jpg\" alt=\"free web tool webapp online converting ios icons sizes\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.iconsdb.com\/\">Icons DB<\/a><\/h3>\n<p>If the icon sets listed above are not enough you can always check out the Icons DB. Their database is packed with new open source GPL icons for use in your own applications. Just do a search on the website or click any of the related tags in the sidebar.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/51-iconsdb-database-freebie-icons-tool-resource.jpg\" alt=\"Icons DB database website webapp online tools resource\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mobilehtml5.org\/\">Mobile HTML5<\/a><\/h3>\n<p>Mobile HTML5 isn\u2019t as much of a webapp as an online resource. Their page is coded with a graph displaying all the differences in rendering mobile HTML in browsers. This takes into account many of the different iOS apps, along with Android-based web browsers.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/52-mobile-html5-compatibility-chart-reference-tools.jpg\" alt=\"html5 compatibility chart browsers mobile webapp\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/teamtreehouse.com\/library\/html5-mobile-web-applications\">HTML5 Mobile Webapp Videos<\/a><\/h3>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/teamtreehouse.com\/\">Treehouse<\/a> is a new online learning library which helps developers to pick up new skills. Their video library includes CSS3, HTML5, jQuery, and even Objective-C programming.<\/p>\n<p>This page in particular handles HTML5 development for mobile web applications. Check out some of the features to see if you would be interested in studying any of the topics at hand.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/53-treehouse-mobile-html5-videos-tutorials.jpg\" alt=\"treehouse videos learning online mobile webapp development\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/endo64\/mockup\">Mockup Designer<\/a><\/h3>\n<p>Mockup Designer is a tool hosted at Github which is free for everybody. They provide very basic interface elements for structuring your own layout. Extremely helpful if you are just getting started building layouts for mobile webapps.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/55-resource-tools-mockup-designer-github.jpg\" alt=\"Github Mockup Designer webapp tools free\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.initializr.com\/\">Initializr<\/a><\/h3>\n<p>If you do not have a bare-bones HTML5 template then I recommend checking out Initializr. It is a free web tool which will bundle and package HTML5\/CSS3 codes as a template for your projects. This will save you time during development and dramatically cuts down your coding requirements.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/57-html5-initializer-tool-resource-projects.jpg\" alt=\"HTML5 project initializer website webapp initialize\"><\/figure>\n<h2>Open Source Code<\/h2>\n<p>The final piece to building a mobile webapp is the code. All frontend developers have at least heard about responsive web design. I want to point out this is not always the way to go when building mobile webapps.<\/p>\n<p>However many of these plugins and code frameworks allow for mobile responsive web design, which is great when supporting desktop browsers too. You will also find code snippets which mirror the native effects of Android and iOS smartphones.<\/p>\n<h3>iOS.js<\/h3>\n<p>iOS.js is a powerful JavaScript library that updates the look and feel of your webpage. It will force certain features to behave as if they are rendered natively on an iPhone. There is very little support for non-JavaScript users but it\u2019s a nice library worth some attention.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/59-iosjs-javascript-library-mobile-webapps.jpg\" alt=\"iosjs javascript library open source freebies\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/masterspambot\/iOS-ScrollPane\">iOS ScrollPane<\/a><\/h3>\n<p>You know how you can flick left\/right on the iPhone home screen to switch between icons? This exact effect has been duplicated for the web as a jQuery plugin. iOS ScrollPane is a free resource for your webapp to duplicate the same home screen effect.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/63-ios-scrollpane-jquery-plugin-mobile.jpg\" alt=\"ios jQuery plugin scrollpane freebies home screen\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/photoswipe.com\/\">PhotoSwipe<\/a><\/h3>\n<p>When comparing mobile responsive slideshow plugins I will have to recommend PhotoSwipe. Their documentation is very simple and the support is phenomenal. Both smartphones and tablet PCs will benefit from this jQuery plugin.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/64-photoswipe-jquery-mobile-responsive-slideshow.jpg\" alt=\"responsive slideshow mobile jquery plugin swipe webapps\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/taitems\/iOS-Inspired-jQuery-Mobile-Theme\">iOS-Style jQuery Mobile Theme<\/a><\/h3>\n<p>Another awesome package on Github is this iOS-style jQuery Mobile theme. Most frontend web developers <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/\" rel=\"noopener noreferrer\">know about jQuery Mobile<\/a> which offers a dynamic HTML5\/CSS3 mobile interface.<\/p>\n<p>If you enjoy their library then you\u2019ll definitely want to try out this theme which replicates iOS native applications.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/65-ios-inspired-jquery-mobile-theme.jpg\" alt=\"ios iphone jquery mobile webdev template theme open source\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/Yuripetusko\/slideToucher\">jQuery slideToucher<\/a><\/h3>\n<p>slideToucher is a jQuery plugin for adding swipe-to-slide panels into your mobile app. These will not work the same in your desktop browser with the mouse navigation. So although this plugin can be great for mobile users, it is not ideal for responsive websites.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/66-jquery-slide-toucher-plugin-mobile.jpg\" alt=\"mobile webapp plugin sliding panels layout\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.limejs.com\/\">LimeJS<\/a><\/h3>\n<p>Along with the typical mobile web applications there are lots of designers who are interested in HTML5 mobile games. This open source Lime.js library is an HTML5 framework for in-browser games. It supplies native touch gestures and it also supports powerful extensions through JavaScript codes.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/68-limejs-html5-mobile-gaming-framework-codes.jpg\" alt=\"lime.js open source mobile html5 gaming framework\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/manos.malihu.gr\/jquery-custom-content-scroller\/\">Custom Content Scroller<\/a><\/h3>\n<p>Out of all the jQuery plugins here I think the Custom Content Scroller is my favorite. This will mimic the iOS style of sliding content which may be applied onto any div or section on the page. You can swipe to scroll or click & drag on the semi-transparent OSX-style toolbar.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/69-jquery-plugin-custom-content-scrollbar.jpg\" alt=\"jquery plugin custom content scrollbar open source webapps\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/justspamjustin\/junior\">Junior Framework<\/a><\/h3>\n<p>Junior is a much more polished and refined HTML5 framework for building mobile webapps. Their website has a lot of demos and the documentation is very easy to read.<\/p>\n<p>It may require a bit of initial upfront work to nail down the basics, but it is a step forward in supporting mobile HTML5 webapps.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/70-junior-native-themes-html5-css3-mobile-webapps.jpg\" alt=\"HTML5 Junior framework freebie open source download\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ios-checkboxes.awardwinningfjords.com\/\">iOS-Style Checkboxes<\/a><\/h3>\n<p>We all know about the native ON\/OFF switches found within iOS. This jQuery plugin will allow you to style any input form checkbox element to behave like a slider. The codes are free to download and very easy to get going on any website.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/71-ios-style-checkboxes-jquery-plugin.jpg\" alt=\"ios mobile iphone framework checkboxes jquery plugin\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/luckyshot\/ipad-html5-css3-template\">Luckyshot HTML5 iOS Template<\/a><\/h3>\n<p>The Luckyshot template is a free open source HTML5\/CSS3 project for building layouts similar to iPhone and iPad applications.<\/p>\n<p>The whole framework is built without any JavaScript and it is fully responsive to fit naturally into all monitors and mobile screens. Anybody looking for an HTML5 solution to natural iOS webapps should definitely check out the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/xaviesteve.com\/pro\/ipad-template\/\">Luckyshot framework<\/a>.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/72-iphone-ipad-mobile-html5-webapp-template.jpg\" alt=\"templates ios iphone ipad mobile elements source code\"><\/figure>\n<h2>Final Thoughts<\/h2>\n<p>This exhaustive collection of mobile codes and GUI kits should provide a library for new developers. As trends advance we will likely see a whole new onslaught of tools and resources being published online.<\/p>\n<p>I am hoping this guide will offer a bold starting point to getting your webapp idea launched on the right foot. But if you have any questions or additional resources we may have missed, feel free to share your thoughts in the post discussion area.<\/p>","protected":false},"excerpt":{"rendered":"<p>The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire web apps using only HTML5 and CSS3. Coupled with many JavaScript libraries, the possibilities for mobile development are endless. In this post, I have put together just over 70 resources for developing mobile websites and web&hellip;<\/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":[3399,352],"tags":[3214,4646],"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.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>40+ Resources and Freebies For Mobile Web App Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire web apps using only HTML5 and\" \/>\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\/webapp-design-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"40+ Resources and Freebies For Mobile Web App Design\" \/>\n<meta property=\"og:description\" content=\"The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire web apps using only HTML5 and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/\" \/>\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=\"2013-05-09T15:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-16T10:59:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/02-android-graphics-gui-psd-freebie.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=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"40+ Resources and Freebies For Mobile Web App Design\",\"datePublished\":\"2013-05-09T15:01:10+00:00\",\"dateModified\":\"2022-10-16T10:59:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/\"},\"wordCount\":2289,\"commentCount\":28,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webapp-design-resources\\\/02-android-graphics-gui-psd-freebie.jpg\",\"keywords\":[\"Mobile App Development\",\"Mobile Website Design &amp; Dev\"],\"articleSection\":[\"Mobile\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/\",\"name\":\"40+ Resources and Freebies For Mobile Web App Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webapp-design-resources\\\/02-android-graphics-gui-psd-freebie.jpg\",\"datePublished\":\"2013-05-09T15:01:10+00:00\",\"dateModified\":\"2022-10-16T10:59:57+00:00\",\"description\":\"The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire web apps using only HTML5 and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webapp-design-resources\\\/02-android-graphics-gui-psd-freebie.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webapp-design-resources\\\/02-android-graphics-gui-psd-freebie.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webapp-design-resources\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"40+ Resources and Freebies For Mobile Web App Design\"}]},{\"@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":"40+ Resources and Freebies For Mobile Web App Design - Hongkiat","description":"The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire web apps using only HTML5 and","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\/webapp-design-resources\/","og_locale":"en_US","og_type":"article","og_title":"40+ Resources and Freebies For Mobile Web App Design","og_description":"The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire web apps using only HTML5 and","og_url":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-09T15:01:10+00:00","article_modified_time":"2022-10-16T10:59:57+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/02-android-graphics-gui-psd-freebie.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":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"40+ Resources and Freebies For Mobile Web App Design","datePublished":"2013-05-09T15:01:10+00:00","dateModified":"2022-10-16T10:59:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/"},"wordCount":2289,"commentCount":28,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/02-android-graphics-gui-psd-freebie.jpg","keywords":["Mobile App Development","Mobile Website Design &amp; Dev"],"articleSection":["Mobile","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/","url":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/","name":"40+ Resources and Freebies For Mobile Web App Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/02-android-graphics-gui-psd-freebie.jpg","datePublished":"2013-05-09T15:01:10+00:00","dateModified":"2022-10-16T10:59:57+00:00","description":"The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire web apps using only HTML5 and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/02-android-graphics-gui-psd-freebie.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/webapp-design-resources\/02-android-graphics-gui-psd-freebie.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"40+ Resources and Freebies For Mobile Web App Design"}]},{"@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-4sg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17128","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=17128"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17128\/revisions"}],"predecessor-version":[{"id":62940,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17128\/revisions\/62940"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17128"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}