background preloader

» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog

» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog
Hay, I wrote this in 2012! I still like the notion of the metaphorical connection between content-based sizing units (e.g. ems) and layout definitions (e.g. breakpoints). And the zooming behavior cited here was always meant more as a sidelong example than a core argument. –Lyza, March 11, 2015 If we’re going to be proportional… A core tenet of Responsive Web Design (RWD) is fluidity and proportion. @media all and (min-width: 500px) {} @media screen and (max-width: 800px) {} It’s a natural thought process: for windows or screens of particular width ranges, we want to flow our content in a particular way. Folks who design for traditional reading media—where the content really is king—don’t center design decisions around the absolute width of content-holding elements so much as around the optimal line lengths for the content they’re flowing. Thus actual column width is a function of font size and ems-per-line. Baseline expectations You may have seen the rule of thumb (useful, admittedly!) p.s. Related:  Responsive + Fluid

Using jPanelMenu with jRespond Using jRespond with jPanelMenu Responsive design is an amazing revolution in our industry. It’s changing every part of our process — definition, planning, design, development, and beyond. Responsive behavior is a big thing that no one is talking about, but everyone needs to be. jRespond is “a simple way to globally manage JavaScript on responsive websites.” jPanelMenu and jRespond are the perfect couple. Setting It Up First, get jPanelMenu and jRespond! For detailed documentation on jRespond, please visit the jRespond Github page. Note: The following example is pulled directly from this page. Start off by setting up jPanelMenu, referring to the documentation for specifics on options and API functions. Once jPanelMenu is ready to go, set up jRespond. Note: This is a very simple setup with only two breakpoints, small and large. Adding Functionality After your breakpoints have been registered with jRespond, you need to add some functionality hooks to those breakpoints. That’s it!

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. The fabulous photography used in the demo is by Bartek Lurka and it is licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported License. So, let’s do it! The Markup We will create two unordered lists, one for the main slider and one for the thumbnail navigation beneath the large image. The list for the thumbnail preview navigation will contain an absolute element (the first list element with the class ei-slider-element and the thumbnail list elements which consist of an anchor and an image (the thumbnail). Now, let’s add the style. The CSS First, we will define the style for the main wrapper. The JavaScript

Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3. You can read more here. Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more. Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6. The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements. Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years.

Responsive Navigation: Optimizing for Touch Across Devices As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Why do we care about touch across a wide range of screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes? Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. These common patterns of posture create easy to hit and hard to reach touch areas.

The orientation media query Page last changed today Right now Jason Grigsby’s excellent summary of the orientation media query is making the round of blogs and tweets, and that’s well deserved. Media queries will become extremely important in the near future, when we have to build websites that work on any device resolution from 300px to 1280px or more. Still, there’s one tiny nitpick I’d like to make, so that you fully understand when to use orientation and when to use device-width. orientation is supported by Android 2, Bolt, MicroB, and Firefox. And now, apparently, by the iPad. I’ve often discussed media queries with Vodafone in Düsseldorf, and in the end the consensus was that orientation is relatively useless, and that we should use device-width instead. First of all, device-width is vastly better supported. Secondly, device-width tells you what you need to know, while orientation doesn’t. That’s exactly what device-width tells you. There’s no way you can figure that out with only orientation. Concluding:

Media Queries for Standard Devices If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one. —Josh Brewer, March 10, 2010 A major component of responsive design is creating the right experience for the right device. If you're looking for a comprehensive list of media queries, this repository is a good resource. If you're reaction to this is: you should never base your breakpoints on devices!! Phones and Handhelds iPhones Galaxy Phones Google Pixel HTC Phones Nexus Phones Windows Phone Tablets iPads Galaxy Tablets Nexus Tablets Kindle Fire Laptops Media Queries for laptops are a bit of a juggernaut. Wearables Yes, we're going there. Apple Watch @media (max-device-width: 42mm) and (min-device-width: 38mm) { } Moto 360 Watch @media (max-device-width: 218px) and (max-device-height: 281px) { }

That Web Guy - An introduction to responsive web design: using media queries Written December 29, 2011. 4 comments. You’ve no doubt heard the term by now, but what exactly is Responsive Web Design? As the name suggests, Responsive Web Design (from hereon in referred to as RWD) is about designing your web site with the use of media queries so that it responds (changes the presentation) to the web browser width, or in the case of mobile devices, the capabilities of said device. In this article I’ll demonstrate a basic example which should get your creative juices flowing. How it used to work In the olden days a web designer would typically use Javascript to detect the browser size and redirect to one of the many versions of the web site that had been specifically created for whatever resolution your browser was using. Sadly I see this method still in use on many sites, though it’s likely those sites are still using legacy technology and simply haven’t thought about joining the rest of us cool kids in this century. How Responsive Web Design works Advantages: Confused?

A pixel is not a pixel is not a pixel Page last changed today Yesterday John Gruber wrote about the upped pixel density in the upcoming iPhone (960x640 instead of 480x320), and why Apple did this. He also wondered what the consequences for web developers would be. Now I happen to be deeply engaged in cross-browser research of widths and heights on mobile phones, and can state with reasonable certainty that in 99% of the cases these changes will not impact web developers at all. The remaining 1% could be much more tricky, but I expect Apple to cater to this problem by inserting an intermediate layer of pixels. One caveat before we start: because they’re unimportant to web developers I have mostly ignored the formal screen sizes, and I’m not really into disucssing the ins and outs of displays, pixel densities, and other complicated concepts. I do know what web developers are interested in, however. It’s easiest to explain when we consider zooming. The following two images illustrate what happens when the user zooms. Stay tuned.