Ideal line length for content Date: 3 May 2003 Author: Russ Weakley Is there an ideal line length for content? To quote a passage from “Web Style Guide – Basic design principles for creating web sites”. The ideal line length for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. The challenge I’d like to design a site that uses optimal line lengths. Layout methods Most websites lay out content used either fixed width (set to an absolute measurement) or flexible width (set to a percentage of the screen, so that it scales in or out based on the browser window). Fixed-width columns can be used to set column widths that are ideal if users have their fonts set to browser defaults. Flexible-width columns also have problems. The second problem is placing the responsibility on the user. A solution The solution may be to set column widths using em‘s. width: 30em;
Columnas, anchos de línea y legibilidad Los principales motivos por los que los usuarios leen mejor unas páginas que otras dependiendo de su formato de párrafos. Los usuarios leen más rápido los textos con renglones de tamaño medio (60-80 cpl), que los de renglones cortos o largos. También son los de tamaño medio sus preferidos. Ello, junto a que sólo los lectores avezados leen mejor en dos columnas de texto que en una, sugiere que sigue siendo acertado utilizar el modelo de maquetación basado en tres columnas de elementos: barra de navegación, texto y opciones secundarias respectivamente. Un aspecto importante a la hora de maquetar los contenidos de un sitio web es decidir cómo se ha de presentar la información textual para que su comprensión y legibilidad sean máximas. Además, hay que poder presentar los textos en monitores de muy alta resolución y, al tiempo, hacerlo compatible con dispositivos tipo PDA. El ancho de línea Cada vez es más frecuente encontrar resoluciones de hasta 1900 pixels de ancho. Maquetar el texto
5 pasos para hacer tu web más legible Publicado el 29 septiembre 2010 por Daniel Rodríguez. En la web podemos hacer muchas cosas, pero una de las más frecuentes es leer. Tener un texto optimizado para la lectura es fundamental, no sólo por presencia en pantalla sino por eficiencia para el lector. 5 fáciles pasos Alineado horizontal: Cualquier párrafo de texto debería comenzar a una distancia del margen izquierdo de la página situada entre los 300px y los 600px. En definitiva, aplicando estos consejos en tu actual o próxima web conseguirás un texto más legible. Por último… ¿Que es eso de los ems? Realmente, los ems son la solución a todos los males relacionados con ajustar el tamaño de un texto para la web. Por cierto… ¿Conoces Typetester.org? Tags: Escribir para la web, Legibilidad Qué es el DOM El DOM es la estructura de objetos que genera el navegador cuando se carga un documento y se puede alterar mediante Javascript para cambiar dinámicamente los contenidos y aspecto de la página. DOM es una abreviatura de Document Objet Model. En español podríamos traducirlo por Modelo de Objeto de Documento, aunque en DesarrolloWeb.com nos hemos referido al DOM habitualmente con el nombre de jerarquía de objetos del navegador, porque realmente es una estructura jerárquica donde existen varios objetos y unos dependen de otros. Los objetos del DOM modelizan tanto la ventana del navegador como el historial, el documento o página web, y todos los elementos que pueda tener dentro la propia página, como párrafos, divisiones, tablas, formularios y sus campos, etc. Lo cierto es que quien quiera que haya realizado un poco de trabajo con Javascript, aunque este haya sido muy básico, ha tocado el DOM alguna vez.
Getting Started - Google Fonts This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy and paste the following HTML into a file: Then open the file in a modern web browser. Making the Web Beautiful! That sentence is ordinary text, so you can change how it looks by using CSS. You should now see a drop shadow under the text: And that's only the beginning of what you can do with the Fonts API and CSS. Overview You can start using the Google Fonts API in just two steps: Add a stylesheet link to request the desired web font(s): Style an element with the requested web font, either in a stylesheet: or with an inline style on the element itself: For a list of fonts you can use, see Google Fonts. Specifying font families and styles in a stylesheet URL For example, to request the Inconsolata font: For example:
Web Form Design Awards Close Complete List of Rules JotForm Web Design Contest Rules 1. DESCRIPTION OF THE CONTEST: The JotForm Web Form Design Contest is designed to encourage and inspire anybody to begin participating in building and designing forms with JotForm. Judges as selected by JotForm will be from the JotForm community, JotForm team, and select designers. 2. 3. 4. 5.1 Sign in to your JotForm Account. 5.2 Visit the JotForm Form Designer landing page to get an idea what you can do with it. a. b. 6. (1) Design (2) Functionality (3) Ease of use Each form design determined by the judges to be successfully completed will be deemed a completed form design. In the event that no completed form designs are received, no prizes will be awarded. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.
Page contact : conseils et ressources webdesign Une page de contact représente souvent la porte d’entrée d’un utilisateur chez une marque. Pour maximiser la conversation et offrir la meilleure expérience possible, je vous propose de (re)-découvrir quelques bonnes pratiques. Cela semble évident mais un formulaire de contact réfléchi, fonctionnel et original vous permet d’augmenter significativement le nombre de demandes qualifiées. Bien définir le rôle de la page et du formulaire : Trouver des prospects, des contacts ? L’utilisateur avant tout : Aujourd’hui de simples champs de formulaires ne suffisent plus. Pour inciter les internautes a compléter vos champs, accompagnez-les et récompensez-les à chaque étape réussie. Autre chose, si votre formulaire doit comporter plusieurs étapes, utilisez des barres de progression, des onglets, voir un accordéon. Quelques exemples concrets : Les exemples ci-dessous démontrent bien qu’il est possible de faire une page ou un formulaire de contact efficace et original. Sweetscoops The Chedi Andermatt Kinhr
10 Tips for Designing with Type on a Photo One of the best techniques to have in your toolkit is designing with type on and around images. But it can also be one of the toughest concepts to pull off successfully. You have to have the right photo, a good eye for typography and know what you want to accomplish to make the most of adding type to an image. If you feel like you are ready to take on the challenge, here are 10 tips for making it work: 1. Text has to be readable to be successful. Contrast can also refer to the size of text in relationship to what is happening in the image. 2. Sometimes it just works that text becomes – or is – part of the image you are working with. 3. Working with the visual flow of an image is one of the most important tips when it comes to working with text and photos. In terms of visual flow, look for spaces for text where the subjects of the image would look. 4. One of the simplest tools you can have in your kit is the ability to blur part of an image. 5. 6. 7. 8. 9. 10.
Google fonts : tests de lisibilité Avant d’utiliser les polices proposées par Google dans le Google font directory, j’ai décidé de les tester une par une, sur OS-X et sur Windows afin d’évaluer leur lisibilité. Cet article propose un récapitulatif des résultats sous forme de pdf téléchargeable gratuitement (Français/Anglais) ainsi qu’une analyse détaillée… Webdesign et typographie 2010 aura incontestablement été l’année de la typographie sur le web. Alors qu’il était déjà difficile d’utiliser intelligemment les polices de la petite liste dite « web-safe », celà devient carrément compliqué de s’y retrouver sans être typographe avec ces milliers de polices à portée de main… Sachant qu’en rêgle générale, plus nous avons de choix possibles, plus nous avons du mal à choisir, alors autant revenir aux bases pour faire des choix cohérents. Evaluation de la lisibilité J’ai donc décidé de me lancer dans une petite série de tests basiques pour évaluer la lisibilité des polices proposées par Google dans son « Google font directory ».
Qu'est-ce qu'un intégrateur web ? (ou développeur web front-end) Vous vous demandez ce que peut bien être un intégrateur web ? À vrai dire, vous n’avez pas à en rougir ! Car ce métier est très récent (quelques années), et il est amené à évoluer au même rythme que les standards et technologies du web. Pour bien situer les rôles de chacun dans le processus de création d’un site internet, voyons comment la chaîne de production au sein d’une agence web peut fonctionner.NB : Une agence web est une entreprise dédiée à la production de sites internet. Chaîne de production Les étapes 1. Nous retrouvons le wireframer ou prototyper. 2. Il va produire une maquette graphique à l’aide du logiciel Photoshop. 3. Il dispose de deux outils complémentaires pour produire la maquette fonctionnelle du site : le wireframe et la (ou les) maquettes graphiques. 4. Il va utiliser la maquette fonctionnelle comme squelette visuel et va «injecter» les contenus réels et les fonctionnalités du site. Les grandes missions de l’intégrateur web Un intégrateur web a plusieurs missions.
Conceptos básicos: Direcciones electronicas Subir ¿Qué son? Las direcciones electrónicas son la forma de ubicar unívocamente a cada persona y computadora en la Red. Son únicas: no puede haber dos iguales en el mundo, porque los mensajes se perderían. Existen tres tipos: las de computadoras (llamadas dominios), las de personas (casillas de E-mail) y las de recursos (por ejemplo, una página de la Web). ¿Cómo funcionan realmente? Las direcciones electrónicas que se conocen y utilizan a diario han sido diseñadas para el uso de los humanos: su formato intenta adecuarse al hecho de que es más fácil recordar palabras que números. La información que circula por Internet se basa en la dirección IP de cada computadora de destino. Direcciones de Computadoras Todo recurso de Internet está alojado en una computadora servidor (server o host) que tiene asignada una o varias direcciones electrónicas. El esquema básico sería, Dominio=computadora.organización.tipo.país Por ejemplo: www.arrakis.es Computadora Organización Tipo .com .edu .gov .mil .net .org .web