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:  diseño web

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!

Gridpak Revisited: A Closer Look at the Responsive Grid Generator One of the most interesting and useful responsive grid generators around is a tool called Gridpak, which allows you to use a simple and fun UI to create fluid, media-query driven grids. We reviewed Gridpak around a year ago and came to the conclusion that, although useful, it came up short in the area of user friendliness when it came to implementing the code. The developers have made some progress in this area and I think it’s about time we took another look. Join us as we dive into how Gridpak has improved its code offering and structure to provide a better, more streamlined experience for users. Meet Gridpak Gridpak has been featured in quite a few responsive web design tool roundups, so you’ve probably come across it a time or two. In case you didn’t read our last article, what you’re seeing here is a visual representation of your grid. Adding Breakpoints To get started, grab the big circle on the right that contains two arrows and drag it left or right. Tweaking The Grid The Download

Cloud Four Blog Etiqueta meta Viewport El Viewport es una de las etiquetas más representativas de la web móvil, que nos permite configurar cómo debe interpretar una página el navegador web para móviles. Inicialmente creada por Apple para definir diversas directrices sobre cómo el iPhone debe renderizar un documento web, el viewport es una etiqueta META que se ha convertido en un estándar en el momento actual. La mayoría de dispositivos móviles la soportan en la mayor gama de sistemas operativos, lo que la convierte en un integrante imprescindible para cualquier página que esté pensada para verse también en dispositivos en movilidad. El viewport es uno de esos conceptos que cuesta más de explicar que de entender, o por lo menos a mí me lo parece. Quizás tampoco sea el interlocutor más adecuado para hablar de esta etiqueta META, pero alguien la tiene que tratar con el detalle que se merece en el Manual para el diseño web en móviles. Entender el viewport Comencemos por entender qué es el viewport. ¿Sencillo? Conclusión

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

FlexNav - Flexible, Device Agnostic Navigation A Device-Agnostic Approach to Complex Site Navigation FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav). Note: If you find a bug, please file an issue and note device and browser versions. Download on GitHub → Basic Usage Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav" data-breakpoint="800"><li>... Add the small screen menu button somewhere outside your navigation markup:<div class="menu-button">Menu</div> Add flexnav.css to the head of your document:<link href="css/flexnav.css" rel="stylesheet" type="text/css" /> Add jquery.flexnav.min.js before the closing body tag:<script type="text/javascript" src="js/jquery.flexnav.min.js"></script> Initialize FlexNav right before your closing body tag:$(".flexnav").flexNav(); Options

Responsive Web Design Guidelines and Tutorials In this overview you will find the most useful and popular articles we have published on Smashing Magazine on Responsive Web Design. Quick Overview Design Process In The Responsive Age11 You cannot plan for and design a responsive12, content-focused13, mobile-first14 1 website the same way you’ve been creating websites for years—you just can’t. If your goal is to produce something that is not fixed-width and serves smaller devices just the styles they require, why would you use a dated process that contradicts those goals? I’d like to walk you through some problems caused by using old processes with responsive design. Read more…17 Responsive Web Design: What It Is and How To Use It18 Almost every new client these days wants a mobile version of their website. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Read more…20 A Foot On The Bottom Rung: First Forays Into Responsive Web Development21

Can I use... Support tables for HTML5, CSS3, etc