{"id":4521,"date":"2018-03-29T03:33:00","date_gmt":"2018-03-29T03:33:00","guid":{"rendered":"https:\/\/saeler.com\/?p=4521"},"modified":"2022-10-14T14:32:20","modified_gmt":"2022-10-14T14:32:20","slug":"mobile-responsive-design","status":"publish","type":"post","link":"https:\/\/purelysupp.com\/wordpress\/design\/user-experience\/mobile-responsive-design\/","title":{"rendered":"Mobile Responsive, It&#8217;s not just flicking a switch!"},"content":{"rendered":"\n<p>With Google looming in the background demanding mobile responsive sites, developers have been inundated with requests to make WordPress Sites &#8220;Mobile Responsive&#8221;. There&#8217;s just one problem,&nbsp;&#8220;Mobile Responsive&#8221; is a set of standards involving HTML 5, CSS 3 and in some cases Javascript; it&#8217;s about function and performance, while &#8220;Mobile Responsive Design&#8221; is the combination of standards and presentation. So when someone says &#8220;<em>I want my site Mobile Responsiv<\/em>e&#8221; it&#8217;s no different than saying &#8220;I want an eCommerce website that makes lot&#8217;s of money&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">O.K. great, but&#8230;.<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>What should&nbsp;it to look like?<\/li><li>How will payment be collected and processed?<\/li><li>What are you selling?<\/li><li>How are you going to market it?<\/li><\/ul>\n\n\n\n<p>The request is simply too vague for any reputable website developer to provide a realistic quote. <strong>The good news is that any relatively new site design or WordPress theme is Mobile Responsive out of the box<\/strong>. This means that the themes will perform according to Mobile Responsive standards using <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_mediaquery.asp\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Media Queries<\/a> and <a href=\"http:\/\/responsivedesign.is\/develop\/browser-feature-support\/media-queries-for-common-device-breakpoints\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Device Break Points<\/a> to adjust the appearance of the site on assorted mobile devices. Unfortunately that doesn&#8217;t mean it will provide a perfect presentation or a specific look without a lot of custom CSS (Design). <strong>Now lets take a look at some examples to emphasize the difference&nbsp;between Mobile Responsive and &#8220;Mobile Responsive Design&#8221;.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-wideleft\"><div class=\"gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column\">\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column gb-is-vertically-aligned-center\"><div class=\"gb-block-layout-column-inner\">\n<h3 class=\"has-text-align-center wp-block-heading\">An Out Of the Box Theme without any Mobile Responsive CSS Customization<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises-1024x513.jpg\" alt=\"Saeler Enterprises Website Screen Capture\" class=\"wp-image-10576\" srcset=\"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises-1024x513.jpg 1024w, https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises-300x150.jpg 300w, https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises-768x385.jpg 768w, https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises-1536x770.jpg 1536w, https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises.jpg 1899w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/shareasale.com\/r.cfm?b=394686&amp;u=200742&amp;m=41388&amp;urllink=&amp;afftrack=\" target=\"_blank\" rel=\"noreferrer noopener\">Out of the box Genesis Framework Corporate Pro Child Theme<\/a><\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises_mobile.jpg\" alt=\"Saeler Enterprises Mobile Website Screen Capture\" class=\"wp-image-10577\" width=\"184\" height=\"374\" srcset=\"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises_mobile.jpg 367w, https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/saeler_enterprises_mobile-147x300.jpg 147w\" sizes=\"auto, (max-width: 184px) 100vw, 184px\" \/><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p>In the above example, we see a modified version of the <a href=\"http:\/\/www.shareasale.com\/r.cfm?B=346198&amp;U=200742&amp;M=28169&amp;urllink=\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Genesis<\/a> Child Theme <a href=\"http:\/\/www.shareasale.com\/r.cfm?B=362105&amp;U=200742&amp;M=28169&amp;urllink=\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Focus Pro<\/a> by <a href=\"http:\/\/www.shareasale.com\/r.cfm?B=346200&amp;U=200742&amp;M=28169&amp;urllink=\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">StudioPress<\/a>. Because this modified theme is still in development, it makes an excellent example of how it&#8217;s Mobile Responsive out of the box but not a perfect aesthetic presentation. While a number of break points function correctly other elements don&#8217;t.&nbsp;<\/p>\n\n\n\n<p>In the above Mobile Image we can easily see the &#8220;Hamburger Menu&#8221; (nickname for the Hash Mark Menu Icon) Floats under the Hero Image Heading. If we scroll down many more issues would present themselves. These elements  need to be adjusted in order to create a &#8220;Mobile Responsive Design&#8221; that maintains the branding and feel of the &#8220;Desktop&#8221; version:<\/p>\n\n\n\n<p><strong>So\u00a0now it&#8217;s time to make some Mobile Responsive decisions<\/strong><\/p>\n\n\n\n<p>When it comes to making your site Mobile Responsive there are basically four approaches &nbsp;you can take.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li style=\"clear: both;\"><strong>Add HTML5 CSS3 Mobile Responsive code to your existing WordPress Theme<\/strong> Adding Mobile Responsive Code to an existing WordPress website isn&#8217;t necessarily a&nbsp;cost effective solution because the entire style sheet will need to be adjusted, which is pretty much the same thing as rebuilding the entire website from scratch.<\/li><li style=\"clear: both;\"><strong>Convert to an HTML5 CSS3 Mobile Responsive Theme and leave the&nbsp;presentation as it is out of the box.<\/strong> This solution is the most effective for anyone with an older site. It brings the sites code up to current development standards, reducing the risk of conflicts and improving overall search engine rankings (not just Mobile).<\/li><li style=\"clear: both;\"><strong>Use CSS to hide unsightly elements from Mobile Devices<\/strong> This option won&#8217;t make your site Mobile Responsive but, if used with an HTML5 CSS3 design, it will allow you to hide difficult to control elements of your pages from mobile devices, reducing the costs involved.<\/li><li style=\"clear: both;\"><strong>Use a Mobile Responsive WordPress Plugin <\/strong>A plugin would seem to be the easiest way to make your site Mobile Responsive, but like other methods plugins&nbsp;still require compromise and even have some unique drawbacks the other methods don&#8217;t. When using a plugin, you still have aesthetic issues and also have the possibility of conflicts with other plugins. In addition to the above issues, the website theme will still be outdated because it&#8217;s not using current HTML and CSS standards.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Get an accurate quote, tell your developer what you want<\/h3>\n\n\n\n<p>The two&nbsp;main&nbsp;factors to&nbsp;consider when choosing which of these&nbsp;four options is best for you are Cost and Appearance. The less concerned about a specific presentation you are and the more<strong> willing to compromise, the less your overall costs will be<\/strong>. Maintaining branding with&nbsp;overall look and feel&nbsp;in a mobile presentation is time intensive and your developer will spend a lot of time tweaking and adjusting (unless they don&#8217;t proof their work). So if you want a perfect presentation, expect to pay for it, but if you are willing to compromise your site&nbsp;can be Mobile Responsive without breaking the bank. Just remember, if you want your site Mobile Responsive because of the upcoming Google update &#8211; Google doesn&#8217;t care what it looks like, just that it&#8217;s Mobile Responsive. Another factor to take into consideration is &#8211; &nbsp;if a Mobile Site truly needs to look as close as possible to the Desktop version, why do the major Internet and Software companies create spartan versions of their sites instead of spending a fortune making their sites look perfect (see Amazon example below)?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A few&nbsp;more&nbsp;examples of Mobile Responsive Design to help with your decision<\/h3>\n\n\n\n<p>Click on an image below to see&nbsp;how the site looks on an&nbsp;iPhone 6Plus. Each of these designs demonstrates a slightly different approach to Mobile Responsive Design, some more simplistic, others more detailed, but none use plugins. Some choose to maintain most of their branding, others hide elements from mobile devices and Amazon even has an alignment issue.<\/p>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-wideleft\"><div class=\"gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column\">\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\">\n<figure class=\"wp-block-image\"><a href=\"https:\/\/shareasale.com\/r.cfm?b=1320631&amp;u=200742&amp;m=41388&amp;urllink=&amp;afftrack=\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/www.saeler.com\/wp-content\/uploads\/2015\/03\/mobile2.jpg\" alt=\"Genesis Theme Framework Mobile Responsive\" class=\"wp-image-6242\"\/><\/a><figcaption><a href=\"https:\/\/shareasale.com\/r.cfm?b=394686&amp;u=200742&amp;m=41388&amp;urllink=&amp;afftrack=\" target=\"_blank\" rel=\"noreferrer noopener\">StudioPress Genesis Themes by WPEngine<\/a><\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\">\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><a href=\"https:\/\/shareasale.com\/r.cfm?b=1320631&amp;u=200742&amp;m=41388&amp;urllink=&amp;afftrack=\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.saeler.com\/wp-content\/uploads\/2015\/03\/mobile2b.jpg\" alt=\"Genesis Theme Framework Mobile Responsive\" class=\"wp-image-6243\" width=\"184\" height=\"374\"\/><\/a><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-wideleft\"><div class=\"gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column\">\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\">\n<p><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\">\n<p><\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-wideright\"><div class=\"gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column\">\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/wpmudev.com\/?ref=616d39686443307a4f5467314f444d3d\" target=\"_blank\" rel=\"attachment wp-att-6253 noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.saeler.com\/wp-content\/uploads\/2015\/03\/mobile3b.jpg\" alt=\"WPMUDEV Mobile Responsive Layout\" class=\"wp-image-6253\" width=\"184\" height=\"374\"\/><\/a><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column gb-is-vertically-aligned-top\"><div class=\"gb-block-layout-column-inner\" style=\"text-align:center\"><div class=\"wp-block-image\">\n<figure class=\"alignleft\"><a href=\"https:\/\/wpmudev.com\/?ref=616d39686443307a4f5467314f444d3d\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/www.saeler.com\/wp-content\/uploads\/2015\/03\/mobile3.jpg\" alt=\"WPMUDEV Mobile Responsive Design\" class=\"wp-image-6252\"\/><\/a><figcaption><a href=\"https:\/\/wpmudev.com\/?ref=616d39686443307a4f5467314f444d3d\" target=\"_blank\" rel=\"noreferrer noopener\">WPMUDEV WordPress Plugins and Hosting<\/a><\/figcaption><\/figure>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-wideleft\"><div class=\"gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column\">\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.saeler.com\/wp-content\/uploads\/2015\/03\/mobile5.jpg\" alt=\"WordPress Mobile Responsive Layout\" class=\"wp-image-6256\"\/><figcaption><a href=\"https:\/\/wordpress.org\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress.Org Official WordPress Stand Alone Website<\/a><\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-column gb-block-layout-column\"><div class=\"gb-block-layout-column-inner\">\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.saeler.com\/wp-content\/uploads\/2015\/03\/mobile5b.jpg\" alt=\"WordPress Mobile Responsive Layout\" class=\"wp-image-6251\" width=\"184\" height=\"374\"\/><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With Google looming in the background demanding mobile responsive sites, developers have been inundated with requests to make WordPress Sites &#8220;Mobile Responsive&#8221;. There&#8217;s just one problem,&nbsp;&#8220;Mobile Responsive&#8221; is a set of standards involving HTML 5, CSS 3 and in some cases Javascript; it&#8217;s about function and performance, while &#8220;Mobile Responsive Design&#8221; is the combination of\u2026&nbsp;<a href=\"https:\/\/purelysupp.com\/wordpress\/design\/user-experience\/mobile-responsive-design\/\" class=\"rmlink\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":10583,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","iawp_total_views":0,"wds_primary_category":69,"footnotes":""},"categories":[69],"tags":[151,152,65],"class_list":{"0":"post-4521","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-user-experience","8":"tag-google","9":"tag-mobile-responsive","10":"tag-seo","11":"entry"},"featured_image_src":"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/Screen-Capture-of-mobile-and-desktop-versions-of-website-600x397.jpg","featured_image_src_square":"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2016\/03\/Screen-Capture-of-mobile-and-desktop-versions-of-website-600x397.jpg","author_info":{"display_name":"Jack Alltrade","author_link":"https:\/\/purelysupp.com\/wordpress\/author\/jacka11trade\/"},"_links":{"self":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts\/4521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/comments?post=4521"}],"version-history":[{"count":3,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts\/4521\/revisions"}],"predecessor-version":[{"id":10582,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts\/4521\/revisions\/10582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/media\/10583"}],"wp:attachment":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/media?parent=4521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/categories?post=4521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/tags?post=4521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}