Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #m
  • #me
  • #media
RSS: #mediaqueries

#mediaqueries

  • BoOz @booz 17/04/2013 14:45
    2
    @baroug
    @ari
    2

    Les #MediaQueries CSS3 - #Alsacreations
    http://www.alsacreations.com/article/lire/930-css3-media-queries.html

    Dans la majorité des cas, on utilise les media queries pour produire des améliorations spécifiques à l’affichage sur les mobiles, qui sont directement concernés par des critères sur les dimensions de l’écran (en terme de résolution et d’espace disponible) et sur l’utilisation tactile. Les périphériques sous iOS (iPhone, iPod, iPad...) supportent relativement bien les media queries.

    “
    @media only screen and (max-width:800px)
    @media only screen and (max-width:480px)
    @media only screen and (max-device-width:640px) and (orientation:landscape)
    “

    BoOz @booz
    Écrire un commentaire

  • BoOz @booz 16/04/2013 14:14
    4
    @baroug
    @touti
    @fil
    @7h36
    4

    Create a #Responsive Web Design with #MediaQueries
    http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

    The next most popular resolution under #960px width is #768px to cater for portrait tablet screens. This Typo design is built using a grid, so to stay true to the layout we can simply remove a column to leave a width of 758px. The original layout can then be narrowed down to fit by reducing the margin on the content div as well as reducing the overall width of the sidebar.

    3 #breakpoints

    @media screen and (max-width: 960px)
    @media screen and (max-width: 758px)
    @media screen and (max-width: 524px)

    • #media queries
    • #smartphones
    • #@media screen
    BoOz @booz
    Écrire un commentaire

  • BoOz @booz 15/03/2013 17:21

    http://www.andilicious.com/myfiles/dev/css/responsive-webdesign-css3-media-queries/css_responsive_template.css

    #mediaqueries #mobile #css

    BoOz @booz
    Écrire un commentaire

  • notabene @notabene CC BY-NC-SA 30/10/2012 10:27
    1
    @rastapopoulos
    1

    Content Choreography | Trent Walton
    ►http://trentwalton.com/2011/07/14/content-choreography

    Another thing I’ve noticed is that media queries are being used to significantly #redesign pages. I’ve seen background colors change and top-level elements move from left to right. If critical thought is applied here those choices may be spot on. But what happens if a user visits at full-width one afternoon and revisits your site in the evening on a tablet, and everything looks completely different? It’s annoying—like someone rearranging the groceries in your pantry every time you closed the door. The power of media queries can be intoxicating, but just because you can doesn’t mean you should.

    Mouais. Il a raison sur le fond mais il faudra vraiment que les gens se rendent compte que tant qu’à faire du #responsive, il serait malin de virer les #webfonts pour des questions de bande passante, et forcer le #contraste pour des questions d’#accessibilité en mobilité notamment.

    #mediaqueries #rwd

    • #media queries
    • #Trent Walton
    notabene @notabene CC BY-NC-SA
    • Nicolas Hoizey @nhoizey CC BY-NC-SA 30/10/2012 12:16

      Perso, je vire effectivement les webfonts, mais penses-tu vraiment que je devrais augmenter le contraste ?

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • notabene @notabene CC BY-NC-SA 16/11/2012 11:54

      Tiens je ne t’avais pas répondu.

      J’ai publié un truc rapide là dans la quasi-indifférence générale : http://www.nota-bene.org/Responsive-type-contrast

      • #portable device
      notabene @notabene CC BY-NC-SA
    Écrire un commentaire

  • Supergéante @supergeante 19/10/2012 23:49
    1
    @fil
    1

    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.

    • #output device
    • #iPhone
    • #responsive web design
    • #media queries
    • #media features
    • #media query
    • #media feature
    Supergéante @supergeante
    • Fil @fil 4/11/2012 11:51

      et ça (que tu as twitté)
      Le responsive design expliqué à ma grand-mère !
      http://graphism.fr/le-responsive-design-expliqu-ma-grandmre
      http://graphism.fr/wp-content/uploads/2012/10/res1.jpg

      Fil @fil
    Écrire un commentaire

  • speciale @speciale 19/10/2012 16:25

    Fluid
    http://www.luis-speciale.net/fluid

    Oups, j’ai voulu effacer le thème attribué automatiquement par Open Calais et je me suis fait avoir. Rebelote, j’essaie d’apprendre les #mediaqueries et je voulais savoir ce que vous en pensez

    • #Calais
    • #This
    speciale @speciale
    • speciale @speciale 19/10/2012 16:28
      @seenthis

      Ah, pour enlever le this il fallait cliquer. Ça peut induire en erreur parce que effacer ne devrait pas être en bas, il me semble @seenthis

      speciale @speciale
    • speciale @speciale 19/10/2012 16:44
      @seenthis

      @seenthis sur Aurora Mac, le bouton Envoyer est schizo, parfois il est là, parfois il faut redimensionner la textarea et à mon avis c(est à cause du height ou du min-height

      speciale @speciale
    Écrire un commentaire

  • BoOz @booz 19/10/2012 14:22

    Responsive Museum Week
    ►http://responsivemuseum.com/fr/index.html

    Smartphone 320px
    Tablette 768px
    Netbook 1024px
    Desktop 1600px

    #mobile #mediaqueries

    BoOz @booz
    • touti @touti 19/10/2012 15:51

      http://seenthis.net/messages/92586

      touti @touti
    Écrire un commentaire

  • BoOz @booz 19/10/2012 14:21
    1
    @baroug
    1

    Media Queries
    ►http://mediaqueri.es

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

    #mediaqueries #index

    • #Twitter
    • #responsive web design
    • #inspirational websites using media queries
    BoOz @booz
    Écrire un commentaire

  • notabene @notabene CC BY-NC-SA 30/08/2011 13:25
    2
    @fil
    @nhoizey
    2

    Transmedia Design for 3 Screens - Make That 5 (Jakob Nielsen’s Alertbox)
    http://www.useit.com/alertbox/3-screens-transmedia.html

    Many people predict that mobile devices will be the only important user #interface #platform in the so-called “post-PC” future. Some even recommend designing websites for mobile first, and then modifying the design for the desktop PC as an afterthought.

    I disagree.

    Although it makes for a good story to claim that something new will kill the old, things rarely work out that way. As Peter Zollman once said, “with the possible exception of the town crier, a new medium has never put an old medium out of business.” Despite TV, we still have radio — and, for that matter, live theater. In the computer industry, we still have mainframes, and IBM harvests billions each year accordingly.

    Si l’on passe outre la « prédictivite », il y a quand même deux grandes tendances qui se dessinent : 1. le web « #desktop » avec des bouts de #mediaqueries dedans, et 2. le web « #mobile » sur des petites interfaces.

    On en est encore aux tâtonnements. La preuve avec les sites de journalisme qui pourraient la plupart du temps fort bien s’accommoder d’un zoom sur les contenus ; ça tombe bien, c’est natif à la plupart des navigateurs de #smartphones, le zoom.

    Les deux grandes tendances dont je parlais vont avoir du sens avec les services applicatifs en ligne, qui demandent de l’efficacité, là où le surf tel qu’on le pratique sur un ordinateur ne demande pas le même attachement à l’efficacité. Voir à #sérendipité

    • #mobile devices
    • #Jakob Nielsen
    • #USD
    • #Peter Zollman
    • #OpenTable
    notabene @notabene CC BY-NC-SA
    Écrire un commentaire

  • Delphine Malassingne @delphine CC BY-SA 11/08/2011 11:42

    J’aime bien les #MediaQueries et comment ça peut être joli et malin : ►http://mediaqueri.es

    • #Twitter
    Delphine Malassingne @delphine CC BY-SA
    Écrire un commentaire

  • 0gust1 @0gust1 CC BY-NC 26/05/2010 08:26

    Media Queries
    ►http://www.w3.org/TR/css3-mediaqueries

    W3C Candidate Recommendation 15 September 2009

    #device #mediaquery #media-queries #recommendation #w3c #webdesign #webdevelopment #webdev #webstandards #reference #css3 #design #browser #mediaqueries #specification #standards

    • #candidate
    • #mediaquery media-queries recommendation w3c webdesign webdevelopment webdev webstandards
    • #Recommendation
    • #device mediaquery media-queries recommendation
    0gust1 @0gust1 CC BY-NC
    Écrire un commentaire

  • 0gust1 @0gust1 CC BY-NC 26/05/2010 08:06

    A List Apart : Articles : Responsive Web Design
    ►http://www.alistapart.com/articles/responsive-web-design

    Exemple d’utilisation des mediaqueries de css3 : comment adapter une page web à différents périphériques.

    #webdesign #web #css #css3 #design #usability #ux #ui #webdev #mediaqueries

    • #media queries
    • #iPhone
    • #responsive web design
    0gust1 @0gust1 CC BY-NC
    Écrire un commentaire

Thèmes liés

  • IndustryTerm: @media screen
  • #css
  • #css3
  • #design
  • #mobile
  • #responsive
  • #webdesign
  • #webdev