Media Queries: HTML5 Resource of the Day

when getting started with responsive web design , it can often be helpful to look at some examples of what is possible. creating a wonderful responsive site takes a bit of imagination and planning. it can be good to get some inspiration from the designs of other sites. the best place on the web that i have found for exploring this is media queries . it even has a clever url! ( mediaqueri.es ). let’s take a look at this resource.

media queries - inspirational websites using media queries

media queries, according to its own site description, is “a collection of inspirational websites using media queries and responsive web design.” it is curated by eivind uggedal . the basic concept for the site is that people can submit sites to be listed on the site via twitter. eivind will then evaluate the site to determine if it is good enough to add to the media queries site. once added, each site gets a preview in four different sizes (in widths of 320px, 768px, 1024px and 1600px). for example, here is the stuff & nonsense site as shown on media queries.

clicking on the image for the site (both here and on media queries) will take you to the site so you can explore the design in action. many of these sites use clever css animations to create even more amazing responsive web design experiences.

summary

if you are starting a responsive web design project or you just simply need some inspiration for what is possible with responsive web design, the media queries site is something you must check out. you’ll leave with some new ideas and hopefully feel ready to tackle your rwd challenges. if you're looking for controls that work great in rwd sites, check out ignite ui.

contact

if you want to comment or reach out to me, the best place to do that is on twitter @brentschooley . i can also be reached via email at bschooley@infragistics.com .