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
Generating Responsive Image Assets with Photoshop CC 2014 This article was sponsored by Adobe. Thank you for supporting the sponsors that make SitePoint possible! The right assets for the right devices Five years ago the web was a more predictable place, wasn’t it? As web developers, we could reasonably expect web browsers no narrower than 640 pixels, and no wider than 1240 — it was as if our ‘internet super-highway’ was trafficked only with family sedans. Our current reality is a very different picture. Today, mobile users often make up more than half of our traffic. So, why are we still loading the same ‘family-sized’ images onto all these wildly different devices? But does it really matter? Last month Tammy Everts published some very sobering figures on the effects of site performance on user behaviour. Slow web pages correlate to more than $3b lost sales annually44% of shoppers interpret slow performance as ‘something went wrong’A 2-second delay during a transaction = 87% shopping cart abandonment rate Delivering the right images Squeezr.it
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
35 layout per siti web responsive per portfolio su mobile Username: Password: Fargot Password? / Help Alchimie Grafiche \ Grafica \ 35 layout per siti web responsive per portfolio su mobile 10 plugin Wordpress per creare fantastici effetti immagine I 40 migliori template per designer: Wordpress contro Joomla 20 fantastici temi Wordpress con sfondi video I migliori temi WooCommerce sul mercato 15 plugin Wordpress indispensabili del 2014 30 temi Wordpress premium con slider a tutto schermo Il Miglior Hosting per Wordpress e Joomla 30 migliori temi Wordpress responsive per riviste online 2014 Tema per realizzare siti di booking online con Wordpress Il miglior plugin Wordpress per la gestione avanzata utenti novembre 20, 2014 Posted by Federico Antonioni in Grafica inShare1 Il portfolio è uno strumento assai utile per presentare online i propri lavori creativi. I layout che potete ammirare in questa interessante carrellata sono progettati tenendo conto di quali mezzi gli utenti si servono prevalentemente per l’accesso a Internet. Your Name: (required)
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 ».
Responsive Design: Lo studio del layout e la gestione dei contenuti « Your Inspiration Web Nella prima lezione abbiamo affrontato l’evoluzione del Responsive Web Design e del perché sia nato. E ci siamo resi conto che con il passare degli anni, oltre all’innovazione tecnologica e comunicativa, anche designer e sviluppatori si sono evoluti di pari passo. Ma quali sono le differenze rispetto al passato? Le metodologie di lavoro e gli strumenti di progettazione rimangono invariati, sia per i designer che per gli sviluppatori. Cambia invece la progettazione del layout che inizierà, diversamente dal passato, dal mobile, per poi evolversi offrendo generalmente sempre più contenuti nei layout Tablet e Desktop. E per lo sviluppatore, la principale differenza sta nella scrittura dei fogli di stile, cosa che vedremo nella terza lezione. Prima di iniziare un progetto occorre, però, definire quali dispositivi dobbiamo rendere compatibili con il nostro sito. Quali dispositivi supportare? Ne consegue che gli adattamenti al display possono essere centinaia. Come definire il Layout?
srcset Le gros problème du Responsive Web Design tient probablement dans la gestion des ressources chargées et utilisées sur une page web, utiles à notre terminal et adaptées à notre écran ou notre fenêtre de consultation. Stéphanie nous en parlait déjà avec Responsive Webdesign - présent et futur de l'adaptation mobile. Je vous avais parlé l'an dernier de l'annonce du moteur WebKit (12 août 2013) concernant son support de l'attribut srcset ; c'est aujourd'hui Google qui publie la version 34.0.1847.116 (retenez 34, ça suffira) de son navigateur Chrome (qui est passé sous moteur Blink, fork récent de WebKit). Parmi les mises à jour, on retrouve les corrections de sécurité habituelles, mais également la prise en charge partielle de l'attribut srcset pour les éléments images <img>. L'attribut srcset, principes Lorsque vous insérez une image dans votre page web, il y a de fortes chances pour que vous utilisiez un code semblable à : Attribut srcset : exemple Et un peu plus élaboré : Démonstration
Responsive Line Height Posted on 27 Jun 2014 Manually adjusting line-height with media queries for optimum readability across vast number of screen sizes can be very hard. What makes it even harder, is, that instead of the screen width, the line-height should be relative to its container’s width and its font settings in order to achieve proper readability and appropriate spacing. Thanks to @Wilto, there has been a jQuery plugin called Molten Leading around for quite some time already which makes it possible to automate this process and define a minimum width at which the adjustment starts, a maximum element width where it stops, and a minimum and maximum line-height to adjust through. I wanted to use something similar in one of my latest projects, but I didn’t want to introduce new dependencies to external JavaScript libraries just because of this one feature. Molten Leading Features Automatically adjust line-height based on element width for optimal readability. Download Molten Leading on GitHub → Questions?