background preloader

9 basic principles of responsive web design

9 basic principles of responsive web design
Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let's clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. Responsive vs Adaptive web design It might seem the same but it isn't. The flow As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it's called the flow. Relative units The canvas can be a desktop, mobile screen or anything in between. Breakpoints Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Max and Min values Nested objects Remember the relative position? Mobile or Desktop first Related:  Responsive

MyFrama / Shaarli · Framacloud Shaarli est un logiciel libre qui permet, entre autre, de conserver en ligne ses marque-pages et de les partager. Il est initialement développé par Sébastien Sauvage et repris par la communauté Shaarli. Nous proposons ce logiciel comme service en ligne sur MyFrama. Il est extrêmement simple à installer sur un serveur (même mutualisé) et peu gourmand en ressources car il ne requiert aucune base de données. Voici un tutoriel pour vous aider à l’installer sur votre serveur. Dans la suite de ce tutoriel, nous supposerons que vous avez déjà fait pointer votre nom de domaine sur votre serveur auprès de votre registraire et que vous disposez d’un serveur web et de PHP en version supérieure à 5.2.6. 1 - Planter Téléchargez les fichiers de la dernière version sur le dépôt Github officiel (bouton vert « Clone or Download » puis « Download ZIP » à droite ou bien en ligne de commande git clone Décompressez l’archive et copiez le tout sur votre serveur web. et par

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 ».

Related: