CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Jake Wilson
Jake Wilson

Reputation: 91193

Maintained Up-to-date Responsive Media Query Resource?

There are many articles the web about Responsive Design, and how to use css media queries to accomplish your goals. However the majority of them seem to have been written in 2011, when responsive design began to get popular.

Since 2011, a lot of different devices have been released to the market with a large variety of device widths and various ppi's the media queries of 2011 aren't necessarily going to cover. Mostly I'm referring to large format mobile devices like the Galaxy Note I/II as well as 7" tablets and even high ppi devices like retina displays.

Are there any resources out there that maintain up-to-date css media query code that would be used in a best-practice approach to covering most devices adequately?

Upvotes: 1

Views: 912

Answers (3)

carpenumidium
carpenumidium

Reputation: 1203

Responsive Design is not just about 'media-queries', Responsive Design encourages developers & designers to embrace accessibility in every possible way.

I highly suggest heading over to twitter(because that's where all the good conversations take place) and making an account right away and follow these amazing folk: In no particular order after @beep:

  • @beep - Ethan Marcotte, the guy who popularized Responsive Design.
  • @RWD - Ethan Marcotte's account where he tweets about stuff related to Responsive Web design.
  • @lukew - Luke Wroblewski.
  • @brad_frost - Brad Frost.
  • @Trentwalton - Trent Walton.
  • @adactio - Jeremy Keith.
  • @scottjhel - Scott Jhel, creator of Picturefill a polyfill for responsive images and some other cool things.
  • @wilto - Mat Marquis.
  • @smashingmag - Smashing Magazine.
  • @grigs - Jason Grigsby.
  • @globalmoxie - Josh Clarke.
  • @chriscoyier - Chris Coyier, everything CSS..
  • @malarkey - Andy Clarke.
  • @jordanmoore - Jordan Moore.
  • @viljamis - Viljami Salminen.

    There may be a few who I've left out, but this is a good place to start! You are bound to come across some good conversations or links or articles related to responsive design at any point of the day.

    Also, they write about responsive web design on their websites almost daily so be sure check them out too. Right there, you have plenty to read.

    Some good reads:
    Conditionally Loading Content
    Conditional Loading for Responsive Designs
    Creating a Mobile-First Responsive Web Design
    The EMs have it: Proportional Media Queries FTW! - Recommended reading.
    This is Responsive - A round-up of links and stuff about responsive web design collected from all over the web, curated by Brad Frost.

    As for the date of the publications, they are not relevant; if the content is obsolete or the methods depreciated, the author will most probably remove it or mark it accordingly.

    Edit: And a few good tools to test your website:
    Responsive.is - Test how your design performs on various screen sizes.
    responsivepx.com - Know exactly where your design breaks by entering screen widths in 'px'.
    pxtoem - Convert pixel units to ems.
    Izilla Media Query Debugger - This plugin displays the size of the browser window(kinda like responsivepx.com, but works locally).
    Opera Mobile Emulator - Test your websites on Opera Mobile.
    Opera Mini Simulatr - Test your websites on Opera Mini(for lower end devices).

    Please keep in mind, do not design for popular screen sizes! Insert break-points(media-queries) when your design breaks. Relevant: http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid

    Upvotes: 4

    • chovy
    chovy

    Reputation: 75686

    Bootstrap from twitter is probably a good starting point for you.

    http://twitter.github.com/bootstrap/

    Upvotes: -1

    Ed Charbeneau
    Ed Charbeneau

    Reputation: 4634

    There is no such library of Media Queries that I am aware of, and here is why:

    The best-practice approach to responsive design is to use media queries as they become necessary for your design. A proper responsive site should resize based on the users screen size and if and only if the UX needs adjustment, then a media query should be used.

    To find your design's breakpoints, resize the browser until the page becomes difficult to read, clipping occurs or some other UI/UX problem is apparent. Note the screen dimensions and make the necessary adjustments for that breakpoint.

    Some reading: http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design

    If you don't wish to use this approach, you could look at frameworks as source of best-practices. One that I like and use often is Foundation http://foundation.zurb.com and there are others like Bootstrap http://twitter.github.com/bootstrap/

    These are excellent tools, however you will find yourself falling back and discovering breakpoints that work better for your design in the end. Foundation is an excellent starting point for kicking off a project.

    Further reading:

    Upvotes: 1

    Related Questions