industryterm:responsive web design

Content Parity on the Web
http://gomakethings.com/content-parity-on-the-web

If 50 percent less information is the right amount of information people need to complete their tasks, then you should only provide that 50 percent on all devices. And if visitors on laptops could use that additional information, why wouldn’t someone on a smaller screen want access to it, too?

Similarly, if you can process a checkout in just two or three steps instead of five, why wouldn’t desktop users benefit from that as well? Tags: #RWD (...)

#contenu

Improve #Mobile Support With Server-Side-Enhanced Responsive Design | Smashing Mobile
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive

a responsive website is not automatically a mobile-friendly website. Amid the buzz of trendy Web development techniques, the good ol’ Web server doesn’t get the spotlight it deserves. Modern Web development should be about finding the right balance between server-side and client-side implementation.

1. Use Your #CMS
2. Use A #Device-Description Repository
3. Execute #CSS #Media_Queries Server-Side
4. Optimizing #Images
5. Pre-Processing and Intelligent Caching

http://media.smashingmagazine.com/wp-content/uploads/2012/12/smg-req.png

A Comparison of Methods for Building #Mobile-Optimized Websites
http://sixrevisions.com/mobile/methods-mobile-websites

Google advocates creating responsive web designs, while Jakob Nielsen, a renowned usability consultant, endorses the creation of dedicated mobile sites (but he was subsequently slammed by some web designers).

A third option is also gaining in popularity, where the web server renders the appropriate HTML and CSS from the same URL depending on the device a web page on the site is being requested from (which has been referred to as responsive design + server side components).

Five responsive web design pitfalls to avoid | Feature | .net magazine
http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid

320px. 480px. 768px. 1024px. The fold. Oh God, the fold.

The fact of the matter is that we don’t control what our visitors’ browser sizes are, nor what dimensions manufacturers decide to make their devices. Believe me, they’re trying every size in the book.

C’est le truc dur à piger par les décideurs, dans le #responsive : les points de rupture sont fonction de ton design, pas des plateformes qui le consultent.

Programming With Anthony - Responsive Web Design
http://blog.ircmaxell.com/2012/12/programming-with-anthony-responsive-web.html

This week we are joined by Responsive Design thought leader Sam Richard. He introduces us to the concept of responsive web design, tells us a little bit about its history and talks about best-practice and the future of the web! Check out the video:

Source: ircmaxell’s blog

Toi aussi tes amis parlent de #mediaqueries et tu ne sais pas ce que c’est...

Tu peux t’amuser à tout comprendre avec le W3C : ►http://www.w3.org/TR/css3-mediaqueries

Ou te perdre avec Mozilla Developper Network.
https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Regarder des belles captures d’écran via http://seenthis.net/messages/92686

Penser voir la lumière avec Css tricks…
http://css-tricks.com/css-media-queries

et te pâmer devant le Responsive Web Design avec Ethan
►http://www.alistapart.com/articles/responsive-web-design
ou au moins faire semblant en regardant les images,

Ou simplement lire la définition de #wikipedia :

Media Queries is a CSS3 module allowing to adapt the rendering of webpages based on conditions such as screen resolution (eg. smartphone vs. high definition screen). It was first drafted in 2001 by the W3C and became a recommended standard in June 2012. It is a cornerstone technology to Responsive Web Design.

Soit une extension de @media que tu connais déjà depuis avant ta retraite lorsque tu faisais du CSS2.

Et en quelques liens, tu te sens édifiée.

Media Queries
►http://mediaqueri.es

“A collection of inspirational websites using media queries and responsive web design. Curated by Eivind Uggedal (@uggedal).”

#mediaqueries #index

The Web Aesthetic | ALA
http://www.alistapart.com/articles/the-web-aesthetic

contraintes du #Web et esthétique, un exemple :

When accessed on more powerful devices like newer smartphones, tablets, and desktop computers (those that can “cut the mustard”), an image is displayed for each story. These images have been deemed “nice to have”—enhancements to the core experience that are conditionally requested after the basic page has loaded.

http://www.alistapart.com/d/the-web-aesthetic/bbcmobile.png

#adaptive #design

Un article sur la typographie comprise dans le design web fluide. Ou comment prendre en compte d’une mise-en page changeante pour adapter les corps et interlignages.

Fluid Type | Trent Walton
►http://trentwalton.com/2012/06/19/fluid-type

Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web.

#typo #webdesign

Fluid Type | Trent Walton
►http://trentwalton.com/2012/06/19/fluid-type

#typographie #web #design

La politique du #Web se joue aussi dans ce genre de détails (#WHATWG)
http://timkadlec.com/2012/05/wtfwg

Le débat : comment faire des images « responsives », c’est-à-dire dont la qualité est fonction de la résolution de l’écran. Solution élaborée par un groupe de développeurs et proposée de façon « communautaire » : créer un élément <#picture> ; indiquant les différentes images possibles ; solution proposée par un employé d’Apple : un attribut #srcset insuffisant. Résultat : #Apple gagne.

The developer community did everything asked of them. They followed procedure, they thoroughly discussed the options available. They were careful enough to consider what to do for browsers that wouldn’t support the element—a working #polyfill is readily available. Their solution even emulates the existing standardized audio and video elements.

Meanwhile an Apple representative writes one email about a new attribute that only partially solves the problem and the 5 days later it’s in the #spec.

via @yvg

#Responsive IMGs
http://cloudfour.com/responsive-imgs

a strategy for handling the #IMG tag.

voir aussi plein d’autres approches possibles (mais rejetées par l’auteur)
http://cloudfour.com/responsive-imgs-part-2

et celle d’apple pour l’#iPad3 et #retina_display
http://cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads

et encore celle-ci que j’ai testée et qui a l’air pas mal
https://github.com/joshje/Responsive-Enhance

#web

Future-Friendly
http://futurefriend.ly/resources.html

comment essayer de faire un truc un peu #pérenne alors que la technologie change tout le temps ?

In the spirit of embracing unpredictability, here are some resources to help you start thinking and acting in a future-friendly way.

http://www.alistapart.com/articles/future-ready-content

#web #standards #formats

Initializr: With Great Templates Comes Great Responsivity! | verekia’s blog
http://verekia.com/initializr/responsive-template

Today I’m proud to announce that a “Responsive template” is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors… Making your site work correctly on all these devices is a real nightmare. Well guess what? This nightmare is… absolutely not over! But as least, the boilerplate code of a responsive layout is now here to make your life easier.

A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA
http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables

In responsive web design, one of the toughest design problems to solve is how format complex tabular data for display on smaller screens. In this post, we’ll explore an experimental approach to rendering a complex table, using progressive enhancement and responsive design methods, that displays comfortably at a wide range of screen sizes, provides quick access to the data, and preserves the table structure so that data can still be compared across columns.

#css #responsive_web_design

Les #CSS pour l’impression de HTML5 boilerplate :
http://pastebin.com/jyBjjGvt

Amazium - The responsive web framework.. !
http://www.amazium.co.uk/#forms-tables

@Booz encore un truc de responsive webdesign basé sur 960grid (vu que ce terme semble à la mode...)

#css #media-queries #grille

11 Reasons why responsive web design isn’t that cool !
http://www.webdesignshock.com/responsive-design-problems

But speaking of sources against responsive web design, I realize I have found, though, only one article published in the blog Cloud Four pointing out important flaws to consider. Most of the rest consider the subject as the ultimate solution for web design. Negative points of view are as important as positive ones because the existence of a counterpart offers a vision to equilibrate the charges. It creates a debate and ultimately it helps us consider whether a proposal is good or bad. With that in mind, we’re going to point out the negative aspects we’ve encountered about responsive web design.

L’article n’est pas (du tout) une provocation, la liste de « défauts » du #responsive_web_design est très intéressante.

Encore une présentation du Responsive design.

Responsive Web Design Demystified
http://www.elated.com/articles/responsive-web-design-demystified

In this article, you get a gentle introduction to the world of responsive web design. You’ll:
– Learn exactly what responsive design is, and why it’s useful
– Look at the difference between the terms “responsive design” and “adaptive design”
– Take an existing fluid layout and convert it into a responsive layout that looks good on all screens, from mobile to widescreen desktop, and
– See how media queries and the viewport meta tag can help you build responsive layouts.

#responsive_web_design

Responsive by default - Blog | Andy Hume
http://blog.andyhume.net/responsive-by-default

Optimising for #One_Web, instead of specific browsers/devices/individuals, is an ideal that is a profound part of being a web developer. It has to be at the heart of everything you design and build. If not, you’re doomed to write code and support an ever increasing array of client platforms from whatever the browser landscape throws at you in the coming years. Good luck with that.

#responsive_web_design

Showcase of Outstanding Responsive Web Designs
http://line25.com/articles/showcase-of-outstanding-responsive-web-designs

This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web design. These websites not only look great at full scale monitor resolution, but are designed to gracefully scale according to the user’s screen size. Resize you browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well presented formats.

#responsive_web_design #web_design

css3-mediaqueries-js: make CSS3 Media Queries work in all browsers (JavaScript library) - Google Project Hosting
http://code.google.com/p/css3-mediaqueries-js

css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

#responsive_web_design

Understanding the Elements of Responsive Web Design
http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design

Responsive web design is undoubtedly a hot topic in web design right now. To some degree, the popularity of the concept of responsive web design is well deserved because site users are increasingly diversifying their methods of accessing a website. iPad, iPhone, Android mobile devices, desktops, netbooks — we’re in a time where our web designs must function in a multitude number of ways.

Let us explore the meaning and principles behind responsive web design.

#webdesign #interfaces

Adactio : Journal—Caveat
http://adactio.com/journal/4437

If you’re looking for the more honest, truthful answer to pretty much any question on #web #design and #usability, here it is:

It depends.

Responsive Web Design par Ethan Marcotte
►http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr

Commentant son métier, l’Anglais Christopher Wren affirmait avec un brin d’ironie que « l’architecture vise l’éternité ». Cette phrase a un côté intrigant : à la différence du Web, dont le contenu change souvent d’une semaine à l’autre, l’architecture est définie par sa permanence. Les fondations d’un bâtiment sont son empreinte. Elles définissent la charpente, qui donne sa forme à la façade. Chaque étape du procédé architectural est plus immuable, plus statique que la précédente. Les décisions créatives forment un espace physique, définissant la façon dont les gens vont évoluer dans cet espace durant des dizaines, voire des centaines d’années.

Le domaine du Web est une tout autre dimension. Notre travail revêt un caractère éphémère, souvent modifié ou remplacé dans les années qui suivent et son apparence dépend de la taille des fenêtres, de la résolution des écrans, des préférences des utilisateurs, des polices de caractères installées sur leurs machines… Ces éléments ne sont qu’une petite partie des imprévus à prendre en compte lors de la publication de notre travail. Au fil des années, nous sommes devenus des experts en la matière.

#webdesign #interfaces #css #JQuery #Responsive_Web_Design #Ethan_Marcotte #A_List_Apart