Media Queries - HTML5 Resource of the Day

Brent Schooley / Thursday, June 20, 2013

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 and 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.

logo

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 people can submit sites to be listed on the Media Queries 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 (320px, 768px, 1024px, and 1600px for widths). For example, here is the Stuff & Nonsense site as shown on Media Queries.

sample

Clicking on the image for the site (both here and on the Media Queries site) 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 on 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.