Showing posts with label media-queries. Show all posts
Showing posts with label media-queries. Show all posts

Saturday, December 07, 2013

Device State Detection with CSS Media Queries and JavaScript

Device State Detection with CSS Media Queries and JavaScript

Being able to detect device state at any given moment is important for any number of reasons and so it's important that web app CSS and JavaScript are in sync with each other. In working on the Mozilla Developer Networks' redesign, I found that our many media queries, although helpful, sometimes left JavaScript in the dark about the device state. Is the user viewing the site in desktop, tablet, or phone screen size? Easy from a CSS perspective but CSS doesn't directly speak with JavaScript. I've created a system based on media queries and z-index which can tell me which media query the user is viewing the site in at any given time, so that I can make adjustments to dynamic functionality whenever I want!

Friday, November 01, 2013

Conditional Media Query Mixins

Conditional Media Query Mixins
Sass makes working with media queries pretty excellent. You can nest them right within other blocks of CSS, which puts the properties and values you are changing right next to each other. That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain those changes separated by tons of other code or in a different file. We've covered this before. It was new in Sass 3.2.

Saturday, October 05, 2013

7 habits of highly effective media queries

7 habits of highly effective media queries
As we all know, media queries are responsive design's secret sauce. Here are some considerations for crafting high-quality media queries:

Wednesday, July 24, 2013

Simple Responsive Images With CSS Background Images

Simple Responsive Images With CSS Background Images
On an iPhone, a 290 × 183 pixel image that is 18 KB in size looks identical to the 452 KB, 1940 × 1229 pixel image on the MacBook Pro.

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. That conclusion might be premature, however. In fact, there's an easy, straightforward way to deliver responsive images that's supported by all of today's Web browsers: CSS background images.

Thursday, April 18, 2013

Element Queries

Element Queries
The idea of Element Queries is pretty simple - it's like a Media Query (specifically, the min-width/etc queries), but for a parent or ancestor element, rather than the viewport.

Tuesday, December 18, 2012

Responsive column layouts

Responsive column layouts

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn't require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

Friday, November 16, 2012

Understanding the viewport meta tag

Understanding the viewport meta tag
When working on a new web design one of things you need to think about is responsive design. Is the website you are about to make going to need a responsive design?

I think all external facing sites should take responsive design into consideration. There are some people who think that responsive design is not worth it as people on mobile devices can zoom in to see what they want, but I feel developers should make a website easy to use on any device.