Pingback: CodePoet Re-designed for WordPress Professionals

Article source: http://build.codepoet.com/2012/05/11/wordpress-meet-responsive-design/

May 22nd, 2012Tweet

Download MP3

More huge, terrible, question on answer action. We talk in this area (roughly in order):

• Ajax pagination, WordPress, and SEO
• Developers who insist on screwing up semantic markup
• Resources for getting started with Git (roundup by Brad Frost)
• Comparing/Confusing Git and FTP
• Responsive metaphors, the noscript tag, and picking a solution
• Finding, removing, and dealing with unused styles in CSS
• Using Google Analytics as a tool in project upkeep
• Is there a way to do overflow-x: hidden in browsers that don’t support it?
• Email. Does it suck? Why are there no alternatives?
• CSS image replacement. Why can’t we just chuck an img in a h1 tag and call it a day? Is that just as excellent for search engines?

Sponsored by

• Mijingo – Video Training and Screencasts for Web Designers Developers

Article source: http://shoptalkshow.com/episodes/019-rapidfire-5/

© 2012 Panic Inc. Coda is a registered trademark of Panic, Inc.

Website screenshot courtesy Teenage Engineering AB.

* AirPreview requires break hold of Diet Coda.

iPad and Mac are trademarks of Apple Inc., registered in the U.S. and additional countries. App Store is a service mark of Apple Inc.

Article source: http://www.panic.com/coda/

The real conflict behind picture and @srcset

Some public do a lot of research before they travel. They read guidebooks. They like to know what they are going to do before they get there.

Others want to experience the new house and let the serendipity happen. In their minds, preparation ahead would take all of the fun out of the trip.

Either approach works fine. But anyone who has travelled in a group knows what happens when the person who plans ahead is forced to contend with the care free attitude of a name who desires to wait until the last minute to choose what to do.

And that is essentially the conflict we have between the browser’s lookahead pre-parser and responsive metaphors.

What does the lookahead pre-parser do?

In recent years, browser makers have place an emphasis on making pages load as quickly as possible. The lookahead pre-parser is part of their efforts.

The Internet Explorer team describes the lookahead pre-parser as follows:

To reduce the delay inherent in downloading script, stylesheets, metaphors, and additional resources referenced in an HTML page, Internet Explorer desires to request the download of those resources as early as possible in the loading of the page.… Internet Explorer runs a second instance of a parser whose job is to hunt for resources to download while the main parser is paused. This mode is called the lookahead pre-parser because it looks ahead of the main parser for resources referenced in shortly markup.

The lookahead pre-parser is much simpler than the full parser used to determine how the page will be rendered. Because the scripts and css have yet to be processed, the lookahead pre-parser is taking some guesses in this area what assets will be downloaded:

The download requests triggered by the lookahead are called “approximate” because it is possible (not likely, but possible) that the script run by the main parser will change the meaning of the subsequent markup (for instance, it might adjust the BASE hostile to which relative URLs are collective) and result in the approximate request being wasted.

How lookahead pre-parsers work isn’t that vital. What does matter is that the browser desires to start downloading assets before full page layout has been determined. To be successful, the pre-parser desires to know what the page is likely to do ahead of time.

Responsive metaphors travel without a guidebook

If the lookahead pre-parser is the tourist with a detailed itinerary of places to visit, responsive metaphors are the go-with-flow tourist waiting to see what things look like before choosing what to do.

In a responsive web design, the layout and metaphors are all fluid. The size of any given image cannot be determined until the page layout is calculated by the rendering engine.

All of the solutions suffer from this conflict

No matter if you favor picture, @srcset, or some additional solution, the fundamental conflict between the lookahead pre-parser and responsive metaphors persists. Let me demonstrate with some of the more well loved options.

@srcset min-width only

One of the largest points of confusion for the srcset bid was understanding what the width and height attributes in the new syntax were supposed to represent.

Originally, I thought the 600w 200h in the example syntax represented the image size. But instead, they list the smallest viewport pledge that should be used for a particular image. Reckon CSS min-width being used in a media query.

Once I understood what the width was meant to represent, I started to see the shortcomings of this approach. No matter what values where listed in srcset would need to match the breakpoints specified in the design’s media queries.

Jeremy Keith pointed out that by only supporting “min-width”, srcset will have difficulty matching breakpoints defined using max-width in CSS. He writes:

One of the compensation of media queries is that, because they support both min- and max- width, they can be used in either use-case: “movable Initially” or “Desktop Initially”.

Because the srcset syntax will support either min- or max- width (but not both), it will therefore favour one case at the expense of the either.

Both use-cases are valid. In person, I happen to use the “movable Initially” approach, but that doesn’t mean that additional developers shouldn’t be able to take a “Desktop Initially” approach if they want. By the same logic, I don’t much like the thought of srcset forcing me to take a “Desktop Initially” approach.

The inability of srcset to match breakpoints defined in media queries is just the beginning of the challenges.

@srcset px only

The @srcset attribute currently only supports px and not additional units like ems which we’ve advocated using in responsive designs. Why this limitation? Odin Hørthe Omdal clarified why:

You can use em and % freely in your stylesheets/CSS. The values from srcset is used to fetch the right resource during early prefetch, checked hostile to the width and height of the viewport (and only that viewport).

Having ems or % would make no sense whatsoever there, because you don’t know what they mean…If you make a solution that will support em/% in a meaningful way, you would have to wait for layout in order to know what size that means. So you will have slower-loading metaphors, and ignore the “we want pictures quick” requirement.

Signal familiar? It’s the conflict between the lookahead pre-parser and responsive metaphors again.

Without support for ems, it will be very hard to match srcset attributes to responsive design breakpoints that use ems.

@srcset and picture maintenance nightmare

As the challenges of matching media queries to @srcset values became clearer to me, it also became apparent what a mess updating this code would be when a redesign occurred. This is a problem for both @srcset and picture as D. Pritchard pointed out on the WhatWG list:

I dread the day when I have to dig through, possibly hundreds of pages, with multiple metaphors per, to update the breakpoints and resolutions. Surely there’s a better way to manage breakpoints on a global level rather than burying the specifics within the elements or attributes themselves.

Unfortunately, no one has suggested a better way yet likely because most of the global policy for a site exist in CSS which is parsed much shortly by the browser.

A progressive image format

Surely all these problems point out that we shouldn’t be messing around with breakpoints in HTML anyways. What we really need is a new progressive image format (or perhaps an ancient format used in a new way).

Le Roux Bodenstein describes well the appeal of this solution:

Use a progressive image format and HTTP range requests. Ideally the image metadata at the start of the file would include some hints in this area how many bytes to download to get an exact image size. The browser can then download the smallest size equal to or greater than the dimensions it desires based on the layout’s width as specified in CSS.

Unfortunately, this description also demonstrates why this approach will also battle the lookahead pre-parser. How will the browser know when to stop downloading the image? It will know based on the size of the image in the layout.

And so on and so on

I could list additional proposed solutions. Each has their own merits and problems, but they all suffer from the same conflict due to the fact that the proper size of a responsive image isn’t known until the layout is complete which is too late for the lookahead pre-parser.

No intrinsic cut off points for metaphors

What if we’re complicating this too much. Perhaps we shouldn’t try to replicate the breakpoints in HTML. Instead, we should simply supply different sizes of the image and let the browser choose on the best version.

There are two problems with this thought.

1. How does the browser know when to download each image? At the time of the lookahead pre-parser, it doesn’t know what size the image will be. So it will need you to tell it when to use each size image.
2. If you’re not tying the selection of metaphors to the breakpoints in your design, how do you choose when you should switch metaphors? Should you make three versions of each image? Five? Ten? Should you switch them at 480 because that is the iPhone width in landscape and then lament your choice if rumors of a taller iPhone screen come to pass?

The problem is there is nothing intrinsic to the image that would guide you in deciding where you should switch from one size of the image to another. No matter what we select will be entirely arbitrary unless we base it on our design breakpoints.

What matters more: lookahead pre-parser or responsive metaphors?

Since coming to the realization that the real conflict is between the lookahead pre-parser and responsive metaphors, I’ve been wondering which we should prioritize.

The lookahead pre-parser has been essential to providing a better experience for users given the way that web pages have been traditionally coded. Doing anything that prevents the pre-parser from effective seems like a step backward.

At the same time, while it may seem responsive metaphors is an instigator issue, the largest impact is felt by users. Downloading metaphors that are too large for the size that they are showed at makes pages load more slowly. It is possible that the performance gains from the pre-parser could be lost again due to unnecessarily large image downloads.

For existing web content, the lookahead pre-parser is undoubtably the fastest way to render the page. But if web development moves towards responsive metaphors as standard practice, then delaying the download of metaphors until the proper size of the image in the layout can be determined may really be quicker than using the lookahead pre-parser. The difference in size between a retina image for iPad and an image used on a low pledge mobile phone is significant.

It seems like this tradeoff ought to be measurable in some way so we can quantify what the impact would be. I’m not skilled enough to construct that test, but hopefully others can help evaluate it so we can make an informed choice.

Two years shortly and I finally know the problem

It has been two years since I initially started looking at metaphors in responsive designs. It seemed simple. The img tag had one src and we needed multiple sources.

Until the WhatWG got fully engaged in this question, I thought I understood the problem. Now I realize it was much larger and more hard than I originally thought.

We have an existential problem here. A chicken and egg riddle.

How do we reconcile a pre-parser that desires to know what size image to download ahead of time with an image technique that desires to answer to its environment once the page layout has been calculated?

I don’t know what the answer is, but I’m very curious to see what we choose.

Article source: http://blog.cloudfour.com/the-real-conflict-behind-picture-and-srcset/

May 4th, 2012Tweet

Download MP3

It’s RAPIDFIRE time! No guests, no hot drama, and sadly this week no sponsors. We just dig into as many questions as we can. We talk in this area (roughly in order):

• Should clients have to pay for wellbeing updates?
• When to use a PHP framework like Yii, CodeIgniter or CakePHP
• How, Why, and When to use modern support tools like Modernizr
• Why is there no “wrapper” pseudo elements?
• Couldn’t we realize what CSS preprocessors can do with PHP?
• Dealing with health and a sedentary lifestyle
• Interactive elements in jQuery UI vs native HTML5
• Finding clever field names (Try Domainr or Thsrs)
• Disappear an image on scroll down
• Using JavaScript to insert/remove content at different width breakpoints
• Pricing yourself and the awkwardness of asking for money
• Making a triangle with shadow in just HTML/CSS (Dabblet)

Article source: http://shoptalkshow.com/episodes/017-rapidfire-4/

by: Chris Coyier

I recently heard Chris Eppstein give a talk (slides) in this area making better stylesheets and using SASS to do it. There were a couple of surprising bits in there, one of which was in this area “opt-in typography.” The thought was that instead of setting global styles for typographic elements like p, ul, ol, h1, h2, etc that you would instead apply those styles as a class, perhaps .text.

The thought is that there is a lot of places on a website where you want a clean slate to work from and not be worried in this area what global styles are doing. The classic example is lists, where when using them for things like navigation you likely don’t want the same margin/padding/list-style as you would within an article.

Further, you might have different sets of typographic styles you may want to apply at will. So, instead of global styles like this:

p  {    }
ul {    }
ol {    }
h1 {    }
h2 {    }
/* etc */

You would scope them to a class instead (using SCSS here):

.text-article {
  p  {    }
  ul {    }
  ol {    }
  h1 {    }
  h2 {    }
  /* etc */
}

.text-module {
  p  {    }
  ul {    }
  ol {    }
  h1 {    }
  h2 {    }
  /* etc */
}

In an area of the site that’s a blog post, you can snag your article typography, and in a sidebar module, you can grab the typography for that:

section class="main-content"
  article class="text-article"
    ...
  /article
/section
aside
  div class="module text-module"
     Texty module
  /div
  div class="module"
     Module in which typography isn't needed
  /div
/aside

Anthony Small feels the same way.

Of course, the effectiveness of this depends on the website. What kind of site it is and what the boards in it’s evolution it’s in. I suspect it would work better on websites that have a more “modular” architecture and that don’t have a huge set of legacy content. I’d be interested in trying it on a fresh project.

Article source: http://css-tricks.com/opt-in-typography/

The spreadsheet has the data, but let’s digest it through thinking in this area it through the lens of practical questions.

To choose which technique is right for you and your project these questions may help as a guide. Many of the questions may apply to your project, so you’ll have to sort out which techniques fit what scenarios and find the overlap.

Do I have legacy content?

Which really means… do I have legacy content that is impractical to update? For instance, I have thousands of pages of content on CSS-Tricks and a writing staff of one.

The only technique I know of that works with absolutely no markup changes is Adaptive Metaphors. It works by routing requests for metaphors through a PHP file which intelligently serves (and makes if need be) metaphors of the appropriate size for the screen width.

Another question to question yourself is if you care in this area legacy content. Perhaps the vast majority of traffic to your site is for newer content in which you can make markup changes and thus take advantage of additional techniques. If that’s the case, read on to learn those additional techniques.

If you have a small project, a groundbreaking new project, or a project with legacy content that you are able go back and update, you are also able to choose a technique which does require special markup, so also read on.

Do I care in this area special markup?

This is really a sub-question of the above. Many of the techniques require you to use special HTML. For example, HiSRC has you place higher pledge metaphors as data-attributes:

img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"

I’d say this is a clean, valid, semantic technique, but it also means that you need these attributes on every img on your site, which may not be possible on sites with loads of legacy content.

If you know that special markup (or specialized CSS) is not an option for you, really the only option is Adaptive Metaphors. Even Sencha.IO requires prefixing the src attribute which may not be possible with legacy content.

Do I care in this area semantics?

Some responsive metaphors techniques involve markup which isn’t strictly semantic. Ultimately, there is only one way an image can be semantic. That is if the src of it points to a real image and it has alt text unfolding that image. Brad Frost sums it up nicely:

@stowball Unfortunately its not that simple. A picture of a horse desires to be a picture of a horse or else its not a picture of a horse.

— Brad Frost (@brad_frost) April 5, 2012

In additional words, if the technique requires at any point the src of the image to be missing or link to a transparent GIF (or the like), that’s not semantic.

So why do some responsive metaphors techniques do this? Because having an image with a src that points to that image of a horse means that that image will start downloading as soon as that image gets parsed by the browser. There is no practical way to preclude this. Even if you super quickly swap out that src with a more appropriate version, now you’re downloading two metaphors instead of one which is a performance hit instead of a performance gain. You may choose that’s acceptable (e.g. “desktop” environments typically have more bandwidth). Usually if this technique is employed, the image in the src is the smallest possible image.

If semantics is vital to you, you should look at Adaptive Metaphors (covered above) or HiSRC, a plugin by Christopher Schmitt which you can use with a semantic src attribute.

A few of the techniques use noscript tags in which to house a fallback img in the case of no JavaScript being available. I’ll let you choose if that’s semantic or not.

Do I care in this area validity?

Validity as in “Does it validate?” according to the W3C Markup Validation Service. Validation is a tool to help you find problems and write better markup. But just because something doesn’t validate doesn’t make it terrible or incorrect. If invalid code works wonderfully in all browsers, you nor anyone else should care.

If you do care in this area validity (perhaps a client irrationally requires it from you and is holding your paycheck randsom) then there are a few techniques that you can’t use. The picturefill technique, for instance, uses the picture element to work its magic. This may ultimately be standarized, but it isn’t yet, so it’s technically invalid syntax. It’s also required that img elements have a src attribute, so techniques that remove that to get around the double-image-request problem are invalid.

I’d urge these techniques if validity is a requirement for you: Adaptive Metaphors, HiSRC, or Responsive Enhance. All of which use simple, valid img syntax that include a src.

Do I care in this area art direction?

Some responsive metaphors techniques serve different pledge versions of the exact same image. While that makes things simpler (i.e. less work) it may not acceptable. Here’s a visual example:

These metaphors are hand-crafted by a designer, cropped to retain meaning and impact. If you took the image on the right and just scaled it down, the public in the image would be very small and the feel of the image my be lost.

If this thought of art direction is vital to your project, you’ll need a technique that will allow you to disorder exactly which src to serve under which circumstances. This is picture exact (GET IT?) for picturefill which allows you to be very specific in this area sources and what circumstances get what.

picture alt="description"
  source src="small.jpg"
  source src="medium.jpg" media="(min-width: 400px)"
  source src="large.jpg" media="(min-width: 800px)"
/picture

JavaScript takes it from there.

Do I care in this area JavaScript?

Most of these responsive image techniques utilize JavaScript to work their magic. Some only a tiny bit to set a cookie, but JavaScript none the less. Some of them have you place an img in a noscript tag so that there is a fallback image in the case that the user has JavaScript turned off. If you don’t like that, and you need to make absolutely sure that your metaphors work without JavaScript, Sencha.IO is your best bet. This service works by identifying your device through it’s User Agent string and serving an appropriately sized image. So you link to the largest (reasonable) version you have of it and Sencha will squeeze it down and server smaller versions if need be (it doesn’t scale up, for obvious reasons).

What in this area JavaScript *library* dependency?

HiSRC and rwdImages are both jQuery dependent. If your project is using a different library, these probably aren’t for you. But hey, you could port it and open source that! If you aren’t using a library, well, you probably should be but let’s not get into that.

Do I care in this area Server Side Components?

Some of these techniques aren’t solely JavaScript dependent. Adaptive Metaphors works it’s magic primarily through .htaccess and PHP. Well, .htaccess presupposes an Apache server. And, while of course we all know and like PHP (ahem), many websites run on technologies like Ruby or Python.

Responsive Metaphors (the original Thread Group technique) also uses .htaccess. So if you’re using something like Nginx as web server, this is either out or you’ll have to port over the .htaccess component to Nginx’s similar-but-different syntax.

Do I care in this area bandwidth testing?

Testing the browser dialogue box width and making decisions on what image to serve based on that is pretty cool and fundamental to the concept of responsive metaphors. But it’s really only half of what the choice of what image should be served should be based on. The additional half is available bandwidth. If the user has a very quick internet connection speed, serving large metaphors is OK. If the user has a very slow internet connection speed, they should get smaller metaphors (regardless of screens size). Unfortunately native bandwidth media queries don’t exist.

Two of the current techniques do bandwidth testing as part of their choice making: Foresight.js and HiSRC (both are based on the technique in Foresight.js). It works by downloading a test file and measuring how long it took (configurable). The test itself is a affront performance hit, but theoretically the savings gained by serving metaphors based on knowing the current bandwidth is a net (GET IT?) gain.

Do I care in this area relying on third parties?

Sencha.IO is a completely third-party way of handling responsive metaphors. As far as I know, it works fantastic and hasn’t been inflicted with any major downtime, but of course you always run that risk.

You might be thinking: Wow, the Sencha.IO technique is really cool but I worry in this area the third-party dependency. I wish I could run that on my own server. If you want to go down that road, there is the public WURFL database and this Server Side Responsive Metaphors technique which puts that to work locally.

There are also third-party services like Device Atlas Cloud which does device detection for you. It’s also a third-party dependency for your app. No doubt their goal and focus is staying up and quick at all times, but you have to be very careful in this area who and what you rely on for your business.

Is there a specific CMS with specific CMS powers involved?

Say your project is in WordPress. WordPress has a media uploader built in. When you upload an image with it, it can make multiple versions (scaling down) of that image for you. That’s pretty cool and powerful and you could/should take advantage of that. Keir Whitaker talks in this area using that ability in his article Automatic Responsive Metaphors in WordPress.

This isn’t just a WordPress thing though. I’m sure the concepts at work here could be done (or made to be done) in any Content Management System.

Can I wait for the future?

The release of the “new iPad” (the third one, for longevity) is what sparked a lot of these techniques and conversations. Its high pixel density is fantastic for vectors and huge photos, but really not fantastic for things like small icons that need to be scaled up to be the right size and can be blurry. But serving higher pledge icons means larger file sizes and slower websites. Hence, the need to only serve them in situations/environments that need them.

The world of web standards is aware of this problem. There is a whole group dedicated to talking in this area it. In time, they may decipher it and then we can start using no matter what way they come up with (high and mighty its awesome and better than what we have now).

It may be flipping out the src of metaphors through CSS content like Nicolas Gallagher suggested. It might be the picture element. It might be a srclist attribute in HTML or src property in CSS. It might be a prefix.

More resources

• Jason Grigsby has an epic three-part run on responsive metaphors starting here.
• Christopher Schmitt’s slides on a whole talk in this area responsive metaphors.
• Mat Marquis on Responsive Metaphors: How they Nearly Worked and What We Need

Article source: http://css-tricks.com/which-responsive-images-solution-should-you-use/

May 15th, 2012Tweet

Download MP3

This week we were joined by Gene Crawford, master of the South Carolinian Internet and commander of the triforce that is Unmatched Style. Gene cut his teeth doing client work for many years and now does spectacular web conferences like ConvergeSE. We talk in this area (roughly in order):

Followup’n’Drama:

• Running is excellent for your back
• Louis Lazaris on Health Tips for Web Developers
• Opera gets Webkitty
• Vendor bang bang Vendor bang bang

Q A

• Hey fantastic job. But what if we used Squarespace instead?
• How many years of experience do you really have?
• How are we handling metaphors for the “retina” show?
• Do we start the design process with actual pen and paper? Or something like Balsamiq. Also, Styletil.es
• Where do you add groundbreaking new CSS styles into an existing project? How do you stay methodical?
• What tools do we use for testing usability of websites? Silverback.
  
  Dave’s dog is a menace.

Sponsored by

• Mijingo – Video Training and Screencasts for Web Designers Developers

Winners of the Responsive Web Design with HTML5 and CSS3 book

• Jeremy Worboys
• Barry Maxwell
• Kyle Gordy

More Gene

• @genecrawford / @unmatchedstyle
• crawfishstudios.com
• period-three.com
• unmatchedstyle.com
• convergeSE.com

Article source: http://shoptalkshow.com/episodes/018-with-gene-crawford/

Recently, all of the ongoing conversation around responsive metaphors just got real: a solution is currently being discussed with the WHATWG. And we’re in the thick of it now: we’re throwing around references to picture and img set; making vague references to polyfills and hinting at “use cases” as though developers everywhere are following every missive on the topic. That’s a lot to parse through, especially if you’re only tuning in now—during the final seconds of the game.

The markup pattern that gets selected stands to have a tremendous shape on how developers build websites in the future. Not just responsive or adaptive websites, either. All websites.

What a long, weird, etc.

Let’s go over the path that led us here one more time, with feeling:

The earliest conversation of responsive metaphors came in this area—predictably enough—framed in the perspective of responsive web design. A full-blood loss image in a flexible container requires an image large enough to cover the widest possible show size. An image designed to span a container two thousand pixels wide at its largest means serving an image at least two thousand pixels wide. Scaling that image down to suit a smaller show is a negligible matter in CSS, but the requested image size remains the same—and the smaller the screen, the better the chance that bandwidth is at a premium.

It’s clear that developers’ best efforts to mitigate these wasteful requests were all doomed to fall small—and not for lack of talent or effort. Some of the utmost minds in the mobile web—and web development in general, really—had come together in an effort to decipher this problem. I was also there, for some reason.

I covered early efforts in my previous ALA article, so I’ll spare everyone the gruesome details here. The bottom line is that we can’t hack our way out of this one. The problem remains clear, though, and it desires to be solved—but we can’t do it with the technologies at our disposal now. We need something new.

Those of us effective on the issue formed the Responsive Metaphors Community Group (RICG) to facilitate conversations with standards bodies and browser representatives.

“W3C has produced Community Groups and Business Groups so that developers, designers, and anyone passionate in this area the Web has a house to have discussions and circulate documents.”
—http://www.w3.org/community/

Unfortunately, we were laboring under the depression that Community Groups shared a deeper inherent connection with the standards bodies than it really does. When the WHATWG proposed a solution last week, many of the public involved in that conversation hadn’t participated in the RICG. In fact, some key choice makers hadn’t so much as heard of it.

Proposed markup patterns

The pattern currently proposed by the WHATWG is a new set attribute on the img element. As best I can tell from the description, this markup is intended to decipher two very specific issues: an equivalent to ‘min-width’ media queries in the ’600w 200h’ parts of the string, and pixel density in the ’1x’/’2x’ parts of the string.

The proposed syntax is:

img src="face-600-200@1.jpg" alt=""
    set="face-600-200@1.jpg 600w 200h 1x,
         face-600-200@2.jpg 600w 200h 2x,
         face-icon.png      200w 200h"

I have some concerns around this new syntax, but I’ll get to that in a bit.

The markup pattern proposed earlier by the RICG (the community group I’m part of) aims to use the inherent flexibility of media queries to determine the most appropriate asset for a user’s browsing perspective. It also uses behavior by now specced for use on the video element—in the way of media attributes—so that conditional loading of media sources follows a predictable and regular pattern.

That markup is as follows:

picture alt=""
   source src="mobile.jpg" /
   source src="large.jpg" media="min-width: 600px" /
   source src="large_1.5x-res.jpg" media="min-width: 600px, »
       min-device-pixel-ratio: 1.5" /
   img src="mobile.jpg" /
/picture

Via Github, this pattern has been codified in something as close to a spec as I could manage, for the sake of having all the key implementation details in one house.

Polyfills

So far, two polyfills exist to bring the RICG’s proposed picture functionality to older browsers: Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture.

To my knowledge, there are currently no polyfills for the WHATWG’s newly proposed img set pattern. It’s worth noting that a polyfill for any solution relying on the img tag will likely suffer from the same issues we encountered when we tried to apply a custom ”responsive metaphors” solution in the past.

Opportunely, both patterns grant a reliable fallback if the new functionality isn’t natively supported and no polyfill has been applied: img set using the image’s original src, and picture using the same fallback pattern proven by the video tag. When the new element is recognized, the fallback content provided within the element is ignored—for example, a Flash-based video in the case of the video tag, and an img tag in the above picture example.

Differing proposals

Participants in the WHATWG have stated on the public mailing list and via the #WHATWG IRC channel that browser representatives prefer the img set pattern, which is an vital significance during these conversations. Most members of the WHATWG are representatives of major browsers, so they know the browser side better than anyone.

On the additional hand, the web developer community has strongly advocated for the picture markup pattern. Many developers familiar with this subject have stated—in no uncertain terms that the img set syntax is at best unfamiliar—and at worst completely not legible. I can’t recall seeing this kind of unity among the community around any web standards conversation in the past—and in a conversation in this area markup semantics, no less!

We’re on the same team

While the WHATWG’s preferences, and the web developer community’s differing preferences, certainly should be considered as we finalize a standard solution to the problem of responsive metaphors, our highest priority must remain providing a clear benefit to our users: the desires of the user trump convenience for web developers and browser developers alike.

For that reason (for the sake of those who use the web), it’s critical not to cast these discussions as “us vs. them.” Standards representatives, browser representatives, and developers are all partners in this endeavor. We all serve a higher goal: to make the web accessible, usable, and delightful for all. No matter what their stance on img set or picture, I’m certain everyone involved is effective toward a common goal, and we all agree that a ”highest common denominator” approach is indefensible. We simply cannot serve massive, high-pledge metaphors indiscriminately. Their potential cost to our users is too fantastic—especially considering the tens of thousands of users in developing countries who pay for every additional kilobyte they consume, but will see no benefit to the huge file they’ve downloaded.

That said, I have some major issues with the img set syntax, at least in its present incarnation:

1. Use Cases

Use cases are a list of potential applications for the markup patterns, the problems that they stand to decipher, and the benefits.

I’ve published a list of use cases for the picture element on the WHATWG wiki. It is by no means exhaustive, as picture can deliver an image source based on any combination of media queries. The most common use cases are screen size and pledge, for certain, but it could extend as far as serving a layout-appropriate image source for show on screen, but a high-pledge version for printing—all on the same page, without any additional scripting.

At present, no list of use cases has been published for img set. We’ve been effective under the assumption, based on conversations on the WHATWG list and in the WHATWG IRC channel, that img set covers two uses specifically: serving high-pledge metaphors to high-pledge screens, and functionality similar to min-width media queries in the way of the 600w strings.

It’s vital that we have a way to take advantage of new techniques for detecting client-side capabilities as they become available to us, and the picture element gives us a solid foundation to build upon—as media queries evolve over time, we could find ourselves with countless ways to tailor asset delivery.

We may have that same foundation in the img tag as well, but in a inevitably fragmented way.

2. Margin for error

I don’t mind saying that the img set markup is inscrutable. It’s a markup pattern unlike anything seen before in either HTML or CSS. This goes well beyond instigator preference. An unfamiliar syntax will inevitably lead to authorship errors, in which our end users will be the losers.

As I said on the WHATWG mailing list, though, given a completely foreign and somewhat puzzling new syntax, I reckon it’s far more likely we’ll see the following:

img src="face-600-200@1.jpeg" alt=""
       set="face-600-200@1.jpeg 600w 1x,
           face-600-200@2.jpeg  600w 2x,
           face-icon.png        200w"

Become:

img src="face-600-200@1.jpeg" alt=""
      set="face-600-200@1.jpeg 600 1x,
           face-600-200@2.jpeg 600 2x,
           face-icon.png       200"

Or:

img src="face-600-200@1.jpeg" alt=""
      set="face-600-200@1.jpeg, 600w 1x
           face-600-200@2.jpeg  600w 2x,
           face-icon.png        200w"

Regardless of how gracefully these errors should fail, I’m confident this is a “spot the differences” game very few developers will be excited to play.

I don’t claim to be any smarter than the average developer, but I am speaking as a core contributor to jQuery movable and from my experiences effective on the responsive BostonGlobe.com site: tailoring assets for client capabilities is kind of my thing. To be perfectly honest, I still don’t know the proposed behavior fully.

I would despise to reckon that we could be paving the way for countless errors just because img set is simpler to apply in browsers. Implementation on the browser side takes house once; authoring will take house thousands of times. And according to the design principles of HTML5 itself, instigator desires must take precedence over browser maker desires. Not to mention those additional HTML5 design principles: decipher real problems, pave the cowpaths, support existing content, and avoid needless complexity.

Avoid needless complexity

Authors should not be burdened with additional complexity. If implemented, img set stands to introduce countless points of failure—and, at worst, something so not legible that authors will simply avoid it.

I’m sure no one is going to defend to the death the thought that the video and audio tags are paragons of efficient markup, but they work. For better or worse: the precedents they’ve set are here to stay. Pave the cowpaths. This is how HTML5 handles rich media with conditional sources, and authors are by now familiar with these markup patterns. The potential costs of deviation far outweigh the immediate benefit to implementors.

Any improvements to client-side asset delivery should apply universally. By introducing a completely disparate system to determine which assets should be delivered to the client, improvements may well have to be made twice to suit two systems: once to suit the familiar media attribute used by video tags, and once to suit the img tag lonely. This could leave implementors maintaining two codebases that effectively serve the same purpose, while authors learn two different methods for every advancement made. That sounds like the world before web standards, not the new, rational world standards are supposed to support.

The rationale that dare not speak its name

It’s hard to imagine why there’s been such a vehement defense of the img set markup. The picture element provides a wider number of potential use cases, has two functional polyfills today (while an efficient polyfill may not even be possible with the img set pattern), and has seen an unprecedented level of support from the developer community.

img set is the pattern ideal by implementors on the browser side, and while that is certainly a key factor, it doesn’t justify a deficient solution. My interest is that the unspoken line of reasoning hostile to picture on the WHATWG mailing list has been that it wasn’t invented there. My dread is that the consequences of that entrenched philosophy may fall to our users. It is they who will suffer when our sites fail (or when developers, unable to know the WHATWG’s challenging syntax, simply break down all users to download huge image files).

We the public who make websites

I’ll be honest: for me, no small part of this is in this area ensuring that we designers and developers have a voice in the standards process. The work that the developer community has place into the picture element solution is unprecedented, and I can only hope that it marks the start of a long and mutually beneficial relationship between we authors and the standards bodies—tumultuous though that start may be.

If you feel strongly in this area this topic, I encourage all designers and developers to join the WHATWG mailing list and IRC channel to participate in the ongoing conversation.

We developers should—and can—be partners in the creation of new standards. Lend your voices to this conversation, and to others like it in the future. The web will be better for it.

Article source: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

Really small answer: SASS

Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are by now pleased in LESS, that’s cool, at least you are doing yourself a favor by preprocessing.

Much longer answer: Read on.

The Much Longer Answer

The Learning Curve with Ruby and Command Line and No matter what

The only learning curve is the syntax. You should use an app like CodeKit to mind and compile your authored files. You need to know jack squat in this area Ruby or the Command Line or no matter what else. Maybe you should, but you don’t have to, so it’s not a factor here.

Winner: Nobody

Helping with CSS3

With either language, you can write your own mixins to help with vendor prefixes. No winner there. But you know how you don’t go back and update the prefixes you use on all your projects? (You don’t.) You also won’t update your handcrafted mixins file. (Probably.) In SASS you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. Yes you’ll have to keep your local preprocessor software updated and compile/push once in a while, but that’s negligible and thinking-free.

So what this comes down to is: SASS has Compass and LESS does not. But it goes deeper than that. The attempts at making a real robust project like Compass for LESS haven’t succeeded because the LESS language isn’t robust enough to do it properly. More on that next.

Winner: SASS

Language Ability: Logic / Loops

LESS has an ability to do “guarded mixins.” These are mixins that only take affect when a certain condition is right. Perhaps you want to set a background affect based on the current text affect in a module. If the text affect is “pretty light” you’ll probably want a dark background. If it’s “pretty dark” you’ll want a light background. So you have a single mixin broke into two parts with these guards that ensure that only one of them takes effect.

.set-bg-affect (@text-affect) when (lightness(@text-affect) = 50%) {
background: black; } .set-bg-affect (@text-affect) when (lightness(@text-affect) 50%) { background: }

So then when you use it, you’ll get the right background:

.box-1 { affect: .set-bg-affect(#BADA55); }

That is overly simplified, but you likely get the thought. You can do some fancy stuff with it. LESS can also do self-referencing recursion where a mixin can call itself with an updated value making a loop.

.loop (@index) when (@index 0) {
.myclass { z-index: @index; } // Call itself
.loopingClass(@index - 1); } // Stop loop
.loopingClass (0) {} // Outputs stuff .loopingClass (10);

But thats where the logic/looping abilities of LESS end. SASS has actual logical and looping operators in the language. if/then/else statements, for loops, while loops, and each loops. No tricks, just proper programming. While guarded mixins are a pretty cool, natural concept, language robustness goes to SASS. This language robustness is what makes Compass possible.

For example, Compass has a mixin called background. It’s so robust, that you can pass just in this area no matter what you want to that thing that it will output what you need. Metaphors, gradients, and any combination of them comma-separated, and you’ll get what you need (vendor prefixes and all).

This succinct and intelligible code:

.bam { @include background( image-url("foo.png"),
linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px) ); }

Turns into this monster (which is unfortunately what we need for it to work with as excellent of browser support as we can get):

.bam { background: url('/foo.png'),
-webkit-gradient(linear, 0% 0%, 100% 100%, affect-stop(0%, #333333),
affect-stop(100%, #00cc00)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, affect-stop(0%, #cc0000),
affect-stop(100%, #ffffff)); background: url('/foo.png'),
-webkit-linear-gradient(top left, #333333, #00cc00),
-webkit-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'),
-moz-linear-gradient(top left, #333333, #00cc00),
-moz-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'),
-o-linear-gradient(top left, #333333, #00cc00),
-o-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'),
-ms-linear-gradient(top left, #333333, #00cc00),
-ms-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'),
linear-gradient(top left, #333333, #00cc00),
radial-gradient(#cc0000, #ffffff 100px); }

Winner: SASS

Website Niceitude

LESS has a nicer, more usable website. The SASS documentation isn’t dreadful. It’s complete and you can find what you need. But when competing for attention from front end public, LESS has the edge. I don’t doubt this plays a large role in LESS currently winning the popularity race. Things may be changing though.

Winner: LESS

The @extend Concept

Say you declare a class which has a bit of styling. Then you want another class which you want to do just in this area the same thing, only a few additional things. In LESS you’d likely:

.module-b { .module-a(); /* Copies everything from .module-a down here */ border: 1px solid red; }

That’s an “include” essentially. A mixin, in both languages. You could use an include to do that SASS as well, but you’re better off using @extend. With @extend, the styles from .module-a aren’t just duplicated down in .mobule-b (what could be considered bloat), the selector for .module-a is altered to .module-a, .module-b in the compiled CSS (which is more efficient).

.module-a { /* A bunch of stuff */ } .module-b { /* Some unique styling */ @extend .module-a; }

Compiles into

.module-a, .module-b { /* A bunch of stuff */ } .module-b { /* Some unique styling */ }

See that? It rewrites selectors, which is way more efficient.

Winner: SASS

Variable Handling

LESS uses @, SASS uses $. The dollar sign has no inherit meaning in CSS, while the @ sign does. It’s for things like declaring @keyframes or blocks of @media queries. You could chalk this one up to personal preference and not a huge deal, but I reckon the edge here is for SASS which doesn’t confuse permanent concepts.

SASS has some weirdness with scope in variables though. If you overwrite a “global” variable “locally”, the global variable takes on the local value. This just feels kind of weird.

$affect: black; .scoped { $affect: white; affect: $affect; }
.unscoped { // LESS = black (global) // SASS = white (overwritten by local) affect: $affect; }

I’ve heard it can be useful but it’s not intuitive, especially if you write JavaScript.

Winner: Tossup

Effective with Media Queries

The way most of us started effective with @media queries was adding blocks of them at the bottom of your main stylesheet. That works, but it leads to mental disconnect between the original styling and the responsive styles. Like:

.some-class { /* Defaulting styling */ } /* Hundreds of lines of CSS */ @media (max-width: 800px) {
.some-class { /* Responsive styles */ } }

With SASS or LESS, we can bring those styles together through nesting.

.some-class { /* Defaulting styling */ @media (max-width: 800px) { /* Responsive styles */ } }

You can get even sexier with SASS. There is a really cool “answer-to” technique (see code by Chris Eppstein, Ben Schwarz, and Jeff Croft) for naming/using breakpoints.

=answer-to($name) @if $name == small-screen @media only screen and (min-width: 320px)
@content @if $name == large-screen @media only screen and (min-width: 800px) @content

The you can use them succinctly and semantically:

.column width: 25% +answer-to(small-screen) width: 100%

Note: requires SASS 3.2, which is in alpha, which you can install with gem install sass --pre. I don’t reckon there is any doubt this is a very nice way to work.

Winner: SASS

Math

For the most part, the math is similar, but there are some weirdnesses with how units are handled. For instance, LESS will assume the initially unit you use is what you want out, ignoring further units.

div { width: 100px + 2em; // == 102px (weird) }

In SASS, you get a clear error: Ill-assorted units: ‘em’ and ‘px’. I guess it’s debatable if it’s better to error or be incorrect, but I’d in person rather have the error. Especially if you’re dealing with variables rather than straight units and it’s harder to footstep down.

SASS will also let you perform math on “unknown” units, making it a bit more futureproof should some new unit come along before they are able to update. LESS does not. There is some more weird differences like how SASS handles multiplying values that both have units, but it’s esoteric enough to not be worth mentioning.

Winner: Narrowly SASS

Active Development

At the time of this writing…

Number of open issues on LESS: 392
Number of open issues on SASS: 84

Pending pull requests on LESS: 86
Pending pull requests on SASS: 3

Number of commits in the last month in LESS: 11
Number of commits in the last month in SASS: 35

None of that stuff is any definitive proof that one project is more active than the additional, but the numbers do seem to always leans toward SASS. As I know it, both of the leads work on the languages in no matter what small free time they have, as they both have additional major new projects they are effective on.

Winner: Probably SASS

http://css-tricks.com/sass-vs-less

Article source: http://css-tricks.com/sass-vs-less/