Over a million developers have joined DZone.

Media Queries: HTML5 Resource of the Day

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This post comes from Brent Schooley at the Infragistics blog.

logo

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.

sample

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}