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!

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

Can I use... Support tables for HTML5, CSS3, etc 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.

Entendiendo los Sprites Siempre cuesta entender un poco el funcionamiento de los sprites cuando los vemos por primera vez, así que vamos a intentar definirlos lo más simplemente posible: “Una imagen en Sprite es un conjunto de imágenes agrupadas en una sola imagen” Sin sprite lo que hacemos es usar un archivo por cada imagen que queremos mostrar y si tenemos, por ejemplo, 3 iconos serían 3 archivos diferentes: 3 Peticiones al servidor, una por cada archivoCada petición tiene un tiempo de espera aparte del tiempo de descargaTenemos que crear 3 imágenes Con sprites lo que intentamos es unir todas esas imágenes en una sola: Una sola petición al servidorHemos creado UNA SOLA imagenPodemos estructurar mejor nuestro CSS Pero… De verdad optimizan el tiempo de descarga? Veamos. Tenemos una web con 3 imágenes, y los test arrojan los siguientes resultados: Requests: 4 (3 imágenes y el .HTML) Peso total de la página: 6.2kB Tiempo de descarga: 162ms Tiempo usado por tipo de contenido: Imagenes 73.77% HTML 26.23%

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.

Font Awesome, the iconic font and CSS toolkit