CategoryMedia Queries

July 8, 2014 — When the iPhone came out in 2007, the demonstration of its web browser by the late great Steve Jobs gave the not-so-subtle impression that Apple wasn’t too perturbed about its users pinching to zoom and swiping to scroll as part of the browsing experience. Responsive web design aimed to solve this problem by smartly applying flexible grids, fluid layouts and, of course, media queries. However, responsive web design has turned out to be somewhat of a case study in the law of unintended consequences, with one of the perverse unanticipated effects being breakpoint paranoia. But even without the undue influence that media queries exerts on your selection of these breakpoints, it dawns on you after much introspection that these might not be the droids we’re looking for. Read more…

July 22, 2013 — With all the talk of new HTML5 standards such as the srcset attribute and <picture> element, as well as server-side techniques such as Responsive Web Design + Server Side Components (RESS), you’d be forgiven for concluding that simple, static websites can’t support responsive images today. Read more…

January 9, 2013 — From time to time, when a discussion is taking place about ways to implement responsive images, someone comes along and says, “Hey, guys! What we really need is a media query that enables us to send high-resolution images to people on a fast connection and low-resolution images to people on a slow connection.” At least early on, a lot of people agreed. Read more…

October 24, 2012 — With all the talk about responsive Web design, designers and coders are moving even further from the fixed pixel layouts of design’s print-based history. We’re finally thinking in terms of fluid layouts and expandable, interactive content. But when you get down to it, we’re still thinking of the fluidity in terms of desktop, tablet and mobile sizes. Read more…

August 13, 2012 — Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. We’ll take all kinds “Content: A Blessing, A Bubble, A Burden”)](https://www.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-font-sizing-media-query-efficiency-more/). Read more…

June 14, 2012 — It’s been a couple of years now since the concept of responsive design took the Web design world by storm, and more and more websites are going responsive. But there are still some barriers and potential problems, not the least of these being the challenge of reducing the size of files that you’re sending to mobile devices. Read more…

August 10, 2011 — Media queries are the third pillar in Ethan Marcotte’s implementation of responsive web design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Read more…

January 12, 2011 — Everything you need to know about responsive design to get started. Let’s explore how to respond to the user’s behavior and environment based on screen size, platform and orientation. Read more…

July 19, 2010 — This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support - small devices such as the iPhone, and Android devices. Read more…