background preloader

Responsive Design

Facebook Twitter

Focal Point, un meilleur cadrage des images responsive | Édition Nº42. Responsive Design : comment optimiser la navigation multi-canal [infographie] Aujourd’hui, le Responsive Web Design devient de plus en plus incontournable pour les grands sites internet de ce monde (et pour tous, même). La navigation se déportant progressivement de l’ordinateur familial au laptop, puis au smartphone en passant par la tablette de style iPad, il est clair que la taille de l’affichage n’est plus aussi homogène qu’il y a 10 ans.

Il faut donc s’adapter. L’agence française Splio (via frenchweb) publie une infographie sur le sujet en fournissant 10 conseils à mettre en pratique en Responsive Design. Ne manquez pas non plus d’aller faire un tour sur le site Mediaqueri.es pour voir de nombreux exemples concrets. À Propos de l'Auteur Vincent. Design Principles. These design principles were developed by and for the Android User Experience Team to keep users' best interests in mind.

For Android developers and designers, they continue to underlie the more detailed design guidelines for different types of devices. Consider these principles as you apply your own creativity and design thinking. Deviate with purpose. Enchant Me Delight me in surprising ways A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand. Real objects are more fun than buttons and menus Allow people to directly touch and manipulate objects in your app. Let me make it mine People love to add personal touches because it helps them feel at home and in control.

Get to know me Learn peoples' preferences over time. Simplify My Life Keep it brief Use short phrases with simple words. Pictures are faster than words I should always know where I am. Grid Calculator by Nicolaj Kirkgaard Nielsen. Splio-ResponsiveDesign. Expertise et conseil en responsive design. Le Responsive Design représente un ensemble de méthodes et techniques permettant d'universaliser votre site Web, qu'il soit consulté sur ordinateur, tablette ou smartphone. Le site ainsi conçu s'adapte automatiquement à la taille de l'écran. Proposer une seule version d'un site web est irréaliste au vu de la diversité des tailles d'écran. L'ergonomie d'interface se doit donc d'être pensée en fonction du support.

Le Responsive Design permet de répondre à cette problématique. Plutôt que de concevoir un gabarit unique, il s'agit ici de construire un site caméléon qui change de forme selon le support et la taille de l'écran. La méthode principalement utilisée est de modifier la mise en forme CSS de la page en fonction de la taille du navigateur. Notre expertise De façon générale il s'agit de maquetter 3 gabarits d'une même page : ordinateur, tablette (format portrait et paysage), smartphone. iOS 6 GUI PSD (iPhone 5) Of all the iOS GUI Photoshop documents we’ve created over the past 4 or 5 years the one for the iPhone is by far the most popular. We take these things pretty seriously because we use them on a daily basis ourselves. This version, iOS 6 for iPhone 5, is a bit different than previous versions. Those of you who have downloaded and used these files have probably noticed they’ve become quite bloated.

As fast as our computers are today, they still get pretty sluggish when working in a document that contains tens of millions of pixels with hundreds of shape layers. This time around we focussed on making the file a bit more usable. It’s smaller in file size and has a reduced canvas making it quite a bit more manageable. We did this by removing some of the more obtuse elements. We get asked a lot why it’s free. We hope you like it. Download PSD (iPhone 5)

Fresco - A Beautiful Responsive Lightbox. Responsive web design: un webdesign adaptatif | Blog Loriskumo. Si il y a bien quelque chose que l’on peut considérer de « Next Big Thing » sur le net, c’est bien le responsive web design. Vous en avez peut-être entendu parler, ou peut être que vous avez déjà lu l’excellent « Responsive Web Design » de Ethan Marcotte. Voici ici un rapide topo de ce qui est la tendance à la mode sur le web et incontestablement l’avenir du webdesign! Un design pour les gouverner tous Les résolutions d’écran ont toujours été un souci pour le webdesign. Je prend mon cas, à la maison j’ai un écran 24 pouces, en déplacement j’utilise celui de mon MacBook 13′, depuis mon canapé j’ai mon iPad et dans le bus mon iPhone… 4 machines avec des tailles et des contraintes (souris/doigt) radicalement différentes. A ce stade, on ne peut plus simplement prendre une taille standard puisqu’il n’existe justement plus de standards… Réaliser un design pour chacune: impossible?!

C’est là que le concept du « Responsive Webdesign » s’applique: Ça n’est pas plus compliqué que ça! Un peu de pratique. Responsive web design : Comment optimiser son site pour mobiles et tablettes (3ème partie) - Blog Soluo. Après les phases initiales de recherche et de design graphique que nous avons abordé dans deux articles précédents , vient le temps de l’ intégration HTML et CSS . En principe ce n’est pas très compliqué : il suffit de suivre la méthode de 320 and up qui consiste à intégrer d’abord pour la taille de fenêtre la plus petite. Je dis « en principe », car nous avons rencontré un certain nombre de difficultés, notamment avec Internet Explorer 7 et 8, malgré les outils javascript fournis dans le template. Note : Comme pour la majorité des sites que nous réalisons, nous avons décidé de ne pas supporter IE6 pour ce projet. L’intégration pour 320px et 480px de large Note : Pour tester j’ai utilisé un iPhone 3GS ainsi que Firefox 3.6, Chrome, Safari, IE7 et IE8 sur desktop.

J’aurais voulu pouvoir tester sur d’autres smartphones mais je n’avais pas cette possibilité. On commence donc par style.css qui est la feuille de style de base. Annonce immobilière sur la page d'accueil en 320px de large (iPhone) Catégorie : Conception des interfaces. iPad GUI PSD. Now that Apple has officially released the iPad we want to start designing for it.

While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad. The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. It’s 1.0 so I’m sure we’ll notice missing elements as we begin to use it. If you like it or use it, help us out by retweeting it. Foundation: The Most Advanced Responsive Front-end Framework from ZURB.