{"id":1938,"date":"2018-03-05T00:05:49","date_gmt":"2018-03-05T00:05:49","guid":{"rendered":"http:\/\/www.thefhguide.com\/blog\/?p=1938"},"modified":"2019-01-16T19:43:09","modified_gmt":"2019-01-16T19:43:09","slug":"site-update-going-mobile-friendly","status":"publish","type":"post","link":"https:\/\/www.thefhguide.com\/blog\/site-update-going-mobile-friendly\/","title":{"rendered":"Site Update: Going Mobile-Friendly"},"content":{"rendered":"<p><strong>To App or Not to App &#8230;<img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1941\" src=\"http:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fork-road-300x200.jpg\" alt=\"\" width=\"254\" height=\"169\" srcset=\"https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fork-road-300x200.jpg 300w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fork-road-768x512.jpg 768w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fork-road.jpg 960w\" sizes=\"auto, (max-width: 254px) 100vw, 254px\" \/><\/strong><\/p>\n<p>A while ago, we faced a crossroads for mobile devices using The Family History Guide: we could create a special app to be downloaded, or we could make the whole site more mobile-friendly. We chose the latter, and here are a few of the reasons:<\/p>\n<ul>\n<li><em>Website content<\/em> &#8211; While the top-level screens of The Family History Guide would be a good match for a separate mobile app, the many content-specific pages (such as countries, the tracker, etc.) would be difficult to package in an app.<\/li>\n<li><em>Maintenance<\/em> &#8211; The Family History Guide website is dynamic: we keep up with the ever-changing landscape of family history online. Maintaining a large app and a large website would be a difficult undertaking.<\/li>\n<li><em>Mobile-friendly, unified design<\/em> &#8211; With a mobile-friendly site, the same basic design is used for desktop, tablet, and smartphone. The website detects the screen resolution of the device that&#8217;s logged on, and it switches the view to full (desktop) or minimized (tablet or phone).<\/li>\n<\/ul>\n<p><strong>Top Menus<\/strong><\/p>\n<p>In the desktop view, the main menu items are now arranged in one row across the top, with drop-down items for each:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-1945\" src=\"http:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/top-menu.png\" alt=\"\" width=\"963\" height=\"119\" srcset=\"https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/top-menu.png 963w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/top-menu-300x37.png 300w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/top-menu-768x95.png 768w\" sizes=\"auto, (max-width: 963px) 100vw, 963px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>When you narrow the browser window on a desktop view, the top menu disappears, replaced by the &#8220;hamburger menu&#8221; (the default for tablets and smartphones).<\/p>\n<p><strong>Hamburger and Fly-out Menus<\/strong><\/p>\n<p>The &#8220;hamburger&#8221; menu is an icon with three horizontal lines in the upper-right corner:<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1946 alignright\" src=\"http:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/hamburger.jpg\" alt=\"\" width=\"69\" height=\"54\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>When you click the icon, a fly-out menu appears at the left side of the screen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1949\" src=\"http:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fly-out-2.jpg\" alt=\"\" width=\"169\" height=\"574\" srcset=\"https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fly-out-2.jpg 169w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fly-out-2-88x300.jpg 88w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/p>\n<p>You can select any of these items, or you can hover over an item to display a sub-menu:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1950 aligncenter\" src=\"http:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fly-out1.jpg\" alt=\"\" width=\"176\" height=\"499\" srcset=\"https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fly-out1.jpg 176w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/fly-out1-106x300.jpg 106w\" sizes=\"auto, (max-width: 176px) 100vw, 176px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>More<\/strong><\/p>\n<p>Here are a few additional items we changed on the site to make it more mobile-friendly:<\/p>\n<ul>\n<li>Down-sized some of the graphics so they load faster on mobile devices<\/li>\n<li>Shrank the logo for The Family History Guide on mobile so it takes up less space<\/li>\n<li>Improved formatting in some pages to save vertical space<\/li>\n<\/ul>\n<p>Enjoy the new mobile-friendly design for The Family History Guide website, whether on desktop, laptop, tablet, or smartphone.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1952\" src=\"http:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/phone-city.jpg\" alt=\"\" width=\"960\" height=\"640\" srcset=\"https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/phone-city.jpg 960w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/phone-city-300x200.jpg 300w, https:\/\/www.thefhguide.com\/blog\/wp-content\/uploads\/2018\/03\/phone-city-768x512.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p class=\u201cwv-ignore\u201d>\n<p><script async src=\"https:\/\/widget.websitevoice.com\/gdg8sme9Co8djc4uHOHRfA\"><\/script><br \/>\n<script>\n  window.wvData=window.wvData||{};function wvtag(a,b){wvData[a]=b;}\n  wvtag('id', 'gdg8sme9Co8djc4uHOHRfA');\n  wvtag('text-selector', '.entry-inner');\n  wvtag('widget-style', {\n    className: 'wv-circle-small',\n    contrast: 'wv-contrast-dark'\n  });\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To App or Not to App &#8230; A while ago, we faced a crossroads for mobile devices using The Family History Guide: we could create a special app to be downloaded, or we could make the whole site more mobile-friendly. We chose the latter, and here are a few of the reasons: Website content &#8211; While the top-level screens of&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":1942,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[43,174,175],"class_list":["post-1938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-trackers","tag-mobile-devices","tag-smartphones","tag-tablets"],"_links":{"self":[{"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/posts\/1938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/comments?post=1938"}],"version-history":[{"count":8,"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/posts\/1938\/revisions"}],"predecessor-version":[{"id":4091,"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/posts\/1938\/revisions\/4091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/media\/1942"}],"wp:attachment":[{"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/media?parent=1938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/categories?post=1938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thefhguide.com\/blog\/wp-json\/wp\/v2\/tags?post=1938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}