Pues mira inicialmente te quiero felicitar por que decidir no hacer uso de frameworks es una buena iniciativa, para aprender más, hacer sistemas de calidad, hacer las cosas por tú mismo. y sobre todo
hacer una página que no tenga código que jamas vas a usar, pues esa es la desventaja de un framework, habrá muchas cosas que no necesitarás y se cargarán innecesariamente en tu site..
generalmente hacer una página responsive solo consta de una buena maquetación, en realidad no es usar un center y ya!, de hecho hoy en día un buen maquetador nisiquiera las usa al igual que los <br/> para saltar elementos, las <tables> para mostrar contenido, pues su uso se ha dejado extrictamente para cuando deseas mostrar listas de datos o cosas así, aunque ya algunos prefieren usar <div> <span> u otras etiquetas demás, o <iframes> para recargar contenido a no ser que sea de otro dominio.
La manera mas flexible y fácil de usar es:
@media() de CSS
con esta aplicas los estilos en relación al tamaño de la pantalla de un dispositivo..
Claramente también existirá la posibilidad de que necesites usar javascritp para algunas cosas aunque con css puedes lograr casi todo lo más necesario, puedes ocultar o mostrar cosas cuando lo desees usando @media,
EJEMPLO: a continuación te doy un html sencillo con un texto que cambia de color según sea el tamaño de la ventana, así que correlo, redimenciona el tamaño del navegador y observa los cambios... Éxitos! :D
<html>
<head>
<title>
Responsive preview
</title>
<style>
span.text{
font-family: sans-serif;
color: #000;
font-size: 30px;
}
@media(max-width: 1200px){
span.text{
color: red;
}
}
@media(max-width: 800px){
span.text{
color: green;
}
}
@media(max-width: 350px){
span.text{
color: blue;
font-size: 20px; /** Generalmente tambien debes ajustar muchas veces el texto a tamaños más pequeños. */
}
}
</style>
</head>
<body>
<span class="text">Responsive Preview</span>
</body>
</html>