Consejos primeros pasos creación página web (2ª parte)

   Sigo aprendiendo pasito a pasito. No tengo mucho tiempo (trabajo 10 horas al día... de momento) pero algo avanzamos. En este post, para los principiantes como yo, claro, os doy unos consejitos sobre el diseño.

   Una de las cosas más importantes del diseño de una página web es que sea lo más accesible a la mayoria de las personas, y visible en la mayoría de monitores y navegadores. Tenéis que saber que los navegadores interpretan a su modo el código y que, dependiendo de la resolución de la pantalla, se verá también muy diferente. Yo, por ejemplo, tengo el monitor con una resolución de 1280x1024 pero mucha más gente tiene la resolución en 1024x768. Así que pongamos en nuestros monitores esta última resolución y, si nuestro monitor es cuadrado, vamos a procurar que el contenido de la página ocupe, casi (dejad algo de margen), el ancho de la pantalla. Os doy este consejo porque, si trabajáis el diseño en una resolución alta, aquel que tenga la resolución más baja tendrá que ir haciendo un scroll a derecha e izquierda, además de arriba y abajo, y todo se verá demasiado grande. Así que cuidado con las imágenes y el tamaño del texto.

   El siguiente consejo es sobre el texto. Existe una diferencia importante cuando lo interpreta (el texto) un navegador como firefox o el chrome o el IE (Internet Explorer), en estos dos últimos se vé la fuente bastante más pequeña. Una buena práctica es poner la etiqueta 'body' en nuestro css con el valor de 'font-size' al 100%
     body {font-size:100%}

Y todos los valores siguientes del 'font-size' en nuestros 'id' 'class' 'p' 'a' etc, etc... en unidades de medida relativas lo mejor en 'em' nada de 'px' ejemplo:
     #contenido{font-size:0.8em}

     h1{font-size:2em}

Con esto conseguiremos que el texto se vea lo más aproximado posible en la mayoría de monitores y de navegadores.
No obstante, yo por lo menos y en mi monitor, y siguiendo los pasos anteriores, sigo viendo el texto más pequeño en el chrome y en  el IE. Así que incluyo la siguiente función (de jQuery):
      if ($.browser.msie || $.browser.webkit) {$("html").css("fontSize","120%")}

Con esto cambio el 'font-size' del 'html' al 120% si el navegador que se está usando es IE (msie) o chrome (webkit).

O, si no,  disminuimos el tamaño de la fuente de Firefox con el siguiente código:
     if ($.browser.mozilla) {$("html").css("fontSize","90%")};

   Aunque el mejor consejo es probrar la página subida en el servidor y ver que tal se vé. Puede cambiar el probarla en el ordenador y en el servidor. Y después decidir cuál será el fontsize de cada una.

   Otro consejo es hacer un reset del css cuya función es la de minimizar, en la medida de lo posible, las múltiples diferencias visuales que se dan a la hora de mostrar una misma página web, en diferentes navegadores. Que podría ser algo como esto:
     html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

:focus {
    outline: 0;
}
ol, ul {
    list-style: none;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

No obstante, si buscáis en google encontraréis muchos por internet.

   Y, por último, el problemón de IE6, que todavía hay gente que lo tiene. La mayoría ya no programa pensando  en el IE6 y lo deja por imposible. Pero, si lo queréis intentar, existe un css universal en google code que facilita un poco el desarrollo para él. De momento eso es todo amigos.