{"id":6387,"date":"2013-11-11T10:19:55","date_gmt":"2013-11-11T18:19:55","guid":{"rendered":"https:\/\/www.premierpress.com\/?p=6387"},"modified":"2019-09-30T11:12:06","modified_gmt":"2019-09-30T18:12:06","slug":"responsive-web-design-for-mobile","status":"publish","type":"post","link":"https:\/\/www.premierpress.com\/blog\/responsive-web-design-for-mobile\/","title":{"rendered":"Responsive Web Design for Mobile"},"content":{"rendered":"\n<p><em>Mobile first<\/em> and more recently <em>Multi-screen<\/em> are hot topics for marketers these days. People &#8211; your customers and prospects &#8211; are not constrained to their computer when answering your emails, reading your blog, and researching competitive information. They bounce between their laptop or desktop computer and mobile phone throughout the day.<\/p>\n\n\n\n<p>57% adults now own a smart phone. Mobile traffic share on our own web site has increased over 38% in the last year. This table shows the percentage of people that use their smart phones for tasks they used to have to do on their computer.<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"203\" src=\"https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/mobile-phone-use-1.gif\" alt=\"mobile-phone-use\" class=\"wp-image-11623\"\/><\/figure>\n\n\n\n<p><br><span style=\"font-size: 10px;\"><a title=\"Mobile phone use report (1.3 Megabyte PDF)\" href=\"https:\/\/pewinternet.org\/~\/media\/\/Files\/Reports\/2013\/PIP_Cell%20Phone%20Activities%20May%202013.pdf\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Cell Phone Activities 2013 | Pew Research Center<\/a><\/span><\/p>\n\n\n\n<p>Not too long ago you either had to build a separate mobile version or versions of your web site or have your site visitors suffer through a mediocre or worse experience. With the wide variety of smart phone screen sizes and users\u0092 preferences of viewing web sites in a portrait or landscape orientation, it is impossible to optimize your web site for all combinations.<br><\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Web Design<\/h2>\n\n\n\n<p>New web design methodologies allow a site to adapt, or respond, based on the size and type of device that is being used. Here\u0092s some examples of what responsive design can do:<\/p>\n\n\n\n<ul><li>Images resize<\/li><li>Web site width changes<\/li><li>Menu design changes to maximize usability using a mouse or touch screen<\/li><li>The entire page layout changes. A multiple column design on a desktop computer morphs into a single column design on a smaller mobile device.<\/li><\/ul>\n\n\n\n<p>Here&#8217;s and example of how a responsive web site changes it&#8217;s layout for different devices. First, the web site as it appears on a laptop computer.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-11624 is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1402\" height=\"1607\" src=\"https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop.jpg\" alt=\"Responsive site viewed on a laptop computer\" class=\"wp-image-11624\" srcset=\"https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop.jpg 1402w, https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-262x300.jpg 262w, https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-768x880.jpg 768w, https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-893x1024.jpg 893w\" sizes=\"(max-width: 1402px) 100vw, 1402px\" \/><figcaption>Responsive site viewed on a laptop computer<\/figcaption><\/figure>\n\n\n\n<p>The following two images show how the same responsive web page appears on a smart phone in portrait and landscape orientations.<\/p>\n\n\n\n<div style=\"float: left;\">\n<\/div>\n\n\n\n<figure class=\"wp-block-image alignnone size-medium wp-image-11628 is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"2601\" src=\"https:\/\/www.premierpress.com\/wp-content\/uploads\/2019\/03\/wf-full-mobile-hor.jpg\" alt=\"Responsive web page on a smart phone in horizontal orientation\" class=\"wp-image-11628\" srcset=\"https:\/\/www.premierpress.com\/wp-content\/uploads\/2019\/03\/wf-full-mobile-hor.jpg 598w, https:\/\/www.premierpress.com\/wp-content\/uploads\/2019\/03\/wf-full-mobile-hor-69x300.jpg 69w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><figcaption>Horizontal smart phone screen shot<\/figcaption><\/figure>\n\n\n\n<div style=\"float: right;\">\n<\/div>\n\n\n\n<figure class=\"wp-block-image alignnone size-medium wp-image-11627 is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"2642\" src=\"https:\/\/www.premierpress.com\/wp-content\/uploads\/2019\/03\/wf-full-mobile-vert.jpg\" alt=\"Responsive web page on a smart phone in vertical orientation\" class=\"wp-image-11627\" srcset=\"https:\/\/www.premierpress.com\/wp-content\/uploads\/2019\/03\/wf-full-mobile-vert.jpg 360w, https:\/\/www.premierpress.com\/wp-content\/uploads\/2019\/03\/wf-full-mobile-vert-41x300.jpg 41w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><figcaption>Vertical smart phone screen shot<\/figcaption><\/figure>\n\n\n\n<div style=\"clear: both;\">&nbsp;<\/div>\n\n\n\n<p>You can see this for yourself by viewing our website in your desktop and smartphone browsers. You can also check out out this blog post, or any page on the <a title=\"Portland&#039;s premier integrated marketing company\" href=\"https:\/\/www.premierpress.com\">Premier Press<\/a> website&nbsp;to see another example.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Web Site or Mobile App?<\/h2>\n\n\n\n<p>Whether to create a responsive web site or a mobile app is typically not an either\/or decision. A mobile app can be a great solution if your audience logs into your web site, spend a significant amount of time on your site, and access a lot of data. A mobile app can be optimized for the tasks a user is trying to accomplish, and an app can be quicker since only data, not user interface components, need to be downloaded onto the phone. But generally you\u0092ll need to make at least two separate mobile apps, one for iPhones and one for Android based phones.<\/p>\n\n\n\n<p>Even with a mobile apps in place you will likely still want a responsive web site. When you send emails with links to your website people will click through on any type of device. Someone browsing your site on their phone may bookmark a page for later viewing on their desktop or email the page URL to a colleague.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of Responsive Design<\/h2>\n\n\n\n<p>There are numerous advantages for utilizing a responsive web site design, both for your audience and your company. These include:<\/p>\n\n\n\n<ol><li>You are ready for the mobile world<\/li><li>Site menus and buttons can be sized for mobile interaction<\/li><li>Links can be bookmarked and shared across all devices<\/li><li>Better SEO since the same URLs are used<\/li><li>The web site display works on every device<\/li><li>Save money \u0096 one web site to create and maintain<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Implementing Responsive Web Design<\/h2>\n\n\n\n<p>Modifying your current web site to support adaptive design might be a significant development project depending on the complexity of your site and how it is implemented.<\/p>\n\n\n\n<p>For a new web site design project, making the design responsive should not add a huge increase in the cost or lead time of the site design. It does require additional design decisions, &nbsp;adaptive web design skills,&nbsp;and testing, but it is much less expensive than building separate mobile sites for other devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Action Item<\/h2>\n\n\n\n<p>If you have\u0092t yet implemented a mobile ready web site take a look at your website in your smart phone, borrow one if you need to. Hold the phone both vertically and horizontally. Read some of your copy and navigate through a few pages.<\/p>\n\n\n\n<p>Not happy with what you are experiencing? <span style=\"font-size: 18px;\"><a title=\"We&#039;re here to help\" href=\"https:\/\/www.premierpress.com\/contact\/\">Contact us<\/a><\/span>&nbsp;and we&#8217;ll be happy to review your web site and discuss what it will take to make it ready for a mobile world.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mobile first and more recently Multi-screen are hot topics for marketers these days. People &#8211; your customers and prospects &#8211; are not constrained to their computer when answering your emails, reading your blog, and researching competitive information. They bounce between their laptop or desktop computer and mobile phone throughout the day. 57% adults now own<\/p>\n","protected":false},"author":2,"featured_media":11624,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[38,54],"tags":[],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop.jpg",1402,1607,false],"thumbnail":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-150x150.jpg",150,150,true],"medium":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-262x300.jpg",262,300,true],"medium_large":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-768x880.jpg",640,733,true],"large":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-893x1024.jpg",640,734,true],"1536x1536":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop.jpg",1340,1536,false],"2048x2048":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop.jpg",1402,1607,false],"tile":["https:\/\/www.premierpress.com\/wp-content\/uploads\/2013\/11\/wf-full-laptop-800x800.jpg",800,800,true]},"uagb_author_info":{"display_name":"Tod Cordill","author_link":"https:\/\/www.premierpress.com\/author\/tod\/"},"uagb_comment_info":0,"uagb_excerpt":"Mobile first and more recently Multi-screen are hot topics for marketers these days. People &#8211; your customers and prospects &#8211; are not constrained to their computer when answering your emails, reading your blog, and researching competitive information. They bounce between their laptop or desktop computer and mobile phone throughout the day. 57% adults now own","_links":{"self":[{"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/posts\/6387"}],"collection":[{"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/comments?post=6387"}],"version-history":[{"count":0,"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/posts\/6387\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/media\/11624"}],"wp:attachment":[{"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/media?parent=6387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/categories?post=6387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.premierpress.com\/wp-json\/wp\/v2\/tags?post=6387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}