{"id":56994,"date":"2022-10-18T03:01:05","date_gmt":"2022-10-17T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56994"},"modified":"2022-10-18T08:36:19","modified_gmt":"2022-10-17T22:36:19","slug":"responsive-web-design-landing-page-incarnation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-incarnation-tutorial\/","title":{"rendered":"Responsive Web Design Landing Page Incarnation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Responsive Web Design Landing Page Incarnation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/responsive_more.jpg\" title=\"Responsive Web Design Landing Page Incarnation Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Web Design Landing Page Incarnation Tutorial<\/p><\/div>\n<p>Along the same &#8220;Responsive Design&#8221; themes of <a title='Responsive Web Design Primer Tutorial' href='#rwdpt'>Responsive Web Design Primer Tutorial<\/a>, we stumbled upon the excellent <a target=_blank title='W3schools useful page' href='https:\/\/www.w3schools.com\/w3css\/tryit.asp?filename=tryw3css_templates_start_page&#038;stacked=h'>W3Schools Responsive Design Based Start Page Idea<\/a> which inspired us to retry RJM Programming Landing Page thoughts &#8230;<\/p>\n<ul>\n<li>separating out totally &#8220;uninvolved&#8221; Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials &#8230; from &#8230;<\/li>\n<li>any other call of any complexity or having a query string etcetera, reverting to the &#8220;old way&#8221;<\/li>\n<\/ul>\n<p> &#8230; new paradigm?   So, why keep the old way?  Well, we packed the &#8220;old way&#8221; with content rich functionality, and do not want to ditch that yet, but maybe over time?!<\/p>\n<p>You&#8217;ll see, though, using the new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.php_GETME\">index.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\">Responsive Design Landing Page incarnation<\/a> &#8230;<\/p>\n<p><iframe style='width:100%;height:2500px;' src='\/\/www.rjmprogramming.com.au\/'><\/iframe><\/p>\n<p> &#8230; how the clutter melts away like a hot knife through <strike>margarine<\/strike>butter!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-incarnation-tutorial\/'>Responsive Web Design Landing Page Incarnation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rwdpt'>Previous relevant <a target=_blank title='Responsive Web Design Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-primer-tutorial\/'>Responsive Web Design Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/?responsive=yes\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Responsive Web Design Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/responsive\/earlydays.gif\" title=\"Responsive Web Design Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Web Design Primer Tutorial<\/p><\/div>\n<p>Today we wanted to tip our toes into the vast subject of <a target=_blank title='' href='https:\/\/en.wikipedia.org\/wiki\/Responsive_web_design'>&#8220;responsive web design&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Responsive_web_design'><p>\nResponsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]\n<\/p><\/blockquote>\n<p> &#8230; coming at it from the idea <a target=_blank title='Can a responsive shell webpage host a non-responsive iframe?' href='https:\/\/www.google.com\/search?q=can+a+responsive+shell+webpage+host+a+non-responsive+iframe&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=can+a+responsive+shell+webpage+host+a+non-responsive+iframe&#038;aqs=chrome..69i57.19412j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>&#8220;Can a responsive shell webpage host a non-responsive iframe?&#8221;<\/a><\/p>\n<p>In turn this got us to the <a target=_blank title='Excellent ideas, thanks' href='https:\/\/stackoverflow.com\/questions\/30595948\/is-it-possible-to-load-a-responsive-iframe-within-a-non-responsive-site'>excellent ideas of this webpage<\/a> which we&#8217;ll try out for a while &#8230;<\/p>\n<ul>\n<li>honing in on our &#8220;Landing Page and friends&#8221; set of unresponsively designed webpages &#8230;<\/li>\n<li>honing in on iPhone sized devices (ie. not iPads nor laptops) &#8230;<\/li>\n<li>host web browser address bar calls of &#8220;Landing Page and friends&#8221; set of unresponsively designed webpages within a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/responsive\/caller.html_GETME\" title=\"caller.html\">caller.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/responsive\/caller.html\">responsively web designed shell<\/a> supervisory webpage and start using some of that &#8230;<br \/>\n<table>\n<tr>\n<th>Unresponsive Landing Page<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe style='width:100%;height:800px;' src='\/\/www.rjmprogramming.com.au\/index.htm?yes=yes'><\/iframe>\n<\/td>\n<tr>\n<tr>\n<th>Responsive Shell around Unresponsive Landing Page<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe style='width:100%;height:800px;' src='\/\/www.rjmprogramming.com.au\/?yes=yes'><\/iframe>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; as food for <font size=1>(your)<\/font> thought &#8230;<\/p>\n<p><code><br \/>\n   function bodonl() {<br \/>\n     var wasih=document.body.innerHTML;<br \/>\n     var huhd=document.getElementById('Container').getBoundingClientRect();<br \/>\n     var pb=0;<br \/>\n     if (eval('' + huhd.height) &gt; eval('' + huhd.width)) {<br \/>\n     isportrait=true;<br \/>\n     pb=eval(eval('' + huhd.width) \/ eval('' + huhd.height) * 100.0);<br \/>\n     nowih='&lt;div id=\"Container\" style=\"padding-right:' + pb + '%; position:relative; display:block; height: 100vh;\"&gt;&lt;iframe' + wasih.split('&lt;iframe')[1].split('&lt;\/div&gt;')[0].replace('\" frameborder', fname + '\" style=\"position:absolute; top:0; left: 0;\" frameborder') + '&lt;\/div&gt;';<br \/>\n     \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     \/\/document.getElementById('myvis').setAttribute('initial-scale','0.5');<br \/>\n     \/\/}<br \/>\n     } else {<br \/>\n     isportrait=false;<br \/>\n     pb=eval(eval('' + huhd.height) \/ eval('' + huhd.width) * 100.0);<br \/>\n     nowih='&lt;div id=\"Container\" style=\"padding-bottom:' + pb + '%; position:relative; display:block; width: 100%;\"&gt;&lt;iframe' + wasih.split('&lt;iframe')[1].split('&lt;\/div&gt;')[0].replace('\" frameborder', fname + '\" style=\"position:absolute; top:0; left: 0;\" frameborder') + '&lt;\/div&gt;';<br \/>\n     }<br \/>\n     document.body.innerHTML=nowih;<br \/>\n   }<br \/>\n<\/code><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d53069' onclick='var dv=document.getElementById(\"d53069\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/design\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53069' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56994' onclick='var dv=document.getElementById(\"d56994\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/webpage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56994' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Along the same &#8220;Responsive Design&#8221; themes of Responsive Web Design Primer Tutorial, we stumbled upon the excellent W3Schools Responsive Design Based Start Page Idea which inspired us to retry RJM Programming Landing Page thoughts &#8230; separating out totally &#8220;uninvolved&#8221; Landing &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-incarnation-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[281,318,576,652,680,997,2644,1991,1319,1418],"class_list":["post-56994","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-css","tag-design","tag-html","tag-javascript","tag-landing-page","tag-programming","tag-responsive","tag-responsive-design","tag-tutorial","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56994"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56994"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56994\/revisions"}],"predecessor-version":[{"id":57002,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56994\/revisions\/57002"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}