background preloader

Responsive Webdesign : 30 exemples de sites web adaptables - inspiration-webdesign

Responsive Webdesign : 30 exemples de sites web adaptables - inspiration-webdesign
Le responsive webdesign continue son chemin sur la toile et commence à devenir de plus en plus présent au coeur des interfaces web. Le responsive webdesign Petit rappel sur la notion du web responsive : La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...) source : Aujourd'hui le responsive et les Medias Queries sont une réponse aux enjeux que le web connaît actuellement avec la progression des mobiles et des tablettes qui ont fait évoluer notre manière de concevoir un site web. Si vous êtes intéressé par le web design responsive, je vous conseille la lecture du très bon livre Responsive Webdesign par Ethan Marcotte qui permet une approche efficace et une mise en pratique du responsive. Shawn Johnston CSS-Tricks Related:  Guide de création

Responsive design: techniques and tricks to prepare your websites f... 10 Responsive Navigation Solutions and Tutorials Planning and creating your menu for mobiles will perhaps be the trickiest aspect of building a responsive layout. It is a juggling act between both readability and functionality. In years gone by, it was about converting your navigation into a <select> drop-down menu, now, its all about the “three line” (or hamburger menu), toggle menu, drawer-style navs and animated side panels. Hopefully the solutions we have for you below will help get you on your way. You might also like to check out this related article: 15 Responsive Navigation jQuery Plugins → Basic Responsive “Three Line” Menu (CSS & jQuery) This tutorial shows you how to, with a relatively short amount of code, progressively enhance a responsive site and build a “three line” responsive menu without adding additional markup to the page. Basic Responsive “Three Line” Menu Responsive Multi-Level Navigation (CSS & jQuery) Responsive Multi-Level Navigation Responsive Toggle Menu (CSS & jQuery) Responsive Toggle Menu Top Drawer MeanMenu

Introduction aux grilles typographiques La macro typographie (ou plus simplement, la mise en page) est une discipline en plein essor sur le Web et c’est une excellente chose. De nombreuses règles (mais pas toutes !) peuvent être transposées du média papier au média Web. Parmi les composants importants de cette discipline, les grilles typographiques permettent d’assurer une lisibilité accrue à votre page et lui donner une cohérence graphique sans faille. Étonnamment, nous verrons également qu’elle peut aussi servir de trame inter-métiers à tous nos projets. La grille, qu’est-ce que c’est ? Par grille typographique on entend la division verticale et horizontale de la page. Verticalement, il s’agit de fractionner la page en colonnes, chaque colonne étant séparée de sa précédente par une gouttière afin d’en séparer visuellement les contenus. Horizontalement, c’est un rythme vertical qui est mis en place, où la hauteur de ligne et le corps du texte courant sont en étroite relation. La grille verticale La grille horizontale

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development What Is It? Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles: Responsive Grid Down To Mobile Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Fast to Start Skeleton is a tool for rapid development. Style Agnostic Skeleton is not a UI framework. The Grid Skeleton's base grid is a variation of the 960 grid system. One Eleven Two Ten Three Nine Four Eight Five Seven Six Code Example Typography The typography of Skeleton is designed to create a strong hierarchy with basic styles. Heading <h3> Heading <h4> Heading <h5> Heading <h6> This is a blockquote style example. Buttons Buttons are intended for action and thus should have appropriate weight. Click Me For Action Forms Support for Skeleton Examples & Extensions Downloads (A la 960.gs PSD template)

Les sites web incontournables (janvier 2014) L’année 2014 commence sur les chapeaux de roues niveau webdesign. Retour sur les sites et concepts à garder sous le coude pour votre inspiration. Je suis heureux de commencer cette 5ème année d’activité du blog avec toujours autant de beaux webdesign à partager avec vous. En attendant, la refonte de Webdesigner Trends se profile en tâche fond (lentement certes, mais elle est toujours sur le feu). D’ici la, je vous propose de vous délecter de ces 26 sites pour votre inspiration : Flat VS Realism Eleks Glass Cornetto Lick Challenge Discover Sony Store Plus de bonheur / Canal + Kickstarter 2013 Ibis Expedition Chartreuse Tourisme Babadum Build With Chrome Amplifon / Emotions of Sound Blackhouse La Planète des Singes Arte Mix Scissors Volskwagen Sports Cars Design Embraced Node Plus Jaguar Words Pictures Ideas HL James Sanghan Lien proposé par David L., merci à toi. Sydney Stockholm Media Temple Lemonadela Huge Inc Bright Media Lien proposé par David D., merci à toi. Que pensez-vous de cette première sélection ?

Les data en forme La veille hebdomadaire du meilleur du datajournalism, c'est ici. Réalisée par les datajournalists d'OWNI. Cette semaine, ils vous proposent un voyage au coeur des data contre vents et marées, avec une Terre qui tourne et des courants marins visualisés en temps réel. Mais aussi des données en 3D qui se promènent au plafond de Grand central station, à New York. Amoureux de la donnée, sortez vos mouchoirs. Une gare, des data, du talent, le tour est joué et ça donne des frissons. Le résultat est à la hauteur du défi, une série d’animations en 3D isométrique réparties sur trois thèmes : la place de l’économie Américaine dans le monde, l’importance de l’industrie du téléphone mobile et les chiffres positifs au coeur de la crise actuelle. Pour ne rien gâcher, le site qui relaie l’opération est aussi sobre qu’efficace : contenus accessibles en un clic, jolie mise en forme CSS, vidéos contextualisées et liées à leur fil de discussion Facebook. Les data au bout des doigts Do it Toi-même !

Comment Créer un site mobile et tablette en utilisant le "Responsive Design" L’année 2010 a connu une véritable explosion de l’internet Mobile et des tablettes tactiles internet, et cela ne fait que commencer ! Selon l’Association Française du Multimédia Mobile, en 2010, près d’1 équipé mobile sur 2 a déjà consulté un site internet depuis son mobile. Ces nouvelles plateformes d’affichage pour le web sont devenues des canaux de communication à part entière. Il est aujourd’hui quasiment indispensable de prendre en compte ces nouveaux canaux dans sa stratégie de communication. Ces nouvelles technologies utilisent très souvent des résolutions totalement différentes les unes des autres. A première vue, c’est un véritable casse tête, car il faudrait créer un thème pour chacun des supports, ce qui n’est pas le cas. Tout d’abord, qu’est ce qu’un « Design Responsive » Le Design Responsive consiste à réaliser un site Internet capable de s’adapter à n’importe quel type de machine et n’importe quelle résolution, tout cela à partir d’une url unique, celle de votre site.

Micro/Macro Typographie et Mise en page | Delicart Au cas ou vous ne l’auriez pas remarqué, il fait trop froid pour mettre ne serait-ce qu’un orteil dehors, ça tombe bien je vous ai trouvé une occupation pour les deux heures à venir ! Il y a un petit moment, j’ai parcouru (en diagonale, je l’avoue) les résumés faits par différents blogueurs sur les sujets abordés lors de Paris Web 2010, mais je n’avais pas encore pris le temps d’écouter chaque conférence (ça fait quand même des heures et des heures de vidéos). C’est donc chose faite ! Je voulais revenir sur deux conférences que j’ai trouvé « absorbantes », non seulement par le rythme donné par les orateurs, mais aussi (et surtout) pour la mine d’informations apportées par ces derniers ! David Rault nous parle typo. Sommaire de la conférence L’outil de communication : la typoClassification Vox-atypiLa communication de l’information et règles de TypoLes webfonts Je commence par une petite définition que nous donne Anne-Sophie Fradier (notre intervenant), au début de sa conférence :

Related:  Responsive web design & media queriesjorylDESIGNbenlelievrecamping GervanneRWD, presse et web mobileiliasdmsreponsive