Responsive design for my website that I already made in my 1920x1080 monitor

StackOverflow https://stackoverflow.com/questions/23596011

Question

's the website I'm trying to design using Dreamweaver CS6 right now.

When I was positioning and aligning everything, I basically previewed everything full-screen with Chrome in my 1920x1080 resolution, and used a lot of hard pixel values instead of percentages for div sizes and image sizes, etc. But now, I am afraid and pretty sure that the whole page breaks severely if you look at it from a smaller resolution or a smaller monitor? In all views like Desktop, Tablet and Phone views within Dreamweaver, everything breaks severely by overlapping with each other, etc.

Now, I am going to try to go back and lay everything out more flexibly, wrapping things around with divs and media queries, etc, but it's been kinda overwhelming. How should I start? Do I need to use Fluid Grid layout? Perhaps it's easier if I start a new project with Fluid Grid layout and copy everything over?

Right now, my plan of attack is to just divide that index html into 3 divs (1 for top-left, 1 for top-right and 1 for the main content) and start from there.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Terry Bu - Portfolio Website</title>
<link href="_css/main.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="_css/mquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_javascript/sound-mouseover.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
</head>

<body>

<div id="kyoto_image">
<img class="bottom" src="_images/kyoto_crossfade.jpg" width="350" height="450">
<img class="top" src="_images/kyoto.jpg" width="350" height="450">
</div>

<div id="logo">
<img class="bottom" src="_images/logo_remake_crossfade.jpg" width="290" height="140">
<img class="top" src="_images/logo_remake_nocross.jpg" width="290" height="140"> 
</div>

<div id="hello">
  <p>Hi, I'm Terry Bu, an aspiring web/app developer &amp; programmer residing in Astoria, NY. </p>
  <p>Thank you for visiting. <em>Dreamweaver CS6 was used for the design of this website. </em></p>
</div>

<nav>
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">HOME</a>    </li>
    <li><a href="#" class="MenuBarItemSubmenu">PORTFOLIO</a>
      <ul>
        <li><a href="javascript.html">JavaScript</a></li>
        <li><a href="android.html">Android</a></li>
        <li><a href="java.html">Java</a></li>
        <li><a href="ruby.html">Ruby on Rails</a></li>
      </ul>
    </li>
    <li><a href="http://terrybu.blogspot.com" target="blank">BLOG</a>    </li>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="misc.html">MISC.</a></li>
  </ul>
</nav>

<div id="connect" class="rotate">
<span class="sns">got Social? </span>
<a href="http://www.facebook.com/schooloftruth" target="_blank"><img src="_images/icon_facebook.png" width="45" height="45" alt="terry fb"></a><a href="http://www.linkedin.com/in/terrybu" target="_blank"><img src="_images/icon_linked.png" width="45" height="45" alt="terry linkedin"></a><a href="http://www.quora.com/Terry-Bu" target="_blank"><img src="_images/icon_quora.png" width="45" height="45" alt="terry quora"></a><a href="https://twitter.com/burownrice/" target="_blank"><img src="_images/icon_twitter.png" width="45" height="45" alt="terry twitter"></a>
</div>

</div>

<div class="contentDiv">

<div id="CollapsiblePanel1" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel1.open(); return false; " >TECHNOLOGY</div>
  <!--onmouseout="CollapsiblePanel1.close(); return false;"-->

  <div class="CollapsiblePanelContent">
    <p>As impressed as we already are with the fast advancement of technology, with inventions like Google, Facebook, Twitter and smartphones changing  world culture, I believe we have only scratched the surface. </p>
    <p>Technology will continue to be the glue that binds information and knowledge across all areas including education, science, public health, government, and private sector.</p>
    <p>There is little doubt that the world's need for  engineers, developers and programmers will continue to rise exponentially within the next several decades.</p>
    <br>
  </div>
</div>
<div id="yourchoice">Click, Hover, Your Choice</div>
</div>

<div id="CollapsiblePanel2" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel2.open(); return false;" >EDUCATION</div>
  <div class="CollapsiblePanelContent"><p>I am self-taught in front-end web design (HTML,CSS, Dreamweaver) and in the basics of Java, Eclipse (Android App Development), Ruby and Python.</p>
  <p>I graduated with a B.S. in Business Administration with a minor in Japanese from UNC - Chapel Hill. </p>
  I am still in the process of teaching myself JavaScript, Ruby on Rails, PHP, MySQL and other skills necessary to build a powerful, functioning web application. 
      <br>
      <br>
  </div>
</div>
</div>

<div id="CollapsiblePanel3" class="CollapsiblePanel" >
  <div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel3.open(); return false;">Work Experience</div>
  <div class="CollapsiblePanelContent">
  <p>I come from a background in marketing and sales. I've always had an interest and passion for studying technology, and recently made the commitment to switch fully into the world of computer programming and web development in early 2014. </p>
        <p>As for my technical work experience, I worked as a B2B Account Executive in the IT solutions industry, working closely with Cisco networking. I also have experience working as an Online Community Manager for a small business.</p>
<p>Please refer to <a href="http://www.linkedin.com/in/terrybu" target="_blank">http://www.linkedin.com/in/terrybu</a> for more detailed information on my work experience.</p>
    <br>
  </div>
</div>
</div>

<div id="CollapsiblePanel4" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel4.open(); return false;">Vision</div>
  <div class="CollapsiblePanelContent">
<p>Emerging resources available for self-education have allowed many people including myself to pursue new careers in technology. To give back to the people who made this possible, I want to help create free, high-quality self-education resources for people all over the world, following examples like Khan Academy. To ensure steady progress in future of society, I believe more knowledge should be free and accessible.</p>
<p>I also hope to gain enough expertise in coding so that I can impact a variety of different areas like public health, science, local government, education and nonprofit through channels like Github and Code for America. </p>
<br>
</div>
</div>
</div>
<div id="leftharsh">
<img src="_images/leftharsh.png" width="37" height="30">
</div>
<div id="leftarrow"><img src="_images/left-diag.png" width="37" height="30"></div>
<div id="rightarrow">
<img src="_images/right-diag.png" width="37" height="30">
</div>
<div id="rightharsh">
<img src="_images/rightharsh.png" width="37" height="30">
</div>

</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
</script>

<audio>
<source src="_sound/click.mp3"></source>
<source src="_sound/click.ogg"></source>
</audio>
<div id="sounddiv"><bgsound id="sound"></div>
<script type="text/javascript">
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
</script>

</div>
</body>
</html>

@charset "utf-8";
@import url("../webfonts/gotmilk/stylesheet.css");


/*#wrapper{
 width:90%;
 margin:20px auto;
 max-width:960px;
}*/


/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
    content:"";
    background: rgba(0,0,0,.7);
    position:fixed;
    display:block;
    z-index:5;
}

/* ...and position them! */
html:before{
    height:10px;
    left:0;
    right:0;
    top:0;
}
html:after{
    width:10px;
    top:0;
    right:0;
    bottom:0;
}
body:before{
    height:10px;
    right:0;
    bottom:0;
    left:0;
}
body:after{
    width:10px;
    top:0;
    bottom:0;
    left:0;
}

#yourchoice {
    position: absolute;
    left: 45%;
    top: 50%;
    margin-top: 20px;
    max-width: 300px;   
    max-height: 24px;
    z-index: 7;
    font-family: gotmilk;
    font-size: 36px;
}

.rotate img {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

h1 {
    font-family: gotmilk;
    font-size: 50px;
    color: rgba(0,0,0,1);
}



#connect{
    position: absolute;
    top: 10px;
    right: 5px;
    width: 330px;
    z-index: 6;
}

span.sns{
    font-family: gotmilk;
    font-size: 48px;
}

#android_images {
    position: absolute;
    top: 15px;
    left: 20%;  
    float: right;
}

#android_images img{
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#android_images img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
}

#kyoto_image {
    position: absolute;
    top: 15px;
    left: 25%;  
    float: right;
}

#kyoto_image img {
    position: absolute;
    left: -46px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0,0,0,1);
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    top: 31px;
}

#kyoto_image img.top:hover {
  opacity:0;
}

#logo {
    position: absolute;
    left: 60%;
    top: -5px;
    width: 282px;
    height: 134px;
    z-index: 1;
}

#logo img {
    position: absolute;
    left:0;
    top: 60px;
    width: 282px;
    height: 134px;
    z-index: 1;
   opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#logo img.top:hover {
  opacity:0;
}

#hello {
    position: relative;
    top: 185px;
    left: 50%;
    margin-left: 30px;
    width: 700px;
    height: 102px;
    z-index: 3;
    text-align: left;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.4);
    font-size: 19px;    
}
nav {
    position: relative;
    left: 48%;
    top: 187px;
    width: 800px;
    height: 39px;
    z-index: 2;
    background-color: #FFFFFF;
    text-align: right;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(102,102,102,1);
}



#technology {
    position: absolute;
    top: 542px;
    left: 276px;
    width: 411px;
    max-height: 65px;
    z-index: 5;
    overflow: hidden;
    -webkit-transition: max-height .5s ease;
    -moz-transition: max-height .5s ease;
    -ms-transition: max-height .5s ease;
    -o-transition: max-height .5s ease;
    transition: max-height .5s ease;
}
#education {
    position: absolute;
    top: 545px;
    right: 300px;
    width: 411px;
    max-height: 400px;
    z-index: 5;
}


#career {
    position: absolute;
    left: 902px;
    top: 912px;
    width: 752px;
    max-height: 400px;
    z-index: 5;
    background-color: rgba(153,153,153,.5);
    border-radius: 0px 30px 0px 30px;
}
#vision {
    position: absolute;
    left: 124px;
    top: 1189px;
    width: 584px;
    max-height: 400px;
    z-index: 6;
}
#video {
    position: absolute;
    top: 55%;
    left: 30%;
    overflow-style: auto;
    overflow: hidden;
    width: 600px;
}
#mapCanvas {
    position: absolute;
    top: 55%;
    left: 30%;
    border: 1px solid rgba(0,0,0,1);    
}

#contactTerry{
    position: absolute;
    left: 50%;
    margin-left: 50px;
    top: 51%;
    margin-top: 25px;
    font-family: "MS Serif", "New York", serif;
    font-size: 36px;
    font-style: normal;
    font-weight: bolder;
    text-shadow: 2px 2px 2px rgba(214,214,214,1);
    overflow: hidden;
    width: 870px;
}


#js1 {
    position: relative;
    top: 350px;
    margin-left: 35%;
    width: 800px;
    background: rgba(0,0,0,1);
    text-align: left;
    overflow: hidden;
    margin-bottom:: -5px;
}

#gaptext {
    position: relative;
    top: 315px;
    margin-left: 50%;
    margin-top: 50px;
    margin-bottom: -70px;
    font-weight: bold;
    font-size: large;
}

#js2 {
    margin-top: -5px;
    position: relative;
    top: 400px;
    margin-left: 35%;
    width: 800px;
    height: 600px;
    background: rgba(0,0,0,1);
    border: rgba(0,0,0,1), solid, 2px;
}

#codeAcademy{
    color: rgba(255,255,255,1);
    text-align: center;
    padding: 10px;
    overflow: hidden;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;

  border-color: red;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
    box-shadow: 0 0 222px red;

    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px; 
    margin-left: -100px;
}

#earth {
    position: absolute;
    top: 0%;
    left: 25%;
    /* Style your earth */
     height: 50px;
    width: 50px;
    margin-left: -25px;
    margin-top: -25px;
}

#earth-orbit {
    /* For Section #2 */
    position: absolute;
    top: 50%;
    left: 50%;

    width: 500px;
    height: 500px;
    margin-top: -250px;
    margin-left: -250px;

    border-width: 1px;
    border-style: dotted;
    border-color: white;
    border-radius: 80%;

     -webkit-animation: spin-right 10s linear infinite;
     -moz-animation: spin-right 10s linear infinite;
      -ms-animation: spin-right 10s linear infinite;
       -o-animation: spin-right 10s linear infinite;
          animation: spin-right 10s linear infinite;
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }

#apDiv1 {
    position: absolute;
    left: 46%;
    top: 510px;
    width: 196px;
    height: 24px;
    z-index: 7;
}
#leftharsh {
    position: absolute;
    width: 23px;
    height: 27px;
    z-index: 8;
    left: 20%;
    top: 517px;
}
#leftarrow {
    position: absolute;
    width: 23px;
    height: 27px;
    z-index: 8;
    left: 40%;
    top: 517px;
}
#rightarrow {
    position: absolute;
    width: 23px;
    height: 27px;
    z-index: 8;
    left: 60%;
    top: 517px;
}
#rightharsh {
    position: absolute;
    width: 23px;
    height: 27px;
    z-index: 8;
    left: 80%;
    top: 517px;
}
Was it helpful?

Solution

I'd highly suggest starting over. It seems you're doing the site for learning anyway, so redoing the site over with a view towards making it responsive would be a more valuable learning experience than trying to force fit existing design.

I generally find it more difficult to change the design of non-trivial layout from fixed-width design to responsive design than to start a blank paper and thinking about responsiveness from the start; and for beginners, if you try to start converting a fixed-width to fluid layout, you might end up with just tweaking properties constantly with no idea why this works but not that and then finding that neither actually works, and that would hinder your learning.

OTHER TIPS

My suggestion, like Lie Ryan said, is start over. I know, that sounds terrible after all the work you've put it already, but trust me - trying to tweak a bad foundation will ultimately lead to more and more unnecessary complexity, and by the end you will be far more overwhelmed, and stuck with a rickety website, that may look ok, but one too many characters in an <h1> and the whole thing falls apart.

I compare this kind of situation to designing a room. You start setting everything up and then you realize that the bed is positioned in such a way that you can't fit your desk, and you remember that you wanted a piano in here somewhere, and you need a spot to do your yoga, and you can't reach the dry erase board on the wall because the dresser is in the way, etc, etc.

Option one is to go in there and start moving stuff around; bring in the piano and try to squeeze it in, lay your yoga mat down so that you know how much space it needs and try to work around it, bring in an easel for the dry erase board so it's not behind the dresser. In other words, trying to hack the design into working with what you already have. But at this point the room is so cluttered you can barely move.

Option two is start over. Take everything out of the room, until it is empty and bare. Now you can look at the empty room, then look at all the stuff that will go in, and come up with a much better design, taking into account all the things you overlooked the first time around. Bringing in one item at a time is much easier than trying to clean up a cluttered space.

The same goes for your site. Start over. Design it again, this time knowing all the things that you learned during version 1 - I promise, your code will be cleaner, your site will look and function better, and future maintenance/updates will be much easier.

When (if) you do start your design over, start with the smallest screen possible in mind. Resize your browser window to 320 px and make your site look good like that. Then expand the window until the site falls apart - add a breakpoint and design that to look right. Then expand again until the site breaks. Then add a breakpoint and design that. Keep going until you have a fully responsive design.

I read an article recently called 7 Habits of Highly Effective Media Queries. In it, the author quotes Stephen Hay with a statement that I think sums up good responsive design, and emphasizes how simple it really is:

"Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!" - Stephen Hay

Final thought: try to use and learn as much straight CSS as you can. WYSIWYG editors are nice, and convenient, but you will be far better served if you know the code.

you'd better start over. imagine you are an architect and you know you want sliding walls in the house you are building but you first build the house with fixed walls. how wrong is that? that's how i see your website on my normal sized monitor: http://prntscr.com/3iirfk

building a responsive website is not something you put on top of a fixed-width one. it's something you start your project with.

start with a fluid grid, add breakpoints when your design "cracks" and read a lot of articles and best practices for responsive webdesign.

i suggest you read EVERYTHING this guy wrote: http://bradfrostweb.com/

good luck!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top