Pourquoi
Si vous ne disposez pas (encore) d'un site web Responsive Design, c'est sans doute parce que vous ne percevez pas tous les avantages que vous pouvez en tirer. Il y a même de fortes probabilités que vous ne captiez pas les mobinautes et que vous perdiez une part grandissante de trafic. Aujourd'hui, 50% du trafic web se fait en mobilité (13% il y a seulement un an....) et 60% des emailing sont désormais lus sur tablette et/ou smartphone (source Statcounter). Je vais tenter de vous expliquer (et de vous convaincre) pourquoi un site web Responsive Design vous aidera à obtenir plus de visiteurs, et comment ne pas adopter cette conception graphique pourrait être pénalisant votre activité. S'adapter aux plateformes mobiles La plupart de vos visiteurs actuels (et potentiels) sont probablement arrivés sur votre site en utilisant un appareil mobile (tablette ou smartphone). Améliorer l'expérience utilisateur Optimisation marketing Augmenter sa visibilité sur les moteurs de recherche Rester pertinent
Culture Visuelle | Média social d'enseignement et de recherche
Comment tester un site responsive? (partie 1)
Savoir si un site développé se comporte bien en responsive est devenu une nécessité de nos jours. Il est donc important de connaître tous les moyens mis à notre disposition pour réaliser cette étude. Deux lignes de conduites (probablement complémentaires) sont à prendre en compte : soit on teste sur des outils simulant le comportement des appareils, soit on teste directement sur les supports que l'on souhaite prendre en charge. Bien évidemment, la méthode la plus fiable reste celle qui consiste à utiliser le smartphone ou autre appareil dont l'éligibilité est à vérifier. Avantages Pas d'installation sur le poste et de ce fait, compatible avec toutes les plateformes. Inconvénients L'évènement Touch n'est généralement pas pris en charge. Nous vous proposons dans un premier temps de découvrir les différentes méthodes de simulations proposées par les éditeurs de navigateurs et des services en ligne. Les solutions des navigateurs Internet Explorer Chrome Firefox Opera Safari Les outils en ligne
Viewport
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial
#OpenSchool : Mise en ligne de mémoires en design graphique | Knowtex Blog
Les étudiants du Mastère Design graphique de La Fonderie de l’Image (Bagnolet) ont travaillé pendant six mois sur des thèmes de recherche dépassant largement le champ du graphisme (journalisme, éducation, handicap…). Sous l’impulsion d’Anthony Masure (qui a cordonné les mémoires), il nous a semblé important de favoriser la dissémination d’une partie de ces travaux. Cette mise en ligne permet d’ailleurs de questionner les limites d’un travail d’école. Un mémoire de master.e est-il fini quand il est noté, ou n’est-ce que le début de la recherche, d’un parcours ? Audrey LOREL : « Images de la guerre | Guerre des images » Il y a un peu plus de soixante ans, l’humanité a été libérée du nazisme. Domaines : Journalisme, Presse, Photo. Eloïse GOUBY : « Saisissez votre légende. Domaines : Photo, Réseaux sociaux, Journalisme. Ariane DERVILLE : « La place du signe dans les espaces scolaires » Domaines : Éducation, Architecture, Édition. Adrien GONAUER : « Épreuves de la tradition.
10 outils pour avoir un site web responsive
« Le web responsive », on entend de plus en plus ce terme en matière de webdesign mais pourquoi ? Quand on crée un site web, autant il y a quelques années il fallait penser à le rendre compatible sur tous les navigateurs (Grrr ie…), mais maintenant il est important d’avoir un site Internet qui soit consultable sur un smartphone ou une tablette, qui peut-être une source de trafic à ne pas négliger. Si vous travaillez souvent avec un CMS, vous avez à votre disposition des thèmes wordpress responsives à télécharger par exemple, mais d’autres solutions existent. Une des manières d’aborder le problème est d’utiliser des outils qui vont vous aider dans la conception d’un site responsive : Responsive Web Design Sketch Sheets Adobe Edge Inspect Foundation RWD Calculator Responsively Wireframed Adaptive Images Bootstrap Retina Images SimpleGrid Responsinator
Media et Meta
Quand vous travaillez sur un nouveau design de site Web, une des choses auxquelles il faut penser est le « responsive design ». Est-ce que le site que vous allez développer a besoin d'un « responsive design » ? Tous les sites Web aujourd'hui devraient prendre en considération l'aspect « responsive design ». Il y a encore certains développeurs qui pensent qu'un visiteur sur mobile peut toujours zoomer pour rendre une page lisible, mais le sentiment général est que de nos jours, chaque développeur devrait rendre son site facile d'accès et d'utilisation. Le « responsive design » c'est lorsque le design de votre site s'adapte à la résolution de l'écran de votre visiteur. Les différents paramétrages définissent chacun une fourchette de largeur qui utilisera un style particulier. Vous pouvez définir ces paramétrages directement avec une largeur en pixels ou bien avec un ratio minimum en pixels. Le code suivant peut vous aider à démarrer avec les « media queries ».
25 Epic Design Tips for Non-Designers
Get your graphic design game-face on with these inspiring tips. Whether you’re a creating graphics for social media or designing an invitation for an upcoming event, the application of graphic design is vast and versatile. From font pairing and scale, to alignment and white space, the facets of the design world are complex. Let these 26 epic design tips help you through the pits and the peaks of the creative process. Click on the ‘remix this design’ link throughout the post to create your own designs. 01. Remix this design When selecting a typeface or font for headings, subtitles and body text, use easy to read fonts for simple and effective graphic design. 02. Apply scale to type, shapes or compositional features that need proportionate emphasis. 03. Use letter spacing to fill dead space, aligning text, or condense words that take up too much space. 04. Choose a color scheme that has 1-3 primary colors and an additional 1-3 secondary colors that contrast and complement each other. 05.
