Responsive Img - a jQuery Plugin for Responsive Images Supersize that Background, Please! With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code (Line wraps marked » —Ed.): Article Continues Below Example one shows a centered background image of 1280 by 960 pixels that is fixed to the viewing area (it doesn’t scroll with the document). But which image size will be big enough? There is also a case to be made for lower resolutions. Instead of using one fixed background size, a better solution would be to scale the image to make it fit within different window sizes. There are a couple of workarounds, however these all rely on the HTML img element (instead of CSS backgrounds). CSS3 backgrounds to the rescue#section1 Cover always fills the browser window, cutting off some hair or ears in the process, which is what I personally prefer for most cases.
Un guide simple pour la typographie responsive : blog Scopart Le 14/12/2012 dans Développement Aujourd’hui je vous propose une traduction de l’article A simple guide to responsive typography de Cameron Chapman traitant d’un aspect peu abordé dans les techniques de responsive design. La plus grande partie des articles qui traitent du « responsive design » mettent l’accent sur 2 aspects : une grille fluide et flexible, des images fluides et flexibles. La plupart d’entre eux ne parlent pas de la typographie. Et pourtant pour la majorité des sites Internet, le contenu est l’élément le plus important. Certes, pour les sites où le contenu principal est composé d’images ou de vidéos, cet aspect devient un peu moins important, mais il ne devrait quand même pas être négligé. La bonne nouvelle est que le responsive design au niveau typographique n’est pas particulièrement difficile à mettre en place. Principe de la typographie responsive Il existe deux façons principales de mettre en place une typographie responsive. Le maintien d’une longueur de ligne optimale
Grid-A-Licious Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. In Dec 2008, I decided to wrap the script into a Wordpress theme and release it as a christmas gift to the world. Today this floating grid layout effect is heavily used around the net and there are tons of different variations of the script to download and use. So, why am I continuing developing this? The plugin is totally rewritten and the biggest change since the previous versions of Grid-A-Licious (and other similar plugins) is that the items in the grid aren’t using absolute positioning any more. If this is something you’ve been looking for, go ahead and download the plugin and use it. width Default 225px gutter Default 20px selector Default .item animate Default false animationOption Default options below queue Default true
Perfect Full Page Background Image Share this: Ship custom analytics today with Keen.io. This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn't some fancy shenanigans like Flash Image above credited to this site. #Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo #CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version. Here is the CSS:
Media Queries jquery - Fixed Header and Footer with auto height for slider in middle How Fluid Grids Work in Responsive Web Design Responsive design is the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size. Most designers will choose a grid based layout since it’s easier to handle grid based layouts in different kind of devices. It’s your decision to choose between a fixed or fluid grid to design the layout. What is a Fluid Grid? It’s important to know the meaning of fluid grids before we start thinking about the designs. A fluid is a substance that continually deforms (flows) under an applied shear stress – Wikipedia So I’ll make things clear by explaining the above definition in simple practical terms. Importance of Fluid Grids In adaptive grids, we define pixel-based dimensions. Mobile devices are getting smaller in size and people prefer using them in their personal work. How Fluid Grids Work We used to design inside fixed grids with the 960px system. In fluid grids we define a maximum layout size for the design. Demo
CSS: Float right and position absolute doesn't work together Building an Adaptive Grid with MUELLER MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media queries. This post is a brief step–by–step tutorial on how to work with MUELLER. “The grid system is an aid, not a guarantee. Why another Grid System? Mainly because no other grid system met our requirements: Full control, clean code, maximum flexibility. Preface/Coding MUELLER does not help you decide on the number of columns (per media query), the width of your columns or the width of the margin between columns. Download & Install First, you obviously need to download the MUELLER source code. I assume you already have a working version of Compass, so you just need to place the two folders (grid, partials) and the file screen.scss in your Sass folder. First off, we're going to define columns for each device resp. media query. Basic Grid Structure That's basically it. Layouts & Templates ... Helpers Alternatives
How to Code HTML Email Newsletters This article was first published in 2006, then re-edited in 2011 — and now it’s been re-re-edited in 2015. HTML email newsletters have come a long way since this article was first published back in 2006. HTML email is still a very successful communications medium for both publishers and readers. Publishers can track rates for email opens, forwards, and clickthroughs, and measure reader interest in products and topics; readers are presented with information that’s laid out like a web page, in a way that’s more visually appealing, and much easier to scan and navigate, than plain text email. Coding an HTML email is a fun, practical problem for programmers to solve. This is actually the third revision of an article that was written and published on sitepoint.com in 2004, and includes new, up-to-date material that will help you ensure that your HTML email newsletters meet the requirements of today’s email clients. HTML Email Fundamentals Step 1: Use HTML Tables for Layout Step 2: Add CSS Styles