Yes.
That’s exactly what I have been trying to tell you, RWD done properly will not compromise your full size desktop design.
I find it easier to create a responsive site from scratch, but it’s quite possible to convert a site, which will be quicker if it is of any significant size.
In many cases it’s just altering the css, though there may be instances where you will want to alter the html structure a little, depending on how it was done.
I think the best approach it to take it one element at a time, working through each until all issues are gone.
That’s an advantage, you just need to alter the rules you apply to make the site fluid, not rigid.
Like I mentioned before, instead of width: 960px; say max-width: 960px; on a screen bigger than that it will appear no different, but on one smaller it will be 100%, not 130% or 180% width. Eg:-
body {
background: #fff;
margin: 0 auto;
max-width: 960px;
width: 95%;
}
Your main wrapper may look something like like that, the % width make the smaller screens have a little bit of the background showing at the edges, if you want that, that is.
Then test it in the browser by dragging the left edge in and out to make the window narrower. The aim is to never see a horizontal scroller, and keep the site looking good and readable at any size, down to a sensible minimum.
This could be what they mean.
When you have that page with green bits instead of red bits, you have cracked it.
The fisrt thing you need it the viewport meta tag:
<meta name=viewport content="width=device-width, initial-scale=1" />
Then change the css to less rigid, more fluid rules. For example the header mentioned before, which had no content, just a background, could be something like:
header {
background: #666 url(header-image.jpg) center no-repeat;
background-size: 100%;
padding-bottom: 30%;
}
The padding-bottom is replacing the height setting, it uses are more fluid % value rather than fixed pixels allowing it to scale down on smaller screens. The % value would be adjusted to create the correct aspect ratio for the image. I left out any width setting as it will naturally fill its parent container which has a max-width set.
And thirdly, the chances are at some point the design/layout just won’t work at some size, then it’s time add a media query, Eg:
@media screen and (max-width: 600px) { }
This is a game changer, everything inside the brackets applies only to screens less than 600px (or whatever value you set), so you can change the rules for smaller screens, adding new rules or overriding ones already set.
) But I thought about it and realized it was a silly question, because it’s an image, for one thing, that repeats across the screen. Duh!