Archives des tags : maquette

Pas encore de description pour le tag maquette. Suggérez à l'administrateur du site de d'y remédier.
Conception de site web

Notes de lecture : « Responsive Design Patterns »

Quelques années après avoir sorti Responsive Web Design, Ethan Marcotte déroule sa pensée concernant la conception web avec Responsive Design Patterns. Il ne s’agit plus de penser la page web, mais de l’imaginer comme autant de modules apparaissant lorsqu’on en a besoin. La conception web monolithique doit laisser la place à une conception modulaire. La place de chaque élément devra être soigneusement pesée en fonction de son intérêt selon le contexte de l’utilisateur. Est-il face à un grand écran avec une souris ou est-il en train de marcher en regardant son smartphone ? →

Plugin jQuery

DyLay — Tri et maquette dynamiques avec jQuery

DyLay est un plugin jQuery de 1ko seulement créé par Sylvain Gougouzian (@GouZ) dont les fonctionnalités risquent de vous ébouriffer les yeux. DyLay permet de créer des maquettes dynamiques selon les actions de l’utilisateur. Il est possible d’animer la réorganisation de blocs de contenus selon des critères de tris avec les méthodes position, filter, sort et reverse. →

Intégration web

Notes de lecture : « Responsive Web Design »

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed». →

Design & Graphisme

L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement. →

Intégration web

Et si Photoshop permettait de tester des maquettes fluides ?

Si c’était possible techniquement, est-ce qu’on s’amuserait à faire des rendus différents pour le plaisir ? Réponse : NON. Cette interrogation de @mariejulien suite à la publication de l’article Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur ? et cette réponse lapidaire se poursuivent par la réflexion suivante : la norme est donc bien d’avoir un contenu identique, et le reste n’est qu’argument fallacieux à une impossibilité technique. Question à laquelle j’ai répondu en bottant un peu en touche en disant que le monde de l’imprimé et du web ne répondaient pas aux même lois de la physique. →

HTML & CSS

display: table et display: table-cell pour faire une mise en page web ?

Après la lecture du livre CSS avancées — Vers CSS3 et HTML5, je me suis amusé avec les propriétés de rendu en tableau avec CSS (à partir de la page 122 pour ceux qui ont l’ouvrage sous les yeux). Pour m’entrainer à utiliser ces nouvelles propriétés comprises par tous les navigateurs modernes et à partir de IE8 pour Internet Explorer, je me suis fixé comme objectif de réaliser une mise en page du type de ce que l’on fait généralement à base de `float: left` et de `margin-right` pour obtenir des colonnes séparées par des gouttières. Bref, du classique de chez classique. →

Le petit journal du web

Lorem Pixum — Images de placement gratuites en Creative Commons

Lors de la mise en place d’un site web, il est parfois utile d’utiliser du faux-texte en attendant les contenus définitifs. Pour signaler l’emplacement des images, j’utilise souvent des aplats gris. Plus rarement, je vais chercher des images proches de la thématique des contenus que je mets en page, lorsque la part des visuel est importante. Grâce à Lorem Pixum, la tâche parfois fastidieuse du recadrage des visuels trouvés est déjà un lointain souvenir. →

Intégration web

Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web

Parmi les nombreux intervenants dans la chaine de production des métiers de l’internet, l’intégrateur web est sans doute celui qui se cherche le plus. C’est le «vilain petit canard» de l’Open Space. Souvent coincé entre les graphistes et les développeurs web, il peut se sentir à l’étroit. Placé au bout de la chaine, de nombreuses erreurs de conception faites en amont lui tombent dessus, à commencer par les délais. Le retro-planning donne souvent l’impression d’avoir zappé le temps nécessaire à «l’intégration». Pourtant, l’intégrateur HTML & CSS est une ressource précieuse que toute entreprise sérieuse devrait valoriser. C’est le garant de la qualité globale du site mis en ligne, du respect de la charte graphique à l’expérience utilisateur en terme de performance d’affichage des pages. →

Frameworks Javascript

Treesaver — Framework Javascript pour créer des maquettes de type magazine

Treesaver est un framework Javascript conçu pour faciliter la création de maquettes de sites web de type magazine qui s’adaptent automatiquement à une large variété de périphérique de sortie, le tout à l’aide des langages standards du web : HTML et CSS. Aucune connaissance en programmation Javascript n’est nécessaire. L’ensemble ne pèse que 25 ko gzippé pour un affichage assez rapide sur les périphériques mobiles. →

Blog professionnel

Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise

Je viens de lancer mon nouveau site spécialisé dans la publication de communiqués de presse pour les entreprises et les particuliers. Encore un site pour publier des communiqués de presse ? Oui, mais à la mode de Bruno les bons tuyaux, c’est-à-dire avec un plus-produit aussi simple qu’innovant : réécrire les communiqués de presse pour publier des articles originaux. Autrement dit, je mets en ligne sur Dotpress.fr des contenus non dupliqués (ce qui est plutôt rare car le CP est généralement envoyé à l’identique aux journalistes). L’objectif est d’être bien référencé par les moteurs de recherche pour donner le maximum de Link Juice aux liens qui pointent vers les contenus «corporate» que l’on me confie. →