Amazing Examples of Using Media Queries for Responsive Web Design

via 20 Amazing Examples of Using Media Queries for Responsive Web Design | Design Shack.

Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs.

To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to present experiences specifically catered to different visitors.

What Are Media Queries?

CSS3 has brought about a ton of fancy visual effects such as shadows and animations, but what about practical improvements? Is there anything about CSS3 that actually improves the way you can build websites from a usability standpoint?

The answer is a resounding “yes” and is due largely to the inclusion of media queries. Media queries are incredibly useful because they solve a huge problem that arose quite suddenly in web design: the need to design for vastly different screen sizes.

User screen sizes have always differed but for the most part this difference was limited to a few inches and you could bet on a huge majority of your audience fitting within parameters that were fairly easy to design around. These days though you have some users on a 27″ Apple cinema display and others on a 3.5″ smartphone.

That’s a huge difference and there are plenty of stops along the way. The ever-growing number of devices that are web friendly make it increasingly difficult for designers to present one static solution that caters to everyone’s needs.

This need has given birth to the idea of responsive web design, which goes far beyond fluid page widths and actually dramatically changes the layout of a page as the size of the browser window or device screen size changes. Media queries are one of the most powerful tools for meeting this goal because they allow the designer to set special CSS according to certain pre-established rules.

Continue reading

New HTML5 Features to Improve your Web Form

New HTML5 Features to Improve your Web Form.

HTML5 introduces numerous new options to create more functional web forms. In this article, I’ll show you exciting new HTML5 features to improve your forms and make them more functional and user-friendly.

Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.

Continue reading

How to use HTML5 in your client work right now | HTML5 Doctor

I was presenting some designs to a client a couple of weeks ago when this question came up: “Will you be building this site with HTML5 in mind?” Naturally, I was happy to answer that one! It went a little like this:

Me:

We’ll build the whole thing with HTML5 if that’s okay with you guys. One question though: do you know what percentage of your visitors use Internet Explorer without JavaScript to view your site?

Client:

Erm, I don’t really know, and I wouldn’t want to lose those visitors. Maybe we’d better not build it in HTML5 after all.

Me:

Whoa there! No need to be so hasty. We don’t have to use HTML5 exclusively, but we can still use it to develop specific parts of the site. How does that sound?

Client:

Great! Let’s do it!

Continue reading